mdeck 2.3.0

package/src/runtime/design.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>mdeck design</title>
+  </head>
+  <body>
+    <div id="design-root"></div>
+    <script type="module" src="./design.jsx"></script>
+  </body>
+</html>

package/src/runtime/design.jsx

@@ -0,0 +1,5 @@
+import { h, render } from 'preact'
+import '../editor/editor.css'
+import { DesignApp } from '../editor/components/DesignApp.jsx'
+
+render(<DesignApp />, document.getElementById('design-root'))

package/src/runtime/editor.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>mdeck editor</title>
+  </head>
+  <body>
+    <div id="editor-root"></div>
+    <script type="module" src="./editor.jsx"></script>
+  </body>
+</html>

package/src/runtime/editor.jsx

@@ -0,0 +1,5 @@
+import { h, render } from 'preact'
+import '../editor/editor.css'
+import { App } from '../editor/components/App.jsx'
+
+render(<App />, document.getElementById('editor-root'))

package/src/runtime/editorBridge.js

@@ -0,0 +1,58 @@
+// Editor-mode rendering loop for the deck runtime, kept free of DOM access so
+// it can be tested in Node. The editor pushes whole sources; the bridge
+// parses, reloads the theme only when deck settings changed, mounts, and
+// reports diagnostics back. Nothing here throws on a broken deck.
+
+export function createEditorBridge({ parse, validate = () => [], loadTheme, setExtensionOverrides = () => {}, setCalloutLabels = () => {}, applyOverrides = config => config, mount, post = () => {}, fallbackTheme = 'neue' }) {
+  let appliedConfig = null
+  let themeConfig = null
+  let current = { deck: null, deckConfig: null }
+  let running = null
+  let pending = null
+
+  // `config` merges over the deck's own settings (e.g. to preview a palette);
+  // `overrides` carries unsaved theme and palette manifests.
+  async function run(source, { selection = null, config = null, overrides = null } = {}) {
+    const deck = parse(source)
+    const runtime = []
+    const requested = applyOverrides({ ...deck.deckConfig, ...(config ?? {}) })
+    const key = JSON.stringify({ requested, overrides })
+    if (key !== appliedConfig) {
+      setExtensionOverrides(overrides ?? {})
+      setCalloutLabels(requested)
+      let config = requested
+      try {
+        await loadTheme(config)
+      } catch (error) {
+        runtime.push({ severity: 'error', code: 'theme-load', message: error.message, line: 1, column: 1 })
+        config = { ...requested, theme: fallbackTheme }
+        try { await loadTheme(config) } catch {}
+      }
+      appliedConfig = key
+      themeConfig = config
+    }
+    let error = null
+    try { mount({ deck, deckConfig: themeConfig, selection }) } catch (caught) { error = caught?.message ?? String(caught) }
+    current = { deck, deckConfig: themeConfig }
+    post({ deckRendered: { slideCount: deck.slides.length, diagnostics: [...deck.diagnostics, ...validate(deck), ...runtime], error } })
+  }
+
+  // Renders are serialized; while one is in flight only the newest request waits.
+  function render(source, options = {}) {
+    if (running) { pending = { source, options }; return running }
+    running = run(source, options).finally(() => {
+      running = null
+      if (pending) { const next = pending; pending = null; render(next.source, next.options) }
+    })
+    return running
+  }
+
+  function handleMessage(data) {
+    if (!data || typeof data !== 'object' || !data.deckSource) return false
+    const { source, selection, config, overrides } = data.deckSource
+    if (typeof source === 'string') render(source, { selection: selection ?? null, config: config ?? null, overrides: overrides ?? null })
+    return true
+  }
+
+  return { render, handleMessage, current: () => current }
+}

package/src/runtime/fit.js

@@ -0,0 +1,149 @@
+// Content that does not fit its place on a slide. Code blocks are the usual
+// cause: first their type gets smaller, down to a size still readable from
+// the back of a room; only then do they get a smaller height, at least a few
+// lines, and scroll inside (code-block.css). The output of run code is part
+// of the same fit: when it appears, the code gives way, and if that is not
+// enough, the output scrolls too. Whatever still overflows marks the slide with
+// `data-overflow`, and the deck says so in the console, so a too-full slide
+// is found while writing rather than on the projector.
+
+const MIN_LINES = 4
+// Output of run code keeps at least this many lines when it has to scroll.
+const MIN_OUTPUT_LINES = 2
+// The smallest code type, in slide pixels (a 1920 × 1080 slide).
+const MIN_CODE_SIZE = 22
+
+// The nearest box between the element and the slide whose content is taller
+// than the box itself, and by how much.
+function overflowAround(element, slide) {
+  for (let box = element.parentElement; box && box !== slide.parentElement; box = box.parentElement) {
+    const extra = box.scrollHeight - box.clientHeight
+    if (extra > 1) return { box, extra }
+  }
+  return null
+}
+
+// The element that scrolls: the highlighted layer of editable code (the text
+// field above it fills the same box), or the code itself.
+const scroller = wrapper => wrapper.querySelector('.code-editable-highlight') ?? wrapper.querySelector('pre.code-block')
+
+function lineHeight(element) {
+  const style = getComputedStyle(element)
+  return parseFloat(style.lineHeight) || parseFloat(style.fontSize) * 1.5 || 30
+}
+
+// The fade at the lower edge goes once the code is scrolled to its end. For
+// editable code the text field scrolls and the highlighted layer follows.
+function watchEnd(element, scrolling = element) {
+  const update = () => element.classList.toggle('is-at-end', scrolling.scrollTop + scrolling.clientHeight >= scrolling.scrollHeight - 4)
+  if (!scrolling.dataset.fitWatched) {
+    scrolling.dataset.fitWatched = ''
+    scrolling.addEventListener('scroll', update, { passive: true })
+  }
+  update()
+}
+
+// Smaller type first: the text of the code takes the height, the padding
+// stays, so the size needed follows from how much is missing. The editable
+// text field above highlighted code gets the same size, so the cursor stays
+// on its letters.
+function shrinkType(wrapper, element, slide) {
+  const codes = [...wrapper.querySelectorAll('.code-block')]
+  for (let step = 0; step < 4; step++) {
+    const around = overflowAround(wrapper, slide)
+    if (!around) return
+    const size = parseFloat(getComputedStyle(element).fontSize)
+    if (!(size > MIN_CODE_SIZE)) return
+    const style = getComputedStyle(element)
+    const text = element.scrollHeight - parseFloat(style.paddingTop) - parseFloat(style.paddingBottom)
+    if (text <= 0) return
+    const next = Math.max(MIN_CODE_SIZE, Math.floor(size * Math.max(0, text - around.extra - 2) / text))
+    if (next >= size) return
+    for (const code of codes) code.style.fontSize = `${next}px`
+  }
+}
+
+/** Fits one slide's code blocks into the space they have; returns whether the slide still overflows. */
+export function fitSlide(slide) {
+  if (!slide) return false
+  const blocks = [...slide.querySelectorAll('.code-block-wrapper')].map(wrapper => ({ wrapper, element: scroller(wrapper) })).filter(block => block.element)
+  // Start from the natural size, so a slide that got more room fits again.
+  for (const { wrapper, element } of blocks) {
+    for (const code of wrapper.querySelectorAll('.code-block')) code.style.fontSize = ''
+    element.style.maxHeight = ''
+    const output = wrapper.querySelector('.code-output')
+    if (output) { output.style.maxHeight = ''; output.style.fontSize = ''; output.classList.remove('is-capped') }
+    element.classList.remove('is-capped')
+    wrapper.querySelector('.code-editable-container')?.classList.remove('is-capped')
+  }
+  // The tallest code gives way first.
+  blocks.sort((a, b) => b.element.offsetHeight - a.element.offsetHeight)
+  for (const { wrapper, element } of blocks) {
+    shrinkType(wrapper, element, slide)
+    const smallest = lineHeight(element) * MIN_LINES
+    // Measured again after each step: a column's scrollHeight leaves out
+    // some margins, so one step can fall short.
+    for (let step = 0; step < 4; step++) {
+      const around = overflowAround(wrapper, slide)
+      if (!around) break
+      const height = Math.max(smallest, element.offsetHeight - around.extra - 2)
+      if (height >= element.offsetHeight) break
+      element.style.maxHeight = `${Math.floor(height)}px`
+      element.classList.add('is-capped')
+      wrapper.querySelector('.code-editable-container')?.classList.add('is-capped')
+    }
+    if (element.classList.contains('is-capped')) watchEnd(element, wrapper.querySelector('.code-editable-input') ?? element)
+  }
+  // Output in the code's type size; with the code at its smallest height and
+  // the slide still too full, the output scrolls as well.
+  for (const { wrapper, element } of blocks) {
+    const output = wrapper.querySelector('.code-output')
+    if (!output) continue
+    output.style.fontSize = element.style.fontSize
+    const around = overflowAround(output, slide)
+    if (around) {
+      const height = Math.max(lineHeight(output) * MIN_OUTPUT_LINES, output.offsetHeight - around.extra - 2)
+      if (height < output.offsetHeight) output.style.maxHeight = `${Math.floor(height)}px`
+    }
+    if (output.scrollHeight > output.clientHeight + 2) {
+      output.classList.add('is-capped')
+      watchEnd(output)
+    }
+  }
+  const body = slide.querySelector('.slide-body')
+  const columns = [...slide.querySelectorAll('.slide-body, .split-left, .split-right, .text-pane')]
+  const overflowing = columns.some(box => box.scrollHeight - box.clientHeight > 2) || (body && body.scrollHeight > body.clientHeight + 2)
+  slide.toggleAttribute('data-overflow', overflowing)
+  return overflowing
+}
+
+/**
+ * Keeps the deck's slides fitted: the slide on screen when it is shown, all
+ * of them once the fonts are there and when the size changes. Reports each
+ * slide that is still too full once.
+ */
+export function fitDeck(stage, { report = true } = {}) {
+  if (!stage) return () => {}
+  const reported = new Set()
+  const fit = slide => {
+    if (!slide || !slide.offsetHeight) return
+    if (fitSlide(slide) && report) {
+      const id = slide.dataset.slideId ?? ''
+      if (!reported.has(id)) {
+        reported.add(id)
+        console.warn(`mdeck: slide ${id} has more content than fits; it is cut off at the bottom.`)
+      }
+    }
+  }
+  const active = () => stage.querySelector(':scope > [data-deck-active]')
+  const fitActive = () => requestAnimationFrame(() => fit(active()))
+  stage.addEventListener('slidechange', fitActive)
+  // A slide's content changed size, as when run code shows its output.
+  const refit = event => requestAnimationFrame(() => fit(event.target.closest?.('.slide') ?? active()))
+  stage.addEventListener('mdeck:refit', refit)
+  document.fonts?.ready.then(fitActive)
+  const observer = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(fitActive) : null
+  observer?.observe(stage)
+  fitActive()
+  return () => { stage.removeEventListener('slidechange', fitActive); stage.removeEventListener('mdeck:refit', refit); observer?.disconnect() }
+}

package/src/runtime/home.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="color-scheme" content="dark" />
+    <title>mdeck</title>
+  </head>
+  <body>
+    <div id="home-root"></div>
+    <script type="module" src="./home.jsx"></script>
+  </body>
+</html>

package/src/runtime/home.jsx

@@ -0,0 +1,5 @@
+import { h, render } from 'preact'
+import '../home/home.css'
+import { Home } from '../home/Home.jsx'
+
+render(<Home />, document.getElementById('home-root'))

package/src/runtime/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <!-- Added to an iPad's Home Screen, the deck opens without Safari's bars. -->
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <title>Deck</title>
+  </head>
+  <body>
+    <script type="module" src="./main.jsx"></script>
+  </body>
+</html>

package/src/runtime/ink/InkLayer.jsx

@@ -0,0 +1,17 @@
+import { h } from 'preact'
+import { useMemo } from 'preact/hooks'
+import { strokePath, toolOpacity, inkPaint, inkOrder } from '../../core/ink.js'
+import { useSlideInk, currentInk } from './store.js'
+
+// The saved ink of one slide, drawn above its content. It sits inside the
+// slide's <section>, so it scales with the stage, prints, and appears in the
+// reader's Read mode and in PDFs. It never takes pointer input.
+export function InkLayer({ slideId }) {
+  const strokes = useSlideInk(slideId)
+  const paths = useMemo(() => inkOrder(strokes).map(stroke => ({ id: stroke.id, d: strokePath(stroke), color: stroke.color, opacity: toolOpacity(stroke.tool) })), [strokes])
+  if (!paths.length) return null
+  const { width, height } = currentInk()
+  return <svg class="slide-ink" viewBox={`0 0 ${width} ${height}`} preserveAspectRatio="none" aria-hidden="true">
+    {paths.map(path => <path key={path.id} d={path.d} style={{ fill: inkPaint(path.color) }} fill-opacity={path.opacity} />)}
+  </svg>
+}

package/src/runtime/ink/Toolbar.jsx

@@ -0,0 +1,145 @@
+import { h } from 'preact'
+import { useEffect, useRef, useState } from 'preact/hooks'
+import { Icon } from '../../components/Icon.jsx'
+import { inkPaint } from '../../core/ink.js'
+import './toolbar.css'
+
+// The floating ink toolbar: tools, colours and sizes of the pen and the
+// highlighter (each keeps its own; one pen colour is the theme's accent),
+// deleting a selection, undo/redo, clear slide, hide saved ink, drawing with a
+// finger, and the drawings file. Swipes and the deck's own controls and keys
+// turn the slides. It folds into one button in the bottom right corner,
+// showing the current tool, and drawing goes on while it is folded. It drives
+// a <deck-stage> (inkTool, inkFinger, data-ink-hidden), an ink controller and
+// the selection.
+
+// "accent" is stored as the word and drawn in the theme's --accent, so the
+// drawing follows the palette (inkPaint in core/ink.js).
+export const INK_COLORS = ['#e11d48', '#2563eb', '#16a34a', 'accent', '#111111']
+export const HIGHLIGHTER_COLORS = ['#ffeb3b', '#76ff03', '#ff4081', '#40c4ff', '#ff9100']
+const COLORS = { pen: INK_COLORS, highlighter: HIGHLIGHTER_COLORS }
+const COLOR_NAMES = { '#e11d48': 'Red', '#2563eb': 'Blue', '#16a34a': 'Green', accent: 'Accent', '#111111': 'Text colour',
+  '#ffeb3b': 'Yellow', '#76ff03': 'Green', '#ff4081': 'Pink', '#40c4ff': 'Blue', '#ff9100': 'Orange' }
+const SIZES = { pen: [3, 6, 12], highlighter: [18, 30, 48] }
+// Each tool's icon has the tool's name.
+const TOOLS = [
+  ['pen', 'Pen'],
+  ['highlighter', 'Highlighter'],
+  ['select', 'Select and move'],
+  ['laser', 'Laser pointer'],
+  ['eraser', 'Eraser'],
+]
+
+// A small "are you sure" popover above the button that opened it. It does not
+// dim anything. While open it takes the keys, so the deck behind it does not
+// turn slides; Escape or a tap elsewhere cancels, and focus stays inside.
+function ConfirmPopover({ message, confirmLabel, onConfirm, onCancel }) {
+  const cancelRef = useRef(null)
+  const popRef = useRef(null)
+  useEffect(() => {
+    const pop = popRef.current
+    // Keep it on screen when the button sits near an edge of a narrow window.
+    const rect = pop.getBoundingClientRect()
+    const shift = Math.max(8 - rect.left, Math.min(0, innerWidth - 8 - rect.right))
+    pop.style.setProperty('--shift', `${Math.round(shift)}px`)
+    const opener = document.activeElement
+    cancelRef.current?.focus()
+    const onKey = event => {
+      event.stopPropagation()
+      if (event.key === 'Escape') { event.preventDefault(); onCancel() }
+      else if (event.key === 'Tab') {
+        const items = [...pop.querySelectorAll('button')]
+        const at = items.indexOf(document.activeElement)
+        event.preventDefault()
+        items[(at + (event.shiftKey ? items.length - 1 : 1)) % items.length].focus()
+      }
+    }
+    const onDown = event => { if (!pop.parentElement.contains(event.target)) onCancel() }
+    window.addEventListener('keydown', onKey, true)
+    window.addEventListener('pointerdown', onDown, true)
+    return () => {
+      window.removeEventListener('keydown', onKey, true)
+      window.removeEventListener('pointerdown', onDown, true)
+      opener?.focus?.()
+    }
+  }, [])
+  return <div class="ink-pop" ref={popRef} role="alertdialog" aria-label={message}>
+    <span class="ink-pop-text">{message}</span>
+    <button type="button" class="ink-pop-btn" ref={cancelRef} onClick={onCancel}>Cancel</button>
+    <button type="button" class="ink-pop-btn is-danger" onClick={onConfirm}>{confirmLabel}</button>
+  </div>
+}
+
+export function InkToolbar({ stage, controller, selection, onDone }) {
+  const [tool, setTool] = useState(TOOLS.some(([id]) => id === stage.inkTool?.tool) ? stage.inkTool.tool : 'pen')
+  const [style, setStyle] = useState(() => ({ pen: { color: INK_COLORS[0], sizeIndex: 1 }, highlighter: { color: HIGHLIGHTER_COLORS[0], sizeIndex: 1 }, ...stage._inkStyle }))
+  const [selected, setSelected] = useState(0)
+  const [collapsed, setCollapsed] = useState(!!stage._inkCollapsed)
+  const [hidden, setHidden] = useState(stage.hasAttribute('data-ink-hidden'))
+  const [finger, setFinger] = useState(!!stage.inkFinger)
+  const [clearing, setClearing] = useState(null) // the slide id awaiting confirmation
+  const [history, setHistory] = useState({ canUndo: false, canRedo: false, unsaved: false })
+
+  useEffect(() => controller.subscribe(setHistory), [controller])
+  useEffect(() => selection?.subscribe(setSelected), [selection])
+  useEffect(() => {
+    const { color, sizeIndex } = style[tool] ?? style.pen
+    stage.inkTool = { tool, color, size: (SIZES[tool] ?? SIZES.pen)[sizeIndex] }
+    // Remembered while the page is open, when drawing starts again.
+    stage._inkStyle = style
+    stage.setAttribute('data-ink-tool', tool)
+    if (tool !== 'select') selection?.clear()
+  }, [tool, style])
+  const setOwn = change => setStyle(all => ({ ...all, [tool]: { ...all[tool], ...change } }))
+  useEffect(() => { stage._inkCollapsed = collapsed }, [collapsed])
+  useEffect(() => { stage.toggleAttribute('data-ink-hidden', hidden) }, [hidden])
+  useEffect(() => { stage.inkFinger = finger }, [finger])
+
+  const slideId = () => stage._inkSlideId?.()
+  const button = (label, icon, action, { active = false, disabled = false } = {}) =>
+    <button type="button" class={`ink-btn${active ? ' is-active' : ''}`} title={label} aria-label={label} aria-pressed={active} disabled={disabled} onClick={action}><Icon name={icon} size={20} /></button>
+
+  const writing = !!COLORS[tool]
+  if (collapsed) {
+    const [, label] = TOOLS.find(([id]) => id === tool)
+    return <div class="ink-toolbar is-collapsed" role="toolbar" aria-label="Ink" data-ink-ui>
+      <button type="button" class="ink-btn ink-expand" title={`${label}: show the toolbar`} aria-label={`${label}: show the toolbar`} style={writing ? { '--tool-color': inkPaint(style[tool].color) } : {}} onClick={() => setCollapsed(false)}><Icon name={tool} size={20} /></button>
+    </div>
+  }
+  return <div class="ink-toolbar" role="toolbar" aria-label="Ink" data-ink-ui>
+    <div class="ink-group">
+      {TOOLS.map(([id, label]) => button(label, id, () => setTool(id), { active: tool === id }))}
+    </div>
+    {writing && <div class="ink-group">
+      {COLORS[tool].map(value => <button type="button" key={value} class={`ink-color${value === style[tool].color ? ' is-active' : ''}`} style={{ '--swatch': inkPaint(value) }} title={COLOR_NAMES[value] ?? value} aria-label={`Colour ${COLOR_NAMES[value] ?? value}`} aria-pressed={value === style[tool].color} onClick={() => setOwn({ color: value })} />)}
+    </div>}
+    {writing && <div class="ink-group">
+      {[0, 1, 2].map(i => <button type="button" key={i} class={`ink-size${i === style[tool].sizeIndex ? ' is-active' : ''}`} title={['Thin', 'Medium', 'Thick'][i]} aria-label={['Thin', 'Medium', 'Thick'][i]} aria-pressed={i === style[tool].sizeIndex} onClick={() => setOwn({ sizeIndex: i })}><span style={{ width: `${6 + i * 5}px`, height: `${6 + i * 5}px` }} /></button>)}
+    </div>}
+    {selected > 0 && <div class="ink-group">
+      {button('Delete selection (Delete)', 'trash', () => selection.remove())}
+    </div>}
+    <div class="ink-group">
+      {button('Undo', 'undo', () => controller.undo(), { disabled: !history.canUndo })}
+      {button('Redo', 'redo', () => controller.redo(), { disabled: !history.canRedo })}
+      <span class="ink-anchor">
+        {button('Clear this slide', 'trash', () => { const id = slideId(); setClearing(open => open || !id ? null : id) })}
+        {clearing && <ConfirmPopover
+          message="Clear this slide?"
+          confirmLabel="Clear"
+          onCancel={() => setClearing(null)}
+          onConfirm={() => { controller.clearSlide(clearing); setClearing(null) }}
+        />}
+      </span>
+    </div>
+    <div class="ink-group">
+      {button(hidden ? 'Show saved ink' : 'Hide saved ink', hidden ? 'eye-off' : 'eye', () => setHidden(!hidden), { active: hidden })}
+      {button(finger ? 'Fingers draw (on)' : 'Fingers draw (off: fingers swipe and select)', 'finger', () => setFinger(!finger), { active: finger })}
+      {!history.saving && button(history.unsaved ? 'Download the drawings file (changes are only in this browser)' : 'Download the drawings file', 'download', () => controller.download(), { active: history.unsaved })}
+    </div>
+    <div class="ink-group">
+      {button('Fold the toolbar', 'fold', () => setCollapsed(true))}
+      {button('Stop drawing (D)', 'close', onDone)}
+    </div>
+  </div>
+}

package/src/runtime/ink/attach.js

@@ -0,0 +1,69 @@
+// Drawing on a deck window: connects a <deck-stage> with an ink controller
+// and the floating toolbar. D starts and ends drawing, Escape ends it,
+// Cmd/Ctrl+Z undoes, Cmd/Ctrl+Shift+Z redoes, Delete removes the selection.
+import { h, render } from 'preact'
+import { strokePath } from '../../core/ink.js'
+import { createInkController, readLog } from './controller.js'
+import { changeInk, renameSlide } from './store.js'
+import { createInkBus, broadcastTransport } from './bus.js'
+import { InkToolbar } from './Toolbar.jsx'
+import { connectInkServer } from './server.js'
+import { createInkSelection } from './select.js'
+
+const typing = target => target?.closest?.('input, textarea, select, [contenteditable=""], [contenteditable="true"]')
+
+const channelName = storageKey => `mdeck-ink-live:${storageKey}`
+
+/** A window that only shows the ink others draw, such as the audience window. */
+export function watchInk(stage, { storageKey, transports = [] } = {}) {
+  stage.inkRenderer = strokePath
+  for (const op of readLog(storageKey)) changeInk(op)
+  // Served by `mdeck dev`: slides that got an id while this window was open.
+  import.meta.hot?.on('mdeck:ink', ({ renamed = [] } = {}) => { for (const { from, to } of renamed) renameSlide(from, to) })
+  return createInkBus(stage, [broadcastTransport(channelName(storageKey)), ...transports])
+}
+
+export function attachInk(stage, { storageKey, save = null, keys = true, transports = [], onMode = () => {} } = {}) {
+  stage.inkRenderer = strokePath
+  const bus = createInkBus(stage, [broadcastTransport(channelName(storageKey)), ...transports])
+  const controller = createInkController({ storageKey, save, publish: op => bus.op(op) })
+  // Saving through `mdeck run` when it lets this page; otherwise in this browser.
+  if (!save) connectInkServer(controller)
+  stage.addEventListener('inkstroke', event => { controller.addStroke(event.detail); bus.strokeDone(event.detail) })
+  stage.addEventListener('inklaser', event => bus.laserDone(event.detail))
+  stage.addEventListener('inkerase', event => controller.erase(event.detail))
+  const selection = createInkSelection(stage, controller)
+
+  const host = document.createElement('div')
+  host.className = 'ink-toolbar-host'
+  document.body.appendChild(host)
+  const done = () => { stage.inking = false }
+  const showToolbar = on => render(on ? h(InkToolbar, { stage, controller, selection, onDone: done }) : null, host)
+  stage.setAttribute('data-ink-enabled', '')
+  stage.addEventListener('inkmode', event => {
+    showToolbar(event.detail.inking)
+    document.documentElement.classList.toggle('is-inking', event.detail.inking)
+    onMode(event.detail.inking)
+  })
+
+  if (keys) {
+    window.addEventListener('keydown', event => {
+      if (typing(event.target)) return
+      const mod = event.metaKey || event.ctrlKey
+      if (!mod && !event.altKey && (event.key === 'd' || event.key === 'D')) {
+        event.preventDefault()
+        stage.inking = !stage.inking
+      } else if (event.key === 'Escape' && stage.inking) {
+        stage.inking = false
+      } else if ((event.key === 'Delete' || event.key === 'Backspace') && stage.inking && selection.count() > 0) {
+        event.preventDefault()
+        selection.remove()
+      } else if (mod && (event.key === 'z' || event.key === 'Z') && stage.inking) {
+        event.preventDefault()
+        if (event.shiftKey) controller.redo()
+        else controller.undo()
+      }
+    })
+  }
+  return controller
+}

package/src/runtime/ink/bus.js

@@ -0,0 +1,126 @@
+// Live ink between the windows of one talk: the presenter's view, the
+// audience window, other deck windows. Strokes show while they are drawn,
+// and every change of the ink (a finished stroke, the eraser, undo) reaches
+// the others right away, whether or not a server saves it.
+//
+// Messages, the same on every transport:
+//   { type: 'segment', key, slideId, tool, color, size, from, points }
+//       points `from` index on, every ~60 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
+//       a hovering pen moves, at most every ~50 ms
+//   { type: 'zoom', key, slideId, scale, x, y }  the part of the slide this
+//       window shows (stage zoom), at most every ~50 ms
+//   { type: 'reveal', key, room, shown }  a poll's right answer shown or hidden
+//   { type: 'op', op }                  a change of the saved ink (applyOp)
+// Keys start with the sending window's id, so strokes never mix.
+import { changeInk, renameSlide } from './store.js'
+
+const SEGMENT_MS = 60
+const DOT_MS = 50
+
+export function broadcastTransport(name) {
+  if (typeof BroadcastChannel === 'undefined') return null
+  const channel = new BroadcastChannel(name)
+  return {
+    send: message => channel.postMessage(message),
+    listen: handler => { channel.onmessage = ({ data }) => handler(data) },
+    close: () => channel.close(),
+  }
+}
+
+export function createInkBus(stage, transports) {
+  transports = transports.filter(Boolean)
+  const me = Math.random().toString(36).slice(2, 8)
+  const send = message => { for (const transport of transports) transport.send(message) }
+
+  // Strokes from others, by key: the points so far.
+  const incoming = new Map()
+  function receive(message) {
+    if (!message || typeof message !== 'object' || message.key?.startsWith(`${me}:`)) return
+    if (message.type === 'op') {
+      if (message.op?.type === 'rename') renameSlide(message.op.from, message.op.to)
+      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]
+      incoming.set(message.key, known)
+      stage.liveStroke(message.key, known)
+    } else if (message.type === 'reveal') {
+      stage.dispatchEvent(new CustomEvent('pollreveal', { detail: { room: message.room, shown: !!message.shown } }))
+    } else if (message.type === 'zoom') {
+      if (message.slideId && message.slideId === stage._inkSlideId()) stage.setZoom(message.scale > 1 ? message : null, 'remote', { announce: false })
+    } else if (message.type === 'dot') {
+      stage.laserDot(message.key, message.slideId, message.point)
+    } else if (message.type === 'end') {
+      if (message.stroke) stage.liveStroke(message.key, message.stroke)
+      incoming.delete(message.key)
+      stage.endLiveStroke(message.key, { fade: !!message.fade })
+    }
+  }
+  for (const transport of transports) transport.listen(receive)
+
+  // Own strokes in progress, sent in small pieces.
+  const outgoing = new Map()
+  function flush(key) {
+    const entry = outgoing.get(key)
+    if (!entry) return
+    clearTimeout(entry.timer)
+    entry.timer = null
+    const { detail, sent } = entry
+    if (detail.points.length > sent) {
+      send({ type: 'segment', key: `${me}:${key}`, slideId: detail.slideId, tool: detail.tool, color: detail.color, size: detail.size, from: sent, points: detail.points.slice(sent) })
+      entry.sent = detail.points.length
+    }
+  }
+  stage.addEventListener('inkprogress', ({ detail }) => {
+    let entry = outgoing.get(detail.key)
+    if (!entry) outgoing.set(detail.key, entry = { detail, sent: 0, timer: null })
+    entry.detail = detail
+    // A straightened stroke replaces its points: send them again from the start.
+    if (detail.restart) entry.sent = 0
+    entry.timer ??= setTimeout(() => flush(detail.key), entry.sent ? SEGMENT_MS : 0)
+  })
+  const finish = (detail, extra = {}) => {
+    flush(detail.key)
+    outgoing.delete(detail.key)
+    send({ type: 'end', key: `${me}:${detail.key}`, ...extra })
+  }
+
+  // The laser's dot: the latest position, not every one.
+  let dot = null, dotTimer = null
+  const sendDot = () => { dotTimer = null; if (dot) send({ type: 'dot', key: `${me}:dot`, ...dot }) }
+  stage.addEventListener('inklaserdot', ({ detail }) => {
+    dot = detail
+    if (!detail.point) { clearTimeout(dotTimer); dotTimer = null; sendDot(); return }
+    dotTimer ??= setTimeout(sendDot, DOT_MS)
+  })
+
+  // A poll's right answer, shown here: the others show it too.
+  stage.addEventListener('pollreveal', ({ detail }) => {
+    if (detail?.local) send({ type: 'reveal', key: `${me}:reveal`, room: detail.room, shown: !!detail.shown })
+  })
+
+  // The zoom: the latest view, not every step of a pinch.
+  let zoom = null, zoomTimer = null
+  const sendZoom = () => { zoomTimer = null; if (zoom) send({ type: 'zoom', key: `${me}:zoom`, ...zoom }) }
+  stage.addEventListener('zoomchange', ({ detail }) => {
+    if (detail.reason === 'remote') return
+    const { slideId, scale, x, y } = detail
+    zoom = { slideId, scale, x, y }
+    zoomTimer ??= setTimeout(sendZoom, scale > 1 ? DOT_MS : 0)
+  })
+
+  return {
+    /** A change made in this window: the others apply it too. */
+    op(op) { send({ type: 'op', key: `${me}:op`, op }) },
+    /** The stroke with this key became saved ink (its op was sent first). */
+    strokeDone(detail) { finish(detail) },
+    /** A laser trail ended: the others let it retract, like this window. */
+    laserDone(detail) { finish(detail) },
+    close() { for (const transport of transports) transport.close?.() },
+  }
+}