mdeck 3.10.1 → 3.12.0

package/src/runtime/KeyHelp.jsx

@@ -0,0 +1,115 @@
+// The keys that work right now (helpKeys.js), over the slide in a
+// semi-transparent layer: ? shows and hides it, Escape or a click closes it.
+// The presenter view renders it itself; a deck window gets it from
+// attachKeyHelp. While it is open the other keys keep working, and the list
+// follows them (H, D, a slide with hotspots).
+import { h, render } from 'preact'
+import { useState, useEffect, useRef } from 'preact/hooks'
+import { keyHelp, isHelpKey } from './helpKeys.js'
+
+const typing = target => target?.closest?.('input, textarea, select, [contenteditable=""], [contenteditable="true"]')
+export const isMac = () => /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent || '')
+
+/** Open state for the help: ? toggles it, Escape closes it before anything else sees Escape. */
+export function useKeyHelp() {
+  const [open, setOpen] = useState(false)
+  const openRef = useRef(false)
+  openRef.current = open
+  useEffect(() => {
+    const onKey = event => {
+      if (typing(event.target)) return
+      if (isHelpKey(event)) {
+        event.preventDefault()
+        event.stopPropagation()
+        setOpen(shown => !shown)
+      } else if (event.key === 'Escape' && openRef.current) {
+        event.preventDefault()
+        event.stopPropagation()
+        setOpen(false)
+      }
+    }
+    // Capturing, so that Escape closes the help instead of zooming out or ending a drawing.
+    window.addEventListener('keydown', onKey, true)
+    return () => window.removeEventListener('keydown', onKey, true)
+  }, [])
+  return [open, setOpen]
+}
+
+const S = {
+  layer: { position: 'fixed', inset: 0, zIndex: 400, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '24px', boxSizing: 'border-box', background: 'rgba(8,8,8,0.45)', fontFamily: 'ui-sans-serif, system-ui, sans-serif', direction: 'ltr' },
+  panel: { width: 'min(100%, 980px)', maxHeight: '100%', overflow: 'auto', boxSizing: 'border-box', padding: '22px 26px 24px', borderRadius: '14px', background: 'rgba(20,20,20,0.82)', border: '1px solid rgba(255,255,255,0.1)', boxShadow: '0 20px 60px rgba(0,0,0,0.45)', color: '#e8e8e8' },
+  head: { display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: '16px', marginBottom: '16px' },
+  heading: { margin: 0, fontSize: '16px', fontWeight: 600 },
+  hint: { fontSize: '12px', color: '#8a8a8a' },
+  grid: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(270px, 1fr))', gap: '20px 36px' },
+  title: { margin: '0 0 8px', fontSize: '11px', fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', color: '#8a8a8a' },
+  // One grid per group, so its keys share a column as wide as the widest.
+  list: { margin: 0, padding: 0, listStyle: 'none', display: 'grid', gridTemplateColumns: 'auto 1fr', alignItems: 'baseline', gap: '8px 14px', fontSize: '13.5px', lineHeight: 1.35 },
+  row: { display: 'contents' },
+  keys: { display: 'flex', flexWrap: 'wrap', gap: '4px' },
+  kbd: { display: 'inline-block', minWidth: '14px', padding: '1px 6px', borderRadius: '5px', background: 'rgba(255,255,255,0.1)', border: '1px solid rgba(255,255,255,0.16)', borderBottomWidth: '2px', fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace', fontSize: '12px', color: '#f4f4f4', textAlign: 'center', whiteSpace: 'nowrap' },
+}
+
+/** The layer itself: `context` is what keyHelp() takes. */
+export function KeyHelp({ context, onClose }) {
+  const groups = keyHelp({ mac: isMac(), ...context })
+  return (
+    <div class="key-help" role="dialog" aria-label="Keyboard shortcuts" style={S.layer} onClick={onClose}>
+      <div style={S.panel} onClick={event => event.stopPropagation()}>
+        <div style={S.head}>
+          <h2 style={S.heading}>Keys</h2>
+          <span style={S.hint}>The keys that work now · ? or Esc closes</span>
+        </div>
+        <div style={S.grid}>
+          {groups.map(group => (
+            <section key={group.title} class="key-help-group">
+              <h3 style={S.title}>{group.title}</h3>
+              <ul style={S.list}>
+                {group.keys.map(({ keys, label }) => (
+                  <li key={label} style={S.row}>
+                    <span style={S.keys}>{keys.map(key => <kbd key={key} style={S.kbd}>{key}</kbd>)}</span>
+                    <span>{label}</span>
+                  </li>
+                ))}
+              </ul>
+            </section>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// A deck window's help: what it lists follows the stage (the slide's
+// hotspots, drawing on or off).
+function DeckKeyHelp({ stage, canDraw }) {
+  const [open, setOpen] = useKeyHelp()
+  const [, refresh] = useState(0)
+  useEffect(() => {
+    const update = () => refresh(n => n + 1)
+    const events = ['slidechange', 'statechange', 'inkmode', 'overviewchange']
+    for (const name of events) stage.addEventListener(name, update)
+    return () => { for (const name of events) stage.removeEventListener(name, update) }
+  }, [stage])
+  if (!open) return null
+  const context = {
+    view: 'deck',
+    blank: stage.blank,
+    join: stage.hasAttribute('data-joinable'),
+    joinShown: stage.join,
+    overview: stage.overview,
+    hotspots: stage.hotspotMode !== 'off',
+    inking: stage.inking,
+    canDraw,
+    fullscreen: window.top === window && !!window.mdeckFullscreen?.available(),
+  }
+  return <KeyHelp context={context} onClose={() => setOpen(false)} />
+}
+
+/** Gives a deck window the help that ? shows. */
+export function attachKeyHelp(stage, { canDraw = true } = {}) {
+  const host = document.createElement('div')
+  host.className = 'key-help-host'
+  document.body.appendChild(host)
+  render(h(DeckKeyHelp, { stage, canDraw }), host)
+}

package/src/runtime/PresenterChrome.jsx

@@ -0,0 +1,168 @@
+// The presenter view's controls, shared by its three layouts (main.jsx): the
+// speaker layout on a computer, the slide alone on an iPad, and the phone
+// clicker. What is used during the talk is an icon button, its key in the
+// tooltip; what is set once lives in two popovers: who is connected (with
+// the codes that pair an iPad or a phone) and the settings.
+import { h } from 'preact'
+import { useEffect, useRef, useState } from 'preact/hooks'
+import { S } from './chrome.jsx'
+import { Icon } from '../components/Icon.jsx'
+import QrCode from '../components/QrCode.jsx'
+import { ConnectedViews } from '../components/ConnectedViews.jsx'
+import { devicesText, phonesText } from '../live/presence.js'
+import { devPath } from '../core/devPath.js'
+
+export const tool = { ...S.btn, minWidth: '40px', height: '40px', padding: '0 10px', borderRadius: '10px', fontSize: '15px' }
+export const toolOn = { background: '#f0f0f0', borderColor: '#f0f0f0', color: '#111' }
+const muted = { color: '#888', fontSize: '12px' }
+
+/** An icon button; `label` is its tooltip and name, with the key in brackets. */
+export function ToolButton({ icon, label, pressed, onClick, class: className, style, size = 18, disabled, children }) {
+  return <button type="button" class={className} title={label} aria-label={label} aria-pressed={pressed} disabled={disabled} onClick={onClick}
+    style={{ ...tool, ...(pressed ? toolOn : {}), ...(disabled ? { opacity: 0.4, cursor: 'default' } : {}), ...style }}>
+    {icon && <Icon name={icon} size={size} style={{ display: 'block' }} />}{children}
+  </button>
+}
+
+/**
+ * A button that opens a panel below (or above) it. The panel stays in the
+ * page while closed, hidden, so its controls keep their state.
+ */
+export function Popover({ class: className, label, trigger, alert = false, above = false, align = 'end', children }) {
+  const [open, setOpen] = useState(false)
+  const ref = useRef(null)
+  useEffect(() => {
+    if (!open) return
+    const outside = event => { if (!ref.current?.contains(event.target)) setOpen(false) }
+    const escape = event => { if (event.key === 'Escape') setOpen(false) }
+    document.addEventListener('pointerdown', outside)
+    window.addEventListener('keydown', escape)
+    return () => { document.removeEventListener('pointerdown', outside); window.removeEventListener('keydown', escape) }
+  }, [open])
+  return <span ref={ref} class={className} style={{ position: 'relative', display: 'inline-flex' }}>
+    <button type="button" class={`${className}-toggle`} title={label} aria-label={label} aria-expanded={open} onClick={() => setOpen(now => !now)}
+      style={{ ...tool, position: 'relative', gap: '8px', ...(open ? { background: '#2a2a2a', color: '#fff' } : {}) }}>
+      {trigger}
+      {alert && <span aria-hidden="true" style={{ position: 'absolute', top: '5px', right: '5px', width: '8px', height: '8px', borderRadius: '50%', background: '#f28b82' }} />}
+    </button>
+    <div class={`${className}-panel`} role="dialog" aria-label={label} style={{
+      display: open ? 'flex' : 'none', flexDirection: 'column', gap: '14px', position: 'absolute', zIndex: 300,
+      [above ? 'bottom' : 'top']: 'calc(100% + 6px)', [align === 'end' ? 'right' : 'left']: 0,
+      width: 'min(340px, calc(100vw - 24px))', maxHeight: 'min(80dvh, 640px)', overflow: 'auto', boxSizing: 'border-box',
+      padding: '14px', background: '#161616', border: '1px solid #2e2e2e', borderRadius: '12px', boxShadow: '0 12px 40px rgba(0,0,0,0.6)',
+      color: '#ccc', fontSize: '13px', textAlign: 'start', whiteSpace: 'normal', fontVariantNumeric: 'normal',
+    }}>{children}</div>
+  </span>
+}
+
+export function PanelSection({ title, children, class: className }) {
+  return <section class={className} style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+    {title && <span style={{ ...S.label, marginBottom: 0 }}>{title}</span>}
+    {children}
+  </section>
+}
+
+/**
+ * The slide's own controls, as the presenter's slide frame reports them
+ * (slideControls.js): a poll's lock, eye, tick and Reset, a video's play,
+ * the hotspots' numbers. `press(i)` and `zoom(key)` act on the slide.
+ */
+export function SlideControls({ controls, press, zoom, big = false }) {
+  if (!controls.items.length && !controls.hotspots) return null
+  const size = big ? { minWidth: '52px', height: '52px', borderRadius: '14px' } : {}
+  return <span class="presenter-slide-controls" role="group" aria-label="This slide" style={{ display: 'inline-flex', flexWrap: 'wrap', gap: '6px', alignItems: 'center' }}>
+    {controls.items.map((control, i) => <ToolButton key={`c${i}`} class="presenter-slide-control" icon={control.icon ?? 'check'} label={control.label} pressed={control.pressed} disabled={control.disabled} size={big ? 22 : 18} style={size} onClick={() => press(i)} />)}
+    {controls.hotspots > 0 && <>
+      {Array.from({ length: controls.hotspots }, (_, i) => <ToolButton key={`h${i}`} class="presenter-slide-hotspot" label={`Zoom in on part ${i + 1} (${i + 1})`} pressed={controls.hotspot === i + 1} style={{ ...size, fontVariantNumeric: 'tabular-nums' }} onClick={() => zoom(String(i + 1))}>{i + 1}</ToolButton>)}
+      {controls.hotspot != null && <ToolButton class="presenter-slide-whole" icon="fullscreen-exit" label="The whole slide (0)" size={big ? 22 : 18} style={size} onClick={() => zoom('0')} />}
+    </>}
+  </span>
+}
+
+// The launch page's view of this talk: whether devices can pair, from this
+// computer under `mdeck run` only.
+function useHomeInfo() {
+  const [info, setInfo] = useState(null)
+  const load = () => fetch(devPath('__mdeck/home/info'), { cache: 'no-store' }).then(response => response.ok ? response.json() : null).then(setInfo, () => setInfo(null))
+  useEffect(() => { if (import.meta.env.DEV) load() }, [])
+  return [info, load]
+}
+
+const PAIR = {
+  slide: { icon: 'tablet', label: 'iPad', scan: "Scan with the iPad's camera: the presenter view opens there, to draw on and go through the slides." },
+  remote: { icon: 'phone', label: 'Phone clicker', scan: "Scan with the phone's camera: a clicker opens there, with your notes, the time and big buttons." },
+}
+
+// Where the phones answer: the join link, a dot that is green while all is
+// well, and words only for what needs the presenter (from the launch page's
+// check of the server).
+function Polls({ live, recheck }) {
+  const [copied, setCopied] = useState(false)
+  const copy = () => navigator.clipboard?.writeText(live.joinUrl).then(() => { setCopied(true); setTimeout(() => setCopied(false), 1500) }, () => {})
+  const problem = live.server && !live.reachable ? `The poll server does not answer${live.error ? ` (${live.error})` : ''}.`
+    : !live.joinUrl ? <>Phones cannot reach this computer: start with <code>--network</code>, or set <code>server</code> in the deck.</>
+    : live.server && live.key && !live.keyAccepted ? 'The poll server does not accept this key: phones do not follow.'
+    : null
+  // A server on an older mdeck answers, but lacks what is new (reactions came with 3.12).
+  const outdated = !problem && live.server && live.serverOutdated
+  return <PanelSection title="Polls" class="presenter-polls">
+    {live.joinUrl && <span style={{ display: 'flex', gap: '8px', alignItems: 'center', minWidth: 0 }}>
+      <span aria-hidden="true" style={{ flexShrink: 0, width: '8px', height: '8px', borderRadius: '50%', background: problem ? '#f28b82' : outdated ? '#f5a524' : '#81c995' }} />
+      <a href={live.joinUrl} target="_blank" rel="noopener" title="The join link for phones" style={{ color: '#ccc', textDecoration: 'none', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{live.joinUrl.replace(/^https?:\/\//, '')}</a>
+      <ToolButton class="presenter-copy-join" icon={copied ? 'check' : 'copy'} label={copied ? 'Copied' : 'Copy the join link'} size={15} style={{ minWidth: '30px', height: '30px', padding: 0, flexShrink: 0 }} onClick={copy} />
+    </span>}
+    {outdated && <span class="presenter-server-outdated" style={{ color: '#f5a524' }}>
+      Your poll server runs {live.serverVersion ? `mdeck ${live.serverVersion}` : 'an older mdeck'}, this computer {live.version}: what is new, such as reactions, may not reach the phones. Update it with <code>npm install -g mdeck</code> and restart <code>mdeck server</code>.
+    </span>}
+    {problem && <span style={{ display: 'flex', gap: '8px', alignItems: 'center', color: '#f28b82' }}>
+      <span style={{ flex: 1 }}>{problem}</span>
+      <ToolButton class="presenter-recheck" icon="reset" label="Check again" size={15} style={{ minWidth: '30px', height: '30px', padding: 0, flexShrink: 0 }} onClick={recheck} />
+    </span>}
+  </PanelSection>
+}
+
+const VIEW_NAME = { presenter: 'Presenter view', audience: 'Audience window', deck: 'Deck window' }
+
+/**
+ * Who is connected, behind the icons that show it: the views and devices,
+ * the audience window, and the codes that pair an iPad or a phone.
+ */
+export function Connections({ presence, phones, problem }) {
+  const [info, reload] = useHomeInfo()
+  const [code, setCode] = useState(null)
+  const [error, setError] = useState(null)
+  const action = body => fetch(devPath('__mdeck/home/action'), { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) })
+    .then(async response => { const result = await response.json().catch(() => ({})); if (!response.ok) throw new Error(result.error ?? response.status); return result })
+  const pair = layout => action({ action: 'pair', layout }).then(result => { setCode({ url: result.url, layout }); setError(null); reload() }, failure => setError(failure.message))
+  const unpair = () => action({ action: 'unpair' }).then(() => { setCode(null); reload() }, failure => setError(failure.message))
+  const views = presence?.views ?? []
+  const kinds = Object.keys(VIEW_NAME).filter(view => views.some(entry => entry.view === view))
+  const trigger = kinds.length || phones
+    ? <ConnectedViews presence={presence ?? { views: [], phones: 0 }} phones={phones} style={{ color: 'inherit' }} />
+    : <Icon name="people" size={18} style={{ display: 'block' }} />
+  return <Popover class="presenter-connections" label="Connected screens and devices" trigger={trigger} alert={!!problem}>
+    {problem && <p role="status" style={{ margin: 0, color: '#f28b82' }}>{problem}</p>}
+    <PanelSection title="Connected">
+      {kinds.length === 0 && !(presence?.phones > 0) && <span style={muted}>Only this view.</span>}
+      {kinds.map(view => <span key={view}>{VIEW_NAME[view]} on {devicesText(views.filter(entry => entry.view === view))}</span>)}
+      {phones && presence?.phones > 0 && <span>{phonesText(presence.phones)}</span>}
+    </PanelSection>
+    {info?.live && phones && <Polls live={info.live} recheck={reload} />}
+    {info?.pairing && <PanelSection title="Pair a device" class="presenter-pairing">
+      {!info.pairing.available
+        ? <span style={muted}>Start <code>mdeck run</code> with <code>--network</code> so an iPad or a phone in the same network can reach it, or with <code>--server</code>.</span>
+        : <>
+          <span style={{ display: 'flex', gap: '6px', flexWrap: 'wrap' }}>
+            {Object.entries(PAIR).map(([layout, { icon, label }]) => <button key={layout} type="button" class={`presenter-pair presenter-pair--${layout}`} aria-pressed={code?.layout === layout} style={{ ...S.btn, ...(code?.layout === layout ? { background: '#2a2a2a', color: '#fff' } : {}) }} onClick={() => pair(layout)}><Icon name={icon} size={16} />{label}</button>)}
+            {info.pairing.devices > 0 && <button type="button" class="presenter-unpair" style={{ ...S.btn, color: '#888' }} onClick={unpair}>Unpair {info.pairing.devices === 1 ? 'the device' : `${info.pairing.devices} devices`}</button>}
+          </span>
+          {code && <span style={{ display: 'flex', flexDirection: 'column', gap: '8px', alignItems: 'flex-start', '--qr-ink': '#000', '--qr-bg': '#fff' }}>
+            <span style={{ background: '#fff', padding: '8px', borderRadius: '8px', lineHeight: 0 }}><QrCode url={code.url} size="168" /></span>
+            <span>{PAIR[code.layout].scan}</span>
+            <span style={muted}>The code works once, for ten minutes.</span>
+          </span>}
+          {error && <span style={{ color: '#f28b82' }}>{error}</span>}
+        </>}
+    </PanelSection>}
+  </Popover>
+}

package/src/runtime/Reactions.jsx

@@ -0,0 +1,56 @@
+import { h } from 'preact'
+import { useEffect, useState } from 'preact/hooks'
+import { listenToReactions } from '../live/client.js'
+
+// The reactions phones send (src/core/reactions.js), on the presenter's
+// screen only: each one floats up for a moment, and a tally keeps what came
+// in the last minute, so that four 🐢 still say "slower" after they faded.
+
+const FLOAT_MS = 2600
+const TALLY_MS = 60000
+
+const CSS = `
+.reactions { position: fixed; z-index: 17; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; pointer-events: none; font-family: ui-sans-serif, system-ui, sans-serif; }
+.reactions-float { position: relative; width: 160px; height: 220px; }
+.reaction-bubble { position: absolute; bottom: 0; font-size: 34px; line-height: 1; animation: reaction-up ${FLOAT_MS}ms ease-out forwards; filter: drop-shadow(0 2px 4px rgba(0,0,0,.45)); }
+.reaction-bubble.is-word { font-size: 15px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: rgba(17,17,17,.9); color: #f0f0f0; border: 1px solid #3a3a3a; }
+@keyframes reaction-up { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 12% { transform: translate(var(--drift), -20px) scale(1.1); opacity: 1; } 75% { opacity: 1; } 100% { transform: translate(calc(var(--drift) * -1), -200px) scale(1); opacity: 0; } }
+.reactions-tally { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 6px; border-radius: 999px; background: rgba(17,17,17,.88); border: 1px solid #2a2a2a; color: #ccc; font-size: 13px; font-variant-numeric: tabular-nums; }
+.reactions-tally span { padding: 0 4px; }
+@media (prefers-reduced-motion: reduce) { .reaction-bubble { animation: none; opacity: .9; } }
+`
+
+const isEmoji = value => /\p{Extended_Pictographic}/u.test(value) && [...value].length <= 4
+
+/** The reactions overlay; `style` places it (fixed by default, at the slide's lower left). */
+export function Reactions({ style }) {
+  const [bubbles, setBubbles] = useState([])
+  const [recent, setRecent] = useState([])
+  useEffect(() => {
+    const css = document.createElement('style')
+    css.textContent = CSS
+    document.head.appendChild(css)
+    const stop = listenToReactions(({ value, n }) => {
+      const now = Date.now()
+      const bubble = { key: `${n}:${now}`, value, x: 10 + Math.random() * 100, drift: `${Math.round(Math.random() * 24 - 12)}px` }
+      // At most a screenful at once: a room that taps all together is still one cloud.
+      setBubbles(list => [...list.slice(-24), bubble])
+      setTimeout(() => setBubbles(list => list.filter(item => item !== bubble)), FLOAT_MS)
+      setRecent(list => [...list.filter(item => now - item.at < TALLY_MS), { value, at: now }])
+    })
+    // The tally forgets what is older than a minute.
+    const timer = setInterval(() => setRecent(list => { const now = Date.now(); const kept = list.filter(item => now - item.at < TALLY_MS); return kept.length === list.length ? list : kept }), 5000)
+    return () => { stop(); clearInterval(timer); css.remove() }
+  }, [])
+  const tally = new Map()
+  for (const { value } of recent) tally.set(value, (tally.get(value) ?? 0) + 1)
+  if (!bubbles.length && !tally.size) return null
+  return <div class="reactions" aria-hidden="true" style={{ left: '16px', bottom: '16px', ...style }}>
+    <div class="reactions-float">
+      {bubbles.map(bubble => <span key={bubble.key} class={`reaction-bubble${isEmoji(bubble.value) ? '' : ' is-word'}`} style={{ left: `${bubble.x}px`, '--drift': bubble.drift }}>{bubble.value}</span>)}
+    </div>
+    {tally.size > 0 && <div class="reactions-tally" title="Reactions in the last minute">
+      {[...tally].sort((a, b) => b[1] - a[1]).map(([value, count]) => <span key={value}>{value} {count}</span>)}
+    </div>}
+  </div>
+}

package/src/runtime/RehearsalSummary.jsx

@@ -0,0 +1,129 @@
+// The end of a rehearsal: each slide's planned time, the time it got, and
+// the time to save, which starts at the rehearsed time rounded to 15 s and
+// can be moved in 15 s steps, put back to the plan, or taken out. Saving
+// writes `time:` into the slides' settings through `mdeck run`
+// (build/timingPlugin.js); a built deck can only copy the times.
+import { h } from 'preact'
+import { useEffect, useMemo, useState } from 'preact/hooks'
+import { S } from './chrome.jsx'
+import { Icon } from '../components/Icon.jsx'
+import { slideTitle } from '../core/outline.js'
+import { devPath } from '../core/devPath.js'
+import { pairHeaders } from '../live/pairing.js'
+import { formatTime, formatClock, roundTime, initialTimes, changedTimes, TIME_STEP } from '../core/timing.js'
+
+const ENDPOINT = devPath('__mdeck/timing')
+
+// Whether this page can save into the deck: only `mdeck run` answers.
+async function canSaveTimes() {
+  try { return (await fetch(ENDPOINT, { cache: 'no-store', headers: pairHeaders() })).ok } catch { return false }
+}
+
+const dash = <span style={{ color: '#555' }}>—</span>
+const sum = values => values.reduce((total, t) => total + (t ?? 0), 0)
+
+export function RehearsalSummary({ slides, plan, spent, onSaved, onDiscard, onClose }) {
+  const own = plan.own
+  const [next, setNext] = useState(() => initialTimes(slides, spent, own))
+  const [canSave, setCanSave] = useState(null)
+  const [status, setStatus] = useState(null)
+  useEffect(() => { canSaveTimes().then(setCanSave) }, [])
+  const changes = useMemo(() => changedTimes(slides, own, next), [next])
+  const changeCount = Object.keys(changes).length
+  const setAt = (i, value) => setNext(times => times.map((t, j) => j === i ? value : t))
+  const step = (i, by) => setAt(i, Math.max(TIME_STEP, (next[i] ?? roundTime(spent[slides[i].id] ?? 0)) + by))
+
+  async function save() {
+    setStatus({ busy: true })
+    try {
+      const reply = await fetch(ENDPOINT, { method: 'POST', headers: pairHeaders({ 'Content-Type': 'application/json' }), body: JSON.stringify({ ids: slides.map(slide => slide.id), times: changes }) })
+      const body = await reply.json().catch(() => ({}))
+      if (!reply.ok) return setStatus({ error: body.error ?? `The deck was not saved (${reply.status})` })
+      onSaved(changes, body.changed ?? changeCount)
+    } catch (error) {
+      setStatus({ error: `The deck was not saved: ${error.message}` })
+    }
+  }
+
+  function copy() {
+    const text = slides.map((slide, i) => `${i + 1}. ${slideTitle(slide, i, null)}: ${next[i] == null ? '—' : `time: ${formatTime(next[i])}`}`).join('\n')
+    navigator.clipboard?.writeText(text).then(() => setStatus({ note: 'Copied the times.' }), () => setStatus({ error: 'The browser did not let this page copy.' }))
+  }
+
+  function onRowKey(event, i) {
+    if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+      event.preventDefault()
+      event.stopPropagation()
+      step(i, event.key === 'ArrowUp' ? TIME_STEP : -TIME_STEP)
+    }
+  }
+
+  const small = { ...S.btn, padding: 0, width: '26px', height: '26px' }
+  const cell = { padding: '6px 8px', borderBottom: '1px solid #222', verticalAlign: 'middle' }
+  const head = { ...cell, ...S.label, display: 'table-cell', marginBottom: 0, textAlign: 'start', position: 'sticky', top: 0, background: '#161616' }
+  const num = { ...cell, textAlign: 'end', fontVariantNumeric: 'tabular-nums', whiteSpace: 'nowrap' }
+
+  return (
+    <div class="rehearsal-summary" role="dialog" aria-modal="true" aria-label="Rehearsal" style={{ position: 'fixed', inset: 0, zIndex: 210, background: 'rgba(0,0,0,0.85)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'ui-sans-serif, system-ui, sans-serif', fontSize: '13px', color: '#ccc' }}
+      onKeyDown={event => { event.stopPropagation(); if (event.key === 'Escape') onClose() }}>
+      <div style={{ background: '#161616', border: '1px solid #2a2a2a', borderRadius: '12px', padding: '20px 24px', width: 'min(94vw, 760px)', maxHeight: '88vh', display: 'flex', flexDirection: 'column', gap: '14px' }}>
+        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: '12px' }}>
+          <span style={{ fontWeight: 600, color: '#f0f0f0', fontSize: '15px' }}>Rehearsal</span>
+          <span style={{ color: '#888' }}>New times start at the rehearsed time, rounded to {TIME_STEP} s. ↑ ↓ change the focused one.</span>
+        </div>
+        <div style={{ overflow: 'auto', minHeight: 0 }}>
+          <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+            <thead>
+              <tr>
+                <th style={head}>Slide</th>
+                <th style={{ ...head, textAlign: 'end' }}>Planned</th>
+                <th style={{ ...head, textAlign: 'end' }}>Rehearsed</th>
+                <th style={{ ...head, textAlign: 'center' }}>New time</th>
+              </tr>
+            </thead>
+            <tbody>
+              {slides.map((slide, i) => {
+                const changed = next[i] !== own[i]
+                return (
+                  <tr key={`${slide.id}#${i}`} class="rehearsal-row" tabIndex={0} onKeyDown={event => onRowKey(event, i)} style={{ outline: 'none' }}>
+                    <td style={{ ...cell, maxWidth: '280px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                      <span style={{ color: '#666', marginInlineEnd: '8px', fontVariantNumeric: 'tabular-nums' }}>{i + 1}</span>{slideTitle(slide, i, null)}
+                    </td>
+                    <td style={{ ...num, color: '#888' }}>{own[i] == null ? dash : formatTime(own[i])}</td>
+                    <td style={{ ...num, color: '#888' }}>{spent[slide.id] >= 1 ? formatClock(spent[slide.id]) : dash}</td>
+                    <td style={{ ...cell, whiteSpace: 'nowrap' }}>
+                      <span style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '4px' }}>
+                        <button style={small} title={`${TIME_STEP} s less`} aria-label={`${TIME_STEP} seconds less`} onClick={() => step(i, -TIME_STEP)}><Icon name="remove" size={14} /></button>
+                        <span class="rehearsal-time" style={{ display: 'inline-block', minWidth: '56px', textAlign: 'center', fontVariantNumeric: 'tabular-nums', color: changed ? '#f0f0f0' : '#888', fontWeight: changed ? 600 : 400 }}>{next[i] == null ? dash : formatTime(next[i])}</span>
+                        <button style={small} title={`${TIME_STEP} s more`} aria-label={`${TIME_STEP} seconds more`} onClick={() => step(i, TIME_STEP)}><Icon name="add" size={14} /></button>
+                        <button style={{ ...small, visibility: changed ? 'visible' : 'hidden' }} title="Keep the planned time" aria-label="Keep the planned time" onClick={() => setAt(i, own[i])}><Icon name="undo" size={14} /></button>
+                        <button style={{ ...small, visibility: next[i] == null ? 'hidden' : 'visible' }} title="No time for this slide" aria-label="No time for this slide" onClick={() => setAt(i, null)}><Icon name="close" size={14} /></button>
+                      </span>
+                    </td>
+                  </tr>
+                )
+              })}
+            </tbody>
+            <tfoot>
+              <tr>
+                <td style={{ ...cell, color: '#888' }}>Total{plan.budget ? ` (deck time ${formatClock(plan.budget)})` : ''}</td>
+                <td style={num}>{formatClock(sum(own))}</td>
+                <td style={num}>{formatClock(sum(Object.values(spent)))}</td>
+                <td style={{ ...num, textAlign: 'center', color: plan.budget && sum(next) > plan.budget ? '#f28b82' : '#f0f0f0' }}>{formatClock(sum(next))}</td>
+              </tr>
+            </tfoot>
+          </table>
+        </div>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '8px', flexWrap: 'wrap' }}>
+          <span role="status" style={{ flex: 1, color: status?.error ? '#f28b82' : '#888' }}>
+            {status?.error ?? status?.note ?? (canSave === false ? 'Saving into the deck needs mdeck run; copy the times instead.' : `${changeCount} slide${changeCount === 1 ? '' : 's'} change.`)}
+          </span>
+          <button style={{ ...S.btn, color: '#888' }} title="Go on rehearsing (Esc)" onClick={onClose}>Back</button>
+          <button style={{ ...S.btn, color: '#888' }} title="End the rehearsal without saving" onClick={onDiscard}>Discard</button>
+          <button style={S.btn} onClick={copy}><Icon name="copy" size={14} />Copy</button>
+          <button class="rehearsal-save" style={{ ...S.btn, background: '#1c2a3a', borderColor: '#2f4a66', opacity: canSave && changeCount && !status?.busy ? 1 : 0.5 }} disabled={!canSave || !changeCount || status?.busy} onClick={save}>Save to deck</button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/runtime/component.js

@@ -0,0 +1,27 @@
+// `mdeck/component`: what a deck component may use from mdeck. Everything
+// here is a promise kept across versions; anything else a component reaches
+// (the page outside its slide, the stage, the presenter view) is not, and may
+// change without notice. See "Deck-local components" in the authoring
+// reference.
+import { useEffect, useState } from 'preact/hooks'
+import { getShared, setShared, subscribeShared, currentView } from './shared.js'
+
+/**
+ * A value shared by every slide and every window of this talk, under `name`.
+ * Returns [value, setValue]; `initial` stands in until someone sets one.
+ * Values must survive JSON. The latest change wins.
+ */
+export function useShared(name, initial = null) {
+  const [value, setValue] = useState(() => getShared(name))
+  useEffect(() => {
+    setValue(getShared(name))
+    return subscribeShared(name, setValue)
+  }, [name])
+  const current = () => getShared(name) === undefined ? initial : getShared(name)
+  return [value === undefined ? initial : value, next => setShared(name, typeof next === 'function' ? next(current()) : next)]
+}
+
+/** The kind of window this is: presenter, audience, deck, follow, preview or reader. */
+export function useView() {
+  return currentView()
+}