mdeck 3.3.0 → 3.5.0

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,14 +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) {
@@ -119,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'
 
@@ -132,32 +133,64 @@ const localFollowUrl = () => `${window.location.origin}${devPath('')}?view=follo
 // 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) }
@@ -168,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 />). */
@@ -218,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'), follow: t('follow.open') })
+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

package/src/live/roomTag.js

@@ -1,17 +1,11 @@
 // Finds the component tag a phone should see: the one whose `room` attribute
 // matches, with its content if it has any.
-const escape = text => text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+import { tagsIn, closingTagOf } from '../core/tags.js'
 
-// Code is not an activity: fenced blocks and `inline code` are blanked out
-// (keeping every other character where it was) before searching.
-const blank = text => text.replace(/[^\n]/g, ' ')
-export function maskCode(source = '') {
-  return source.replace(/^(```+|~~~+)[^\n]*\n[\s\S]*?^\1[ \t]*$/gm, blank).replace(/`[^`\n]+`/g, blank)
-}
-
-// Every activity in a source, in order: [{ tag, room }].
+// Every activity in a source, in order: [{ tag, room }]. Tags in code are
+// not activities (src/core/tags.js).
 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 tagsIn(source).filter(tag => !tag.closing && tag.attrs.room).map(tag => ({ tag: tag.name, room: tag.attrs.room }))
 }
 
 // The rooms on one slide, from its body and its named regions (the body is
@@ -30,9 +24,11 @@ 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))
-  if (!open) return null
-  if (open[0].endsWith('/>')) return open[0]
-  const close = source.indexOf(`</${open[1]}>`, open.index + open[0].length)
-  return close < 0 ? open[0] : source.slice(open.index, close + open[1].length + 3)
+  const text = String(source ?? '').replace(/\r\n?/g, '\n')
+  const tags = tagsIn(text)
+  const at = tags.findIndex(tag => !tag.closing && tag.attrs.room === room)
+  if (at < 0) return null
+  const open = tags[at]
+  const close = open.start == null ? null : closingTagOf(tags, at)
+  return close?.end == null ? open.raw : text.slice(open.start, close.end)
 }

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/citations.js

@@ -1,14 +1,23 @@
-import initial from 'virtual:bibliography'
+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()
 
-export const currentBibliography = () => bibliography
+// 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)
@@ -18,7 +27,8 @@ if (import.meta.hot) {
   import.meta.hot.accept('virtual:bibliography', next => {
     if (!next) return
     bibliography = next.default
-    for (const listener of listeners) listener(bibliography)
+    sample = next.sample ?? null
+    for (const listener of listeners) listener(currentBibliography())
   })
 }
 
@@ -33,7 +43,7 @@ function fallback(cluster, bib) {
 
 // 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 = bibliography) {
+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) })
@@ -54,7 +64,7 @@ export function renderCitations(markdown, bib = bibliography) {
 }
 
 // The full references of `ids`, for a slide's footer.
-export function citationsHtml(ids, bib = bibliography) {
+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/ink/bus.js

@@ -12,8 +12,8 @@
 //       a hovering pen moves, at most every ~50 ms
 //   { type: 'zoom', key, slideId, scale, x, y }  the part of the slide this
 //       window shows (stage zoom), at most every ~50 ms
-//   { type: 'reveal', key, room, shown }  a poll's right answer shown or hidden
-//   { type: 'results', key, room, shown }  a poll's results shown or hidden
+//   { type: 'controls', key, room, controls }  an activity closed or opened,
+//       its right answer or results shown or hidden (components/activity.jsx)
 //   { type: 'op', op }                  a change of the saved ink (applyOp)
 // Keys start with the sending window's id, so strokes never mix.
 import { changeInk, renameSlide } from './store.js'
@@ -50,10 +50,8 @@ export function createInkBus(stage, transports) {
       if (message.from <= known.points.length) known.points = [...known.points.slice(0, message.from), ...message.points]
       incoming.set(message.key, known)
       stage.liveStroke(message.key, known)
-    } else if (message.type === 'reveal') {
-      stage.dispatchEvent(new CustomEvent('pollreveal', { detail: { room: message.room, shown: !!message.shown } }))
-    } else if (message.type === 'results') {
-      stage.dispatchEvent(new CustomEvent('pollresults', { detail: { room: message.room, shown: !!message.shown } }))
+    } else if (message.type === 'controls') {
+      stage.dispatchEvent(new CustomEvent('pollcontrols', { detail: { room: message.room, controls: message.controls } }))
     } else if (message.type === 'zoom') {
       if (message.slideId && message.slideId === stage._inkSlideId()) stage.setZoom(message.scale > 1 ? message : null, 'remote', { announce: false })
     } else if (message.type === 'dot') {
@@ -102,13 +100,9 @@ export function createInkBus(stage, transports) {
     dotTimer ??= setTimeout(sendDot, DOT_MS)
   })
 
-  // A poll's right answer, shown here: the others show it too.
-  stage.addEventListener('pollreveal', ({ detail }) => {
-    if (detail?.local) send({ type: 'reveal', key: `${me}:reveal`, room: detail.room, shown: !!detail.shown })
-  })
-  // A poll's results shown or hidden here: the others follow.
-  stage.addEventListener('pollresults', ({ detail }) => {
-    if (detail?.local) send({ type: 'results', key: `${me}:results`, room: detail.room, shown: !!detail.shown })
+  // An activity's controls changed here: the others follow.
+  stage.addEventListener('pollcontrols', ({ detail }) => {
+    if (detail?.local) send({ type: 'controls', key: `${me}:controls`, room: detail.room, controls: detail.controls })
   })
 
   // The zoom: the latest view, not every step of a pinch.

package/src/runtime/main.jsx

@@ -13,7 +13,7 @@ import { S, PaletteSwatches } from './chrome.jsx'
 import { SlideErrorBoundary } from './SlideErrorBoundary.jsx'
 import { createEditorBridge } from './editorBridge.js'
 import { ReaderView } from './ReaderView.jsx'
-import { configureLive, announce, setLookSource, actAsPresenter, useSteering } from '../live/client.js'
+import { configureLive, announce, setLookSource, actAsPresenter, useSteering, setSavedResults } from '../live/client.js'
 import { registry } from './registry'
 import { followActiveRooms } from '../live/follow.js'
 import { createOrder } from './syncOrder.js'
@@ -24,7 +24,9 @@ import { startFollowing } from './follow.js'
 import { claimPairing } from '../live/pairing.js'
 import { strokePath } from '../core/ink.js'
 import { inkFileName } from 'virtual:deck-ink'
+import savedResults from 'virtual:deck-results'
 import { roomsIn, roomsOnSlide, findRoomTag, slideTitleFor } from '../live/roomTag.js'
+import { expandPollLists } from '../core/pollList.js'
 import './reader.css'
 import { SlideRenderer, manifests } from '../layouts/renderSlide'
 import { setCalloutLabels } from './markedSetup'
@@ -80,7 +82,7 @@ function activityOn(deck, slide) {
   const room = roomsOnSlide(slide)[0]
   if (!room) return { room: null, activity: null }
   const tag = findRoomTag(slide.content ?? '', room) ?? Object.values(slide.regions ?? {}).map(region => findRoomTag(region.content ?? '', room)).find(Boolean)
-  const element = tag && new DOMParser().parseFromString(tag, 'text/html').body.firstElementChild
+  const element = tag && new DOMParser().parseFromString(expandPollLists(tag), 'text/html').body.firstElementChild
   const component = element && registry[element.localName]
   if (typeof component?.phone !== 'function') return { room, activity: null }
   const props = Object.fromEntries([...element.attributes].map(attribute => [attribute.name, attribute.value]))
@@ -693,6 +695,7 @@ async function init() {
   setDeckLanguage(deckConfig)
   document.documentElement.lang = deckLanguage()
   configureLive(deckConfig)
+  setSavedResults(savedResults)
   const { slides } = parsed
   const presenterMode = view === 'presenter'
   const audienceMode  = view === 'audience'

package/src/runtime/markedSetup.js

@@ -5,6 +5,7 @@ import '../components/callout.css'
 import '../components/columns.css'
 import { scanDirectives, sourceLines, fenceState } from '../core/source.js'
 import { CALLOUT_LABELS, labelSetFor } from '../core/labels.js'
+import { expandPollLists } from '../core/pollList.js'
 
 function readDirective(src, name) {
   if (!/^:::\s*[\w-]+/.test(src)) return null
@@ -36,6 +37,8 @@ function escapeHtml(text) {
 }
 
 marked.use(markedKatex({ throwOnError: false, output: 'html' }))
+// A poll's options written as a list inside the tag (src/core/pollList.js).
+marked.use({ hooks: { preprocess: expandPollLists } })
 
 // marked.use() prepends via unshift, so last-registered = highest priority.
 // Register callout first (lowest priority) so columns and steps match before it.

package/src/runtime/registry.jsx

@@ -5,6 +5,7 @@ import Poll from '../components/Poll.jsx'
 import Question from '../components/Question.jsx'
 import WordCloud from '../components/WordCloud.jsx'
 import Scale from '../components/Scale.jsx'
+import Numeric from '../components/Numeric.jsx'
 import Bibliography from '../components/Bibliography.jsx'
 import deckComponents from 'virtual:deck-components'
 
@@ -23,6 +24,7 @@ export const registry = {
   question: Question,
   wordcloud: WordCloud,
   scale: Scale,
+  numeric: Numeric,
   bibliography: Bibliography,
   ...deckComponents,
 }

package/assets/extensions/palettes/neon/extension.toml

@@ -1,30 +0,0 @@
-schema = 1
-kind = "palette"
-id = "neon"
-title = "Neon"
-description = "Violet and magenta; loud, for workshops."
-version = "1.0.0"
-author = "Tilman Schieber"
-license = "MIT"
-
-[light]
-"--bg" = "#ffffff"
-"--surface" = "#f4f0fb"
-"--ink" = "#14072b"
-"--ink-soft" = "#3a2d55"
-"--muted" = "#6a6084"
-"--rule" = "#e4ddf3"
-"--accent" = "#9b00d9"
-"--accent-2" = "#d6106f"
-"--on-accent" = "#ffffff"
-
-[dark]
-"--bg" = "#0d0d0d"
-"--surface" = "#1a1a1a"
-"--ink" = "#f0f0f0"
-"--ink-soft" = "#cccccc"
-"--muted" = "#8a8a8a"
-"--rule" = "#2a2a2a"
-"--accent" = "#cc17ff"
-"--accent-2" = "#ff1791"
-"--on-accent" = "#0d0d0d"