mdeck 3.2.0 → 3.4.0

package/src/live/answer/answer.css

@@ -32,3 +32,23 @@ body { min-height: 100vh; display: flex; flex-direction: column; font: 18px/1.45
 .answer-text button[type=submit] { justify-self: start; background: var(--accent); border-color: var(--accent); color: var(--on-accent, var(--bg)); }
 .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)); }

package/src/live/answer/answer.js

@@ -7,13 +7,25 @@
   const code = location.pathname.split('/').filter(Boolean).pop()
   const root = document.getElementById('answer')
   const FALLBACK = {
-    en: { waiting: 'The next question will appear here.', pick: 'Tap one answer.', thanks: 'Thanks! You chose “{choice}”. Tap another to change.', send: 'Send', sent: 'Sent. Thank you!', offline: 'Connecting…' },
-    de: { waiting: 'Die nächste Frage erscheint hier.', pick: 'Eine Antwort antippen.', thanks: 'Danke! Gewählt: „{choice}“. Zum Ändern eine andere antippen.', send: 'Senden', sent: 'Gesendet. Danke!', offline: 'Verbinde…' },
+    en: {
+      waiting: 'The next question will appear here.', pick: 'Tap one answer.', thanks: 'Thanks! You chose “{choice}”. Tap another to change.', send: 'Send', sent: 'Sent. Thank you!', offline: 'Connecting…',
+      pickSeveral: 'Tap all that apply.', thanksSeveral: 'Thanks! You chose {choice}. Tap to change.', closed: 'Closed: no more answers.',
+      right: 'Right!', wrong: 'Not quite. The right answer: {answer}', solution: 'The right answer: {answer}',
+      number: 'A number', invalid: 'Enter a number, such as 0.5 or 1/2.', numberSent: 'Sent: {value}. Send another to change.',
+    },
+    de: {
+      waiting: 'Die nächste Frage erscheint hier.', pick: 'Eine Antwort antippen.', thanks: 'Danke! Gewählt: „{choice}“. Zum Ändern eine andere antippen.', send: 'Senden', sent: 'Gesendet. Danke!', offline: 'Verbinde…',
+      pickSeveral: 'Alle zutreffenden antippen.', thanksSeveral: 'Danke! Gewählt: {choice}. Zum Ändern antippen.', closed: 'Geschlossen: keine weiteren Antworten.',
+      right: 'Richtig!', wrong: 'Leider nicht. Richtig ist: {answer}', solution: 'Richtig ist: {answer}',
+      number: 'Eine Zahl', invalid: 'Eine Zahl eingeben, z. B. 0,5 oder 1/2.', numberSent: 'Gesendet: {value}. Zum Ändern eine andere senden.',
+    },
   }
   let words = FALLBACK[navigator.language?.slice(0, 2) === 'de' ? 'de' : 'en']
   let current = null
   let connected = false
   let status = ''
+  // What is typed into a number field, kept while the page redraws.
+  let draft = ''
 
   const me = (() => {
     try {
@@ -33,7 +45,7 @@
       if (key.startsWith('on')) node.addEventListener(key.slice(2), value)
       else if (value != null && value !== false) node.setAttribute(key, value === true ? '' : value)
     }
-    node.append(...children.flat().filter(child => child != null))
+    node.append(...children.flat(Infinity).filter(child => child != null))
     return node
   }
 
@@ -50,37 +62,146 @@
     for (const url of wanted) if (!document.querySelector(`link[data-theme-font][href="${CSS.escape(url)}"]`)) document.head.append(el('link', { rel: 'stylesheet', href: url, 'data-theme-font': true }))
   }
 
+  // A question or option drawn by the deck (Markdown and maths as MathML,
+  // src/components/inlineText.js), kept to text, emphasis and MathML. The
+  // nodes are moved out of the parsed document, never parsed again.
+  const SAFE_TAGS = new Set('em strong b i code del s sub sup br math semantics annotation mrow mi mo mn ms mtext mspace msup msub msubsup mfrac msqrt mroot mstyle mover munder munderover mtable mtr mtd mpadded mphantom menclose'.split(' '))
+  const SAFE_ATTRIBUTES = new Set('mathvariant display displaystyle scriptlevel stretchy fence separator symmetric largeop movablelimits accent accentunder lspace rspace minsize maxsize linethickness width height depth voffset columnalign rowalign columnspacing rowspacing notation encoding'.split(' '))
+  const DROPPED = new Set('script style template noscript iframe object embed svg textarea title'.split(' '))
+  function clean(node) {
+    for (const child of [...node.childNodes]) {
+      if (child.nodeType === Node.TEXT_NODE) continue
+      if (child.nodeType !== Node.ELEMENT_NODE || DROPPED.has(child.localName)) { child.remove(); continue }
+      clean(child)
+      if (!SAFE_TAGS.has(child.localName)) { child.replaceWith(...child.childNodes); continue }
+      for (const { name } of [...child.attributes]) if (!SAFE_ATTRIBUTES.has(name)) child.removeAttribute(name)
+    }
+    return node
+  }
+  const drawn = (html, text) => {
+    if (typeof html !== 'string') return text
+    const body = clean(new DOMParser().parseFromString(html, 'text/html').body)
+    return el('span', { class: 'answer-rich' }, ...body.childNodes)
+  }
+  // An option as this phone shows it: its key (A, B… with `buttons`), or drawn.
+  const shown = (activity, value) => {
+    const i = activity.options.indexOf(value)
+    return activity.keys?.[i] ?? drawn(activity.optionsHtml?.[i], value)
+  }
+  // A sentence with nodes put in for {name}; without {name}, the sentence.
+  const sentence = (text, name, part) => {
+    if (!text.includes(`{${name}}`)) return text
+    const [before, after] = text.split(`{${name}}`)
+    return [before, part, after]
+  }
+  const listed = parts => parts.flatMap((part, i) => i ? [', ', part] : [part])
+
+  // A number as src/components/Numeric.jsx reads it: 0.5, 0,5, −3, 1e-3, 1/2.
+  function parseNumber(text) {
+    const plain = String(text ?? '').trim().replace(/\s+/g, '').replace(/\u2212/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 activity's controls (src/components/activity.jsx), from its room's
+  // state: `closed`, and `revealed` with the `solution` once the right
+  // answer shows. Only the state, not everyone's answers (?only=state).
+  let controls = {}, controlRoom = null, controlSource = null
+  function followControls(room) {
+    if (room === controlRoom) return
+    controlSource?.close()
+    controlSource = null
+    controls = {}
+    controlRoom = room
+    if (!room) return
+    controlSource = new EventSource(new URL(`rooms/${encodeURIComponent(`${code}.${room}`)}/events?only=state`, base))
+    const take = event => {
+      const state = JSON.parse(event.data).state
+      controls = state && typeof state === 'object' ? state : {}
+      render()
+    }
+    controlSource.addEventListener('snapshot', take)
+    controlSource.addEventListener('state', take)
+  }
+  // Once the right answer shows: whether this phone's was right, or what it is.
+  const verdict = (answered, right, solution) => el('p', { class: `answer-verdict${answered ? (right ? ' is-right' : ' is-wrong') : ''}`, role: 'status' },
+    answered ? (right ? words.right : sentence(words.wrong, 'answer', solution)) : sentence(words.solution, 'answer', solution))
+  const statusLine = text => el('p', { class: 'answer-status', role: 'status' }, status || (controls.closed ? words.closed : text))
+
   async function answer(room, value) {
     const response = await fetch(new URL(`rooms/${encodeURIComponent(`${code}.${room}`)}`, base), { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ from: me, data: { value } }) })
     if (!response.ok) throw new Error((await response.json().catch(() => ({}))).error ?? String(response.status))
   }
 
   const FORMS = {
-    // { question, options: [..] }: one of several answers, which can be changed.
+    // { question, options, optionsHtml | keys, multiple }: one answer, or with
+    // `multiple` several, which can be changed. With `keys` the buttons show
+    // A, B… (or 1, 2…) and the options are on the slide.
     choice(activity, room) {
-      const picked = remembered(room)
+      const several = !!activity.multiple
+      const saved = remembered(room)
+      let picks = []
+      if (several) { try { picks = JSON.parse(saved ?? '[]') } catch {} }
+      else if (saved != null) picks = [saved]
+      picks = activity.options.filter(option => Array.isArray(picks) && picks.includes(option))
+      const vote = async next => {
+        try {
+          await answer(room, several ? next : next[0])
+          remember(room, several ? JSON.stringify(next) : next[0])
+          status = ''
+        } catch (error) { status = error.message }
+        render()
+      }
+      const solution = controls.revealed && Array.isArray(controls.solution) ? activity.options.filter(option => controls.solution.includes(option)) : null
+      const right = solution && (several ? picks.length === solution.length && picks.every(pick => solution.includes(pick)) : solution.includes(picks[0]))
       return [
-        el('div', { class: 'answer-options' }, activity.options.map(option => el('button', {
-          class: option === picked ? 'is-picked' : null, 'aria-pressed': String(option === picked),
-          onclick: async () => {
-            try { await answer(room, option); remember(room, option); status = fill(words.thanks, { choice: option }) } catch (error) { status = error.message }
-            render()
-          },
-        }, option))),
-        el('p', { class: 'answer-status', role: 'status' }, status || (picked ? fill(words.thanks, { choice: picked }) : words.pick)),
+        el('div', { class: activity.keys ? 'answer-keys' : 'answer-options' }, activity.options.map(option => {
+          const on = picks.includes(option)
+          return el('button', {
+            class: on ? 'is-picked' : null, 'aria-pressed': String(on), disabled: !!controls.closed,
+            onclick: () => vote(several ? activity.options.filter(o => o === option ? !on : picks.includes(o)) : [option]),
+          }, several && !activity.keys ? el('span', { class: 'answer-check', 'aria-hidden': 'true' }) : null, shown(activity, option))
+        })),
+        statusLine(picks.length
+          ? sentence(several ? words.thanksSeveral : words.thanks, 'choice', listed(picks.map(pick => shown(activity, pick))))
+          : several ? words.pickSeveral : words.pick),
+        solution?.length ? verdict(picks.length > 0, right, listed(solution.map(option => shown(activity, option)))) : null,
+      ]
+    },
+    // { question, placeholder }: a number, typed; the latest one counts.
+    numeric(activity, room) {
+      const sent = remembered(room)
+      const input = el('input', { type: 'text', inputmode: 'decimal', autocomplete: 'off', enterkeyhint: 'send', placeholder: activity.placeholder || words.number, disabled: !!controls.closed })
+      input.value = draft
+      input.addEventListener('input', () => { draft = input.value })
+      const form = el('form', { class: 'answer-number', onsubmit: async event => {
+        event.preventDefault()
+        const text = input.value.trim()
+        if (parseNumber(text) == null) { status = words.invalid; render(); return }
+        try { await answer(room, text); remember(room, text); draft = ''; status = '' } catch (error) { status = error.message }
+        render()
+      } }, input, el('button', { type: 'submit', disabled: !!controls.closed }, words.send))
+      const solution = controls.revealed && controls.solution && Number.isFinite(controls.solution.value) ? controls.solution : null
+      const right = solution && sent != null && Math.abs(parseNumber(sent) - solution.value) <= (solution.tolerance ?? 0)
+      return [
+        form,
+        statusLine(sent != null ? fill(words.numberSent, { value: sent }) : ''),
+        solution ? verdict(sent != null, right, drawn(solution.html, solution.text)) : null,
       ]
     },
     // { question, placeholder, maxLength }: short text, as often as people like.
     text(activity, room) {
-      const input = el('textarea', { rows: 3, maxlength: activity.maxLength ?? 200, placeholder: activity.placeholder ?? '' })
+      const input = el('textarea', { rows: 3, maxlength: activity.maxLength ?? 200, placeholder: activity.placeholder ?? '', disabled: !!controls.closed })
       const form = el('form', { class: 'answer-text', onsubmit: async event => {
         event.preventDefault()
         const value = input.value.trim()
         if (!value) return
         try { await answer(room, value); status = words.sent } catch (error) { status = error.message }
         render()
-      } }, input, el('button', { type: 'submit' }, words.send))
-      return [form, el('p', { class: 'answer-status', role: 'status' }, status)]
+      } }, input, el('button', { type: 'submit', disabled: !!controls.closed }, words.send))
+      return [form, statusLine('')]
     },
     // { question, min, max, minLabel, maxLabel }: a number on a scale.
     scale(activity, room) {
@@ -89,14 +210,14 @@
       for (let n = activity.min ?? 1; n <= (activity.max ?? 5); n++) steps.push(String(n))
       return [
         el('div', { class: 'answer-scale' }, steps.map(step => el('button', {
-          class: step === picked ? 'is-picked' : null, 'aria-pressed': String(step === picked),
+          class: step === picked ? 'is-picked' : null, 'aria-pressed': String(step === picked), disabled: !!controls.closed,
           onclick: async () => {
-            try { await answer(room, Number(step)); remember(room, step); status = fill(words.thanks, { choice: step }) } catch (error) { status = error.message }
+            try { await answer(room, Number(step)); remember(room, step); status = '' } catch (error) { status = error.message }
             render()
           },
         }, step))),
-        (activity.minLabel || activity.maxLabel) && el('div', { class: 'answer-scale-labels' }, el('span', {}, activity.minLabel ?? ''), el('span', {}, activity.maxLabel ?? '')),
-        el('p', { class: 'answer-status', role: 'status' }, status || (picked ? fill(words.thanks, { choice: picked }) : words.pick)),
+        (activity.minLabel || activity.maxLabel) && el('div', { class: 'answer-scale-labels' }, el('span', {}, drawn(activity.minLabelHtml, activity.minLabel ?? '')), el('span', {}, drawn(activity.maxLabelHtml, activity.maxLabel ?? ''))),
+        statusLine(picked ? fill(words.thanks, { choice: picked }) : words.pick),
       ]
     },
   }
@@ -104,12 +225,15 @@
   function render() {
     const activity = current?.activity
     const form = activity && FORMS[activity.type]
-    root.replaceChildren(
+    // Without the filter, replaceChildren() writes a missing part out as "null".
+    root.replaceChildren(...[
       form
-        ? el('main', { class: 'answer' }, activity.question && el('h1', {}, activity.question), form(activity, current.room))
+        ? el('main', { class: 'answer' }, activity.question && el('h1', {}, drawn(activity.questionHtml, activity.question)), form(activity, current.room))
         : el('main', { class: 'answer answer--waiting' }, el('p', {}, connected ? words.waiting : words.offline)),
       current?.title ? el('footer', {}, current.title) : null,
-    )
+      // The presenter's screen sends the link when other devices can follow the slides.
+      /^https?:\/\//.test(current?.follow ?? '') ? el('a', { class: 'answer-follow', href: current.follow }, words.follow ?? 'Follow the slides') : null,
+    ].filter(Boolean))
   }
 
   function follow(state) {
@@ -117,7 +241,8 @@
     current = state
     if (state?.labels) words = { ...words, ...state.labels }
     applyLook(state?.look, state?.lang)
-    if (state?.room !== previous) status = ''
+    if (state?.room !== previous) { status = ''; draft = '' }
+    followControls(state?.activity ? state.room : null)
     render()
   }
 

package/src/live/client.js

@@ -9,7 +9,8 @@
 // answers.
 import { useCallback, useEffect, useState } from 'preact/hooks'
 import { sessionCode } from './code.js'
-import { pairToken } from './pairing.js'
+import { pairToken, pairHeaders } from './pairing.js'
+import { keptAnswers, answersAsMessages } from '../core/results.js'
 import { devPath } from '../core/devPath.js'
 import { t, deckLanguage } from '../core/labels.js'
 
@@ -114,36 +115,82 @@ function joinUrl(info) {
   return info.network ? new URL(`__mdeck/live/${settings.code}`, info.network).href : null
 }
 const localJoinUrl = () => `${serverBase()}/${settings.code}`
+
+// The link for following the slides on another device (?view=follow): this
+// deck's page, where other devices reach both the page and the stage room
+// that carries the presenter's position. That is `mdeck run --network`'s
+// network address, or a deck hosted with a `server` setting, whose stage room
+// is on that server. null when only this computer could follow; localFollowUrl
+// then opens the follow view here, for trying it out.
+const relayed = () => /^\/t\/[^/]+\/$/.test(devPath(''))
+function followUrl(info) {
+  if (relayed()) return null
+  if (import.meta.env?.DEV || proxyControls) return info.network ? new URL(`${devPath('')}?view=follow`, info.network).href : null
+  return settings.server ? `${window.location.origin}${window.location.pathname}?view=follow` : null
+}
+const localFollowUrl = () => `${window.location.origin}${devPath('')}?view=follow`
 // Until the server has answered or failed, `known` is false and activities
 // show no join code, so a quick capture never shows a passing warning.
 const reach = info => ({ known: info.reachable != null, offline: info.reachable === false })
 
+// The answers kept in the talk (<deck>.results.json), set by the runtime: a
+// build shows them where no room server answers, instead of no answers.
+let savedRooms = {}
+export function setSavedResults(results) { savedRooms = results?.rooms ?? {} }
+
+// While `mdeck run` runs, the presenter's screens keep each activity's
+// answers in that file (src/build/resultsPlugin.js), a moment after the last
+// one came in. Elsewhere there is nothing to keep them in.
+const keeping = new Map()
+export function keepAnswers(room, messages, { closed = false } = {}) {
+  if (!import.meta.env?.DEV) return
+  clearTimeout(keeping.get(room))
+  keeping.set(room, setTimeout(() => {
+    keeping.delete(room)
+    fetch(devPath('__mdeck/results'), { method: 'POST', headers: pairHeaders({ 'Content-Type': 'application/json' }), body: JSON.stringify({ room, closed, answers: keptAnswers(messages) }) }).catch(() => {})
+  }, 800))
+}
+
 /**
  * Follow a room's answers on a slide.
  *   messages  every answer so far: { n, at, from, data: { value } }
  *   joinUrl   the deck's join link for the QR code, or null if phones cannot
  *             reach the server; localJoinUrl works on this computer
  *   canReset / reset()  presenter only
+ *   state     the room's state, which only the presenter sets (setState):
+ *             an activity's controls, such as closed or revealed
+ *   present   how many phones (and followers) are connected to the deck,
+ *             or null before the server said
  *   connected false until the live stream is open
  *   offline   no room server answered: a PDF, a file sent to readers or a
  *             build hosted without one. Activities then show their question
- *             as a record of the talk, without a join code.
+ *             as a record of the talk, without a join code, and `messages`
+ *             are the answers kept in the talk, if any.
  * Off the current slide the room keeps its last messages but disconnects.
  */
 export function useRoom(room) {
   const live = useActive(room)
   const [messages, setMessages] = useState([])
   const [connected, setConnected] = useState(false)
+  const [state, setRoomState] = useState(null)
+  const [present, setPresent] = useState(null)
   const [info, setInfo] = useState({})
 
   useEffect(() => { serverInfo().then(setInfo) }, [])
 
   useEffect(() => {
     if (!live || !room || typeof EventSource === 'undefined') return
-    const source = new EventSource(`${roomPath(room)}/events`)
+    const source = new EventSource(`${roomPath(room)}/events?presence=1`)
     source.addEventListener('open', () => setConnected(true))
     source.addEventListener('error', () => setConnected(false))
-    source.addEventListener('snapshot', event => setMessages(JSON.parse(event.data).messages))
+    source.addEventListener('snapshot', event => {
+      const snapshot = JSON.parse(event.data)
+      setMessages(snapshot.messages)
+      setRoomState(snapshot.state ?? null)
+      if (snapshot.presence) setPresent(snapshot.presence.phones)
+    })
+    source.addEventListener('state', event => setRoomState(JSON.parse(event.data).state ?? null))
+    source.addEventListener('presence', event => setPresent(JSON.parse(event.data).phones))
     source.addEventListener('message', event => { const message = JSON.parse(event.data); setMessages(list => list.some(m => m.n === message.n) ? list : [...list, message]) })
     source.addEventListener('reset', () => setMessages([]))
     return () => { source.close(); setConnected(false) }
@@ -154,7 +201,14 @@ export function useRoom(room) {
     if (!response.ok) throw new Error((await response.json().catch(() => ({}))).error ?? 'Could not reset')
   }, [room])
 
-  return { messages, reset, connected, canReset: !!info.canReset, joinUrl: joinUrl(info), localJoinUrl: localJoinUrl(), code: settings.code, ...reach(info) }
+  // Ordered like the session's state: the latest change of any screen wins.
+  const setState = useCallback(async next => {
+    const response = await fetch(`${controlRoomPath(room)}/state`, { method: 'POST', headers: withKey({ 'Content-Type': 'application/json' }), body: JSON.stringify({ state: { ...next, at: Date.now(), screen: SCREEN } }) })
+    if (!response.ok) throw new Error((await response.json().catch(() => ({}))).error ?? 'Could not change the room')
+  }, [room])
+
+  const kept = info.reachable === false ? savedRooms[room] : null
+  return { messages: kept ? answersAsMessages(kept.answers) : messages, reset, state, setState, present, connected, canReset: !!info.canReset, joinUrl: joinUrl(info), localJoinUrl: localJoinUrl(), code: settings.code, ...reach(info) }
 }
 
 /** The deck's join link alone, for a slide that only invites people in (<qrcode join />). */
@@ -164,6 +218,13 @@ export function useJoinLink() {
   return { joinUrl: joinUrl(info), localJoinUrl: localJoinUrl(), code: settings.code, ...reach(info) }
 }
 
+/** The link for following the slides, for a slide that shows it (<qrcode follow />). */
+export function useFollowLink() {
+  const [info, setInfo] = useState({})
+  useEffect(() => { serverInfo().then(setInfo) }, [])
+  return { joinUrl: followUrl(info), localJoinUrl: localFollowUrl(), code: settings.code, ...reach(info) }
+}
+
 /** The latest answer of each device, e.g. to count votes that can be changed. */
 export function latestByDevice(messages) {
   const latest = new Map()
@@ -197,7 +258,12 @@ export function captureLook(doc = lookSource()) {
 }
 
 // The words the answer page shows, in the deck's language.
-const phoneWords = () => ({ waiting: t('respond.waiting'), pick: t('poll.pick'), thanks: t('poll.thanks'), send: t('respond.send'), sent: t('respond.sent') })
+const phoneWords = () => ({
+  waiting: t('respond.waiting'), pick: t('poll.pick'), thanks: t('poll.thanks'), send: t('respond.send'), sent: t('respond.sent'), follow: t('follow.open'),
+  pickSeveral: t('poll.pickSeveral'), thanksSeveral: t('poll.thanksSeveral'), several: t('poll.several'),
+  closed: t('respond.closed'), right: t('respond.right'), wrong: t('respond.wrong'), solution: t('respond.solution'),
+  number: t('numeric.placeholder'), invalid: t('numeric.invalid'), numberSent: t('numeric.sent'),
+})
 
 // The presenter's screen announces the activity on the current slide and
 // repeats it every few seconds, so phones that join late and a server
@@ -236,7 +302,9 @@ async function sendCurrent() {
   if (!info.canReset) return report({ ok: false, reason: presenterKey() ? 'wrong-code' : 'no-code' })
   const look = captureLook()
   if (look) lastLook = look
-  const state = { ...current, look: lastLook, lang: deckLanguage(), labels: phoneWords() }
+  // Phones that answer can also follow the slides, where that works.
+  const follow = followUrl(info)
+  const state = { ...current, look: lastLook, lang: deckLanguage(), labels: phoneWords(), ...(follow ? { follow } : {}) }
   try {
     const response = await fetch(`${controlSessionPath()}/state`, { method: 'POST', headers: withKey({ 'Content-Type': 'application/json' }), body: JSON.stringify({ state }) })
     const body = response.ok ? await response.json().catch(() => ({})) : {}

package/src/live/roomTag.js

@@ -9,9 +9,13 @@ export function maskCode(source = '') {
   return source.replace(/^(```+|~~~+)[^\n]*\n[\s\S]*?^\1[ \t]*$/gm, blank).replace(/`[^`\n]+`/g, blank)
 }
 
+// Inside a tag: anything but its end, with quoted values whole, so a `>` in
+// an attribute (question="Is $x > 0$?") does not end the tag.
+const INSIDE = `(?:[^>"']|"[^"]*"|'[^']*')`
+
 // Every activity in a source, in order: [{ tag, room }].
 export function roomsIn(source = '') {
-  return [...maskCode(source).matchAll(/<([a-z][a-z0-9-]*)\b[^>]*?\broom\s*=\s*(["'])([^"']+)\2/gi)].map(match => ({ tag: match[1].toLowerCase(), room: match[3] }))
+  return [...maskCode(source).matchAll(new RegExp(`<([a-z][a-z0-9-]*)\\b${INSIDE}*?\\broom\\s*=\\s*(["'])([^"']+)\\2`, 'gi'))].map(match => ({ tag: match[1].toLowerCase(), room: match[3] }))
 }
 
 // The rooms on one slide, from its body and its named regions (the body is
@@ -30,7 +34,7 @@ export function slideTitleFor(deck, room) {
 }
 
 export function findRoomTag(source, room) {
-  const open = new RegExp(`<([a-z][a-z0-9-]*)\\b[^>]*?\\broom\\s*=\\s*(["'])${escape(room)}\\2[^>]*>`, 'i').exec(maskCode(source))
+  const open = new RegExp(`<([a-z][a-z0-9-]*)\\b${INSIDE}*?\\broom\\s*=\\s*(["'])${escape(room)}\\2${INSIDE}*>`, 'i').exec(maskCode(source))
   if (!open) return null
   if (open[0].endsWith('/>')) return open[0]
   const close = source.indexOf(`</${open[1]}>`, open.index + open[0].length)

package/src/live/rooms.js

@@ -179,6 +179,7 @@ function reply(response, status, body) {
 //   GET  /rooms/<id>/events    Server-Sent Events: snapshot, message, reset, state;
 //                              ?view=…&device=… counts this window as connected,
 //                              ?presence=1 adds who is connected to the session
+//                              ?only=state sends the room's state alone
 //   GET  /rooms/<id>/presence  who is connected to the session, once
 //   POST /rooms/<id>           { from, data } → { n }
 //   POST /rooms/<id>/reset     presenter only
@@ -211,9 +212,13 @@ export function liveHandler({ rooms = createRooms(), canReset = () => false, inf
         const view = searchParams.get('view'), device = searchParams.get('device')
         const present = VIEWS.includes(view) ? { view, device: DEVICES.includes(device) ? device : 'computer' } : null
         const wantsPresence = searchParams.get('presence') === '1'
-        write('snapshot', { messages: rooms.snapshot(id), state: rooms.state(id), ...(ink.length ? { ink } : {}), ...(wantsPresence ? { presence: rooms.presence(id) } : {}) })
+        // ?only=state: the room's state alone, as phones follow an activity's
+        // controls (closed, the right answer) without everyone's answers.
+        const onlyState = searchParams.get('only') === 'state'
+        write('snapshot', { messages: onlyState ? [] : rooms.snapshot(id), state: rooms.state(id), ...(ink.length ? { ink } : {}), ...(wantsPresence ? { presence: rooms.presence(id) } : {}) })
         const unsubscribe = rooms.subscribe(id, event => {
           if (event.type === 'presence') { if (wantsPresence) write('presence', event.presence); return }
+          if (onlyState && event.type !== 'state') return
           write(event.type, event.type === 'message' ? event.message : event.type === 'state' ? { state: event.state } : event.type === 'ink' ? { messages: event.messages } : {})
         }, present)
         const beat = setInterval(() => response.write(': ping\n\n'), heartbeatMs)

package/src/runtime/ReaderView.jsx

@@ -2,6 +2,7 @@ import { readerLink } from '../core/urls.js'
 import { h } from 'preact'
 import { useEffect, useMemo, useRef, useState } from 'preact/hooks'
 import { marked } from 'marked'
+import { renderCitations } from './citations.js'
 import { deckOutline } from '../core/outline.js'
 import { manifests, SlideRenderer } from '../layouts/renderSlide'
 import { loadTheme, THEME_METAS } from './themeLoader'
@@ -49,7 +50,7 @@ function ReadPage({ slide, index, total, deckConfig, width, height, scale, showN
         <SlideRenderer id={slide.id} regions={slide.regions} meta={slide.meta} content={slide.content} deckConfig={deckConfig} index={index} total={total} />
       </div>
     </div>
-    {showNotes && notes && <div class="reader-page-notes" dangerouslySetInnerHTML={{ __html: marked.parse(notes) }} />}
+    {showNotes && notes && <div class="reader-page-notes" dangerouslySetInnerHTML={{ __html: marked.parse(renderCitations(notes).markdown) }} />}
   </article>
 }
 

package/src/runtime/citations.js

@@ -0,0 +1,70 @@
+import initial, { sample as initialSample } from 'virtual:bibliography'
+import { scanCitations } from '../core/citations.js'
+import { SAMPLE_REFERENCES_FILE } from '../editor/sampleDeck.js'
+import '../components/citation.css'
+
+// The deck's formatted references (built by src/build/bibliography.js), or
+// null without a `bibliography`. The editor receives new ones as the deck or
+// its reference file changes.
+let bibliography = initial
+// The sample deck's, on the dev and edit servers (the design page shows it).
+let sample = initialSample ?? null
+let showsSample = false
+const listeners = new Set()
+
+// The references of the deck on screen: the sample deck's for the sample.
+export const currentBibliography = () => showsSample && sample ? sample : bibliography
+export function bibliographyOf(deckConfig) {
+  showsSample = [deckConfig?.bibliography].flat().includes(SAMPLE_REFERENCES_FILE)
+  return currentBibliography()
+}
+export function onBibliography(listener) {
+  listeners.add(listener)
+  return () => listeners.delete(listener)
+}
+
+if (import.meta.hot) {
+  import.meta.hot.accept('virtual:bibliography', next => {
+    if (!next) return
+    bibliography = next.default
+    sample = next.sample ?? null
+    for (const listener of listeners) listener(currentBibliography())
+  })
+}
+
+const escape = text => String(text).replace(/[&<>"]/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' })[c])
+
+// A citation the build has not formatted: one typed in the editor since the
+// last save is put together from its works; an unknown key is marked.
+function fallback(cluster, bib) {
+  return cluster.items.map(({ id }) => bib?.singles[id]
+    ?? `<span class="citation-key${bib?.ids.includes(id) ? '' : ' citation-key--missing'}" title="${escape(bib ? `@${id} is not in the bibliography` : 'This deck has no bibliography')}">@${escape(id)}${bib?.ids.includes(id) ? '' : '?'}</span>`).join('; ')
+}
+
+// Puts each citation's formatted text in place; returns the keys the text
+// cites, in order, for the slide's reference footer.
+export function renderCitations(markdown, bib = currentBibliography()) {
+  if (!markdown || !markdown.includes('@')) return { markdown, ids: [] }
+  const known = new Set(bib?.ids ?? [])
+  const clusters = scanCitations(markdown, { isKey: id => known.has(id) })
+  if (!clusters.length) return { markdown, ids: [] }
+  let out = ''
+  let at = 0
+  const ids = []
+  for (const cluster of clusters) {
+    const formatted = bib?.clusters[cluster.raw]
+    const unknown = cluster.items.filter(item => !known.has(item.id))
+    const html = formatted == null ? fallback(cluster, bib) : unknown.length ? `${formatted}; ${fallback({ items: unknown }, bib)}` : formatted
+    const keys = cluster.items.map(item => item.id)
+    out += markdown.slice(at, cluster.start) + `<cite class="citation" data-cites="${escape(keys.join(' '))}">${html}</cite>`
+    at = cluster.end
+    for (const id of keys) if (bib?.entries[id] && !ids.includes(id)) ids.push(id)
+  }
+  return { markdown: out + markdown.slice(at), ids }
+}
+
+// The full references of `ids`, for a slide's footer.
+export function citationsHtml(ids, bib = currentBibliography()) {
+  const entries = ids.map(id => bib?.entries[id]).filter(Boolean)
+  return entries.length ? `<div class="csl-bib-body">${entries.join('')}</div>` : ''
+}

package/src/runtime/deck-stage.js

@@ -64,7 +64,7 @@
  */
 
 import { iconSvg } from '../core/icons.js'
-import { inkPaint } from '../core/ink.js'
+import { inkPaint, snapAngle } from '../core/ink.js'
 
 (() => {
   const DESIGN_W_DEFAULT = 1920;
@@ -1025,8 +1025,11 @@ import { inkPaint } from '../core/ink.js'
       this._drawStraight(drawing, drawing.points[drawing.points.length - 1]);
     }
 
-    _drawStraight(drawing, [x, y]) {
+    // The line's end snaps to steps of 15° (horizontal, vertical, 45° …)
+    // when it is close to one, see snapAngle in core/ink.js.
+    _drawStraight(drawing, end) {
       const [x0, y0] = drawing.points[0];
+      const [x, y] = snapAngle([x0, y0], end);
       drawing.points = [[x0, y0, drawing.straight], [x, y, drawing.straight]];
       drawing.restart = true;
       this._drawLive(drawing.path, drawing.points, drawing.tool);

package/src/runtime/editorBridge.js

@@ -38,7 +38,9 @@ export function createEditorBridge({ parse, validate = () => [], loadTheme, setE
   }
 
   // Renders are serialized; while one is in flight only the newest request waits.
+  let latest = null
   function render(source, options = {}) {
+    latest = { source, options }
     if (running) { pending = { source, options }; return running }
     running = run(source, options).finally(() => {
       running = null
@@ -54,5 +56,9 @@ export function createEditorBridge({ parse, validate = () => [], loadTheme, setE
     return true
   }
 
-  return { render, handleMessage, current: () => current }
+  // The newest request again, with its preview settings, e.g. after the
+  // references were reformatted.
+  const refresh = () => latest ? render(latest.source, latest.options) : null
+
+  return { render, refresh, handleMessage, current: () => current }
 }