mdeck 3.10.0 → 3.11.0

package/src/runtime/main.jsx

@@ -36,6 +36,11 @@ import { Icon } from '../components/Icon.jsx'
 import { ConnectedViews } from '../components/ConnectedViews.jsx'
 import './deck-stage.js'
 import { normalMode, hotspotMode } from './hotspots.js'
+import { useTalkTimer } from './useTalkTimer.js'
+import { devPath } from '../core/devPath.js'
+import { setView } from './shared.js'
+import { RehearsalSummary } from './RehearsalSummary.jsx'
+import { planFor, scheduleAt, formatClock } from '../core/timing.js'
 
 const PresenterIcon = ({ name, size = 18 }) => <Icon name={name} size={size} style={{ display: 'block' }} />
 
@@ -99,7 +104,23 @@ const withFileLanguage = config => config.lang || !deckLang ? config : { ...conf
 function languageName(lang) {
   try { return new Intl.DisplayNames([lang], { type: 'language' }).of(lang) } catch { return lang }
 }
-const hasActivities = () => roomsIn(slidesContent).length > 0
+// Asked several times on every slide change (presenter view, the phones'
+// announcement, the views connected), so the answer is kept until the text
+// changes: finding the tags reads the whole deck, which on an iPad made each
+// slide change noticeably slower.
+let activitiesOf = null, activitiesFound = false
+const hasActivities = () => {
+  if (activitiesOf !== slidesContent) { activitiesOf = slidesContent; activitiesFound = roomsIn(slidesContent).length > 0 }
+  return activitiesFound
+}
+// The heading the phones show for a room, found once per deck.
+const titlesByDeck = new WeakMap()
+function titleFor(deck, room) {
+  let titles = titlesByDeck.get(deck)
+  if (!titles) titlesByDeck.set(deck, titles = new Map())
+  if (!titles.has(room)) titles.set(room, slideTitleFor(deck, room))
+  return titles.get(room)
+}
 // What the phones show for the activity on a slide: its component's `phone`
 // description, from the tag's attributes and the slide's heading.
 function activityOn(deck, slide) {
@@ -110,7 +131,7 @@ function activityOn(deck, slide) {
   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]))
-  try { return { room, activity: component.phone(props, { slideTitle: slideTitleFor(deck, room) }) } } catch (error) { console.warn(error); return { room, activity: null } }
+  try { return { room, activity: component.phone(props, { slideTitle: titleFor(deck, room) }) } } catch (error) { console.warn(error); return { room, activity: null } }
 }
 function announceSlide(deck, index, { initial = false } = {}) {
   if (hasActivities()) announce({ ...activityOn(deck, deck.slides[index]), title: deck.deckConfig?.meta?.title ?? '', initial })
@@ -205,6 +226,55 @@ function usePresence() {
   return presence
 }
 
+// The launch page of `mdeck run`, when this computer's presenter view was
+// served by it; a built deck, `mdeck edit` and a paired iPad have none.
+function useLaunchPage() {
+  const [url, setUrl] = useState(null)
+  useEffect(() => {
+    if (!import.meta.env.DEV) return
+    fetch(devPath('__mdeck/home/info'), { cache: 'no-store' }).then(response => { if (response.ok) setUrl(devPath('home.html')) }, () => {})
+  }, [])
+  return url
+}
+
+// The slide number as a field: type a number and press Enter (Go on an
+// iPad's keyboard) to jump there. Escape, or leaving it empty, keeps the slide.
+function SlideJump({ index, total, onJump, pad = 0, style }) {
+  const [draft, setDraftState] = useState(null)
+  // Blur follows Enter and Escape before a re-render, so it reads the ref.
+  const draftRef = useRef(null)
+  const setDraft = value => { draftRef.current = value; setDraftState(value) }
+  const shown = draft ?? String(index + 1).padStart(pad, '0')
+  function commit() {
+    const n = Number.parseInt(draftRef.current ?? '', 10)
+    setDraft(null)
+    if (Number.isInteger(n) && n - 1 !== index) onJump(Math.max(1, Math.min(total, n)) - 1)
+  }
+  return (
+    <form class="presenter-jump" style={{ display: 'inline-flex', alignItems: 'center', gap: '4px', margin: 0, ...style }}
+      onSubmit={e => { e.preventDefault(); commit(); e.currentTarget.elements.slide.blur() }}>
+      <input
+        name="slide" type="text" inputMode="numeric" pattern="[0-9]*" enterKeyHint="go" autoComplete="off"
+        title="Go to slide: type its number and press Enter" aria-label={`Slide number, 1 to ${total}`}
+        value={shown}
+        size={Math.max(2, String(total).length)}
+        onFocus={e => e.currentTarget.select()}
+        onInput={e => setDraft(e.currentTarget.value.replace(/\D/g, ''))}
+        onKeyDown={e => {
+          if (e.key !== 'Escape') return
+          setDraft(null)
+          // Typing and Escape can land in one render, which then changes nothing.
+          e.currentTarget.value = String(index + 1).padStart(pad, '0')
+          e.currentTarget.blur()
+        }}
+        onBlur={() => { if (draftRef.current !== null) commit() }}
+        style={{ ...S.btn, cursor: 'text', padding: '2px 4px', width: `${Math.max(2, String(total).length) + 1.5}ch`, textAlign: 'center', fontVariantNumeric: 'tabular-nums', color: 'inherit' }}
+      />
+      <span>/ {String(total).padStart(pad, '0')}</span>
+    </form>
+  )
+}
+
 function PresenterView({ deckConfig: firstConfig, slides: firstSlides }) {
   const [index, setIndex] = useState(0)
   // The notes, slide count and phones follow the language shown.
@@ -231,6 +301,7 @@ function PresenterView({ deckConfig: firstConfig, slides: firstSlides }) {
   // Whether the number keys zoom on the slide shown: a slide may have its own setting.
   const slideHotspots = hotspotMode({ slide: slides[index]?.meta.hotspots, deck: deckConfig.hotspots, forced: hotspotsForced }) !== 'off'
   const presence = usePresence()
+  const launchPage = useLaunchPage()
   // Drawing in the slide's frame: this page around it must not pan or bounce either.
   useEffect(() => { document.documentElement.classList.toggle('is-inking', inking) }, [inking])
   // The slide zooms itself (two fingers in its frame); Safari's page zoom
@@ -270,9 +341,33 @@ function PresenterView({ deckConfig: firstConfig, slides: firstSlides }) {
     try { localStorage.setItem('mdeck-presenter-look', folded ? 'folded' : 'open') } catch {}
   }
   const [themeModalOpen, setThemeModalOpen] = useState(false)
-  const [elapsed, setElapsed] = useState(0)
-  const [timerRunning, setTimerRunning] = useState(false)
-  const timerRef = useRef(null)
+  // The clock, and the slides' times (`time:`) to hold it against. Times a
+  // rehearsal saved count at once; the deck file is not read again mid-talk.
+  const [savedTimes, setSavedTimes] = useState({})
+  const plan = useMemo(() => planFor(slides, deckConfig, savedTimes), [slides, deckConfig, savedTimes])
+  const timer = useTalkTimer(`mdeck-timer:${DECK_CHANNEL}`, slides[index]?.id, { rehearse: controlUrl.searchParams.get('rehearse') === '1' })
+  const [summary, setSummary] = useState(null)
+  const [savedNote, setSavedNote] = useState(null)
+  // A reload after the rehearsal must not start another one.
+  useEffect(() => {
+    if (!controlUrl.searchParams.has('rehearse')) return
+    const url = new URL(window.location.href)
+    url.searchParams.delete('rehearse')
+    history.replaceState(null, '', url)
+  }, [])
+  function finishRehearsal() {
+    timer.pause()
+    setSummary(timer.spent())
+  }
+  const timerRef = useRef(timer)
+  timerRef.current = timer
+  // Next at the very end of the deck ends a rehearsal.
+  const atEndRef = useRef(false)
+  const atRehearsalEnd = () => timerRef.current.rehearsing && atEndRef.current
+  const finishRehearsalRef = useRef(finishRehearsal)
+  finishRehearsalRef.current = finishRehearsal
+  const summaryRef = useRef(false)
+  summaryRef.current = !!summary
 
   const iframeRef = useRef(null)
   const previewRef = useRef(null)
@@ -357,6 +452,7 @@ function PresenterView({ deckConfig: firstConfig, slides: firstSlides }) {
         return
       }
       stateRef.current = state
+      atEndRef.current = !!data.atEnd
       setIndex(i)
       if (data.reason !== 'sync') {
         bcRef.current?.postMessage({ deckControl: { command: 'setState', value: state, order: orderRef.current.stamp() } })
@@ -376,6 +472,8 @@ function PresenterView({ deckConfig: firstConfig, slides: firstSlides }) {
     function onKey(e) {
       if (e.target?.matches?.('input, select, textarea')) return
       if (e.metaKey || e.ctrlKey || e.altKey) return
+      if (summaryRef.current) return
+      if (e.key === 't' || e.key === 'T') { e.preventDefault(); timerRef.current.toggle(); return }
       const cmd =
         (e.key === 'ArrowRight' || e.key === 'PageDown' || e.key === ' ') ? 'next' :
         (e.key === 'ArrowLeft'  || e.key === 'PageUp')                    ? 'prev' :
@@ -389,6 +487,7 @@ function PresenterView({ deckConfig: firstConfig, slides: firstSlides }) {
       if (/^[0-9]$/.test(e.key) || e.key === 'Escape') { if (e.key !== 'Escape') e.preventDefault(); sendTo(iframeRef.current?.contentWindow, 'hotspotKey', e.key); return }
       if (!cmd) return
       e.preventDefault()
+      if (cmd === 'next' && atRehearsalEnd()) { finishRehearsalRef.current(); return }
       sendTo(iframeRef.current?.contentWindow, cmd, cmd === 'ink' ? 'toggle' : undefined)
     }
     window.addEventListener('keydown', onKey)
@@ -412,15 +511,6 @@ function PresenterView({ deckConfig: firstConfig, slides: firstSlides }) {
     return () => window.removeEventListener('keydown', handler)
   }, [themeModalOpen])
 
-  useEffect(() => {
-    if (timerRunning) {
-      timerRef.current = setInterval(() => setElapsed(s => s + 1), 1000)
-    } else {
-      clearInterval(timerRef.current)
-    }
-    return () => clearInterval(timerRef.current)
-  }, [timerRunning])
-
   // Close palette dropdown on outside click
   useEffect(() => {
     if (!paletteOpen) return
@@ -451,8 +541,9 @@ function PresenterView({ deckConfig: firstConfig, slides: firstSlides }) {
   const nextLanguage = () => setLang(current => LANGUAGES[(LANGUAGES.indexOf(current) + 1) % LANGUAGES.length])
 
   // Nav buttons drive the presenter iframe; audience follows via slideIndexChanged
-  function navCommand(cmd) {
-    sendTo(iframeRef.current?.contentWindow, cmd)
+  function navCommand(cmd, value) {
+    if (cmd === 'next' && atRehearsalEnd()) return finishRehearsal()
+    sendTo(iframeRef.current?.contentWindow, cmd, value)
   }
 
   function openAudienceWindow() {
@@ -468,7 +559,15 @@ function PresenterView({ deckConfig: firstConfig, slides: firstSlides }) {
   const note = notes[index] || ''
   const hasNext = index + 1 < slides.length
 
-  const clock = `${String(Math.floor(elapsed / 60)).padStart(2, '0')}:${String(elapsed % 60).padStart(2, '0')}`
+  const clock = formatClock(timer.totalElapsed).padStart(5, '0')
+  // With times in the deck: what is left of this slide, and how the talk
+  // stands against the plan (behind when positive).
+  const timed = plan.total > 0
+  const { planned, slideLeft, delta } = scheduleAt(plan, index, timer)
+  const slideColor = !planned ? '#888' : slideLeft <= 0 ? '#f28b82' : slideLeft <= 15 ? '#f5a524' : '#ccc'
+  const slideText = !planned ? 'no time' : slideLeft > 0 ? `${formatClock(slideLeft)} left` : `+${formatClock(-slideLeft)} over`
+  const deltaText = Math.abs(delta) < 30 ? 'on time' : delta > 0 ? `${formatClock(delta)} behind` : `${formatClock(-delta)} ahead`
+  const deltaColor = Math.abs(delta) < 30 ? '#888' : delta > 0 ? '#f28b82' : '#81c995'
   const pill = { ...S.btn, minWidth: '40px', height: '40px', padding: '0 10px', fontSize: '15px' }
 
   return (
@@ -481,9 +580,12 @@ function PresenterView({ deckConfig: firstConfig, slides: firstSlides }) {
       />
       {slideLayout && (
         <div class="presenter-pill" role="toolbar" aria-label="Presenter" style={{ position: 'fixed', top: 'max(10px, env(safe-area-inset-top))', right: 'max(10px, env(safe-area-inset-right))', zIndex: 20, display: 'flex', gap: '4px', alignItems: 'center', padding: '4px', borderRadius: '12px', background: 'rgba(17,17,17,0.88)', border: '1px solid #2a2a2a', color: '#ccc', fontFamily: 'ui-sans-serif, system-ui, sans-serif', fontSize: '13px', fontVariantNumeric: 'tabular-nums' }}>
-          <span style={{ padding: '0 8px', color: '#888' }}>{index + 1}/{slides.length}</span>
+          <SlideJump index={index} total={slides.length} onJump={i => navCommand('goTo', i)} style={{ padding: '0 4px', color: '#888' }} />
           <ConnectedViews presence={presence} phones={hasActivities()} style={{ color: '#888', padding: '0 6px' }} />
-          <button style={{ ...pill, color: timerRunning ? '#f0f0f0' : '#777' }} title="Start or pause the timer" onClick={() => setTimerRunning(r => !r)}>{clock}</button>
+          {timer.rehearsing && <button class="presenter-rehearsing" style={{ ...pill, color: '#f28b82' }} title="Finish the rehearsal" onClick={finishRehearsal}>● Finish</button>}
+          <button class="presenter-clock" style={{ ...pill, color: timer.running ? '#f0f0f0' : '#777', gap: '8px' }} title="Start or pause the timer (T)" onClick={timer.toggle}>
+            {clock}{timed && <span class="presenter-slide-time" style={{ color: slideColor, fontSize: '12px' }}>{slideText}</span>}
+          </button>
           <button style={pill} title="Previous" aria-label="Previous" onClick={() => navCommand('prev')}><PresenterIcon name="prev" /></button>
           <button style={pill} title="Next" aria-label="Next" onClick={() => navCommand('next')}><PresenterIcon name="next" /></button>
           <button class="presenter-draw" title="Draw on the slide (D)" aria-pressed={inking} style={{ ...pill, ...(inking ? { background: '#e11d48', borderColor: '#e11d48', color: '#fff' } : {}) }} onClick={() => sendTo(iframeRef.current?.contentWindow, 'ink', 'toggle')}><PresenterIcon name="pen" /></button>
@@ -491,6 +593,7 @@ function PresenterView({ deckConfig: firstConfig, slides: firstSlides }) {
           <button class="presenter-notes" title="Notes (N)" aria-pressed={drawerOpen} style={{ ...pill, ...(drawerOpen ? { background: '#2a2a2a', color: '#fff' } : {}) }} onClick={() => setDrawerOpen(open => !open)}>Notes</button>
           {canFullscreen && <button class="presenter-fullscreen" style={pill} title={fullscreenLabel} aria-label={fullscreenLabel} aria-pressed={isFullscreen} onClick={() => fullscreen.toggle()}><PresenterIcon name={fullscreenIcon} /></button>}
           <button style={pill} title="Speaker layout: slide, notes and next slide side by side" onClick={() => chooseLayout('speaker')}><PresenterIcon name="speaker" /></button>
+          {launchPage && <a class="presenter-home" href={launchPage} style={{ ...pill, boxSizing: 'border-box', textDecoration: 'none' }} title="Back to the launch page" aria-label="Back to the launch page"><PresenterIcon name="home" /></a>}
         </div>
       )}
       <aside class="presenter-aside" style={{
@@ -514,26 +617,36 @@ function PresenterView({ deckConfig: firstConfig, slides: firstSlides }) {
           </span>
           <span style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
             {!slideLayout && canFullscreen && <button class="presenter-fullscreen" style={{ ...S.btn, padding: '3px 8px' }} title={fullscreenLabel} aria-label={fullscreenLabel} aria-pressed={isFullscreen} onClick={() => fullscreen.toggle()}><PresenterIcon name={fullscreenIcon} /></button>}
+            {!slideLayout && launchPage && <a class="presenter-home" href={launchPage} style={{ ...S.btn, boxSizing: 'border-box', padding: '3px 8px', textDecoration: 'none' }} title="Back to the launch page" aria-label="Back to the launch page"><PresenterIcon name="home" /></a>}
             {!slideLayout && <button class="presenter-layout" style={{ ...S.btn, padding: '3px 8px' }} title="Slide only, notes in a drawer (for an iPad)" onClick={() => chooseLayout('slide')}><PresenterIcon name="tablet" /></button>}
-            <span style={{ color: '#666', fontVariantNumeric: 'tabular-nums' }}>
-              {String(index + 1).padStart(2, '0')} / {String(slides.length).padStart(2, '0')}
-            </span>
+            <SlideJump index={index} total={slides.length} pad={2} onJump={i => navCommand('goTo', i)} style={{ color: '#666', fontVariantNumeric: 'tabular-nums' }} />
           </span>
         </div>
 
         <SteeringNote />
 
         <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexShrink: 0 }}>
-          <span style={{ fontVariantNumeric: 'tabular-nums', fontSize: '22px', letterSpacing: '0.05em', color: timerRunning ? '#f0f0f0' : '#555', fontWeight: 300 }}>
-            {String(Math.floor(elapsed / 60)).padStart(2, '0')}:{String(elapsed % 60).padStart(2, '0')}
+          <span style={{ display: 'flex', alignItems: 'baseline', gap: '8px' }}>
+            <span class="presenter-clock" style={{ fontVariantNumeric: 'tabular-nums', fontSize: '22px', letterSpacing: '0.05em', color: timer.running ? '#f0f0f0' : '#555', fontWeight: 300 }}>{clock}</span>
+            {timed && <span style={{ color: '#666', fontVariantNumeric: 'tabular-nums' }}>of {formatClock(plan.total)}</span>}
           </span>
           <div style={{ display: 'flex', gap: '4px' }}>
-            <button style={S.btn} title={timerRunning ? 'Pause the timer' : 'Start the timer'} aria-label={timerRunning ? 'Pause the timer' : 'Start the timer'} onClick={() => setTimerRunning(r => !r)}>
-              <PresenterIcon name={timerRunning ? 'pause' : 'play'} size={16} />
+            <button style={S.btn} title={timer.running ? 'Pause the timer (T)' : 'Start the timer (T)'} aria-label={timer.running ? 'Pause the timer' : 'Start the timer'} onClick={timer.toggle}>
+              <PresenterIcon name={timer.running ? 'pause' : 'play'} size={16} />
             </button>
-            <button style={S.btn} title="Reset the timer" aria-label="Reset the timer" onClick={() => { setTimerRunning(false); setElapsed(0) }}><PresenterIcon name="reset" size={16} /></button>
+            <button style={S.btn} title="Reset the timer" aria-label="Reset the timer" onClick={timer.reset}><PresenterIcon name="reset" size={16} /></button>
+            {!timer.rehearsing && <button class="presenter-rehearse" style={S.btn} title="Rehearse: time each slide, then save the times into the deck" onClick={timer.startRehearsal}><PresenterIcon name="rehearse" size={16} />Rehearse</button>}
           </div>
         </div>
+        {timed && <div class="presenter-schedule" style={{ display: 'flex', justifyContent: 'space-between', flexShrink: 0, marginTop: '-8px', fontVariantNumeric: 'tabular-nums' }}>
+          <span>Slide <span class="presenter-slide-time" style={{ color: slideColor }}>{slideText}</span>{planned ? <span style={{ color: '#555' }}> of {formatClock(planned)}</span> : null}</span>
+          <span class="presenter-delta" style={{ color: deltaColor }}>{deltaText}</span>
+        </div>}
+        {timer.rehearsing && <div class="presenter-rehearsing" role="status" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexShrink: 0, padding: '6px 10px', borderRadius: '5px', border: '1px solid #5c2b28', color: '#f28b82' }}>
+          <span>● Rehearsing{timer.running ? '' : ' (paused)'}: this slide {formatClock(timer.slideElapsed)}</span>
+          <button style={{ ...S.btn, padding: '2px 10px' }} onClick={finishRehearsal}>Finish</button>
+        </div>}
+        {savedNote && <div role="status" style={{ flexShrink: 0, color: '#81c995' }}>{savedNote}</div>}
 
         {hasNext && (
           <div style={{ flexShrink: 0 }}>
@@ -697,12 +810,26 @@ function PresenterView({ deckConfig: firstConfig, slides: firstSlides }) {
             </button>
           </div>
           <div style={{ color: '#444', fontSize: '11px', textAlign: 'center' }}>
-            Arrow keys · Space · PgUp/PgDn · R to reset · H hotspots{slideHotspots ? ' · 1–9 zoom · 0 whole slide' : ''}
+            Arrow keys · Space · PgUp/PgDn · R to reset · T timer · H hotspots{slideHotspots ? ' · 1–9 zoom · 0 whole slide' : ''}
           </div>
         </div>
 
       </aside>
 
+      {summary && <RehearsalSummary
+        slides={slides}
+        plan={plan}
+        spent={summary}
+        onClose={() => { setSummary(null); timer.toggle() }}
+        onDiscard={() => { setSummary(null); timer.endRehearsal() }}
+        onSaved={(times, changed) => {
+          setSummary(null)
+          timer.endRehearsal()
+          setSavedTimes(saved => ({ ...saved, ...Object.fromEntries(Object.entries(times).map(([id, t]) => [id, t ?? undefined])) }))
+          setSavedNote(`Saved the times of ${changed} slide${changed === 1 ? '' : 's'} into the deck.`)
+          setTimeout(() => setSavedNote(null), 6000)
+        }}
+      />}
       {themeModalOpen && (
         <div
           style={{ position: 'fixed', inset: 0, zIndex: 200, background: 'rgba(0,0,0,0.85)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
@@ -812,6 +939,8 @@ async function init() {
   // 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 && !followMode && (!embedded || url.searchParams.get('draw') === '1')
+  // What deck components learn from useView() (component.js).
+  setView(audienceMode ? 'audience' : followMode ? 'follow' : readerMode ? 'reader' : embedded ? (drawHere && !editorMode ? 'presenter' : 'preview') : 'deck')
   const inkStorageKey = `mdeck-ink:${inkFileName}:${location.pathname}`
 
   injectSpeakerNotes(slides)

package/src/runtime/shared.js

@@ -0,0 +1,77 @@
+// State that deck components share across slides and across the windows of
+// one talk: the presenter's slide frame, the audience window, other deck
+// windows in this browser, and a paired iPad. Components reach it through
+// `mdeck/component` (component.js). Values travel on the ink bus (ink/bus.js)
+// as `shared` messages; nothing is saved, and a window that opens later asks
+// the others for what they hold (`shared-ask`). A deck whose components use
+// none of it sends nothing.
+//
+// The latest change wins as it arrives. A value replayed for a window that
+// opened later only fills a name that window does not know yet, so no clocks
+// are compared between devices.
+
+const values = new Map()
+const listeners = new Map()
+let send = null
+let asked = false
+let view = 'deck'
+
+// Windows that only show the talk read shared state but do not change it.
+const READ_ONLY = new Set(['preview', 'reader', 'follow'])
+
+/** The kind of window this is: presenter, audience, deck, follow, preview or reader. */
+export function setView(next) { view = next }
+export function currentView() { return view }
+
+function notify(name) {
+  for (const listener of listeners.get(name) ?? []) listener(values.get(name))
+}
+
+// Asks the others once, when this window has both a bus and a component
+// that uses shared state.
+function ask() {
+  if (asked || !send || !listeners.size) return
+  asked = true
+  send({ type: 'shared-ask' })
+}
+
+/** The bus this window sends on. */
+export function connectShared(sender) {
+  send = sender
+  ask()
+}
+
+/** A `shared` or `shared-ask` message from another window. */
+export function receiveShared(message) {
+  if (message.type === 'shared-ask') {
+    for (const [name, value] of values) send?.({ type: 'shared', name, value, replay: true })
+    return
+  }
+  if (typeof message.name !== 'string') return
+  if (message.replay && values.has(message.name)) return
+  values.set(message.name, message.value)
+  notify(message.name)
+}
+
+export function getShared(name) { return values.get(name) }
+
+/** Sets a value here and in every other window; ignored where the talk is only shown. */
+export function setShared(name, value) {
+  if (READ_ONLY.has(view)) return false
+  // Only what survives JSON reaches the other windows; keep this one the same.
+  const plain = value === undefined ? null : JSON.parse(JSON.stringify(value))
+  values.set(name, plain)
+  notify(name)
+  send?.({ type: 'shared', name, value: plain })
+  return true
+}
+
+export function subscribeShared(name, listener) {
+  if (!listeners.has(name)) listeners.set(name, new Set())
+  listeners.get(name).add(listener)
+  ask()
+  return () => listeners.get(name)?.delete(listener)
+}
+
+/** For tests: forget everything. */
+export function resetShared() { values.clear(); listeners.clear(); send = null; asked = false; view = 'deck' }

package/src/runtime/steps.js

@@ -0,0 +1,36 @@
+// The steps of a slide: what appears one press at a time.
+//
+// Steps follow the slide's document order. Inside an SVG drawing that order
+// is also what is drawn on top, so a drawing may number its parts instead:
+// `data-step="2"` shows after `data-step="1"`, and parts with the same number
+// appear together. A drawing's numbered steps take the place of its first
+// one; parts with a bare `data-step` keep their own place.
+
+// [[element, …], …]: each step's elements, in the order they are shown.
+export function slideSteps(slide) {
+  if (!slide) return []
+  const order = []
+  const drawings = new Map()
+  for (const element of slide.querySelectorAll('[data-step]')) {
+    const drawing = element.closest('svg')
+    const number = numbered(element.getAttribute('data-step'))
+    if (!drawing || number == null) { order.push([element]); continue }
+    let parts = drawings.get(drawing)
+    if (!parts) {
+      parts = new Map()
+      drawings.set(drawing, parts)
+      order.push(parts)
+    }
+    if (!parts.has(number)) parts.set(number, [])
+    parts.get(number).push(element)
+  }
+  return order.flatMap(entry => entry instanceof Map
+    ? [...entry.keys()].sort((a, b) => a - b).map(number => entry.get(number))
+    : [entry])
+}
+
+function numbered(value) {
+  if (value == null || !value.trim()) return null
+  const number = Number(value)
+  return Number.isFinite(number) ? number : null
+}

package/src/runtime/useTalkTimer.js

@@ -0,0 +1,65 @@
+// The presenter view's clock: the time of the whole talk and of each slide.
+// It reads the wall clock rather than counting ticks, so it does not drift,
+// and keeps its state in sessionStorage, so a reload carries on where it was.
+// Time counts only while the clock runs; it goes to the slide shown.
+//
+// A rehearsal is the same clock, started from nothing: the time each slide
+// got is what the rehearsal summary offers to save (core/timing.js).
+import { useEffect, useRef, useState } from 'preact/hooks'
+
+const fresh = () => ({ running: false, rehearsing: false, mark: 0, total: 0, spent: {}, slide: null })
+
+function load(key) {
+  try {
+    const saved = JSON.parse(sessionStorage.getItem(key))
+    if (saved && typeof saved.total === 'number' && saved.spent && typeof saved.spent === 'object') return { ...fresh(), ...saved }
+  } catch {}
+  return fresh()
+}
+
+// The time since the last mark goes to the whole talk and the slide shown.
+function settle(state, now) {
+  if (!state.running || state.slide == null) return { ...state, mark: now }
+  const gone = Math.max(0, now - state.mark)
+  return { ...state, mark: now, total: state.total + gone, spent: { ...state.spent, [state.slide]: (state.spent[state.slide] ?? 0) + gone } }
+}
+
+export function useTalkTimer(key, slideId, { rehearse = false } = {}) {
+  const [state, setState] = useState(() => {
+    const saved = load(key)
+    // ?rehearse=1 starts a rehearsal, unless this page is in one already.
+    if (rehearse && !saved.rehearsing) return { ...fresh(), rehearsing: true, running: true, mark: Date.now(), slide: slideId }
+    return saved
+  })
+  const [, setTick] = useState(0)
+  const stateRef = useRef(state)
+  stateRef.current = state
+  const update = change => setState(current => change(settle(current, Date.now())))
+
+  useEffect(() => { try { sessionStorage.setItem(key, JSON.stringify(state)) } catch {} }, [state])
+  useEffect(() => { if (slideId != null && slideId !== state.slide) update(s => ({ ...s, slide: slideId })) }, [slideId])
+  useEffect(() => {
+    if (!state.running) return
+    const timer = setInterval(() => setTick(n => n + 1), 500)
+    return () => clearInterval(timer)
+  }, [state.running])
+
+  const live = state.running ? Math.max(0, Date.now() - state.mark) : 0
+  const seconds = ms => Math.floor(ms / 1000)
+  return {
+    running: state.running,
+    rehearsing: state.rehearsing,
+    totalElapsed: seconds(state.total + live),
+    slideElapsed: seconds((state.spent[state.slide] ?? 0) + live),
+    // Each slide's time so far, in seconds.
+    spent: () => {
+      const now = settle(stateRef.current, Date.now())
+      return Object.fromEntries(Object.entries(now.spent).map(([id, ms]) => [id, ms / 1000]))
+    },
+    toggle: () => update(s => ({ ...s, running: !s.running })),
+    pause: () => update(s => ({ ...s, running: false })),
+    reset: () => setState(s => ({ ...fresh(), slide: s.slide })),
+    startRehearsal: () => setState(s => ({ ...fresh(), rehearsing: true, running: true, mark: Date.now(), slide: s.slide })),
+    endRehearsal: () => setState(s => ({ ...fresh(), slide: s.slide })),
+  }
+}

package/examples/citations/refs.bib

@@ -1,30 +0,0 @@
-@article{sweller1988,
-  author  = {Sweller, John},
-  title   = {Cognitive Load During Problem Solving: Effects on Learning},
-  journal = {Cognitive Science},
-  year    = {1988},
-  volume  = {12},
-  number  = {2},
-  pages   = {257--285},
-  doi     = {10.1207/s15516709cog1202_4}
-}
-
-@article{roediger2006,
-  author  = {Roediger, Henry L. and Karpicke, Jeffrey D.},
-  title   = {Test-Enhanced Learning: Taking Memory Tests Improves Long-Term Retention},
-  journal = {Psychological Science},
-  year    = {2006},
-  volume  = {17},
-  number  = {3},
-  pages   = {249--255},
-  doi     = {10.1111/j.1467-9280.2006.01693.x}
-}
-
-@book{mayer2009,
-  author    = {Mayer, Richard E.},
-  title     = {Multimedia Learning},
-  edition   = {2},
-  publisher = {Cambridge University Press},
-  address   = {Cambridge},
-  year      = {2009}
-}

package/examples/citations/refs.yml

@@ -1,21 +0,0 @@
-# The same deck can draw on a Typst (Hayagriva) file as well.
-freeman2014:
-  type: Article
-  title: Active learning increases student performance in science, engineering, and mathematics
-  author:
-    - Freeman, Scott
-    - Eddy, Sarah L.
-    - McDonough, Miles
-    - Smith, Michelle K.
-    - Okoroafor, Nnadozie
-    - Jordt, Hannah
-    - Wenderoth, Mary Pat
-  date: 2014
-  page-range: 8410-8415
-  serial-number:
-    doi: 10.1073/pnas.1319030111
-  parent:
-    type: Periodical
-    title: Proceedings of the National Academy of Sciences
-    volume: 111
-    issue: 23

package/examples/citations/slides.md

@@ -1,43 +0,0 @@
----
-theme: academic
-meta:
-  title: "What helps people learn"
-  author: "Tilman Schieber"
-  organization: "FHNW"
-bibliography: [refs.bib, refs.yml]
-csl: apa
----
-
----
-:::meta
-layout: title
-:::
-# What helps people learn
-## Citations from a reference file
-
-:::notes
-The references come from `refs.bib` (BibTeX, as Zotero exports it) and `refs.yml` (Hayagriva, Typst's format). Try `csl: vancouver` or `lang: de` in the deck settings.
-:::
-
----
-# Less on the slide
-
-Working memory holds only a few things at once, so a slide that makes people search wastes it [@sweller1988].
-
-Words spoken alongside a picture beat the same words printed on it [@mayer2009, chap. 11].
-
----
-# Ask, don't tell
-
-As @roediger2006 showed, recalling something fixes it better than reading it again.
-
-Lectures with active learning cut failure rates by about a third [@freeman2014; see also @roediger2006].
-
-:::notes
-Freeman et al. pooled 225 studies [-@freeman2014].
-:::
-
----
-# References
-
-<bibliography />