@codename/deck 0.0.0-stage → 0.1.1

package/src/blocks.js

@@ -0,0 +1,99 @@
+// The drawers a deck opened on its own uses for ```echarts and ```mermaid, each library loaded
+// 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 (Jean) gives
+// its own drawers instead.
+
+/** @typedef {{ base: string, root: HTMLElement, versions?: { echarts?: string, pele?: string } }} Where */
+
+/** @type {Map<string, Promise<any>>} */
+const loading = new Map()
+
+/** A classic script, loaded once: from a file:// page, modules from elsewhere are not always let in. @param {string} src @param {string} global */
+function script(src, global) {
+  if (!loading.has(src)) loading.set(src, new Promise((resolve, reject) => {
+    const tag = document.createElement('script')
+    tag.src = src
+    tag.onload = () => resolve(/** @type {any} */ (globalThis)[global])
+    tag.onerror = reject
+    document.head.append(tag)
+  }))
+  return /** @type {Promise<any>} */ (loading.get(src))
+}
+
+/**
+ * A library's file: from a CDN's npm mirror, at its version (`https://…/npm/name@1.2.3/file`), or from a
+ * node_modules folder, which holds one version (`…/node_modules/name/file`).
+ * @param {string} base @param {string} name @param {string} version @param {string} file
+ */
+export const libraryAt = (base, name, version, file) => (/node_modules\/$/.test(base) ? `${base}${name}/${file}` : `${base}${name}@${version}/${file}`)
+
+/** @param {Where} where */
+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 {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)
+  })
+  // 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
+    const rtl = getComputedStyle(box).direction === 'rtl'
+    const small = Math.round(size * 0.6)
+    const axis = (/** @type {any} */ given, /** @type {boolean} */ across) => given === undefined ? undefined : [given].flat().map((one) => ({
+      axisLabel: { color: colours?.muted, fontSize: small }, axisLine: { lineStyle: { color: colours?.line } }, splitLine: { lineStyle: { color: colours?.line } },
+      nameTextStyle: { color: colours?.muted, fontSize: small }, ...(rtl && across && one.type === 'category' ? { inverse: true } : {}), ...(rtl && !across ? { position: 'right' } : {}), ...one,
+    }))
+    return {
+      color: colours?.series, backgroundColor: 'transparent', animation: !matchMedia('(prefers-reduced-motion: reduce)').matches,
+      textStyle: { fontFamily: getComputedStyle(root).getPropertyValue('--deck-body') || 'system-ui', color: colours?.ink, fontSize: small },
+      ...option,
+      title: option.title ? { ...option.title, textStyle: { color: colours?.ink, fontSize: Math.round(size * 0.8), ...option.title?.textStyle } } : undefined,
+      legend: option.legend ? { itemWidth: small * 1.6, itemHeight: small, ...option.legend, textStyle: { color: colours?.ink, fontSize: small, ...option.legend?.textStyle } } : undefined,
+      grid: { containLabel: true, left: small, right: small, top: option.title ? size * 1.8 : small, bottom: option.legend ? size * 1.6 : small, ...option.grid },
+      xAxis: axis(option.xAxis, true), yAxis: axis(option.yAxis, false), toolbox: undefined,
+      series: [option.series ?? []].flat().map((one) => (one.type === 'pie' ? { label: { color: colours?.ink, fontSize: small }, ...one } : one)),
+    }
+  }
+  return {
+    /** @param {HTMLElement} box @param {string} source */
+    async echarts(box, source) {
+      const option = JSON.parse(source)
+      const echarts = await script(libraryAt(base, 'echarts', chartsAt, 'dist/echarts.min.js'), 'echarts')
+      const place = document.createElement('div')
+      place.className = 'deck-chart'
+      place.setAttribute('role', 'img')
+      place.setAttribute('aria-label', String(option.title?.text ?? ''))
+      box.append(place)
+      const chart = echarts.init(place, null, { renderer: 'svg', locale: document.documentElement.lang?.startsWith('ja') ? 'JA' : 'EN' })
+      const one = { chart, option, box }
+      charts.add(one)
+      chart.setOption(themed(option, box))
+      new ResizeObserver(() => { chart.resize(); chart.setOption(themed(option, box), true) }).observe(place)
+      Object.assign(box, { chart })
+    },
+    /**
+     * 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
+     */
+    async mermaid(box, source) {
+      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 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>`))}`
+      const place = document.createElement('div')
+      place.className = 'deck-diagram'
+      place.append(picture)
+      box.append(place)
+    },
+  }
+}

package/src/css.d.ts

@@ -0,0 +1,5 @@
+// The stylesheet, bundled as text by build.mjs.
+declare module '*.css' {
+  const text: string
+  export default text
+}

package/src/deck.css

@@ -0,0 +1,164 @@
+/* deck: a slide is a 16:9 box, a size container, whose canvas sizes its type and space with the
+   slide's width (cqi), so it wraps the same at any size; its colours and faces are the look's tokens as custom properties; logical properties
+   only, so a deck in Arabic mirrors. The others are laid out behind the one shown, unseen. */
+.deck { --deck-paper: #fffdf8; --deck-ink: #1d1b16; --deck-muted: #6b675e; --deck-line: #e4e0d6; --deck-primary: #8a6100; --deck-fill: #f7c531; --deck-on-fill: #1d1b16; --deck-soft: #fdf1c9;
+  --deck-heading: system-ui, sans-serif; --deck-body: system-ui, sans-serif; --deck-radius: 10px;
+  position: relative; display: grid; gap: 0.5rem; color: var(--deck-ink); font-family: var(--deck-body); }
+.deck *, .deck *::before, .deck *::after { box-sizing: border-box; }
+.deck-stage { position: relative; view-transition-name: deck-stage; }
+.deck-slide {
+  container-type: inline-size; position: relative; aspect-ratio: 16 / 9; overflow: hidden; inline-size: 100%;
+  background: var(--deck-paper); color: var(--deck-ink); border-radius: var(--deck-radius); box-shadow: 0 0 0 1px var(--deck-line);
+}
+.deck-canvas { position: absolute; inset: 0; display: grid; padding: 6cqi 7cqi 7cqi; gap: 0 4cqi; font-size: 2.6cqi; line-height: 1.4; }
+.deck-slide:not(.is-shown) { position: absolute; inset-block-start: 0; inset-inline-start: 0; visibility: hidden; }
+.deck-slot { --deck-fit: 1; min-block-size: 0; min-inline-size: 0; display: flex; flex-direction: column; justify-content: flex-start; font-size: calc(1em * var(--deck-fit)); overflow: hidden; }
+.deck-slot > :first-child { margin-block-start: 0; }
+.deck-slot > :last-child { margin-block-end: 0; }
+.deck-slide :is(h1, h2, h3, h4, .deck-h) { font-family: var(--deck-heading); font-weight: 700; line-height: 1.15; margin: 0 0 0.55em; text-wrap: balance; letter-spacing: -0.01em; }
+.deck-slide :is(h1, .deck-h1) { font-size: 2.1em; }
+.deck-slide :is(h2, .deck-h2) { font-size: 1.6em; }
+.deck-slide :is(h3, .deck-h3) { font-size: 1.25em; color: var(--deck-primary); }
+.deck-slide :is(p, ul, ol, blockquote, pre, .deck-table, .deck-block) { margin-block: 0 0.7em; }
+.deck-slide :is(ul, ol) { padding-inline-start: 1.2em; }
+.deck-slide li { margin-block-end: 0.3em; }
+.deck-slide li::marker { color: var(--deck-primary); }
+.deck-slide .deck-tasks { list-style: none; padding-inline-start: 0; }
+.deck-slide .deck-tasks input { font-size: inherit; inline-size: 0.8em; block-size: 0.8em; margin: 0; margin-inline-end: 0.5em; vertical-align: -0.05em; accent-color: var(--deck-primary); }
+.deck-slide strong { color: var(--deck-primary); }
+.deck-slide a { color: var(--deck-primary); }
+.deck-slide code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.85em; background: var(--deck-soft); padding: 0.05em 0.3em; border-radius: 0.2em; }
+.deck-slide pre { background: color-mix(in srgb, var(--deck-ink) 6%, var(--deck-paper)); padding: 0.8em 1em; border-radius: calc(var(--deck-radius) * 0.6); overflow: hidden; font-size: 0.75em; line-height: 1.45; text-align: start; }
+.deck-slide pre code { background: none; padding: 0; font-size: 1em; }
+.deck-slide pre.has-marks .deck-line:not(.is-marked) { opacity: 0.45; }
+.deck-slide blockquote { border-inline-start: 0.25em solid var(--deck-fill); padding-inline-start: 0.9em; margin-inline: 0; font-style: italic; }
+.deck-slide img { max-inline-size: 100%; max-block-size: 100%; object-fit: contain; }
+.deck-slide .deck-picture { flex: 1; min-block-size: 0; display: grid; place-items: center; }
+.deck-slide .deck-picture img { block-size: 100%; }
+.deck-table { overflow: hidden; }
+.deck-slide table { border-collapse: collapse; inline-size: 100%; font-size: 0.85em; }
+.deck-slide :is(th, td) { padding: 0.35em 0.7em; border-block-end: 1px solid var(--deck-line); text-align: start; }
+.deck-slide th { border-block-end: 2px solid var(--deck-primary); font-weight: 700; }
+.deck-slide [data-align="right"] { text-align: end; font-variant-numeric: tabular-nums; }
+.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; }
+.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; }
+.deck-number { position: absolute; inset-block-end: 2.6cqi; inset-inline-end: 3cqi; font-size: 1.5cqi; color: var(--deck-muted); font-variant-numeric: tabular-nums; }
+
+/* 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); }
+.deck-slide[data-paper="soft"] { background: var(--deck-soft); }
+.deck-slide:is([data-paper="fill"], [data-paper="ink"]) :is(strong, a, h3, .deck-h3) { color: inherit; }
+.deck-slide[data-justify="center"] .deck-slot { justify-content: center; }
+.deck-slide[data-justify="end"] .deck-slot { justify-content: flex-end; }
+.deck-slide[data-align="center"] .deck-slot { align-items: center; text-align: center; }
+.deck-slide[data-align="end"] .deck-slot { align-items: flex-end; text-align: end; }
+.deck-slide[data-title="large"] :is(h1, h2, .deck-h1, .deck-h2) { font-size: 2.4em; }
+.deck-slide[data-title="huge"] :is(h1, .deck-h1) { font-size: 2.9em; }
+.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-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); }
+/* 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); }
+.deck-layout-full .deck-canvas { padding: 0; }
+.deck-slide.has-image .deck-image { background: var(--deck-image) center / cover no-repeat, var(--deck-soft); }
+.deck-layout-image-left.has-image .deck-canvas, .deck-layout-image-right.has-image .deck-canvas { padding: 0; grid-template: "image s-default" 1fr / 1fr 1fr !important; gap: 0; }
+.deck-layout-image-right.has-image .deck-canvas { grid-template-areas: "s-default image" !important; }
+:is(.deck-layout-image-left, .deck-layout-image-right).has-image .deck-image { grid-area: image; }
+: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); }
+.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; }
+
+/* Steps: what a click shows next, there but unseen until then. */
+.deck-step { transition: opacity 0.3s, translate 0.3s; }
+.deck-step:not(.is-on) { opacity: 0; visibility: hidden; translate: 0 0.3em; }
+.deck.is-editing .deck-step:not(.is-on), .deck.is-overview .deck-step:not(.is-on), .deck-print .deck-step { opacity: 1; visibility: visible; translate: none; }
+
+/* Its bar. */
+.deck-bar { display: flex; align-items: center; gap: 0.25rem; font: 0.85rem/1 system-ui, sans-serif; color: var(--deck-muted); }
+.deck-bar button { display: inline-grid; place-items: center; min-inline-size: 2.25rem; min-block-size: 2.25rem; padding: 0 0.5rem; border: 0; border-radius: 0.5rem; background: none; color: var(--deck-ink); font: inherit; cursor: pointer; }
+.deck-bar button:hover { background: color-mix(in srgb, var(--deck-ink) 8%, transparent); }
+.deck-bar button:focus-visible { outline: 2px solid var(--deck-primary); outline-offset: 1px; }
+.deck-bar button:disabled { opacity: 0.35; cursor: default; }
+.deck-bar button[aria-pressed="true"] { background: color-mix(in srgb, var(--deck-primary) 18%, transparent); }
+.deck-bar svg { inline-size: 1.15rem; block-size: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
+.deck-bar [dir="rtl"] .deck-flip, .deck[dir="rtl"] .deck-flip { scale: -1 1; }
+.deck-where { font-variant-numeric: tabular-nums; min-inline-size: 4.5em; text-align: center; }
+.deck-bar .deck-gap { flex: 1; }
+
+/* Presented: the stage fills the screen, black around it. */
+.deck-stage:fullscreen { display: grid; place-items: center; background: #000; }
+.deck-stage:fullscreen .deck-slide { inline-size: min(100vw, 100vh * 16 / 9); border-radius: 0; box-shadow: none; }
+.deck-stage:fullscreen .deck-slide:not(.is-shown) { inset-block-start: 50%; translate: 0 -50%; }
+
+/* The presenter's view: this slide, the next, the notes and the time. */
+.deck-presenter { display: none; }
+.deck.is-presenting { grid-template: "stage next" auto "stage notes" 1fr "bar bar" auto / 3fr 2fr; min-block-size: 70vh; }
+.deck.is-presenting .deck-stage { grid-area: stage; align-self: start; }
+.deck.is-presenting .deck-presenter { display: contents; }
+.deck.is-presenting .deck-bar { grid-area: bar; }
+.deck-next { grid-area: next; display: grid; gap: 0.3rem; font: 0.8rem system-ui, sans-serif; color: var(--deck-muted); }
+.deck-next .deck-slide { position: relative; visibility: visible; }
+.deck-notes { grid-area: notes; overflow: auto; padding: 0.8rem 1rem; border-radius: 0.6rem; background: color-mix(in srgb, var(--deck-ink) 5%, transparent); font: 1.1rem/1.5 system-ui, sans-serif; white-space: pre-wrap; }
+.deck-clock { font-variant-numeric: tabular-nums; font-size: 1.2rem; color: var(--deck-ink); }
+
+/* All the slides at once. */
+.deck.is-overview .deck-stage { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.8rem; view-transition-name: none; }
+.deck.is-overview .deck-slide { position: relative; visibility: visible; cursor: pointer; }
+.deck.is-overview .deck-slide.is-shown { box-shadow: 0 0 0 3px var(--deck-primary); }
+
+/* Changed by hand: the Markdown beside the slides, and words changed on a slide in place. */
+.deck.is-editing { grid-template: "source stage" auto "source bar" 1fr / minmax(18rem, 2fr) 3fr; align-items: start; }
+.deck.is-editing .deck-stage { grid-area: stage; }
+.deck.is-editing .deck-bar { grid-area: bar; }
+.deck-source { display: none; }
+.deck.is-editing .deck-source { display: block; grid-area: source; inline-size: 100%; block-size: min(80vh, 48rem); resize: vertical; padding: 0.8rem; border: 1px solid var(--deck-line); border-radius: 0.6rem; background: var(--deck-paper); color: var(--deck-ink); font: 0.85rem/1.55 ui-monospace, Menlo, Consolas, monospace; tab-size: 2; }
+.deck.is-editing [data-edit] { cursor: text; border-radius: 0.15em; }
+.deck.is-editing [data-edit]:hover { box-shadow: 0 0 0 0.12em color-mix(in srgb, var(--deck-primary) 45%, transparent); }
+.deck [data-edit][contenteditable] { outline: 0.12em solid var(--deck-primary); outline-offset: 0.1em; }
+.deck-slide[data-overflow] { box-shadow: 0 0 0 3px #c92a2a; }
+@media (max-width: 52rem) { .deck.is-editing, .deck.is-presenting { grid-template: none; display: grid; } .deck.is-editing .deck-source { block-size: 40vh; } .deck.is-presenting .deck-presenter { display: grid; } }
+
+/* Transitions between slides, as Slidev names them; none for those who'd rather not. */
+::view-transition-group(deck-stage) { animation-duration: 0.45s; animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
+html[data-deck-transition~="fade"]::view-transition-old(deck-stage) { animation: 0.35s ease both deck-out-fade; }
+html[data-deck-transition~="fade"]::view-transition-new(deck-stage) { animation: 0.35s ease both deck-in-fade; }
+html[data-deck-transition~="slide-left"]::view-transition-old(deck-stage) { animation: 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both deck-out-start; }
+html[data-deck-transition~="slide-left"]::view-transition-new(deck-stage) { animation: 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both deck-in-end; }
+html[data-deck-transition~="slide-right"]::view-transition-old(deck-stage) { animation: 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both deck-out-end; }
+html[data-deck-transition~="slide-right"]::view-transition-new(deck-stage) { animation: 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both deck-in-start; }
+html[data-deck-transition~="slide-up"]::view-transition-old(deck-stage) { animation: 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both deck-out-up; }
+html[data-deck-transition~="slide-up"]::view-transition-new(deck-stage) { animation: 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both deck-in-up; }
+html[data-deck-transition~="morph"]::view-transition-old(deck-stage) { animation: 0.3s ease both deck-out-fade; }
+html[data-deck-transition~="morph"]::view-transition-new(deck-stage) { animation: 0.3s ease both deck-in-fade; }
+html[data-deck-transition~="morph"]::view-transition-group(*) { animation-duration: 0.6s; }
+@keyframes deck-out-fade { to { opacity: 0; } }
+@keyframes deck-in-fade { from { opacity: 0; } }
+@keyframes deck-out-start { to { translate: -30% 0; opacity: 0; } }
+@keyframes deck-in-end { from { translate: 30% 0; opacity: 0; } }
+@keyframes deck-out-end { to { translate: 30% 0; opacity: 0; } }
+@keyframes deck-in-start { from { translate: -30% 0; opacity: 0; } }
+@keyframes deck-out-up { to { translate: 0 -20%; opacity: 0; } }
+@keyframes deck-in-up { from { translate: 0 20%; opacity: 0; } }
+@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } .deck-step { transition: none; } }
+@media (forced-colors: active) { .deck-slide { border: 1px solid CanvasText; } .deck-step:not(.is-on) { visibility: hidden; } }
+
+/* On paper: every slide, one a page, every step shown, no bar. */
+@media print {
+  @page { size: 13.333in 7.5in; margin: 0; }
+  .deck-bar, .deck-source, .deck-presenter { display: none !important; }
+  .deck, .deck.is-editing, .deck.is-presenting { display: block; }
+  .deck-slide, .deck-slide:not(.is-shown) { position: relative; visibility: visible; break-after: page; border-radius: 0; box-shadow: none; inline-size: 100vw; }
+  .deck-step:not(.is-on) { opacity: 1; visibility: visible; translate: none; }
+}

package/src/deck.js

@@ -0,0 +1,359 @@
+// A deck on a page: its slides drawn into the element given, paged with the bar, the keys a
+// presenter's clicker sends, a click or a swipe; each step shown in turn; moved between with the
+// transition its settings name, through the View Transitions API; presented full screen, with
+// the presenter's view (this slide, the next, the notes, the time) and all slides at once; light
+// or dark; changed as Markdown beside the slides, or in place on a slide, live. Host-agnostic:
+// the host gives the drawers of ```echarts and ```mermaid, how a picture's address resolves, its
+// words, how a slide's Markdown is read (its own marked, with its extensions), and what to do when
+// the deck changes or is saved.
+import { parseDeck } from './parse.js'
+import { renderSlide, h } from './render.js'
+import { tokensOf, schemeOf, VOICES } from './look.js'
+import { mergeKits } from './kit.js'
+import { stringsFor } from './strings.js'
+import { Lexer } from 'marked'
+
+/** @typedef {import('./parse.js').Deck} Deck */
+/**
+ * @typedef {{
+ *   source: string, lang?: string, dir?: string, kit?: Record<string, any>, scheme?: 'light' | 'dark' | 'auto',
+ *   blocks?: Record<string, import('./render.js').Drawer>, resolve?: (src: string) => string | null,
+ *   strings?: Record<string, string>, headings?: 'real' | 'aria', editable?: boolean, lex?: (markdown: string) => any[],
+ *   onChange?: (source: string) => void, onSave?: (source: string) => void, onExport?: (deck: DeckView) => void,
+ * }} Options
+ */
+
+const RTL = /^(ar|he|fa|ur|ps|sd|ug|yi|dv|ckb)\b/i
+const ICONS = {
+  back: 'M15 5l-7 7 7 7', next: 'M9 5l7 7-7 7', present: 'M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5',
+  presenter: 'M3 5h12v9H3zM18 8h3M18 12h3M6 19h6', grid: 'M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4zM14 14h6v6h-6z',
+  edit: 'M4 20h4L19 9l-4-4L4 16zM13.5 6.5l4 4', scheme: 'M12 3a9 9 0 1 0 9 9 7 7 0 0 1-9-9z', export: 'M12 4v11M7 10l5 5 5-5M5 20h14',
+}
+
+/** @param {string} name */
+function icon(name) {
+  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+  svg.setAttribute('viewBox', '0 0 24 24')
+  svg.setAttribute('aria-hidden', 'true')
+  if (name === 'back' || name === 'next') svg.setAttribute('class', 'deck-flip')
+  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+  path.setAttribute('d', ICONS[/** @type {keyof typeof ICONS} */ (name)])
+  svg.append(path)
+  return svg
+}
+
+/** @typedef {ReturnType<typeof createDeck>} DeckView */
+
+/** @param {HTMLElement} root @param {Options} options */
+export function createDeck(root, options) {
+  let source = options.source.replace(/\r\n?/g, '\n')
+  let deck = parseDeck(source)
+  let at = 0, stepAt = 0
+  /** @type {{ element: HTMLElement, steps: number }[]} */
+  let drawn = []
+  const lang = String(options.lang ?? deck.settings.lang ?? document.documentElement.lang ?? 'en') || 'en'
+  const dir = String(options.dir ?? deck.settings.dir ?? (RTL.test(lang) ? 'rtl' : 'ltr'))
+  const words = { ...stringsFor(lang), ...options.strings }
+  const number = new Intl.NumberFormat(lang).format
+  const dark = matchMedia('(prefers-color-scheme: dark)')
+  let scheme = /** @type {'light' | 'dark'} */ ('light')
+  const started = Date.now()
+
+  root.classList.add('deck')
+  root.lang = lang
+  root.dir = dir
+  const stage = h('div', { class: 'deck-stage', tabindex: 0, role: 'region', 'aria-roledescription': words.carousel, 'aria-label': words.deck })
+  const where = h('span', { class: 'deck-where', 'aria-live': 'polite' })
+  const button = (/** @type {string} */ name, /** @type {string} */ label, /** @type {() => void} */ act) => {
+    const b = h('button', { type: 'button', 'aria-label': label, 'data-act': name }, [icon(name)])
+    b.addEventListener('click', act)
+    return b
+  }
+  const back = button('back', words.previous, () => move(-1))
+  const next = button('next', words.next, () => move(1))
+  const editButton = button('edit', words.edit, () => toggle('is-editing'))
+  const presenterButton = button('presenter', words.presenter, () => toggle('is-presenting'))
+  const overviewButton = button('grid', words.overview, () => toggle('is-overview'))
+  const bar = h('div', { class: 'deck-bar' }, [back, where, next, h('span', { class: 'deck-gap' }),
+    overviewButton, presenterButton, options.editable === false ? null : editButton,
+    button('scheme', words.scheme, () => { scheme = scheme === 'dark' ? 'light' : 'dark'; paintLook() }),
+    options.onExport ? button('export', words.export, () => options.onExport?.(view)) : null,
+    document.fullscreenEnabled ? button('present', words.present, () => present()) : null])
+  const sourceBox = /** @type {HTMLTextAreaElement} */ (h('textarea', { class: 'deck-source', spellcheck: 'false', 'aria-label': words.source, dir: 'auto' }))
+  const nextBox = h('div', { class: 'deck-next' })
+  const notes = h('div', { class: 'deck-notes', dir: 'auto', 'aria-label': words.notes })
+  const clock = h('span', { class: 'deck-clock' })
+  const presenter = h('div', { class: 'deck-presenter' }, [nextBox, notes])
+  root.replaceChildren(sourceBox, stage, presenter, bar)
+  bar.insertBefore(clock, bar.querySelector('.deck-gap'))
+
+  // The kit: deck's own, under the host's (an organisation's, a project's), under the file's own.
+  let kitProblems = /** @type {string[]} */ ([])
+  const kitOf = () => {
+    const merged = mergeKits(options.kit, deck.settings.kit)
+    kitProblems = merged.problems
+    return merged.kit
+  }
+
+  function paintLook() {
+    context.kit = kitOf()
+    const tokens = tokensOf(deck.settings, context.kit.tokens)
+    const colours = schemeOf(tokens, scheme)
+    const stack = (/** @type {string[]} */ faces) => faces.map((f) => (/^[\w-]+$/.test(f) ? f : `"${f.replace(/["\\]/g, '')}"`)).join(', ')
+    const voice = tokens.fonts ? { heading: stack(tokens.fonts.heading), body: stack(tokens.fonts.body) } : VOICES[tokens.voice]
+    for (const [name, value] of Object.entries({
+      paper: colours.paper, ink: colours.ink, muted: colours.muted, line: colours.line, primary: colours.primary,
+      fill: tokens.primary, 'on-fill': colours.onPrimary, soft: colours.soft, heading: voice.heading, body: voice.body, radius: `${tokens.radius}px`,
+      ...Object.fromEntries(colours.series.map((colour, n) => [`series-${n + 1}`, colour])),
+    })) root.style.setProperty(`--deck-${name}`, value)
+    root.dataset.scheme = scheme
+    root.dispatchEvent(new CustomEvent('deck-scheme', { detail: { scheme, colours, tokens } }))
+  }
+  const chooseScheme = () => {
+    const asked = options.scheme ?? deck.settings.colorSchema ?? 'auto'
+    scheme = asked === 'dark' || (asked === 'auto' && dark.matches) ? 'dark' : 'light'
+  }
+
+  /** @type {import('./render.js').Context} */
+  const context = {
+    blocks: options.blocks ?? {}, resolve: options.resolve ?? ((src) => src), headings: options.headings ?? 'real', number: (n) => number(n), total: 0, kit: mergeKits().kit,
+    lex: options.lex ?? ((markdown) => new Lexer({ gfm: true }).lex(markdown)), slide: words.slide,
+  }
+
+  function draw() {
+    context.total = deck.slides.length
+    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)))
+      element.addEventListener('click', () => { if (root.classList.contains('is-overview')) { toggle('is-overview'); go(i, 0) } })
+    }
+    stage.replaceChildren(...drawn.map(({ element }) => element))
+    at = Math.min(at, drawn.length - 1)
+    show()
+    requestAnimationFrame(() => fitAll())
+  }
+
+  /** Each slot's type shrunk, down to six tenths, until it holds what it says; a slide still over is marked. */
+  function fitAll() {
+    for (const { element } of drawn) fit(element)
+  }
+  /** @param {HTMLElement} slide */
+  function fit(slide) {
+    let over = false
+    for (const slot of /** @type {NodeListOf<HTMLElement>} */ (slide.querySelectorAll('.deck-slot'))) {
+      let scale = 1
+      slot.style.setProperty('--deck-fit', '1')
+      while (slot.scrollHeight > slot.clientHeight + 1 && scale > 0.6) slot.style.setProperty('--deck-fit', String((scale = Math.round((scale - 0.05) * 100) / 100)))
+      if (slot.scrollHeight > slot.clientHeight + 1) over = true
+    }
+    if (over) slide.dataset.overflow = 'true'
+    else delete slide.dataset.overflow
+  }
+
+  function show() {
+    for (const [i, { element, steps }] of drawn.entries()) {
+      element.classList.toggle('is-shown', i === at)
+      element.inert = i !== at && !root.classList.contains('is-overview')
+      for (const one of element.querySelectorAll('.deck-step')) one.classList.toggle('is-on', i < at || (i === at && Number(one.getAttribute('data-step')) <= stepAt) || steps === 0)
+    }
+    where.textContent = `${number(at + 1)} / ${number(drawn.length)}`
+    back.toggleAttribute('disabled', at === 0 && stepAt === 0)
+    next.toggleAttribute('disabled', at >= drawn.length - 1 && stepAt >= (drawn[at]?.steps ?? 0))
+    notes.textContent = deck.slides[at]?.notes || words.noNotes
+    const following = deck.slides[at + 1]
+    nextBox.replaceChildren(h('span', {}, [following ? words.upNext : words.last]), ...(following ? [renderSlide(following, context).element] : []))
+    root.dispatchEvent(new CustomEvent('deck-move', { detail: { at, step: stepAt } }))
+  }
+
+  /** A click on, or the next key: the next step, else the next slide. @param {number} by */
+  function move(by) {
+    const steps = drawn[at]?.steps ?? 0
+    if (by > 0 && stepAt < steps) { stepAt++; show(); return }
+    if (by < 0 && stepAt > 0) { stepAt--; show(); return }
+    const to = at + by
+    if (to < 0 || to >= drawn.length) return
+    go(to, by > 0 ? 0 : drawn[to].steps)
+  }
+
+  /** @param {number} to @param {number} [toStep] */
+  function go(to, toStep = 0) {
+    if (to === at) { stepAt = toStep; show(); return }
+    const forward = to > at
+    const settings = deck.slides[forward ? to : at]?.settings ?? {}
+    const named = String(settings.transition ?? deck.settings.transition ?? 'none')
+    // Slidev's `a | b`: one going forward, the other going back.
+    const [ahead, behind] = named.split('|').map((part) => part.trim())
+    let kind = forward ? ahead : behind ?? ahead
+    if (dir === 'rtl') kind = kind.replace(/-(left|right)$/, (_, side) => (side === 'left' ? '-right' : '-left'))
+    if (kind === 'view-transition') kind = 'morph'
+    const update = () => { at = to; stepAt = toStep; if (kind === 'morph') name(drawn[to].element); show() }
+    const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches
+    if (!document.startViewTransition || kind === 'none' || reduced || root.classList.contains('is-overview')) return update()
+    if (kind === 'morph') name(drawn[at].element, drawn[to].element)
+    document.documentElement.dataset.deckTransition = kind
+    const transition = document.startViewTransition(update)
+    // A transition skipped by the next one, as a clicker pressed twice does, is no error.
+    transition.ready.catch(() => {})
+    transition.finished.finally(() => {
+      delete document.documentElement.dataset.deckTransition
+      for (const { element } of drawn) for (const one of element.querySelectorAll('[data-morph]')) { /** @type {HTMLElement} */ (one).style.removeProperty('view-transition-name'); one.removeAttribute('data-morph') }
+    })
+  }
+
+  /**
+   * Morph, as Keynote's Magic Move and PowerPoint's Morph do it, with nothing to write: what two
+   * slides share (a heading's words, a list item's, a picture, a chart) gets one name on each,
+   * so the browser moves it from where it was to where it goes. Called with the slide shown and
+   * the next, then with the next alone once it shows. @param {HTMLElement} slide @param {HTMLElement} [toward]
+   */
+  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')])
+    if (toward) {
+      const there = new Map(parts(toward).map((el) => [key(el), el]))
+      let n = 0
+      for (const el of parts(slide)) {
+        const match = there.get(key(el))
+        if (!match || match.dataset.morph || el.closest('[data-morph]')) continue
+        const id = `deck-m${n++}`
+        el.dataset.morph = match.dataset.morph = id
+        el.style.setProperty('view-transition-name', id)
+      }
+      return
+    }
+    for (const el of /** @type {NodeListOf<HTMLElement>} */ (slide.querySelectorAll('[data-morph]'))) {
+      const id = /** @type {string} */ (el.dataset.morph)
+      for (const old of /** @type {NodeListOf<HTMLElement>} */ (stage.querySelectorAll(`[data-morph="${id}"]`))) if (old !== el) old.style.removeProperty('view-transition-name')
+      el.style.setProperty('view-transition-name', id)
+    }
+  }
+
+  /** @param {string} mode */
+  function toggle(mode) {
+    for (const other of ['is-editing', 'is-presenting', 'is-overview']) if (other !== mode) root.classList.remove(other)
+    root.classList.toggle(mode)
+    editButton.setAttribute('aria-pressed', String(root.classList.contains('is-editing')))
+    presenterButton.setAttribute('aria-pressed', String(root.classList.contains('is-presenting')))
+    overviewButton.setAttribute('aria-pressed', String(root.classList.contains('is-overview')))
+    if (root.classList.contains('is-editing')) { sourceBox.value = source; sourceBox.focus() }
+    show()
+    requestAnimationFrame(() => fitAll())
+  }
+
+  function present() {
+    stage.requestFullscreen?.().then(() => stage.focus(), () => {})
+  }
+
+  /** The source changed, by the Markdown or on a slide: read again, drawn again, where the user is. @param {string} text */
+  function setSource(text) {
+    source = text.replace(/\r\n?/g, '\n')
+    deck = parseDeck(source)
+    paintLook()
+    draw()
+    options.onChange?.(source)
+  }
+
+  // Changed as Markdown: drawn again as the user types, the slide under the caret shown.
+  let pending = 0
+  sourceBox.addEventListener('input', (event) => {
+    if (/** @type {InputEvent} */ (event).isComposing) return
+    clearTimeout(pending)
+    pending = setTimeout(() => setSource(sourceBox.value), 120)
+  })
+  const followCaret = () => {
+    const caret = sourceBox.selectionStart
+    const found = deck.slides.findIndex((slide) => caret >= slide.start && caret <= slide.end + 1)
+    if (found >= 0 && found !== at) { at = found; stepAt = drawn[found]?.steps ?? 0; show() }
+  }
+  sourceBox.addEventListener('keyup', followCaret)
+  sourceBox.addEventListener('click', followCaret)
+
+  // Changed in place: a double click on words makes them editable; Enter or leaving keeps them.
+  stage.addEventListener('dblclick', (event) => {
+    if (options.editable === false || document.fullscreenElement) return
+    const target = /** @type {HTMLElement | null} */ (/** @type {Element} */ (event.target).closest('[data-edit]'))
+    if (!target) return
+    const [from, to] = /** @type {string} */ (target.dataset.edit).split('-').map(Number)
+    target.contentEditable = 'true'
+    target.focus()
+    const done = (/** @type {boolean} */ keep) => {
+      target.removeEventListener('keydown', key)
+      target.removeEventListener('blur', blur)
+      target.contentEditable = 'false'
+      const words = markdownOf(target)
+      if (keep && words !== source.slice(from, to)) setSource(source.slice(0, from) + words + source.slice(to))
+      else draw()
+    }
+    const key = (/** @type {KeyboardEvent} */ e) => {
+      if (e.isComposing) return
+      if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); done(true) }
+      if (e.key === 'Escape') { e.preventDefault(); done(false) }
+    }
+    const blur = () => done(true)
+    target.addEventListener('keydown', key)
+    target.addEventListener('blur', blur)
+  })
+
+  // The keys a clicker sends, and the deck's own.
+  root.addEventListener('keydown', (event) => {
+    const target = /** @type {HTMLElement} */ (event.target)
+    if (target.isContentEditable || target === sourceBox || (target.tagName === 'BUTTON' && (event.key === ' ' || event.key === 'Enter'))) {
+      if ((event.metaKey || event.ctrlKey) && event.key === 's') { event.preventDefault(); options.onSave?.(source) }
+      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) }
+      return
+    }
+    const acts = /** @type {Record<string, () => void>} */ ({
+      [forward]: () => move(1), [backward]: () => move(-1), ArrowDown: () => move(1), ArrowUp: () => move(-1), PageDown: () => move(1), PageUp: () => move(-1), ' ': () => move(1),
+      Home: () => go(0), End: () => go(drawn.length - 1, drawn.at(-1)?.steps ?? 0), f: present, p: () => toggle('is-presenting'), o: () => toggle('is-overview'), e: () => toggle('is-editing'),
+    })
+    const act = acts[event.key]
+    if (!act) return
+    event.preventDefault()
+    act()
+  })
+  stage.addEventListener('click', (event) => {
+    if (document.fullscreenElement && !(/** @type {Element} */ (event.target).closest('a, button, input'))) move(1)
+  })
+  let touch = 0
+  stage.addEventListener('touchstart', (event) => { touch = event.touches[0].clientX }, { passive: true })
+  stage.addEventListener('touchend', (event) => {
+    const dx = event.changedTouches[0].clientX - touch
+    if (Math.abs(dx) > 50) move((dx < 0) === (dir !== 'rtl') ? 1 : -1)
+  })
+  dark.addEventListener('change', () => { chooseScheme(); paintLook() })
+  const tick = setInterval(() => {
+    const s = Math.floor((Date.now() - started) / 1000)
+    clock.textContent = root.classList.contains('is-presenting') ? `${String(Math.floor(s / 60)).padStart(2, '0')}:${String(s % 60).padStart(2, '0')}` : ''
+  }, 1000)
+
+  chooseScheme()
+  paintLook()
+  draw()
+  document.fonts?.ready.then(() => fitAll())
+
+  const view = {
+    root, stage, get source() { return source }, get deck() { return deck }, get at() { return at }, get scheme() { return scheme }, get kit() { return context.kit }, get kitProblems() { return kitProblems }, lang, dir,
+    slides: () => drawn.map(({ element }) => element), setSource, go, toggle, present, fitAll,
+    setScheme: (/** @type {'light' | 'dark'} */ value) => { scheme = value; paintLook() },
+    destroy: () => clearInterval(tick),
+  }
+  return view
+}
+
+/** The Markdown of words changed in place: bold, italics, code and links kept as Markdown writes them. @param {Node} node @returns {string} */
+export function markdownOf(node) {
+  let out = ''
+  for (const child of node.childNodes) {
+    if (child.nodeType === Node.TEXT_NODE) out += (child.textContent ?? '').replace(/([*_`[\]\\])/g, '\\$1')
+    else if (child instanceof HTMLElement) {
+      const inner = markdownOf(child)
+      out += ({ STRONG: `**${inner}**`, B: `**${inner}**`, EM: `*${inner}*`, I: `*${inner}*`, CODE: `\`${child.textContent}\``, DEL: `~~${inner}~~`, BR: '  \n',
+        A: `[${inner}](${child.getAttribute('href') ?? ''})` })[child.tagName] ?? inner
+    }
+  }
+  return out.replace(/ /g, ' ').replace(/\n+$/, '')
+}