mdeck 3.7.0 → 3.8.0

package/src/components/VideoPlayer.jsx

@@ -1,5 +1,6 @@
 import { h } from 'preact'
 import { useEffect, useRef, useState } from 'preact/hooks'
+import { t } from '../core/labels.js'
 import './video-player.css'
 
 function getEmbedUrl(rawUrl, autoplay = false) {
@@ -58,6 +59,66 @@ export default function VideoPlayer({ src, url, play = 'click', aspect, muted })
     return () => stage.removeEventListener('slidechange', onSlideChange)
   }, [play, src])
 
+  // Local video between the screens of a talk: play, pause or a jump on one
+  // (an iPad presenting) does the same on the others (the projector),
+  // through the stage event `mediacontrol`, which the ink bus carries
+  // (src/runtime/ink/bus.js). A video is known by its slide and its place on
+  // it. Only the slide on screen follows, and a phone following the talk
+  // does not. The presenter view's own copy goes silent while another
+  // screen shows the deck, so the sound comes from there. A screen that may
+  // not start sound yet (nobody clicked it) plays silently and offers sound.
+  const [offerSound, setOfferSound] = useState(false)
+  useEffect(() => {
+    const video = videoRef.current
+    const stage = containerRef.current?.closest('deck-stage')
+    if (!src || !video || !stage || new URLSearchParams(location.search).get('view') === 'follow') return
+    const slide = () => containerRef.current?.closest('deck-stage > *')
+    const key = () => {
+      const own = slide()
+      if (!own) return null
+      return `${[...stage.children].indexOf(own)}:${[...own.querySelectorAll('.video-player-container')].indexOf(containerRef.current)}`
+    }
+    // Changes made to follow another screen are not sent back.
+    let following = 0
+    const tell = action => {
+      if (Date.now() < following || !slide()?.hasAttribute('data-deck-active')) return
+      if (action === 'play' && stage.hasAttribute('data-others-watching')) video.muted = true
+      stage.dispatchEvent(new CustomEvent('mediacontrol', { detail: { video: key(), action, time: video.currentTime, local: true } }))
+    }
+    const onPlay = () => tell('play')
+    const onPause = () => tell('pause')
+    const onSeeked = () => tell(video.paused ? 'pause' : 'play')
+    const follow = ({ detail }) => {
+      if (!detail || detail.local || detail.video !== key() || !slide()?.hasAttribute('data-deck-active')) return
+      following = Date.now() + 600
+      if (Number.isFinite(detail.time) && Math.abs(video.currentTime - detail.time) > 0.4) video.currentTime = detail.time
+      if (detail.action === 'pause') { video.pause(); return }
+      // Only a refusal to start sound is retried silently; a pause that came
+      // in while it was starting cancels it (AbortError) and stays.
+      video.play().catch(error => {
+        if (error?.name !== 'NotAllowedError') return
+        following = Date.now() + 600
+        video.muted = true
+        setOfferSound(true)
+        return video.play()
+      }).catch(() => {})
+    }
+    video.addEventListener('play', onPlay)
+    video.addEventListener('pause', onPause)
+    video.addEventListener('seeked', onSeeked)
+    stage.addEventListener('mediacontrol', follow)
+    return () => {
+      video.removeEventListener('play', onPlay)
+      video.removeEventListener('pause', onPause)
+      video.removeEventListener('seeked', onSeeked)
+      stage.removeEventListener('mediacontrol', follow)
+    }
+  }, [src])
+  const turnSoundOn = () => {
+    if (videoRef.current) videoRef.current.muted = false
+    setOfferSound(false)
+  }
+
   // Web video auto mode: clear/restore src on slide change to stop/start playback
   useEffect(() => {
     if (play !== 'auto' || !url) return
@@ -112,12 +173,15 @@ export default function VideoPlayer({ src, url, play = 'click', aspect, muted })
               style={{ width: '100%', height: fixedAspect ? '100%' : 'auto', aspectRatio: fixedAspect ? undefined : '16 / 9', border: '0', display: 'block' }} />
           : <div class="video-player-placeholder" />
       ) : (
-        <video
-          ref={videoRef}
-          src={src}
-          controls
-          style={{ width: '100%', height: fixedAspect ? '100%' : 'auto', display: 'block' }}
-        />
+        <>
+          <video
+            ref={videoRef}
+            src={src}
+            controls
+            style={{ width: '100%', height: fixedAspect ? '100%' : 'auto', display: 'block' }}
+          />
+          {offerSound && <button type="button" class="video-player-sound" onClick={turnSoundOn}>{t('video.sound')}</button>}
+        </>
       )}
     </div>
   )

package/src/components/callout.css

@@ -2,7 +2,7 @@
    something important are emphasis, in the accent; a warning and a caution
    call for attention, in the third accent. */
 .callout {
-  border-left: 4px solid var(--rule);
+  border-inline-start: 4px solid var(--rule);
   padding: 20px 28px;
   background: var(--surface, var(--bg));
   margin: var(--gap-item) 0;
@@ -14,10 +14,10 @@
   text-transform: uppercase;
   margin: 0 0 8px 0;
 }
-.callout p { margin: 0; color: var(--ink-soft); padding-left: 28px; }
+.callout p { margin: 0; color: var(--ink-soft); padding-inline-start: 28px; }
 
-.callout:is(.callout-note, .callout-tip, .callout-important) { border-left-color: var(--accent); }
-.callout:is(.callout-warning, .callout-caution)              { border-left-color: var(--accent-3); }
+.callout:is(.callout-note, .callout-tip, .callout-important) { border-inline-start-color: var(--accent); }
+.callout:is(.callout-warning, .callout-caution)              { border-inline-start-color: var(--accent-3); }
 
 /* Titles are text: the accent mixed with the text colour, darker on light
    slides and lighter on dark ones, so they can be read on both. The third
@@ -32,8 +32,8 @@
    into its text, and a square ends it. Themes with their own callout style
    colour these blocks their way; the proof is shared, and themes that set
    it differently (academic, sketch) use the same selectors. */
-.callout:is(.callout-theorem, .callout-lemma, .callout-corollary) { border-left-color: var(--accent); }
-.callout.callout-definition { border-left-color: var(--accent-2); }
+.callout:is(.callout-theorem, .callout-lemma, .callout-corollary) { border-inline-start-color: var(--accent); }
+.callout.callout-definition { border-inline-start-color: var(--accent-2); }
 .callout:is(.callout-theorem, .callout-lemma, .callout-corollary) .callout-title { color: color-mix(in oklab, var(--accent) 75%, var(--ink)); }
 .callout.callout-definition .callout-title { color: color-mix(in oklab, var(--accent-2) 75%, var(--ink)); }
 .callout:is(.callout-theorem, .callout-lemma, .callout-corollary) > :not(.callout-title) { font-style: italic; }
@@ -50,8 +50,8 @@
 .slide-body .callout.callout-proof::before { display: none; }
 .slide-body .callout.callout-proof .callout-title {
   display: inline;
-  float: left;
-  margin: 0 0.4em 0 0;
+  float: inline-start;
+  margin-block: 0; margin-inline: 0 0.4em;
   padding: 0;
   background: none;
   font-size: inherit;
@@ -64,5 +64,5 @@
 }
 .slide-body .callout.callout-proof .callout-title::before { content: none; }
 .slide-body .callout.callout-proof .callout-title::after { content: '.'; }
-.slide-body .callout.callout-proof > :not(.callout-title) { padding-left: 0; font-style: normal; }
-.slide-body .callout.callout-proof > :last-child::after { content: '\220E'; margin-left: 0.6em; color: var(--ink); }
+.slide-body .callout.callout-proof > :not(.callout-title) { padding-inline-start: 0; font-style: normal; }
+.slide-body .callout.callout-proof > :last-child::after { content: '\220E'; margin-inline-start: 0.6em; color: var(--ink); }

package/src/components/citation.css

@@ -18,8 +18,8 @@
 .slide-citations .csl-bib-body { display: flex; flex-direction: column; gap: 4px; }
 
 /* Entries hang; numeric styles put the number in a margin column. */
-.csl-entry { line-height: 1.4; padding-left: 1.5em; text-indent: -1.5em; overflow-wrap: anywhere; }
-.csl-entry:has(.csl-left-margin) { display: grid; grid-template-columns: auto 1fr; column-gap: 0.6em; padding-left: 0; text-indent: 0; }
+.csl-entry { line-height: 1.4; padding-inline-start: 1.5em; text-indent: -1.5em; overflow-wrap: anywhere; }
+.csl-entry:has(.csl-left-margin) { display: grid; grid-template-columns: auto 1fr; column-gap: 0.6em; padding-inline-start: 0; text-indent: 0; }
 .csl-left-margin { color: var(--muted); font-variant-numeric: tabular-nums; }
 .csl-entry a { color: inherit; text-decoration: none; }
 

package/src/components/code-block.css

@@ -25,7 +25,7 @@ code[class*="language-"] { color: var(--token-default); }
   margin: 40px 0;
   width: 100%;
   /* Centred layouts (focus, title) must not centre the lines of code. */
-  text-align: left;
+  text-align: start;
 }
 
 /* ── Action buttons ─────────────────────────────────────────────────────── */
@@ -103,11 +103,11 @@ code[class*="language-"] { color: var(--token-default); }
   max-height: 10em;
   overflow-y: auto;
   border-radius: 0 8px 8px 8px;
-  border-left: 4px solid var(--rule);
+  border-inline-start: 4px solid var(--rule);
 }
 .code-output--error {
   color: #f87171;
-  border-left-color: #ef4444;
+  border-inline-start-color: #ef4444;
 }
 
 /* ── Code taller than its place on the slide (src/runtime/fit.js) ───────── */

package/src/components/poll.css

@@ -9,14 +9,14 @@
 .poll-row { display: grid; grid-template-columns: minmax(120px, 28%) 1fr 3ch; gap: 24px; align-items: center; }
 .poll-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 /* buttons="letters|numbers": the key phones show, before the option. */
-.poll-key { display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; margin-right: .5em; padding: 0 .3em; border-radius: .4em; background: color-mix(in srgb, var(--accent, #0d9488) 14%, transparent); color: var(--accent, #0d9488); font-weight: 700; font-size: .8em; vertical-align: .1em; }
+.poll-key { display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; margin-inline-end: .5em; padding: 0 .3em; border-radius: .4em; background: color-mix(in srgb, var(--accent, #0d9488) 14%, transparent); color: var(--accent, #0d9488); font-weight: 700; font-size: .8em; vertical-align: .1em; }
 /* A picture as an option: a thumbnail beside its bar. */
 .poll-label:has(img) { white-space: normal; }
 .poll-label img { max-height: 3.2em; max-width: 100%; vertical-align: middle; }
 .poll .poll-several { margin: -20px 0 24px; font-size: var(--fs-small, 24px); color: var(--muted, #666); }
 .poll-track { height: 1.1em; background: color-mix(in srgb, var(--ink, #111) 8%, transparent); border-radius: 6px; overflow: hidden; }
 .poll-fill { display: block; height: 100%; background: var(--accent, #0d9488); border-radius: 6px; transition: width .6s cubic-bezier(.2, .8, .2, 1); }
-.poll-count { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
+.poll-count { text-align: end; font-variant-numeric: tabular-nums; font-weight: 600; }
 .poll .poll-total { display: flex; align-items: center; gap: 14px; margin: 36px 0 0; font-size: var(--fs-small, 24px); color: var(--muted, #666); }
 .poll-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--muted, #999); opacity: .5; }
 .poll-dot.is-live { background: #16a34a; opacity: 1; }
@@ -44,16 +44,16 @@ deck-stage[data-follower] .poll.is-results-hidden .poll-fill, deck-stage[data-fo
 .poll-link { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 20px; color: var(--muted, #555); }
 /* The join code in the slide's own colours (see QrCode.jsx). */
 .poll-join { flex: none; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px; border: 1px solid var(--rule, rgba(0,0,0,.12)); border-radius: 12px; color: var(--ink, #111); text-decoration: none; font-size: var(--fs-small, 24px); }
-.poll-join--local { display: block; max-width: 460px; text-align: left; line-height: 1.4; color: var(--ink-soft, var(--ink, #333)); }
+.poll-join--local { display: block; max-width: 460px; text-align: start; line-height: 1.4; color: var(--ink-soft, var(--ink, #333)); }
 .poll-join--local code { display: inline; font-size: .9em; }
 .poll-join--local a { color: var(--accent, #0d9488); }
 
 /* <question>: the newest answers as cards */
 .question-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; }
 .slide-body .question-cards li::before, .question-cards li::before, .question-cards li::marker { content: none; display: none; }
-.slide-body .question-cards li { padding-left: 22px; }
-.question-cards li { margin: 0; padding: 18px 22px; border-radius: 10px; background: var(--surface, color-mix(in srgb, var(--ink, #111) 5%, transparent)); border-left: 5px solid var(--accent, #0d9488); font-size: .8em; line-height: 1.35; overflow-wrap: anywhere; animation: poll-in .4s ease both; }
-.question-cards li:first-child { border-left-color: var(--accent-2, var(--accent, #0d9488)); }
+.slide-body .question-cards li { padding-inline-start: 22px; }
+.question-cards li { margin: 0; padding: 18px 22px; border-radius: 10px; background: var(--surface, color-mix(in srgb, var(--ink, #111) 5%, transparent)); border-inline-start: 5px solid var(--accent, #0d9488); font-size: .8em; line-height: 1.35; overflow-wrap: anywhere; animation: poll-in .4s ease both; }
+.question-cards li:first-child { border-inline-start-color: var(--accent-2, var(--accent, #0d9488)); }
 .question-empty { margin: 0; color: var(--muted, #666); font-style: italic; }
 @keyframes poll-in { from { opacity: 0; transform: translateY(8px); } }
 

package/src/components/video-player.css

@@ -12,3 +12,18 @@
   height: 100%;
   background: #111;
 }
+
+/* A screen that followed another into playing, silently because nobody has
+   clicked it yet: one click turns the sound on. */
+.video-player-sound {
+  position: absolute;
+  top: 12px;
+  inset-inline-end: 12px;
+  padding: 8px 14px;
+  border: 0;
+  border-radius: 999px;
+  background: rgba(0, 0, 0, .72);
+  color: #fff;
+  font: 600 15px/1.2 system-ui, sans-serif;
+  cursor: pointer;
+}

package/src/core/editDeck.js

@@ -135,12 +135,13 @@ export function setSlideMeta(deck, slideId, patch) {
     if (yamlText) return edit(deck, [{ ...range, text: yamlText, expected: current }])
     return edit(deck, [{ start: slide.source.start, end: lineEnd(deck.source, range.end), text: '' }])
   }
-  // Legacy `---` metadata: keep its form while a slide key leads, otherwise
+  // Legacy `---` metadata: keep its form while a slide-only key leads, otherwise
   // convert it into an explicit :::meta block (consuming the inner `---`).
   const yamlText = patchYamlMapping(current, patch, { newline: nl, leadKeys: SLIDE_KEYS })
   const end = slide.bodySource ? slide.bodySource.start : range.end
   if (!yamlText) return slide.bodySource ? edit(deck, [{ start: range.start, end, text: '' }]) : removeSlide(deck, slideId).source
-  if (SLIDE_KEYS.has(firstYamlKey(yamlText))) return edit(deck, [{ ...range, text: yamlText, expected: current }])
+  const lead = firstYamlKey(yamlText)
+  if (SLIDE_KEYS.has(lead) && !DECK_KEYS.has(lead)) return edit(deck, [{ ...range, text: yamlText, expected: current }])
   return edit(deck, [{ start: range.start, end, text: block(yamlText) }])
 }
 

package/src/core/icons.js

@@ -59,6 +59,7 @@ export const ICONS = {
   moon: '<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>', // moon
   'fullscreen-exit': '<path d="M8 3v3a2 2 0 0 1-2 2H3"/><path d="M21 8h-3a2 2 0 0 1-2-2V3"/><path d="M3 16h3a2 2 0 0 1 2 2v3"/><path d="M16 21v-3a2 2 0 0 1 2-2h3"/>', // minimize
   play: '<path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"/>', // play
+  hotspots: '<path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><circle cx="12" cy="12" r="3"/><path d="m16 16-1.9-1.9"/>', // scan-search
   pause: '<rect x="14" y="3" width="5" height="18" rx="1"/><rect x="5" y="3" width="5" height="18" rx="1"/>', // pause
   loading: '<path d="M21 12a9 9 0 1 1-6.219-8.56"/>', // loader-circle
 }

package/src/core/labels.js

@@ -33,6 +33,7 @@ export const LABELS = {
     'deck.reset': 'Reset',
     'deck.resetHint': 'Reset to first slide',
     'poll.scan': 'Scan to vote',
+    'video.sound': 'Click for sound',
     'poll.answer': '1 answer',
     'poll.answers': '{n} answers',
     'poll.reset': 'Reset',
@@ -105,6 +106,7 @@ export const LABELS = {
     'deck.reset': 'Neustart',
     'deck.resetHint': 'Zurück zur ersten Folie',
     'poll.scan': 'Scannen und abstimmen',
+    'video.sound': 'Klicken für Ton',
     'poll.answer': '1 Antwort',
     'poll.answers': '{n} Antworten',
     'poll.reset': 'Zurücksetzen',

package/src/core/languages.js

@@ -0,0 +1,51 @@
+// A deck in several languages is one file per language, side by side:
+// talk.en.md and talk.de.md. The file name says the language; the part before
+// it names the deck, so files with the same name in other languages belong
+// together. A language is a two-letter code, with a region if needed (de-CH).
+
+const LANGUAGE_FILE = /^(.+)\.([a-z]{2}(?:-[A-Za-z0-9]{2,8})?)\.md$/i
+
+let names = null
+try { names = new Intl.DisplayNames(['en'], { type: 'language', fallback: 'none' }) } catch {}
+// `talk.v1.md` or `talk.ok.md` is not a language; Intl knows which codes are.
+const isLanguage = code => {
+  try { return !names || names.of(code) !== undefined } catch { return false }
+}
+
+/** `{ name, lang }` for `talk.de.md`, or null when the file name names no language. */
+export function languageOfFile(fileName) {
+  const match = LANGUAGE_FILE.exec(fileName)
+  if (!match || !isLanguage(match[2])) return null
+  return { name: match[1], lang: match[2] }
+}
+
+/**
+ * The languages among `fileNames` (one folder's files) that `fileName` is
+ * written in, as `[{ lang, file }]` sorted by language, or an empty list when
+ * there is no second language.
+ */
+export function languageFiles(fileName, fileNames) {
+  const own = languageOfFile(fileName)
+  if (!own) return []
+  const found = fileNames
+    .map(file => ({ file, language: languageOfFile(file) }))
+    .filter(({ language }) => language && language.name === own.name)
+    .map(({ file, language }) => ({ lang: language.lang, file }))
+    .sort((a, b) => a.lang.localeCompare(b.lang))
+  return found.length > 1 ? found : []
+}
+
+// Scripts written from right to left, by language; Intl knows it where the
+// browser offers getTextInfo (not Firefox).
+const RIGHT_TO_LEFT = new Set(['ar', 'arc', 'ckb', 'dv', 'fa', 'he', 'iw', 'ks', 'ku', 'nqo', 'ps', 'sd', 'syr', 'ug', 'ur', 'yi'])
+
+/** 'rtl' for a language written from right to left (fa, ar, he …), else 'ltr'. */
+export function textDirection(lang) {
+  if (typeof lang !== 'string' || !lang.trim()) return 'ltr'
+  try {
+    const locale = new Intl.Locale(lang.trim())
+    const info = locale.getTextInfo?.() ?? locale.textInfo
+    if (info?.direction) return info.direction
+  } catch {}
+  return RIGHT_TO_LEFT.has(lang.trim().toLowerCase().split('-')[0]) ? 'rtl' : 'ltr'
+}

package/src/core/parseSlides.js

@@ -2,8 +2,8 @@ import yaml from 'js-yaml'
 import { sourceLines, fenceState, scanDirectives, diagnostic } from './source.js'
 export { sourceLines, fenceState } from './source.js'
 
-export const DECK_KEYS = new Set('theme palette appearance params meta width height show lang labels callouts reader components server session bibliography csl nocite'.split(' '))
-export const SLIDE_KEYS = new Set('layout id title section number part description label image alt overlay eyebrow attribution props'.split(' '))
+export const DECK_KEYS = new Set('theme palette appearance params meta width height show lang labels callouts reader components server session bibliography csl nocite hotspots'.split(' '))
+export const SLIDE_KEYS = new Set('layout id title section number part description label image alt overlay eyebrow attribution props hotspots'.split(' '))
 
 // Names from before 2.0. They are still recognised, so that an old deck gets a
 // message naming the new setting (see validateDeck) instead of being read as
@@ -43,6 +43,18 @@ function segmentsOf(source) {
   return segments.filter(s => source.slice(s.start, s.end).trim())
 }
 
+// The first block is the deck's settings when its first key is only a deck
+// key. A key both may have (hotspots) leaves it to the others: a slide's own
+// key makes it the first slide's, otherwise it is the deck's.
+function isDeckBlock(text) {
+  const keys = sourceLines(text).map(line => line.text.match(/^([\w-]+):/)?.[1]).filter(Boolean)
+  const deckOnly = key => ANY_DECK_KEYS.has(key) && !SLIDE_KEYS.has(key)
+  if (!keys.length || deckOnly(keys[0])) return !!keys.length
+  if (!ANY_DECK_KEYS.has(keys[0])) return false
+  if (keys.some(deckOnly)) return true
+  return !keys.some(key => SLIDE_KEYS.has(key) && !ANY_DECK_KEYS.has(key))
+}
+
 export function looksLikeMeta(text, keys, { frontmatter = false } = {}) {
   const first = sourceLines(text).find(line => line.text.trim() && !/^\s*#/.test(line.text))
   const key = first?.text.match(/^([\w-]+):/)
@@ -109,7 +121,7 @@ export function parseSlides(source) {
   let deckConfig = {}
   let configSource = null
   let i = 0
-  if (segments[0] && /^\s*---[ \t]*\r?\n/.test(source) && looksLikeMeta(text(segments[0]), ANY_DECK_KEYS, { frontmatter: true }) && !looksLikeMeta(text(segments[0]), SLIDE_KEYS)) {
+  if (segments[0] && /^\s*---[ \t]*\r?\n/.test(source) && looksLikeMeta(text(segments[0]), ANY_DECK_KEYS, { frontmatter: true }) && isDeckBlock(text(segments[0]))) {
     deckConfig = readMeta(segments[0])
     configSource = { start: segments[0].start, end: segments[0].end }
     i++

package/src/core/validateDeck.js

@@ -5,6 +5,9 @@ import { LABEL_KEYS, CALLOUT_TYPES } from './labels.js'
 import { resolveLayoutProps, propertyErrors } from '../layouts/layoutProps.js'
 import { movedHint } from '../extensions/moved.js'
 
+// Hotspots (runtime/hotspots.js): the deck's setting and a slide's own.
+const HOTSPOT_SETTINGS = ['auto', 'marked', 'off', true, false]
+
 // `layouts`, `themes` and `palettes` are manifest maps from the extension
 // registry (see src/extensions/discover.js). Checks for a kind are skipped when
 // its map is not supplied.
@@ -47,6 +50,7 @@ export function validateDeck(deck, { layouts = null, themes = null, palettes = n
     for (const key of Object.keys(config.session)) if (!['id', 'code'].includes(key)) add('invalid-config', `session.${key} is not a setting; available: id, code`, deck.configSource?.start, 'warning')
     if (config.session.code != null && !/^\d{4,8}$/.test(String(config.session.code))) add('invalid-config', 'session.code must be 4 to 8 digits', deck.configSource?.start)
   }
+  if (config.hotspots != null && !HOTSPOT_SETTINGS.includes(config.hotspots)) add('invalid-config', 'hotspots must be auto, marked, off, true or false', deck.configSource?.start)
   const enums = { organization: ['title', 'all', 'none'], author: ['title', 'all', 'none'], numbers: ['slides', 'all', 'none'], sections: ['all', 'none'] }
   const switches = ['citations']
   if (isPlainObject(config.show)) {
@@ -84,6 +88,7 @@ export function validateDeck(deck, { layouts = null, themes = null, palettes = n
     }
     if (slide.meta.props != null && !isPlainObject(slide.meta.props)) add('invalid-props', 'props must be a mapping', offset)
     if (slide.meta.overlay != null && typeof slide.meta.overlay !== 'boolean') add('invalid-metadata', 'overlay must be true or false', offset)
+    if (slide.meta.hotspots != null && !HOTSPOT_SETTINGS.includes(slide.meta.hotspots)) add('invalid-metadata', 'hotspots must be auto, marked, off, true or false', offset)
     for (const node of directivesIn(deck.source.slice(slide.source.start, slide.source.end))) {
       if (DIRECTIVES.includes(node.name) || calloutTypes.includes(node.name.toLowerCase())) continue
       const near = closest(node.name.toLowerCase(), [...DIRECTIVES, ...calloutTypes])

package/src/editor/components/DeckSettings.jsx

@@ -9,6 +9,7 @@ import { Diagnostics } from './Diagnostics.jsx'
 import { PalettePicker } from './PalettePicker.jsx'
 import { LookThumbnail } from './LookThumbnail.jsx'
 import { designUrl, DESIGN_TAB } from '../designLink.js'
+import { normalMode } from '../../runtime/hotspots.js'
 
 // What the `show` setting controls: the label for each choice and its values.
 const SHOW = { organization: ['Organization', ['title', 'all', 'none']], author: ['Author and date', ['title', 'all', 'none']], numbers: ['Slide numbers', ['slides', 'all', 'none']], sections: ['Section labels', ['all', 'none']] }
@@ -93,6 +94,9 @@ export function DeckSettings({ state, edit }) {
       {Object.entries(SHOW).map(([key, [label, options]]) => <Field key={key} label={label}>
         <select value={config.show?.[key] ?? ''} onChange={e => show(key, e.currentTarget.value)}><option value="">default</option>{options.map(o => <option key={o} value={o}>{o}</option>)}</select>
       </Field>)}
+      <Field label="Hotspots" hint="1–9 zoom in on a slide's pictures, code, tables and other parts while presenting; marked: only parts marked data-hotspot">
+        <select value={[null, 'off'].includes(normalMode(config.hotspots)) ? '' : normalMode(config.hotspots)} onChange={e => text('hotspots', e.currentTarget.value)}><option value="">off</option>{['auto', 'marked'].map(o => <option key={o} value={o}>{o}</option>)}</select>
+      </Field>
       <Field label="Language" hint="of the deck, e.g. en, de or de-CH"><input type="text" value={config.lang ?? ''} placeholder="en" onInput={e => text('lang', e.currentTarget.value)} /></Field>
     </div>
   </div>

package/src/editor/components/MetaFields.jsx

@@ -1,6 +1,7 @@
 import { h } from 'preact'
 import { setSlideMeta, setSlideNotes } from '../../core/editDeck.js'
 import { Field, TextArea } from './Field.jsx'
+import { normalMode } from '../../runtime/hotspots.js'
 
 const MORE = [['section', 'Section label shown in the header'], ['number', 'Chapter number'], ['part', 'Part name for chapter slides'], ['label', 'Replaces the word "Chapter"'], ['description', 'Chapter description'], ['eyebrow', 'Small line above a heading'], ['attribution', 'Source of a quote']]
 
@@ -13,6 +14,12 @@ export function MetaFields({ slide, slideEdit }) {
   }} />
   return <>
     <Field label="Slide id" hint="stable anchor and link target">{text('id')}</Field>
+    <Field label="Hotspots" hint="number keys zoom in on this slide's parts while presenting; default: the deck's setting">
+      <select value={normalMode(meta.hotspots) ?? ''} onChange={event => {
+        const value = event.currentTarget.value
+        slideEdit((deck, id) => setSlideMeta(deck, id, { hotspots: value === '' ? undefined : value === 'off' ? false : value }), { group: 'meta:hotspots' })
+      }}><option value="">the deck's</option>{['auto', 'marked', 'off'].map(o => <option key={o} value={o}>{o}</option>)}</select>
+    </Field>
     <Field label="Speaker notes"><TextArea rows={4} value={slide.meta.notes ?? ''} onInput={value => slideEdit((deck, id) => setSlideNotes(deck, id, value), { group: 'notes' })} /></Field>
     <details class="more" open={MORE.some(([key]) => meta[key] != null)}>
       <summary>More metadata</summary>

package/src/layouts/layoutApi.jsx

@@ -5,6 +5,7 @@ import { marked, Parser } from 'marked'
 import { registry } from '../runtime/registry'
 import { scanTags, closeTags } from '../core/tags.js'
 import { expandPollLists } from '../core/pollList.js'
+import { textDirection } from '../core/languages.js'
 import { InkLayer } from '../runtime/ink/InkLayer.jsx'
 import themedSvgs from 'virtual:deck-svgs'
 import { renderCitations, citationsHtml as referencesOf, bibliographyOf } from '../runtime/citations.js'
@@ -222,7 +223,12 @@ export function SlideFrame({ meta = {}, props = {}, deckConfig = {}, index = 0,
   const classes = ['slide', layout && 'slide--' + String(layout).replace(/[^a-zA-Z0-9_-]/g, '-'),
     image && ['title', 'chapter'].includes(layout) && 'has-image',
     layout === 'full-bleed-image' && props.overlay && 'has-overlay'].filter(Boolean).join(' ')
-  return <section class={classes} data-slide-id={id} data-label={`${slideNum(index)} ${manifest.title}`}>
+  // A deck in Farsi, Arabic or Hebrew runs from right to left; mdeck's own
+  // controls around the slides keep their direction.
+  const dir = textDirection(deckConfig.lang) === 'rtl' ? 'rtl' : undefined
+  // Its own hotspots setting, if any (runtime/hotspots.js).
+  const hotspots = meta.hotspots == null ? undefined : String(meta.hotspots)
+  return <section class={classes} dir={dir} data-slide-id={id} data-label={`${slideNum(index)} ${manifest.title}`} data-hotspots={hotspots}>
     {frame !== 'none' && <SlideHeader deckConfig={deckConfig} logo={title ? deckConfig.meta?.logo : undefined}
       isTitle={title} right={frame === 'chapter' ? meta.part ?? '' : meta.section ?? ''} />}
     {children}

package/src/live/answer/answer.css

@@ -21,7 +21,7 @@ body { min-height: 100vh; display: flex; flex-direction: column; font: 18px/1.45
 .answer-scale { grid-template-columns: repeat(auto-fit, minmax(48px, 1fr)); }
 .answer button {
   padding: 18px 20px; border: 2px solid var(--rule); border-radius: 14px; background: var(--bg); color: var(--ink);
-  font: inherit; font-size: 20px; font-weight: 600; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
+  font: inherit; font-size: 20px; font-weight: 600; text-align: start; cursor: pointer; -webkit-tap-highlight-color: transparent;
 }
 .answer-scale button { padding: 16px 0; text-align: center; }
 .answer button:hover { border-color: color-mix(in srgb, var(--accent) 60%, var(--rule)); }
@@ -39,7 +39,7 @@ footer { padding: 16px 20px; text-align: center; color: var(--muted); font-size:
 .answer-keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 12px; }
 .answer .answer-keys button { padding: 22px 0; text-align: center; font-size: 28px; }
 /* `multiple`: a box that is ticked when picked. */
-.answer-check { display: inline-block; width: 1em; height: 1em; margin-right: 12px; border: 2px solid currentColor; border-radius: 4px; vertical-align: -.12em; opacity: .6; }
+.answer-check { display: inline-block; width: 1em; height: 1em; margin-inline-end: 12px; border: 2px solid currentColor; border-radius: 4px; vertical-align: -.12em; opacity: .6; }
 .answer button.is-picked .answer-check { opacity: 1; background: currentColor; box-shadow: inset 0 0 0 2px var(--accent); }
 /* Closed: no more answers. */
 .answer button:disabled, .answer textarea:disabled, .answer input:disabled { opacity: .45; cursor: default; }

package/src/runtime/chrome.jsx

@@ -42,14 +42,13 @@ export const S = {
   },
 }
 
+// A palette as the theme gallery shows it (mdeck-themes): one chip of its
+// background, accent and second accent.
 export function PaletteSwatches({ tokens }) {
-  const keys = ['--bg', '--surface', '--rule', '--accent', '--accent-2', '--accent-3', '--ink']
+  const stripe = key => <i style={{ display: 'block', background: tokens[key] ?? tokens['--accent'] ?? 'transparent' }} />
   return (
-    <div style={{ display: 'flex', gap: '2px', alignItems: 'center', flexShrink: 0 }}>
-      {keys.map(k => tokens[k]
-        ? <div key={k} style={{ width: '10px', height: '10px', borderRadius: '2px', background: tokens[k], border: '1px solid rgba(255,255,255,0.08)', flexShrink: 0 }} />
-        : null
-      )}
-    </div>
+    <span aria-hidden="true" style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr', width: '30px', height: '18px', borderRadius: '999px', overflow: 'hidden', border: '1px solid rgba(127,127,127,0.35)', flexShrink: 0 }}>
+      {stripe('--bg')}{stripe('--accent')}{stripe('--accent-2')}
+    </span>
   )
 }