mdeck 2.3.0

package/src/cli/migrate.js

@@ -0,0 +1,123 @@
+import { existsSync, readFileSync, readdirSync, writeFileSync, renameSync, copyFileSync, mkdirSync, unlinkSync, constants } from 'node:fs'
+import { resolve, dirname, basename, relative } from 'node:path'
+import { isDeepStrictEqual } from 'node:util'
+import { parseSync } from 'vite'
+import { parseSlides, isPlainObject } from '../core/parseSlides.js'
+import { setDeckConfig } from '../core/editDeck.js'
+import { applySourceEdits } from '../core/source.js'
+import { inkFileFor, oldInkFileFor } from '../core/ink.js'
+import { parseManifestText, validateManifest, MANIFEST_FILENAME } from '../extensions/manifest.js'
+import { BACKUP_DIR } from '../build/editorPlugin.js'
+
+function migratedSource(source) {
+  const deck = parseSlides(source), config = deck.deckConfig, patch = {}
+  if (deck.diagnostics.some(d => d.severity === 'error')) throw new Error('Fix source parsing errors before migrating the deck')
+  const set = (key, value) => {
+    if (Object.hasOwn(config, key) && !isDeepStrictEqual(config[key], value)) throw new Error(`Migration conflict: ${key} already has a different value`)
+    patch[key] = value
+  }
+  for (const [old, key] of [['design', 'theme'], ['share', 'reader']]) {
+    if (Object.hasOwn(config, old)) { set(key, config[old]); patch[old] = undefined }
+  }
+  const show = { ...(config.show ?? {}) }
+  for (const [old, key] of [['institution', 'organization'], ['authorDate', 'author'], ['pageNumbers', 'numbers'], ['sections', 'sections']]) {
+    if (!Object.hasOwn(config, old)) continue
+    if (config.show != null && !isPlainObject(config.show)) throw new Error('Migration conflict: show is not a mapping')
+    if (Object.hasOwn(show, key) && !isDeepStrictEqual(show[key], config[old])) throw new Error(`Migration conflict: show.${key} already has a different value`)
+    show[key] = config[old]; patch[old] = undefined; patch.show = show
+  }
+  if (Object.hasOwn(config, 'live')) {
+    const live = config.live
+    if (!isPlainObject(live) || Object.keys(live).some(key => !['server', 'id', 'code'].includes(key))) throw new Error('Cannot migrate live: expected a mapping containing server, id and/or code')
+    if (Object.hasOwn(live, 'server')) set('server', live.server)
+    const session = { ...(config.session ?? {}) }
+    if (config.session != null && !isPlainObject(config.session)) throw new Error('Migration conflict: session is not a mapping')
+    for (const key of ['id', 'code']) {
+      if (!Object.hasOwn(live, key)) continue
+      if (Object.hasOwn(session, key) && !isDeepStrictEqual(session[key], live[key])) throw new Error(`Migration conflict: session.${key} already has a different value`)
+      session[key] = live[key]; patch.session = session
+    }
+    patch.live = undefined
+  }
+  return Object.keys(patch).length ? setDeckConfig(deck, patch) : source
+}
+
+function* walk(dir) {
+  if (!existsSync(dir)) return
+  for (const entry of readdirSync(dir, { withFileTypes: true }).sort((a, b) => a.name.localeCompare(b.name))) {
+    if (entry.name.startsWith('.') || entry.name === 'node_modules') continue
+    const file = resolve(dir, entry.name)
+    if (entry.isDirectory()) yield* walk(file)
+    else if (entry.isFile()) yield file
+  }
+}
+
+function migratedImports(file, source) {
+  if (!source.includes('mdeck/template-api')) return source
+  const parsed = parseSync(file, source)
+  if (parsed.errors.length) throw new Error(`Cannot parse ${file}; fix its code before migrating imports`)
+  const edits = []
+  const visit = node => {
+    if (!node || typeof node !== 'object') return
+    if (['ImportDeclaration', 'ExportNamedDeclaration', 'ExportAllDeclaration', 'ImportExpression'].includes(node.type) && node.source?.value === 'mdeck/template-api') edits.push({ start: node.source.start + 1, end: node.source.end - 1, text: 'mdeck/layout' })
+    for (const value of Object.values(node)) {
+      if (Array.isArray(value)) value.forEach(visit)
+      else if (value && typeof value === 'object') visit(value)
+    }
+  }
+  visit(parsed.program)
+  return applySourceEdits(source, edits)
+}
+
+// Plan every change and check conflicts before writing. Backups and rollback
+// keep both source edits and file renames reversible; a dry run writes nothing.
+export function migrateDeck(slidesPath, { dryRun = false } = {}) {
+  const abs = resolve(slidesPath), dir = dirname(abs), changes = []
+  const edit = (file, transform) => {
+    const before = readFileSync(file, 'utf8'), after = transform(before)
+    if (before !== after) changes.push({ file, before, after })
+  }
+  edit(abs, migratedSource)
+  for (const file of walk(resolve(dir, 'extensions'))) {
+    if (basename(file) === MANIFEST_FILENAME) edit(file, source => {
+      const raw = parseManifestText(source, file)
+      if (raw.kind !== 'template') return source
+      validateManifest({ ...raw, kind: 'layout' }, { file, dir: dirname(file), folderName: basename(dirname(file)) })
+      // Only the value changes. Comments, quoting and CRLF stay intact.
+      const after = source.replace(/^(\s*(?:kind|"kind"|'kind')\s*=\s*)(["'])template\2/gm, '$1$2layout$2')
+      const expected = Object.assign(Object.create(Object.getPrototypeOf(raw)), raw, { kind: 'layout' })
+      if (after === source || !isDeepStrictEqual(parseManifestText(after, file), expected)) throw new Error(`Cannot safely rewrite kind in ${file}; set kind = "layout" manually`)
+      return after
+    })
+    else if (/\.[cm]?[jt]sx?$/.test(file)) edit(file, source => migratedImports(file, source))
+  }
+  for (const file of walk(resolve(dir, 'components'))) if (/\.[cm]?[jt]sx?$/.test(file)) edit(file, source => migratedImports(file, source))
+  const old = oldInkFileFor(abs), target = inkFileFor(abs)
+  if (existsSync(old)) {
+    if (existsSync(target)) throw new Error(`Migration conflict: both ${basename(old)} and ${basename(target)} exist. Resolve the two drawings files first.`)
+    changes.push({ file: old, to: target })
+  }
+  if (dryRun || !changes.length) return changes
+  const backup = resolve(dir, BACKUP_DIR, `migration-${Date.now()}-${process.pid}`)
+  mkdirSync(backup, { recursive: true })
+  for (const change of changes) {
+    const saved = resolve(backup, relative(dir, change.file))
+    mkdirSync(dirname(saved), { recursive: true })
+    copyFileSync(change.file, saved)
+  }
+  const applied = []
+  try {
+    for (const change of changes) {
+      if (change.to) { copyFileSync(change.file, change.to, constants.COPYFILE_EXCL); try { unlinkSync(change.file) } catch (error) { unlinkSync(change.to); throw error } }
+      else writeFileSync(change.file, change.after, 'utf8')
+      applied.push(change)
+    }
+  } catch (error) {
+    for (const change of applied.reverse()) {
+      if (change.to) renameSync(change.to, change.file)
+      else writeFileSync(change.file, change.before, 'utf8')
+    }
+    throw error
+  }
+  return changes
+}

package/src/cli/skill.js

@@ -0,0 +1,40 @@
+// Installs the slide-writing skill for different AI coding assistants. The
+// SKILL.md follows the Agent Skills format; adapters wrap the same body for
+// tools that use their own file conventions.
+import { readFileSync, mkdirSync, writeFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+import { homedir } from 'node:os'
+import { frameworkRoot } from '../paths.js'
+
+export const SKILL_FILE = resolve(frameworkRoot, 'skills/write-slides/SKILL.md')
+
+export function readSkill(file = SKILL_FILE) {
+  const text = readFileSync(file, 'utf8')
+  const match = text.match(/^---\r?\n([\s\S]*?)\r?\n---\r?\n/)
+  const frontmatter = match?.[1] ?? ''
+  const body = match ? text.slice(match[0].length) : text
+  const description = frontmatter.match(/^description:\s*(.+)$/m)?.[1]?.trim() ?? 'Write a complete mdeck slide deck.'
+  return { text, frontmatter, body, description }
+}
+
+const toml = value => `"""${value.replace(/\\/g, '\\\\').replace(/"""/g, '\\"\\"\\"')}"""`
+
+// Each target: where the file goes (personal home or the current project) and
+// how the shared body is wrapped.
+export const TARGETS = {
+  claude: { title: 'Claude Code', scope: 'home', path: '.claude/skills/write-slides/SKILL.md', projectPath: '.claude/skills/write-slides/SKILL.md', render: skill => skill.text },
+  codex: { title: 'OpenAI Codex', scope: 'home', path: '.codex/skills/write-slides/SKILL.md', projectPath: '.codex/skills/write-slides/SKILL.md', render: skill => skill.text },
+  cursor: { title: 'Cursor', scope: 'project', projectPath: '.cursor/rules/write-slides.mdc', render: skill => `---\ndescription: ${skill.description}\nglobs:\nalwaysApply: false\n---\n\n${skill.body}` },
+  copilot: { title: 'GitHub Copilot', scope: 'project', projectPath: '.github/prompts/write-slides.prompt.md', render: skill => `---\nmode: agent\ndescription: ${skill.description}\n---\n\n${skill.body}` },
+  gemini: { title: 'Gemini CLI', scope: 'project', projectPath: '.gemini/commands/write-slides.toml', render: skill => `description = "${skill.description.replace(/"/g, '\\"')}"\nprompt = ${toml(skill.body + '\n\nRequest: {{args}}\n')}\n` },
+}
+
+export function installSkill(target, { project = false, cwd = process.cwd(), home = homedir(), skill = readSkill() } = {}) {
+  const spec = TARGETS[target]
+  if (!spec) throw new Error(`Unknown assistant "${target}". Choose from: ${Object.keys(TARGETS).join(', ')}`)
+  const useProject = project || spec.scope === 'project'
+  const file = useProject ? resolve(cwd, spec.projectPath) : resolve(home, spec.path)
+  mkdirSync(resolve(file, '..'), { recursive: true })
+  writeFileSync(file, spec.render(skill), 'utf8')
+  return { target, title: spec.title, file, scope: useProject ? 'project' : 'home' }
+}

package/src/cli/themes.js

@@ -0,0 +1,140 @@
+// `mdeck themes`: themes and palettes from the theme repository. Installs go
+// into a deck's extensions/ folder, or with --global into the user's
+// (~/.mdeck/extensions), where every deck finds them. `build` is for the
+// repository itself: it checks the packs and writes what is served.
+import { existsSync, readFileSync, statSync, writeFileSync } from 'node:fs'
+import { createRequire } from 'node:module'
+import { dirname, resolve } from 'node:path'
+import { builtInRegistry, loadRegistry, userExtensionsDir } from '../extensions/discover.js'
+import { ManifestError } from '../extensions/manifest.js'
+import { buildRepository, compareVersions, fetchIndex, findPack, installedPacks, installFromIndex, PackError, removePack } from '../extensions/packs.js'
+
+const VERSION = createRequire(import.meta.url)('../../package.json').version
+
+const USAGE = 'search [words] | install <pack> | remove <pack> | update [pack] | list, each with [slides.md or folder] and --global; build <packs> -o <out> [--check]'
+
+// The built-in themes and palettes a pack may name and must not reuse the ids of.
+const builtIns = () => {
+  const registry = builtInRegistry()
+  return { themes: registry.themes, palettes: registry.palettes }
+}
+
+// The extensions folder a command works on, and a slides path to load the
+// registry with: the user's with --global, else beside the deck or in the folder.
+function target(where, global) {
+  if (global) return { root: userExtensionsDir(), deck: resolve('slides.md'), label: 'for every deck' }
+  const given = resolve(where ?? '.')
+  const folder = existsSync(given) && statSync(given).isDirectory() ? given : dirname(given)
+  return { root: resolve(folder, 'extensions'), deck: existsSync(given) && !statSync(given).isDirectory() ? given : resolve(folder, 'slides.md'), label: `in ${resolve(folder, 'extensions')}` }
+}
+
+const install = (index, entry, { root, force }) => installFromIndex(index, entry, { root, known: builtIns(), mdeckVersion: VERSION, force })
+
+export async function runThemes({ positionals, flag, output, ui: { ok, err, tip, c } }) {
+  const [sub = 'search', ...rest] = positionals
+  const global = flag('--global'), force = flag('--force')
+  try {
+    if (sub === 'search') {
+      const index = await fetchIndex()
+      const words = rest.map(word => word.toLowerCase())
+      const local = installedPacks(target(null, false).root), mine = installedPacks(userExtensionsDir())
+      const found = index.packs.filter(pack => words.every(word => [pack.id, pack.title, pack.description, ...pack.themes, ...pack.palettes].join(' ').toLowerCase().includes(word)))
+      if (!found.length) return tip(`No pack matches${words.length ? ` "${words.join(' ')}"` : ''} in ${index.url}`)
+      for (const pack of found) {
+        const have = local[pack.id] ?? mine[pack.id]
+        const state = !have ? '' : compareVersions(pack.version, have.version) > 0 ? ` ${c.yellow}(${have.version} installed, update available)${c.reset}` : ` ${c.green}(installed)${c.reset}`
+        console.log(`\n  ${c.cyan}${pack.id}${c.reset} ${pack.version} — ${pack.title}${state}`)
+        if (pack.description) console.log(`    ${pack.description}`)
+        console.log(`    ${c.dim}${[pack.themes.length ? `themes: ${pack.themes.join(', ')}` : '', pack.palettes.length ? `palettes: ${pack.palettes.join(', ')}` : ''].filter(Boolean).join(' · ')} · by ${pack.author}, ${pack.license}${c.reset}`)
+      }
+      console.log()
+      return tip('Install one with: mdeck themes install <pack> [slides.md]   (--global for every deck)')
+    }
+
+    if (sub === 'install') {
+      const [id, where] = rest
+      if (!id) { err('Name a pack.'); return tip('Usage: mdeck themes install <pack> [slides.md or folder] [--global]; mdeck themes search lists them.') }
+      const { root, deck, label } = target(where, global)
+      const index = await fetchIndex()
+      const result = await install(index, findPack(index, id), { root, force })
+      loadRegistry(deck)
+      ok(`${result.replaced ? `Updated ${id} from ${result.replaced}` : `Installed ${id}`} ${label}`)
+      if (result.themes.length) tip(`Themes: ${result.themes.join(', ')}. Use one with "theme: ${result.themes[0]}" in the deck settings.`)
+      if (result.palettes.length) tip(`Palettes: ${result.palettes.join(', ')}. Use one with "palette: ${result.palettes[0]}".`)
+      return tip('Look at it on a sample deck: mdeck design')
+    }
+
+    if (sub === 'remove') {
+      const [id, where] = rest
+      if (!id) { err('Name a pack.'); return tip('Usage: mdeck themes remove <pack> [slides.md or folder] [--global]') }
+      const { root, label } = target(where, global)
+      const pack = removePack(id, { root, force })
+      return ok(`Removed ${id} ${label} (${pack.folders.join(', ')})`)
+    }
+
+    if (sub === 'update') {
+      const [first, second] = rest
+      const named = first && !/\.md$/i.test(first) && !(existsSync(first) && statSync(first).isDirectory()) ? first : null
+      const { root, deck, label } = target(named ? second : first, global)
+      const installed = installedPacks(root)
+      const ids = named ? [named] : Object.keys(installed)
+      if (!ids.length) return tip(`No packs installed ${label}`)
+      const index = await fetchIndex()
+      for (const id of ids) {
+        if (!installed[id]) throw new PackError(`The pack ${id} is not installed ${label}`)
+        const entry = findPack(index, id)
+        if (compareVersions(entry.version, installed[id].version) <= 0) { tip(`${id} ${installed[id].version} is up to date`); continue }
+        await install(index, entry, { root, force })
+        ok(`Updated ${id} ${installed[id].version} → ${entry.version}`)
+      }
+      loadRegistry(deck)
+      return
+    }
+
+    if (sub === 'list') {
+      const [where] = rest
+      for (const [label, root] of [['This folder', target(where, false).root], ['Every deck (--global)', userExtensionsDir()]]) {
+        const packs = installedPacks(root)
+        console.log(`\n  ${c.bold}${label}${c.reset} ${c.dim}${root}${c.reset}`)
+        if (!Object.keys(packs).length) console.log(`    ${c.dim}none${c.reset}`)
+        for (const [id, pack] of Object.entries(packs)) console.log(`    ${c.cyan}${id}${c.reset} ${pack.version} — ${pack.folders.join(', ')}`)
+      }
+      console.log()
+      return
+    }
+
+    if (sub === 'build') {
+      const [packsDir] = rest
+      const out = output()
+      if (!packsDir || !out) { err('Name the packs folder and the output folder.'); return tip('Usage: mdeck themes build <packs folder> -o <output folder> [--check]') }
+      const index = buildRepository(resolve(packsDir), resolve(out), { known: builtIns() })
+      // Every theme and palette of every pack, from the pack folders.
+      const extensions = Object.fromEntries(index.packs.flatMap(pack => [...pack.themes, ...pack.palettes].map(id => [id, resolve(packsDir, pack.id, id)])))
+      const paletteTheme = id => {
+        const text = readFileSync(resolve(extensions[id], 'extension.toml'), 'utf8')
+        return /^theme\s*=\s*"([^"]+)"/m.exec(text)?.[1] ?? 'neue'
+      }
+      const { checkLooks, renderPreviews } = await import('../build/themeCheck.js')
+      const looks = index.packs.flatMap(pack => [...pack.themes.map(theme => ({ id: theme, theme })), ...pack.palettes.map(palette => ({ id: palette, theme: paletteTheme(palette), palette }))])
+      if (flag('--check')) {
+        const failures = await checkLooks(looks, { extensions })
+        if (failures.length) { err(`The theme check found ${failures.length} problem(s):`); for (const line of failures) console.error(`    ${line}`); process.exitCode = 1; return }
+        ok(`Checked ${looks.map(look => look.id).join(', ')}, light and dark, on every kind of slide`)
+      }
+      // Themes on the title slide, palettes on the chapter slide (the third).
+      await renderPreviews(looks.map(look => ({ file: resolve(out, 'previews', `${look.id}.webp`), theme: look.theme, palette: look.palette ?? '', slide: look.palette ? 3 : 1 })), { extensions })
+      for (const pack of index.packs) pack.previews = Object.fromEntries([...pack.themes, ...pack.palettes].map(id => [id, `previews/${id}.webp`]))
+      writeFileSync(resolve(out, 'index.json'), JSON.stringify(index, null, 2) + '\n')
+      return ok(`Built ${index.packs.length} pack(s) into ${resolve(out)}`)
+    }
+
+    err(`Unknown: mdeck themes ${sub}`)
+    tip(`Use: mdeck themes ${USAGE}`)
+    process.exitCode = 1
+  } catch (error) {
+    if (!(error instanceof PackError || error instanceof ManifestError)) throw error
+    err(error.message)
+    process.exitCode = 1
+  }
+}
+

package/src/components/CodeBlock.jsx

@@ -0,0 +1,168 @@
+import { h } from 'preact'
+import { useState, useMemo, useRef, useEffect } from 'preact/hooks'
+import Prism from 'prismjs'
+import 'prismjs/components/prism-javascript'
+import 'prismjs/components/prism-typescript'
+import 'prismjs/components/prism-jsx'
+import 'prismjs/components/prism-python'
+import 'prismjs/components/prism-bash'
+import 'prismjs/components/prism-css'
+import 'prismjs/components/prism-markup'
+import 'prismjs/components/prism-json'
+import 'prismjs/components/prism-yaml'
+import 'prismjs/components/prism-sql'
+import { Icon } from './Icon.jsx'
+import './code-block.css'
+
+// ─── Syntax highlighting ───────────────────────────────────────────────────
+
+function hl(code, lang) {
+  const g = Prism.languages[lang]
+  if (!g) return code.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+  return Prism.highlight(code, g, lang)
+}
+
+// ─── Execution engines ─────────────────────────────────────────────────────
+
+async function execJS(code) {
+  const lines = []
+  const con = {
+    log:   (...a) => lines.push(a.map(v => typeof v === 'object' ? JSON.stringify(v) : String(v)).join(' ')),
+    error: (...a) => lines.push(a.map(String).join(' ')),
+    warn:  (...a) => lines.push(a.map(String).join(' ')),
+  }
+  try {
+    const fn = new Function('console', `return (async()=>{\n${code}\n})()`)
+    const result = await fn(con)
+    if (result !== undefined && !lines.length) lines.push(String(result))
+    return { output: lines.join('\n') }
+  } catch (e) {
+    return { error: e.message }
+  }
+}
+
+let _pyodide = null
+let _pyodideLoading = null
+async function execPython(code) {
+  try {
+    if (!_pyodide) {
+      if (!_pyodideLoading) {
+        _pyodideLoading = new Promise((res, rej) => {
+          const s = Object.assign(document.createElement('script'), {
+            src: 'https://cdn.jsdelivr.net/pyodide/v0.26.4/full/pyodide.js',
+            onload: res,
+            onerror: () => rej(new Error('Failed to load Pyodide — serve the file over HTTP to run Python.')),
+          })
+          document.head.appendChild(s)
+        }).then(() => window.loadPyodide())
+      }
+      _pyodide = await _pyodideLoading
+    }
+    let out = ''
+    _pyodide.setStdout({ batched: s => { out += s + '\n' } })
+    _pyodide.setStderr({ batched: s => { out += s + '\n' } })
+    // Packages the code imports (numpy, pandas …) come from Pyodide's CDN.
+    await _pyodide.loadPackagesFromImports(code)
+    const r = await _pyodide.runPythonAsync(code)
+    if (r != null && !out.trim()) out = String(r)
+    return { output: out.trim() }
+  } catch (e) {
+    _pyodideLoading = null
+    return { error: e.message }
+  }
+}
+
+// ─── Component ─────────────────────────────────────────────────────────────
+
+export default function CodeBlock({ lang = 'text', children = '', live, copy, editable }) {
+  const isLive     = live     != null
+  const isCopy     = copy     != null
+  const isEditable = editable != null
+  const isPython   = lang === 'python' || lang === 'py'
+
+  const [code, setCode]       = useState(() => String(children).trim())
+  const [output, setOutput]   = useState(null)
+  const [isError, setIsError] = useState(false)
+  const [running, setRunning] = useState(false)
+  const [copied, setCopied]   = useState(false)
+
+  const highlighted = useMemo(() => hl(code, lang), [code, lang])
+  const highlightRef = useRef(null)
+  const wrapperRef = useRef(null)
+
+  // Output takes room on the slide: the deck fits the slide again, so code
+  // and output share its height (src/runtime/fit.js).
+  useEffect(() => {
+    wrapperRef.current?.dispatchEvent(new CustomEvent('mdeck:refit', { bubbles: true }))
+  }, [output])
+
+  function syncScroll(e) {
+    if (highlightRef.current) {
+      highlightRef.current.scrollTop  = e.currentTarget.scrollTop
+      highlightRef.current.scrollLeft = e.currentTarget.scrollLeft
+    }
+  }
+
+  async function handleRun() {
+    setRunning(true)
+    setOutput(null)
+    setIsError(false)
+    const result = await (isPython ? execPython : execJS)(code)
+    setRunning(false)
+    setIsError(!!result.error)
+    setOutput(result.error ?? result.output ?? '')
+  }
+
+  async function handleCopy() {
+    try { await navigator.clipboard.writeText(code) } catch {}
+    setCopied(true)
+    setTimeout(() => setCopied(false), 1500)
+  }
+
+  return (
+    <div class="code-block-wrapper" ref={wrapperRef}>
+      {isEditable ? (
+        <div class="code-editable-container">
+          <pre ref={highlightRef} class={`code-block code-editable-highlight language-${lang}`} aria-hidden="true">
+            <code dangerouslySetInnerHTML={{ __html: highlighted }} />
+          </pre>
+          <textarea
+            class="code-block code-editable-input"
+            value={code}
+            onInput={e => setCode(e.currentTarget.value)}
+            onScroll={syncScroll}
+            spellcheck={false}
+            autocomplete="off"
+            autocorrect="off"
+            autocapitalize="off"
+          />
+        </div>
+      ) : (
+        <pre class={`code-block language-${lang}`}>
+          <code dangerouslySetInnerHTML={{ __html: highlighted }} />
+        </pre>
+      )}
+
+      {(isCopy || isLive) && (
+        <div class="code-block-actions">
+          {isCopy && (
+            <button class="code-btn" onClick={handleCopy} title={copied ? 'Copied!' : 'Copy'}>
+              <Icon name={copied ? 'check' : 'copy'} size={18} />
+            </button>
+          )}
+          {isLive && (
+            <button class="code-btn code-btn--run" onClick={handleRun} disabled={running} title="Run">
+              {running ? <Icon name="loading" size={18} class="icon code-btn-spin" /> : <Icon name="play" size={18} />}
+            </button>
+          )}
+        </div>
+      )}
+
+      {output !== null && (
+        <pre class={`code-output${isError ? ' code-output--error' : ''}`}>
+          {output || '(no output)'}
+        </pre>
+      )}
+    </div>
+  )
+}

package/src/components/ConnectedViews.jsx

@@ -0,0 +1,25 @@
+import { h } from 'preact'
+import { Icon } from './Icon.jsx'
+import { devicesText, phonesText } from '../live/presence.js'
+
+// Who is connected to the deck, as small icons: one per kind of view with a
+// count when there are several, and the people whose phones can answer polls. The
+// tooltip says which devices. `presence` is { views: [{ view, device }],
+// phones } from the room server (src/live/rooms.js).
+
+const VIEW_ICON = { presenter: 'presenter', audience: 'projector', deck: 'slides' }
+const VIEW_NAME = { presenter: 'Presenter view', audience: 'Audience window', deck: 'Deck window' }
+
+export function ConnectedViews({ presence, phones = false, size = 14, style }) {
+  if (!presence) return null
+  const kinds = Object.keys(VIEW_ICON).filter(view => presence.views.some(entry => entry.view === view))
+  const items = kinds.map(view => ({ icon: VIEW_ICON[view], count: presence.views.filter(entry => entry.view === view).length, text: `${VIEW_NAME[view]} on ${devicesText(presence.views.filter(entry => entry.view === view))}` }))
+  if (phones || presence.phones) items.push({ icon: 'people', count: presence.phones, text: phonesText(presence.phones), always: true })
+  if (!items.length) return null
+  const summary = `Connected: ${items.map(item => item.text).join(', ')}`
+  return <span class="connected-views" role="status" aria-label={summary} title={summary} style={{ display: 'inline-flex', alignItems: 'center', gap: '10px', fontSize: '12px', fontVariantNumeric: 'tabular-nums', ...style }}>
+    {items.map(item => <span key={item.icon} title={item.text} style={{ display: 'inline-flex', alignItems: 'center', gap: '3px', opacity: item.always && !item.count ? 0.5 : 1 }}>
+      <Icon name={item.icon} size={size} />{(item.count > 1 || item.always) && <span>{item.count}</span>}
+    </span>)}
+  </span>
+}

package/src/components/Icon.jsx

@@ -0,0 +1,8 @@
+import { h } from 'preact'
+import { ICONS, ICON_STROKE } from '../core/icons.js'
+
+// One icon from the shared set (src/core/icons.js). It takes the text colour,
+// so a button only has to set `color`.
+export function Icon({ name, size = 16, class: className = 'icon', style }) {
+  return <svg class={className} 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" style={style} dangerouslySetInnerHTML={{ __html: ICONS[name] }} />
+}

package/src/components/Poll.jsx

@@ -0,0 +1,67 @@
+import { h } from 'preact'
+import { useEffect, useRef, useState } from 'preact/hooks'
+import { useRoom, latestByDevice } from '../live/client.js'
+import { t } from '../core/labels.js'
+import { JoinCode, ActivityFooter, wantsQr } from './activity.jsx'
+import './poll.css'
+
+// <poll room="lunch" question="Where do we eat?" options="Mensa|Thai|Pizza" />
+// On the slide: live bars, the number of answers and the deck's join code
+// (`qr="false"` leaves it out, when the code was on an earlier slide).
+// On the phones, the server's answer page shows one button per option,
+// as described by Poll.phone. Each device has one vote and can change it; the
+// latest one counts.
+//
+// `answer="Thai"` (several: "Thai|Pizza") marks the right answer: a button
+// with a tick outlines its label, bar and count in green. Showing it is an
+// event on the stage (`pollreveal`, { room, shown }), which the ink bus
+// passes to the audience window and other devices.
+
+const choicesOf = options => String(options ?? '').split('|').map(option => option.trim()).filter(Boolean)
+
+export default function Poll({ room = 'poll', question = '', options = '', qr, answer = '' }) {
+  const choices = choicesOf(options)
+  const correct = choicesOf(answer).filter(choice => choices.includes(choice))
+  const [shown, setShown] = useState(false)
+  const ref = useRef()
+  const stage = () => ref.current?.closest('deck-stage')
+  useEffect(() => {
+    const target = stage()
+    if (!target || !correct.length) return
+    const onReveal = event => { if (event.detail?.room === room) setShown(!!event.detail.shown) }
+    target.addEventListener('pollreveal', onReveal)
+    return () => target.removeEventListener('pollreveal', onReveal)
+  }, [room, correct.length])
+  const toggle = () => {
+    const next = !shown
+    setShown(next)
+    stage()?.dispatchEvent(new CustomEvent('pollreveal', { detail: { room, shown: next, local: true } }))
+  }
+  const live = useRoom(room)
+  const votes = latestByDevice(live.messages).map(message => message.data?.value).filter(vote => choices.includes(vote))
+  const counts = choices.map(choice => votes.filter(vote => vote === choice).length)
+  const max = Math.max(1, ...counts)
+  const code = wantsQr(qr)
+  const still = live.offline && !votes.length
+  return <div class={`poll${shown ? ' is-solved' : ''}${still ? ' is-static' : ''}`} ref={ref}>
+    <div class="poll-main">
+      {question && <p class="poll-question">{question}</p>}
+      <div class="poll-bars" role="list">
+        {choices.map((choice, i) => <div class={`poll-row${correct.includes(choice) ? ' is-correct' : ''}`} role="listitem" key={choice}>
+          <span class="poll-label">{choice}</span>
+          <span class="poll-track"><span class="poll-fill" style={{ width: `${(counts[i] / max) * 100}%` }} /></span>
+          <span class="poll-count">{counts[i]}</span>
+        </div>)}
+      </div>
+      <ActivityFooter count={votes.length} {...live}>
+        {correct.length > 0 && <button type="button" class={`poll-solve${shown ? ' is-on' : ''}`} title={t(shown ? 'poll.hideAnswer' : 'poll.showAnswer')} aria-label={t(shown ? 'poll.hideAnswer' : 'poll.showAnswer')} aria-pressed={shown} onClick={toggle}>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12l5 5 9-10" /></svg>
+        </button>}
+      </ActivityFooter>
+    </div>
+    <JoinCode room={room} {...live} qr={code} />
+  </div>
+}
+
+// What the phones show while this poll is on screen.
+Poll.phone = ({ question, options }, { slideTitle = '' } = {}) => ({ type: 'choice', question: question || slideTitle, options: choicesOf(options) })

package/src/components/QrCode.jsx

@@ -0,0 +1,29 @@
+import { h } from 'preact'
+import { useMemo } from 'preact/hooks'
+import QRCode from 'qrcode'
+
+// <qrcode url="https://example.com" size="240" />
+// Drawn in the slide's colours: the dark squares in the text colour, on the
+// slide's own background, so it fits every theme and palette. Phone cameras
+// read light-on-dark codes too. `--qr-ink` and `--qr-bg` override the colours,
+// for example `--qr-bg: #fff` when a scanner needs a white background.
+// An SVG, drawn at once, so it also prints and scales without blurring.
+export default function QrCode({ url, size = '200' }) {
+  const code = useMemo(() => {
+    if (!url) return null
+    try {
+      const { modules } = QRCode.create(String(url), { errorCorrectionLevel: 'M' })
+      let d = ''
+      for (let y = 0; y < modules.size; y++) {
+        for (let x = 0; x < modules.size; x++) if (modules.get(x, y)) d += `M${x} ${y}h1v1h-1z`
+      }
+      return { d, size: modules.size }
+    } catch { return null }
+  }, [url])
+  if (!code) return null
+  const quiet = 2, box = code.size + quiet * 2
+  return <svg class="qrcode" viewBox={`${-quiet} ${-quiet} ${box} ${box}`} width={Number(size)} height={Number(size)} role="img" aria-label={url} shape-rendering="crispEdges"
+    style={{ display: 'block', background: 'var(--qr-bg, transparent)', color: 'var(--qr-ink, var(--ink, currentColor))', borderRadius: '6px' }}>
+    <path d={code.d} fill="currentColor" />
+  </svg>
+}

package/src/components/QrCodeTag.jsx

@@ -0,0 +1,27 @@
+import { h } from 'preact'
+import QrCode from './QrCode.jsx'
+import { useJoinLink } from '../live/client.js'
+import { JoinCode } from './activity.jsx'
+import { t } from '../core/labels.js'
+import './poll.css'
+
+// <qrcode url="https://example.com" size="240" /> on a slide.
+// <qrcode join />: the deck's join link for audience questions, with the
+// short link below it, so a slide early in the talk can invite everyone once
+// and the questions after it can leave out their own code (`qr="false"`).
+
+function JoinQr({ size }) {
+  const link = useJoinLink()
+  return <div class="poll-join-slide">
+    {link.offline && <p class="poll-static">{t('join.static')}</p>}
+    <JoinCode {...link} size={Number(size) || 420} label={t('join.scan')} />
+  </div>
+}
+
+// A bare `join` attribute arrives as "", so only "false" and the like turn it off.
+const isOn = value => value != null && !/^(false|no|off|0)$/i.test(String(value))
+
+export default function QrCodeTag({ url, join, size }) {
+  if (isOn(join)) return <JoinQr size={size} />
+  return <QrCode url={url} size={size ?? '200'} />
+}