mdeck 2.3.0

package/src/runtime/ink/controller.js

@@ -0,0 +1,132 @@
+// Drawing on a deck: turns the stage's ink events into changes of the ink,
+// with undo and redo of this device's own changes; `publish(op)` passes each
+// change on to the other windows (bus.js). Every change goes to
+// `save(op)` when a server keeps the ink file; otherwise it is kept in this
+// browser (localStorage) and the file can be downloaded.
+import { currentInk, changeInk, slideStrokes } from './store.js'
+import { simplify, hitTest, serializeInk } from '../../core/ink.js'
+import { inkFileName } from 'virtual:deck-ink'
+
+function deviceId() {
+  try {
+    let id = localStorage.getItem('mdeck-ink-device')
+    if (!id) localStorage.setItem('mdeck-ink-device', id = Math.random().toString(36).slice(2, 8))
+    return id
+  } catch { return (deviceId.fallback ??= Math.random().toString(36).slice(2, 8)) }
+}
+
+export const readLog = key => { try { return JSON.parse(localStorage.getItem(key) ?? '[]') } catch { return [] } }
+const writeLog = (key, log) => { try { localStorage.setItem(key, JSON.stringify(log)); return true } catch { return false } }
+
+export function createInkController({ storageKey, save = null, publish = () => {} } = {}) {
+  const device = deviceId()
+  let counter = 0
+  const undoStack = [], redoStack = []
+  const listeners = new Set()
+  const notify = () => { for (const listener of listeners) listener(state()) }
+  let saving = save
+
+  // Changes made in this browser without a server, from earlier visits too.
+  let log = saving ? [] : readLog(storageKey)
+  for (const op of log) changeInk(op)
+
+  const state = () => ({ canUndo: undoStack.length > 0, canRedo: redoStack.length > 0, unsaved: !saving && log.length > 0, saving: !!saving })
+
+  function send(ops) {
+    // Another window of this deck may have added to the log meanwhile.
+    if (!saving) log = readLog(storageKey)
+    for (const op of ops) {
+      changeInk(op)
+      publish(op)
+      if (saving) saving(op)
+      else log.push(op)
+    }
+    if (!saving) writeLog(storageKey, log)
+  }
+
+  // A history entry is the list of changes that undoes it. Changes with the
+  // same `gesture` (one stroke of the eraser) are one entry.
+  function commit(ops, inverse, gesture = null) {
+    if (!ops.length) return
+    send(ops)
+    const last = undoStack[undoStack.length - 1]
+    if (gesture != null && last?.gesture === gesture) {
+      last.ops.push(...ops)
+      last.inverse.unshift(...inverse)
+    } else undoStack.push({ ops, inverse, gesture })
+    redoStack.length = 0
+    notify()
+  }
+
+  return {
+    device,
+    subscribe(listener) { listeners.add(listener); listener(state()); return () => listeners.delete(listener) },
+    /** Changes kept in this browser, not saved anywhere yet. */
+    localChanges: () => log.slice(),
+    /** Tells the other windows about a change already made here (a slide's new id). */
+    share(op) { publish(op) },
+    /** Sends a change without adding it to the undo history. */
+    replay(op) { send([op]) },
+    /** From here on, changes go to `save(op)` and the local copy is dropped. */
+    useServer(saveOp) {
+      saving = saveOp
+      log = []
+      try { localStorage.removeItem(storageKey) } catch {}
+      notify()
+    },
+
+    addStroke({ slideId, tool, color, size, points }) {
+      const stroke = { id: `${device}:${Date.now().toString(36)}${(counter++).toString(36)}`, tool, color, size, points: simplify(points, 0.5) }
+      commit([{ type: 'add', slideId, stroke }], [{ type: 'remove', slideId, ids: [stroke.id] }])
+    },
+
+    erase({ slideId, point, radius, gesture = null }) {
+      const hits = slideStrokes(slideId).filter(stroke => hitTest(stroke, point, radius))
+      if (!hits.length) return
+      commit([{ type: 'remove', slideId, ids: hits.map(stroke => stroke.id) }], hits.map(stroke => ({ type: 'add', slideId, stroke })), gesture == null ? null : `erase:${gesture}`)
+    },
+
+    /** Puts changed copies of strokes (the same ids) in place of the originals: moving a selection. */
+    replaceStrokes({ slideId, before, after }) {
+      if (!after.length) return
+      commit(after.map(stroke => ({ type: 'add', slideId, stroke })), before.map(stroke => ({ type: 'add', slideId, stroke })))
+    },
+
+    removeStrokes({ slideId, strokes }) {
+      if (!strokes.length) return
+      commit([{ type: 'remove', slideId, ids: strokes.map(stroke => stroke.id) }], strokes.map(stroke => ({ type: 'add', slideId, stroke })))
+    },
+
+    clearSlide(slideId) {
+      const strokes = slideStrokes(slideId)
+      if (!strokes.length) return
+      commit([{ type: 'clear', slideId, ids: strokes.map(stroke => stroke.id) }], strokes.map(stroke => ({ type: 'add', slideId, stroke })))
+    },
+
+    undo() {
+      const entry = undoStack.pop()
+      if (!entry) return
+      send(entry.inverse)
+      redoStack.push(entry)
+      notify()
+    },
+
+    redo() {
+      const entry = redoStack.pop()
+      if (!entry) return
+      send(entry.ops)
+      undoStack.push(entry)
+      notify()
+    },
+
+    /** Saves the ink as its file, for putting it next to the deck. */
+    download() {
+      const blob = new Blob([serializeInk(currentInk())], { type: 'application/json' })
+      const link = Object.assign(document.createElement('a'), { href: URL.createObjectURL(blob), download: inkFileName })
+      document.body.appendChild(link)
+      link.click()
+      link.remove()
+      setTimeout(() => URL.revokeObjectURL(link.href), 1000)
+    },
+  }
+}

package/src/runtime/ink/room.js

@@ -0,0 +1,101 @@
+// The talk across devices, through the deck's stage room on the server
+// (built into `mdeck run`, or `mdeck server`): an iPad draws and steers, the
+// laptop's audience window on the projector follows, and navigation on the
+// laptop reaches the iPad too.
+//
+// Main slide frames and audience windows share one connection for ink and
+// position. Next-slide previews do not connect, since browsers allow few
+// connections per server.
+import { stageRoom } from '../../live/client.js'
+import { presenceQuery } from '../../live/presence.js'
+
+const BATCH_MS = 80
+
+/**
+ * An ink bus transport through the stage room; `listen` only when `receive`.
+ * `view` counts this window as connected; `onPresence` hears who else is.
+ */
+export function roomTransport({ receive = false, view = null, onPresence = null } = {}) {
+  const room = stageRoom()
+  let queue = [], timer = null, allowed = null, listeners = 1, source = null
+
+  async function flush() {
+    timer = null
+    if (!queue.length) return
+    const messages = queue.splice(0, 100)
+    if (allowed === null) {
+      const info = await room.info()
+      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 }
+      if (response.ok) listeners = (await response.json()).listeners ?? 1
+    } catch {}
+    if (queue.length) timer = setTimeout(flush, BATCH_MS)
+  }
+
+  return {
+    send(message) {
+      if (allowed === false) return
+      // Nobody on another device watches: strokes in progress can stay here.
+      // Strokes in progress, the laser's dot and the zoom only matter to
+      // someone watching.
+      const live = message.type === 'segment' || message.type === 'dot' || message.type === 'zoom'
+      if (live && listeners === 0) return
+      queue.push(message)
+      timer ??= setTimeout(flush, live ? BATCH_MS : 0)
+    },
+    listen(handler) {
+      if (!receive || typeof EventSource === 'undefined') return
+      source = new EventSource(`${room.url}/events?${presenceQuery({ view, listen: !!onPresence })}`)
+      source.addEventListener('snapshot', event => {
+        const snapshot = JSON.parse(event.data)
+        for (const message of snapshot.ink ?? []) handler(message)
+        if (snapshot.presence) onPresence?.(snapshot.presence)
+      })
+      if (onPresence) source.addEventListener('presence', event => onPresence(JSON.parse(event.data)))
+      source.addEventListener('ink', event => { for (const message of JSON.parse(event.data).messages) handler(message) })
+      for (const listener of stateListeners) source.addEventListener('snapshot', event => listener(JSON.parse(event.data).state))
+      for (const listener of stateListeners) source.addEventListener('state', event => listener(JSON.parse(event.data).state))
+    },
+    close() { source?.close() },
+  }
+}
+
+// Position followers, attached before the transport listens.
+const stateListeners = new Set()
+
+/** Follow navigation from another device in either kind of main slide window. */
+export function followStageRoom(stage) {
+  stateListeners.add(state => {
+    if (!state || state.screen === stageRoom().screen || !Number.isInteger(state.index)) return
+    const current = stage.state
+    if (current?.index === state.index && current?.step === state.step) return
+    stage.setState({ index: state.index, step: state.step ?? -1, slideId: state.slideId })
+  })
+}
+
+/** Publish navigation made here; received positions never echo back. */
+export function announceStagePosition(stage) {
+  const room = stageRoom()
+  let allowed = null, last = null
+  async function post(event) {
+    const { index, step, slideId } = stage.state
+    const key = `${slideId}:${index}:${step}`
+    if (event?.detail.reason === 'sync') { last = key; return }
+    if (key === last || allowed === false) return
+    // Opening a window must not move the projector; only changes count.
+    const at = !event || event.detail.reason === 'init' ? 0 : Date.now()
+    last = key
+    if (allowed === null) {
+      const info = await room.info()
+      allowed = info.reachable && !!info.canReset
+      if (!allowed) return
+    }
+    fetch(`${room.url}/state`, { method: 'POST', headers: room.headers({ 'Content-Type': 'application/json' }), body: JSON.stringify({ state: { index, step, slideId, at, screen: room.screen } }) }).catch(() => {})
+  }
+  stage.addEventListener('statechange', post)
+  post()
+}

package/src/runtime/ink/select.js

@@ -0,0 +1,124 @@
+// Selecting and moving drawn strokes. The select tool's lasso (`inkselect`,
+// { phase, slideId, point, points } in design pixels) selects the strokes at
+// least half inside it, its tap the topmost stroke under it; a finger's tap
+// while drawing (`inktap`) selects the stroke under the finger. A selection
+// then takes the pen that lands on it, whatever the tool: inside its box the
+// pen moves it, and a straight line (two points) shows handles at its ends
+// that the pen moves one at a time. Changes show at once in this window and
+// become one change (undo puts the strokes back) when the pen lifts.
+import { slideStrokes, changeInk, onInkChange } from './store.js'
+import { strokesInLasso, strokesBox, translateStroke, hitTest } from '../../core/ink.js'
+
+const PAD = 14        // design pixels around a selection
+const TAP = 10        // a lasso smaller than this is a tap
+const HANDLE = 40     // design pixels around an end point that grab it
+
+export function createInkSelection(stage, controller) {
+  let slideId = null, ids = new Set(), drag = null
+  const listeners = new Set()
+  const selected = () => slideStrokes(slideId).filter(stroke => ids.has(stroke.id))
+  // The end points of a lone straight line.
+  const handles = () => { const strokes = selected(); return strokes.length === 1 && strokes[0].points.length === 2 ? strokes[0].points : [] }
+
+  function show(lasso = null) {
+    const strokes = slideId ? selected() : []
+    stage.showSelection({ box: strokes.length ? strokesBox(strokes, PAD) : null, lasso, handles: drag?.handle == null ? handles() : [] })
+  }
+  function select(id, strokes) {
+    slideId = id
+    ids = new Set(strokes.map(stroke => stroke.id))
+    for (const listener of listeners) listener(ids.size)
+    show()
+  }
+  const handleAt = point => handles().findIndex(([x, y]) => Math.hypot(point[0] - x, point[1] - y) <= HANDLE)
+  const insideBox = point => {
+    const box = ids.size ? strokesBox(selected(), PAD) : null
+    return !!box && point[0] >= box[0] && point[0] <= box[2] && point[1] >= box[1] && point[1] <= box[3]
+  }
+
+  // The stage asks before it lets the pen draw.
+  stage.inkSelectionHit = point => !!ids.size && stage._inkSlideId?.() === slideId && (handleAt(point) >= 0 || insideBox(point))
+  stage.inkSelectionClear = () => clear()
+
+  stage.addEventListener('inktap', ({ detail }) => {
+    const hit = [...slideStrokes(detail.slideId)].reverse().find(stroke => hitTest(stroke, detail.point, detail.radius ?? 22))
+    select(detail.slideId, hit ? [hit] : [])
+  })
+
+  stage.addEventListener('inkselect', ({ detail }) => {
+    const { phase, point, points } = detail
+    if (phase === 'down') {
+      const handle = detail.slideId === slideId ? handleAt(point) : -1
+      if (handle >= 0) {
+        drag = { handle, original: selected()[0] }
+      } else if (detail.slideId === slideId && insideBox(point)) {
+        drag = { from: point, originals: selected() }
+      } else {
+        drag = null
+        select(detail.slideId, [])
+      }
+      show()
+    } else if (phase === 'move') {
+      if (drag?.handle != null) {
+        changeInk({ type: 'add', slideId, stroke: moveEnd(drag.original, drag.handle, point) })
+        show()
+      } else if (drag) {
+        const dx = point[0] - drag.from[0], dy = point[1] - drag.from[1]
+        for (const stroke of drag.originals) changeInk({ type: 'add', slideId, stroke: translateStroke(stroke, dx, dy) })
+        show()
+      } else show(points)
+    } else if (phase === 'up') {
+      if (drag?.handle != null) {
+        const { original, handle } = drag
+        drag = null
+        const moved = moveEnd(original, handle, point)
+        if (moved.points[handle][0] !== original.points[handle][0] || moved.points[handle][1] !== original.points[handle][1]) {
+          controller.replaceStrokes({ slideId, before: [original], after: [moved] })
+        }
+        show()
+        return
+      }
+      if (drag) {
+        const dx = point[0] - drag.from[0], dy = point[1] - drag.from[1]
+        const { originals } = drag
+        drag = null
+        if (dx || dy) controller.replaceStrokes({ slideId, before: originals, after: originals.map(stroke => translateStroke(stroke, dx, dy)) })
+        show()
+        return
+      }
+      const strokes = slideStrokes(detail.slideId)
+      const span = strokesBox([{ points, size: 0 }])
+      const tap = span[2] - span[0] < TAP && span[3] - span[1] < TAP
+      select(detail.slideId, tap ? [...strokes].reverse().filter(stroke => hitTest(stroke, point, 12)).slice(0, 1) : strokesInLasso(strokes, points))
+    }
+  })
+
+  // Strokes that went away (eraser, undo, another window) leave the selection.
+  onInkChange(() => {
+    if (!ids.size || drag) return
+    const present = new Set(selected().map(stroke => stroke.id))
+    if (present.size !== ids.size) select(slideId, selected())
+    else show()
+  })
+  function clear() { drag = null; if (ids.size || slideId) select(null, []) }
+  stage.addEventListener('slidechange', clear)
+  stage.addEventListener('inkmode', event => { if (!event.detail.inking) clear() })
+
+  return {
+    /** Calls `listener(count)` whenever the selection changes. */
+    subscribe(listener) { listeners.add(listener); listener(ids.size); return () => listeners.delete(listener) },
+    clear,
+    count: () => ids.size,
+    remove() {
+      const strokes = selected()
+      if (!strokes.length) return
+      controller.removeStrokes({ slideId, strokes })
+      select(slideId, [])
+    },
+  }
+}
+
+// The stroke with one end point moved to `point` (its pressure kept).
+function moveEnd(stroke, index, [x, y]) {
+  return { ...stroke, points: stroke.points.map((p, i) => i === index ? [x, y, p[2]] : p) }
+}

package/src/runtime/ink/server.js

@@ -0,0 +1,75 @@
+// Saving ink through `mdeck run` (src/build/inkPlugin.js). When the page was
+// served by a dev server that lets it save, the controller's changes go
+// there, batched, and changes from other windows arrive as `mdeck:ink`.
+// Anywhere else (a built deck, a device that may not save) this returns false
+// and the ink stays in this browser.
+import { replaceInk, renameSlide } from './store.js'
+import { pairHeaders } from '../../live/pairing.js'
+import { devPath } from '../../core/devPath.js'
+
+const BASE = devPath('__mdeck/ink')
+
+// A paired iPad sends its token; this computer needs none.
+export async function connectInkServer(controller, { headers = () => pairHeaders() } = {}) {
+  let response
+  try { response = await fetch(BASE, { cache: 'no-store', headers: headers() }) } catch { return false }
+  if (!response.ok) return false
+  let { ink, deckHash } = await response.json()
+
+  // Changes made in this browser before the server was there go to it first.
+  const earlier = controller.localChanges()
+  replaceInk(ink)
+  let queue = [], sending = false, stale = false
+
+  async function refresh() {
+    if (sending || queue.length) { stale = true; return }
+    try {
+      const fresh = await (await fetch(BASE, { cache: 'no-store', headers: headers() })).json()
+      if (sending || queue.length) { stale = true; return }
+      deckHash = fresh.deckHash
+      replaceInk(fresh.ink)
+    } catch {}
+  }
+
+  async function flush() {
+    if (sending || !queue.length) return
+    sending = true
+    const ops = queue
+    queue = []
+    try {
+      const reply = await fetch(`${BASE}/ops`, { method: 'POST', headers: { 'Content-Type': 'application/json', ...headers() }, body: JSON.stringify({ deckHash, ops }) })
+      const body = await reply.json().catch(() => ({}))
+      if (reply.ok) {
+        deckHash = body.deckHash
+        // A slide got its id with this stroke: the audience window and other
+        // devices must use it too, or later strokes, the laser and the zoom
+        // would name a slide they do not know.
+        for (const { from, to } of body.renamed ?? []) { renameSlide(from, to); controller.share({ type: 'rename', from, to }) }
+      } else {
+        // The deck changed under this page: take the server's ink.
+        console.warn('mdeck: ink not saved:', body.error ?? reply.status)
+        stale = true
+      }
+    } catch (error) {
+      console.warn('mdeck: ink not saved:', error.message)
+      queue = [...ops, ...queue]
+    } finally {
+      sending = false
+    }
+    if (queue.length) flush()
+    else if (stale) { stale = false; refresh() }
+  }
+
+  const save = op => {
+    queue.push(op)
+    queueMicrotask(flush)
+  }
+  controller.useServer(save)
+  for (const op of earlier) controller.replay(op)
+
+  import.meta.hot?.on('mdeck:ink', ({ renamed = [] } = {}) => {
+    for (const { from, to } of renamed) renameSlide(from, to)
+    refresh()
+  })
+  return true
+}

package/src/runtime/ink/store.js

@@ -0,0 +1,55 @@
+// The deck's ink in the browser: what the ink file held when the page was
+// built, plus changes made since. Components subscribe to one slide.
+import { useEffect, useState } from 'preact/hooks'
+import bundled from 'virtual:deck-ink'
+import { applyOp } from '../../core/ink.js'
+
+let ink = bundled
+const listeners = new Set()
+// Slides that got an id while the page was open: the rendered slides still
+// know their old id (slide-3), the ink uses the new one.
+const aliases = new Map()
+export const resolveSlideId = slideId => aliases.get(slideId) ?? slideId
+
+export const currentInk = () => ink
+export const slideStrokes = slideId => ink.slides[resolveSlideId(slideId)] ?? []
+
+/** Replaces all ink, for example after the server sent the saved file. */
+export function replaceInk(next) {
+  ink = next
+  for (const listener of listeners) listener(ink)
+}
+
+/** Applies one change (see applyOp in core/ink.js) and tells subscribers. */
+export function changeInk(op) {
+  const next = applyOp(ink, op.slideId ? { ...op, slideId: resolveSlideId(op.slideId) } : op)
+  if (next !== ink) replaceInk(next)
+  return next
+}
+
+/** A slide got a new id: its ink and the rendered slide follow. */
+export function renameSlide(from, to) {
+  if (!from || !to || from === to) return
+  aliases.set(from, to)
+  for (const [old, current] of aliases) if (current === from) aliases.set(old, to)
+  for (const section of document.querySelectorAll(`[data-slide-id="${CSS.escape(from)}"]`)) section.dataset.slideId = to
+  changeInk({ type: 'rename', from, to })
+  replaceInk(ink)
+}
+
+/** Calls `listener(ink)` after every change; returns the way to stop. */
+export function onInkChange(listener) {
+  listeners.add(listener)
+  return () => listeners.delete(listener)
+}
+
+export function useSlideInk(slideId) {
+  const [strokes, setStrokes] = useState(() => slideStrokes(slideId))
+  useEffect(() => {
+    const listener = () => setStrokes(slideStrokes(slideId))
+    listeners.add(listener)
+    listener()
+    return () => listeners.delete(listener)
+  }, [slideId])
+  return strokes
+}

package/src/runtime/ink/toolbar.css

@@ -0,0 +1,79 @@
+/* The floating ink toolbar, in the dark chrome of the other tools. It sits
+   above the stage and its ink layers, and the stage leaves its input alone. */
+.ink-toolbar {
+  position: fixed; left: 0; right: 0; bottom: max(16px, env(safe-area-inset-bottom)); margin: 0 auto; width: fit-content;
+  z-index: 2147483000;
+  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
+  max-width: calc(100vw - 24px);
+  padding: 6px; border: 1px solid #3a3a3a; border-radius: 12px;
+  background: rgba(22, 22, 22, 0.94); color: #e6e6e6;
+  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
+  font: 13px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
+  /* Taps only: a pinch here must not zoom the page, and the toolbar with it. */
+  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
+}
+/* Folded: one button in the bottom right corner, with the tool's colour. */
+.ink-toolbar.is-collapsed {
+  left: auto; right: max(16px, env(safe-area-inset-right)); margin: 0;
+  padding: 4px; border-radius: 50%;
+}
+.ink-toolbar.is-collapsed .ink-btn { border-radius: 50%; position: relative; }
+.ink-expand[style*="--tool-color"]::after {
+  content: ''; position: absolute; right: 5px; bottom: 5px; width: 10px; height: 10px; border-radius: 50%;
+  background: var(--tool-color); box-shadow: 0 0 0 1.5px rgba(22, 22, 22, 0.94);
+}
+.ink-group { display: flex; align-items: center; gap: 4px; padding: 0 4px; }
+.ink-group + .ink-group { border-left: 1px solid #333; }
+.ink-btn, .ink-color, .ink-size {
+  display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
+  border: 1px solid transparent; border-radius: 8px; background: none; color: inherit; cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+.ink-btn:hover:not(:disabled), .ink-size:hover { background: #262626; }
+.ink-btn.is-active, .ink-size.is-active { background: #27436a; border-color: #3d6094; color: #fff; }
+.ink-btn:disabled { opacity: 0.35; cursor: default; }
+.ink-color::after { content: ''; width: 22px; height: 22px; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); }
+.ink-color.is-active { border-color: #e6e6e6; }
+.ink-size span { display: block; border-radius: 50%; background: currentColor; }
+/* Narrow windows, such as the presenter view's slide beside the notes: a
+   little more compact, so the toolbar stays on one line. */
+@media (max-width: 1000px) { .ink-btn, .ink-color, .ink-size { width: 34px; height: 34px; } .ink-group { gap: 2px; padding: 0 3px; } .ink-toolbar { gap: 4px; padding: 5px; } }
+/* Fingers need bigger targets than a mouse. */
+@media (pointer: coarse) { .ink-btn, .ink-color, .ink-size { width: 44px; height: 44px; } }
+/* The small confirmation popover over the clear button. */
+.ink-anchor { position: relative; display: flex; }
+.ink-pop {
+  position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translateX(calc(-50% + var(--shift, 0px)));
+  display: flex; align-items: center; gap: 6px; white-space: nowrap;
+  padding: 6px 6px 6px 12px; border: 1px solid #3a3a3a; border-radius: 10px;
+  background: #1c1c1c; color: #e6e6e6; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
+  animation: ink-pop-in 100ms ease-out;
+}
+/* A caret pointing at the button; it stays on the button when the popover is shifted. */
+.ink-pop::after {
+  content: ''; position: absolute; top: 100%; left: calc(50% - var(--shift, 0px)); width: 9px; height: 9px;
+  margin: -5px 0 0 -5px; transform: rotate(45deg);
+  background: #1c1c1c; border: solid #3a3a3a; border-width: 0 1px 1px 0;
+}
+.ink-pop-text { padding-right: 4px; font-size: 13px; color: #cfcfcf; }
+.ink-pop-btn {
+  height: 30px; padding: 0 12px; border: 1px solid #3a3a3a; border-radius: 7px;
+  background: #262626; color: inherit; font: 500 13px/1 system-ui, -apple-system, "Segoe UI", sans-serif; cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+.ink-pop-btn:hover { background: #303030; }
+.ink-pop-btn.is-danger { background: #e11d48; border-color: #e11d48; color: #fff; }
+.ink-pop-btn.is-danger:hover { background: #f43f5e; border-color: #f43f5e; }
+.ink-pop-btn:focus-visible { outline: 2px solid #6ea0e8; outline-offset: 1px; }
+@keyframes ink-pop-in { from { opacity: 0; margin-bottom: -4px; } }
+@media (pointer: coarse) { .ink-pop-btn { height: 40px; padding: 0 16px; } .ink-pop-text { font-size: 14px; } }
+@media (prefers-reduced-motion: reduce) { .ink-pop { animation: none; } }
+/* While drawing, touches neither pan, zoom the page, rubber-band nor select
+   text: the pencil's strokes must not move the page (or, in the presenter
+   view, the page around the slide). Two fingers zoom the slide itself (the
+   stage's zoom), and taps still reach buttons and the stage. */
+html.is-inking, html.is-inking body {
+  overscroll-behavior: none; overflow: hidden; touch-action: none;
+  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
+}
+@media print { .ink-toolbar { display: none !important; } }