mdeck 3.3.0 → 3.4.0

package/src/components/activity.jsx

@@ -1,15 +1,25 @@
 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'), tryHere = t('poll.tryHere') }) {
@@ -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/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)
+}

package/src/components/numbers.js

@@ -0,0 +1,39 @@
+// Numbers typed on a phone for <numeric>. The answer page has its own copy
+// of parseNumber (src/live/answer/answer.js), as it has no build step.
+
+/** 0.5, 0,5, −3, 1e-3 or 1/2 as a number; null for anything else. */
+export function parseNumber(text) {
+  const plain = String(text ?? '').trim().replace(/\s+/g, '').replace(/−/g, '-').replace(/(\d),(\d)/g, '$1.$2')
+  const parts = plain.match(/^([+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?)(?:\/((?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?))?$/i)
+  if (!parts) return null
+  const value = parts[2] ? Number(parts[1]) / Number(parts[2]) : Number(parts[1])
+  return Number.isFinite(value) ? value : null
+}
+
+/**
+ * The answers grouped by value, most frequent first: [{ value, text, n }].
+ * `text` is how most people typed it (0.5, or 1/2). Values that differ only
+ * in the last digits of a float (1/3 and 0.333333333333) count as one.
+ */
+export function groupNumbers(texts) {
+  const groups = new Map()
+  for (const text of texts) {
+    const value = parseNumber(text)
+    if (value == null) continue
+    const key = Number(value.toPrecision(12))
+    const group = groups.get(key) ?? { value, n: 0, spellings: new Map() }
+    const spelling = String(text).trim()
+    group.n++
+    group.spellings.set(spelling, (group.spellings.get(spelling) ?? 0) + 1)
+    groups.set(key, group)
+  }
+  return [...groups.values()]
+    .map(({ value, n, spellings }) => ({ value, n, text: [...spellings].sort((a, b) => b[1] - a[1])[0][0] }))
+    .sort((a, b) => b.n - a.n || a.value - b.value)
+}
+
+/** Whether `value` is the answer, give or take `tolerance` (0: equal, as far as floats go). */
+export function isRightNumber(value, answer, tolerance = 0) {
+  if (value == null || answer == null) return false
+  return Math.abs(value - answer) <= Math.max(tolerance, 1e-9 * Math.max(1, Math.abs(answer)))
+}

package/src/components/poll.css

@@ -5,32 +5,37 @@
 .poll-bars { display: grid; gap: 20px; }
 .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; }
+/* 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 .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; }
-.poll-reset { margin-left: auto; padding: 4px 14px; border: 1px solid var(--rule, #ccc); border-radius: 6px; background: none; color: inherit; font: inherit; cursor: pointer; }
+.poll-spacer { flex: 1; }
+.poll-reset { padding: 4px 14px; border: 1px solid var(--rule, #ccc); border-radius: 6px; background: none; color: inherit; font: inherit; cursor: pointer; }
 .poll-reset:disabled { opacity: .4; cursor: default; }
 /* The audience sees the results, not the presenter's controls. */
 deck-stage[data-follower] .poll-reset { display: none; }
 /* answer="…": the tick outlines the right answer's row (label, bar, count) in green. */
-.poll-solve { display: grid; place-items: center; width: 44px; height: 44px; margin-left: auto; padding: 0; border: 1px solid var(--rule, #ccc); border-radius: 50%; background: none; color: var(--muted, #666); cursor: pointer; opacity: .55; transition: opacity .2s, background .2s, color .2s; }
-.poll-reset + .poll-solve { margin-left: 0; }
-.poll-results { display: grid; place-items: center; width: 44px; height: 44px; margin-left: auto; padding: 0; border: 1px solid var(--rule, #ccc); border-radius: 50%; background: none; color: var(--muted, #666); cursor: pointer; opacity: .55; transition: opacity .2s, background .2s, color .2s; }
-.poll-reset + .poll-results, .poll-results + .poll-solve { margin-left: 0; }
-.poll-results:hover, .poll-results:focus-visible { opacity: 1; }
-.poll-results.is-off { opacity: 1; background: var(--muted, #666); border-color: var(--muted, #666); color: #fff; }
-deck-stage[data-follower] .poll-results { display: none; }
+/* The presenter's controls: close (lock), results (eye), right answer (tick). */
+.poll-control { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--rule, #ccc); border-radius: 50%; background: none; color: var(--muted, #666); cursor: pointer; opacity: .55; transition: opacity .2s, background .2s, color .2s; }
+.poll-control:hover, .poll-control:focus-visible { opacity: 1; }
+.poll-close.is-on, .poll-results.is-on { opacity: 1; background: var(--muted, #666); border-color: var(--muted, #666); color: #fff; }
+deck-stage[data-follower] .poll-control { display: none; }
+/* Closed: no more answers count. */
+.poll-closed { padding: 2px 12px; border-radius: 999px; background: color-mix(in srgb, var(--ink, #111) 10%, transparent); color: var(--ink, #111); font-weight: 600; }
 /* results="hidden" or the eye off: the presenter's screens show the results faint and hatched, the audience none. */
 .poll.is-results-hidden .poll-fill { opacity: .35; background: repeating-linear-gradient(45deg, var(--accent, #0d9488) 0 8px, transparent 8px 14px); }
 .poll.is-results-hidden .poll-count { opacity: .35; }
 deck-stage[data-follower] .poll.is-results-hidden .poll-fill, deck-stage[data-follower] .poll.is-results-hidden .poll-count { visibility: hidden; }
 .poll-solve svg { width: 24px; height: 24px; }
-.poll-solve:hover, .poll-solve:focus-visible { opacity: 1; }
 .poll-solve.is-on { opacity: 1; background: var(--poll-correct, #16a34a); border-color: var(--poll-correct, #16a34a); color: #fff; }
-deck-stage[data-follower] .poll-solve { display: none; }
 .poll.is-solved .poll-row.is-correct { outline: 4px solid var(--poll-correct, #16a34a); outline-offset: 10px; border-radius: 10px; }
 .poll.is-solved .poll-row.is-correct .poll-label { font-weight: 700; color: var(--poll-correct, #16a34a); }
 .poll-link { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 20px; color: var(--muted, #555); }
@@ -76,16 +81,21 @@ deck-stage[data-follower] .poll-solve { display: none; }
 .poll-join-slide { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; }
 .poll-join-slide .poll-join { font-size: var(--fs-body, 32px); gap: 16px; padding: 24px 32px; }
 .poll-join-slide .poll-link { font-size: 28px; }
-@media print { .poll-reset, .poll-dot, .poll-solve, .poll-results { display: none; } .poll-fill, .scale-fill, .word { transition: none; animation: none; } .question-cards li { animation: none; } }
+@media print { .poll-reset, .poll-dot, .poll-control { display: none; } .poll-fill, .scale-fill, .word { transition: none; animation: none; } .question-cards li { animation: none; } }
 
 /* A record of the talk (no room server: a PDF, a file sent to readers): the
    question and its options, without counts, the live dot or a join code. */
 .poll.is-static .poll-count, .poll.is-static .scale-count { visibility: hidden; }
-.poll.is-static .poll-results { display: none; }
+.poll.is-static .poll-close { display: none; }
 .poll .poll-static, .poll-join-slide .poll-static { margin: 36px 0 0; color: var(--muted, #666); font-style: italic; font-size: var(--fs-small, 24px); }
 .poll-join-slide .poll-static { margin: 0; font-size: var(--fs-body, 32px); }
 
 /* On paper the join code and the presenter's controls have no use. */
 @media print {
-  .poll-join, .poll-reset, .poll-solve, .poll-dot, .poll-results { display: none !important; }
+  .poll-join, .poll-reset, .poll-dot, .poll-control { display: none !important; }
 }
+
+/* <numeric>: the most frequent answers; Other for the rest. */
+.poll-row.is-other .poll-label { color: var(--muted, #666); font-style: italic; }
+.poll--numeric .poll-label { font-variant-numeric: tabular-nums; }
+.poll .numeric-answer { margin: 24px 0 0; font-weight: 600; color: var(--poll-correct, #16a34a); }

package/src/core/editDeck.js

@@ -233,7 +233,7 @@ export function stripNotes(source) {
 // The live activities, and the code to join them (<qrcode join />): a slide
 // with one of them is left out of shared builds. <qrcode follow /> and other
 // QR codes stay.
-const ACTIVITY_RE = /<(poll|question|wordcloud|scale)\b/i
+const ACTIVITY_RE = /<(poll|question|wordcloud|scale|numeric)\b/i
 const JOIN_RE = /<qrcode\b[^>]*?\sjoin(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|\{?([^\s/>}]*)\}?))?(?=[\s/>])/i
 const joins = text => { const m = JOIN_RE.exec(text); return !!m && !/^(false|no|off|0)$/i.test(m[1] ?? m[2] ?? m[3] ?? '') }
 export function hasActivity(slide) {
@@ -242,7 +242,7 @@ export function hasActivity(slide) {
 }
 
 // Removes every slide with a live activity (<poll>, <question>, <wordcloud>,
-// <scale>) for shared builds: a reader cannot vote, and the results belong to
+// <scale>, <numeric>) for shared builds: a reader cannot vote, and the results belong to
 // the talk. Returns { source, ids, removed }: `ids` maps each kept slide's id
 // to its id afterwards (an automatic `slide-N` moves up), `removed` the ids
 // that are gone, so saved drawings can follow their slides.

package/src/core/icons.js

@@ -41,6 +41,8 @@ export const ICONS = {
   trash: '<path d="M10 11v6"/><path d="M14 11v6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>', // trash-2
   eye: '<path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/>', // eye
   'eye-off': '<path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"/><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"/><path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"/><path d="m2 2 20 20"/>', // eye-off
+  lock: '<rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>', // lock
+  'lock-open': '<rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 9.9-1"/>', // lock-open
   finger: '<path d="M22 14a8 8 0 0 1-8 8"/><path d="M18 11v-1a2 2 0 0 0-2-2a2 2 0 0 0-2 2"/><path d="M14 10V9a2 2 0 0 0-2-2a2 2 0 0 0-2 2v1"/><path d="M10 9.5V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v10"/><path d="M18 11a2 2 0 1 1 4 0v3a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15"/>', // pointer
   pen: '<path d="M13 21h8"/><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/>', // pen-line
   highlighter: '<path d="m9 11-6 6v3h9l3-3"/><path d="m22 12-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4"/>', // highlighter

package/src/core/labels.js

@@ -55,6 +55,22 @@ export const LABELS = {
     'follow.waiting': 'The talk has not started yet.',
     'follow.tryHere': 'Try following here',
     'join.static': 'During the talk, phones joined here to answer.',
+    'poll.answeredOf': '{n} of {of} answered',
+    'poll.close': 'Close: later answers do not count',
+    'poll.open': 'Open again',
+    'poll.closed': 'Closed',
+    'poll.several': 'Several answers possible.',
+    'poll.pickSeveral': 'Tap all that apply.',
+    'poll.thanksSeveral': 'Thanks! You chose {choice}. Tap to change.',
+    'respond.closed': 'Closed: no more answers.',
+    'respond.right': 'Right!',
+    'respond.wrong': 'Not quite. The right answer: {answer}',
+    'respond.solution': 'The right answer: {answer}',
+    'numeric.placeholder': 'A number',
+    'numeric.invalid': 'Enter a number, such as 0.5 or 1/2.',
+    'numeric.sent': 'Sent: {value}. Send another to change.',
+    'numeric.other': 'Other',
+    'numeric.right': '{n} right',
     'question.empty': 'Answers appear here.',
     'scale.average': 'Average {n}',
   },
@@ -108,6 +124,22 @@ export const LABELS = {
     'follow.waiting': 'Der Vortrag hat noch nicht begonnen.',
     'follow.tryHere': 'Mitverfolgen hier ausprobieren',
     'join.static': 'Im Vortrag haben sich hier die Handys zum Antworten verbunden.',
+    'poll.answeredOf': '{n} von {of} haben geantwortet',
+    'poll.close': 'Schliessen: spätere Antworten zählen nicht',
+    'poll.open': 'Wieder öffnen',
+    'poll.closed': 'Geschlossen',
+    'poll.several': 'Mehrere Antworten möglich.',
+    'poll.pickSeveral': 'Alle zutreffenden antippen.',
+    'poll.thanksSeveral': 'Danke! Gewählt: {choice}. Zum Ändern antippen.',
+    'respond.closed': 'Geschlossen: keine weiteren Antworten.',
+    'respond.right': 'Richtig!',
+    'respond.wrong': 'Leider nicht. Richtig ist: {answer}',
+    'respond.solution': 'Richtig ist: {answer}',
+    'numeric.placeholder': 'Eine Zahl',
+    'numeric.invalid': 'Eine Zahl eingeben, z. B. 0,5 oder 1/2.',
+    'numeric.sent': 'Gesendet: {value}. Zum Ändern eine andere senden.',
+    'numeric.other': 'Andere',
+    'numeric.right': '{n} richtig',
     'question.empty': 'Hier erscheinen die Antworten.',
     'scale.average': 'Durchschnitt {n}',
   },

package/src/core/results.js

@@ -0,0 +1,64 @@
+// The answers given during a talk, kept beside the deck as
+// <deck>.results.json, so they outlast the room server (which forgets them)
+// and show in builds, PDFs and files sent to readers.
+//
+//   { "version": 1, "rooms": { "<room>": { "savedAt": "…", "closed": false,
+//     "answers": [{ "phone": 1, "at": "…", "value": … }] } } }
+//
+// Phones are numbered per room in the order they first answered; their own
+// ids never leave the room server. `answers` are those that counted: once an
+// activity was closed, the ones before.
+
+export const resultsFileFor = deckPath => String(deckPath).replace(/\.md$/i, '') + '.results.json'
+
+const ROOM_RE = /^[A-Za-z0-9][A-Za-z0-9._-]{0,99}$/
+
+/** One room's answers as kept: room messages ({ n, at, from, data }) with numbered phones. */
+export function keptAnswers(messages) {
+  const phones = new Map()
+  return messages.map(message => {
+    const from = message.from ?? `#${message.n}`
+    if (!phones.has(from)) phones.set(from, phones.size + 1)
+    return { phone: phones.get(from), at: message.at ?? null, value: message.data?.value ?? null }
+  })
+}
+
+/** Kept answers as room messages again, for the slides that show them. */
+export const answersAsMessages = answers => answers.map((answer, i) => ({ n: i + 1, at: answer.at, from: `phone-${answer.phone}`, data: { value: answer.value } }))
+
+/** A results file as read, with anything unexpected left out. */
+export function normalizeResults(data) {
+  const rooms = {}
+  for (const [room, entry] of Object.entries(data?.rooms ?? {})) {
+    if (!ROOM_RE.test(room) || !Array.isArray(entry?.answers)) continue
+    rooms[room] = {
+      savedAt: typeof entry.savedAt === 'string' ? entry.savedAt : null,
+      closed: !!entry.closed,
+      answers: entry.answers.filter(answer => answer && Number.isInteger(answer.phone)).map(({ phone, at, value }) => ({ phone, at: typeof at === 'string' ? at : null, value: value ?? null })),
+    }
+  }
+  return { version: 1, rooms }
+}
+
+/** One room's answers in, or (none) out; returns the new results. */
+export function withRoom(results, room, { answers, closed = false, savedAt = new Date().toISOString() }) {
+  if (!ROOM_RE.test(room)) throw Object.assign(new Error('Room names use letters, digits, dots, hyphens and underscores'), { status: 400 })
+  const rooms = { ...results.rooms }
+  if (Array.isArray(answers) && answers.length) rooms[room] = { savedAt, closed: !!closed, answers }
+  else delete rooms[room]
+  return normalizeResults({ rooms })
+}
+
+export const serializeResults = results => JSON.stringify(results, null, 2) + '\n'
+
+const csvCell = value => {
+  const text = value == null ? '' : Array.isArray(value) ? value.join('|') : String(value)
+  return /[",\n\r]/.test(text) ? `"${text.replace(/"/g, '""')}"` : text
+}
+
+/** All answers as CSV: room, phone, time, answer (several picks joined by |). */
+export function resultsCsv(results) {
+  const rows = [['room', 'phone', 'at', 'answer']]
+  for (const [room, entry] of Object.entries(results.rooms)) for (const answer of entry.answers) rows.push([room, answer.phone, answer.at, answer.value])
+  return rows.map(row => row.map(csvCell).join(',')).join('\n') + '\n'
+}

package/src/editor/sampleDeck.js

@@ -6,6 +6,26 @@
 // over hills under a sun, for every layout that shows a picture.
 export const SAMPLE_PICTURE = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500"><rect width="800" height="500" fill="var(--surface, #eef1f4)"/><g stroke="var(--rule, #d5dbe1)" stroke-width="2"><path d="M0 100H800M0 200H800M0 300H800M0 400H800M100 0V500M200 0V500M300 0V500M400 0V500M500 0V500M600 0V500M700 0V500"/></g><circle cx="580" cy="165" r="128" fill="none" stroke="var(--accent, #3d5a73)" stroke-width="4" opacity="0.35"/><circle cx="580" cy="165" r="88" fill="var(--accent, #3d5a73)"/><path d="M0 360C140 292 262 300 384 338S628 424 800 330V500H0Z" fill="var(--accent-2, #c2410c)"/><path d="M0 418C168 366 330 392 470 422S690 474 800 434V500H0Z" fill="var(--accent, #3d5a73)" opacity="0.6"/><polyline points="80,262 170,214 260,236 350,170 440,196" fill="none" stroke="var(--ink, #1b2733)" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/><g fill="var(--bg, #ffffff)" stroke="var(--ink, #1b2733)" stroke-width="5"><circle cx="80" cy="262" r="10"/><circle cx="170" cy="214" r="10"/><circle cx="260" cy="236" r="10"/><circle cx="350" cy="170" r="10"/><circle cx="440" cy="196" r="10"/></g></svg>'
 
+// The references the sample deck cites. Builds find them in a file beside the
+// deck; the dev and edit servers read them from here where there is none.
+export const SAMPLE_REFERENCES_FILE = 'sample-references.bib'
+export const SAMPLE_REFERENCES = `@article{doe2024,
+  author  = {Doe, Jane and Roe, Richard},
+  title   = {Measuring how slides are read},
+  journal = {Journal of Sample Studies},
+  year    = {2024},
+  volume  = {12},
+  pages   = {1--10}
+}
+
+@book{roe2023,
+  author    = {Roe, Richard},
+  title     = {Quotations and Their Sources},
+  publisher = {Example Press},
+  year      = {2023}
+}
+`
+
 // `picture` is where the slides find the picture: a file beside the deck, or
 // a data URL where there is no such file.
 export function sampleDeck(picture = './picture.svg') {
@@ -15,6 +35,7 @@ meta:
   author: "A. Author"
   organization: "Institute"
   date: "2026-10-06"
+bibliography: ${SAMPLE_REFERENCES_FILE}
 ---
 
 ---
@@ -51,10 +72,10 @@ alt: "Shapes"
 ---
 # Lists, emphasis and code
 
-- A point with *emphasis* and **strong** words
-- A second point with \`inline code\`
-  - A nested point
-  - Another nested point
+1. A step with *emphasis* and **strong** words
+2. A step with \`inline code\` and a [link](https://example.com)
+   - A nested point
+   - Another nested point
 
 \`\`\`js
 const total = values.reduce((sum, value) => sum + value, 0)
@@ -69,7 +90,7 @@ const total = values.reduce((sum, value) => sum + value, 0)
 | Treatment | 5.1 | 0.6 |
 | Follow-up | 5.0 | 0.7 |
 
-The difference is $\\Delta = 0.9$, with a footnote.[^1]
+The difference is $\\Delta = 0.9$ [@doe2024, p. 4], with a footnote.[^1]
 
 [^1]: A source for the claim.
 
@@ -115,9 +136,9 @@ $$
 
 +++
 
-1. First step
-2. Second step
-3. Third step
+> A quotation set apart from the text.
+
+As @roe2023 notes, a quote needs its source.
 :::
 
 ---
@@ -158,6 +179,11 @@ alt: "Shapes"
 overlay: true
 ---
 # A picture that fills the slide.
+
+---
+# References
+
+<bibliography />
 `.replaceAll('./picture.svg', picture)
 }
 

package/src/layouts/layoutApi.jsx

@@ -5,7 +5,7 @@ import { marked, Parser } from 'marked'
 import { registry } from '../runtime/registry'
 import { InkLayer } from '../runtime/ink/InkLayer.jsx'
 import themedSvgs from 'virtual:deck-svgs'
-import { renderCitations, citationsHtml as referencesOf } from '../runtime/citations.js'
+import { renderCitations, citationsHtml as referencesOf, bibliographyOf } from '../runtime/citations.js'
 
 // ─── Content extraction ────────────────────────────────────────────────────
 
@@ -188,11 +188,12 @@ export function prepareSlide(slide) {
     .sort((a, b) => position(a[1]) - position(b[1]))
   let separator = '\u0000mdeck-region\u0000'
   while (entries.some(([, r]) => r.content.includes(separator))) separator += '\u0000'
-  const cited = renderCitations(entries.map(([, r]) => r.content).join(separator))
+  const bib = bibliographyOf(slide.deckConfig)
+  const cited = renderCitations(entries.map(([, r]) => r.content).join(separator), bib)
   const { processed, footnotesHtml } = preprocessFootnotes(cited.markdown)
   const pieces = processed.split(separator)
   const regions = Object.fromEntries(entries.map(([name, region], i) => [name, { ...region, content: pieces[i] }]))
-  const citationsHtml = slide.deckConfig?.show?.citations === false ? '' : referencesOf(cited.ids)
+  const citationsHtml = slide.deckConfig?.show?.citations === false ? '' : referencesOf(cited.ids, bib)
   return { ...slide, regions, content: regions.body?.content ?? '', footnotesHtml, citationsHtml }
 }
 

package/src/live/answer/answer.css

@@ -33,3 +33,22 @@ body { min-height: 100vh; display: flex; flex-direction: column; font: 18px/1.45
 .answer-status { margin: 18px 0 0; color: var(--muted); min-height: 2.8em; }
 footer { padding: 16px 20px; text-align: center; color: var(--muted); font-size: 14px; }
 .answer-follow { display: block; margin: 0 20px 24px; padding: 12px 16px; text-align: center; border: 1px solid var(--rule); border-radius: 10px; color: var(--ink); text-decoration: none; font-size: 15px; }
+/* Maths in a question or option (MathML, see answer.js). */
+.answer-rich math { font-size: 1.1em; }
+/* buttons="letters|numbers": big keys; the options are on the slide. */
+.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 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; }
+.answer button.is-picked:disabled { opacity: .75; }
+/* Once the right answer shows. */
+.answer-verdict { margin: 4px 0 0; padding: 14px 16px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 6%, transparent); font-weight: 600; }
+.answer-verdict.is-right { background: color-mix(in srgb, #16a34a 16%, transparent); color: color-mix(in srgb, #16a34a 75%, var(--ink)); }
+.answer-verdict.is-wrong { background: color-mix(in srgb, #dc2626 12%, transparent); }
+/* <numeric>: a number field and Send. */
+.answer-number { display: grid; grid-template-columns: 1fr auto; gap: 12px; }
+.answer-number input { width: 100%; min-width: 0; padding: 14px; border: 2px solid var(--rule); border-radius: 14px; background: var(--bg); color: var(--ink); font: inherit; font-size: 22px; font-variant-numeric: tabular-nums; }
+.answer-number button[type=submit] { background: var(--accent); border-color: var(--accent); color: var(--on-accent, var(--bg)); }