mdeck 3.7.1 → 3.9.0

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

@@ -18,7 +18,7 @@
 .video-player-sound {
   position: absolute;
   top: 12px;
-  right: 12px;
+  inset-inline-end: 12px;
   padding: 8px 14px;
   border: 0;
   border-radius: 999px;

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/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

@@ -4,6 +4,10 @@ import { palettesFor } from '../extensions/tokens.js'
 import { LABEL_KEYS, CALLOUT_TYPES } from './labels.js'
 import { resolveLayoutProps, propertyErrors } from '../layouts/layoutProps.js'
 import { movedHint } from '../extensions/moved.js'
+import { paramValue } from '../extensions/params.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
@@ -47,6 +51,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)) {
@@ -66,7 +71,13 @@ export function validateDeck(deck, { layouts = null, themes = null, palettes = n
   }
   if (themes && config.params != null && isPlainObject(config.params) && Object.hasOwn(themes, config.theme ?? 'neue')) {
     const theme = themes[config.theme ?? 'neue']
-    for (const name of Object.keys(config.params)) if (!Object.hasOwn(theme.params ?? {}, name)) add('unknown-param', `Theme "${theme.id}" has no parameter "${name}"; available: ${Object.keys(theme.params ?? {}).join(', ') || 'none'}`, deck.configSource?.start, 'warning')
+    for (const [name, value] of Object.entries(config.params)) {
+      const param = theme.params?.[name]
+      if (!param) { add('unknown-param', `Theme "${theme.id}" has no parameter "${name}"; available: ${Object.keys(theme.params ?? {}).join(', ') || 'none'}`, deck.configSource?.start, 'warning'); continue }
+      const result = paramValue(param, value)
+      if (result.problem) add('invalid-param', `params.${name} ${result.problem}; the theme's ${param.default} is used instead`, deck.configSource?.start, 'warning')
+      else if (result.note) add('invalid-param', `params.${name} ${result.note}; ${result.value} may not look right`, deck.configSource?.start, 'warning')
+    }
   }
   // Callout types the deck names under `callouts:` are its own, on purpose.
   const calloutTypes = [...CALLOUT_TYPES, ...(isPlainObject(config.callouts) ? Object.keys(config.callouts).map(key => key.toLowerCase()) : [])]
@@ -84,6 +95,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,8 @@ 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'
+import { paramValue } from '../../extensions/params.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']] }
@@ -74,11 +76,9 @@ export function DeckSettings({ state, edit }) {
       <p class="section-title">Theme settings</p>
       {Object.entries(theme.params).map(([key, def]) => {
         const value = config.params?.[key]
-        const color = isColor(def.default)
         return <Field key={key} label={def.title ?? key} hint={def.description}>
           <div class="row">
-            {color ? <input type="color" value={isColor(value) ? value : def.default} onInput={e => param(key, e.currentTarget.value)} style={{ flex: '0 0 auto' }} /> : null}
-            <input type="text" value={value ?? ''} placeholder={def.default} onInput={e => param(key, e.currentTarget.value)} />
+            <ParamInput def={def} value={value} onChange={next => param(key, next)} />
             {value != null && <button class="btn is-small is-icon" title="Back to the default" aria-label="Back to the default" onClick={() => param(key, '')}><Icon name="close" size={14} /></button>}
           </div>
         </Field>
@@ -93,6 +93,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>
@@ -106,3 +109,34 @@ function DesignLink({ kind, item }) {
     {own ? `Edit ${kind}` : `Customise ${kind}`} <span class="muted">{item.title}</span>
   </a>
 }
+
+// The control for one theme parameter, by its type: a slider for a size or a
+// number with a range, a box to tick for a switch, a list for a choice, else
+// text (with a colour picker when the default is a colour). An empty value
+// means the theme's own.
+function ParamInput({ def, value, onChange }) {
+  const current = value != null && !paramValue(def, value).problem ? paramValue(def, value).value : def.default
+  if (def.type === 'switch') return <>
+    <input type="checkbox" checked={current === '1'} aria-label={def.title} onChange={e => onChange(e.currentTarget.checked ? 1 : 0)} style={{ flex: '0 0 auto', width: 'auto' }} />
+    <span class="muted" style={{ flex: '1 1 auto' }}>{current === '1' ? 'On' : 'Off'}</span>
+  </>
+  if (def.type === 'choice') return <select value={value ?? ''} onChange={e => onChange(e.currentTarget.value)}>
+    <option value="">{def.default} (the theme's)</option>
+    {def.choices.filter(choice => choice !== def.default).map(choice => <option key={choice} value={choice}>{choice}</option>)}
+  </select>
+  if ((def.type === 'size' || def.type === 'number') && def.min != null && def.max != null) {
+    const unit = def.type === 'size' ? 'px' : ''
+    const number = parseFloat(current)
+    const step = def.step ?? (def.type === 'size' ? 1 : (def.max - def.min) / 100)
+    return <>
+      <input type="range" min={def.min} max={def.max} step={step} value={number} aria-label={def.title}
+        onInput={e => onChange(unit ? `${e.currentTarget.value}${unit}` : Number(e.currentTarget.value))} />
+      <span class="muted" style={{ flex: '0 0 auto', minWidth: '4em', textAlign: 'end' }}>{number}{unit}</span>
+    </>
+  }
+  const color = isColor(def.default)
+  return <>
+    {color ? <input type="color" value={isColor(value) ? value : def.default} onInput={e => onChange(e.currentTarget.value)} style={{ flex: '0 0 auto' }} /> : null}
+    <input type="text" value={value ?? ''} placeholder={def.default} onInput={e => onChange(e.currentTarget.value)} />
+  </>
+}

package/src/editor/components/ExtensionForms.jsx

@@ -7,6 +7,8 @@ import { PalettePicker, Swatches } from './PalettePicker.jsx'
 const isColor = value => /^#[0-9a-f]{3,8}$/i.test(String(value ?? '').trim())
 const update = (list, index, patch) => list.map((item, i) => i === index ? { ...item, ...patch } : item)
 const without = (list, index) => list.filter((_, i) => i !== index)
+// The kinds of value a theme parameter takes (see src/extensions/params.js).
+const PARAM_KINDS = [['', 'text'], ['size', 'size'], ['number', 'number'], ['switch', 'switch'], ['choice', 'choice'], ['font', 'font']]
 
 function Identity({ model, onChange }) {
   return <>
@@ -122,8 +124,18 @@ export function ThemeForm({ model, files, palettes = {}, onChange, onFile }) {
         <input type="text" value={param.name} placeholder="fontBody" onInput={e => onChange({ params: update(model.params, index, { name: e.currentTarget.value }) })} />
         <select value={param.token ?? ''} onChange={e => onChange({ params: update(model.params, index, { token: e.currentTarget.value }) })}><option value="">token…</option>{tokenNames.map(name => <option key={name} value={name}>{name}</option>)}</select>
         <input type="text" value={param.title ?? ''} placeholder="Title" onInput={e => onChange({ params: update(model.params, index, { title: e.currentTarget.value }) })} />
+        <select value={param.type ?? ''} aria-label="Kind of value" title="Kind of value" onChange={e => onChange({ params: update(model.params, index, { type: e.currentTarget.value || undefined }) })}>
+          {PARAM_KINDS.map(([type, label]) => <option key={type} value={type}>{label}</option>)}
+        </select>
         <button class="btn is-small is-icon" title="Remove setting" aria-label="Remove setting" onClick={() => onChange({ params: without(model.params, index) })}><Icon name="close" size={14} /></button>
       </div>
+      {(param.type === 'size' || param.type === 'number') && <div class="row">
+        {['min', 'max', 'step'].map(key => <input key={key} type="number" value={param[key] ?? ''} placeholder={key} aria-label={key}
+          onInput={e => onChange({ params: update(model.params, index, { [key]: e.currentTarget.value === '' ? undefined : Number(e.currentTarget.value) }) })} />)}
+      </div>}
+      {param.type === 'choice' && <input type="text" value={(param.choices ?? []).join(', ')} placeholder="choices, separated by commas"
+        onInput={e => onChange({ params: update(model.params, index, { choices: e.currentTarget.value.split(',').map(choice => choice.trim()).filter(Boolean) }) })} />}
+      <input type="text" value={param.description ?? ''} placeholder="Description: the default and a sensible range" onInput={e => onChange({ params: update(model.params, index, { description: e.currentTarget.value }) })} />
     </div>)}
     <div><button class="btn is-small" onClick={() => onChange({ params: [...model.params, { name: '', token: tokenNames[0] ?? '', title: '' }] })}>+ setting</button></div>
     <details class="advanced">

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/editor/extensions.js

@@ -13,6 +13,9 @@ const STARTER_COLORS = {
 
 const entries = table => Object.entries(table ?? {}).map(([name, value]) => ({ name, ...(value && typeof value === 'object' && !Array.isArray(value) ? value : { value }) }))
 const table = (list, pick) => Object.fromEntries(list.filter(item => item.name).map(item => [item.name, pick(item)]))
+// A parameter's settings as the manifest writes them; the typed ones only with a type.
+const paramSettings = param => clean({ token: param.token, title: param.title, description: param.description,
+  ...(param.type ? { type: param.type, min: param.min, max: param.max, step: param.step, choices: param.choices } : {}) })
 const clean = object => Object.fromEntries(Object.entries(object).filter(([, value]) => value !== undefined && value !== '' && value !== null && !(Array.isArray(value) && !value.length)))
 
 export function parseManifest(text) {
@@ -39,7 +42,7 @@ export function toToml(model) {
   else if (model.kind === 'theme') raw = {
     ...base, palette: model.palette, ...clean({ palettes: model.palettes }), ...(model.appearance === 'dark' ? { appearance: 'dark' } : {}), fonts: model.fonts ?? [], ...model.extra,
     files: { styles: 'styles.css', ...(model.files ?? {}) }, tokens,
-    params: table(model.params ?? [], param => clean({ token: param.token, title: param.title, description: param.description })),
+    params: table(model.params ?? [], paramSettings),
   }
   else if (model.kind === 'layout') raw = {
     ...base, ...(model.frame && model.frame !== 'standard' ? { frame: model.frame } : {}), ...model.extra, ...(Object.keys(model.files ?? {}).length ? { files: model.files } : {}),
@@ -67,7 +70,7 @@ export function toRuntimeManifest(model) {
   if (model.kind === 'palette') return { ...shared, ...(model.theme ? { theme: model.theme } : {}), light: table(model.light ?? [], token => token.value ?? ''), dark: table(model.dark ?? [], token => token.value ?? '') }
   if (model.kind === 'theme') return {
     ...shared, palette: model.palette, ...(model.palettes?.length ? { palettes: model.palettes } : {}), appearance: model.appearance ?? 'light', fonts: model.fonts ?? [], tokens,
-    params: table(model.params ?? [], param => ({ token: param.token, default: tokens[param.token] ?? '', ...(param.title ? { title: param.title } : {}) })),
+    params: table(model.params ?? [], param => ({ ...paramSettings(param), default: tokens[param.token] ?? '' })),
     ...(model.extra?.guide ? { guide: runtimeGuide(model.extra.guide) } : {}),
   }
   return shared
@@ -89,6 +92,6 @@ export function starterFiles(kind, id, title, from = null, fromFiles = {}) {
     return { [MANIFEST]: toToml({ kind, id, title, description: '', theme: '', light, dark, extra: {} }) }
   }
   if (kind !== 'theme' || !from) throw new Error('A new theme starts as a copy of another one')
-  const params = from.params && Object.fromEntries(Object.entries(from.params).map(([name, param]) => [name, { token: param.token, title: param.title, description: param.description }]))
+  const params = from.params && Object.fromEntries(Object.entries(from.params).map(([name, param]) => [name, paramSettings(param)]))
   return { [MANIFEST]: toToml({ ...toModel({ ...from, kind, params }), id, title, files: {} }), 'styles.css': fromFiles['styles.css'] ?? '' }
 }

package/src/extensions/appearance.js

@@ -7,6 +7,7 @@
 // Theme tokens (type, spacing, fonts) and theme parameters come on top.
 import { tokensToCss, COLOR_ROLES, APPEARANCES, palettesFor } from './tokens.js'
 import { movedHint } from './moved.js'
+import { paramValue } from './params.js'
 
 // Code highlighting and logos on dark slides, unless the palette says otherwise.
 export const DARK_TOKENS = {
@@ -62,8 +63,11 @@ export function buildAppearance({ theme, palettes = {}, palette, appearance, par
   const overrides = {}
   for (const [name, value] of Object.entries(params ?? {})) {
     const param = theme.params?.[name]
-    if (param) overrides[param.token] = value
-    else warnings.push(`Theme "${theme.id}" has no parameter "${name}"`)
+    if (!param) { warnings.push(`Theme "${theme.id}" has no parameter "${name}"`); continue }
+    // A value that does not fit the parameter's type is left out: the theme's own value stays.
+    const result = paramValue(param, value)
+    if (result.problem) warnings.push(`params.${name} ${result.problem}; the theme's ${param.default} is used`)
+    else overrides[param.token] = result.value
   }
   for (const [key, value] of Object.entries(meta ?? {})) overrides[`--meta-${key}`] = JSON.stringify(String(value))
   const overridesCss = tokensToCss(overrides)

package/src/extensions/manifest.js

@@ -6,6 +6,7 @@ import { resolve, relative, isAbsolute, sep } from 'node:path'
 import { parse as parseToml, TomlError } from 'smol-toml'
 import { TOKEN_NAME_RE, COLOR_ROLES, COLOR_FALLBACKS, APPEARANCES } from './tokens.js'
 import { propertyErrors } from '../layouts/layoutProps.js'
+import { paramSettingProblems, paramSettings } from './params.js'
 
 export const SCHEMA_VERSION = 1
 export const KINDS = ['layout', 'theme', 'palette']
@@ -198,10 +199,9 @@ function validateTheme(raw, shared, fail) {
     const path = `params.${name}`
     if (!/^[a-zA-Z][a-zA-Z0-9]*$/.test(name) || RESERVED_NAMES.includes(name)) fail('parameter names use letters and digits and start with a letter', path)
     if (!isPlainObject(param)) fail('must be a table with a token', path)
-    for (const key of Object.keys(param)) if (!['token', 'title', 'description'].includes(key)) fail('Unknown parameter setting. Allowed: token, title, description', `${path}.${key}`)
     if (typeof param.token !== 'string' || !Object.hasOwn(tokens, param.token)) fail(`token must name an entry of [tokens] (got ${JSON.stringify(param.token)})`, `${path}.token`)
-    for (const key of ['title', 'description']) if (param[key] != null && typeof param[key] !== 'string') fail('must be text', `${path}.${key}`)
-    params[name] = { token: param.token, default: tokens[param.token], ...(param.title ? { title: param.title } : {}), ...(param.description ? { description: param.description } : {}) }
+    for (const [key, message] of paramSettingProblems(param, tokens[param.token])) fail(message, `${path}.${key}`)
+    params[name] = { token: param.token, default: tokens[param.token], ...(param.title ? { title: param.title } : {}), ...(param.description ? { description: param.description } : {}), ...paramSettings(param) }
   }
   const guide = validateGuide(raw.guide, fail)
   return {

package/src/extensions/params.js

@@ -0,0 +1,113 @@
+// What a theme parameter may be set to. A parameter without a type takes any
+// text, as before; a typed one says what kind of value it takes, and mdeck
+// turns what the author wrote into CSS or says why it cannot:
+//
+//   size     pixels ("12px", or a number: 12), with min and max in pixels
+//   number   a number, with min and max (a strength is one from 0 to 1)
+//   switch   1 or 0 (also true and false, on and off, yes and no)
+//   choice   one of `choices`
+//   font     a CSS font list
+//
+// The manifest check, `mdeck check`, the slides and the editor all use these
+// functions, so they agree on what a value means.
+
+export const PARAM_TYPES = ['size', 'number', 'switch', 'choice', 'font']
+export const PARAM_KEYS = ['token', 'title', 'description', 'type', 'min', 'max', 'step', 'choices']
+const RANGED = ['size', 'number']
+const NUMBER_RE = /^-?(\d+\.?\d*|\.\d+)$/
+const SWITCH = new Map([['1', '1'], ['0', '0'], ['true', '1'], ['false', '0'], ['on', '1'], ['off', '0'], ['yes', '1'], ['no', '0']])
+
+// "12px", 12 or "12" as a number of pixels; null when it is not a size.
+function pixels(value) {
+  const text = String(value).trim().toLowerCase()
+  const number = text.endsWith('px') ? text.slice(0, -2).trim() : text
+  return NUMBER_RE.test(number) ? Number(number) : null
+}
+
+const unit = param => param.type === 'size' ? 'px' : ''
+
+/** The range a parameter was made for, as text ("6px to 20px", "at least 0"), or ''. */
+export function paramRange(param) {
+  const { min, max } = param
+  const u = unit(param)
+  if (min != null && max != null) return `${min}${u} to ${max}${u}`
+  if (min != null) return `at least ${min}${u}`
+  if (max != null) return `at most ${max}${u}`
+  return ''
+}
+
+/** The kind of value a parameter takes, for listings: " (size, 0px to 48px)", " (1 or 0)", or '' without a type. */
+export function paramKind(param) {
+  if (!param.type) return ''
+  if (param.type === 'switch') return ' (1 or 0)'
+  if (param.type === 'choice') return ` (${param.choices.join(', ')})`
+  const range = paramRange(param)
+  return ` (${param.type}${range ? ', ' + range : ''})`
+}
+
+/**
+ * The CSS for a value an author set, or why it cannot be used.
+ * Returns { value } with a note when it lies outside the range (it is still
+ * used: the range is what the theme was made for, not a limit), or { problem }.
+ */
+export function paramValue(param, raw) {
+  const type = param.type
+  if (raw == null || (typeof raw === 'object')) return { problem: 'needs a single value' }
+  if (!type) return { value: String(raw) }
+  const text = String(raw).trim()
+  if (!text) return { problem: 'is empty' }
+  if (type === 'font') return { value: text }
+  if (type === 'switch') {
+    const value = SWITCH.get(text.toLowerCase())
+    return value ? { value } : { problem: 'is a switch: 1 or 0' }
+  }
+  if (type === 'choice') {
+    return param.choices.includes(text) ? { value: text } : { problem: `must be one of: ${param.choices.join(', ')}` }
+  }
+  const number = type === 'size' ? pixels(text) : (NUMBER_RE.test(text) ? Number(text) : null)
+  if (number == null) return { problem: type === 'size' ? 'is a size in pixels, such as 12px' : 'is a number, such as 0.5' }
+  const value = type === 'size' ? `${number}px` : String(number)
+  const outside = (param.min != null && number < param.min) || (param.max != null && number > param.max)
+  return outside ? { value, note: `is made for ${paramRange(param)}` } : { value }
+}
+
+/**
+ * What is wrong with a parameter's settings in a manifest, as [key, message]
+ * pairs; `fallback` is its default (the token's value), which must fit it too.
+ */
+export function paramSettingProblems(param, fallback) {
+  const problems = []
+  for (const key of Object.keys(param)) if (!PARAM_KEYS.includes(key)) problems.push([key, `Unknown parameter setting. Allowed: ${PARAM_KEYS.join(', ')}`])
+  for (const key of ['title', 'description']) if (param[key] != null && typeof param[key] !== 'string') problems.push([key, 'must be text'])
+  const type = param.type
+  if (type == null) {
+    for (const key of ['min', 'max', 'step', 'choices']) if (param[key] != null) problems.push([key, 'needs a type (size or number for min, max and step; choice for choices)'])
+    return problems
+  }
+  if (!PARAM_TYPES.includes(type)) return [...problems, ['type', `must be one of: ${PARAM_TYPES.join(', ')}`]]
+  for (const key of ['min', 'max', 'step']) {
+    if (param[key] == null) continue
+    if (!RANGED.includes(type)) problems.push([key, `is for a size or a number, not a ${type}`])
+    else if (typeof param[key] !== 'number' || !Number.isFinite(param[key])) problems.push([key, `must be a number${type === 'size' ? ' of pixels, such as 12' : ''}`])
+  }
+  if (typeof param.step === 'number' && param.step <= 0) problems.push(['step', 'must be more than 0'])
+  if (typeof param.min === 'number' && typeof param.max === 'number' && param.min > param.max) problems.push(['max', 'must not be less than min'])
+  if (type === 'choice') {
+    const choices = param.choices
+    if (!Array.isArray(choices) || !choices.length || choices.some(choice => typeof choice !== 'string' || !choice.trim())) problems.push(['choices', 'a choice needs a list of its values, such as choices = ["left", "right"]'])
+    else if (new Set(choices).size !== choices.length) problems.push(['choices', 'lists a value twice'])
+  } else if (param.choices != null) problems.push(['choices', `is for a choice, not a ${type}`])
+  if (problems.length || fallback == null) return problems
+  // The default is the token's value: it has to be a value of this type too.
+  const result = paramValue(param, fallback)
+  if (result.problem) problems.push(['type', `the token's value ${JSON.stringify(fallback)} ${result.problem}`])
+  else if (result.note) problems.push(['type', `the token's value ${JSON.stringify(fallback)} lies outside ${paramRange(param)}`])
+  else if (type !== 'font' && result.value !== fallback) problems.push(['type', `write the token's value as ${JSON.stringify(result.value)}`])
+  return problems
+}
+
+/** A parameter's typed settings, as a normalized manifest keeps them. */
+export function paramSettings(param) {
+  if (!param.type) return {}
+  return Object.fromEntries(['type', 'min', 'max', 'step', 'choices'].filter(key => param[key] != null).map(key => [key, key === 'choices' ? [...param[key]] : param[key]]))
+}