@codename/deck 0.2.0 → 0.4.0

package/src/blocks.js

@@ -2,8 +2,10 @@
 // from `base` (a CDN by default) the first time a slide needs it, never before. A chart is data,
 // read with JSON.parse; it takes the deck's colours and type, light or dark, and is drawn as SVG.
 // A diagram is drawn by Pele from Mermaid's language as SVG, then shown as a picture, so nothing it
-// makes runs or joins the page; its words are its picture's text for whoever can't see it. A host gives
-// its own drawers instead.
+// makes runs or joins the page; its words are its picture's text for whoever can't see it; its colours
+// (a pie's, a chart's too) are the deck's, again when the scheme changes. Options after a fence's
+// language, as Slidev writes them (```mermaid {scale: 0.8}), reach the drawer. A host gives its own
+// drawers instead.
 
 /** @typedef {{ base: string, root: HTMLElement, versions?: { echarts?: string, pele?: string } }} Where */
 
@@ -34,12 +36,22 @@ export function defaultBlocks({ base, root, versions = {} }) {
   const { echarts: chartsAt = '6.1.0', pele: diagramsAt = '1.10.0' } = versions
   /** @type {Set<{ chart: any, option: any, box: HTMLElement }>} */
   const charts = new Set()
+  /** @type {Set<{ picture: HTMLImageElement, svg: string }>} */
+  const diagrams = new Set()
   /** @type {any} */
   let colours = null
   root.addEventListener('deck-scheme', (event) => {
     colours = /** @type {CustomEvent} */ (event).detail.colours
     for (const one of charts) one.chart.setOption(themed(one.option, one.box), true)
+    for (const one of diagrams) one.picture.src = pictured(one.svg)
   })
+  // A diagram's SVG as a picture in the deck's colours, set as Pele's variables inside it.
+  const pictured = (/** @type {string} */ svg) => {
+    const font = getComputedStyle(root).getPropertyValue('--deck-body') || 'system-ui, sans-serif'
+    const series = Array.from({ length: 8 }, (_, n) => `--pele-series-${n + 1}:${colours?.series?.[n % (colours?.series?.length || 1)]}`).join(';')
+    const look = `--pele-bg:transparent;--pele-fg:${colours?.ink};--pele-muted:${colours?.muted};--pele-line:${colours?.muted};--pele-surface:${colours?.soft};--pele-surface-alt:${colours?.line};--pele-border:${colours?.primary};--pele-accent:${colours?.primary};${series};--pele-font:${font.replace(/[<>"]/g, '')}`
+    return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg.replace(/^(<svg\b[^>]*>)/, `$1<style>svg{${look}}</style>`))}`
+  }
   // Its type sized with the slide's, its category axis read from the right in a language written so.
   const themed = (/** @type {any} */ option, /** @type {HTMLElement} */ box) => {
     const size = parseFloat(getComputedStyle(box).fontSize) || 16
@@ -61,7 +73,7 @@ export function defaultBlocks({ base, root, versions = {} }) {
     }
   }
   return {
-    /** @param {HTMLElement} box @param {string} source */
+    /** @param {HTMLElement} box @param {string} source the chart's option, as JSON */
     async echarts(box, source) {
       const option = JSON.parse(source)
       const echarts = await script(libraryAt(base, 'echarts', chartsAt, 'dist/echarts.min.js'), 'echarts')
@@ -79,17 +91,22 @@ export function defaultBlocks({ base, root, versions = {} }) {
     },
     /**
      * A diagram written in Mermaid's language, drawn by Pele (Obsidian's, MIT): every kind Mermaid
-     * 12.1 has, no DOM needed, an SVG with no script or HTML in it. Shown as a picture, its colours
-     * the deck's, set as Pele's variables inside it. @param {HTMLElement} box @param {string} source
+     * 12.1 has, no DOM needed, an SVG with no script or HTML in it; its own settings (a `---` config
+     * block, `%%{init: …}%%`) read by Pele, the fence's options too, `scale` the share of its box it
+     * takes. Shown as a picture, its colours the deck's. @param {HTMLElement} box @param {string} source
+     * @param {Record<string, any>} [options]
      */
-    async mermaid(box, source) {
+    async mermaid(box, source, options = {}) {
       const pele = await script(libraryAt(base, 'pele', diagramsAt, 'dist/pele.global.js'), 'pele')
       const font = getComputedStyle(root).getPropertyValue('--deck-body') || 'system-ui, sans-serif'
-      const { svg } = pele.render(source, { fontFamily: font, links: false, images: false, autoDirection: true, maxWidth: Math.max(320, box.clientWidth * 1.4) })
-      const look = `--pele-bg:transparent;--pele-fg:${colours?.ink};--pele-muted:${colours?.muted};--pele-line:${colours?.muted};--pele-surface:${colours?.soft};--pele-surface-alt:${colours?.line};--pele-border:${colours?.primary};--pele-accent:${colours?.primary};--pele-font:${font.replace(/[<>"]/g, '')}`
+      const { scale, theme, ...config } = options
+      const { svg } = pele.render(source, { fontFamily: font, links: false, images: false, autoDirection: true, maxWidth: Math.max(320, box.clientWidth * 1.4), ...(Object.keys(config).length && { config }) })
       const picture = document.createElement('img')
       picture.alt = source
-      picture.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg.replace(/^(<svg\b[^>]*>)/, `$1<style>svg{${look}}</style>`))}`
+      picture.src = pictured(svg)
+      const share = Number(scale)
+      if (share > 0 && share < 1) for (const side of ['max-inline-size', 'max-block-size']) picture.style.setProperty(side, `${share * 100}%`)
+      diagrams.add({ picture, svg })
       const place = document.createElement('div')
       place.className = 'deck-diagram'
       place.append(picture)

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; }
@@ -58,6 +60,13 @@
 :is(.deck[data-scheme="light"] :is(.deck-slide[data-paper="ink"], .deck-class-invert), .deck[data-scheme="dark"] .deck-slide:is([data-paper="paper"], [data-paper="soft"]):not(.deck-class-invert), .deck[data-fill="dark"] .deck-slide[data-paper="fill"]) .deck-logo.is-dark { display: block; }
 :is(.deck[data-scheme="light"] :is(.deck-slide[data-paper="ink"], .deck-class-invert), .deck[data-scheme="dark"] .deck-slide:is([data-paper="paper"], [data-paper="soft"]):not(.deck-class-invert), .deck[data-fill="dark"] .deck-slide[data-paper="fill"]) .deck-logo:not(.has-dark, .is-dark) { background: #fff; padding: 0.5cqi; border-radius: 0.5cqi; }
 
+/* A layout's art (docs/kits.md), as its template draws it, behind words that sit where the template has them: its grid edge to edge, the slide laid out left to right, its number too. */
+.deck-art { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; pointer-events: none; }
+.deck-slide.has-art { direction: ltr; }
+.has-art .deck-canvas { padding: 0; gap: 0; }
+.has-art .deck-slot { padding: 0.5cqi 1cqi; }
+.deck[dir="rtl"] .has-art .deck-slot { direction: rtl; }
+
 /* Layouts from their kit's definition: the paper they are on, where their words sit, how big their heading is. */
 .deck-slide[data-paper="fill"] { background: var(--deck-fill); color: var(--deck-on-fill); }
 .deck-slide[data-paper="ink"] { background: var(--deck-ink); color: var(--deck-paper); }
@@ -72,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); }
@@ -86,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

@@ -8,7 +8,7 @@
 // the deck changes or is saved.
 import { parseDeck } from './parse.js'
 import { renderSlide, h } from './render.js'
-import { tokensOf, schemeOf, VOICES, hex, contrast } from './look.js'
+import { tokensOf, schemeOf, VOICES, rgbOf, contrast } from './look.js'
 import { mergeKits } from './kit.js'
 import { stringsFor } from './strings.js'
 import { Lexer } from 'marked'
@@ -108,7 +108,7 @@ export function createDeck(root, options) {
     })) root.style.setProperty(`--deck-${name}`, value)
     root.dataset.scheme = scheme
     // Whether the primary as a fill is dark, for a logo's dark one there.
-    root.dataset.fill = ((fill) => (contrast(fill, [255, 255, 255]) > contrast(fill, [0, 0, 0]) ? 'dark' : 'light'))(hex(tokens.primary) ?? [247, 197, 49])
+    root.dataset.fill = ((fill) => (contrast(fill, [255, 255, 255]) > contrast(fill, [0, 0, 0]) ? 'dark' : 'light'))(rgbOf(tokens.primary) ?? [247, 197, 49])
     root.dispatchEvent(new CustomEvent('deck-scheme', { detail: { scheme, colours, tokens } }))
   }
   const chooseScheme = () => {
@@ -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/index.js

@@ -3,7 +3,7 @@ export { createDeck, markdownOf } from './deck.js'
 export { parseDeck } from './parse.js'
 export { renderSlide } from './render.js'
 export { STANDARD, CORNERS, mergeKits, layoutOf, logoOf, inferLayout, labelOf, tokensFrom } from './kit.js'
-export { tokensOf, schemeOf, LOOKS, readable, contrast } from './look.js'
+export { tokensOf, schemeOf, LOOKS, readable, contrast, rgbOf } from './look.js'
 export { readDeckFile, writeDeckFile, rendererUrl, escape, unescape } from './file.js'
 export { toPptx } from './pptx.js'
 export { defaultBlocks, libraryAt } from './blocks.js'