mdeck 3.10.1 → 3.11.0

package/src/layouts/layoutApi.jsx

@@ -6,6 +6,7 @@ import { registry } from '../runtime/registry'
 import { scanTags, closeTags } from '../core/tags.js'
 import { expandPollLists } from '../core/pollList.js'
 import { textDirection } from '../core/languages.js'
+import { sourceLines, fenceState } from '../core/source.js'
 import { InkLayer } from '../runtime/ink/InkLayer.jsx'
 import themedSvgs from 'virtual:deck-svgs'
 import { renderCitations, citationsHtml as referencesOf, bibliographyOf } from '../runtime/citations.js'
@@ -15,19 +16,32 @@ import { renderCitations, citationsHtml as referencesOf, bibliographyOf } from '
 const FN_DEF_RE = /^\[\^([^\]\n]+)\]:\s+([^\n]+)/gm
 const FN_REF_RE = /\[\^([^\]\n]+)\]/g
 
+// `change(text, lineStart)` applied to the prose of `markdown` only: fenced
+// code blocks and `inline code` keep what is written in them.
+function inProse(markdown, change) {
+  let fence = null
+  return sourceLines(markdown).map(line => {
+    const raw = markdown.slice(line.start, line.end)
+    const before = fence
+    fence = fenceState(line.text, fence)
+    if (before || fence) return raw
+    return raw.split(/((`+)[^`]*?\2)/).map((part, i) => i % 3 === 0 ? change(part, i === 0) : i % 3 === 1 ? part : '').join('')
+  }).join('')
+}
+
 function preprocessFootnotes(markdown) {
   const defs = {}
-  const stripped = markdown.replace(FN_DEF_RE, (_, label, text) => {
-    defs[label] = text.trim()
+  const stripped = inProse(markdown, (text, lineStart) => lineStart ? text.replace(FN_DEF_RE, (_, label, note) => {
+    defs[label] = note.trim()
     return ''
-  })
+  }) : text)
 
   let counter = 0
   const labelToNum = {}
-  const processed = stripped.replace(FN_REF_RE, (_, label) => {
+  const processed = inProse(stripped, text => text.replace(FN_REF_RE, (_, label) => {
     if (labelToNum[label] === undefined) labelToNum[label] = ++counter
     return `<sup>${labelToNum[label]}</sup>`
-  })
+  }))
 
   if (counter === 0) return { processed: markdown, footnotesHtml: '' }
 
@@ -94,15 +108,39 @@ export function inlineThemedPictures(html) {
   return out + html.slice(last)
 }
 
+// A drawing in the page more than once (on two slides, or in a slide shown
+// twice) would repeat its ids, and url(#…) and href="#…" find the first copy,
+// which may be on a hidden slide: each copy gets ids of its own.
+let drawingCopies = 0
+export function ownIds(svg) {
+  const named = svg.querySelectorAll('[id]')
+  if (!named.length || svg.hasAttribute('data-own-ids')) return
+  const suffix = `--${++drawingCopies}`
+  const renamed = new Map([...named].map(element => [element.id, element.id + suffix]))
+  for (const element of named) element.id = renamed.get(element.id)
+  const swap = text => text.replace(/url\(\s*(['"]?)#([^'")\s]+)\1\s*\)/g, (match, quote, id) => renamed.has(id) ? `url(#${renamed.get(id)})` : match)
+  for (const element of svg.querySelectorAll('*')) {
+    for (const attribute of [...element.attributes]) {
+      const local = attribute.value.startsWith('#') && renamed.get(attribute.value.slice(1))
+      if (attribute.localName === 'href' && local) attribute.value = '#' + local
+      else if (attribute.value.includes('url(')) attribute.value = swap(attribute.value)
+    }
+    if (element.localName === 'style') element.textContent = swap(element.textContent)
+  }
+  svg.setAttribute('data-own-ids', '')
+}
+
 // A picture from the slide's settings; `fit: cover` fills its box like a
 // photo, otherwise the drawing fits inside.
 export function Picture({ src, alt, fit, position, class: className, ...attributes }) {
+  const ref = useRef()
   const markup = themedSvg(src)
+  useEffect(() => { const svg = ref.current?.querySelector(':scope > svg'); if (svg) ownIds(svg) }, [markup])
   if (!markup) return <img class={className} src={src} alt={alt} style={{ objectFit: fit, objectPosition: position }} {...attributes} />
   const aspect = fit === 'cover' ? 'xMidYMid slice' : 'xMidYMid meet'
   // The box sets the size; the drawing scales inside it.
   const html = markup.replace(/<svg\b[^>]*>/, tag => tag.replace(/\s(width|height|preserveAspectRatio)="[^"]*"/g, '').replace('<svg', `<svg preserveAspectRatio="${aspect}"`))
-  return <div class={['themed-picture', className].filter(Boolean).join(' ')} role="img" aria-label={alt} dangerouslySetInnerHTML={{ __html: html }} {...attributes} />
+  return <div ref={ref} class={['themed-picture', className].filter(Boolean).join(' ')} role="img" aria-label={alt} dangerouslySetInnerHTML={{ __html: html }} {...attributes} />
 }
 
 // ─── Hydration for inline components ──────────────────────────────────────
@@ -116,6 +154,7 @@ export function HtmlContent({ html, class: className, ...attributes }) {
 
   useEffect(() => {
     if (!ref.current) return
+    ref.current.querySelectorAll('.themed-picture > svg').forEach(ownIds)
     const mounted = []
     for (const [name, Component] of Object.entries(registry)) {
       for (const el of [...ref.current.querySelectorAll(name)]) {
@@ -197,8 +236,12 @@ export function prepareSlide(slide) {
   const position = region => region.source?.start ?? region.ranges?.[0]?.start ?? 0
   const entries = Object.entries(slide.regions ?? { body: { name: 'body', content: slide.content } })
     .sort((a, b) => position(a[1]) - position(b[1]))
-  let separator = '\u0000mdeck-region\u0000'
-  while (entries.some(([, r]) => r.content.includes(separator))) separator += '\u0000'
+  // The regions are scanned as one text, so numbered citations and footnotes
+  // run on across them. The separator stands on a line of its own: joined
+  // mid-line, a region's closing ``` fence read as an opening one, and the
+  // next region as code.
+  let separator = '\n\u0000mdeck-region\u0000\n'
+  while (entries.some(([, r]) => r.content.includes(separator.trim()))) separator = separator.replace('\u0000\n', '\u0000\u0000\n')
   const bib = bibliographyOf(slide.deckConfig)
   const cited = renderCitations(entries.map(([, r]) => r.content).join(separator), bib)
   const { processed, footnotesHtml } = preprocessFootnotes(cited.markdown)

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()
+}

package/src/runtime/deck-stage.js

@@ -68,6 +68,7 @@
 import { iconSvg } from '../core/icons.js'
 import { inkPaint, snapAngle } from '../core/ink.js'
 import { findHotspots, hotspotMode, zoomToCamera, cameraToZoom } from './hotspots.js'
+import { slideSteps } from './steps.js'
 import { flight, durationFor, ease } from './zoom/camera.js'
 
 (() => {
@@ -85,11 +86,14 @@ import { flight, durationFor, ease } from './zoom/camera.js'
   // Holding the pen still this long turns the stroke into a straight line.
   const STRAIGHTEN_MS = 500;
   const STRAIGHTEN_SLOP = 6;  // CSS px the pen may tremble while held
-  // Laser: a red glow with a white core; the trail lasts LASER_MS.
+  // Laser: a red glow with a white core. The trail stays while the pen is
+  // down; lifted, it retracts from its tail within LASER_MS.
   const LASER_GLOW = '#ff2a2a';
   const LASER_CORE = '#ffffff';
   const LASER_MS = 1200;
-  const LASER_GAP_MS = 250;
+  // A trail whose end never arrives (the other window closed) goes after this.
+  const LASER_HELD_MS = 30000;
+  const LASER_STEP = 4;  // design px between the points of a held trail
   // Zoom: up to this many times the fitted size.
   const ZOOM_MAX = 6;
   const VALIDATE_ATTR = 'no_overflowing_text,no_overlapping_text,slide_sized_text';
@@ -792,7 +796,10 @@ import { flight, durationFor, ease } from './zoom/camera.js'
     }
 
     _broadcastState(reason) {
-      const message = { deckStateChanged: this.state, reason };
+      // atEnd: nothing comes after this, which ends a rehearsal (main.jsx).
+      const state = this.state;
+      const atEnd = state.index === this._slides.length - 1 && state.step >= this._getSteps(this._slides[state.index]).length - 1;
+      const message = { deckStateChanged: state, atEnd, reason };
       window.postMessage(message, '*');
       if (window.parent !== window) window.parent.postMessage(message, '*');
       this.dispatchEvent(new CustomEvent('statechange', { detail: { ...this.state, reason } }));
@@ -949,9 +956,8 @@ import { flight, durationFor, ease } from './zoom/camera.js'
     // Step reveal helpers ---------------------------------------------------
 
     _getSteps(slide) {
-      if (!slide) return [];
-      // Multiple and nested reveal blocks follow document order.
-      return [...slide.querySelectorAll('[data-step]')];
+      // Each step is a list of elements that appear together.
+      return slideSteps(slide);
     }
 
     _applySteps(slideIndex) {
@@ -959,9 +965,9 @@ import { flight, durationFor, ease } from './zoom/camera.js'
       if (!slide) return;
       const steps = this._getSteps(slide);
       const curr  = this._printing ? steps.length - 1 : (this._stepMap.get(slideIndex) ?? -1);
-      steps.forEach((el, i) =>
+      steps.forEach((elements, i) => elements.forEach(el =>
         i <= curr ? el.setAttribute('data-step-visible', '') : el.removeAttribute('data-step-visible')
-      );
+      ));
       this._updateStepCount(slideIndex);
       if (slideIndex === this._index) this._queueHotspots();
     }
@@ -1020,7 +1026,7 @@ import { flight, durationFor, ease } from './zoom/camera.js'
     get inking() { return this.hasAttribute('data-inking'); }
     set inking(on) {
       this.toggleAttribute('data-inking', !!on);
-      if (!on) { this._endInk(null); this.laserDot('local', null, null); this.showSelection(null); }
+      if (!on) { this._endInk(null); this.laserRelease('local'); this.laserDot('local', null, null); this.showSelection(null); }
       this.dispatchEvent(new CustomEvent('inkmode', { detail: { inking: !!on }, bubbles: true, composed: true }));
     }
 
@@ -1076,7 +1082,7 @@ import { flight, durationFor, ease } from './zoom/camera.js'
       const drawing = this._inkDrawing = { pointerId: e.pointerId, touch: e.pointerType === 'touch', tool, points: [point], slideId: this._inkSlideId(), gesture: this._inkGesture, key: `${this._inkGesture}` };
       if (tool.tool === 'eraser') { this._erase(point); return; }
       if (tool.tool === 'select') { this._inkSelect('down', point); return; }
-      if (tool.tool === 'laser') { this.laserTrail('local', drawing.slideId, [point]); this._inkProgress(drawing); return; }
+      if (tool.tool === 'laser') { this.laserTrail('local', drawing.slideId, [point], { start: true }); this._inkProgress(drawing); return; }
       const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
       this._styleLive(path, tool);
       this._appendLive(path);
@@ -1228,7 +1234,8 @@ import { flight, durationFor, ease } from './zoom/camera.js'
       if (tool === 'select') { this._inkSelect('up', drawing.points[drawing.points.length - 1], drawing); return; }
       const detail = { key: drawing.key, slideId: drawing.slideId, tool, color, size, points: drawing.points };
       if (tool === 'laser') {
-        // Never saved: the trail retracts on its own.
+        // Never saved: lifted, the trail retracts on its own.
+        this.laserRelease('local');
         this.laserDot('local', drawing.slideId, null);
         this.dispatchEvent(new CustomEvent('inklaser', { detail, bubbles: true, composed: true }));
         return;
@@ -1590,8 +1597,10 @@ import { flight, durationFor, ease } from './zoom/camera.js'
     // Laser -------------------------------------------------------------------
     //
     // Trails and dots by key ('local' for this window, others from the ink
-    // bus), in design pixels. A trail's points expire after LASER_MS, so it
-    // retracts from its tail; frames run only while some trail is left.
+    // bus), in design pixels. While the pen is down a trail's points stay
+    // (time Infinity); lifted, they are stamped so that they expire one after
+    // the other within LASER_MS, and the trail retracts from its tail. Frames
+    // run only while some trail is shown or retracting.
 
     _laserEntry(key, slideId) {
       let entry = this._lasers.get(key);
@@ -1600,16 +1609,34 @@ import { flight, durationFor, ease } from './zoom/camera.js'
       return entry;
     }
 
-    /** Adds points to a laser trail; its dot moves to the last one. */
-    laserTrail(key, slideId, points) {
+    /** Adds points to a laser trail, held until laserRelease; its dot moves to the last one. */
+    laserTrail(key, slideId, points, { start = false } = {}) {
       if (!points?.length) return;
       const entry = this._laserEntry(key, slideId);
-      const t = performance.now();
-      for (const [x, y] of points) entry.points.push([x, y, t]);
+      points.forEach(([x, y], i) => {
+        // A held trail grows as long as the pen is down: skip points that
+        // add nothing visible, so a long trail stays cheap to draw.
+        const last = entry.points[entry.points.length - 1];
+        const begins = start && i === 0;
+        if (!begins && last && last[2] === Infinity && Math.hypot(x - last[0], y - last[1]) < LASER_STEP) return;
+        entry.points.push([x, y, Infinity, begins]);
+      });
+      if (key !== 'local') { clearTimeout(entry.heldTimer); entry.heldTimer = setTimeout(() => this.laserRelease(key), LASER_HELD_MS); }
       entry.dot = points[points.length - 1];
       this._kickLaser();
     }
 
+    /** The pen is lifted: the held trail retracts from its tail. */
+    laserRelease(key) {
+      const entry = this._lasers.get(key);
+      if (!entry) return;
+      const held = entry.points.filter(p => p[2] === Infinity);
+      const now = performance.now();
+      held.forEach((p, i) => { p[2] = now - LASER_MS + LASER_MS * (i + 1) / held.length; });
+      clearTimeout(entry.heldTimer);
+      this._kickLaser();
+    }
+
     /** Moves (or with null, hides) a laser dot. */
     laserDot(key, slideId, point) {
       const entry = this._lasers.get(key);
@@ -1647,6 +1674,8 @@ import { flight, durationFor, ease } from './zoom/camera.js'
       for (const [key, entry] of this._lasers) {
         entry.points = entry.points.filter(p => now - p[2] < LASER_MS);
         if (!entry.points.length && !entry.dot) { this._lasers.delete(key); continue; }
+        // A held trail needs frames too: a zoom, a new size or another slide
+        // must move it while the pen stays still.
         if (entry.points.length) running = true;
         if (entry.slideId && slideId && entry.slideId !== slideId) continue;
         // A red glow with a white core, the core drawn second.
@@ -1657,7 +1686,7 @@ import { flight, durationFor, ease } from './zoom/camera.js'
           ctx.beginPath();
           entry.points.forEach((p, i) => {
             const [x, y] = at(p);
-            if (i === 0 || p[2] - entry.points[i - 1][2] > LASER_GAP_MS) ctx.moveTo(x, y);
+            if (i === 0 || p[3]) ctx.moveTo(x, y);
             else ctx.lineTo(x, y);
           });
           ctx.stroke();
@@ -1689,7 +1718,7 @@ import { flight, durationFor, ease } from './zoom/camera.js'
       this._remoteInk ??= new Map();
       if (tool === 'laser') {
         const seen = this._remoteInk.get(key) ?? 0;
-        if (points.length > seen) this.laserTrail(key, slideId, points.slice(seen));
+        if (points.length > seen) this.laserTrail(key, slideId, points.slice(seen), { start: seen === 0 });
         this._remoteInk.set(key, points.length);
         return;
       }
@@ -1708,7 +1737,7 @@ import { flight, durationFor, ease } from './zoom/camera.js'
       const path = this._remoteInk?.get(key);
       if (path == null) return;
       this._remoteInk.delete(key);
-      if (typeof path === 'number') { this.laserDot(key, null, null); return; }
+      if (typeof path === 'number') { this.laserRelease(key); this.laserDot(key, null, null); return; }
       if (fade) { requestAnimationFrame(() => path.classList.add('fading')); setTimeout(() => path.remove(), 3200); }
       else this._removeLive(path);
     }

package/src/runtime/ink/bus.js

@@ -5,7 +5,7 @@
 //
 // Messages, the same on every transport:
 //   { type: 'segment', key, slideId, tool, color, size, from, points }
-//       points `from` index on, every ~60 ms while drawing
+//       points `from` index on, every ~25 ms while drawing
 //   { type: 'end', key, fade, stroke? }  the stroke is finished; a laser
 //       trail (tool 'laser', never saved) retracts on its own
 //   { type: 'dot', key, slideId, point } the laser's dot (null: hidden), as
@@ -17,10 +17,15 @@
 //   { type: 'media', key, video, action, time }  a video in the deck played,
 //       paused or moved to `time` (components/VideoPlayer.jsx)
 //   { type: 'op', op }                  a change of the saved ink (applyOp)
+//   { type: 'shared', key, name, value, replay? }  a deck component's shared
+//       state (../shared.js); `replay` answers a window that opened later
+//   { type: 'shared-ask', key }         a window that opened asks for it
 // Keys start with the sending window's id, so strokes never mix.
 import { changeInk, renameSlide } from './store.js'
+import { joinSegment } from './segments.js'
+import { connectShared, receiveShared } from '../shared.js'
 
-const SEGMENT_MS = 60
+const SEGMENT_MS = 25
 const DOT_MS = 50
 
 export function broadcastTransport(name) {
@@ -47,13 +52,14 @@ export function createInkBus(stage, transports) {
       else changeInk(message.op)
     }
     else if (message.type === 'segment') {
-      const known = incoming.get(message.key) ?? { ...message, points: [] }
-      // A lost segment leaves a gap until the end message repairs it.
-      if (message.from <= known.points.length) known.points = [...known.points.slice(0, message.from), ...message.points]
+      // Out of order, a segment waits for the one before it (segments.js).
+      const known = joinSegment(incoming.get(message.key) ?? { ...message, points: [] }, message)
       incoming.set(message.key, known)
       stage.liveStroke(message.key, known)
     } else if (message.type === 'controls') {
       stage.dispatchEvent(new CustomEvent('pollcontrols', { detail: { room: message.room, controls: message.controls } }))
+    } else if (message.type === 'shared' || message.type === 'shared-ask') {
+      receiveShared(message)
     } else if (message.type === 'media') {
       stage.dispatchEvent(new CustomEvent('mediacontrol', { detail: { video: message.video, action: message.action, time: message.time } }))
     } else if (message.type === 'zoom') {
@@ -71,6 +77,8 @@ export function createInkBus(stage, transports) {
     }
   }
   for (const transport of transports) transport.listen(receive)
+  // Deck components' shared state rides along; this window asks for it now.
+  connectShared(message => send({ ...message, key: `${me}:shared` }))
 
   // Own strokes in progress, sent in small pieces.
   const outgoing = new Map()

package/src/runtime/ink/outbox.js

@@ -0,0 +1,27 @@
+// What live ink does while the network is gone (room.js): it waits longer
+// after each failed attempt, and the messages it holds stay few. Segments
+// and finished strokes must all arrive, or the others keep a gap; the
+// laser's dot and the zoom only say where they are now, so the last of each
+// is enough.
+
+const RETRY_MIN_MS = 250
+const RETRY_MAX_MS = 5000
+// Past this many held messages the oldest strokes in progress go first: a
+// stroke drawn long ago in a dead WLAN is not worth a flood when it returns.
+export const OUTBOX_LIMIT = 2000
+
+// The wait before the next attempt after `failures` failed ones in a row.
+export function retryDelay(failures) {
+  return failures ? Math.min(RETRY_MAX_MS, RETRY_MIN_MS * 2 ** (failures - 1)) : 0
+}
+
+// The messages worth sending, in their order: only the last dot and zoom of
+// each sender, and no more than `limit`, dropping the oldest segments first.
+export function compactOutbox(messages, limit = OUTBOX_LIMIT) {
+  const last = new Map()
+  messages.forEach((message, i) => { if (message.type === 'dot' || message.type === 'zoom') last.set(`${message.type}:${message.key}`, i) })
+  let kept = messages.filter((message, i) => !(message.type === 'dot' || message.type === 'zoom') || last.get(`${message.type}:${message.key}`) === i)
+  let over = kept.length - limit
+  if (over > 0) kept = kept.filter(message => !(message.type === 'segment' && over-- > 0))
+  return kept
+}

package/src/runtime/ink/room.js

@@ -8,8 +8,11 @@
 // connections per server.
 import { stageRoom } from '../../live/client.js'
 import { presenceQuery } from '../../live/presence.js'
+import { retryDelay, compactOutbox } from './outbox.js'
 
-const BATCH_MS = 80
+// Live ink waits this long to gather a batch; with one request at a time the
+// network sets the pace, so a short wait adds little load and little lag.
+const BATCH_MS = 25
 
 /**
  * An ink bus transport through the stage room; `listen` only when `receive`.
@@ -17,23 +20,45 @@ const BATCH_MS = 80
  */
 export function roomTransport({ receive = false, view = null, onPresence = null } = {}) {
   const room = stageRoom()
-  let queue = [], timer = null, allowed = null, listeners = 1, source = null
+  let queue = [], timer = null, allowed = null, listeners = 1, source = null, sending = false, failures = 0
 
+  // One request at a time: two in flight could arrive in the other order.
   async function flush() {
     timer = null
-    if (!queue.length) return
+    if (!queue.length || sending) return
+    sending = true
+    try { await deliver() } finally { sending = false }
+    // What came in meanwhile has waited already: send it right away, unless
+    // the last attempt failed; then wait longer each time.
+    if (queue.length) timer ??= setTimeout(flush, retryDelay(failures))
+  }
+
+  // The batch goes back to the front, to be sent again after a wait.
+  function retry(messages) {
+    failures++
+    queue = compactOutbox([...messages, ...queue])
+  }
+
+  async function deliver() {
     const messages = queue.splice(0, 100)
     if (allowed === null) {
-      const info = await room.info()
+      let info
+      try { info = await room.info() } catch { return retry(messages) }
       allowed = info.reachable ? !!info.canReset : null
       if (!allowed) { queue = []; return }
     }
     try {
       const response = await fetch(`${room.url}/ink`, { method: 'POST', headers: room.headers({ 'Content-Type': 'application/json' }), body: JSON.stringify({ messages }) })
       if (response.status === 403) { allowed = false; queue = []; return }
+      // A server that is busy or restarting gets them again, as a lost network does.
+      if (response.status >= 500 || response.status === 429) return retry(messages)
+      failures = 0
       if (response.ok) listeners = (await response.json()).listeners ?? 1
-    } catch {}
-    if (queue.length) timer = setTimeout(flush, BATCH_MS)
+    } catch {
+      // The network failed (an iPad's WLAN): send them again, or the others
+      // keep a gap. A repeated segment only writes the same points again.
+      retry(messages)
+    }
   }
 
   return {

package/src/runtime/ink/segments.js

@@ -0,0 +1,21 @@
+// A stroke drawn in another window arrives in segments: { from, points },
+// the points from index `from` on. Segments can arrive out of order, and one
+// can be lost: one that starts past the points known waits in `early` until
+// the gap is filled, rather than being dropped with all that follow it. A
+// lost one leaves the gap until the stroke's end message repairs it.
+
+/** Adds a segment to `known` ({ points, early }) and returns it. */
+export function joinSegment(known, { from, points }) {
+  known.early ??= new Map()
+  known.early.set(from, points)
+  for (let joined = true; joined;) {
+    joined = false
+    for (const [at, more] of known.early) {
+      if (at > known.points.length) continue
+      known.points = [...known.points.slice(0, at), ...more]
+      known.early.delete(at)
+      joined = true
+    }
+  }
+  return known
+}