mdeck 3.10.1 → 3.12.0

package/src/runtime/main.jsx

@@ -33,9 +33,21 @@ import { setCalloutLabels } from './markedSetup'
 import { setDeckLanguage, deckLanguage, stageLabels, t } from '../core/labels.js'
 import { textDirection } from '../core/languages.js'
 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 { watchSlideControls, pressSlideControl } from './slideControls.js'
+import QrCodeTag from '../components/QrCodeTag.jsx'
+import { ToolButton, Popover, PanelSection, SlideControls, Connections, tool } from './PresenterChrome.jsx'
+import mdeckMark from '../../assets/logo/mark.svg'
+import { RehearsalSummary } from './RehearsalSummary.jsx'
+import { planFor, scheduleAt, formatClock } from '../core/timing.js'
+import { KeyHelp, useKeyHelp, attachKeyHelp } from './KeyHelp.jsx'
+import { isHelpKey } from './helpKeys.js'
+import { Reactions } from './Reactions.jsx'
+import { reactionsOf } from '../core/reactions.js'
 
 const PresenterIcon = ({ name, size = 18 }) => <Icon name={name} size={size} style={{ display: 'block' }} />
 
@@ -99,7 +111,24 @@ 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.
+// A deck with reactions (`reactions:`) wants the phones too, between activities.
+let activitiesOf = null, activitiesFound = false, reactionsWanted = false
+const hasActivities = () => {
+  if (activitiesOf !== slidesContent) { activitiesOf = slidesContent; activitiesFound = roomsIn(slidesContent).length > 0 }
+  return activitiesFound || reactionsWanted
+}
+// 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 +139,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 })
@@ -124,13 +153,6 @@ const STEERING = {
   unreachable: 'Phones do not follow: the server does not answer.',
   'other-screen': 'Phones follow another screen, where this presentation was moved on more recently. Change the slide here to take them back.',
 }
-function SteeringNote() {
-  const steering = useSteering()
-  if (!hasActivities() || !steering) return null
-  return <div role="status" style={{ flexShrink: 0, padding: '6px 10px', borderRadius: '5px', fontSize: '12px', lineHeight: 1.4, border: `1px solid ${steering.ok ? '#2c4a35' : '#5c2b28'}`, color: steering.ok ? '#81c995' : '#f28b82' }}>
-    {steering.ok ? 'Phones follow this presentation.' : STEERING[steering.reason]}
-  </div>
-}
 
 function injectSpeakerNotes(slides) {
   let tag = document.getElementById('speaker-notes')
@@ -144,12 +166,15 @@ function injectSpeakerNotes(slides) {
 }
 
 // URL for the presenter's own iframe and preview pane (uses postMessage)
-function buildChildUrl(theme, palette, appearance, slideIndex = null, { draw = false } = {}) {
+function buildChildUrl(theme, palette, appearance, slideIndex = null, { draw = false, remote = false } = {}) {
   const url = new URL(window.location.href)
   url.searchParams.delete('v')
   url.searchParams.set('view', 'deck')
   url.searchParams.set('embedded', '1')
   if (draw) url.searchParams.set('draw', '1')
+  // A phone's small slide is for looking; it does not start drawing.
+  if (remote) url.searchParams.set('remote', '1')
+  else url.searchParams.delete('remote')
   if (theme) url.searchParams.set('theme', theme)
   else url.searchParams.delete('theme')
   setLookParams(url, palette, appearance)
@@ -205,6 +230,81 @@ 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>
+  )
+}
+
+const PRESENTER_LAYOUTS = ['speaker', 'slide', 'remote']
+// A slide's first heading, as plain words, for the phone's "Next:" line.
+function slideTitleOf(slide) {
+  const texts = [slide?.content ?? '', ...Object.values(slide?.regions ?? {}).map(region => region.content ?? '')]
+  for (const text of texts) {
+    const heading = text.replace(/^(```|~~~)[\s\S]*?^\1/gm, '').match(/^#{1,3}\s+(.+)$/m)
+    if (heading) return heading[1].replace(/[*_`]/g, '').replace(/\[([^\]]*)\]\([^)]*\)/g, '$1').trim()
+  }
+  return ''
+}
+// A touch screen gets the slide alone, a computer the speaker layout. The
+// phone remote is chosen, not guessed: its pairing code opens ?layout=remote.
+function defaultLayout() {
+  return matchMedia('(pointer: coarse)').matches ? 'slide' : 'speaker'
+}
+// ?layout= in the address (from a pairing code) chooses the layout; the
+// device then remembers it like a layout chosen with the buttons.
+function requestedLayout() {
+  const url = new URL(window.location.href)
+  const asked = url.searchParams.get('layout')
+  if (!asked) return null
+  url.searchParams.delete('layout')
+  try { history.replaceState(history.state, '', url) } catch {}
+  return PRESENTER_LAYOUTS.includes(asked) ? asked : null
+}
+
 function PresenterView({ deckConfig: firstConfig, slides: firstSlides }) {
   const [index, setIndex] = useState(0)
   // The notes, slide count and phones follow the language shown.
@@ -219,8 +319,25 @@ function PresenterView({ deckConfig: firstConfig, slides: firstSlides }) {
   const [palette, setPalette] = useState(deckConfig.palette ?? '')
   const [appearance, setAppearance] = useState(deckConfig.appearance ?? '')
   const [audienceConnected, setAudienceConnected] = useState(false)
-  const [noteSize, setNoteSize] = useState(13)
+  // Larger notes in the phone remote, whether the address or the device chose it.
+  const [noteSize, setNoteSize] = useState(() => {
+    let saved = null
+    try { saved = localStorage.getItem('mdeck-presenter-layout') } catch {}
+    return (new URL(window.location.href).searchParams.get('layout') ?? saved) === 'remote' ? 17 : 13
+  })
   const [inking, setInking] = useState(false)
+  // Black screen (B): the audience's screens are black, this view veils its slide.
+  const [blank, setBlank] = useState(false)
+  // The join code over the slide (J), on every screen.
+  const [join, setJoin] = useState(false)
+  // The phone clicker: the slide's controls, as its frame reports them (slideControls.js).
+  const [slideControls, setSlideControls] = useState({ items: [], hotspots: 0, hotspot: null })
+  // The overview (O) in this view's slide frame: keys go to it while it is open.
+  const [overviewOpen, setOverviewOpen] = useState(false)
+  const overviewRef = useRef(false)
+  overviewRef.current = overviewOpen
+  // The keys that work now, over everything (?).
+  const [helpOpen, setHelpOpen] = useKeyHelp()
   // Hotspots: the deck's setting until the presenter switches them (H).
   const deckHotspots = (normalMode(deckConfig.hotspots) ?? 'off') !== 'off'
   const [hotspotsForced, setHotspotsForced] = useState(null)
@@ -231,6 +348,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
@@ -241,10 +359,25 @@ function PresenterView({ deckConfig: firstConfig, slides: firstSlides }) {
     return () => document.removeEventListener('gesturestart', stop)
   }, [])
   // 'slide': the slide fills the screen (an iPad); the notes open as a drawer.
+  // 'remote': a phone in the hand, with the slide small, the notes and big
+  // buttons to go on and back.
   const [layout, setLayout] = useState(() => {
-    try { const saved = localStorage.getItem('mdeck-presenter-layout'); if (saved) return saved } catch {}
-    return matchMedia('(pointer: coarse)').matches ? 'slide' : 'speaker'
+    const asked = requestedLayout()
+    if (asked) { try { localStorage.setItem('mdeck-presenter-layout', asked) } catch {} return asked }
+    try { const saved = localStorage.getItem('mdeck-presenter-layout'); if (PRESENTER_LAYOUTS.includes(saved)) return saved } catch {}
+    return defaultLayout()
   })
+  const remoteLayout = layout === 'remote'
+  // A phone's screen must not lock in the middle of the talk (where the
+  // browser lets a page ask: https or this computer).
+  useEffect(() => {
+    if (!remoteLayout || !navigator.wakeLock) return
+    let lock = null, gone = false
+    const ask = () => { if (document.visibilityState === 'visible') navigator.wakeLock.request('screen').then(held => { if (gone) held.release(); else lock = held }, () => {}) }
+    ask()
+    document.addEventListener('visibilitychange', ask)
+    return () => { gone = true; document.removeEventListener('visibilitychange', ask); lock?.release().catch(() => {}) }
+  }, [remoteLayout])
   const [drawerOpen, setDrawerOpen] = useState(false)
   const slideLayout = layout === 'slide'
   function chooseLayout(next) {
@@ -260,21 +393,37 @@ function PresenterView({ deckConfig: firstConfig, slides: firstSlides }) {
   const fullscreenLabel = isFullscreen ? 'Exit full screen (F)' : 'Full screen (F)'
   const fullscreenIcon = isFullscreen ? 'fullscreen-exit' : 'fullscreen'
 
-  const [paletteOpen, setPaletteOpen] = useState(false)
-  // The theme row shows unless the presenter folded it, like the ink toolbar,
-  // into one round button.
-  const [lookFolded, setLookFolded] = useState(() => { try { return localStorage.getItem('mdeck-presenter-look') === 'folded' } catch { return false } })
-  function foldLook(folded) {
-    setLookFolded(folded)
-    setPaletteOpen(false)
-    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 toggleOverviewRef = useRef(null)
   const previewRef = useRef(null)
   const audienceRef = useRef(null)
   const bcRef = useRef(null)
@@ -285,7 +434,6 @@ function PresenterView({ deckConfig: firstConfig, slides: firstSlides }) {
   const langRef = useRef(lang)
   langRef.current = lang
   const stateRef = useRef({ index: 0, step: -1 })
-  const paletteDropRef = useRef(null)
   indexRef.current = index
   // Phones see the look of the slide this view shows, read from its frame.
   useEffect(() => { setLookSource(() => iframeRef.current?.contentDocument) }, [])
@@ -303,7 +451,7 @@ function PresenterView({ deckConfig: firstConfig, slides: firstSlides }) {
   useEffect(() => { if (palette && !offered.some(p => p.id === palette)) setPalette('') }, [theme])
   const notes = useMemo(() => slides.map(s => s.meta?.notes ?? ''), [slides])
   // Preserve current slide when theme/palette causes an iframe reload
-  const iframeSrc = useMemo(() => buildChildUrl(theme, palette, appearance, indexRef.current, { draw: true }), [theme, palette, appearance])
+  const iframeSrc = useMemo(() => buildChildUrl(theme, palette, appearance, indexRef.current, { draw: true, remote: remoteLayout }), [theme, palette, appearance, remoteLayout])
   // previewSrc only recomputes on a change of look; slide changes use postMessage
   const previewSrc = useMemo(
     () => buildChildUrl(theme, palette, appearance, indexRef.current + 1),
@@ -337,6 +485,11 @@ function PresenterView({ deckConfig: firstConfig, slides: firstSlides }) {
       }
       if (source !== iframeRef.current?.contentWindow) return
       if (typeof data?.inkMode === 'boolean') { setInking(data.inkMode); return }
+      // The clicker's slide frame says what can be done on the slide shown.
+      if (data?.slideControls) { setSlideControls(data.slideControls); return }
+      if (typeof data?.overview === 'boolean') { setOverviewOpen(data.overview); return }
+      // ? typed while the slide's frame had the keyboard.
+      if (data?.keyHelp === 'toggle') { setHelpOpen(open => !open); return }
       // Another screen (a paired iPad) switched the language; the notes follow.
       if (LANGUAGES.includes(data?.deckLanguage)) { setLang(data.deckLanguage); return }
       if (!data?.deckStateChanged) return
@@ -357,7 +510,10 @@ function PresenterView({ deckConfig: firstConfig, slides: firstSlides }) {
         return
       }
       stateRef.current = state
+      atEndRef.current = !!data.atEnd
       setIndex(i)
+      setBlank(!!state.blank)
+      setJoin(!!state.join)
       if (data.reason !== 'sync') {
         bcRef.current?.postMessage({ deckControl: { command: 'setState', value: state, order: orderRef.current.stamp() } })
       }
@@ -376,6 +532,14 @@ 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 (overviewRef.current && ['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown', 'PageDown', 'PageUp', 'Home', 'End', 'Enter', ' ', 'Escape', 'o', 'O'].includes(e.key)) {
+        e.preventDefault()
+        sendTo(iframeRef.current?.contentWindow, 'overviewKey', e.key)
+        return
+      }
+      if (e.key === 'o' || e.key === 'O') { e.preventDefault(); toggleOverviewRef.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' :
@@ -385,10 +549,14 @@ function PresenterView({ deckConfig: firstConfig, slides: firstSlides }) {
       if (e.key === 'n' || e.key === 'N') { e.preventDefault(); setDrawerOpen(open => !open); return }
       if ((e.key === 'l' || e.key === 'L') && LANGUAGES.length) { e.preventDefault(); nextLanguage(); return }
       if (e.key === 'h' || e.key === 'H') { e.preventDefault(); toggleHotspots(); return }
-      // Digits zoom to hotspots (or jump to slides without them); Escape zooms out.
+      // B, or a clicker's blank button (a full stop).
+      if (e.key === 'b' || e.key === 'B' || e.key === '.') { e.preventDefault(); sendTo(iframeRef.current?.contentWindow, 'blank', 'toggle'); return }
+      if ((e.key === 'j' || e.key === 'J') && (hasActivities() || reactionsOf(firstConfig))) { e.preventDefault(); sendTo(iframeRef.current?.contentWindow, 'join', 'toggle'); return }
+      // Digits zoom to hotspots; Escape zooms out.
       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,24 +580,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
-    function handler(e) {
-      if (!paletteDropRef.current?.contains(e.target)) setPaletteOpen(false)
-    }
-    document.addEventListener('mousedown', handler)
-    return () => document.removeEventListener('mousedown', handler)
-  }, [paletteOpen])
 
   // When theme/palette changes, tell the audience to hot-swap its theme without
   // a reload. Phones pick it up with the next announcement.
@@ -450,9 +600,17 @@ function PresenterView({ deckConfig: firstConfig, slides: firstSlides }) {
   }, [lang])
   const nextLanguage = () => setLang(current => LANGUAGES[(LANGUAGES.indexOf(current) + 1) % LANGUAGES.length])
 
+  const toggleBlank = () => sendTo(iframeRef.current?.contentWindow, 'blank', 'toggle')
+  // In the slide-only layout the notes drawer would cover the grid.
+  const toggleOverview = () => { setDrawerOpen(false); sendTo(iframeRef.current?.contentWindow, 'overview', 'toggle') }
+  toggleOverviewRef.current = toggleOverview
+  const blankLabel = blank ? 'Show the slide again (B)' : 'Black screen for the audience (B)'
+  const blankOn = { background: '#f0f0f0', borderColor: '#f0f0f0', color: '#111' }
+
   // 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() {
@@ -465,245 +623,45 @@ function PresenterView({ deckConfig: firstConfig, slides: firstSlides }) {
     setAudienceConnected(true)
   }
 
+  // Whether the phones follow this screen; told only when they do not.
+  const steering = useSteering()
   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' }
+  const notesHtml = note
+    ? marked.parse(renderCitations(note).markdown)
+    : '<p>No notes — add a <code>:::notes</code> block to the slide.</p>'
+  const notesDir = textDirection(deckConfig.lang) === 'rtl' ? 'rtl' : undefined
 
-  return (
-    <div class={`presenter presenter--${layout}`} style={{ display: 'grid', gridTemplateColumns: slideLayout ? '1fr' : '2fr 1fr', height: '100dvh', background: '#111', overflow: 'hidden', touchAction: 'pan-x pan-y' }}>
-      <iframe
-        ref={iframeRef}
-        title="Presenter deck"
-        src={iframeSrc}
-        style={{ width: '100%', height: '100%', border: '0' }}
-      />
-      {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>
-          <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>
-          <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>
-          <button class="presenter-hotspots" title={hotspotsOn ? 'Hotspots on: 1–9 zoom in (H)' : 'Hotspots off: 1–9 jump to slides (H)'} aria-label="Hotspots" aria-pressed={hotspotsOn} style={{ ...pill, ...(hotspotsOn ? { background: '#2a2a2a', color: '#fff' } : {}) }} onClick={toggleHotspots}><PresenterIcon name="hotspots" /></button>
-          <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>
-        </div>
-      )}
-      <aside class="presenter-aside" style={{
-        display: slideLayout && !drawerOpen ? 'none' : 'flex',
-        flexDirection: 'column',
-        gap: '14px',
-        padding: '16px',
-        borderLeft: '1px solid #2a2a2a',
-        background: '#111',
-        color: '#ccc',
-        fontFamily: 'ui-sans-serif, system-ui, sans-serif',
-        fontSize: '13px',
-        overflow: 'hidden',
-        ...(slideLayout ? { position: 'fixed', top: 0, right: 0, bottom: 0, width: 'min(380px, 92vw)', zIndex: 19, paddingTop: '64px', boxShadow: '-12px 0 32px rgba(0,0,0,0.5)' } : {}),
-      }}>
-
-        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexShrink: 0 }}>
-          <span style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-            <span style={{ fontWeight: 600, color: '#f0f0f0', fontSize: '14px' }}>Speaker View</span>
-            <ConnectedViews presence={presence} phones={hasActivities()} style={{ color: '#888' }} />
-          </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 && <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>
-          </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>
-          <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>
-            <button style={S.btn} title="Reset the timer" aria-label="Reset the timer" onClick={() => { setTimerRunning(false); setElapsed(0) }}><PresenterIcon name="reset" size={16} /></button>
-          </div>
-        </div>
+  // Reactions from the phones float up here, never on the projector.
+  const reacting = !!reactionsOf(deckConfig)
+  const summaryPanel = 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)
+    }}
+  />
 
-        {hasNext && (
-          <div style={{ flexShrink: 0 }}>
-            <span style={S.label}>Next slide</span>
-            <div style={{ aspectRatio: '16/9', borderRadius: '4px', overflow: 'hidden', border: '1px solid #2a2a2a', background: '#000' }}>
-              <iframe
-                ref={previewRef}
-                title="Next slide preview"
-                src={previewSrc}
-                scrolling="no"
-                style={{ width: '100%', height: '100%', border: '0', pointerEvents: 'none' }}
-              />
-            </div>
-          </div>
-        )}
-
-        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }}>
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '5px' }}>
-            <span style={{ ...S.label, marginBottom: 0 }}>Notes</span>
-            <input
-              type="range" min="11" max="22" step="1" value={noteSize}
-              onInput={e => setNoteSize(Number(e.currentTarget.value))}
-              style={{ width: '80px', accentColor: '#444', cursor: 'pointer', opacity: 0.6 }}
-            />
-          </div>
-          <div class="notes-md" dir={textDirection(deckConfig.lang) === 'rtl' ? 'rtl' : undefined} style={{
-            flex: 1,
-            margin: 0,
-            padding: '10px 12px',
-            lineHeight: 1.6,
-            background: '#0a0a0a',
-            border: '1px solid #2a2a2a',
-            borderRadius: '5px',
-            fontSize: `${noteSize}px`,
-            color: note ? '#c8c8c8' : '#3a3a3a',
-            fontFamily: 'inherit',
-            overflow: 'auto',
-          }}
-            dangerouslySetInnerHTML={{
-              __html: note
-                ? marked.parse(renderCitations(note).markdown)
-                : '<p>No notes — add a <code>:::notes</code> block to the slide.</p>',
-            }}
-          />
-        </div>
-
-        {!lookFolded && <div class="presenter-look" style={{ flexShrink: 0, display: 'flex', gap: '6px', marginBottom: '8px', alignItems: 'flex-end' }}>
-          <label style={{ flex: '1 1 auto', minWidth: 0 }}>
-            <span style={S.label}>Theme</span>
-            <button
-              onClick={() => setThemeModalOpen(true)}
-              style={{ ...S.select, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '4px', cursor: 'pointer' }}
-            >
-              <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{theme}</span>
-              <span style={{ opacity: 0.5, flexShrink: 0 }}><PresenterIcon name="grid" size={13} /></span>
-            </button>
-          </label>
-          <label style={{ flex: '1 1 auto', minWidth: 0 }}>
-            <span style={S.label}>Palette</span>
-            <div ref={paletteDropRef} style={{ position: 'relative' }}>
-              <button
-                class="presenter-palette"
-                onClick={() => setPaletteOpen(o => !o)}
-                style={{ ...S.select, display: 'flex', alignItems: 'center', gap: '5px', cursor: 'pointer', textAlign: 'left' }}
-              >
-                <PaletteSwatches tokens={shown.palette?.[shown.appearance] ?? {}} />
-                <span style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{shown.palette?.title ?? ''}</span>
-                <span style={{ opacity: 0.5, flexShrink: 0 }}><PresenterIcon name="dropdown" size={13} /></span>
-              </button>
-              {paletteOpen && (
-                <div style={{ position: 'absolute', bottom: 'calc(100% + 4px)', left: 0, minWidth: '100%', whiteSpace: 'nowrap', background: '#1a1a1a', border: '1px solid #2e2e2e', borderRadius: '5px', zIndex: 100, overflow: 'hidden', boxShadow: '0 4px 20px rgba(0,0,0,0.6)' }}>
-                  {offered.map(p => (
-                    <div
-                      key={p.id}
-                      class="presenter-palette-option"
-                      title={p.description}
-                      onClick={() => { setPalette(p.id === themeMeta?.palette ? '' : p.id); setPaletteOpen(false) }}
-                      style={{ padding: '6px 8px', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '8px', fontSize: '13px', color: shown.palette?.id === p.id ? '#f0f0f0' : '#aaa', background: shown.palette?.id === p.id ? '#2a2a2a' : 'transparent' }}
-                    >
-                      <PaletteSwatches tokens={p[shown.appearance] ?? {}} />
-                      <span>{p.title}{p.id === themeMeta?.palette ? <span style={{ color: '#666' }}> · theme default</span> : null}</span>
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-          </label>
-          <label style={{ flexShrink: 0 }}>
-            <span style={S.label}>Mode</span>
-            <div class="presenter-appearance" role="group" aria-label="Light or dark" style={{ display: 'flex', gap: '2px', height: '28px' }}>
-              {['light', 'dark'].map(mode => (
-                <button
-                  key={mode}
-                  aria-pressed={shown.appearance === mode}
-                  title={mode === 'light' ? 'Light: for bright rooms' : 'Dark: for dark rooms'}
-                  aria-label={mode === 'light' ? 'Light' : 'Dark'}
-                  onClick={() => setAppearance(mode === (themeMeta?.appearance ?? 'light') ? '' : mode)}
-                  style={{ ...S.btn, padding: '3px 7px', ...(shown.appearance === mode ? { background: '#2a2a2a', color: '#f0f0f0', borderColor: '#444' } : {}) }}
-                ><PresenterIcon name={mode === 'light' ? 'sun' : 'moon'} size={16} /></button>
-              ))}
-            </div>
-          </label>
-          {LANGUAGES.length > 0 && <label style={{ flexShrink: 0 }}>
-            <span style={S.label}>Language</span>
-            <div class="presenter-language" role="group" aria-label="Language" style={{ display: 'flex', gap: '2px', height: '28px' }}>
-              {LANGUAGES.map(code => (
-                <button
-                  key={code}
-                  aria-pressed={lang === code}
-                  title={`${languageName(code)} (L switches)`}
-                  onClick={() => setLang(code)}
-                  style={{ ...S.btn, padding: '3px 7px', ...(lang === code ? { background: '#2a2a2a', color: '#f0f0f0', borderColor: '#444' } : {}) }}
-                >{code.toUpperCase()}</button>
-              ))}
-            </div>
-          </label>}
-          <button class="presenter-look-fold" title="Fold theme and palette" aria-label="Fold theme and palette" onClick={() => foldLook(true)}
-            style={{ ...S.btn, padding: 0, width: '28px', height: '28px', flexShrink: 0, background: 'none', borderColor: 'transparent', color: '#888' }}
-          ><PresenterIcon name="fold" size={16} /></button>
-        </div>}
-
-        <div style={{ flexShrink: 0, display: 'flex', flexDirection: 'column', gap: '8px' }}>
-          <div style={{ display: 'flex', gap: '6px', alignItems: 'center' }}>
-            <button style={S.btn} onClick={() => navCommand('prev')}><PresenterIcon name="prev" size={15} />Prev</button>
-            <button style={S.btn} onClick={() => navCommand('next')}>Next<PresenterIcon name="next" size={15} /></button>
-            <button style={S.btn} onClick={() => navCommand('reset')}>Reset</button>
-            <button
-              class="presenter-draw"
-              title="Draw on the slide (D)"
-              aria-pressed={inking}
-              style={{ ...S.btn, ...(inking ? { background: '#e11d48', borderColor: '#e11d48', color: '#fff' } : {}) }}
-              onClick={() => sendTo(iframeRef.current?.contentWindow, 'ink', 'toggle')}
-            ><PresenterIcon name="pen" size={15} />Draw</button>
-            <button
-              class="presenter-hotspots"
-              title={hotspotsOn ? 'Hotspots on: 1–9 zoom in, 0 shows the whole slide (H)' : 'Hotspots off: 1–9 jump to slides (H)'}
-              aria-pressed={hotspotsOn}
-              aria-label="Hotspots"
-              style={{ ...S.btn, ...(hotspotsOn ? { background: '#2a2a2a', borderColor: '#444', color: '#f0f0f0' } : {}) }}
-              onClick={toggleHotspots}
-            ><PresenterIcon name="hotspots" size={15} /></button>
-            {lookFolded && <button
-              class="presenter-look-unfold"
-              title={`Theme and palette: ${themeMeta?.title ?? theme}, ${shown.palette?.title ?? ''}`}
-              aria-label="Show theme and palette"
-              onClick={() => foldLook(false)}
-              style={{ ...S.btn, position: 'relative', padding: 0, width: '32px', height: '32px', borderRadius: '50%' }}
-            >
-              <PresenterIcon name="look" size={16} />
-              <span style={{ position: 'absolute', right: '2px', bottom: '2px', width: '9px', height: '9px', borderRadius: '50%', background: shown.palette?.[shown.appearance]?.['--accent'] ?? '#888', boxShadow: '0 0 0 1.5px #222' }} />
-            </button>}
-            <button
-              style={{
-                ...S.btn,
-                marginLeft: 'auto',
-                color: audienceConnected ? '#444' : '#bbb',
-              }}
-              onClick={openAudienceWindow}
-            >
-              {audienceConnected ? 'Reconnect' : 'Audience'}
-            </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' : ''}
-          </div>
-        </div>
-
-      </aside>
-
-      {themeModalOpen && (
+  // The theme picker, from the settings.
+  const themeModal = (
         <div
           style={{ position: 'fixed', inset: 0, zIndex: 200, background: 'rgba(0,0,0,0.85)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
           onClick={() => setThemeModalOpen(false)}
@@ -735,11 +693,218 @@ function PresenterView({ deckConfig: firstConfig, slides: firstSlides }) {
             </div>
           </div>
         </div>
-      )}
+  )
+  // The controls, the same in every layout (PresenterChrome.jsx); the layouts
+  // differ in where they put them.
+  const frame = () => iframeRef.current?.contentWindow
+  const problem = hasActivities() && steering && !steering.ok ? STEERING[steering.reason] : null
+  const slideBar = big => <SlideControls controls={slideControls} press={i => sendTo(frame(), 'slideControl', i)} zoom={key => sendTo(frame(), 'hotspotKey', key)} big={big} />
+  // The audience window, one click away (not on a phone: it would open there).
+  const audienceButton = <ToolButton class="presenter-audience" icon="projector" label={audienceConnected ? 'Open the audience window again' : 'Open the audience window, for the projector'} onClick={openAudienceWindow} />
+  const connections = <Connections presence={presence} phones={hasActivities()} problem={problem} />
+  const timerChip = <button class="presenter-clock" title={timer.running ? 'Pause the timer (T)' : 'Start the timer (T)'} aria-pressed={timer.running} onClick={timer.toggle}
+    style={{ ...tool, gap: '8px', whiteSpace: 'nowrap', fontVariantNumeric: 'tabular-nums', color: timer.running ? '#f0f0f0' : '#777' }}>
+    <Icon name={timer.running ? 'pause' : 'play'} size={14} style={{ display: 'block' }} />{clock}
+    {timed && !remoteLayout && <span class="presenter-slide-time" style={{ color: slideColor, fontSize: '12px' }}>{slideText}</span>}
+  </button>
+  const finishButton = timer.rehearsing && <button class="presenter-rehearsing" style={{ ...tool, color: '#f28b82' }} title="Finish the rehearsal" onClick={finishRehearsal}>● Finish</button>
+  const nav = <>
+    <ToolButton icon="prev" label="Previous (←)" onClick={() => navCommand('prev')} />
+    <ToolButton icon="next" label="Next (→, Space)" onClick={() => navCommand('next')} />
+  </>
+  const drawButton = <ToolButton class="presenter-draw" icon="pen" label="Draw on the slide (D)" pressed={inking} style={inking ? { background: '#e11d48', borderColor: '#e11d48', color: '#fff' } : undefined} onClick={() => sendTo(frame(), 'ink', 'toggle')} />
+  const blankButton = <ToolButton class="presenter-blank" icon="blank" label={blankLabel} pressed={blank} onClick={toggleBlank} />
+  // Only where phones join: decks with activities or reactions.
+  const joinButton = (hasActivities() || reacting) && <ToolButton class="presenter-join" icon="join" label={join ? 'Hide the join code (J)' : 'Show the join code on the slide (J)'} pressed={join} onClick={() => sendTo(frame(), 'join', 'toggle')} />
+  const overviewButton = <ToolButton class="presenter-overview" icon="overview" label="All slides (O)" pressed={overviewOpen} onClick={toggleOverview} />
+  const hotspotsButton = <ToolButton class="presenter-hotspots" icon="hotspots" label={hotspotsOn ? 'Hotspots on: 1–9 zoom in (H)' : 'Hotspots off (H)'} pressed={hotspotsOn} onClick={toggleHotspots} />
+  const fullscreenButton = canFullscreen && <ToolButton class="presenter-fullscreen" icon={fullscreenIcon} label={fullscreenLabel} pressed={isFullscreen} onClick={() => fullscreen.toggle()} />
+  const separator = <span aria-hidden="true" style={{ width: '1px', alignSelf: 'stretch', margin: '6px 4px', background: '#2a2a2a' }} />
+  const LAYOUTS = [['speaker', 'speaker', 'Speaker', 'Slide, notes and next slide side by side (a computer)'], ['slide', 'tablet', 'Slide only', 'The slide fills the screen, notes in a drawer (an iPad)'], ['remote', 'phone', 'Clicker', 'Notes, time and big buttons (a phone)']]
+  const settings = <Popover class="presenter-settings" label="Settings" trigger={<Icon name="settings" size={18} style={{ display: 'block' }} />}>
+    <PanelSection title="Layout">
+      <span role="group" aria-label="Layout" style={{ display: 'flex', gap: '6px', flexWrap: 'wrap' }}>
+        {LAYOUTS.map(([id, icon, name, hint]) => <button key={id} type="button" class={`presenter-layout presenter-layout--${id}`} title={hint} aria-pressed={layout === id} onClick={() => chooseLayout(id)}
+          style={{ ...S.btn, ...(layout === id ? { background: '#2a2a2a', color: '#fff', borderColor: '#444' } : {}) }}><Icon name={icon} size={16} />{name}</button>)}
+      </span>
+    </PanelSection>
+    {remoteLayout && <PanelSection title="During the talk">
+      <span style={{ display: 'flex', gap: '6px', flexWrap: 'wrap' }}>{overviewButton}{hotspotsButton}{fullscreenButton}</span>
+    </PanelSection>}
+    <PanelSection title="Look" class="presenter-look">
+      <span style={{ display: 'flex', gap: '6px', alignItems: 'center', flexWrap: 'wrap' }}>
+        <button type="button" onClick={() => setThemeModalOpen(true)} style={{ ...S.btn }} title="Choose the theme"><Icon name="grid" size={14} />{themeMeta?.title ?? theme}</button>
+        <span class="presenter-appearance" role="group" aria-label="Light or dark" style={{ display: 'flex', gap: '2px' }}>
+          {['light', 'dark'].map(mode => <button key={mode} type="button" aria-pressed={shown.appearance === mode} title={mode === 'light' ? 'Light: for bright rooms' : 'Dark: for dark rooms'} aria-label={mode === 'light' ? 'Light' : 'Dark'}
+            onClick={() => setAppearance(mode === (themeMeta?.appearance ?? 'light') ? '' : mode)}
+            style={{ ...S.btn, padding: '5px 8px', ...(shown.appearance === mode ? { background: '#2a2a2a', color: '#f0f0f0', borderColor: '#444' } : {}) }}><Icon name={mode === 'light' ? 'sun' : 'moon'} size={16} /></button>)}
+        </span>
+      </span>
+      <span class="presenter-palette" role="group" aria-label="Palette" style={{ display: 'flex', flexDirection: 'column', gap: '2px' }}>
+        {offered.map(p => <button key={p.id} type="button" class="presenter-palette-option" title={p.description} aria-pressed={shown.palette?.id === p.id}
+          onClick={() => setPalette(p.id === themeMeta?.palette ? '' : p.id)}
+          style={{ ...S.btn, justifyContent: 'flex-start', gap: '8px', border: 'none', background: shown.palette?.id === p.id ? '#2a2a2a' : 'transparent', color: shown.palette?.id === p.id ? '#f0f0f0' : '#aaa' }}>
+          <PaletteSwatches tokens={p[shown.appearance] ?? {}} /><span>{p.title}{p.id === themeMeta?.palette ? <span style={{ color: '#666' }}> · theme default</span> : null}</span>
+        </button>)}
+      </span>
+      {LANGUAGES.length > 0 && <span class="presenter-language" role="group" aria-label="Language" style={{ display: 'flex', gap: '2px', flexWrap: 'wrap' }}>
+        {LANGUAGES.map(code => <button key={code} type="button" aria-pressed={lang === code} title={`${languageName(code)} (L switches)`} onClick={() => setLang(code)}
+          style={{ ...S.btn, padding: '5px 9px', ...(lang === code ? { background: '#2a2a2a', color: '#f0f0f0', borderColor: '#444' } : {}) }}>{code.toUpperCase()}</button>)}
+      </span>}
+    </PanelSection>
+    <PanelSection title="Timer">
+      <span style={{ display: 'flex', gap: '6px', flexWrap: 'wrap' }}>
+        <button type="button" class="presenter-timer-reset" style={S.btn} onClick={timer.reset}><Icon name="reset" size={16} />Reset the timer</button>
+        {!timer.rehearsing && <button type="button" class="presenter-rehearse" style={S.btn} title="Time each slide, then save the times into the deck" onClick={timer.startRehearsal}><Icon name="rehearse" size={16} />Rehearse</button>}
+      </span>
+    </PanelSection>
+    <label class="presenter-note-size" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+      <span>Size of the notes</span>
+      <span aria-hidden="true" style={{ marginInlineStart: 'auto', fontSize: '11px', color: '#888' }}>A</span>
+      <input type="range" min="11" max="26" step="1" value={noteSize} aria-label="Size of the notes" onInput={e => setNoteSize(Number(e.currentTarget.value))} style={{ width: '96px', accentColor: '#888', cursor: 'pointer' }} />
+      <span aria-hidden="true" style={{ fontSize: '17px', color: '#888' }}>A</span>
+    </label>
+    {launchPage && <a class="presenter-home" href={launchPage} style={{ ...S.btn, alignSelf: 'flex-start', boxSizing: 'border-box', textDecoration: 'none' }}><Icon name="home" size={16} />Back to the launch page</a>}
+  </Popover>
+  const notesBox = <div class="notes-md" dir={notesDir} style={{ flex: 1, minHeight: 0, overflow: 'auto', margin: 0, padding: '12px 14px', lineHeight: 1.55, background: '#0a0a0a', border: '1px solid #2a2a2a', borderRadius: '8px', fontSize: `${noteSize}px`, color: note ? '#c8c8c8' : '#3a3a3a' }}
+    dangerouslySetInnerHTML={{ __html: notesHtml }} />
+  const nextTitle = hasNext ? `Next: ${slideTitleOf(slides[index + 1]) || `slide ${index + 2}`}` : 'Last slide'
+  const schedule = timed && <div class="presenter-schedule" style={{ display: 'flex', justifyContent: 'space-between', gap: '8px', flexShrink: 0, 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><span class="presenter-delta" style={{ color: deltaColor }}>{deltaText}</span><span style={{ color: '#555' }}> · of {formatClock(plan.total)}</span></span>
+  </div>
+  const rehearsing = timer.rehearsing && <div class="presenter-rehearsing" role="status" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexShrink: 0, padding: '6px 10px', borderRadius: '8px', 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>
+  const blankNote = blank && <div class="presenter-blank-note" role="status" style={{ position: 'fixed', left: layout === 'speaker' ? 'calc(100% / 3)' : '50%', bottom: remoteLayout ? '110px' : '76px', transform: 'translateX(-50%)', zIndex: 18, display: 'flex', alignItems: 'center', gap: '8px', padding: '8px 14px', borderRadius: '999px', background: 'rgba(17,17,17,0.92)', border: '1px solid #3a3a3a', color: '#f0f0f0', fontFamily: 'ui-sans-serif, system-ui, sans-serif', fontSize: '14px', pointerEvents: 'none' }}>
+    <PresenterIcon name="blank" size={16} />The audience sees a black screen
+  </div>
+  const font = { fontFamily: 'ui-sans-serif, system-ui, sans-serif', fontSize: '13px', color: '#ccc' }
+  const extras = <>
+    {blankNote}
+    {reacting && <Reactions style={remoteLayout ? { left: '16px', bottom: '100px' } : undefined} />}
+    {helpOpen && <KeyHelp
+      context={{ view: 'presenter', blank, join: hasActivities() || reacting, joinShown: join, overview: overviewOpen, hotspots: slideHotspots, hotspotSwitch: hotspotsOn, inking, fullscreen: canFullscreen, drawer: slideLayout, languages: LANGUAGES.length > 0 }}
+      onClose={() => setHelpOpen(false)}
+    />}
+    {summaryPanel}
+    {themeModalOpen && themeModal}
+  </>
+
+  // A phone in the hand: the slide small at the top, what can be done on it,
+  // the notes, and the buttons to go on and back where the thumb is.
+  if (remoteLayout) {
+    const big = { ...S.btn, height: '72px', fontSize: '18px', fontWeight: 600, borderRadius: '14px' }
+    return (
+      <div class="presenter presenter--remote" style={{ ...font, fontSize: '14px', display: 'flex', flexDirection: 'column', gap: '10px', height: '100dvh', boxSizing: 'border-box', padding: 'max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left))', background: '#111', overflow: 'hidden', touchAction: 'manipulation' }}>
+        <div class="presenter-remote-bar" style={{ display: 'flex', alignItems: 'center', gap: '6px', flexShrink: 0, fontVariantNumeric: 'tabular-nums' }}>
+          <SlideJump index={index} total={slides.length} onJump={i => navCommand('goTo', i)} style={{ color: '#888', whiteSpace: 'nowrap' }} />
+          <span style={{ flex: 1 }} />
+          {finishButton}{timerChip}{joinButton}{blankButton}{connections}{settings}
+        </div>
+        <div style={{ position: 'relative', flexShrink: 0, width: '100%', maxHeight: '32dvh', aspectRatio: '16/9', margin: '0 auto', borderRadius: '8px', overflow: 'hidden', border: '1px solid #2a2a2a', background: '#000' }}>
+          <iframe ref={iframeRef} title="Presenter deck" src={iframeSrc} style={{ width: '100%', height: '100%', border: '0', display: 'block' }} />
+        </div>
+        <div style={{ display: 'flex', justifyContent: 'space-between', gap: '8px', flexShrink: 0, fontSize: '13px', color: '#888', fontVariantNumeric: 'tabular-nums' }}>
+          <span style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{nextTitle}</span>
+          {timed && <span style={{ flexShrink: 0 }}><span class="presenter-slide-time" style={{ color: slideColor }}>{slideText}</span> · <span class="presenter-delta" style={{ color: deltaColor }}>{deltaText}</span></span>}
+        </div>
+        {savedNote && <div role="status" style={{ flexShrink: 0, color: '#81c995' }}>{savedNote}</div>}
+        {slideBar(true)}
+        {notesBox}
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: '10px', flexShrink: 0 }}>
+          <button class="presenter-remote-prev" style={big} aria-label="Previous" onClick={() => navCommand('prev')}><PresenterIcon name="prev" size={28} /></button>
+          <button class="presenter-remote-next" style={{ ...big, background: '#f0f0f0', borderColor: '#f0f0f0', color: '#111' }} aria-label="Next" onClick={() => navCommand('next')}>Next<PresenterIcon name="next" size={28} /></button>
+        </div>
+        {extras}
+      </div>
+    )
+  }
+
+  // The next slide and the notes: the speaker layout's column, the iPad's drawer.
+  const aside = <aside class="presenter-aside" style={{
+    ...font, display: slideLayout && !drawerOpen ? 'none' : 'flex', flexDirection: 'column', gap: '12px', padding: '14px', boxSizing: 'border-box',
+    borderLeft: '1px solid #2a2a2a', background: '#111', overflow: 'hidden', minHeight: 0,
+    ...(slideLayout ? { position: 'fixed', top: 0, right: 0, bottom: 0, width: 'min(400px, 92vw)', zIndex: 19, paddingTop: '68px', boxShadow: '-12px 0 32px rgba(0,0,0,0.5)' } : {}),
+  }}>
+    {!slideLayout && <div style={{ display: 'flex', alignItems: 'center', gap: '6px', flexShrink: 0 }}>
+      <SlideJump index={index} total={slides.length} pad={2} onJump={i => navCommand('goTo', i)} style={{ color: '#888', fontVariantNumeric: 'tabular-nums' }} />
+      <span style={{ flex: 1 }} />
+      {finishButton}{timerChip}{audienceButton}{connections}{settings}
+    </div>}
+    {slideLayout && <span style={{ display: 'none' }}><SlideJump index={index} total={slides.length} pad={2} onJump={i => navCommand('goTo', i)} /></span>}
+    {schedule}
+    {rehearsing}
+    {savedNote && <div role="status" style={{ flexShrink: 0, color: '#81c995' }}>{savedNote}</div>}
+    {hasNext ? <div style={{ display: 'flex', gap: '10px', alignItems: 'center', flexShrink: 0 }}>
+      <div style={{ width: '46%', flexShrink: 0, aspectRatio: '16/9', borderRadius: '6px', overflow: 'hidden', border: '1px solid #2a2a2a', background: '#000' }}>
+        <iframe ref={previewRef} title="Next slide preview" src={previewSrc} scrolling="no" style={{ width: '100%', height: '100%', border: '0', pointerEvents: 'none' }} />
+      </div>
+      <span style={{ color: '#888', lineHeight: 1.4 }}>{nextTitle}</span>
+    </div> : <span style={{ color: '#666', flexShrink: 0 }}>Last slide</span>}
+    {notesBox}
+  </aside>
+
+  // The iPad: the slide fills the screen, one slim bar on top.
+  if (slideLayout) return (
+    <div class="presenter presenter--slide" style={{ height: '100dvh', background: '#111', overflow: 'hidden', touchAction: 'pan-x pan-y' }}>
+      <iframe ref={iframeRef} title="Presenter deck" src={iframeSrc} style={{ width: '100%', height: '100%', border: '0', display: 'block' }} />
+      <div class="presenter-pill" role="toolbar" aria-label="Presenter" style={{ ...font, 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', flexWrap: 'wrap', justifyContent: 'flex-end', maxWidth: 'calc(100vw - 20px)', padding: '4px', borderRadius: '14px', background: 'rgba(17,17,17,0.9)', border: '1px solid #2a2a2a', fontVariantNumeric: 'tabular-nums' }}>
+        <SlideJump index={index} total={slides.length} onJump={i => navCommand('goTo', i)} style={{ padding: '0 4px', color: '#888' }} />
+        {finishButton}{timerChip}
+        {separator}{nav}
+        {separator}{drawButton}{blankButton}{joinButton}{overviewButton}{hotspotsButton}
+        {(slideControls.items.length > 0 || slideControls.hotspots > 0) && <>{separator}{slideBar(false)}</>}
+        {separator}
+        <ToolButton class="presenter-notes" icon="file-text" label="Notes and the next slide (N)" pressed={drawerOpen} onClick={() => setDrawerOpen(open => !open)} />
+        {fullscreenButton}{audienceButton}{connections}{settings}
+      </div>
+      {aside}
+      {extras}
+    </div>
+  )
+
+  // A computer: the slide with its toolbar, the time, next slide and notes beside it.
+  return (
+    <div class="presenter presenter--speaker" style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', height: '100dvh', background: '#111', overflow: 'hidden' }}>
+      <div style={{ display: 'flex', flexDirection: 'column', minWidth: 0, minHeight: 0 }}>
+        <iframe ref={iframeRef} title="Presenter deck" src={iframeSrc} style={{ flex: 1, minHeight: 0, width: '100%', border: '0', display: 'block' }} />
+        <div class="presenter-toolbar" role="toolbar" aria-label="Presenter" style={{ ...font, display: 'flex', alignItems: 'center', gap: '4px', flexWrap: 'wrap', padding: '8px 12px', borderTop: '1px solid #2a2a2a', background: '#111' }}>
+          {nav}
+          {separator}{drawButton}{blankButton}{joinButton}{overviewButton}{hotspotsButton}{fullscreenButton}
+          {(slideControls.items.length > 0 || slideControls.hotspots > 0) && <>{separator}<span style={{ ...S.label, marginBottom: 0, marginInlineEnd: '4px' }}>This slide</span>{slideBar(false)}</>}
+          <span style={{ flex: 1 }} />
+          <ToolButton class="presenter-help" icon="guides" label="All keys (?)" onClick={() => setHelpOpen(open => !open)} />
+        </div>
+      </div>
+      {aside}
+      {extras}
     </div>
   )
 }
 
+// The join code over the slide (J in the presenter view): the room scans it
+// from the projector, a phone following the talk shows it too. A click on it,
+// or the next step, hides it again where the screen is not only watching.
+function JoinOverlay({ stage }) {
+  const [on, setOn] = useState(stage.join)
+  useEffect(() => {
+    const follow = () => setOn(stage.join)
+    stage.addEventListener('joinchange', follow)
+    return () => stage.removeEventListener('joinchange', follow)
+  }, [])
+  if (!on) return null
+  const size = Math.round(Math.min(window.innerHeight * 0.55, window.innerWidth * 0.5, 520))
+  return <div class="join-overlay export-hidden" role="dialog" aria-label={t('join.scan')}
+    onClick={() => { if (!stage.hasAttribute('data-watching')) stage.setJoin(false, 'click') }}
+    style={{ position: 'fixed', inset: 0, zIndex: 60, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(0, 0, 0, 0.72)' }}>
+    <div style={{ background: '#fff', color: '#111', borderRadius: '18px', padding: '24px 32px', '--qr-ink': '#000', '--qr-bg': '#fff', '--ink': '#111', '--muted': '#555' }}>
+      <QrCodeTag join size={String(size)} />
+    </div>
+  </div>
+}
+
 // Renders (or re-renders) the deck stage. Slides are keyed by id so an edit to
 // one slide leaves the others and the stage's position untouched.
 let unfit = null
@@ -801,6 +966,7 @@ async function init() {
   setDeckLanguage(deckConfig)
   document.documentElement.lang = deckLanguage()
   configureLive(deckConfig)
+  reactionsWanted = !!reactionsOf(deckConfig)
   setSavedResults(savedResults)
   const { slides } = parsed
   const presenterMode = view === 'presenter'
@@ -812,12 +978,17 @@ 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)
 
   if (presenterMode) {
     actAsPresenter()
+    // A tool of mdeck's, like the launch page: its mark in the tab.
+    const icon = document.querySelector('link[rel=icon]') ?? document.head.appendChild(Object.assign(document.createElement('link'), { rel: 'icon' }))
+    icon.href = mdeckMark
     followPresence()
     document.body.style.margin = '0'
     const s = document.createElement('style')
@@ -850,6 +1021,14 @@ async function init() {
     // Digits and Escape typed in the presenter view, and its hotspots switch.
     else if (ctrl.command === 'hotspotKey' && typeof ctrl.value === 'string') stage.hotspotKey(ctrl.value)
     else if (ctrl.command === 'hotspots') stage.hotspotsForced = ctrl.value
+    // The phone clicker pressed one of the slide's controls.
+    else if (ctrl.command === 'slideControl' && Number.isInteger(ctrl.value)) pressSlideControl(stage, ctrl.value)
+    // B in the presenter view: the screens the audience sees go black.
+    // O in the presenter view: the overview opens in its own slide frame.
+    else if (ctrl.command === 'overview') stage.overview = ctrl.value === 'toggle' ? !stage.overview : !!ctrl.value
+    else if (ctrl.command === 'overviewKey' && typeof ctrl.value === 'string') stage.overviewKey(ctrl.value)
+    else if (ctrl.command === 'blank') stage.setBlank(ctrl.value === 'toggle' ? !stage.blank : !!ctrl.value, 'keyboard')
+    else if (ctrl.command === 'join') stage.setJoin(ctrl.value === 'toggle' ? !stage.join : !!ctrl.value, 'keyboard')
   }
 
   // The same slide and step in another language, its words and mdeck's own;
@@ -913,6 +1092,15 @@ async function init() {
 
   // Drawing (D) in the full-screen deck and the presenter's main frame.
   const inkStage = document.querySelector('deck-stage')
+  // The join code over the slide, on every screen but the next-slide preview;
+  // J shows it in a deck phones join.
+  if (inkStage && (hasActivities() || reactionsOf(deckConfig))) inkStage.setAttribute('data-joinable', '')
+  if (inkStage && !(embedded && !drawHere)) {
+    const host = document.createElement('div')
+    host.className = 'join-overlay-host'
+    document.body.appendChild(host)
+    render(<JoinOverlay stage={inkStage} />, host)
+  }
   // Main slide frames and audience windows both send and follow navigation.
   // Share their position connection with ink; previews stay on local channels.
   if (inkStage && (drawHere || audienceMode)) {
@@ -938,8 +1126,37 @@ async function init() {
   }
 
   // The presenter's slide shows the hotspots' keys; no screen the audience sees does.
-  if (inkStage && embedded && drawHere) inkStage.setAttribute('data-hotspot-badges', '')
-  if (inkStage && drawHere) {
+  // A black screen only veils it.
+  // The phone remote's small slide only shows: no keys, no drawing.
+  const remoteFrame = embedded && url.searchParams.get('remote') === '1'
+  if (inkStage && embedded && drawHere) {
+    if (!remoteFrame) inkStage.setAttribute('data-hotspot-badges', '')
+    inkStage.setAttribute('data-presenter', '')
+    // The presenter view routes the keys to the overview while it is open.
+    inkStage.addEventListener('overviewchange', event => window.parent.postMessage({ overview: event.detail.open }, window.location.origin))
+    // A frame that reloaded (another theme) has none open.
+    window.parent.postMessage({ overview: false }, window.location.origin)
+  }
+  // ? lists the keys that work now: in a deck window over the slide; in the
+  // presenter's slide frame it goes to the presenter view, which shows them.
+  if (inkStage && !embedded && !audienceMode && !followMode) attachKeyHelp(inkStage, { canDraw: drawHere })
+  else if (embedded && drawHere) {
+    window.addEventListener('keydown', event => {
+      if (!isHelpKey(event) || event.target?.closest?.('input, textarea, select, [contenteditable=""], [contenteditable="true"]')) return
+      event.preventDefault()
+      window.parent.postMessage({ keyHelp: 'toggle' }, window.location.origin)
+    })
+  }
+  // The presenter view shows the slide's own controls in its toolbar, the
+  // clicker as big buttons (slideControls.js).
+  if (inkStage && embedded && drawHere) watchSlideControls(inkStage, controls => window.parent.postMessage({ slideControls: controls }, window.location.origin))
+  if (inkStage && remoteFrame) {
+    watchInk(inkStage, { storageKey: inkStorageKey, transports: [roomTransport({ receive: true, view: 'presenter', onPresence: presence => {
+      watchedOnServer = (presence?.views ?? []).some(entry => entry.view === 'audience' || entry.view === 'deck')
+      markWatched()
+      window.parent.postMessage({ presence }, window.location.origin)
+    } })] })
+  } else if (inkStage && drawHere) {
     attachInk(inkStage, {
       storageKey: inkStorageKey,
       // The presenter's main frame tells the presenter view who is connected.
@@ -968,7 +1185,12 @@ async function init() {
   } else if (inkStage && followMode) {
     // The presenter's slide and ink, read from the stage room; counted as a phone.
     inkStage.setAttribute('data-follower', '')
-    onStagePosition(position => { if (position.lang) switchLanguage(position.lang, { announce: false }) })
+    inkStage.setAttribute('data-watching', '')
+    onStagePosition(position => {
+      if (position.lang) switchLanguage(position.lang, { announce: false })
+      if (typeof position.blank === 'boolean') inkStage.setBlank(position.blank, 'sync')
+      if (typeof position.join === 'boolean') inkStage.setJoin(position.join, 'sync')
+    })
     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) {