mdeck 3.7.1 → 3.8.0

package/src/runtime/main.jsx

@@ -3,7 +3,7 @@ import { h, render } from 'preact'
 import { useEffect, useMemo, useRef, useState } from 'preact/hooks'
 import { marked } from 'marked'
 import { renderCitations, onBibliography } from './citations.js'
-import deckFileContent from 'virtual:slides'
+import deckFileContent, { language as fileLanguage, languages as deckLanguages } from 'virtual:slides'
 import { parseSlides } from '../core/parseSlides'
 import { validateDeck } from '../core/validateDeck'
 import { loadTheme, setExtensionOverrides, THEME_NAMES, THEME_METAS, PALETTES } from './themeLoader'
@@ -31,9 +31,11 @@ import './reader.css'
 import { SlideRenderer, manifests } from '../layouts/renderSlide'
 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'
 
 const PresenterIcon = ({ name, size = 18 }) => <Icon name={name} size={size} style={{ display: 'block' }} />
 
@@ -79,6 +81,24 @@ function withConfigOverrides(deckConfig) {
 // The deck's text: the file's, or on the dev server with ?sample=1 the sample
 // deck, which the design page's pictures show.
 let slidesContent = deckFileContent
+// The deck's languages under `mdeck run`, one file each (talk.en.md beside
+// talk.de.md); a deck in one language has none and shows no switch. The
+// presenter view switches every window, keeping the slide and step: slides
+// match by their place in the deck.
+const LANGUAGES = Object.keys(deckLanguages)
+let deckLang = fileLanguage
+function chooseLanguage(lang) {
+  if (!LANGUAGES.includes(lang)) return false
+  deckLang = lang
+  slidesContent = deckLanguages[lang]
+  return true
+}
+// A deck without `lang` is in the language its file name gives.
+const withFileLanguage = config => config.lang || !deckLang ? config : { ...config, lang: deckLang }
+// A language's name in that language, for the switch's tooltip.
+function languageName(lang) {
+  try { return new Intl.DisplayNames([lang], { type: 'language' }).of(lang) } catch { return lang }
+}
 const hasActivities = () => roomsIn(slidesContent).length > 0
 // 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.
@@ -185,8 +205,15 @@ function usePresence() {
   return presence
 }
 
-function PresenterView({ deckConfig, slides }) {
+function PresenterView({ deckConfig: firstConfig, slides: firstSlides }) {
   const [index, setIndex] = useState(0)
+  // The notes, slide count and phones follow the language shown.
+  const [lang, setLang] = useState(deckLang)
+  const { slides, deckConfig } = useMemo(() => {
+    if (!chooseLanguage(lang)) return { slides: firstSlides, deckConfig: firstConfig }
+    const parsed = parseSlides(slidesContent)
+    return { slides: parsed.slides, deckConfig: { ...firstConfig, ...withFileLanguage(parsed.deckConfig) } }
+  }, [lang])
   const [theme, setTheme] = useState(deckConfig.theme ?? 'neue')
   // '' means the theme's own default, for both.
   const [palette, setPalette] = useState(deckConfig.palette ?? '')
@@ -194,6 +221,15 @@ function PresenterView({ deckConfig, slides }) {
   const [audienceConnected, setAudienceConnected] = useState(false)
   const [noteSize, setNoteSize] = useState(13)
   const [inking, setInking] = useState(false)
+  // Hotspots: the deck's setting until the presenter switches them (H).
+  const deckHotspots = (normalMode(deckConfig.hotspots) ?? 'off') !== 'off'
+  const [hotspotsForced, setHotspotsForced] = useState(null)
+  const hotspotsOn = hotspotsForced ?? deckHotspots
+  const hotspotsRef = useRef(null)
+  hotspotsRef.current = hotspotsForced
+  const toggleHotspots = () => setHotspotsForced(forced => !(forced ?? deckHotspots))
+  // 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()
   // 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])
@@ -246,6 +282,8 @@ function PresenterView({ deckConfig, slides }) {
   const orderRef = useRef(null)
   orderRef.current ??= createOrder()
   const indexRef = useRef(0)
+  const langRef = useRef(lang)
+  langRef.current = lang
   const stateRef = useRef({ index: 0, step: -1 })
   const paletteDropRef = useRef(null)
   indexRef.current = index
@@ -255,7 +293,7 @@ function PresenterView({ deckConfig, slides }) {
   useEffect(() => {
     announceSlide({ slides, deckConfig }, index, { initial: !announcedOnce.current })
     announcedOnce.current = true
-  }, [index])
+  }, [index, lang])
 
   const themeMeta = THEME_METAS[theme]
   // The palettes this theme offers, and what the deck shows right now.
@@ -289,17 +327,33 @@ function PresenterView({ deckConfig, slides }) {
   useEffect(() => {
     function onMessage({ data, source }) {
       if (source === previewRef.current?.contentWindow) {
-        if (data?.deckStateChanged && data.reason === 'init') sendTo(source, 'goTo', indexRef.current + 1)
+        // A preview that (re)loaded, such as after the last slide, opens in
+        // the deck file's language: it gets the one shown.
+        if (data?.deckStateChanged && data.reason === 'init') {
+          sendTo(source, 'goTo', indexRef.current + 1)
+          if (LANGUAGES.length) sendTo(source, 'setLanguage', langRef.current)
+        }
         return
       }
       if (source !== iframeRef.current?.contentWindow) return
       if (typeof data?.inkMode === 'boolean') { setInking(data.inkMode); 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
       const state = data.deckStateChanged
       const i = state.index
       // Theme reloads must not reset the current reveal position.
+      // A reloaded frame opens in the deck file's language; after its place
+      // is back, it gets the one shown.
+      const keepLanguage = () => {
+        if (data.reason !== 'init') return
+        if (LANGUAGES.length) sendTo(iframeRef.current?.contentWindow, 'setLanguage', langRef.current)
+        // A reloaded frame keeps the presenter's hotspots switch too.
+        if (hotspotsRef.current != null) sendTo(iframeRef.current?.contentWindow, 'hotspots', hotspotsRef.current)
+      }
       if (data.reason === 'init' && stateRef.current.index === i) {
         sendTo(iframeRef.current?.contentWindow, 'setState', stateRef.current)
+        keepLanguage()
         return
       }
       stateRef.current = state
@@ -308,6 +362,7 @@ function PresenterView({ deckConfig, slides }) {
         bcRef.current?.postMessage({ deckControl: { command: 'setState', value: state, order: orderRef.current.stamp() } })
       }
       sendTo(previewRef.current?.contentWindow, 'goTo', i + 1)
+      keepLanguage()
     }
     window.addEventListener('message', onMessage)
     // The frame may have started drawing before this listener was there.
@@ -328,6 +383,10 @@ function PresenterView({ deckConfig, slides }) {
         (e.key === 'd' || e.key === 'D')                                  ? 'ink' : null
       if ((e.key === 'f' || e.key === 'F') && fullscreen?.available()) { e.preventDefault(); fullscreen.toggle(); return }
       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.
+      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()
       sendTo(iframeRef.current?.contentWindow, cmd, cmd === 'ink' ? 'toggle' : undefined)
@@ -336,6 +395,13 @@ function PresenterView({ deckConfig, slides }) {
     return () => window.removeEventListener('keydown', onKey)
   }, [])
 
+  // The presenter's hotspots switch goes to the slide frame.
+  const hotspotsOnce = useRef(false)
+  useEffect(() => {
+    if (!hotspotsOnce.current) { hotspotsOnce.current = true; return }
+    sendTo(iframeRef.current?.contentWindow, 'hotspots', hotspotsForced)
+  }, [hotspotsForced])
+
   // Escape to close theme modal
   useEffect(() => {
     if (!themeModalOpen) return
@@ -371,6 +437,19 @@ function PresenterView({ deckConfig, slides }) {
     bcRef.current?.postMessage({ deckControl: { command: 'setTheme', theme, palette, appearance } })
   }, [theme, palette, appearance])
 
+  // Another language: every window swaps its slides in place. The address
+  // keeps it, for a reload and for windows opened later.
+  const langOnce = useRef(false)
+  useEffect(() => {
+    if (!langOnce.current) { langOnce.current = true; return }
+    const url = new URL(window.location.href)
+    url.searchParams.set('lang', lang)
+    history.replaceState(null, '', url)
+    for (const win of [iframeRef.current?.contentWindow, previewRef.current?.contentWindow]) sendTo(win, 'setLanguage', lang)
+    bcRef.current?.postMessage({ deckControl: { command: 'setLanguage', value: lang } })
+  }, [lang])
+  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)
@@ -408,6 +487,7 @@ function PresenterView({ deckConfig, slides }) {
           <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>
@@ -479,7 +559,7 @@ function PresenterView({ deckConfig, slides }) {
               style={{ width: '80px', accentColor: '#444', cursor: 'pointer', opacity: 0.6 }}
             />
           </div>
-          <div class="notes-md" style={{
+          <div class="notes-md" dir={textDirection(deckConfig.lang) === 'rtl' ? 'rtl' : undefined} style={{
             flex: 1,
             margin: 0,
             padding: '10px 12px',
@@ -501,17 +581,17 @@ function PresenterView({ deckConfig, slides }) {
         </div>
 
         {!lookFolded && <div class="presenter-look" style={{ flexShrink: 0, display: 'flex', gap: '6px', marginBottom: '8px', alignItems: 'flex-end' }}>
-          <label style={{ flex: 1 }}>
+          <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>{theme}</span>
+              <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 }}>
+          <label style={{ flex: '1 1 auto', minWidth: 0 }}>
             <span style={S.label}>Palette</span>
             <div ref={paletteDropRef} style={{ position: 'relative' }}>
               <button
@@ -519,22 +599,22 @@ function PresenterView({ deckConfig, slides }) {
                 onClick={() => setPaletteOpen(o => !o)}
                 style={{ ...S.select, display: 'flex', alignItems: 'center', gap: '5px', cursor: 'pointer', textAlign: 'left' }}
               >
-                <span style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{shown.palette?.title ?? ''}</span>
                 <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, right: 0, background: '#1a1a1a', border: '1px solid #2e2e2e', borderRadius: '5px', zIndex: 100, overflow: 'hidden', boxShadow: '0 4px 20px rgba(0,0,0,0.6)' }}>
+                <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', justifyContent: 'space-between', gap: '6px', fontSize: '13px', color: shown.palette?.id === p.id ? '#f0f0f0' : '#aaa', background: shown.palette?.id === p.id ? '#2a2a2a' : 'transparent' }}
+                      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' }}
                     >
-                      <span>{p.title}{p.id === themeMeta?.palette ? <span style={{ color: '#666' }}> · theme default</span> : null}</span>
                       <PaletteSwatches tokens={p[shown.appearance] ?? {}} />
+                      <span>{p.title}{p.id === themeMeta?.palette ? <span style={{ color: '#666' }}> · theme default</span> : null}</span>
                     </div>
                   ))}
                 </div>
@@ -542,7 +622,7 @@ function PresenterView({ deckConfig, slides }) {
             </div>
           </label>
           <label style={{ flexShrink: 0 }}>
-            <span style={S.label}>Light or dark</span>
+            <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
@@ -556,6 +636,20 @@ function PresenterView({ deckConfig, slides }) {
               ))}
             </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>
@@ -573,6 +667,14 @@ function PresenterView({ deckConfig, slides }) {
               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 ?? ''}`}
@@ -595,7 +697,7 @@ function PresenterView({ deckConfig, slides }) {
             </button>
           </div>
           <div style={{ color: '#444', fontSize: '11px', textAlign: 'center' }}>
-            Arrow keys · Space · PgUp/PgDn · R to reset
+            Arrow keys · Space · PgUp/PgDn · R to reset · H hotspots{slideHotspots ? ' · 1–9 zoom · 0 whole slide' : ''}
           </div>
         </div>
 
@@ -647,7 +749,7 @@ function mountDeck({ deck, deckConfig, selection = null, editor = false }) {
   injectSpeakerNotes(slides)
   const seen = new Map()
   const app = (
-    <deck-stage width={deckConfig.width ?? 1920} height={deckConfig.height ?? 1080}>
+    <deck-stage width={deckConfig.width ?? 1920} height={deckConfig.height ?? 1080} data-hotspots={String(deckConfig.hotspots ?? 'off')}>
       {slides.map((slide, i) => {
         const count = (seen.get(slide.id) ?? 0) + 1
         seen.set(slide.id, count)
@@ -682,8 +784,8 @@ async function init() {
   if (import.meta.env.DEV && url.searchParams.get('sample') === '1') {
     const { sampleDeck, sampleDataUrl } = await import('../editor/sampleDeck.js')
     slidesContent = sampleDeck(sampleDataUrl())
-  }
-  const parsed = parseSlides(slidesContent)
+  } else chooseLanguage(url.searchParams.get('lang'))
+  let parsed = parseSlides(slidesContent)
   const editorMode = url.searchParams.get('editor') === '1'
   // One switch selects the view: deck, reader, presenter or audience.
   const defaultView = typeof __MDECK_DEFAULT_VIEW__ !== 'undefined' ? __MDECK_DEFAULT_VIEW__ : 'deck'
@@ -694,7 +796,7 @@ async function init() {
     document.body.style.whiteSpace = 'pre-wrap'
     return
   }
-  const deckConfig = withConfigOverrides(parsed.deckConfig)
+  const deckConfig = withConfigOverrides(withFileLanguage(parsed.deckConfig))
   setCalloutLabels(deckConfig)
   setDeckLanguage(deckConfig)
   document.documentElement.lang = deckLanguage()
@@ -722,11 +824,11 @@ async function init() {
     s.textContent = `
       .notes-md p { margin: 0 0 6px; }
       .notes-md p:last-child { margin-bottom: 0; }
-      .notes-md ul, .notes-md ol { margin: 0 0 6px; padding-left: 1.4em; }
+      .notes-md ul, .notes-md ol { margin: 0 0 6px; padding-inline-start: 1.4em; }
       .notes-md li { margin-bottom: 2px; }
       .notes-md strong, .notes-md b { color: #f0f0f0; font-weight: 600; }
       .notes-md em, .notes-md i { font-style: italic; color: #bbb; }
-      .notes-md code { font-family: ui-monospace, monospace; font-size: 0.9em; background: #222; padding: 1px 4px; border-radius: 3px; }
+      .notes-md code { direction: ltr; unicode-bidi: isolate; font-family: ui-monospace, monospace; font-size: 0.9em; background: #222; padding: 1px 4px; border-radius: 3px; }
       .notes-md a { color: #aaa; }
     `
     document.head.appendChild(s)
@@ -743,7 +845,32 @@ async function init() {
     else if (ctrl.command === 'reset') stage.reset()
     else if (ctrl.command === 'goTo' && Number.isInteger(ctrl.value)) stage.goTo(ctrl.value)
     else if (ctrl.command === 'setState') stage.setState(ctrl.value)
+    else if (ctrl.command === 'setLanguage') switchLanguage(ctrl.value)
     else if (ctrl.command === 'ink' && drawHere) stage.inking = ctrl.value === 'toggle' ? !stage.inking : !!ctrl.value
+    // 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 same slide and step in another language, its words and mdeck's own;
+  // or `state`, where the screen that switched is: that screen tells the
+  // others, not the ones that follow it. Says whether it switched.
+  let announceLanguage = null
+  function switchLanguage(lang, { state = document.querySelector('deck-stage')?.state, announce = true } = {}) {
+    if (lang === deckLang || !chooseLanguage(lang)) return false
+    const stage = document.querySelector('deck-stage')
+    parsed = parseSlides(slidesContent)
+    const config = withConfigOverrides(withFileLanguage(parsed.deckConfig))
+    setCalloutLabels(config)
+    setDeckLanguage(config)
+    document.documentElement.lang = deckLanguage()
+    // Explicit slide ids may differ between the files; the place does not.
+    mountDeck({ deck: parsed, deckConfig: config })
+    if (state) setTimeout(() => document.querySelector('deck-stage')?.setState({ ...state, slideId: undefined }), 0)
+    if (!embedded && !followMode && stage) announceSlide(parsed, stage.index)
+    if (announce) announceLanguage?.()
+    if (embedded) window.parent.postMessage({ deckLanguage: lang }, window.location.origin)
+    return true
   }
 
   // Editor preview: the editor pushes whole sources; render best effort and
@@ -789,8 +916,8 @@ async function init() {
   // 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)) {
-    followStageRoom(inkStage)
-    announceStagePosition(inkStage)
+    followStageRoom(inkStage, { onLanguage: (lang, state) => switchLanguage(lang, { state, announce: false }) })
+    announceLanguage = announceStagePosition(inkStage, { language: () => LANGUAGES.length ? deckLang : null })
   }
   // Whether another screen shows the deck, so that a video played in the
   // presenter view is silent there and its sound comes from that screen
@@ -810,6 +937,8 @@ async function init() {
     setInterval(markWatched, SCREEN_SAY_MS)
   }
 
+  // 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) {
     attachInk(inkStage, {
       storageKey: inkStorageKey,
@@ -839,6 +968,7 @@ 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 }) })
     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) {

package/src/runtime/zoom/camera.js

@@ -0,0 +1,77 @@
+// Zoom mode's camera: { x, y, w }, the world point at the centre of the view
+// and the width of world the view shows.
+//
+// Flights follow van Wijk and Nuij's smooth zooming and panning path
+// ("Smooth and efficient zooming and panning", 2003; d3's interpolateZoom):
+// the camera rises in proportion to the distance, so a far jump shows how far
+// it goes and a neighbouring slide is a short pan, at a steady perceived speed.
+
+const RHO = Math.SQRT2
+const RHO2 = 2
+const RHO4 = 4
+const EPSILON = 1e-12
+
+// The camera that shows `rect` whole in a view of the given aspect (width /
+// height), with `margin` of the larger side around it.
+export function fitRect(rect, aspect, margin = 0) {
+  const w = Math.max(rect.w, rect.h * aspect) * (1 + 2 * margin)
+  return { x: rect.x + rect.w / 2, y: rect.y + rect.h / 2, w }
+}
+
+// The CSS transform (origin 0 0) that puts the camera's view in a viewport.
+export function cameraTransform(camera, viewWidth, viewHeight) {
+  const k = viewWidth / camera.w
+  return { k, tx: viewWidth / 2 - camera.x * k, ty: viewHeight / 2 - camera.y * k }
+}
+
+const cosh = x => (Math.exp(x) + Math.exp(-x)) / 2
+const sinh = x => (Math.exp(x) - Math.exp(-x)) / 2
+const tanh = x => { const e = Math.exp(2 * x); return (e - 1) / (e + 1) }
+
+// `at(t)` for t in [0, 1] gives the camera along the path; `length` is the
+// path's length in van Wijk's units (about one per doubling or halving).
+export function flight(from, to) {
+  const dx = to.x - from.x, dy = to.y - from.y, d2 = dx * dx + dy * dy
+  const w0 = from.w, w1 = to.w
+  let at, length
+  if (d2 < EPSILON * w0 * w0) {
+    length = Math.log(w1 / w0) / RHO
+    at = t => ({ x: from.x + t * dx, y: from.y + t * dy, w: w0 * Math.exp(RHO * t * length) })
+  } else {
+    const d1 = Math.sqrt(d2)
+    const b0 = (w1 * w1 - w0 * w0 + RHO4 * d2) / (2 * w0 * RHO2 * d1)
+    const b1 = (w1 * w1 - w0 * w0 - RHO4 * d2) / (2 * w1 * RHO2 * d1)
+    const r0 = Math.log(Math.sqrt(b0 * b0 + 1) - b0)
+    const r1 = Math.log(Math.sqrt(b1 * b1 + 1) - b1)
+    length = (r1 - r0) / RHO
+    at = t => {
+      const s = t * length
+      const u = w0 / (RHO2 * d1) * (cosh(r0) * tanh(RHO * s + r0) - sinh(r0))
+      return { x: from.x + u * dx, y: from.y + u * dy, w: w0 * cosh(r0) / cosh(RHO * s + r0) }
+    }
+  }
+  length = Math.abs(length)
+  return { length, at: t => (t <= 0 ? { ...from } : t >= 1 ? { ...to } : at(t)) }
+}
+
+// A straight slide-over at the same zoom, for the next slide in a chapter:
+// no rising and landing for a step to a neighbour. `length` is the distance
+// in views, weighted so a neighbour takes about half a second.
+export function pan(from, to) {
+  const ratio = to.w / from.w
+  const distance = Math.hypot(to.x - from.x, to.y - from.y) / Math.max(from.w, to.w)
+  const at = t => ({ x: from.x + (to.x - from.x) * t, y: from.y + (to.y - from.y) * t, w: from.w * Math.pow(ratio, t) })
+  return { length: distance * 0.75, at: t => (t <= 0 ? { ...from } : t >= 1 ? { ...to } : at(t)) }
+}
+
+export const MIN_MS = 450
+export const MAX_MS = 1600
+export const QUICK_MS = 200
+
+// Milliseconds for a flight of this length.
+export function durationFor(length) {
+  return Math.round(Math.min(MAX_MS, Math.max(MIN_MS, length * 650)))
+}
+
+// Slow at both ends, so a flight starts and lands gently.
+export const ease = t => (1 - Math.cos(Math.PI * t)) / 2