mdeck 3.11.0 → 3.12.1

package/src/core/validateDeck.js

@@ -6,6 +6,7 @@ import { resolveLayoutProps, propertyErrors } from '../layouts/layoutProps.js'
 import { movedHint } from '../extensions/moved.js'
 import { paramValue } from '../extensions/params.js'
 import { parseTime } from './timing.js'
+import { reactionsProblem } from './reactions.js'
 
 // Hotspots (runtime/hotspots.js): the deck's setting and a slide's own.
 const HOTSPOT_SETTINGS = ['auto', 'marked', 'off', true, false]
@@ -56,6 +57,7 @@ export function validateDeck(deck, { layouts = null, themes = null, palettes = n
   }
   if (config.hotspots != null && !HOTSPOT_SETTINGS.includes(config.hotspots)) add('invalid-config', 'hotspots must be auto, marked, off, true or false', deck.configSource?.start)
   if (config.time != null && parseTime(config.time) == null) add('invalid-config', TIME_HINT(config.time), deck.configSource?.start)
+  if (reactionsProblem(config.reactions)) add('invalid-config', reactionsProblem(config.reactions), 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)) {
@@ -102,6 +104,7 @@ export function validateDeck(deck, { layouts = null, themes = null, palettes = n
     if (slide.meta.hotspots != null && !HOTSPOT_SETTINGS.includes(slide.meta.hotspots)) add('invalid-metadata', 'hotspots must be auto, marked, off, true or false', offset)
     if (slide.meta.time != null && parseTime(slide.meta.time) == null) add('invalid-metadata', TIME_HINT(slide.meta.time), offset)
     for (const node of directivesIn(deck.source.slice(slide.source.start, slide.source.end))) {
+      if (node.name === 'include' && !slide.include) add('misplaced-include', ':::include stands alone on its slide, with no settings or other content: :::include ./part.md, or :::include ./part.md slides=2-5', slide.source.start + node.start, 'warning')
       if (DIRECTIVES.includes(node.name) || calloutTypes.includes(node.name.toLowerCase())) continue
       const near = closest(node.name.toLowerCase(), [...DIRECTIVES, ...calloutTypes])
       add('unknown-callout', `Unknown block "${node.name}"${near ? `; did you mean "${near}"?` : ''} It shows as a plain callout. Known: ${CALLOUT_TYPES.join(', ')}; name your own under callouts: in the settings`, slide.source.start + node.start, 'warning')
@@ -134,7 +137,7 @@ export function validateDeck(deck, { layouts = null, themes = null, palettes = n
 }
 
 // The `:::` blocks mdeck reads itself; any other name is a callout type.
-const DIRECTIVES = ['meta', 'notes', 'slot', 'steps', 'columns']
+const DIRECTIVES = ['meta', 'notes', 'slot', 'steps', 'columns', 'include']
 
 function directivesIn(source) {
   const all = []
@@ -159,6 +162,7 @@ function closest(name, names) {
   return best && best[1] <= 2 ? best[0] : null
 }
 
+// A diagnostic with a `file` of its own (one in an included deck) names it.
 export function formatDiagnostics(diagnostics, filename = 'slides.md') {
-  return diagnostics.map(d => `${filename}:${d.line}:${d.column ?? 1}: ${d.severity} [${d.code}] ${d.message}`).join('\n')
+  return diagnostics.map(d => `${d.file ?? filename}:${d.line}:${d.column ?? 1}: ${d.severity} [${d.code}] ${d.message}`).join('\n')
 }

package/src/home/Home.jsx

@@ -1,10 +1,9 @@
 import { h } from 'preact'
 import { useEffect, useRef, useState } from 'preact/hooks'
 import mark from '../../assets/logo/mark.svg'
-import QrCode from '../components/QrCode.jsx'
 import { Icon } from '../components/Icon.jsx'
 import { ConnectedViews } from '../components/ConnectedViews.jsx'
-import { devicesText, phonesText } from '../live/presence.js'
+import { devicesText } from '../live/presence.js'
 import { devPath } from '../core/devPath.js'
 
 // Where the dev server serves from: / normally, /t/<id>/ with `mdeck run --server`.
@@ -118,8 +117,6 @@ function Preview({ info }) {
       <button class="home-btn home-btn--small" onClick={() => control('prev')} aria-label="Previous"><HomeIcon name="prev" size={14} /></button>
       <button class="home-btn home-btn--small" onClick={() => control('next')} aria-label="Next"><HomeIcon name="next" size={14} /></button>
       <span class="home-preview-count">{index + 1} / {info.slides}</span>
-      <span class="home-spacer" />
-      <a class="home-btn home-btn--small" href={audienceUrl} target="_blank" rel="noopener">Open audience window <HomeIcon name="external" size={13} /></a>
     </div>
   </section>
 }
@@ -171,102 +168,45 @@ function Diagnostics({ diagnostics, name }) {
   </ul>
 }
 
-function CopyButton({ text, label = 'Copy' }) {
-  const [copied, setCopied] = useState(false)
-  const copy = async () => {
-    try { await navigator.clipboard.writeText(text); setCopied(true); setTimeout(() => setCopied(false), 1400) } catch {}
-  }
-  return <button class="home-btn home-btn--small" onClick={copy}><HomeIcon name={copied ? 'check' : 'copy'} size={14} />{copied ? 'Copied' : label}</button>
-}
 
 // One session pairs the presenter view with the audience window, so both
 // links on this page drive each other.
 const SESSION = typeof crypto !== 'undefined' && crypto.randomUUID ? crypto.randomUUID() : String(Math.random()).slice(2)
 
-// For decks with a `server` setting: the server's health, the viewers' link
-// and the key (MDECK_SERVER_KEY) that lets a browser steer phones and reset
-// polls.
-function LivePolls({ live, presence, onRecheck }) {
-  const presenterUrl = `${BASE}?view=presenter&session=${SESSION}${live.key ? `&serverkey=${encodeURIComponent(live.key)}` : ''}`
-  const keyState = !live.key ? null : live.keyAccepted ? ['is-ok', 'Accepted by the server'] : live.reachable ? ['is-bad', 'Not accepted by the server'] : ['is-idle', 'Not checked']
-  return <section class="home-section">
+// The answers kept in the talk: each question with how it came out, and
+// the files to save them as (the same as `mdeck results`).
+function Answers({ results, file, onRefresh }) {
+  const href = format => `${devPath('__mdeck/home/results')}?format=${format}`
+  return <section class="home-section home-section--wide home-answers">
     <div class="home-section-head">
-      <h2>Polls</h2>
-      <button class="home-btn home-btn--small" onClick={onRecheck}>Check again</button>
+      <h2>Answers from the talk</h2>
+      <button class="home-btn home-btn--small" onClick={onRefresh}>Refresh</button>
     </div>
-    <dl class="home-live">
-      <div>
-        <dt>Server</dt>
-        <dd>
-          {live.server
-            ? <><code>{live.server}</code><span class={`home-pill ${live.reachable ? 'is-ok' : 'is-bad'}`}>{live.reachable ? `Reachable · ${live.ms} ms` : `Not reachable · ${live.error}`}</span></>
-            : <span>Built into this dev server</span>}
-        </dd>
-      </div>
-      <div>
-        <dt>Join link for phones</dt>
-        <dd>
-          {live.joinUrl
-            ? <><a href={live.joinUrl} target="_blank" rel="noopener"><code>{live.joinUrl}</code></a> <CopyButton text={live.joinUrl} /></>
-            : <>
-              <p class="home-note">Phones cannot reach this computer. Start with <code>--network</code>, or set <code>server</code> in the deck.</p>
-              {live.localJoinUrl && <p><a href={live.localJoinUrl} target="_blank" rel="noopener">Try the answer page here</a> <span>in another browser tab or window.</span></p>}
-            </>}
-          <p>Session code <code class="home-code">{live.code}</code>, the same for every poll in this deck.</p>
-          {presence && <p>{presence.phones ? `${phonesText(presence.phones)} connected now.` : 'No phones connected yet.'}</p>}
-        </dd>
-      </div>
-      {live.server && <div>
-        <dt>Server key</dt>
-        <dd>
-          {live.key
-            ? <>
-              <code class="home-code">{live.key}</code> <CopyButton text={live.key} />
-              <span class={`home-pill ${keyState[0]}`}>{keyState[1]}</span>
-              <p>The presenter view and audience window buttons above carry it. Or open <a href={presenterUrl} target="_blank" rel="noopener">the presenter view with the key</a>.</p>
-            </>
-            : <p>Start <code>mdeck run</code> with <code>MDECK_SERVER_KEY</code> set to the server's key to see it here.</p>}
-        </dd>
-      </div>}
-    </dl>
-  </section>
-}
-
-// Presenting from an iPad: a one-time QR code opens the presenter view there,
-// paired with this server so it may save ink and steer the projector, which
-// shows the audience window on this computer.
-function Tablet({ pairing, relay, presence, onChange, onError }) {
-  const away = (presence?.views ?? []).filter(entry => entry.view === 'presenter' && entry.device !== 'computer')
-  const [url, setUrl] = useState(null)
-  const offer = () => api('/action', { action: 'pair' }).then(result => { setUrl(result.url); onChange() }).catch(error => onError(error.message))
-  const unpair = () => api('/action', { action: 'unpair' }).then(() => { setUrl(null); onChange() }).catch(error => onError(error.message))
-  return <section class="home-section home-tablet">
-    <div class="home-section-head">
-      <h2>Present from an iPad</h2>
-      {pairing.devices > 0 && <button class="home-btn home-btn--small" onClick={unpair}>Unpair {pairing.devices === 1 ? 'the device' : `${pairing.devices} devices`}</button>}
-    </div>
-    {relay && <p class={`home-note home-relay home-relay--${relay.state}`}>{relay.state === 'up' ? 'Connected to your server: the iPad can reach this computer from any network.' : relay.state === 'refused' ? `Connecting to the server failed: ${relay.reason}` : relay.state === 'down' ? 'Lost the connection to the server; reconnecting…' : 'Connecting to your server…'}</p>}
-    {away.length > 0 && <p class="home-ok"><HomeIcon name="check" /> Presenter view open on {devicesText(away)}.</p>}
-    {!pairing.available
-      ? <p class="home-note">Start <code>mdeck run</code> with <code>--network</code>, so an iPad in the same network can reach it, or with <code>--server</code> to reach it through your server.</p>
-      : url
-        ? <div class="home-pair">
-          <QrCode url={url} size="180" />
-          <div>
-            <p>Scan this with the iPad's camera. It opens the presenter view there, where you draw and go through the slides.</p>
-            <p>Show the <a href={`${BASE}?view=audience&session=${SESSION}`} target="_blank" rel="noopener">audience window</a> on the projector from this computer: it follows the iPad.</p>
-            <p class="home-note">The code works once, for ten minutes. {pairing.devices > 0 ? `${pairing.devices} paired so far.` : ''}</p>
+    <ul class="home-outputs">
+      {results.map(question => {
+        const { counts = [], voted, phones, average } = question.summary
+        const top = counts.slice(0, 3).map(row => `${row.answer} ${row.count}`).join(' · ')
+        return <li class="home-output" key={question.room}>
+          <div class="home-output-body">
+            <strong>{question.slide ? `Slide ${question.slide}: ` : ''}{question.question || question.room}</strong>
+            <span>{phones === 1 ? '1 phone' : `${phones} phones`}{voted != null && voted !== phones ? `, ${voted} counted` : ''}{question.closed ? ', closed' : ''}{average != null ? ` · average ${average}` : ''}{top ? ` · ${top}` : ''}</span>
           </div>
-        </div>
-        : <>
-          <p>The iPad opens the same presenter view as this computer, laid out for its screen: you draw and go through the slides there while this computer drives the projector. Drawings are saved in the drawings file beside the deck.</p>
-          <p class="home-note">Pairing is what lets the iPad save drawings and steer the audience window here. Other devices in the network can open the presenter view too, but only watch.</p>
-          <button class="home-btn" onClick={offer}>Show pairing code</button>
-          {pairing.devices > 0 && <p class="home-note">{pairing.devices === 1 ? 'One device' : `${pairing.devices} devices`} paired.</p>}
-        </>}
+        </li>
+      })}
+    </ul>
+    <div class="home-answer-files">
+      <a class="home-btn home-btn--primary" href={href('csv')} download><HomeIcon name="download" size={15} />Answers (CSV)</a>
+      <a class="home-btn" href={href('summary')} download><HomeIcon name="download" size={15} />Summary (CSV)</a>
+      <a class="home-btn" href={href('json')} download><HomeIcon name="download" size={15} />Everything (JSON)</a>
+    </div>
+    <p class="home-hint">Kept in <code>{file}</code> beside the deck while <code>mdeck run</code> runs; phones are numbered per question, never named.</p>
   </section>
 }
 
+// For decks with a `server` setting: the server's health, the viewers' link
+// and the key (MDECK_SERVER_KEY) that lets a browser steer phones and reset
+// polls.
+
 export function Home() {
   const [info, setInfo] = useState(null)
   const [error, setError] = useState('')
@@ -313,6 +253,11 @@ export function Home() {
         <p class="home-meta">{meta.join(' · ')}</p>
         <p class="home-file"><code>{info.file}</code> <button class="home-link" onClick={() => api('/action', { action: 'reveal', output: 'deck' }).catch(e => setError(e.message))}>Show</button></p>
       </div>
+      {/* mdeck run --server: whether the connection to the server is up. */}
+      {info.relay && <span class={`home-health home-relay${info.relay.state === 'up' ? '' : info.relay.state === 'refused' ? ' is-bad' : ' is-warn'}`} title={info.relay.reason ?? info.relay.url}>
+        <HomeIcon name={info.relay.state === 'up' ? 'check' : 'alert'} />
+        {info.relay.state === 'up' ? 'Connected to your server' : info.relay.state === 'refused' ? 'Server refused the connection' : info.relay.state === 'down' ? 'Reconnecting to your server…' : 'Connecting to your server…'}
+      </span>}
       <a class={`home-health${errors ? ' is-bad' : warnings ? ' is-warn' : ''}`} href="#check">
         <HomeIcon name={errors || warnings ? 'alert' : 'check'} />
         {errors ? `${errors} error${errors === 1 ? '' : 's'}` : warnings ? `${warnings} warning${warnings === 1 ? '' : 's'}` : 'All good'}
@@ -330,14 +275,14 @@ export function Home() {
           <ConnectedViews presence={presence} phones={!!info.live} />
         </div>
         <div class="home-tiles">
-          <ViewTile icon="presenter" title="Presenter view" text="Present and draw, with notes, timer and next slide. Switch to slides only or fullscreen." href={`${BASE}?view=presenter&session=${SESSION}${code}`} open={openOn('presenter')} />
+          <ViewTile icon="presenter" title="Presenter view" text="Present and draw, with notes, timer and next slide. Pair an iPad or a phone clicker from it." href={`${BASE}?view=presenter&session=${SESSION}${code}`} open={openOn('presenter')} />
           <ViewTile icon="rehearse" title="Rehearse" text="Go through the talk as if giving it: each slide is timed, and the times can be saved into the deck." href={`${BASE}?view=presenter&rehearse=1&session=${SESSION}${code}`} />
           <ViewTile icon="projector" title="Audience window" text="Slides for the projector, without notes. Navigation stays in sync with the presenter." href={`${BASE}?view=audience&session=${SESSION}${code}`} open={openOn('audience')} />
           <ViewTile icon="reader" title="Reader view" text="Outline, reading mode and look picker, as people you send it to see it." href={`${BASE}?view=reader`} />
         </div>
       </section>
 
-      <section class={`home-section${info.live ? '' : ' home-section--wide'}`}>
+      <section class="home-section home-section--wide">
         <h2>Write and learn</h2>
         <div class="home-tiles">
           <ServiceTile icon="editor" title="Visual editor" text="Forms and a live preview; saves into the file and keeps a backup." action="editor" url={info.services.editor} onError={setError} onStarted={load} />
@@ -346,9 +291,9 @@ export function Home() {
         </div>
       </section>
 
-      {info.live && <LivePolls live={info.live} presence={presence} onRecheck={load} />}
 
-      {info.pairing && <Tablet pairing={info.pairing} relay={info.relay} presence={presence} onChange={load} onError={setError} />}
+      {info.results?.length > 0 && <Answers results={info.results} file={info.name.replace(/\.md$/i, '') + '.results.json'} onRefresh={load} />}
+
 
       <section class="home-section home-section--wide">
         <h2>Share</h2>

package/src/home/home.css

@@ -80,6 +80,11 @@ button:focus-visible, a:focus-visible { outline: 2px solid var(--home-focus); ou
 .home-tile-body strong { font-weight: 600; color: var(--home-strong); font-size: 13px; }
 .home-tile-body span { color: var(--home-muted); font-size: 12px; overflow-wrap: anywhere; }
 
+/* ── Answers from the talk ─────────────────────────────────────────── */
+.home-answer-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
+.home-answer-files a { text-decoration: none; }
+.home-answers .home-hint { color: var(--home-faint); font-size: 12px; margin: 8px 0 0; }
+
 /* ── Share ────────────────────────────────────────────────────────────── */
 .home-outputs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
 .home-output { display: flex; gap: 12px; align-items: center; padding: 8px 10px; border: 1px solid var(--home-line); border-radius: var(--home-radius); background: var(--home-raised); }
@@ -90,8 +95,6 @@ button:focus-visible, a:focus-visible { outline: 2px solid var(--home-focus); ou
 .home-output-body details { margin-top: 6px; font-size: 12px; }
 .home-output-body pre { max-height: 220px; overflow: auto; padding: 8px; border-radius: 4px; background: var(--home-bg); white-space: pre-wrap; }
 .home-note { color: var(--home-warn) !important; }
-.home-relay--up { color: var(--home-ok) !important; }
-.home-relay--refused { color: var(--home-bad) !important; }
 .home-output-actions { flex: none; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
 .home-status { font-size: 12px; color: var(--home-faint); min-width: 90px; text-align: right; }
 .home-status--done { color: var(--home-ok); }
@@ -117,17 +120,6 @@ button:focus-visible, a:focus-visible { outline: 2px solid var(--home-focus); ou
 .home-line { margin-left: auto; flex: none; color: var(--home-faint); font-size: 12px; }
 
 /* ── Live polls ───────────────────────────────────────────────────────── */
-.home-live { display: grid; gap: 10px; margin: 0; }
-.home-live > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: baseline; }
-.home-live dt { color: var(--home-muted); font-size: 12px; }
-.home-live dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; font-size: 13px; }
-.home-live dd > p { flex-basis: 100%; margin: 0; color: var(--home-muted); font-size: 12px; }
-.home-live code { overflow-wrap: anywhere; }
-.home-live a { color: var(--home-ink); }
-.home-code { padding: 1px 6px; border: 1px solid var(--home-control); border-radius: 4px; background: var(--home-button); color: var(--home-strong); }
-.home-pill { display: inline-block; padding: 0 8px; border: 1px solid var(--home-control); border-radius: 999px; font-size: 11px; color: var(--home-muted); }
-.home-pill.is-ok { border-color: #2c4a35; color: var(--home-ok); }
-.home-pill.is-bad { border-color: #5c2b28; color: var(--home-bad); }
 
 @media (max-width: 760px) {
   .home > :not(.home-header) { padding-left: 12px; padding-right: 12px; }
@@ -136,12 +128,8 @@ button:focus-visible, a:focus-visible { outline: 2px solid var(--home-focus); ou
   .home-output { flex-wrap: wrap; }
   .home-output-actions { width: 100%; justify-content: flex-start; }
   .home-status { text-align: left; min-width: 0; }
-  .home-live > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
 }
 
-.home-pair { --qr-ink: #000; --qr-bg: #fff; display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
-.home-pair canvas, .home-pair img, .home-pair svg { background: #fff; padding: 8px; border-radius: 6px; flex-shrink: 0; }
-.home-pair p, .home-tablet > p { font-size: 13px; margin: 0 0 8px; }
 
 /* A view that is open now, next to its title; the section head lists who is connected. */
 .home-open { margin-left: 8px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 500; color: var(--home-ok); background: rgba(129, 201, 149, 0.12); white-space: nowrap; }

package/src/layouts/renderSlide.jsx

@@ -2,12 +2,24 @@ import { h } from 'preact'
 import { layouts } from 'virtual:mdeck-extensions'
 import { resolveLayoutProps } from './layoutProps'
 import { SlideFrame, prepareSlide } from './layoutApi'
+import { includeOf } from '../core/parseSlides.js'
 
 // Every layout — built-in or deck-local — arrives through the same registry.
 export { layouts }
 export const manifests = Object.fromEntries(Object.entries(layouts).map(([id, t]) => [id, t.manifest]))
 
-export function SlideRenderer(slide) {
+// An include that reaches the page is one the deck was not expanded for: the
+// editor works on the file as written (build/include.js). It shows as a card
+// naming the file, in the editor's own words.
+function includeCard(slide) {
+  const include = includeOf(slide.content)
+  if (!include) return slide
+  const content = `## Slides from \`${include.file}\`\n\n${include.slides ? `Slides ${include.slides} of that file appear` : 'The slides of that file appear'} here when the deck is presented. Edit them in that file.`
+  return { ...slide, content, regions: { ...slide.regions, body: { ...slide.regions?.body, name: 'body', content, explicit: false } } }
+}
+
+export function SlideRenderer(given) {
+  const slide = includeCard(given)
   const id = slide.meta.layout ?? 'generic'
   const entry = Object.hasOwn(layouts, id) ? layouts[id] : layouts.generic
   const prepared = prepareSlide(slide)

package/src/live/answer/answer.css

@@ -6,7 +6,9 @@
 }
 * { box-sizing: border-box; }
 html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--ink); }
-body { min-height: 100vh; display: flex; flex-direction: column; font: 18px/1.45 var(--font-body); -webkit-font-smoothing: antialiased; }
+/* The visible height (dvh): on a phone, 100vh is taller than what shows beside
+   the browser's bars, and the reactions at the bottom slid out of sight. */
+body { min-height: 100vh; min-height: 100dvh; padding-bottom: env(safe-area-inset-bottom); box-sizing: border-box; display: flex; flex-direction: column; font: 18px/1.45 var(--font-body); -webkit-font-smoothing: antialiased; }
 #answer { flex: 1; display: flex; flex-direction: column; }
 .answer { flex: 1; width: 100%; max-width: 520px; margin: 0 auto; padding: 32px 20px; }
 .answer h1 {
@@ -52,3 +54,12 @@ footer { padding: 16px 20px; text-align: center; color: var(--muted); font-size:
 .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)); }
+/* Reactions: a row of emoji that float up on the presenter's screen. */
+.answer-reactions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; max-width: 520px; margin: 0 auto; padding: 0 20px 8px; }
+.answer-reactions button {
+  min-width: 46px; height: 46px; padding: 0 10px; border: 1px solid var(--rule); border-radius: 23px; background: var(--bg); color: var(--ink);
+  font: inherit; font-size: 24px; line-height: 1; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
+}
+.answer-reactions button.is-sent { animation: answer-react .5s ease-out; }
+@keyframes answer-react { 30% { transform: scale(1.25); border-color: var(--accent); } 100% { transform: scale(1); } }
+@media (prefers-reduced-motion: reduce) { .answer-reactions button.is-sent { animation: none; border-color: var(--accent); } }

package/src/live/answer/answer.js

@@ -12,12 +12,14 @@
       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.',
+      react: 'React',
     },
     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.',
+      react: 'Reagieren',
     },
   }
   let words = FALLBACK[navigator.language?.slice(0, 2) === 'de' ? 'de' : 'en']
@@ -191,17 +193,23 @@
         solution ? verdict(sent != null, right, drawn(solution.html, solution.text)) : null,
       ]
     },
-    // { question, placeholder, maxLength }: short text, as often as people like.
+    // { question, placeholder, maxLength, once }: short text, as often as
+    // people like; with `once` (a word cloud) the latest one counts, and the
+    // phone says which it sent.
     text(activity, room) {
-      const input = el('textarea', { rows: 3, maxlength: activity.maxLength ?? 200, placeholder: activity.placeholder ?? '', disabled: !!controls.closed })
+      const sent = activity.once ? remembered(room) : null
+      const input = el('textarea', { rows: activity.once ? 1 : 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 }
+        try {
+          await answer(room, value)
+          if (activity.once) { remember(room, value); status = '' } else status = words.sent
+        } catch (error) { status = error.message }
         render()
       } }, input, el('button', { type: 'submit', disabled: !!controls.closed }, words.send))
-      return [form, statusLine('')]
+      return [form, statusLine(sent != null ? fill(words.numberSent, { value: sent }) : '')]
     },
     // { question, min, max, minLabel, maxLabel }: a number on a scale.
     scale(activity, room) {
@@ -222,6 +230,25 @@
     },
   }
 
+  // Reactions (src/core/reactions.js): a row of buttons whenever the deck
+  // offers them; a tap floats up on the presenter's screen. One tap a
+  // second at most, so a thumb on a button is not a flood.
+  const REACT_MS = 1000
+  let reactedAt = 0
+  async function react(value, button) {
+    const now = Date.now()
+    if (now - reactedAt < REACT_MS) return
+    reactedAt = now
+    button.classList.remove('is-sent')
+    void button.offsetWidth
+    button.classList.add('is-sent')
+    try {
+      await fetch(new URL(`rooms/${encodeURIComponent(`${code}.reactions`)}`, base), { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ from: me, data: { value } }) })
+    } catch {}
+  }
+  const reactions = list => el('nav', { class: 'answer-reactions', 'aria-label': words.react ?? 'React' },
+    list.map(value => el('button', { type: 'button', 'aria-label': value, onclick: event => react(value, event.currentTarget) }, value)))
+
   function render() {
     const activity = current?.activity
     const form = activity && FORMS[activity.type]
@@ -230,6 +257,7 @@
       form
         ? 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)),
+      connected && Array.isArray(current?.reactions) && current.reactions.length ? reactions(current.reactions.filter(value => typeof value === 'string').slice(0, 8)) : null,
       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

@@ -13,11 +13,12 @@ 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'
+import { reactionsOf, REACTIONS_ROOM } from '../core/reactions.js'
 
 // The QR code component the built-in poll uses, for your own activities.
 export { default as QrCode } from '../components/QrCode.jsx'
 
-let settings = { server: null, code: '000000' }
+let settings = { server: null, code: '000000', reactions: null }
 
 // Called by the runtime with the deck settings.
 // `mdeck run --server <address>` and MDECK_SERVER name the server without the
@@ -26,7 +27,7 @@ const givenServer = typeof __MDECK_SERVER__ === 'string' ? __MDECK_SERVER__ : nu
 
 export function configureLive(deckConfig = {}) {
   const server = givenServer ?? deckConfig.server
-  settings = { server: typeof server === 'string' ? server.replace(/\/+$/, '') : null, code: sessionCode(deckConfig) }
+  settings = { server: typeof server === 'string' ? server.replace(/\/+$/, '') : null, code: sessionCode(deckConfig), reactions: reactionsOf(deckConfig) }
   infoRequest = null
   takeKeyFromAddress()
 }
@@ -211,6 +212,22 @@ export function useRoom(room) {
   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) }
 }
 
+/**
+ * Reactions sent from the phones, for the presenter's screen:
+ * `onReaction({ value, at, n })` for each one as it arrives. Returns a
+ * function that stops listening. Nothing happens without a room server.
+ */
+export function listenToReactions(onReaction) {
+  if (typeof EventSource === 'undefined') return () => {}
+  const source = new EventSource(`${roomPath(REACTIONS_ROOM)}/events`)
+  source.addEventListener('message', event => {
+    const message = JSON.parse(event.data)
+    const value = message.data?.value
+    if (typeof value === 'string' && settings.reactions?.includes(value)) onReaction({ value, at: message.at, n: message.n })
+  })
+  return () => source.close()
+}
+
 /** The deck's join link alone, for a slide that only invites people in (<qrcode join />). */
 export function useJoinLink() {
   const [info, setInfo] = useState({})
@@ -259,7 +276,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'), follow: t('follow.open'),
+  waiting: t('respond.waiting'), pick: t('poll.pick'), thanks: t('poll.thanks'), send: t('respond.send'), sent: t('respond.sent'), follow: t('follow.open'), react: t('respond.react'),
   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'),
@@ -304,7 +321,9 @@ async function sendCurrent() {
   if (look) lastLook = look
   // 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 } : {}) }
+  // The reactions the phones offer, whatever is on the slide.
+  const reactions = settings.reactions ? { reactions: settings.reactions } : {}
+  const state = { ...current, look: lastLook, lang: deckLanguage(), labels: phoneWords(), ...reactions, ...(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/rooms.js

@@ -9,11 +9,17 @@ import { timingSafeEqual } from 'node:crypto'
 import { readFileSync } from 'node:fs'
 import { CODE_RE } from './code.js'
 
+// This mdeck's version, in /info: a presenter on a newer mdeck can tell that
+// this server lacks what its deck uses (src/build/homePlugin.js).
+const VERSION = JSON.parse(readFileSync(new URL('../../package.json', import.meta.url), 'utf8')).version
+
 // The phones' answer page, served by the server itself at /<code>.
 const ANSWER_FILES = Object.fromEntries(['answer.html', 'answer.js', 'answer.css'].map(name => [name, readFileSync(new URL(`./answer/${name}`, import.meta.url))]))
 const ANSWER_TYPES = { html: 'text/html; charset=utf-8', js: 'text/javascript; charset=utf-8', css: 'text/css; charset=utf-8' }
 
 export const ROOM_RE = /^[A-Za-z0-9][A-Za-z0-9._-]{0,99}$/
+// A session's reactions room: `<code>.reactions`.
+const isReactionRoom = id => id.endsWith('.reactions')
 // What a connected window may say it is, for the presenter's overview of
 // who is connected (src/components/ConnectedViews.jsx); phones only count.
 export const VIEWS = ['presenter', 'audience', 'deck', 'phone']
@@ -37,18 +43,30 @@ export function createRooms({ maxMessages = 5000, maxInk = 5000, maxRooms = 500,
   const broadcast = (room, event) => { for (const listener of room.listeners) listener(event) }
   // A session is a room and the rooms named after it (`<code>.stage`, …).
   const sessionRooms = id => { const session = id.split('.')[0]; return [...rooms].filter(([name]) => name === session || name.startsWith(`${session}.`)).map(([, room]) => room) }
+  // Phones connected elsewhere, by session: mdeck run keeps the stage room
+  // here but the phones join a standalone server (src/live/server.js).
+  const awayPhones = new Map()
   const presence = id => {
     const present = sessionRooms(id).flatMap(room => [...room.present.values()])
     const views = present.filter(entry => entry.view !== 'phone').sort((a, b) => VIEWS.indexOf(a.view) - VIEWS.indexOf(b.view))
-    return { views, phones: present.length - views.length }
+    return { views, phones: present.length - views.length + (awayPhones.get(id.split('.')[0]) ?? 0) }
   }
   const announcePresence = id => { const event = { type: 'presence', presence: presence(id) }; for (const room of sessionRooms(id)) broadcast(room, event) }
   return {
+    /** Phones of session `id` that joined another server; announced when the number changes. */
+    setAwayPhones(id, n) {
+      const session = id.split('.')[0]
+      if ((awayPhones.get(session) ?? 0) === n) return
+      awayPhones.set(session, n)
+      announcePresence(session)
+    },
     post(id, { from = null, data }) {
       const room = get(id)
-      if (room.messages.length >= maxMessages) throw Object.assign(new Error('This room is full'), { status: 429 })
+      // Reactions (src/core/reactions.js) are passed on and forgotten.
+      const keep = !isReactionRoom(id)
+      if (keep && room.messages.length >= maxMessages) throw Object.assign(new Error('This room is full'), { status: 429 })
       const message = { n: room.next++, at: new Date(now()).toISOString(), from, data }
-      room.messages.push(message)
+      if (keep) room.messages.push(message)
       broadcast(room, { type: 'message', message })
       return message
     },
@@ -181,12 +199,13 @@ function reply(response, status, body) {
 //                              ?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>           { from, data } → { n }; in <code>.reactions
+//                              passed on without being kept
 //   POST /rooms/<id>/reset     presenter only
 //   POST /rooms/<id>/state     { state } — presenter only
 //   POST /rooms/<id>/ink       { messages } — presenter only, live ink
 // Answers carry no cookies and no personal data, so any page may use them.
-export function liveHandler({ rooms = createRooms(), canReset = () => false, info = () => ({}), limit = createLimiter(), inkLimit = createLimiter({ burst: 60, perMs: 3000 }), heartbeatMs = 20000 } = {}) {
+export function liveHandler({ rooms = createRooms(), canReset = () => false, info = () => ({}), limit = createLimiter(), inkLimit = createLimiter({ burst: 60, perMs: 3000 }), reactionLimit = createLimiter({ burst: 120, perMs: 10000 }), heartbeatMs = 20000 } = {}) {
   return async (request, response, next = () => reply(response, 404, { error: 'Not found' })) => {
     const { pathname, searchParams } = new URL(request.url, 'http://localhost')
     response.setHeader('Access-Control-Allow-Origin', '*')
@@ -194,7 +213,7 @@ export function liveHandler({ rooms = createRooms(), canReset = () => false, inf
     response.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS')
     if (request.method === 'OPTIONS') { response.writeHead(204); response.end(); return }
     try {
-      if (pathname === '/info' && request.method === 'GET') return reply(response, 200, { canReset: !!canReset(request, searchParams.get('session')), ...info(request) })
+      if (pathname === '/info' && request.method === 'GET') return reply(response, 200, { canReset: !!canReset(request, searchParams.get('session')), version: VERSION, ...info(request) })
       const page = pathname.slice(1)
       if (request.method === 'GET' && (CODE_RE.test(page) || Object.hasOwn(ANSWER_FILES, page))) {
         const name = CODE_RE.test(page) ? 'answer.html' : page
@@ -240,8 +259,11 @@ export function liveHandler({ rooms = createRooms(), canReset = () => false, inf
         else if (!rooms.setState(id, (await readBody(request, MAX_STATE)).state)) return reply(response, 200, { ok: true, ignored: true })
         return reply(response, 200, { ok: true })
       }
-      if (!limit(clientAddress(request))) return reply(response, 429, { error: 'Too many answers at once; wait a moment' })
+      // Reactions have a limit of their own: a room behind one address (a
+      // lecture hall's network) must not use up its answers with them.
+      if (!(isReactionRoom(id) ? reactionLimit : limit)(clientAddress(request))) return reply(response, 429, { error: 'Too many answers at once; wait a moment' })
       const body = await readBody(request)
+      if (isReactionRoom(id) && (typeof body.data?.value !== 'string' || body.data.value.length > 16)) return reply(response, 400, { error: 'A reaction is a short text' })
       if (!('data' in body)) return reply(response, 400, { error: 'Send { data }' })
       const from = typeof body.from === 'string' ? body.from.slice(0, 64) : null
       return reply(response, 201, { n: rooms.post(id, { from, data: body.data }).n })

package/src/live/server.js

@@ -14,11 +14,25 @@ export function livePlugin({ pairing = null, upstream = null, key = null, sessio
   return {
     name: 'vite-plugin-mdeck-live',
     configureServer(server) {
+      const rooms = createRooms()
       const handler = liveHandler({
-        rooms: createRooms(),
+        rooms,
         canReset: (request, room) => isAllowedRequest(request) || (!!pairing?.allows(request) && (room == null || room === session() || room.startsWith(`${session()}.`))),
         info: () => ({ network: server.resolvedUrls?.network?.[0] ?? null }),
       })
+      // With polls on a standalone server, the phones join there: its count
+      // joins the local stage room's, so the presenter sees them.
+      const awayTimer = setInterval(async () => {
+        const address = typeof upstream === 'function' ? upstream() : upstream
+        const code = session()
+        if (!address || !code) return
+        try {
+          const response = await fetch(`${address.replace(/\/+$/, '')}/rooms/${encodeURIComponent(code)}.stage/presence`, { signal: AbortSignal.timeout(3000) })
+          if (response.ok) rooms.setAwayPhones(code, Number((await response.json()).phones) || 0)
+        } catch {}
+      }, 4000)
+      awayTimer.unref?.()
+      server.httpServer?.once('close', () => clearInterval(awayTimer))
       server.middlewares.use('/__mdeck/live', (request, response, next) => {
         const address = typeof upstream === 'function' ? upstream() : upstream
         // The stage room (position and live ink between the presenter's