mdeck 3.2.0 → 3.4.0

package/src/components/Bibliography.jsx

@@ -0,0 +1,23 @@
+import { useEffect, useState } from 'preact/hooks'
+import { currentBibliography, onBibliography } from '../runtime/citations.js'
+
+// <bibliography /> on a slide: the deck's reference list, the works it cites
+// plus `nocite`, in the citation style's order. A long list goes over several
+// slides with <bibliography part="1/2" /> and <bibliography part="2/2" />.
+
+function slice(order, part) {
+  const match = String(part ?? '').match(/^\s*(\d+)\s*\/\s*(\d+)\s*$/)
+  if (!match) return order
+  const [index, count] = [Number(match[1]), Number(match[2])]
+  if (!count || index < 1 || index > count) return order
+  const size = Math.ceil(order.length / count)
+  return order.slice((index - 1) * size, index * size)
+}
+
+export default function Bibliography({ part }) {
+  const [bib, setBib] = useState(currentBibliography)
+  useEffect(() => onBibliography(setBib), [])
+  if (!bib) return <p class="bibliography-hint">Name a reference file in the deck settings, e.g. <code>bibliography: refs.bib</code>.</p>
+  const html = slice(bib.order, part).map(id => bib.entries[id]).join('')
+  return <div class="bibliography csl-bib-body" dangerouslySetInnerHTML={{ __html: html }} />
+}

package/src/components/Numeric.jsx

@@ -0,0 +1,59 @@
+import { h } from 'preact'
+import { useRoom, latestByDevice } from '../live/client.js'
+import { t } from '../core/labels.js'
+import { JoinCode, ActivityFooter, ActivityQuestion, ActivityControls, useControls, wantsQr } from './activity.jsx'
+import { slideHtml, phoneHtml, phoneQuestion } from './inlineText.js'
+import { parseNumber, groupNumbers, isRightNumber } from './numbers.js'
+import './poll.css'
+
+// <numeric room="limit" question="What is $\lim_{x\to 0} \frac{\sin x}{x}$?" answer="1" tolerance="0.01" />
+// Phones type a number (0.5, 0,5 or 1/2); each phone's latest one counts.
+// The slide shows the most frequent answers as bars (`limit`, 6 by default)
+// and the rest as Other. `answer` and `tolerance` (0 by default) say which
+// answers are right: the tick outlines them, says how many were right, and
+// tells each phone whether its answer was. Close, Reset and the results
+// button work as for a poll.
+
+export default function Numeric({ room = 'numeric', question = '', answer = '', tolerance = '', limit = '6', results = '', qr }) {
+  const right = parseNumber(answer)
+  const within = Math.max(0, parseNumber(tolerance) ?? 0)
+  const live = useRoom(room)
+  const controls = useControls(room, live, { results: results !== 'hidden', solution: solutionFor(answer, tolerance, phoneHtml) })
+  const texts = latestByDevice(controls.counted(live.messages)).map(message => message.data?.value).filter(value => parseNumber(value) != null)
+  const groups = groupNumbers(texts)
+  const shown = groups.slice(0, Math.max(1, Number(limit) || 6))
+  const other = groups.slice(shown.length).reduce((sum, group) => sum + group.n, 0)
+  const rows = [...shown.map(group => ({ ...group, correct: isRightNumber(group.value, right, within) })), ...(other ? [{ text: t('numeric.other'), n: other, other: true }] : [])]
+  const max = Math.max(1, ...rows.map(row => row.n))
+  const rightCount = right == null ? 0 : groups.filter(group => isRightNumber(group.value, right, within)).reduce((sum, group) => sum + group.n, 0)
+  const still = live.offline && !texts.length
+  return <div class={`poll poll--numeric${controls.revealed ? ' is-solved' : ''}${still ? ' is-static' : ''}${controls.results ? '' : ' is-results-hidden'}${controls.closed ? ' is-closed' : ''}`} ref={controls.ref}>
+    <div class="poll-main">
+      <ActivityQuestion text={question} />
+      <div class="poll-bars" role="list">
+        {rows.map(row => <div class={`poll-row${row.correct ? ' is-correct' : ''}${row.other ? ' is-other' : ''}`} role="listitem" key={row.other ? '' : row.value}>
+          <span class="poll-label">{row.text}</span>
+          <span class="poll-track"><span class="poll-fill" style={{ width: `${(row.n / max) * 100}%` }} /></span>
+          <span class="poll-count">{row.n}</span>
+        </div>)}
+      </div>
+      {!rows.length && !live.offline && <p class="question-empty">{t('question.empty')}</p>}
+      {right != null && controls.revealed && <p class="numeric-answer">{t('respond.solution', { answer: <span><span dangerouslySetInnerHTML={{ __html: slideHtml(answer) }} />{within > 0 && ` ± ${tolerance}`}</span> })} · {t('numeric.right', { n: rightCount })}</p>}
+      <ActivityFooter count={texts.length} {...live} perPhone reset={controls.reset} closed={controls.closed}>
+        <ActivityControls controls={controls} messages={live.messages} offline={live.offline} results solve={right != null} />
+      </ActivityFooter>
+    </div>
+    <JoinCode room={room} {...live} qr={wantsQr(qr)} size={240} />
+  </div>
+}
+
+// What phones get once the right answer shows: the number, how far off still
+// counts, and the answer as written, drawn.
+function solutionFor(answer, tolerance, draw) {
+  const value = parseNumber(answer)
+  if (value == null) return null
+  const within = Math.max(parseNumber(tolerance) ?? 0, 1e-9 * Math.max(1, Math.abs(value)))
+  return { value, tolerance: within, text: String(answer), html: draw(String(answer)) }
+}
+
+Numeric.phone = ({ question, placeholder }, { slideTitle = '' } = {}) => ({ type: 'numeric', ...phoneQuestion(question, slideTitle), placeholder: placeholder ?? '' })

package/src/components/Poll.jsx

@@ -1,8 +1,8 @@
 import { h } from 'preact'
-import { useEffect, useRef, useState } from 'preact/hooks'
 import { useRoom, latestByDevice } from '../live/client.js'
 import { t } from '../core/labels.js'
-import { JoinCode, ActivityFooter, wantsQr } from './activity.jsx'
+import { JoinCode, ActivityFooter, ActivityQuestion, ActivityControls, useControls, wantsQr, isSet } from './activity.jsx'
+import { choicesOf, slideHtml, phoneHtml, phoneQuestion } from './inlineText.js'
 import './poll.css'
 
 // <poll room="lunch" question="Where do we eat?" options="Mensa|Thai|Pizza" />
@@ -12,56 +12,82 @@ import './poll.css'
 // as described by Poll.phone. Each device has one vote and can change it; the
 // latest one counts.
 //
+// `multiple` lets each phone pick several options; the slide and the phones
+// say so. A vote is then the list of options picked.
+//
+// `buttons="letters"` (or "numbers") puts A, B, C… (1, 2, 3…) before the
+// options on the slide, and the phones show only those: for options that are
+// pictures, long formulas, or anything else better read on the big screen.
+//
 // `answer="Thai"` (several: "Thai|Pizza") marks the right answer: a button
-// with a tick outlines its label, bar and count in green. Showing it is an
-// event on the stage (`pollreveal`, { room, shown }), which the ink bus
-// passes to the audience window and other devices.
+// with a tick outlines its label, bar and count in green, and phones say
+// whether theirs was right. A button with a lock closes the poll: later votes
+// do not count, and phones cannot vote until it opens again. A button with
+// an eye shows or hides the results (bars and counts); `results="hidden"`
+// starts with them hidden, e.g. for peer instruction. Hidden, the audience
+// window shows no bars; the presenter's own screens show them faint, so the
+// presenter can still judge the votes. All of them reach every screen of
+// the talk (useControls in activity.jsx).
+//
+// The question and the options are Markdown with $…$ maths, as on a slide:
+// options="$x^2$|$2x$|$\frac{x^3}{3}$". A bar inside a formula stays in it
+// ($|x|$); \| is a bar in the text. Votes and `answer` use the source text.
+
+const LETTERS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
+/** What `buttons` puts before each option: letters, numbers, or nothing. */
+export const keysFor = (buttons, count) => {
+  const kind = String(buttons ?? '').toLowerCase()
+  if (kind === 'letters') return Array.from({ length: count }, (_, i) => LETTERS[i] ?? String(i + 1))
+  if (kind === 'numbers') return Array.from({ length: count }, (_, i) => String(i + 1))
+  return null
+}
 
-const choicesOf = options => String(options ?? '').split('|').map(option => option.trim()).filter(Boolean)
+// A vote: one option, or with `multiple` the options picked. A phone page
+// from before `multiple` sends one option; it counts as a list of one.
+const picksOf = (value, multiple) => multiple ? (Array.isArray(value) ? value : [value]) : (Array.isArray(value) ? [] : [value])
 
-export default function Poll({ room = 'poll', question = '', options = '', qr, answer = '' }) {
+export default function Poll({ room = 'poll', question = '', options = '', qr, answer = '', results = '', multiple, buttons }) {
   const choices = choicesOf(options)
+  const several = isSet(multiple)
+  const keys = keysFor(buttons, choices.length)
   const correct = choicesOf(answer).filter(choice => choices.includes(choice))
-  const [shown, setShown] = useState(false)
-  const ref = useRef()
-  const stage = () => ref.current?.closest('deck-stage')
-  useEffect(() => {
-    const target = stage()
-    if (!target || !correct.length) return
-    const onReveal = event => { if (event.detail?.room === room) setShown(!!event.detail.shown) }
-    target.addEventListener('pollreveal', onReveal)
-    return () => target.removeEventListener('pollreveal', onReveal)
-  }, [room, correct.length])
-  const toggle = () => {
-    const next = !shown
-    setShown(next)
-    stage()?.dispatchEvent(new CustomEvent('pollreveal', { detail: { room, shown: next, local: true } }))
-  }
   const live = useRoom(room)
-  const votes = latestByDevice(live.messages).map(message => message.data?.value).filter(vote => choices.includes(vote))
-  const counts = choices.map(choice => votes.filter(vote => vote === choice).length)
+  const controls = useControls(room, live, { results: results !== 'hidden', solution: correct.length ? correct : null })
+  const votes = latestByDevice(controls.counted(live.messages))
+    .map(message => picksOf(message.data?.value, several).filter(pick => choices.includes(pick)))
+    .filter(picks => picks.length)
+  const counts = choices.map(choice => votes.filter(picks => picks.includes(choice)).length)
   const max = Math.max(1, ...counts)
   const code = wantsQr(qr)
   const still = live.offline && !votes.length
-  return <div class={`poll${shown ? ' is-solved' : ''}${still ? ' is-static' : ''}`} ref={ref}>
+  return <div class={`poll${controls.revealed ? ' is-solved' : ''}${still ? ' is-static' : ''}${controls.results ? '' : ' is-results-hidden'}${controls.closed ? ' is-closed' : ''}`} ref={controls.ref}>
     <div class="poll-main">
-      {question && <p class="poll-question">{question}</p>}
+      <ActivityQuestion text={question} />
+      {several && <p class="poll-several">{t('poll.several')}</p>}
       <div class="poll-bars" role="list">
         {choices.map((choice, i) => <div class={`poll-row${correct.includes(choice) ? ' is-correct' : ''}`} role="listitem" key={choice}>
-          <span class="poll-label">{choice}</span>
+          <span class="poll-label">{keys && <span class="poll-key">{keys[i]}</span>}<span dangerouslySetInnerHTML={{ __html: slideHtml(choice) }} /></span>
           <span class="poll-track"><span class="poll-fill" style={{ width: `${(counts[i] / max) * 100}%` }} /></span>
           <span class="poll-count">{counts[i]}</span>
         </div>)}
       </div>
-      <ActivityFooter count={votes.length} {...live}>
-        {correct.length > 0 && <button type="button" class={`poll-solve${shown ? ' is-on' : ''}`} title={t(shown ? 'poll.hideAnswer' : 'poll.showAnswer')} aria-label={t(shown ? 'poll.hideAnswer' : 'poll.showAnswer')} aria-pressed={shown} onClick={toggle}>
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12l5 5 9-10" /></svg>
-        </button>}
+      <ActivityFooter count={votes.length} {...live} perPhone reset={controls.reset} closed={controls.closed}>
+        <ActivityControls controls={controls} messages={live.messages} offline={live.offline} results solve={correct.length > 0} />
       </ActivityFooter>
     </div>
     <JoinCode room={room} {...live} qr={code} />
   </div>
 }
 
-// What the phones show while this poll is on screen.
-Poll.phone = ({ question, options }, { slideTitle = '' } = {}) => ({ type: 'choice', question: question || slideTitle, options: choicesOf(options) })
+// What the phones show while this poll is on screen. `optionsHtml` are the
+// options drawn, with maths as MathML; with `buttons`, phones show `keys`
+// instead. An answer page from before them shows `question` and `options`.
+Poll.phone = ({ question, options, multiple, buttons }, { slideTitle = '' } = {}) => {
+  const choices = choicesOf(options)
+  const keys = keysFor(buttons, choices.length)
+  return {
+    type: 'choice', ...phoneQuestion(question, slideTitle), options: choices,
+    ...(keys ? { keys } : { optionsHtml: choices.map(phoneHtml) }),
+    ...(isSet(multiple) ? { multiple: true } : {}),
+  }
+}

package/src/components/QrCodeTag.jsx

@@ -1,6 +1,6 @@
 import { h } from 'preact'
 import QrCode from './QrCode.jsx'
-import { useJoinLink } from '../live/client.js'
+import { useJoinLink, useFollowLink } from '../live/client.js'
 import { JoinCode } from './activity.jsx'
 import { t } from '../core/labels.js'
 import './poll.css'
@@ -9,6 +9,7 @@ import './poll.css'
 // <qrcode join />: the deck's join link for audience questions, with the
 // short link below it, so a slide early in the talk can invite everyone once
 // and the questions after it can leave out their own code (`qr="false"`).
+// <qrcode follow />: the link for following the slides on a phone or laptop.
 
 function JoinQr({ size }) {
   const link = useJoinLink()
@@ -18,10 +19,18 @@ function JoinQr({ size }) {
   </div>
 }
 
+function FollowQr({ size }) {
+  const link = useFollowLink()
+  return <div class="poll-join-slide">
+    <JoinCode {...link} size={Number(size) || 420} label={t('follow.scan')} tryHere={t('follow.tryHere')} />
+  </div>
+}
+
 // A bare `join` attribute arrives as "", so only "false" and the like turn it off.
 const isOn = value => value != null && !/^(false|no|off|0)$/i.test(String(value))
 
-export default function QrCodeTag({ url, join, size }) {
+export default function QrCodeTag({ url, join, follow, size }) {
   if (isOn(join)) return <JoinQr size={size} />
+  if (isOn(follow)) return <FollowQr size={size} />
   return <QrCode url={url} size={size ?? '200'} />
 }

package/src/components/Question.jsx

@@ -1,6 +1,7 @@
 import { h } from 'preact'
 import { useRoom } from '../live/client.js'
-import { JoinCode, ActivityFooter, wantsQr } from './activity.jsx'
+import { JoinCode, ActivityFooter, ActivityQuestion, ActivityControls, useControls, wantsQr } from './activity.jsx'
+import { phoneQuestion } from './inlineText.js'
 import { t } from '../core/labels.js'
 import './poll.css'
 
@@ -10,19 +11,22 @@ import './poll.css'
 
 export default function Question({ room = 'question', question = '', limit = '8', qr }) {
   const live = useRoom(room)
-  const answers = live.messages.map(message => ({ n: message.n, text: String(message.data?.value ?? '').trim() })).filter(answer => answer.text)
+  const controls = useControls(room, live)
+  const answers = controls.counted(live.messages).map(message => ({ n: message.n, text: String(message.data?.value ?? '').trim() })).filter(answer => answer.text)
   const shown = answers.slice(-Math.max(1, Number(limit) || 8)).reverse()
   const code = wantsQr(qr)
-  return <div class="poll poll--question">
+  return <div class={`poll poll--question${controls.closed ? ' is-closed' : ''}`} ref={controls.ref}>
     <div class="poll-main">
-      {question && <p class="poll-question">{question}</p>}
+      <ActivityQuestion text={question} />
       {shown.length
         ? <ul class="question-cards">{shown.map(answer => <li key={answer.n}>{answer.text}</li>)}</ul>
         : !live.offline && <p class="question-empty">{t('question.empty')}</p>}
-      <ActivityFooter count={answers.length} {...live} />
+      <ActivityFooter count={answers.length} {...live} reset={controls.reset} closed={controls.closed}>
+        <ActivityControls controls={controls} messages={live.messages} offline={live.offline} />
+      </ActivityFooter>
     </div>
     <JoinCode room={room} {...live} qr={code} size={240} />
   </div>
 }
 
-Question.phone = ({ question, placeholder }, { slideTitle = '' } = {}) => ({ type: 'text', question: question || slideTitle, placeholder: placeholder ?? '', maxLength: 200 })
+Question.phone = ({ question, placeholder }, { slideTitle = '' } = {}) => ({ type: 'text', ...phoneQuestion(question, slideTitle), placeholder: placeholder ?? '', maxLength: 200 })

package/src/components/Scale.jsx

@@ -1,12 +1,14 @@
 import { h } from 'preact'
 import { useRoom, latestByDevice } from '../live/client.js'
-import { JoinCode, ActivityFooter, wantsQr } from './activity.jsx'
+import { JoinCode, ActivityFooter, ActivityQuestion, ActivityControls, useControls, wantsQr } from './activity.jsx'
+import { slideHtml, phoneHtml, phoneQuestion } from './inlineText.js'
 import { t } from '../core/labels.js'
 import './poll.css'
 
 // <scale room="pace" question="How is the pace?" min="1" max="5" low="Too slow" high="Too fast" />
 // Phones pick a number; each device's latest answer counts. The slide shows
-// how many chose each number, and the average.
+// how many chose each number, and the average. The question and the labels
+// are Markdown with $…$ maths, like a poll's.
 
 const bounds = ({ min, max }) => {
   const low = Number.isFinite(Number(min)) && min !== '' && min != null ? Math.round(Number(min)) : 1
@@ -18,14 +20,15 @@ export default function Scale({ room = 'scale', question = '', low = '', high =
   const [min, max] = bounds(rest)
   const steps = Array.from({ length: max - min + 1 }, (_, i) => min + i)
   const live = useRoom(room)
-  const values = latestByDevice(live.messages).map(message => Number(message.data?.value)).filter(value => steps.includes(value))
+  const controls = useControls(room, live)
+  const values = latestByDevice(controls.counted(live.messages)).map(message => Number(message.data?.value)).filter(value => steps.includes(value))
   const counts = steps.map(step => values.filter(value => value === step).length)
   const most = Math.max(1, ...counts)
   const average = values.length ? (values.reduce((sum, value) => sum + value, 0) / values.length).toFixed(1) : null
   const code = wantsQr(qr)
-  return <div class={`poll poll--scale${live.offline && !values.length ? ' is-static' : ''}`}>
+  return <div class={`poll poll--scale${live.offline && !values.length ? ' is-static' : ''}${controls.closed ? ' is-closed' : ''}`} ref={controls.ref}>
     <div class="poll-main">
-      {question && <p class="poll-question">{question}</p>}
+      <ActivityQuestion text={question} />
       <div class="scale-columns" role="list">
         {steps.map((step, i) => <div class="scale-column" role="listitem" key={step}>
           <span class="scale-count">{counts[i]}</span>
@@ -33,8 +36,10 @@ export default function Scale({ room = 'scale', question = '', low = '', high =
           <span class="scale-step">{step}</span>
         </div>)}
       </div>
-      {(low || high) && <p class="scale-labels"><span>{low}</span><span>{high}</span></p>}
-      <ActivityFooter count={values.length} {...live} />
+      {(low || high) && <p class="scale-labels"><span dangerouslySetInnerHTML={{ __html: slideHtml(low) }} /><span dangerouslySetInnerHTML={{ __html: slideHtml(high) }} /></p>}
+      <ActivityFooter count={values.length} {...live} perPhone reset={controls.reset} closed={controls.closed}>
+        <ActivityControls controls={controls} messages={live.messages} offline={live.offline} />
+      </ActivityFooter>
       {average && <p class="scale-average">{t('scale.average', { n: average })}</p>}
     </div>
     <JoinCode room={room} {...live} qr={code} size={240} />
@@ -43,5 +48,5 @@ export default function Scale({ room = 'scale', question = '', low = '', high =
 
 Scale.phone = ({ question, low, high, ...rest }, { slideTitle = '' } = {}) => {
   const [min, max] = bounds(rest)
-  return { type: 'scale', question: question || slideTitle, min, max, minLabel: low ?? '', maxLabel: high ?? '' }
+  return { type: 'scale', ...phoneQuestion(question, slideTitle), min, max, minLabel: low ?? '', maxLabel: high ?? '', ...(low ? { minLabelHtml: phoneHtml(low) } : {}), ...(high ? { maxLabelHtml: phoneHtml(high) } : {}) }
 }

package/src/components/VideoPlayer.jsx

@@ -77,6 +77,22 @@ export default function VideoPlayer({ src, url, play = 'click', aspect, muted })
     return () => stage.removeEventListener('slidechange', onSlideChange)
   }, [play, url])
 
+  // Web video click mode: slides stay mounted, so a playing video would go on
+  // (with sound) on the next slide. Leaving the slide unloads the player;
+  // coming back shows it ready to play again.
+  useEffect(() => {
+    if (play !== 'click' || !url) return
+    const stage = document.querySelector('deck-stage')
+    if (!stage) return
+    const embedUrl = getEmbedUrl(url, false)
+    function onSlideChange(e) {
+      const active = e.detail.slide?.contains(containerRef.current)
+      setIframeSrc(current => active ? (current ?? embedUrl) : null)
+    }
+    stage.addEventListener('slidechange', onSlideChange)
+    return () => stage.removeEventListener('slidechange', onSlideChange)
+  }, [play, url])
+
   const fixedAspect = typeof aspect === 'string' && aspect.trim() !== ''
 
   return (

package/src/components/WordCloud.jsx

@@ -2,7 +2,8 @@ import { h } from 'preact'
 import { useEffect, useMemo, useRef, useState } from 'preact/hooks'
 import cloud from 'd3-cloud'
 import { useRoom } from '../live/client.js'
-import { JoinCode, ActivityFooter, wantsQr } from './activity.jsx'
+import { JoinCode, ActivityFooter, ActivityQuestion, ActivityControls, useControls, wantsQr } from './activity.jsx'
+import { phoneQuestion } from './inlineText.js'
 import { t } from '../core/labels.js'
 import './poll.css'
 
@@ -64,7 +65,8 @@ function layout(words, { width, height, font }) {
 
 export default function WordCloud({ room = 'words', question = '', limit = '60', height = '520', qr }) {
   const live = useRoom(room)
-  const all = countWords(live.messages)
+  const controls = useControls(room, live)
+  const all = countWords(controls.counted(live.messages))
   const words = all.slice(0, Math.max(1, Number(limit) || 60))
   const total = all.reduce((sum, word) => sum + word.n, 0)
   const cloudHeight = Math.max(200, Number(height) || 520)
@@ -85,9 +87,9 @@ export default function WordCloud({ room = 'words', question = '', limit = '60',
   const key = words.map(word => `${word.text}:${word.n}`).join('|')
   const placed = useMemo(() => layout(words, { width: measure.width, height: cloudHeight, font: measure.font }), [key, measure.width, measure.font, measure.fontsReady, cloudHeight])
   const code = wantsQr(qr)
-  return <div class="poll poll--cloud">
+  return <div class={`poll poll--cloud${controls.closed ? ' is-closed' : ''}`} ref={controls.ref}>
     <div class="poll-main">
-      {question && <p class="poll-question">{question}</p>}
+      <ActivityQuestion text={question} />
       {/* Without a server and words there is nothing to place: no empty box. */}
       <div class="word-cloud" ref={ref} style={{ height: live.offline && !words.length ? 0 : `${cloudHeight}px` }}>
         {words.length
@@ -97,10 +99,12 @@ export default function WordCloud({ room = 'words', question = '', limit = '60',
           </svg>
           : !live.offline && <p class="question-empty">{t('question.empty')}</p>}
       </div>
-      <ActivityFooter count={total} {...live} />
+      <ActivityFooter count={total} {...live} reset={controls.reset} closed={controls.closed}>
+        <ActivityControls controls={controls} messages={live.messages} offline={live.offline} />
+      </ActivityFooter>
     </div>
     <JoinCode room={room} {...live} qr={code} size={240} />
   </div>
 }
 
-WordCloud.phone = ({ question, placeholder }, { slideTitle = '' } = {}) => ({ type: 'text', question: question || slideTitle, placeholder: placeholder ?? '', maxLength: 40 })
+WordCloud.phone = ({ question, placeholder }, { slideTitle = '' } = {}) => ({ type: 'text', ...phoneQuestion(question, slideTitle), placeholder: placeholder ?? '', maxLength: 40 })

package/src/components/activity.jsx

@@ -1,20 +1,30 @@
 import { h } from 'preact'
+import { useEffect, useRef, useState } from 'preact/hooks'
 import QrCode from './QrCode.jsx'
+import { Icon } from './Icon.jsx'
 import { t } from '../core/labels.js'
+import { keepAnswers } from '../live/client.js'
+import { slideHtml } from './inlineText.js'
+import 'katex/dist/katex.min.css'
 
 // Parts every activity on a slide shares (<poll>, <question>, <wordcloud>,
-// <scale>, and <qrcode join />): the deck's join code and the line with the number of
-// answers, the live dot and Reset.
+// <scale>, <numeric> and <qrcode join />): the deck's join code, the line with
+// the number of answers, the live dot, Reset and the presenter's controls.
 
 export const shortLink = url => url.replace(/^https?:\/\//, '')
 // `qr="false"` (or "no", "off") leaves the code out: it was on an earlier
 // slide (<qrcode join />), and people's phones follow along.
 export const wantsQr = qr => !/^(false|no|off|0)$/i.test(String(qr ?? 'true'))
+// A switch such as `multiple`: on when given, unless it says false.
+export const isSet = value => value != null && !/^(false|no|off|0)$/i.test(String(value))
+
+/** An activity's question, Markdown with $…$ maths. */
+export const ActivityQuestion = ({ text }) => text ? <p class="poll-question" dangerouslySetInnerHTML={{ __html: slideHtml(text) }} /> : null
 
 /** The join code with the short link, or how to make phones reach the server. */
-export function JoinCode({ room, joinUrl, localJoinUrl, known, offline, qr = true, size = 300, label = t('poll.scan') }) {
+export function JoinCode({ room, joinUrl, localJoinUrl, known, offline, qr = true, size = 300, label = t('poll.scan'), tryHere = t('poll.tryHere') }) {
   if (!qr || offline || (!known && !joinUrl)) return null
-  if (!joinUrl) return <p class="poll-join poll-join--local">{t('poll.unreachable', { command: <code>mdeck run --network</code>, setting: <code>server</code> })} <a href={localJoinUrl} target="_blank" rel="noopener">{t('poll.tryHere')}</a></p>
+  if (!joinUrl) return <p class="poll-join poll-join--local">{t('poll.unreachable', { command: <code>mdeck run --network</code>, setting: <code>server</code> })} <a href={localJoinUrl} target="_blank" rel="noopener">{tryHere}</a></p>
   return <a class="poll-join" href={joinUrl} target="_blank" rel="noopener" data-room={room}>
     <QrCode url={joinUrl} size={String(size)} />
     <span>{label}</span>
@@ -22,14 +32,85 @@ export function JoinCode({ room, joinUrl, localJoinUrl, known, offline, qr = tru
   </a>
 }
 
-/** Number of answers, whether the room is live, and Reset for the presenter; `children` go at the end. */
-export function ActivityFooter({ count, connected, canReset, reset, offline, children }) {
+// What every screen of the talk shares about an activity: whether it still
+// takes answers (`closed`; `upTo` is the last answer that counts), whether
+// its right answer shows (`revealed`) and whether its results show. The
+// activity room's state on the server holds them, so the audience window, an
+// iPad, a reloaded presenter view and the phones follow: phones say the
+// activity is closed and, once the answer shows, whether theirs was right
+// (`solution`, sent only then). Between windows of one browser, and where
+// this one may not change the room, the stage event `pollcontrols` carries
+// them too (src/runtime/ink/bus.js).
+const CONTROLS = ['closed', 'upTo', 'revealed', 'results']
+const controlsIn = state => Object.fromEntries(CONTROLS.filter(key => state && typeof state === 'object' && key in state).map(key => [key, state[key]]))
+
+export function useControls(room, live, { results = true, solution = null } = {}) {
+  const ref = useRef()
+  const [controls, setControls] = useState({ closed: false, upTo: 0, revealed: false, results })
+  const kept = JSON.stringify(controlsIn(live.state))
+  useEffect(() => { if (kept !== '{}') setControls(now => ({ ...now, ...JSON.parse(kept) })) }, [kept])
+  useEffect(() => {
+    const stage = ref.current?.closest('deck-stage')
+    if (!stage) return
+    const follow = event => { if (event.detail?.room === room && !event.detail.local) setControls(now => ({ ...now, ...controlsIn(event.detail.controls) })) }
+    stage.addEventListener('pollcontrols', follow)
+    return () => stage.removeEventListener('pollcontrols', follow)
+  }, [room])
+  const change = patch => {
+    const next = { ...controls, ...patch }
+    setControls(next)
+    ref.current?.closest('deck-stage')?.dispatchEvent(new CustomEvent('pollcontrols', { detail: { room, controls: next, local: true } }))
+    if (live.canReset) live.setState({ ...next, ...(next.revealed && solution != null ? { solution } : {}) }).catch(() => {})
+  }
+  // The answers that count: once closed, those that came before.
+  const counted = messages => controls.closed ? messages.filter(message => message.n <= controls.upTo) : messages
+  // They are kept beside the deck while `mdeck run` runs. A room that
+  // starts empty (a new server) leaves what was kept alone; one that was
+  // reset takes it out.
+  const answered = useRef(false)
+  const counting = counted(live.messages)
+  useEffect(() => {
+    if (!live.canReset || !live.connected || live.offline || (!counting.length && !answered.current)) return
+    answered.current = true
+    keepAnswers(room, counting, { closed: controls.closed })
+  }, [room, counting.length, counting.at(-1)?.n, controls.closed, live.canReset, live.connected])
+  const close = messages => change(controls.closed ? { closed: false } : { closed: true, upTo: Math.max(0, ...messages.map(message => message.n)) })
+  // Reset starts over: open, the answer and results as at the start.
+  const reset = () => { change({ closed: false, upTo: 0, revealed: false, results }); return live.reset() }
+  return { ...controls, ref, change, counted, close, reset }
+}
+
+/**
+ * The presenter's buttons: close (a lock), show or hide the results (an
+ * eye, with `results`), show the right answer (a tick, with `solve`).
+ * A record of the talk (`offline`) can still show the answer and results.
+ */
+export function ActivityControls({ controls, messages, offline = false, results = false, solve = false }) {
+  const button = (name, on, label, onClick, icon) => <button type="button" class={`poll-control poll-${name}${on ? ' is-on' : ''}`} title={label} aria-label={label} aria-pressed={on} onClick={onClick}>{icon}</button>
+  return <>
+    {!offline && button('close', controls.closed, t(controls.closed ? 'poll.open' : 'poll.close'), () => controls.close(messages), <Icon name={controls.closed ? 'lock' : 'lock-open'} size={22} />)}
+    {results && button('results', !controls.results, t(controls.results ? 'poll.hideResults' : 'poll.showResults'), () => controls.change({ results: !controls.results }), <Icon name={controls.results ? 'eye' : 'eye-off'} size={24} />)}
+    {solve && button('solve', controls.revealed, t(controls.revealed ? 'poll.hideAnswer' : 'poll.showAnswer'), () => controls.change({ revealed: !controls.revealed }), <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12l5 5 9-10" /></svg>)}
+  </>
+}
+
+/**
+ * Number of answers, whether the room is live, and Reset for the presenter;
+ * `children` go at the end. With `perPhone` (one answer per phone) the
+ * count says of how many phones; `closed` says the activity takes no more.
+ */
+export function ActivityFooter({ count, connected, canReset, reset, offline, present = null, perPhone = false, closed = false, children }) {
   // Without a server this is a record of the talk: no count, dot or buttons.
   if (offline && !count) return <p class="poll-total poll-static">{t('poll.static')}</p>
+  // Followers count as phones too; with more answers than phones, some left.
+  const of = perPhone && !offline && present > 0 && present >= count ? present : null
   return <p class="poll-total">
-    <span class={`poll-dot${connected ? ' is-live' : ''}`} title={connected ? t('poll.live') : t('poll.offline')} />
-    {count === 1 ? t('poll.answer') : t('poll.answers', { n: count })}
-    {canReset && <button class="poll-reset" disabled={count === 0} onClick={() => reset().catch(() => {})}>{t('poll.reset')}</button>}
+    {/* The answers kept in the talk, without a server: no live dot. */}
+    {!offline && <span class={`poll-dot${connected ? ' is-live' : ''}`} title={connected ? t('poll.live') : t('poll.offline')} />}
+    {of != null ? t('poll.answeredOf', { n: count, of }) : count === 1 ? t('poll.answer') : t('poll.answers', { n: count })}
+    {closed && <span class="poll-closed">{t('poll.closed')}</span>}
+    <span class="poll-spacer" />
+    {canReset && <button class="poll-reset" disabled={count === 0 && !closed} onClick={() => reset().catch(() => {})}>{t('poll.reset')}</button>}
     {children}
   </p>
 }

package/src/components/citation.css

@@ -0,0 +1,28 @@
+/* ── Citations and references (src/runtime/citations.js) ────────────────── */
+.citation { font-style: normal; }
+.citation-key--missing {
+  color: var(--accent);
+  text-decoration: underline wavy var(--accent);
+  text-underline-offset: 4px;
+}
+
+/* A slide's references sit with its footnotes, above the footer. */
+.slide-citations {
+  font-size: var(--fs-small);
+  color: var(--muted);
+  border-top: 1px solid var(--rule);
+  padding-top: 20px;
+  margin-top: auto;
+}
+.slide-footnotes + .slide-citations { margin-top: 0; border-top: 0; padding-top: 8px; }
+.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-left-margin { color: var(--muted); font-variant-numeric: tabular-nums; }
+.csl-entry a { color: inherit; text-decoration: none; }
+
+/* <bibliography />: the reference list on its slide. */
+.bibliography { display: flex; flex-direction: column; gap: 0.6em; font-size: var(--fs-small); color: var(--ink-soft); }
+.bibliography-hint { color: var(--muted); font-style: italic; }

package/src/components/inlineText.js

@@ -0,0 +1,40 @@
+import { Marked } from 'marked'
+import markedKatex from 'marked-katex-extension'
+
+// Short texts in a tag's attributes (a poll's question and options) as one
+// line of Markdown with $…$ maths, like the text on a slide. The slide gets
+// KaTeX's HTML; the phones' answer page has no KaTeX, so it gets MathML,
+// which browsers draw themselves (src/live/answer/answer.js).
+const slide = new Marked().use(markedKatex({ throwOnError: false, output: 'html' }))
+const phone = new Marked().use(markedKatex({ throwOnError: false, output: 'mathml' }))
+
+export const slideHtml = text => slide.parseInline(String(text ?? ''))
+export const phoneHtml = text => phone.parseInline(String(text ?? ''))
+
+/** An activity's question for the phones: the text, and drawn when the tag has one (else the slide's heading, as text). */
+export const phoneQuestion = (question, slideTitle) => question ? { question, questionHtml: phoneHtml(question) } : { question: slideTitle }
+
+// A formula, as KaTeX's inline rule finds it: $…$ or $$…$$, not starting
+// with a space, and ending before a space, punctuation, a bar or the end.
+const MATH = /^(\${1,2})(?!\$|\s)(?:\\.|[^\\\n$])*?\1(?=[\s?!.,:|]|$)/
+
+/**
+ * "A|B|C" as ["A", "B", "C"]. A bar in a formula belongs to it ($|x|$,
+ * $\{x \mid x > 0\}$), and \| is a bar in the text. "$5|$10" is two
+ * options: neither $ starts a formula.
+ */
+export function choicesOf(options) {
+  const text = String(options ?? '')
+  const parts = []
+  let part = ''
+  for (let i = 0; i < text.length; i++) {
+    const math = text[i] === '$' && text.slice(i).match(MATH)
+    if (math) { part += math[0]; i += math[0].length - 1 }
+    else if (text[i] === '\\' && text[i + 1] === '|') { part += '|'; i++ }
+    else if (text[i] === '\\' && i + 1 < text.length) { part += text[i] + text[i + 1]; i++ }
+    else if (text[i] === '|') { parts.push(part); part = '' }
+    else part += text[i]
+  }
+  parts.push(part)
+  return parts.map(choice => choice.trim()).filter(Boolean)
+}