mdeck 2.3.0

package/src/core/editDeck.js

@@ -0,0 +1,230 @@
+// Deck-level editing operations on the parsed document model. Every function
+// takes the deck from parseSlides, never mutates it, and returns the new
+// source (or { source, index } for structural changes). Untouched bytes stay
+// identical; callers reparse the result.
+import { parseSlides, SLIDE_KEYS, DECK_KEYS } from './parseSlides.js'
+import { applySourceEdits, replaceRegion, normalizeBlock, detectNewline, patchYamlMapping, firstYamlKey } from './source.js'
+
+const REGION_RE = /^[a-z][a-z0-9-]*$/
+
+export function findSlide(deck, slideId) {
+  const slide = deck.slides.find(slide => slide.id === slideId)
+  if (!slide) throw new Error(`No slide "${slideId}"`)
+  return slide
+}
+
+export function slideSourceText(deck, slideId) {
+  const { source } = findSlide(deck, slideId)
+  return deck.source.slice(source.start, source.end)
+}
+
+function lineEnd(source, offset) {
+  const index = source.indexOf('\n', offset)
+  return index < 0 ? source.length : index + 1
+}
+
+// `delimiterStart` is the start of the `---` line that introduces the slide,
+// or null when there is none or when it is the deck config's closing line.
+export function slideBounds(deck, slideId) {
+  const { source } = findSlide(deck, slideId)
+  let delimiterStart = null
+  if (source.start > 0) {
+    const lineStart = deck.source.lastIndexOf('\n', source.start - 2) + 1
+    const line = deck.source.slice(lineStart, source.start)
+    if (/^---[ \t]*\r?\n$/.test(line) && deck.configSource?.end !== lineStart) delimiterStart = lineStart
+  }
+  return { start: source.start, end: source.end, delimiterStart }
+}
+
+function edit(deck, edits) { return applySourceEdits(deck.source, edits) }
+const expectedText = (deck, range) => deck.source.slice(range.start, range.end)
+
+// Text to put before something appended at `offset` so it starts on its own
+// line with one blank line separating it from previous content.
+function separatorBefore(source, offset, nl) {
+  if (offset === 0) return ''
+  const before = source.slice(0, offset)
+  if (!before.endsWith('\n')) return nl + nl
+  return /\r?\n\r?\n$/.test(before) ? '' : nl
+}
+
+function appendBlock(deck, slide, block) {
+  const nl = detectNewline(deck.source)
+  const at = slide.source.end
+  // A legacy meta-only slide needs its `---` line before any body content.
+  const pre = slide.bodySource === null && slide.metaSource ? (deck.source.slice(0, at).endsWith('\n') ? '' : nl) + '---' + nl : separatorBefore(deck.source, at, nl)
+  const post = at < deck.source.length ? nl : ''
+  return edit(deck, [{ start: at, end: at, text: pre + block + post }])
+}
+
+export function setRegion(deck, slideId, name, markdown) {
+  if (!REGION_RE.test(name)) throw new Error(`Invalid region name "${name}"`)
+  const slide = findSlide(deck, slideId)
+  const region = slide.regions[name]
+  const nl = detectNewline(deck.source)
+  if (region?.explicit) return replaceRegion(deck, slideId, name, markdown)
+  const content = normalizeBlock(markdown, nl)
+  if (!region) return appendBlock(deck, slide, `:::slot ${name}${nl}${content}:::${nl}`)
+  // Implicit body: rewrite the first content-bearing range, collapse other
+  // content ranges to one blank line, leave whitespace-only ranges alone.
+  const ranges = region.ranges.filter(range => range.end > range.start)
+  if (!ranges.length) {
+    if (slide.bodySource === null) return appendBlock(deck, slide, content)
+    const at = slide.bodySource.start
+    return edit(deck, [{ start: at, end: at, text: content + (at < slide.source.end ? nl : '') }])
+  }
+  const hasText = range => deck.source.slice(range.start, range.end).trim()
+  const target = ranges.find(hasText) ?? ranges[0]
+  const edits = []
+  for (const range of ranges) {
+    const slice = deck.source.slice(range.start, range.end)
+    if (range === target) {
+      const lead = slice.match(/^(\r?\n)*/)[0]
+      const blank = /\r?\n\r?\n$/.test(slice) ? nl : ''
+      const atEnd = range.end === deck.source.length && !slice.endsWith('\n')
+      let text
+      if (!content) text = lead || (range.end < slide.source.end ? nl : '')
+      else text = lead + (atEnd ? content.slice(0, -nl.length) : content + blank)
+      edits.push({ ...range, text, expected: slice })
+    } else if (hasText(range)) edits.push({ ...range, text: nl, expected: slice })
+  }
+  return edit(deck, edits)
+}
+
+export function removeRegion(deck, slideId, name) {
+  const slide = findSlide(deck, slideId)
+  const block = slide.blocks.find(block => block.type === 'slot' && block.name === name)
+  if (!block) throw new Error(`No explicit region "${name}" on slide "${slideId}"`)
+  return removeBlock(deck, block)
+}
+
+function blockRemoval(deck, block) {
+  let { start } = block.source
+  const { end } = block.source
+  // Take one preceding blank line with the block.
+  const before = deck.source.slice(0, start)
+  const blank = before.match(/\r?\n(\r?\n)$/)
+  if (blank) start -= blank[1].length
+  return { start, end, text: '', expected: deck.source.slice(start, end) }
+}
+
+function removeBlock(deck, block) {
+  return edit(deck, [blockRemoval(deck, block)])
+}
+
+function metaForm(deck, slide) {
+  if (!slide.metaSource) return 'none'
+  return slide.metaSource.start === slide.source.start ? 'legacy' : 'explicit'
+}
+
+export function setSlideMeta(deck, slideId, patch) {
+  const slide = findSlide(deck, slideId)
+  const nl = detectNewline(deck.source)
+  const form = metaForm(deck, slide)
+  const block = yamlText => `:::meta${nl}${yamlText}:::${nl}`
+  if (form === 'none') {
+    const yamlText = patchYamlMapping('', patch, { newline: nl })
+    if (!yamlText) return deck.source
+    return edit(deck, [{ start: slide.source.start, end: slide.source.start, text: block(yamlText) }])
+  }
+  const range = slide.metaSource
+  const current = expectedText(deck, range)
+  if (form === 'explicit') {
+    const yamlText = patchYamlMapping(current, patch, { newline: nl })
+    if (yamlText) return edit(deck, [{ ...range, text: yamlText, expected: current }])
+    return edit(deck, [{ start: slide.source.start, end: lineEnd(deck.source, range.end), text: '' }])
+  }
+  // Legacy `---` metadata: keep its form while a slide key leads, otherwise
+  // convert it into an explicit :::meta block (consuming the inner `---`).
+  const yamlText = patchYamlMapping(current, patch, { newline: nl, leadKeys: SLIDE_KEYS })
+  const end = slide.bodySource ? slide.bodySource.start : range.end
+  if (!yamlText) return slide.bodySource ? edit(deck, [{ start: range.start, end, text: '' }]) : removeSlide(deck, slideId).source
+  if (SLIDE_KEYS.has(firstYamlKey(yamlText))) return edit(deck, [{ ...range, text: yamlText, expected: current }])
+  return edit(deck, [{ start: range.start, end, text: block(yamlText) }])
+}
+
+export function notesSource(deck, slideId) {
+  const slide = findSlide(deck, slideId)
+  return slide.blocks.some(block => block.type === 'notes') ? 'block' : null
+}
+
+export function setSlideNotes(deck, slideId, markdown) {
+  const slide = findSlide(deck, slideId)
+  const nl = detectNewline(deck.source)
+  const content = normalizeBlock(markdown, nl)
+  const block = slide.blocks.find(block => block.type === 'notes')
+  if (block) {
+    if (!content) return removeBlock(deck, block)
+    return edit(deck, [{ ...block.bodySource, text: content, expected: expectedText(deck, block.bodySource) }])
+  }
+  if (!content) return deck.source
+  return appendBlock(deck, slide, `:::notes${nl}${content}:::${nl}`)
+}
+
+export function setDeckConfig(deck, patch) {
+  const nl = detectNewline(deck.source)
+  const range = deck.configSource
+  if (!range) {
+    const yamlText = patchYamlMapping('', patch, { newline: nl, leadKeys: DECK_KEYS })
+    if (!yamlText) return deck.source
+    const at = deck.source.startsWith('') ? 1 : 0
+    return edit(deck, [{ start: at, end: at, text: `---${nl}${yamlText}---${nl}${nl}` }])
+  }
+  const current = expectedText(deck, range)
+  const yamlText = patchYamlMapping(current, patch, { newline: nl, leadKeys: DECK_KEYS })
+  if (yamlText) return edit(deck, [{ ...range, text: yamlText, expected: current }])
+  const open = deck.source.lastIndexOf('---', range.start)
+  let end = lineEnd(deck.source, range.end)
+  const blank = deck.source.slice(end).match(/^\r?\n/)
+  if (blank) end += blank[0].length
+  return edit(deck, [{ start: open, end, text: '' }])
+}
+
+export function insertSlide(deck, index, markdown) {
+  const nl = detectNewline(deck.source)
+  const text = normalizeBlock(markdown, nl)
+  const count = deck.slides.length
+  index = Math.max(0, Math.min(count, index))
+  if (index < count) {
+    const at = deck.slides[index].source.start
+    return { source: edit(deck, [{ start: at, end: at, text: `${text}${nl}---${nl}` }]), index }
+  }
+  const at = count ? deck.slides[count - 1].source.end : deck.source.length
+  const pre = at > 0 && !deck.source.slice(0, at).endsWith('\n') ? nl : ''
+  return { source: edit(deck, [{ start: at, end: at, text: `${pre}---${nl}${text}` }]), index }
+}
+
+export function removeSlide(deck, slideId) {
+  const bounds = slideBounds(deck, slideId)
+  const index = deck.slides.findIndex(slide => slide.id === slideId)
+  const next = deck.slides[index + 1]
+  const range = bounds.delimiterStart != null
+    ? { start: bounds.delimiterStart, end: bounds.end }
+    : { start: bounds.start, end: next ? next.source.start : deck.source.length }
+  const source = edit(deck, [{ ...range, text: '', expected: expectedText(deck, range) }])
+  return { source, index: Math.min(index, deck.slides.length - 2) }
+}
+
+export function moveSlide(deck, slideId, toIndex) {
+  const text = slideSourceText(deck, slideId)
+  const removed = removeSlide(deck, slideId)
+  return insertSlide(parseSlides(removed.source), toIndex, text)
+}
+
+export function replaceSlideSource(deck, slideId, text) {
+  const slide = findSlide(deck, slideId)
+  const nl = detectNewline(deck.source)
+  const current = slideSourceText(deck, slideId)
+  const trailing = current.match(/(\r?\n)*$/)[0]
+  const body = text.replace(/\r?\n/g, nl).replace(/[\r\n]*$/, '')
+  return edit(deck, [{ ...slide.source, text: body + (body ? trailing : ''), expected: current }])
+}
+
+// Removes every speaker notes block for shared builds.
+export function stripNotes(source) {
+  const deck = parseSlides(source)
+  const edits = deck.slides.flatMap(slide => slide.blocks
+    .filter(block => block.type === 'notes')
+    .map(block => blockRemoval(deck, block)))
+  return edit(deck, edits)
+}

package/src/core/icons.js

@@ -0,0 +1,69 @@
+// The one icon set for every part of mdeck: line icons from Lucide
+// (https://lucide.dev, ISC license, Copyright (c) Lucide Icons and Contributors),
+// all on the same 24px grid and drawn with the same stroke. Names say what the
+// button does; the comment names the Lucide icon. To add one, copy the inner
+// markup of the Lucide SVG.
+
+export const ICONS = {
+  presenter: '<path d="M2 3h20"/><path d="M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3"/><path d="m7 21 5-5 5 5"/>', // presentation
+  projector: '<path d="M5 7 3 5"/><path d="M9 6V3"/><path d="m13 7 2-2"/><circle cx="9" cy="13" r="3"/><path d="M11.83 12H20a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h2.17"/><path d="M16 16h2"/>', // projector
+  reader: '<path d="M12 5v16"/><path d="M20.001 19A2 2 0 0022 17V5a2 2 0 00-1.999-2L16 3.002A5 5 0 0012 5a5 5 0 00-4-2H4a2 2 0 00-2 2v12a2 2 0 001.999 2H8a5 5 0 014 2 5 5 0 014-2z"/>', // book-open
+  editor: '<path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"/>', // square-pen
+  guides: '<circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/>', // circle-help
+  folder: '<path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/>', // folder
+  'folder-open': '<path d="m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2"/>', // folder-open
+  'file-code': '<path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/><path d="M10 12.5 8 15l2 2.5"/><path d="m14 12.5 2 2.5-2 2.5"/>', // file-code
+  'file-text': '<path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/><path d="M10 9H8"/><path d="M16 13H8"/><path d="M16 17H8"/>', // file-text
+  check: '<path d="M20 6 9 17l-5-5"/>', // check
+  alert: '<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/>', // triangle-alert
+  copy: '<rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>', // copy
+  external: '<path d="M7 7h10v10"/><path d="M7 17 17 7"/>', // arrow-up-right
+  prev: '<path d="m15 18-6-6 6-6"/>', // chevron-left
+  next: '<path d="m9 18 6-6-6-6"/>', // chevron-right
+  expand: '<path d="m9 18 6-6-6-6"/>', // chevron-right
+  collapse: '<path d="m6 9 6 6 6-6"/>', // chevron-down
+  dropdown: '<path d="m6 9 6 6 6-6"/>', // chevron-down
+  up: '<path d="m5 12 7-7 7 7"/><path d="M12 19V5"/>', // arrow-up
+  down: '<path d="M12 5v14"/><path d="m19 12-7 7-7-7"/>', // arrow-down
+  add: '<path d="M5 12h14"/><path d="M12 5v14"/>', // plus
+  close: '<path d="M18 6 6 18"/><path d="m6 6 12 12"/>', // x
+  grid: '<rect width="7" height="7" x="3" y="3" rx="1"/><rect width="7" height="7" x="14" y="3" rx="1"/><rect width="7" height="7" x="14" y="14" rx="1"/><rect width="7" height="7" x="3" y="14" rx="1"/>', // layout-grid
+  menu: '<path d="M4 5h16"/><path d="M4 12h16"/><path d="M4 19h16"/>', // menu
+  slides: '<rect width="20" height="14" x="2" y="3" rx="2"/><line x1="8" x2="16" y1="21" y2="21"/><line x1="12" x2="12" y1="17" y2="21"/>', // monitor
+  read: '<path d="M15 12h-5"/><path d="M15 8h-5"/><path d="M19 17V5a2 2 0 0 0-2-2H4"/><path d="M8 21h12a2 2 0 0 0 2-2v-1a1 1 0 0 0-1-1H11a1 1 0 0 0-1 1v1a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v2a1 1 0 0 0 1 1h3"/>', // scroll-text
+  look: '<path d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z"/><circle cx="13.5" cy="6.5" r=".5" fill="currentColor"/><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"/><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"/><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"/>', // palette
+  download: '<path d="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/>', // download
+  present: '<path d="M15.033 9.44a.647.647 0 0 1 0 1.12l-4.065 2.352a.645.645 0 0 1-.968-.56V7.648a.645.645 0 0 1 .967-.56z"/><path d="M12 17v4"/><path d="M8 21h8"/><rect x="2" y="3" width="20" height="14" rx="2"/>', // monitor-play
+  link: '<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>', // link
+  reset: '<path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/>', // rotate-ccw
+  undo: '<path d="M9 14 4 9l5-5"/><path d="M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11"/>', // undo-2
+  redo: '<path d="m15 14 5-5-5-5"/><path d="M20 9H9.5A5.5 5.5 0 0 0 4 14.5A5.5 5.5 0 0 0 9.5 20H13"/>', // redo-2
+  trash: '<path d="M10 11v6"/><path d="M14 11v6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>', // trash-2
+  eye: '<path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/>', // eye
+  'eye-off': '<path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"/><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"/><path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"/><path d="m2 2 20 20"/>', // eye-off
+  finger: '<path d="M22 14a8 8 0 0 1-8 8"/><path d="M18 11v-1a2 2 0 0 0-2-2a2 2 0 0 0-2 2"/><path d="M14 10V9a2 2 0 0 0-2-2a2 2 0 0 0-2 2v1"/><path d="M10 9.5V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v10"/><path d="M18 11a2 2 0 1 1 4 0v3a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15"/>', // pointer
+  pen: '<path d="M13 21h8"/><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/>', // pen-line
+  highlighter: '<path d="m9 11-6 6v3h9l3-3"/><path d="m22 12-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4"/>', // highlighter
+  marker: '<path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"/><path d="M20 2v4"/><path d="M22 4h-4"/><circle cx="4" cy="20" r="2"/>', // sparkles
+  select: '<path d="M5 3a2 2 0 0 0-2 2"/><path d="M19 3a2 2 0 0 1 2 2"/><path d="M21 19a2 2 0 0 1-2 2"/><path d="M5 21a2 2 0 0 1-2-2"/><path d="M9 3h1"/><path d="M9 21h1"/><path d="M14 3h1"/><path d="M14 21h1"/><path d="M3 9v1"/><path d="M21 9v1"/><path d="M3 14v1"/><path d="M21 14v1"/>', // square-dashed
+  laser: '<line x1="2" x2="5" y1="12" y2="12"/><line x1="19" x2="22" y1="12" y2="12"/><line x1="12" x2="12" y1="2" y2="5"/><line x1="12" x2="12" y1="19" y2="22"/><circle cx="12" cy="12" r="7"/><circle cx="12" cy="12" r="3"/>', // locate-fixed
+  fold: '<path d="m7 7 10 10"/><path d="M17 7v10H7"/>', // arrow-down-right
+  eraser: '<path d="M21 21H8a2 2 0 0 1-1.42-.587l-3.994-3.999a2 2 0 0 1 0-2.828l10-10a2 2 0 0 1 2.829 0l5.999 6a2 2 0 0 1 0 2.828L12.834 21"/><path d="m5.082 11.09 8.828 8.828"/>', // eraser
+  people: '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><path d="M16 3.128a4 4 0 0 1 0 7.744"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><circle cx="9" cy="7" r="4"/>', // users
+  tablet: '<rect width="16" height="20" x="4" y="2" rx="2" ry="2"/><line x1="12" x2="12.01" y1="18" y2="18"/>', // tablet
+  speaker: '<rect width="18" height="18" x="3" y="3" rx="2"/><path d="M15 3v18"/>', // panel-right
+  fullscreen: '<path d="M8 3H5a2 2 0 0 0-2 2v3"/><path d="M21 8V5a2 2 0 0 0-2-2h-3"/><path d="M3 16v3a2 2 0 0 0 2 2h3"/><path d="M16 21h3a2 2 0 0 0 2-2v-3"/>', // maximize
+  sun: '<circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/>', // sun
+  moon: '<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>', // moon
+  'fullscreen-exit': '<path d="M8 3v3a2 2 0 0 1-2 2H3"/><path d="M21 8h-3a2 2 0 0 1-2-2V3"/><path d="M3 16h3a2 2 0 0 1 2 2v3"/><path d="M16 21v-3a2 2 0 0 1 2-2h3"/>', // minimize
+  play: '<path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"/>', // play
+  pause: '<rect x="14" y="3" width="5" height="18" rx="1"/><rect x="5" y="3" width="5" height="18" rx="1"/>', // pause
+  loading: '<path d="M21 12a9 9 0 1 1-6.219-8.56"/>', // loader-circle
+}
+
+export const ICON_STROKE = 1.75
+
+// The icon as an SVG string, for markup built outside Preact (<deck-stage>).
+export function iconSvg(name, size = 16) {
+  return `<svg class="icon" viewBox="0 0 24 24" width="${size}" height="${size}" fill="none" stroke="currentColor" stroke-width="${ICON_STROKE}" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${ICONS[name]}</svg>`
+}

package/src/core/ink.js

@@ -0,0 +1,221 @@
+// Slide annotations ("ink"): the file format and the operations on it, as
+// pure functions for the browser and for Node.
+//
+// A deck's ink (its drawings) lives in `<deck>.drawings.json` beside `<deck>.md`:
+//   { version: 1, width, height, slides: { <slideId>: [stroke, …] } }
+//   stroke = { id: '<device>:<n>', tool: 'pen' | 'highlighter', color, size,
+//              points: [[x, y, pressure], …] }
+// Points are in the deck's design pixels (width × height). Ink belongs to a
+// slide, not to one of its steps.
+import { getStroke } from 'perfect-freehand'
+
+export const INK_VERSION = 1
+export const INK_TOOLS = ['pen', 'highlighter']
+const COLOR_RE = /^#[0-9a-f]{3,8}$|^[a-z]+$/i
+
+/** The drawings file that belongs to a deck file. */
+export const inkFileFor = deckPath => String(deckPath).replace(/\.md$/i, '') + '.drawings.json'
+
+/** Where drawings were kept before 2.0; nothing reads it any more. */
+export const oldInkFileFor = deckPath => String(deckPath).replace(/\.md$/i, '') + '.ink.json'
+
+export function emptyInk({ width = 1920, height = 1080 } = {}) {
+  return { version: INK_VERSION, width, height, slides: {} }
+}
+
+const round = (n, digits = 0) => { const f = 10 ** digits; return Math.round(n * f) / f }
+
+function cleanStroke(stroke, scaleX = 1, scaleY = 1) {
+  if (!stroke || typeof stroke !== 'object' || !Array.isArray(stroke.points)) return null
+  const points = stroke.points
+    .filter(point => Array.isArray(point) && Number.isFinite(point[0]) && Number.isFinite(point[1]))
+    .map(([x, y, pressure = 0.5]) => [round(x * scaleX), round(y * scaleY), round(Math.min(1, Math.max(0, Number(pressure) || 0.5)), 2)])
+  if (!points.length) return null
+  return {
+    id: String(stroke.id ?? ''),
+    tool: INK_TOOLS.includes(stroke.tool) ? stroke.tool : 'pen',
+    color: typeof stroke.color === 'string' && COLOR_RE.test(stroke.color) ? stroke.color : '#e11d48',
+    size: Math.min(80, Math.max(1, Number(stroke.size) || 6)) * Math.sqrt(scaleX * scaleY),
+    points,
+  }
+}
+
+/**
+ * A usable ink object from anything read from disk or sent by a client:
+ * unknown fields dropped, strokes without points skipped, and points scaled
+ * when the deck's design size differs from the one the ink was drawn at.
+ */
+export function normalizeInk(raw, { width = 1920, height = 1080 } = {}) {
+  const ink = emptyInk({ width, height })
+  if (!raw || typeof raw !== 'object') return ink
+  const scaleX = Number(raw.width) > 0 ? width / raw.width : 1
+  const scaleY = Number(raw.height) > 0 ? height / raw.height : 1
+  for (const [slideId, strokes] of Object.entries(raw.slides ?? {})) {
+    if (!Array.isArray(strokes)) continue
+    const clean = strokes.map(stroke => cleanStroke(stroke, scaleX, scaleY)).filter(Boolean)
+    if (clean.length) ink.slides[slideId] = clean
+  }
+  return ink
+}
+
+/** Problems with a raw ink file, as { message } objects; empty when it is fine. */
+export function validateInk(raw) {
+  const problems = []
+  if (!raw || typeof raw !== 'object' || Array.isArray(raw)) return [{ message: 'The drawings file must hold a JSON object' }]
+  if (raw.version !== INK_VERSION) problems.push({ message: `Unknown drawings file version ${raw.version}; expected ${INK_VERSION}` })
+  if (raw.slides != null && (typeof raw.slides !== 'object' || Array.isArray(raw.slides))) problems.push({ message: 'slides must map slide ids to lists of strokes' })
+  for (const [slideId, strokes] of Object.entries(raw.slides ?? {})) {
+    if (!Array.isArray(strokes)) { problems.push({ message: `Ink for slide "${slideId}" is not a list` }); continue }
+    strokes.forEach((stroke, i) => { if (!cleanStroke(stroke)) problems.push({ message: `Stroke ${i + 1} on slide "${slideId}" has no points` }) })
+  }
+  return problems
+}
+
+/** Slide ids that have ink but are not in the deck any more. */
+export function orphanIds(ink, slides) {
+  const ids = new Set(slides.map(slide => slide.id))
+  return Object.keys(ink?.slides ?? {}).filter(id => !ids.has(id))
+}
+
+/**
+ * Applies one change and returns a new ink object; applying the same change
+ * twice has no further effect.
+ *   { type: 'add', slideId, stroke }       adds, or replaces the stroke with that id
+ *   { type: 'remove', slideId, ids }       removes those strokes
+ *   { type: 'clear', slideId, ids }        the same, for the strokes a device knew about
+ *   { type: 'rename', from, to }           moves a slide's ink to a new id
+ */
+export function applyOp(ink, op) {
+  const next = { ...ink, slides: { ...ink.slides } }
+  if (op?.type === 'add') {
+    const stroke = cleanStroke(op.stroke)
+    if (!stroke || !stroke.id || !op.slideId) return ink
+    const list = (next.slides[op.slideId] ?? []).filter(s => s.id !== stroke.id)
+    next.slides[op.slideId] = [...list, stroke]
+  } else if (op?.type === 'remove' || op?.type === 'clear') {
+    const gone = new Set(op.ids ?? [])
+    const list = (next.slides[op.slideId] ?? []).filter(stroke => !gone.has(stroke.id))
+    if (list.length) next.slides[op.slideId] = list
+    else delete next.slides[op.slideId]
+  } else if (op?.type === 'rename') {
+    if (!op.from || !op.to || op.from === op.to || !next.slides[op.from]) return ink
+    // A stroke already under the new id (the same change heard twice, say
+    // from a window that replays the room's history) is not doubled.
+    const known = new Set((next.slides[op.to] ?? []).map(stroke => stroke.id))
+    next.slides[op.to] = [...(next.slides[op.to] ?? []), ...next.slides[op.from].filter(stroke => !known.has(stroke.id))]
+    delete next.slides[op.from]
+  } else {
+    return ink
+  }
+  return next
+}
+
+// Ramer–Douglas–Peucker on x/y, keeping each kept point's pressure.
+function distanceToSegment([px, py], [ax, ay], [bx, by]) {
+  const dx = bx - ax, dy = by - ay
+  const length = dx * dx + dy * dy
+  const t = length ? Math.max(0, Math.min(1, ((px - ax) * dx + (py - ay) * dy) / length)) : 0
+  return Math.hypot(px - (ax + t * dx), py - (ay + t * dy))
+}
+/** Fewer points for a finished stroke, within `tolerance` design pixels. */
+export function simplify(points, tolerance = 0.5) {
+  if (points.length < 3) return points.slice()
+  let farthest = 0, index = 0
+  for (let i = 1; i < points.length - 1; i++) {
+    const d = distanceToSegment(points[i], points[0], points[points.length - 1])
+    if (d > farthest) { farthest = d; index = i }
+  }
+  if (farthest <= tolerance) return [points[0], points[points.length - 1]]
+  return [...simplify(points.slice(0, index + 1), tolerance).slice(0, -1), ...simplify(points.slice(index), tolerance)]
+}
+
+/** True when `point` lies within `radius` design pixels of the stroke. */
+export function hitTest(stroke, point, radius = 12) {
+  const reach = radius + (stroke.size ?? 6) / 2
+  const points = stroke.points
+  if (points.length === 1) return Math.hypot(point[0] - points[0][0], point[1] - points[0][1]) <= reach
+  for (let i = 1; i < points.length; i++) if (distanceToSegment(point, points[i - 1], points[i]) <= reach) return true
+  return false
+}
+
+const TOOL_OPTIONS = {
+  pen: { thinning: 0.6, smoothing: 0.5, streamline: 0.3 },
+  highlighter: { thinning: 0, smoothing: 0.6, streamline: 0.4, start: { cap: false }, end: { cap: false } },
+}
+
+/**
+ * The SVG path of a stroke's outline. Pen strokes follow the pen's pressure;
+ * strokes drawn with a finger or mouse (constant pressure) get simulated
+ * pressure from their speed.
+ */
+export function strokePath(stroke, { last = true } = {}) {
+  // A straight line (two points) keeps its pressure: simulated from speed,
+  // its one long segment would come out hairline thin.
+  const constant = stroke.points.length > 2 && stroke.points.every(point => point[2] === stroke.points[0][2])
+  // `last`: a finished stroke runs right to its final point instead of
+  // trailing behind it, as streamline does for a stroke still being drawn.
+  const outline = getStroke(stroke.points, { size: stroke.size, simulatePressure: constant, last, ...TOOL_OPTIONS[stroke.tool] ?? TOOL_OPTIONS.pen })
+  if (!outline.length) return ''
+  const d = outline.reduce((acc, [x0, y0], i, all) => {
+    const [x1, y1] = all[(i + 1) % all.length]
+    acc.push(round(x0, 1), round(y0, 1), round((x0 + x1) / 2, 1), round((y0 + y1) / 2, 1))
+    return acc
+  }, ['M', ...outline[0].map(n => round(n, 1)), 'Q'])
+  return d.join(' ') + ' Z'
+}
+
+/** The ink file's text: one stroke per line, so it reads well in a diff. */
+export function serializeInk(ink) {
+  const slides = Object.entries(ink.slides ?? {}).filter(([, strokes]) => strokes.length)
+  const body = slides.map(([id, strokes]) => `    ${JSON.stringify(id)}: [\n${strokes.map(stroke => '      ' + JSON.stringify(stroke)).join(',\n')}\n    ]`).join(',\n')
+  return `{\n  "version": ${INK_VERSION},\n  "width": ${ink.width},\n  "height": ${ink.height},\n  "slides": {${body ? '\n' + body + '\n  ' : ''}}\n}\n`
+}
+
+/** The CSS colour a stroke is drawn with: "accent" is the theme's accent. */
+// The pen's own colours follow the slide's appearance: on dark slides red,
+// blue and green are lighter (--pen-* in DARK_TOKENS) and black turns into
+// the palette's text colour, so a drawing stays readable when a talk
+// switches to dark. "accent" is the theme's accent colour.
+const PEN_PAINT = {
+  accent: 'var(--accent, #e11d48)',
+  '#e11d48': 'var(--pen-red, #e11d48)',
+  '#2563eb': 'var(--pen-blue, #2563eb)',
+  '#16a34a': 'var(--pen-green, #16a34a)',
+  '#111111': 'var(--ink, #111111)',
+}
+export const inkPaint = color => PEN_PAINT[color] ?? color
+
+/** Strokes in drawing order: highlighter below the pen, as on paper. */
+export const inkOrder = strokes => [...strokes.filter(s => s.tool === 'highlighter'), ...strokes.filter(s => s.tool !== 'highlighter')]
+
+/** The stroke moved by dx, dy design pixels; the same id, so it replaces the original. */
+export const translateStroke = (stroke, dx, dy) => ({ ...stroke, points: stroke.points.map(([x, y, p]) => [x + dx, y + dy, p]) })
+
+/** Whether a point lies inside a polygon (ray casting). */
+export function insidePolygon([x, y], polygon) {
+  let inside = false
+  for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+    const [ax, ay] = polygon[i], [bx, by] = polygon[j]
+    if ((ay > y) !== (by > y) && x < (bx - ax) * (y - ay) / (by - ay) + ax) inside = !inside
+  }
+  return inside
+}
+
+/** Strokes with at least half their points inside a lasso. */
+export const strokesInLasso = (strokes, lasso) => lasso.length < 3 ? []
+  : strokes.filter(stroke => stroke.points.filter(point => insidePolygon(point, lasso)).length * 2 >= stroke.points.length)
+
+/** [x0, y0, x1, y1] around strokes, widened by `pad` and half their size; null for none. */
+export function strokesBox(strokes, pad = 0) {
+  let box = null
+  for (const stroke of strokes) {
+    const reach = pad + (stroke.size ?? 6) / 2
+    for (const [x, y] of stroke.points) {
+      box = box ? [Math.min(box[0], x - reach), Math.min(box[1], y - reach), Math.max(box[2], x + reach), Math.max(box[3], y + reach)] : [x - reach, y - reach, x + reach, y + reach]
+    }
+  }
+  return box
+}
+
+/** Opacity the SVG layer draws a tool with. */
+export const toolOpacity = tool => tool === 'highlighter' ? 0.35 : 1