@codename/deck 0.2.0 → 0.4.0

package/src/kit.js

@@ -3,18 +3,24 @@
 // deck's own kit holds the usual layouts; a host's (an organisation's, a project's) and the deck
 // file's own `kit:` go over it, in that order. A layout is a grid: its slots by name, the areas
 // they take, its tracks, how its words sit, what paper it is on, how big its logo shows, and the
-// PowerPoint layout it is nearest to; a kit may turn one of the usual layouts off. Its tokens may
-// hold a logo, a picture inside the kit and never an address. Everything is checked against a small
-// grammar; what fails is dropped, with a reason. Pure.
+// PowerPoint layout it is nearest to, whether its lists are drawn as a mind map or a figure (cards, numbers, a timeline,
+// chevrons, a programme, a pyramid, a bento), whether its `##` parts face each other or make a matrix, whether it shows
+// the deck's contents, and the art a template draws behind it, layers among the kit's pictures; a kit may turn one of
+// the usual layouts off. Its tokens may hold a logo, a picture inside
+// the kit and never an address, as its pictures are. Everything is checked against a small grammar;
+// what fails is dropped, with a reason. Pure.
 
 /** @typedef {{ required?: boolean, max_words?: number, max_chars?: number, items?: [number, number], item_max_words?: number, heading_max_words?: number, kind?: string }} Budget */
-/** @typedef {{ label?: Record<string, string> | string, intent?: string, use_when?: string, avoid_when?: string, slots: string[], budgets: Record<string, Budget>, areas: string[][], columns: string[], rows: string[], align: 'start' | 'center' | 'end', justify: 'start' | 'center' | 'end', paper: 'paper' | 'fill' | 'ink' | 'soft', title: 'normal' | 'large' | 'huge', logo: 'big' | 'small' | 'none', pptx: string, numbered: boolean }} Layout */
-/** @typedef {{ name?: string, tokens: Record<string, any>, layouts: Record<string, Layout> }} Kit */
+/** @typedef {'bullets' | 'mindmap' | 'steps' | 'metrics' | 'timeline' | 'process' | 'agenda' | 'pyramid' | 'bento'} List */
+/** @typedef {{ label?: Record<string, string> | string, intent?: string, use_when?: string, avoid_when?: string, slots: string[], budgets: Record<string, Budget>, areas: string[][], columns: string[], rows: string[], align: 'start' | 'center' | 'end', justify: 'start' | 'center' | 'end', paper: 'paper' | 'fill' | 'ink' | 'soft', title: 'normal' | 'large' | 'huge', logo: 'big' | 'small' | 'none', lists: List, parts: 'none' | 'versus' | 'matrix', contents: boolean, pptx: string, numbered: boolean, art?: string[] }} Layout */
+/** @typedef {{ name?: string, tokens: Record<string, any>, layouts: Record<string, Layout>, pictures: Record<string, string> }} Kit */
 
 const NAME = /^[a-z][a-z0-9-]{0,31}$/
 const TRACK = /^(auto|min-content|max-content|\d{1,2}(\.\d)?fr|\d{1,3}%)$/
 const PPTX = ['Title Slide', 'Title and Content', 'Section Header', 'Two Content', 'Comparison', 'Title Only', 'Blank', 'Content with Caption', 'Picture with Caption']
-const ENUMS = /** @type {const} */ ({ align: ['start', 'center', 'end'], justify: ['start', 'center', 'end'], paper: ['paper', 'fill', 'ink', 'soft'], title: ['normal', 'large', 'huge'], logo: ['small', 'big', 'none'] })
+const ENUMS = /** @type {const} */ ({
+  align: ['start', 'center', 'end'], justify: ['start', 'center', 'end'], paper: ['paper', 'fill', 'ink', 'soft'], title: ['normal', 'large', 'huge'], logo: ['small', 'big', 'none'],
+  lists: ['bullets', 'mindmap', 'steps', 'metrics', 'timeline', 'process', 'agenda', 'pyramid', 'bento'], parts: ['none', 'versus', 'matrix'] })
 /** The corners a logo sits in, as `logoAt` names them, the first by default. */
 export const CORNERS = ['top-end', 'top-start', 'bottom-end', 'bottom-start']
 
@@ -24,21 +30,33 @@ export const CORNERS = ['top-end', 'top-start', 'bottom-end', 'bottom-start']
  */
 export const logoOf = (value) => (typeof value === 'string' && value.length <= 700_000 && /^data:image\/(png|jpeg|gif|webp|svg\+xml);base64,[a-z0-9+/]+=*$/i.test(value) ? value : null)
 
+/**
+ * A picture of a kit's, a layer of a layout's art drawn behind its words over the whole slide: a picture inside the kit as a
+ * logo is, or an SVG written out (`data:image/svg+xml,…`), of 3 MB at most, never an address to fetch; else null. @param {unknown} value
+ */
+export const artOf = (value) => (typeof value === 'string' && value.length <= 3_145_728 && /^data:image\/(?:(?:png|jpeg|gif|webp|svg\+xml);base64,[a-z0-9+/]+=*|svg\+xml,[\w.!~*'()%/+=-]*)$/i.test(value) ? value : null)
+
 /** The names brains give the usual layouts, for the ones deck has. */
 export const ALIASES = /** @type {Record<string, string>} */ ({
   title: 'cover', 'title-slide': 'cover', 'two-columns': 'two-cols', 'two-column': 'two-cols', columns: 'two-cols', comparison: 'two-cols-header',
-  'three-columns': 'three-cols', 'section-header': 'section', divider: 'section', big: 'fact', number: 'fact', 'image-text': 'image-right', closing: 'end', thanks: 'end',
+  'three-columns': 'three-cols', 'section-header': 'section', divider: 'section', big: 'fact', number: 'fact', 'image-text': 'image-right', closing: 'end', thanks: 'end', 'mind-map': 'mindmap', map: 'mindmap',
+  toc: 'summary', contents: 'summary', 'table-of-contents': 'summary', outline: 'summary', 'sub-section': 'subsection', 'subsection-header': 'subsection',
+  cards: 'steps', kpi: 'metrics', kpis: 'metrics', stats: 'metrics', numbers: 'metrics', roadmap: 'timeline', milestones: 'timeline', chevrons: 'process',
+  schedule: 'agenda', programme: 'agenda', program: 'agenda', hierarchy: 'pyramid', mosaic: 'bento', vs: 'versus', 'face-off': 'versus', quadrant: 'matrix', quadrants: 'matrix', '2x2': 'matrix',
 })
 
 /** deck's own kit: the usual layouts, the ones Slidev names and the ones PowerPoint has, as data. */
 export const STANDARD = /** @type {Kit} */ ({
   name: 'standard',
   tokens: {},
+  pictures: {},
   layouts: Object.fromEntries(Object.entries(/** @type {Record<string, any>} */ ({
     default: { label: { en: 'Title and content', fr: 'Titre et contenu' }, pptx: 'Title and Content' },
     cover: { label: { en: 'Cover', fr: 'Couverture' }, justify: 'center', paper: 'fill', title: 'huge', logo: 'big', pptx: 'Title Slide', numbered: false },
     intro: { label: { en: 'Introduction', fr: 'Introduction' }, justify: 'center', paper: 'fill', title: 'large', logo: 'big', pptx: 'Title Slide', numbered: false },
     section: { label: { en: 'Section', fr: 'Section' }, justify: 'center', paper: 'ink', title: 'huge', pptx: 'Section Header', numbered: false },
+    subsection: { label: { en: 'Subsection', fr: 'Sous-section' }, justify: 'center', paper: 'soft', title: 'large', pptx: 'Section Header', numbered: false },
+    summary: { label: { en: 'Contents', fr: 'Sommaire' }, contents: true, pptx: 'Title and Content' },
     center: { label: { en: 'Centred', fr: 'Centré' }, justify: 'center', align: 'center', pptx: 'Title Only' },
     statement: { label: { en: 'Statement', fr: 'Affirmation' }, justify: 'center', align: 'center', title: 'large', pptx: 'Title Only' },
     fact: { label: { en: 'Big number', fr: 'Grand chiffre' }, justify: 'center', align: 'center', title: 'huge', pptx: 'Title Only' },
@@ -52,6 +70,16 @@ export const STANDARD = /** @type {Kit} */ ({
     'image-left': { label: { en: 'Picture left', fr: 'Image à gauche' }, pptx: 'Picture with Caption', justify: 'center' },
     'image-right': { label: { en: 'Picture right', fr: 'Image à droite' }, pptx: 'Picture with Caption', justify: 'center' },
     image: { label: { en: 'Picture', fr: 'Image' }, logo: 'none', pptx: 'Blank', numbered: false },
+    mindmap: { label: { en: 'Mind map', fr: 'Carte mentale' }, lists: 'mindmap', pptx: 'Title Only' },
+    steps: { label: { en: 'Steps', fr: 'Étapes' }, lists: 'steps', pptx: 'Title Only' },
+    metrics: { label: { en: 'Key figures', fr: 'Chiffres clés' }, lists: 'metrics', pptx: 'Title Only' },
+    timeline: { label: { en: 'Timeline', fr: 'Frise' }, lists: 'timeline', pptx: 'Title Only' },
+    process: { label: { en: 'Process', fr: 'Processus' }, lists: 'process', pptx: 'Title Only' },
+    agenda: { label: { en: 'Agenda', fr: 'Programme' }, lists: 'agenda', pptx: 'Title Only' },
+    pyramid: { label: { en: 'Pyramid', fr: 'Pyramide' }, lists: 'pyramid', pptx: 'Title Only' },
+    bento: { label: { en: 'Bento', fr: 'Mosaïque' }, lists: 'bento', pptx: 'Title Only' },
+    versus: { label: { en: 'Versus', fr: 'Face à face' }, parts: 'versus', pptx: 'Title Only' },
+    matrix: { label: { en: 'Matrix', fr: 'Matrice' }, parts: 'matrix', pptx: 'Title Only' },
   })).map(([name, given]) => [name, /** @type {Layout} */ (layoutOf(given).layout)])),
 })
 
@@ -98,12 +126,14 @@ export function layoutOf(given) {
     return value
   }
   const label = typeof given.label === 'string' || (given.label && typeof given.label === 'object') ? given.label : undefined
+  const art = Array.isArray(given.art) && given.art.length <= 8 && given.art.every((/** @type {unknown} */ one) => typeof one === 'string' && NAME.test(one)) ? given.art : undefined
+  if (given.art !== undefined && !art) problems.push('art is not 8 names at most')
   const words = (/** @type {any} */ v) => (typeof v === 'string' ? v.slice(0, 300) : undefined)
   return {
     layout: /** @type {Layout} */ ({
       label, intent: words(given.intent), use_when: words(given.use_when), avoid_when: words(given.avoid_when), slots, budgets, areas: rows, columns, rows: rowTracks,
-      align: pick('align', 'start'), justify: pick('justify', 'start'), paper: pick('paper', 'paper'), title: pick('title', 'normal'), logo: pick('logo', 'small'),
-      pptx: PPTX.includes(given.pptx) ? given.pptx : slots.length > 1 ? 'Comparison' : 'Title and Content', numbered: given.numbered !== false,
+      align: pick('align', 'start'), justify: pick('justify', 'start'), paper: pick('paper', 'paper'), title: pick('title', 'normal'), logo: pick('logo', 'small'), lists: pick('lists', 'bullets'), parts: pick('parts', 'none'), contents: given.contents === true,
+      pptx: PPTX.includes(given.pptx) ? given.pptx : slots.length > 1 ? 'Comparison' : 'Title and Content', numbered: given.numbered !== false, art,
     }),
     problems,
   }
@@ -123,14 +153,15 @@ function clean(given) {
 /**
  * Design tokens as the W3C's Design Tokens format (DTCG 2025.10) writes them, read into a kit's:
  * `color.light` and `color.dark` groups (bg, surface, fg, muted, accent) or flat colours, `font.sans`
- * and the like; each `$value` a hex string or a colour object with its `hex`. Tokens already flat
+ * and the like; each `$value` a colour string or a colour object with its `hex` and `alpha`. Tokens already flat
  * pass through. @param {any} given @returns {Record<string, any>}
  */
 export function tokensFrom(given) {
   if (!given || typeof given !== 'object') return {}
   if (!JSON.stringify(given).includes('"$value"')) return given
   const value = (/** @type {any} */ t) => (t && typeof t === 'object' && '$value' in t ? t.$value : t)
-  const colour = (/** @type {any} */ t) => { const v = value(t); return typeof v === 'string' ? v : typeof v?.hex === 'string' ? v.hex : undefined }
+  // A colour object's alpha kept, as #rrggbbaa.
+  const colour = (/** @type {any} */ t) => { const v = value(t); return typeof v === 'string' ? v : typeof v?.hex === 'string' ? `${v.hex}${typeof v.alpha === 'number' && v.alpha < 1 ? Math.round(Math.max(0, v.alpha) * 255).toString(16).padStart(2, '0') : ''}` : undefined }
   const face = (/** @type {any} */ t) => { const v = value(t); return Array.isArray(v) ? v.map(String) : typeof v === 'string' ? [v] : undefined }
   const NAMES = /** @type {const} */ ({ bg: 'paper', background: 'paper', paper: 'paper', fg: 'ink', text: 'ink', ink: 'ink', accent: 'primary', primary: 'primary', muted: 'muted', surface: 'soft', soft: 'soft' })
   const group = (/** @type {any} */ g) => Object.fromEntries(Object.entries(g ?? {}).filter(([k]) => k in NAMES).map(([k, t]) => [NAMES[/** @type {keyof typeof NAMES} */ (k)], colour(t)]).filter(([, v]) => v))
@@ -146,13 +177,13 @@ export function tokensFrom(given) {
 }
 
 /**
- * Kits merged, the later over the earlier: their tokens, their dark ones within theirs, and their layouts by name, each
- * checked; a layout given as false is taken away, but the default. A logo that isn't a picture inside the kit is dropped.
- * @param {...any} kits @returns {{ kit: Kit, problems: string[] }}
+ * Kits merged, the later over the earlier: their tokens, their dark ones within theirs, their layouts by name and their
+ * pictures, each checked; a layout given as false is taken away, but the default. A logo that isn't a picture inside the
+ * kit is dropped. @param {...any} kits @returns {{ kit: Kit, problems: string[] }}
  */
 export function mergeKits(...kits) {
   /** @type {Kit} */
-  const kit = { name: 'standard', tokens: {}, layouts: { ...STANDARD.layouts } }
+  const kit = { name: 'standard', tokens: {}, layouts: { ...STANDARD.layouts }, pictures: {} }
   const problems = []
   for (const given of kits) {
     if (!given || typeof given !== 'object') continue
@@ -161,6 +192,10 @@ export function mergeKits(...kits) {
       const next = tokensFrom(given.tokens), dark = next.dark && typeof next.dark === 'object' ? { ...kit.tokens.dark, ...next.dark } : kit.tokens.dark
       kit.tokens = { ...kit.tokens, ...next, ...(dark && { dark }) }
     }
+    for (const [name, picture] of Object.entries(given.pictures ?? {})) {
+      if (NAME.test(name) && artOf(picture)) kit.pictures[name] = picture
+      else problems.push(`picture ${name}: not a picture inside the kit`)
+    }
     for (const [name, definition] of Object.entries(given.layouts ?? given.types ?? {})) {
       if (!NAME.test(name)) { problems.push(`layout ${name}: not a-z, 0-9 and -`); continue }
       if (definition === false) { if (name !== 'default') delete kit.layouts[name]; continue }
@@ -182,6 +217,15 @@ export function labelOf(layout, name, lang) {
   return layout.label?.[lang] ?? layout.label?.[lang.split('-')[0]] ?? layout.label?.en ?? name
 }
 
+/**
+ * The layout a slide is drawn with: the one it names, by its name or a name brains give it, else the one its content
+ * suits. @param {{ index: number, settings: Record<string, any>, slots: { name: string, text: string }[] }} slide @param {Kit} kit
+ */
+export function layoutNameOf(slide, kit) {
+  const asked = String(slide.settings.layout ?? '').trim().toLowerCase()
+  return kit.layouts[asked] ? asked : kit.layouts[ALIASES[asked]] ? ALIASES[asked] : inferLayout(slide)
+}
+
 /**
  * The layout a slide that names none is given, from what it holds, as Pandoc's PowerPoint writer
  * chooses: the first slide is the cover; a heading alone, a section; slots beyond the first, the

package/src/look.js

@@ -41,12 +41,12 @@ export function tokensOf(settings, project = {}) {
 function clean(given) {
   /** @type {Partial<Tokens>} */
   const kept = {}
-  for (const key of /** @type {const} */ (['paper', 'ink', 'primary', 'muted', 'soft'])) if (typeof given[key] === 'string' && hex(given[key])) kept[key] = given[key]
-  if (given.dark && typeof given.dark === 'object') kept.dark = Object.fromEntries(Object.entries(given.dark).filter(([, v]) => typeof v === 'string' && hex(v)))
+  for (const key of /** @type {const} */ (['paper', 'ink', 'primary', 'muted', 'soft'])) if (typeof given[key] === 'string' && rgbOf(given[key])) kept[key] = given[key]
+  if (given.dark && typeof given.dark === 'object') kept.dark = Object.fromEntries(Object.entries(given.dark).filter(([, v]) => typeof v === 'string' && rgbOf(v)))
   if (given.fonts && Array.isArray(given.fonts.heading) && Array.isArray(given.fonts.body)) kept.fonts = { heading: given.fonts.heading.map(String), body: given.fonts.body.map(String) }
   if (typeof given.voice === 'string') kept.voice = given.voice
   if (typeof given.radius === 'number') kept.radius = given.radius
-  if (Array.isArray(given.series) && given.series.length && given.series.every((/** @type {unknown} */ c) => typeof c === 'string' && hex(c))) kept.series = given.series.slice(0, 6)
+  if (Array.isArray(given.series) && given.series.length && given.series.every((/** @type {unknown} */ c) => typeof c === 'string' && rgbOf(c))) kept.series = given.series.slice(0, 6)
   return kept
 }
 
@@ -55,30 +55,36 @@ function clean(given) {
  * @param {Tokens} tokens @param {'light' | 'dark'} scheme @returns {Scheme}
  */
 export function schemeOf(tokens, scheme) {
-  const light = hex(tokens.paper) ?? [255, 253, 248], dark = hex(tokens.ink) ?? [29, 27, 22]
+  // A see-through colour is seen over the paper it is on.
+  const light = rgbOf(tokens.paper) ?? [255, 253, 248], dark = rgbOf(tokens.ink, light) ?? [29, 27, 22]
   // A kit's own dark colours where it gives them (a design system's dark mode), else worked out.
   const own = scheme === 'dark' ? tokens.dark ?? {} : {}
-  const paper = round(hex(own.paper ?? '') ?? (scheme === 'dark' ? mix(dark, [0, 0, 0], 0.35) : light))
-  const ink = round(hex(own.ink ?? '') ?? (scheme === 'dark' ? mix(light, [255, 255, 255], 0.2) : dark))
-  const primary = hex(own.primary ?? tokens.primary) ?? [247, 197, 49]
+  const paper = round(rgbOf(own.paper ?? '', scheme === 'dark' ? [0, 0, 0] : [255, 255, 255]) ?? (scheme === 'dark' ? mix(dark, [0, 0, 0], 0.35) : light))
+  const ink = round(rgbOf(own.ink ?? '', paper) ?? (scheme === 'dark' ? mix(light, [255, 255, 255], 0.2) : dark))
+  const primary = rgbOf(own.primary ?? tokens.primary, paper) ?? [247, 197, 49]
   // The primary as a fill keeps its own colour; as words or marks it is made to read on the paper.
   const text = readable(primary, paper, 4.5)
   const onPrimary = contrast(ink, primary) >= contrast(paper, primary) ? ink : paper
   // A chart's colours: the kit's own (a template's accents), else the primary turned round the wheel; each made to read at 3:1.
-  const given = (tokens.series ?? []).map(hex).filter((c) => c !== null)
+  const given = (tokens.series ?? []).map((c) => rgbOf(c, paper)).filter((c) => c !== null)
   const series = [0, 1, 2, 3, 4, 5].map((n) => readable(/** @type {number[]} */ (given[n % (given.length || 1)] ?? rotate(primary, n * 57)), paper, 3))
   return {
-    paper: css(paper), ink: css(ink), muted: css(readable(round(hex(own.muted ?? (scheme === 'light' ? tokens.muted ?? '' : '')) ?? mix(ink, paper, 0.38)), paper, 4.5)), line: css(mix(ink, paper, 0.82)),
-    primary: css(text), onPrimary: css(onPrimary), soft: css(hex(own.soft ?? (scheme === 'light' ? tokens.soft ?? '' : '')) ?? mix(primary, paper, 0.78)), series: series.map(css),
+    paper: css(paper), ink: css(ink), muted: css(readable(round(rgbOf(own.muted ?? (scheme === 'light' ? tokens.muted ?? '' : ''), paper) ?? mix(ink, paper, 0.38)), paper, 4.5)), line: css(mix(ink, paper, 0.82)),
+    primary: css(text), onPrimary: css(onPrimary), soft: css(rgbOf(own.soft ?? (scheme === 'light' ? tokens.soft ?? '' : ''), paper) ?? mix(primary, paper, 0.78)), series: series.map(css),
   }
 }
 
-/** @param {string} value @returns {[number, number, number] | null} */
-export function hex(value) {
-  const m = /^#?([\da-f]{3}|[\da-f]{6})$/i.exec(String(value).trim())
-  if (!m) return null
-  const h = m[1].length === 3 ? [...m[1]].map((c) => c + c).join('') : m[1]
-  return /** @type {[number, number, number]} */ ([0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16)))
+/**
+ * A colour as deck reads one, as red, green and blue: `#rgb` or `#rrggbb` (`#rgba`, `#rrggbbaa` with an alpha), `rgb()` or
+ * `rgba()` as CSS writes them, by commas or spaces, the alpha after a comma or a slash; one see-through is seen over `under`,
+ * white unless said. @param {string} value @param {number[]} [under] @returns {[number, number, number] | null}
+ */
+export function rgbOf(value, under = [255, 255, 255]) {
+  const text = String(value).trim(), digits = /^#?([\da-f]{3,4}|[\da-f]{6}|[\da-f]{8})$/i.exec(text)?.[1], css = /^rgba?\(([^)]*)\)$/i.exec(text)?.[1].split(/[\s,/]+/).filter(Boolean)
+  const share = (/** @type {string} */ part, /** @type {number} */ whole) => (part.endsWith('%') ? (parseFloat(part) / 100) * whole : Number(part))
+  const [r, g, b, a = 1] = digits ? (digits.length < 5 ? [...digits].map((c) => c + c) : /** @type {string[]} */ (digits.match(/../g))).map((h, i) => parseInt(h, 16) / (i > 2 ? 255 : 1))
+    : css?.length === 3 || css?.length === 4 ? css.map((part, i) => share(part, i > 2 ? 1 : 255)) : []
+  return r !== undefined && [r, g, b].every((c) => c >= 0 && c <= 255) && a >= 0 && a <= 1 ? round(mix(under, [r, g, b], a)) : null
 }
 
 /** @param {number[]} rgb */

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)
+}