mdeck 3.1.0 → 3.3.0

package/src/core/labels.js

@@ -35,6 +35,8 @@ export const LABELS = {
     'poll.reset': 'Reset',
     'poll.showAnswer': 'Show the right answer',
     'poll.hideAnswer': 'Hide the right answer',
+    'poll.showResults': 'Show the results',
+    'poll.hideResults': 'Hide the results',
     'poll.live': 'Live',
     'poll.offline': 'Not connected to the server',
     'poll.unreachable': 'Phones cannot reach this computer. Start with {command}, or set {setting}.',
@@ -46,6 +48,12 @@ export const LABELS = {
     'respond.send': 'Send',
     'respond.sent': 'Sent. Thank you!',
     'join.scan': 'Scan to join',
+    'follow.scan': 'Scan to follow the slides',
+    'follow.open': 'Follow the slides',
+    'follow.live': 'Live',
+    'follow.back': 'Back to live',
+    'follow.waiting': 'The talk has not started yet.',
+    'follow.tryHere': 'Try following here',
     'join.static': 'During the talk, phones joined here to answer.',
     'question.empty': 'Answers appear here.',
     'scale.average': 'Average {n}',
@@ -80,6 +88,8 @@ export const LABELS = {
     'poll.reset': 'Zurücksetzen',
     'poll.showAnswer': 'Richtige Antwort zeigen',
     'poll.hideAnswer': 'Richtige Antwort ausblenden',
+    'poll.showResults': 'Ergebnis zeigen',
+    'poll.hideResults': 'Ergebnis ausblenden',
     'poll.live': 'Live',
     'poll.offline': 'Keine Verbindung zum Server',
     'poll.unreachable': 'Handys erreichen diesen Computer nicht. Mit {command} starten oder {setting} setzen.',
@@ -91,6 +101,12 @@ export const LABELS = {
     'respond.send': 'Senden',
     'respond.sent': 'Gesendet. Danke!',
     'join.scan': 'Scannen und mitmachen',
+    'follow.scan': 'Scannen und Folien mitverfolgen',
+    'follow.open': 'Folien mitverfolgen',
+    'follow.live': 'Live',
+    'follow.back': 'Zur aktuellen Folie',
+    '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.',
     'question.empty': 'Hier erscheinen die Antworten.',
     'scale.average': 'Durchschnitt {n}',

package/src/core/parseSlides.js

@@ -2,7 +2,7 @@ import yaml from 'js-yaml'
 import { sourceLines, fenceState, scanDirectives, diagnostic } from './source.js'
 export { sourceLines, fenceState } from './source.js'
 
-export const DECK_KEYS = new Set('theme palette appearance params meta width height show lang labels callouts reader components server session'.split(' '))
+export const DECK_KEYS = new Set('theme palette appearance params meta width height show lang labels callouts reader components server session bibliography csl nocite'.split(' '))
 export const SLIDE_KEYS = new Set('layout id title section number part description label image alt overlay eyebrow attribution props'.split(' '))
 
 // Names from before 2.0. They are still recognised, so that an old deck gets a

package/src/core/urls.js

@@ -1,4 +1,4 @@
-const VIEWS = new Set(['deck', 'reader', 'presenter', 'audience'])
+const VIEWS = new Set(['deck', 'reader', 'presenter', 'audience', 'follow'])
 const OLD_VIEWS = { d: 'deck', s: 'reader', p: 'presenter', a: 'audience', share: 'reader' }
 
 // Old URLs must be corrected explicitly: guessing a view can expose notes or
@@ -21,7 +21,7 @@ export function validatePageUrl(url) {
   for (const secret of ['serverkey', 'livekey', 'pair']) corrected.searchParams.delete(secret)
   if (replacements.length) return { message: `This URL uses settings from before API 2.0: ${replacements.join(', ')}. Open the updated address below. If you supplied a server key, add it again as ?serverkey=… on your own computer.`, corrected: corrected.href }
   const view = url.searchParams.get('view')
-  if (view !== null && !VIEWS.has(view)) return { message: `Unknown view "${view}". Choose deck, reader, presenter or audience.` }
+  if (view !== null && !VIEWS.has(view)) return { message: `Unknown view "${view}". Choose deck, reader, presenter, audience or follow.` }
   return null
 }
 

package/src/core/validateDeck.js

@@ -38,14 +38,20 @@ export function validateDeck(deck, { layouts = null, themes = null, palettes = n
       else if (typeof value !== 'string') add('invalid-config', `labels.${key} must be text`, deck.configSource?.start)
     }
   }
+  // References: bibliography.js reads the files and reports what it cannot use.
+  if (config.bibliography != null && ![config.bibliography].flat().every(file => typeof file === 'string' && file.trim())) add('invalid-config', 'bibliography must be a file name such as refs.bib, or a list of them', deck.configSource?.start)
+  if (config.csl != null && (typeof config.csl !== 'string' || !config.csl.trim())) add('invalid-config', 'csl must be a style name (apa, vancouver, harvard1) or a .csl file', deck.configSource?.start)
+  if (config.nocite != null && (!Array.isArray(config.nocite) || config.nocite.some(key => typeof key !== 'string'))) add('invalid-config', "nocite must be a list of reference keys, or ['*'] for all", deck.configSource?.start)
   if (config.server != null && (typeof config.server !== 'string' || !/^https?:\/\//.test(config.server))) add('invalid-config', 'server must be an http:// or https:// address', deck.configSource?.start)
   if (isPlainObject(config.session)) {
     for (const key of Object.keys(config.session)) if (!['id', 'code'].includes(key)) add('invalid-config', `session.${key} is not a setting; available: id, code`, deck.configSource?.start, 'warning')
     if (config.session.code != null && !/^\d{4,8}$/.test(String(config.session.code))) add('invalid-config', 'session.code must be 4 to 8 digits', deck.configSource?.start)
   }
   const enums = { organization: ['title', 'all', 'none'], author: ['title', 'all', 'none'], numbers: ['slides', 'all', 'none'], sections: ['all', 'none'] }
+  const switches = ['citations']
   if (isPlainObject(config.show)) {
-    for (const key of Object.keys(config.show)) if (!Object.hasOwn(enums, key)) add('invalid-config', `show.${key} is not a setting; available: ${Object.keys(enums).join(', ')}`, deck.configSource?.start, 'warning')
+    for (const key of Object.keys(config.show)) if (!Object.hasOwn(enums, key) && !switches.includes(key)) add('invalid-config', `show.${key} is not a setting; available: ${[...Object.keys(enums), ...switches].join(', ')}`, deck.configSource?.start, 'warning')
+    for (const key of switches) if (config.show[key] != null && typeof config.show[key] !== 'boolean') add('invalid-config', `show.${key} must be true or false`, deck.configSource?.start)
     for (const [key, values] of Object.entries(enums)) {
       if (config.show[key] != null && !values.includes(config.show[key])) add('invalid-config', `show.${key} must be one of: ${values.join(', ')}`, deck.configSource?.start)
     }

package/src/layouts/layoutApi.jsx

@@ -5,6 +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'
 
 // ─── Content extraction ────────────────────────────────────────────────────
 
@@ -170,6 +171,12 @@ function SlideFootnotes({ html }) {
   return <div class="slide-footnotes" dangerouslySetInnerHTML={{ __html: html }} />
 }
 
+// The full references of the works this slide cites (show.citations: false hides them).
+function SlideCitations({ html }) {
+  if (!html) return null
+  return <div class="slide-citations" dangerouslySetInnerHTML={{ __html: html }} />
+}
+
 function slideNum(index) {
   return String(index + 1).padStart(2, '0')
 }
@@ -181,10 +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 { processed, footnotesHtml } = preprocessFootnotes(entries.map(([, r]) => r.content).join(separator))
+  const cited = renderCitations(entries.map(([, r]) => r.content).join(separator))
+  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] }]))
-  return { ...slide, regions, content: regions.body?.content ?? '', footnotesHtml }
+  const citationsHtml = slide.deckConfig?.show?.citations === false ? '' : referencesOf(cited.ids)
+  return { ...slide, regions, content: regions.body?.content ?? '', footnotesHtml, citationsHtml }
 }
 
 export function MarkdownRegion({ region, content, class: className, ...attributes }) {
@@ -194,7 +203,7 @@ export function MarkdownRegion({ region, content, class: className, ...attribute
 }
 
 // Layouts supply body content; every layout receives the same outer frame.
-export function SlideFrame({ meta = {}, props = {}, deckConfig = {}, index = 0, id, manifest, footnotesHtml, children }) {
+export function SlideFrame({ meta = {}, props = {}, deckConfig = {}, index = 0, id, manifest, footnotesHtml, citationsHtml, children }) {
   const layout = manifest.id === 'generic' ? meta.layout : manifest.id
   const frame = manifest.frame ?? 'standard'
   const title = frame === 'title'
@@ -207,6 +216,7 @@ export function SlideFrame({ meta = {}, props = {}, deckConfig = {}, index = 0,
       isTitle={title} right={frame === 'chapter' ? meta.part ?? '' : meta.section ?? ''} />}
     {children}
     <SlideFootnotes html={footnotesHtml} />
+    <SlideCitations html={citationsHtml} />
     {frame !== 'none' && <SlideFooter deckConfig={deckConfig} right={slideNum(index)} isTitle={title} />}
     <InkLayer slideId={id} />
   </section>

package/src/live/answer/answer.css

@@ -32,3 +32,4 @@ 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; }

package/src/live/answer/answer.js

@@ -109,6 +109,8 @@
         ? el('main', { class: 'answer' }, activity.question && el('h1', {}, 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,
     )
   }
 

package/src/live/client.js

@@ -114,6 +114,20 @@ 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 })
@@ -164,6 +178,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 +218,7 @@ 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') })
 
 // 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 +257,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/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,60 @@
+import initial from 'virtual:bibliography'
+import { scanCitations } from '../core/citations.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
+const listeners = new Set()
+
+export const currentBibliography = () => bibliography
+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
+    for (const listener of listeners) listener(bibliography)
+  })
+}
+
+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 = bibliography) {
+  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 = bibliography) {
+  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 }
 }

package/src/runtime/follow.js

@@ -0,0 +1,89 @@
+// The follow view (?view=follow): a phone or laptop in the room shows the
+// presenter's slide and ink, read from the stage room, and sends nothing.
+// A follower may page back on their own and return with "Back to live";
+// slides and steps the presenter has not shown yet stay hidden.
+
+/** Where a follower may be: no further than the furthest the presenter has shown. */
+export function clampToShown({ index, step }, furthest) {
+  if (!furthest) return { index: 0, step: -1 }
+  if (index > furthest.index) return { index: furthest.index, step: furthest.step }
+  if (index === furthest.index && step > furthest.step) return { index, step: furthest.step }
+  return { index, step }
+}
+
+// The furthest of two positions, slide first, then step.
+const further = (a, b) => !a ? b : (b.index > a.index || (b.index === a.index && b.step > a.step)) ? b : a
+
+/**
+ * The follower's state: the presenter's position, the furthest shown, and
+ * whether this device is with the presenter (`live`).
+ *   presenter(position)  the presenter moved: returns where to go, or null
+ *   moved(position)      the follower moved: returns where to go back to if
+ *                        they went past what was shown, else null
+ *   backToLive()         returns the presenter's position
+ */
+export function createFollower() {
+  const state = { presenter: null, furthest: null, live: true }
+  const same = (a, b) => !!a && !!b && a.index === b.index && a.step === b.step
+  return {
+    state,
+    presenter(position) {
+      state.presenter = position
+      state.furthest = further(state.furthest, position)
+      return state.live ? position : null
+    },
+    moved(position) {
+      const allowed = clampToShown(position, state.furthest)
+      state.live = state.presenter ? same(allowed, state.presenter) : true
+      return same(allowed, position) ? null : allowed
+    },
+    backToLive() {
+      state.live = true
+      return state.presenter
+    },
+  }
+}
+
+const BAR_CSS = `
+.follow-bar { position: fixed; left: 50%; top: max(14px, env(safe-area-inset-top)); transform: translateX(-50%); z-index: 2147483001;
+  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid #3a3a3a; border-radius: 999px;
+  background: rgba(22, 22, 22, 0.92); color: #e6e6e6; font: 14px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif; white-space: nowrap; }
+button.follow-bar { cursor: pointer; }
+.follow-dot { width: 8px; height: 8px; border-radius: 50%; background: #e11d48; box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.25); }
+`
+
+/**
+ * Follow the presenter on `stage`. `onStagePosition` hears the positions the
+ * stage room carries; it must be called before the room is listened to.
+ * `words` are the labels: live, back, waiting.
+ */
+export function startFollowing(stage, { onStagePosition, words }) {
+  const follower = createFollower()
+  const style = document.createElement('style')
+  style.textContent = BAR_CSS
+  document.head.appendChild(style)
+  let bar = null
+
+  function update() {
+    const { presenter, live } = follower.state
+    const next = !presenter ? document.createElement('div') : live ? document.createElement('div') : document.createElement('button')
+    next.className = 'follow-bar'
+    if (!presenter) next.textContent = words.waiting
+    else if (live) { const dot = document.createElement('span'); dot.className = 'follow-dot'; next.append(dot, words.live) }
+    else { next.textContent = words.back; next.addEventListener('click', () => { go(follower.backToLive()); update() }) }
+    bar ? bar.replaceWith(next) : document.body.appendChild(next)
+    bar = next
+  }
+  // Positions set from here arrive back as 'sync' and are not the follower's own.
+  const go = position => { if (position) stage.setState({ index: position.index, step: position.step }) }
+
+  onStagePosition(position => { go(follower.presenter(position)); update() })
+  stage.addEventListener('statechange', event => {
+    if (['init', 'sync'].includes(event.detail.reason)) return
+    go(follower.moved({ index: event.detail.index, step: event.detail.step }))
+    update()
+  })
+  // Until the presenter's position arrives, the title slide.
+  go(follower.moved(stage.state))
+  update()
+}

package/src/runtime/ink/bus.js

@@ -13,6 +13,7 @@
 //   { 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: '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'
@@ -51,6 +52,8 @@ export function createInkBus(stage, transports) {
       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 === 'zoom') {
       if (message.slideId && message.slideId === stage._inkSlideId()) stage.setZoom(message.scale > 1 ? message : null, 'remote', { announce: false })
     } else if (message.type === 'dot') {
@@ -103,6 +106,10 @@ export function createInkBus(stage, transports) {
   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 })
+  })
 
   // The zoom: the latest view, not every step of a pinch.
   let zoom = null, zoomTimer = null

package/src/runtime/ink/room.js

@@ -77,6 +77,14 @@ export function followStageRoom(stage) {
   })
 }
 
+/** Hear the position other devices announce (the follow view decides what to do with it). */
+export function onStagePosition(listener) {
+  stateListeners.add(state => {
+    if (!state || state.screen === stageRoom().screen || !Number.isInteger(state.index)) return
+    listener({ index: state.index, step: state.step ?? -1, slideId: state.slideId })
+  })
+}
+
 /** Publish navigation made here; received positions never echo back. */
 export function announceStagePosition(stage) {
   const room = stageRoom()

package/src/runtime/ink/select.js

@@ -7,7 +7,7 @@
 // that the pen moves one at a time. Changes show at once in this window and
 // become one change (undo puts the strokes back) when the pen lifts.
 import { slideStrokes, changeInk, onInkChange } from './store.js'
-import { strokesInLasso, strokesBox, translateStroke, hitTest } from '../../core/ink.js'
+import { strokesInLasso, strokesBox, translateStroke, hitTest, snapAngle } from '../../core/ink.js'
 
 const PAD = 14        // design pixels around a selection
 const TAP = 10        // a lasso smaller than this is a tap
@@ -119,6 +119,8 @@ export function createInkSelection(stage, controller) {
 }
 
 // The stroke with one end point moved to `point` (its pressure kept).
-function moveEnd(stroke, index, [x, y]) {
+// The other end stays put, and the moved one snaps to steps of 15° around it.
+function moveEnd(stroke, index, point) {
+  const [x, y] = snapAngle(stroke.points[1 - index], point)
   return { ...stroke, points: stroke.points.map((p, i) => i === index ? [x, y, p[2]] : p) }
 }

package/src/runtime/main.jsx

@@ -2,6 +2,7 @@ import { validatePageUrl } from '../core/urls.js'
 import { h, render } from 'preact'
 import { useEffect, useMemo, useRef, useState } from 'preact/hooks'
 import { marked } from 'marked'
+import { renderCitations, onBibliography } from './citations.js'
 import deckFileContent from 'virtual:slides'
 import { parseSlides } from '../core/parseSlides'
 import { validateDeck } from '../core/validateDeck'
@@ -18,7 +19,8 @@ import { followActiveRooms } from '../live/follow.js'
 import { createOrder } from './syncOrder.js'
 import { fitDeck } from './fit.js'
 import { attachInk, watchInk } from './ink/attach.js'
-import { roomTransport, followStageRoom, announceStagePosition } from './ink/room.js'
+import { roomTransport, followStageRoom, announceStagePosition, onStagePosition } from './ink/room.js'
+import { startFollowing } from './follow.js'
 import { claimPairing } from '../live/pairing.js'
 import { strokePath } from '../core/ink.js'
 import { inkFileName } from 'virtual:deck-ink'
@@ -33,7 +35,7 @@ import './deck-stage.js'
 
 const PresenterIcon = ({ name, size = 18 }) => <Icon name={name} size={size} style={{ display: 'block' }} />
 
-// One address parameter selects the view: ?view=deck, reader, presenter or audience.
+// One address parameter selects the view: ?view=deck, reader, presenter, audience or follow.
 export function requestedView(url, fallback = 'deck') {
   return url.searchParams.get('view') ?? fallback
 }
@@ -486,7 +488,7 @@ function PresenterView({ deckConfig, slides }) {
           }}
             dangerouslySetInnerHTML={{
               __html: note
-                ? marked.parse(note)
+                ? marked.parse(renderCitations(note).markdown)
                 : '<p>No notes — add a <code>:::notes</code> block to the slide.</p>',
             }}
           />
@@ -694,11 +696,13 @@ async function init() {
   const { slides } = parsed
   const presenterMode = view === 'presenter'
   const audienceMode  = view === 'audience'
+  // A phone or laptop in the room following the talk: shows, never sends.
+  const followMode = view === 'follow'
   const embedded = url.searchParams.get('embedded') === '1'
   const readerMode = view === 'reader' && !editorMode && !embedded
   // The deck window and the presenter's main frame draw; the audience window
   // and the next-slide preview show what is drawn.
-  const drawHere = !audienceMode && (!embedded || url.searchParams.get('draw') === '1')
+  const drawHere = !audienceMode && !followMode && (!embedded || url.searchParams.get('draw') === '1')
   const inkStorageKey = `mdeck-ink:${inkFileName}:${location.pathname}`
 
   injectSpeakerNotes(slides)
@@ -748,6 +752,8 @@ async function init() {
       if (event.source !== window.parent || event.origin !== window.location.origin) return
       if (!bridge.handleMessage(event.data)) handleDeckControl(event.data?.deckControl)
     })
+    // Saving the deck or its reference file reformats the citations.
+    onBibliography(() => bridge.refresh())
     await bridge.render(slidesContent)
     post({ deckEditorReady: true })
     return
@@ -762,7 +768,7 @@ async function init() {
 
   await loadTheme(deckConfig)
   mountDeck({ deck: parsed, deckConfig })
-  if (!embedded && !audienceMode) {
+  if (!embedded && !audienceMode && !followMode) {
     // A quiet way into the reader view for anyone who opened the file directly.
     const entry = document.createElement('a')
     entry.className = 'reader-entry'
@@ -801,14 +807,20 @@ async function init() {
       }
       window.addEventListener('pointerdown', onPen, true)
     }
+  } else if (inkStage && followMode) {
+    // The presenter's slide and ink, read from the stage room; counted as a phone.
+    inkStage.setAttribute('data-follower', '')
+    startFollowing(inkStage, { onStagePosition, words: { live: t('follow.live'), back: t('follow.back'), waiting: t('follow.waiting') } })
+    watchInk(inkStage, { storageKey: inkStorageKey, transports: [roomTransport({ receive: true, view: 'phone' })] })
   } else if (inkStage && audienceMode) {
     // The audience window shows the presenter's zoom and a poll's answer, without their controls.
     inkStage.setAttribute('data-follower', '')
     watchInk(inkStage, { storageKey: inkStorageKey, transports: [roomTransport({ receive: true, view: 'audience' })] })
   } else if (inkStage) watchInk(inkStage, { storageKey: inkStorageKey })
 
-  // A full deck or audience window is a presenter's screen; previews are embedded.
-  if (!embedded) {
+  // A full deck or audience window is a presenter's screen; previews are
+  // embedded, and a follower only watches.
+  if (!embedded && !followMode) {
     const stage = document.querySelector('deck-stage')
     stage?.addEventListener('slidechange', event => announceSlide(parsed, event.detail.index, { initial: event.detail.reason === 'init' }))
     if (stage) announceSlide(parsed, stage.index, { initial: true })

package/src/runtime/markedSetup.js

@@ -143,5 +143,12 @@ marked.use({
         .replace(/>/g, '>')
       return `<codeblock lang="${lang}"${attrs ? ' ' + attrs : ''}>${encoded}</codeblock>`
     },
+    // A paragraph of nothing but pictures (one, or several side by side) is
+    // marked, so themes can fit it into the slide or set it as a row; a
+    // sentence with an icon in it stays a sentence.
+    paragraph({ tokens }) {
+      const pictures = tokens.some(t => t.type === 'image') && tokens.every(t => t.type === 'image' || t.type === 'br' || (t.type === 'text' && !t.raw.trim()))
+      return `<p${pictures ? ' class="pictures"' : ''}>${this.parser.parseInline(tokens)}</p>\n`
+    },
   },
 })

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 Bibliography from '../components/Bibliography.jsx'
 import deckComponents from 'virtual:deck-components'
 
 // Maps lowercase HTML tag names to Preact components.
@@ -22,5 +23,6 @@ export const registry = {
   question: Question,
   wordcloud: WordCloud,
   scale: Scale,
+  bibliography: Bibliography,
   ...deckComponents,
 }