@codename/deck 0.3.0 → 0.4.0

package/src/deck.css

@@ -43,6 +43,8 @@
 .deck-slide [data-align="center"] { text-align: center; }
 .deck-block { position: relative; flex: 1 1 auto; min-block-size: 12cqi; overflow: hidden; }
 .deck-block .deck-chart, .deck-block .deck-diagram { position: absolute; inset: 0; display: grid; place-items: center; }
+/* A diagram's picture held to its box, its track sized so its share of it can be. */
+.deck-block .deck-diagram { grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
 .deck-block .deck-diagram img { max-inline-size: 100%; max-block-size: 100%; }
 .deck-block .deck-block-source { display: none; }
 .deck-block.is-failed .deck-block-source { display: block; }
@@ -79,9 +81,113 @@
 .deck-slide[data-title="huge"] :is(h2, .deck-h2) { font-size: 2.4em; }
 /* What the usual layouts add to their definition: Slidev's looks for them. */
 .deck-layout-section .deck-slot::before { content: ""; display: block; inline-size: 3em; block-size: 0.3em; background: var(--deck-fill); margin-block-end: 0.8em; border-radius: 0.15em; }
+.deck-layout-subsection .deck-slot::before { content: ""; display: block; inline-size: 2em; block-size: 0.2em; background: var(--deck-primary); margin-block-end: 0.7em; border-radius: 0.1em; }
 .deck-layout-statement :is(h1, h2, p, .deck-h1, .deck-h2) { font-size: 2.4em; font-family: var(--deck-heading); font-weight: 700; line-height: 1.2; }
 .deck-slide.deck-layout-fact :is(h1, .deck-h1) { font-size: 5em; color: var(--deck-primary); margin-block-end: 0.15em; }
 .deck-layout-quote blockquote { font-size: 1.7em; border: 0; padding: 0; font-family: var(--deck-heading); }
+/* A mind map (mindmap.js): its words where its layout puts them, in em of its own type, the whole shrunk to its box; its
+   root on the fill, each branch in a colour of the charts', its lines and its first words' rim. */
+.deck-mindmap { position: relative; flex: 1 1 auto; align-self: stretch; min-block-size: 12cqi; overflow: hidden; }
+.deck-map-plane { position: absolute; top: 50%; left: 50%; translate: -50% -50%; }
+.deck-map-lines { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; }
+.deck-map-lines path { fill: none; stroke: var(--deck-map-colour); stroke-width: 0.07; stroke-linecap: round; }
+.deck-map-lines path[data-depth="1"] { stroke-width: 0.15; }
+.deck-slide .deck-map-tree, .deck-slide .deck-map-tree :is(ul, li) { margin: 0; padding: 0; list-style: none; }
+.deck-slide .deck-mindmap .deck-map-node { position: absolute; inline-size: max-content; max-inline-size: 11em; margin: 0; padding: 0.15em 0.35em; font-family: var(--deck-body); font-size: 0.85em; font-weight: 400; line-height: 1.2; letter-spacing: 0; text-align: center; text-wrap: balance; color: inherit; }
+/* A chart or a diagram in a node, under its words, at a size of its own. */
+.deck-slide .deck-mindmap .deck-map-node.has-block[data-depth] { display: flex; flex-direction: column; align-items: center; gap: 0.2em; max-inline-size: none; }
+.deck-slide .deck-mindmap .deck-map-node .deck-block { flex: none; inline-size: 13em; block-size: 7.5em; min-block-size: 0; margin: 0; font-size: 0.85em; }
+/* Words wrapped beyond the first branches keep to the side their line comes from. */
+.deck-slide .deck-mindmap .deck-map-node[data-side="right"]:not([data-depth="1"]) { text-align: left; }
+.deck-slide .deck-mindmap .deck-map-node[data-side="left"]:not([data-depth="1"]) { text-align: right; }
+.deck-slide .deck-mindmap .deck-map-node[data-depth="0"] { max-inline-size: 9em; padding: 0.55em 1em; font-family: var(--deck-heading); font-size: 1.35em; font-weight: 700; background: var(--deck-fill); color: var(--deck-on-fill); border-radius: 1.2em; }
+.deck-slide .deck-mindmap .deck-map-node[data-depth="0"]:empty { inline-size: 0.8em; block-size: 0.8em; padding: 0; border-radius: 50%; }
+.deck-slide .deck-mindmap .deck-map-node[data-depth="1"] { max-inline-size: 9em; padding: 0.3em 0.8em; font-size: 1em; font-weight: 600; background: color-mix(in srgb, var(--deck-map-colour) 14%, transparent); border: 0.12em solid var(--deck-map-colour); border-radius: 1em; }
+.deck-mindmap [data-branch="1"] { --deck-map-colour: var(--deck-series-1); }
+.deck-mindmap [data-branch="2"] { --deck-map-colour: var(--deck-series-2); }
+.deck-mindmap [data-branch="3"] { --deck-map-colour: var(--deck-series-3); }
+.deck-mindmap [data-branch="4"] { --deck-map-colour: var(--deck-series-4); }
+.deck-mindmap [data-branch="5"] { --deck-map-colour: var(--deck-series-5); }
+.deck-mindmap [data-branch="6"] { --deck-map-colour: var(--deck-series-6); }
+/* A branch shown a click fades in where it is: moved, its words would be placed from it. */
+.deck-mindmap .deck-step:not(.is-on) { translate: none; }
+/* Figures (figures.js): a slot's lists as cards, key figures, a timeline, chevrons, a programme, a pyramid or a bento;
+   its parts face to face or in a matrix; the deck's contents. In em of the slot's type, so they shrink with it. */
+.deck-figure { flex: 1 1 auto; min-block-size: 0; display: grid; gap: 1em; align-content: center; line-break: strict; }
+.deck-slide .deck-figure :is(p, ul, ol) { margin-block: 0 0.4em; }
+.deck-slide .deck-figure :is(p, ul, ol):last-child { margin-block-end: 0; }
+.deck-words { display: block; }
+.deck-figure .deck-lead { font-family: var(--deck-heading); font-weight: 700; line-height: 1.2; }
+.deck-figure .deck-text { line-height: 1.35; }
+.deck-figure :is(ul, ol).deck-words { font-size: 0.85em; }
+/* On the fill, words are on the fill's ink, their bold and links too. */
+:is(.deck-tile.is-big, .deck-part.is-highlight, .deck-chevron, .deck-level) :is(strong, a, h3, .deck-h3) { color: inherit; }
+:is(.deck-tile.is-big, .deck-part.is-highlight) li::marker { color: inherit; }
+/* A chart or a diagram on the fill would lose its first colour, the fill's: what holds one is on the soft fill, ringed with it. */
+:is(.deck-tile.is-big, .deck-part.is-highlight):has(.deck-block) { background: var(--deck-soft); color: var(--deck-ink); border: 0.15em solid var(--deck-fill); }
+/* Steps: a row of cards, each with its number. */
+.deck-steps { align-items: stretch; }
+.deck-card { display: flex; flex-direction: column; gap: 0.45em; padding: 1.1em 1em; background: var(--deck-soft); border-radius: var(--deck-radius); }
+.deck-badge { display: grid; place-items: center; text-align: center; inline-size: 1.9em; block-size: 1.9em; border-radius: 50%; background: var(--deck-fill); color: var(--deck-on-fill); font-family: var(--deck-heading); font-weight: 700; font-variant-numeric: tabular-nums; }
+.deck-card .deck-lead { font-size: 1.05em; }
+.deck-card .deck-text { font-size: 0.9em; }
+/* Key figures: a row of numbers, each with what it counts, a rule between them. */
+.deck-metrics { gap: 1em 0; text-align: center; }
+.deck-metric { display: flex; flex-direction: column; align-items: center; gap: 0.35em; padding: 0.3em 1em; }
+.deck-metric + .deck-metric { border-inline-start: 1px solid var(--deck-line); }
+.deck-metric .deck-lead { font-size: 3.4em; font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--deck-primary); font-variant-numeric: tabular-nums; }
+/* A timeline: its milestones along a line, each its lead over its dot and its words under it. */
+.deck-timeline { grid-template-rows: auto auto auto; gap: 0.6em 0; justify-items: center; text-align: center; }
+.deck-timeline-line { grid-row: 2; grid-column: 1 / -1; justify-self: stretch; align-self: center; block-size: 0.2em; margin-inline: calc(50% / var(--deck-count)); background: var(--deck-line); border-radius: 0.1em; }
+.deck-timeline .deck-lead { align-self: end; padding-inline: 0.4em; font-size: 1.2em; color: var(--deck-primary); }
+.deck-dot { inline-size: 1.15em; block-size: 1.15em; border-radius: 50%; background: var(--deck-fill); border: 0.22em solid var(--deck-paper); }
+.deck-milestone { align-self: start; padding-inline: 0.4em; font-size: 0.9em; }
+/* A process: chevrons, each holding a step's name, its words under it; they point the way the language reads. */
+.deck-process { gap: 0.7em 0; }
+.deck-chevron { --deck-tip: 0.9em; display: flex; align-items: center; justify-content: center; min-block-size: 3.2em; padding: 0.5em calc(var(--deck-tip) + 0.3em) 0.5em calc(var(--deck-tip) * 2); margin-inline-end: calc(0.3em - var(--deck-tip)); background: var(--deck-fill); color: var(--deck-on-fill); text-align: center;
+  clip-path: polygon(0% 0%, calc(100% - var(--deck-tip)) 0%, 100% 50%, calc(100% - var(--deck-tip)) 100%, 0% 100%, var(--deck-tip) 50%); }
+.deck-chevron[data-first] { padding-inline-start: 0.9em; clip-path: polygon(0% 0%, calc(100% - var(--deck-tip)) 0%, 100% 50%, calc(100% - var(--deck-tip)) 100%, 0% 100%); }
+.deck-chevron[data-last] { margin-inline-end: 0; }
+.deck[dir="rtl"] .deck-chevron { clip-path: polygon(100% 0%, var(--deck-tip) 0%, 0% 50%, var(--deck-tip) 100%, 100% 100%, calc(100% - var(--deck-tip)) 50%); }
+.deck[dir="rtl"] .deck-chevron[data-first] { clip-path: polygon(100% 0%, var(--deck-tip) 0%, 0% 50%, var(--deck-tip) 100%, 100% 100%); }
+.deck-under { align-self: start; padding-inline: 0.6em; font-size: 0.9em; text-align: center; }
+/* A programme, and the deck's contents: rows of a time (or a number) and its words, in two columns from seven. */
+.deck-agenda { gap: 0 3em; }
+.deck-agenda-col { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.2em; align-content: start; }
+.deck-row { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: baseline; padding-block: 0.55em; border-block-end: 1px solid var(--deck-line); }
+.deck-row > :not(.deck-lead) { grid-column: 2; }
+.deck-row .deck-lead { color: var(--deck-primary); white-space: nowrap; font-variant-numeric: tabular-nums; }
+.deck-contents { font-size: 1.1em; }
+.deck-contents .deck-row { cursor: pointer; }
+.deck-contents .deck-row:focus-visible { outline: 0.12em solid var(--deck-primary); outline-offset: 0.1em; }
+.deck-contents .deck-row .deck-text { font-family: var(--deck-heading); font-weight: 600; }
+.deck-contents .deck-row.is-sub { padding-block: 0.3em; border-block-end-style: dotted; font-size: 0.85em; }
+.deck-contents .deck-row.is-sub .deck-text { font-family: var(--deck-body); font-weight: 400; }
+/* A pyramid: its levels stacked, the first the narrowest, on top; what each says beside it. */
+.deck-pyramid { gap: 0.3em 2em; justify-content: center; }
+.deck-level { display: flex; align-items: center; justify-content: center; min-block-size: 2.6em; padding-block: 0.45em; background: var(--deck-fill); color: var(--deck-on-fill); text-align: center; }
+.deck-level .deck-words { font-family: var(--deck-heading); font-weight: 700; }
+.deck-beside { align-self: center; font-size: 0.9em; }
+/* A bento: the first tile big, the others around it. */
+.deck-bento { align-content: stretch; gap: 0.9em; grid-template-columns: 1.4fr repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; }
+.deck-tile { display: flex; flex-direction: column; justify-content: safe flex-end; gap: 0.35em; padding: 1em 1.1em; background: var(--deck-soft); border-radius: var(--deck-radius); }
+.deck-tile.is-big { grid-row: span 2; background: var(--deck-fill); color: var(--deck-on-fill); }
+.deck-tile .deck-lead { font-size: 1.15em; }
+.deck-tile.is-big .deck-lead { font-size: 1.9em; }
+.deck-tile .deck-block { min-block-size: 6cqi; }
+.deck-bento[data-count="1"] { grid-template-columns: 1fr; }
+.deck-bento[data-count="2"] { grid-template-columns: 1.3fr 1fr; }
+.deck-bento[data-count="2"] .deck-tile.is-big { grid-row: auto; }
+.deck-bento[data-count="3"] { grid-template-columns: 1.3fr 1fr; }
+.deck-bento[data-count="4"] .deck-tile:nth-child(2) { grid-column: span 2; }
+/* Parts face to face, a medallion between them, the last on the fill; or four in a matrix, the second, top at the end, on the fill. */
+.deck-versus, .deck-matrix { align-content: stretch; }
+.deck-versus { column-gap: 0; grid-auto-rows: 1fr; }
+.deck-matrix { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 0.8em; }
+.deck-part { display: flex; flex-direction: column; padding: 1.1em 1.4em; background: var(--deck-soft); border-radius: var(--deck-radius); }
+.deck-part.is-highlight { background: var(--deck-fill); color: var(--deck-on-fill); }
+.deck-slide .deck-part :is(h1, h2, h3, h4, .deck-h) { font-size: 1.35em; color: inherit; margin-block-end: 0.45em; }
+.deck-vs { position: relative; z-index: 1; align-self: center; display: grid; place-items: center; text-align: center; inline-size: 3.2em; block-size: 3.2em; margin-inline: -1em; border-radius: 50%; background: var(--deck-ink); color: var(--deck-paper); border: 0.25em solid var(--deck-paper); font-family: var(--deck-heading); font-weight: 800; font-size: 0.9em; letter-spacing: 0.02em; }
 /* Scripts without italics keep their upright letters. */
 .deck :is(blockquote, em):is(:lang(ar), :lang(fa), :lang(ur), :lang(he), :lang(ja), :lang(zh), :lang(ko), :lang(hi), :lang(th)) { font-style: normal; }
 .deck-layout-quote blockquote::before { content: "\201C"; display: block; font-size: 2.4em; line-height: 0.6; color: var(--deck-primary); }
@@ -93,6 +199,11 @@
 :is(.deck-layout-image-left, .deck-layout-image-right).has-image .deck-slot { padding: 6cqi 5cqi; justify-content: center; }
 :is(.deck-layout-image, .deck-layout-cover).has-image .deck-image { position: absolute; inset: 0; }
 :is(.deck-layout-image, .deck-layout-cover).has-image .deck-slot { position: relative; color: #fff; text-shadow: 0 0.05em 0.4em rgb(0 0 0 / 0.6); }
+/* A quote over its picture, the whole slide, behind a veil. */
+.deck-layout-quote.has-image .deck-image { position: absolute; inset: 0; }
+.deck-layout-quote.has-image .deck-image::after { content: ""; position: absolute; inset: 0; background-color: rgb(0 0 0 / 0.55); }
+.deck-layout-quote.has-image .deck-slot { position: relative; color: #fff; text-shadow: 0 0.05em 0.4em rgb(0 0 0 / 0.5); }
+.deck-layout-quote.has-image blockquote::before { color: inherit; }
 .deck-layout-cover.has-image .deck-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / 0.65), rgb(0 0 0 / 0.1)); }
 .deck-class-invert { background: var(--deck-ink); color: var(--deck-paper); }
 .deck-class-text-center .deck-slot { text-align: center; align-items: center; }

package/src/deck.js

@@ -124,6 +124,7 @@ export function createDeck(root, options) {
 
   function draw() {
     context.total = deck.slides.length
+    context.deck = deck
     drawn = deck.slides.map((slide) => renderSlide(slide, context))
     for (const [i, { element }] of drawn.entries()) {
       element.setAttribute('aria-label', words.where.replace('{n}', number(i + 1)).replace('{count}', number(drawn.length)))
@@ -210,7 +211,8 @@ export function createDeck(root, options) {
    */
   function name(slide, toward) {
     const key = (/** @type {Element} */ el) => `${el.tagName}:${el.tagName === 'IMG' ? el.getAttribute('src') : (el.textContent ?? '').trim().slice(0, 80)}`
-    const parts = (/** @type {HTMLElement} */ s) => /** @type {HTMLElement[]} */ ([...s.querySelectorAll('h1, h2, h3, h4, .deck-h, li, p, img, .deck-block, blockquote, .deck-image')])
+    // A mind map's words, not its items, which hold no box of their own.
+    const parts = (/** @type {HTMLElement} */ s) => /** @type {HTMLElement[]} */ ([...s.querySelectorAll('h1, h2, h3, h4, .deck-h, li, p, img, .deck-block, blockquote, .deck-image, .deck-map-node')].filter((el) => !el.matches('.deck-mindmap li')))
     if (toward) {
       const there = new Map(parts(toward).map((el) => [key(el), el]))
       let n = 0
@@ -296,6 +298,8 @@ export function createDeck(root, options) {
     target.addEventListener('blur', blur)
   })
 
+  // The deck's contents: a part chosen, its slide shown.
+  const chosen = (/** @type {Event} */ event) => /** @type {HTMLElement | null} */ (/** @type {Element} */ (event.target).closest('.deck-slide.is-shown [data-go]'))
   // The keys a clicker sends, and the deck's own.
   root.addEventListener('keydown', (event) => {
     const target = /** @type {HTMLElement} */ (event.target)
@@ -303,6 +307,8 @@ export function createDeck(root, options) {
       if ((event.metaKey || event.ctrlKey) && event.key === 's') { event.preventDefault(); options.onSave?.(source) }
       return
     }
+    const part = chosen(event)
+    if (part && event.key === 'Enter') { event.preventDefault(); go(Number(part.dataset.go)); return }
     const forward = dir === 'rtl' ? 'ArrowLeft' : 'ArrowRight', backward = dir === 'rtl' ? 'ArrowRight' : 'ArrowLeft'
     if (event.altKey || event.ctrlKey || event.metaKey) {
       if ((event.metaKey || event.ctrlKey) && event.key === 's') { event.preventDefault(); options.onSave?.(source) }
@@ -317,6 +323,10 @@ export function createDeck(root, options) {
     event.preventDefault()
     act()
   })
+  stage.addEventListener('click', (event) => {
+    const part = chosen(event)
+    if (part && !root.classList.contains('is-editing') && !root.classList.contains('is-overview')) { event.stopPropagation(); go(Number(part.dataset.go)) }
+  }, true)
   stage.addEventListener('click', (event) => {
     if (document.fullscreenElement && !(/** @type {Element} */ (event.target).closest('a, button, input'))) move(1)
   })

package/src/figures.js

@@ -0,0 +1,255 @@
+// The figures a layout draws from what a slide holds, as slides usually show it: a slot's lists as
+// a row of numbered cards (steps), of key figures (metrics), a timeline, chevrons (process), a timed
+// programme (agenda), a pyramid or a bento; its `##` parts face to face (versus) or four in a
+// matrix; the deck's contents (summary). An item's lead, the words in bold it starts with (`**Q1**`,
+// `**56%**`, `**6:00 PM**`), is its label and the rest its words, each changed in place as a list's
+// are. What is drawn as a shape says so (.deck-shape), and what is words (.deck-words), for
+// PowerPoint to write them as its own shapes and boxes of words.
+import { h, inline, step, range, block } from './render.js'
+import { layoutNameOf } from './kit.js'
+
+/** @typedef {import('./render.js').Context} Context */
+/** @typedef {{ tokens: any[], start: number, end: number, blocks: { token: any, start: number }[], step: number }} Entry */
+/** @typedef {{ lead: any[] | null, leadAt: [number, number] | null, rest: any[], restAt: [number, number] | null }} Split */
+
+// What may come between a lead and its words: a colon, a dash, a bar, a dot.
+const SEP = /^\s*(?:[:：—–|·-]\s*)?/
+// A lead not in bold: a time starting a programme's line, a number starting a key figure's.
+const TIME = /^\d{1,2}(?:[:h.]\d{2}|h)?(?:\s?[ap]\.?m\.?)?(?:\s?[–-]\s?\d{1,2}(?:[:h.]\d{2}|h)?(?:\s?[ap]\.?m\.?)?)?(?=\s|$)/i
+const NUMBER = /^[+−-]?[^\p{L}\p{N}\s]?\d[\d.,  ]*\S*(?=\s|$)/u
+const PATTERNS = /** @type {Record<string, RegExp>} */ ({ agenda: TIME, metrics: NUMBER })
+
+/** A paragraph whose every line starts in bold, as key figures are written without a list. @param {any} token */
+export const boldLines = (token) => token.type === 'paragraph' && token.raw.trim().split('\n').every((/** @type {string} */ line) => /^\s*(\*\*|__)\S/.test(line))
+
+/**
+ * A list's items, or a paragraph's lines that start in bold, as a figure's entries: each one's words (its first line's
+ * inline tokens) and where they are in the source, `end` -1 when they run over lines; what is under an item (a list, a
+ * chart) its blocks. @param {any} token @param {number} start where its raw starts @param {(markdown: string) => any[]} lex
+ * @returns {Entry[]}
+ */
+export function entriesOf(token, start, lex) {
+  if (token.type === 'paragraph') {
+    let at = start
+    return token.raw.split('\n').flatMap((/** @type {string} */ line) => {
+      const from = at
+      at += line.length + 1
+      const text = line.trim()
+      if (!text) return []
+      const [first] = lex(text)
+      return [{ tokens: first?.tokens ?? [], start: from + line.length - line.trimStart().length, end: from + line.trimEnd().length, blocks: [], step: 0 }]
+    })
+  }
+  let from = 0
+  return token.items.map((/** @type {any} */ item) => {
+    const offset = token.raw.indexOf(item.raw, from)
+    from = offset + item.raw.length
+    const itemStart = start + Math.max(0, offset)
+    const marker = /^\s*(?:[-*+]|\d+[.)])\s+(?:\[[ xX]\]\s+)?/.exec(item.raw)
+    const [first, ...rest] = item.tokens
+    const words = first && (first.type === 'text' || first.type === 'paragraph') ? first : null
+    const at = itemStart + (marker?.[0].length ?? 0)
+    return {
+      tokens: words ? words.tokens ?? [{ type: 'text', raw: words.text, text: words.text }] : [],
+      start: at, end: words && marker && !words.raw.trim().includes('\n') ? at + words.raw.trim().length : -1,
+      blocks: (words ? rest : item.tokens).map((/** @type {any} */ inner) => ({ token: inner, start: itemStart + Math.max(0, item.raw.indexOf(inner.raw)) })), step: 0,
+    }
+  })
+}
+
+/**
+ * An entry's lead and the rest of its words, each with where it is in the source: the bold it starts with, else for a
+ * programme a time and for key figures a number; what comes between them (a colon, a dash) left out.
+ * @param {Entry} entry @param {string} kind @returns {Split}
+ */
+export function leadOf(entry, kind) {
+  const [first, ...others] = entry.tokens
+  const editable = entry.end >= 0
+  const after = (/** @type {any[]} */ tokens, /** @type {number} */ from) => {
+    const next = tokens[0], cut = next?.type === 'text' ? /** @type {RegExpExecArray} */ (SEP.exec(next.raw))[0].length : 0
+    const rest = (cut ? [{ ...next, raw: next.raw.slice(cut), text: next.text.slice(/** @type {RegExpExecArray} */ (SEP.exec(next.text))[0].length) }, ...tokens.slice(1)] : tokens).filter((t) => t.raw.trim() || t.type !== 'text')
+    return { rest, restAt: /** @type {[number, number] | null} */ (editable && rest.length && from + cut < entry.end ? [from + cut, entry.end] : null) }
+  }
+  if (first?.type === 'strong') return { lead: first.tokens, leadAt: editable ? [entry.start + 2, entry.start + first.raw.length - 2] : null, ...after(others, entry.start + first.raw.length) }
+  const found = first?.type === 'text' && PATTERNS[kind]?.exec(first.raw)
+  if (found) {
+    const tail = first.raw.slice(found[0].length)
+    return { lead: [{ type: 'text', raw: found[0], text: found[0] }], leadAt: editable ? [entry.start, entry.start + found[0].length] : null, ...after([...(tail ? [{ type: 'text', raw: tail, text: tail }] : []), ...others], entry.start + found[0].length) }
+  }
+  return { lead: null, leadAt: null, rest: entry.tokens, restAt: editable ? [entry.start, entry.end] : null }
+}
+
+/**
+ * Where a slot's parts start: at each heading of the level its last heading has, but the heading the slot opens with when
+ * there are more of them than the parts asked for (the slide's title, written at their level).
+ * @param {any[]} tokens @param {number} count how many parts the layout has @returns {Set<number>}
+ */
+export function partHeads(tokens, count) {
+  const heads = tokens.flatMap((token, i) => (token.type === 'heading' ? [{ depth: token.depth, i }] : []))
+  if (!heads.length) return new Set()
+  const depth = /** @type {{ depth: number }} */ (heads.at(-1)).depth
+  const at = heads.filter((one) => one.depth === depth).map((one) => one.i)
+  return new Set(at.length > count && at[0] === tokens.findIndex((token) => token.type !== 'space') ? at.slice(1) : at)
+}
+
+/**
+ * The deck's contents, as Slidev's <Toc> reads them: each slide's title and level, but a slide with `hideInToc: true`,
+ * the contents themselves, a cover, an introduction, the end and slides with no title. Where the deck has parts (slides
+ * on `section` or `subsection`, or with a `level`), the parts alone, a section at level 1 and a subsection at 2; else
+ * every slide, at its heading's level. `hideInToc: false` brings a slide back. Levels start at 1, `maxDepth` at most.
+ * @param {import('./parse.js').Slide[]} slides @param {import('./kit.js').Kit} kit @param {number} at the contents' own slide
+ * @param {number} [maxDepth] @returns {{ index: number, title: string, level: number }[]}
+ */
+export function contentsOf(slides, kit, at, maxDepth = 2) {
+  const all = slides.map((slide) => {
+    const name = layoutNameOf(slide, kit), given = slide.settings.level, hidden = slide.settings.hideInToc
+    const depth = /^(#{1,6})\s/m.exec(slide.slots.map((slot) => slot.text).join('\n').replace(/^(`{3,}|~{3,})[\s\S]*?^\1/gm, ''))?.[1].length ?? 1
+    const part = Number.isInteger(given) || name === 'section' || name === 'subsection'
+    const level = Number.isInteger(given) ? given : name === 'section' ? 1 : name === 'subsection' ? 2 : depth
+    const kept = Boolean(slide.title) && (hidden === false || (hidden !== true && slide.index !== at && !kit.layouts[name]?.contents && !['cover', 'intro', 'end'].includes(name)))
+    return { index: slide.index, title: slide.title, level, part, kept, shown: hidden === false }
+  }).filter((one) => one.kept)
+  const chosen = all.some((one) => one.part) ? all.filter((one) => one.part || one.shown) : all
+  const top = Math.min(...chosen.map((one) => one.level))
+  return chosen.map(({ index, title, level }) => ({ index, title, level: level - top + 1 })).filter((one) => one.level <= Math.max(1, maxDepth))
+}
+
+/** Columns for a row of n, wrapping beyond `most`. @param {HTMLElement} figure @param {number} n @param {number} most */
+const columns = (figure, n, most) => figure.style.setProperty('grid-template-columns', `repeat(${n <= most ? n : Math.ceil(n / 2)}, minmax(0, 1fr))`)
+
+/**
+ * A slot's lists as the figure its layout draws. Entries a click each (<v-clicks>) show their card, milestone, chevron,
+ * row, level or tile at their step. @param {string} kind @param {Entry[]} entries @param {Context} context @returns {HTMLElement}
+ */
+export function listFigure(kind, entries, context) {
+  const items = entries.map((entry) => ({ entry, ...leadOf(entry, kind) }))
+  const n = items.length
+  const figure = h('div', { class: `deck-figure deck-${kind}`, 'data-count': n })
+  figure.style.setProperty('--deck-count', String(n))
+  /** @typedef {(typeof items)[number]} Item */
+  const at = (/** @type {[number, number] | null} */ where) => (where ? range(...where) : undefined)
+  const lead = (/** @type {Item} */ item) => (item.lead ? h('span', { class: 'deck-words deck-lead', dir: 'auto', 'data-edit': at(item.leadAt) }, inline(item.lead, context)) : null)
+  const text = (/** @type {Item} */ item) => (item.rest.length ? h('span', { class: 'deck-words deck-text', dir: 'auto', 'data-edit': at(item.restAt) }, inline(item.rest, context)) : null)
+  // What is under an item: a list as words, a chart or a diagram as itself.
+  const more = (/** @type {Item} */ item) => item.entry.blocks.map(({ token, start }) => {
+    const element = block(token, start, context, null)
+    if (element && !element.matches('.deck-block, .deck-table, pre')) element.classList.add('deck-words')
+    return element
+  })
+  const stepped = (/** @type {Item} */ item, /** @type {(Element | null)[]} */ elements) => { if (item.entry.step) for (const one of elements) if (one) step(one, item.entry.step) }
+  const cell = (/** @type {HTMLElement} */ element, /** @type {number} */ column, /** @type {number} */ row) => { element.style.setProperty('grid-column', String(column)); element.style.setProperty('grid-row', String(row)); return element }
+  // The lead, else the words, as what a chevron or a level says; the words beside or under it when there is a lead.
+  const label = (/** @type {Item} */ item) => lead(item) ?? text(item) ?? h('span', { class: 'deck-words deck-lead' })
+  const under = (/** @type {Item} */ item, /** @type {string} */ name) => h('div', { class: name }, [item.lead ? text(item) : null, ...more(item)])
+  switch (kind) {
+    case 'steps':
+      columns(figure, n, 5)
+      for (const [i, item] of items.entries()) {
+        const card = h('div', { class: 'deck-card deck-shape' }, [h('span', { class: 'deck-words deck-badge deck-shape' }, [context.number(i + 1)]), lead(item), text(item), ...more(item)])
+        stepped(item, [card])
+        figure.append(card)
+      }
+      break
+    case 'metrics':
+      columns(figure, n, 4)
+      for (const item of items) {
+        const metric = h('div', { class: 'deck-metric deck-shape' }, [lead(item), text(item), ...more(item)])
+        stepped(item, [metric])
+        figure.append(metric)
+      }
+      break
+    case 'timeline':
+      columns(figure, n, 99)
+      // The line first, under its dots, from the first to the last.
+      figure.append(h('span', { class: 'deck-timeline-line deck-shape' }))
+      for (const [i, item] of items.entries()) {
+        const parts = [cell(lead(item) ?? h('span', { class: 'deck-lead' }), i + 1, 1), cell(h('span', { class: 'deck-dot deck-shape' }), i + 1, 2), cell(h('div', { class: 'deck-milestone' }, [text(item), ...more(item)]), i + 1, 3)]
+        stepped(item, parts)
+        figure.append(...parts)
+      }
+      break
+    case 'process':
+      columns(figure, n, 99)
+      for (const [i, item] of items.entries()) {
+        const parts = [cell(h('div', { class: 'deck-chevron deck-shape', 'data-first': i === 0 || undefined, 'data-last': i === n - 1 || undefined }, [label(item)]), i + 1, 1), cell(under(item, 'deck-under'), i + 1, 2)]
+        stepped(item, parts)
+        figure.append(...parts)
+      }
+      break
+    case 'agenda': {
+      // In two columns from seven lines, the first holding the more.
+      const halves = n >= 7 ? [items.slice(0, Math.ceil(n / 2)), items.slice(Math.ceil(n / 2))] : [items]
+      figure.style.setProperty('grid-template-columns', `repeat(${halves.length}, minmax(0, 1fr))`)
+      for (const half of halves) {
+        figure.append(h('div', { class: 'deck-agenda-col' }, half.map((item) => {
+          const row = h('div', { class: 'deck-row deck-shape' }, [lead(item) ?? h('span', { class: 'deck-lead' }), text(item), ...more(item)])
+          stepped(item, [row])
+          return row
+        })))
+      }
+      break
+    }
+    case 'pyramid': {
+      // Narrowest at the top, widest at the bottom, each level a band of one triangle; its words held to its top edge.
+      const beside = items.some((item) => item.lead && (item.rest.length || item.entry.blocks.length))
+      figure.style.setProperty('grid-template-columns', beside ? 'minmax(0, 1.15fr) minmax(0, 1fr)' : 'minmax(0, 30em)')
+      const half = (/** @type {number} */ k) => Math.round(5000 * (0.16 + (0.84 * k) / n)) / 100
+      for (const [i, item] of items.entries()) {
+        const band = cell(h('div', { class: 'deck-level deck-shape' }, [label(item)]), 1, i + 1)
+        band.style.setProperty('clip-path', `polygon(${50 - half(i)}% 0%, ${50 + half(i)}% 0%, ${50 + half(i + 1)}% 100%, ${50 - half(i + 1)}% 100%)`)
+        band.style.setProperty('padding-inline', `max(0.4em, ${Math.round((50 - half(i)) * 100) / 100}%)`)
+        const parts = [band, beside ? cell(under(item, 'deck-beside'), 2, i + 1) : null]
+        stepped(item, parts)
+        figure.append(...parts.filter((one) => one !== null))
+      }
+      break
+    }
+    case 'bento':
+      for (const [i, item] of items.entries()) {
+        const tile = h('div', { class: `deck-tile deck-shape${i === 0 ? ' is-big' : ''}` }, [lead(item), text(item), ...more(item)])
+        stepped(item, [tile])
+        figure.append(tile)
+      }
+      break
+  }
+  return figure
+}
+
+/**
+ * A slot's parts as its layout sets them: face to face, the last on the fill, a medallion between each two (versus), or
+ * in a grid of two columns, the second, top at the end, on the fill (matrix). Their words stay as they were drawn.
+ * @param {string} kind @param {Node[][]} parts @returns {HTMLElement}
+ */
+export function partsFigure(kind, parts) {
+  const figure = h('div', { class: `deck-figure deck-${kind}`, 'data-count': parts.length })
+  if (kind === 'versus') figure.style.setProperty('grid-template-columns', parts.map(() => 'minmax(0, 1fr)').join(' auto '))
+  for (const [i, children] of parts.entries()) {
+    for (const child of children) if (child instanceof HTMLElement && !child.matches('.deck-block, .deck-table, pre, .deck-picture')) child.classList.add('deck-words')
+    if (kind === 'versus' && i > 0) figure.append(h('span', { class: 'deck-vs deck-shape deck-words', 'aria-hidden': 'true' }, ['VS']))
+    const highlight = parts.length > 1 && (kind === 'versus' ? i === parts.length - 1 : i === 1)
+    figure.append(h('div', { class: `deck-part deck-shape${highlight ? ' is-highlight' : ''}` }, children))
+  }
+  return figure
+}
+
+/**
+ * The deck's contents as rows, a part's number and its title, each going to its slide when chosen; a subsection under
+ * its section, without a number; in two columns from seven rows. @param {Context} context @param {number} at its own slide
+ * @param {number} [maxDepth] @returns {HTMLElement | null}
+ */
+export function contentsFigure(context, at, maxDepth) {
+  const entries = context.deck ? contentsOf(context.deck.slides, context.kit, at, maxDepth) : []
+  if (!entries.length) return null
+  let n = 0
+  const rows = entries.map(({ index, title, level }) => {
+    const [heading] = context.lex(`# ${title}`)
+    return h('div', { class: `deck-row deck-shape${level > 1 ? ' is-sub' : ''}`, 'data-go': index, role: 'link', tabindex: 0 }, [
+      h('span', { class: 'deck-words deck-lead' }, level > 1 ? [] : [context.number(++n)]),
+      h('span', { class: 'deck-words deck-text', dir: 'auto' }, inline(heading?.tokens ?? [{ type: 'text', text: title }], context)),
+    ])
+  })
+  const halves = rows.length >= 7 ? [rows.slice(0, Math.ceil(rows.length / 2)), rows.slice(Math.ceil(rows.length / 2))] : [rows]
+  const figure = h('div', { class: 'deck-figure deck-agenda deck-contents', 'data-count': rows.length }, halves.map((half) => h('div', { class: 'deck-agenda-col' }, half)))
+  figure.style.setProperty('grid-template-columns', `repeat(${halves.length}, minmax(0, 1fr))`)
+  return figure
+}

package/src/kit.js

@@ -3,19 +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, 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
+// 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, art?: string[] }} Layout */
+/** @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']
 
@@ -34,7 +39,10 @@ export const artOf = (value) => (typeof value === 'string' && value.length <= 3_
 /** 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. */
@@ -47,6 +55,8 @@ export const STANDARD = /** @type {Kit} */ ({
     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' },
@@ -60,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)])),
 })
 
@@ -112,7 +132,7 @@ export function layoutOf(given) {
   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'),
+      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,
@@ -197,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