mdeck 2.3.0

package/src/home/home.css

@@ -0,0 +1,148 @@
+/* Launch page for `mdeck run`. It is a tool page like the presenter view, the
+   editor and the reader's bar, and shares their dark chrome: neutral greys,
+   small uppercase labels, grey buttons and the editor's blue for the main
+   action. The teal of the mdeck mark stays in the mark. */
+:root {
+  --home-bg: #111;
+  --home-bar: #161616;
+  --home-panel: #171717;
+  --home-raised: #1e1e1e;
+  --home-line: #262626;
+  --home-control: #3a3a3a;
+  --home-ink: #e6e6e6;
+  --home-strong: #fff;
+  --home-muted: #a0a0a0;
+  --home-faint: #6b6b6b;
+  --home-button: #222;
+  --home-primary: #27436a;
+  --home-primary-line: #3d6094;
+  --home-primary-ink: #e8f0ff;
+  --home-selected: #23384f;
+  --home-focus: rgba(138, 180, 248, 0.5);
+  --home-ok: #81c995;
+  --home-warn: #e3c36d;
+  --home-warn-soft: #2e2715;
+  --home-bad: #f28b82;
+  --home-bad-soft: #3a1d1b;
+  --home-radius: 6px;
+  color-scheme: dark;
+}
+
+* { box-sizing: border-box; }
+html, body { margin: 0; background: var(--home-bg); color: var(--home-ink); }
+body { font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
+code, pre, kbd { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.88em; }
+a { color: inherit; }
+h1, h2, h3 { margin: 0; line-height: 1.25; }
+button:focus-visible, a:focus-visible { outline: 2px solid var(--home-focus); outline-offset: 1px; }
+
+.home { padding: 0 0 28px; }
+.home > :not(.home-header) { max-width: 1180px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; }
+.home--empty { min-height: 100vh; display: grid; place-content: center; justify-items: center; text-align: center; color: var(--home-muted); }
+
+/* ── Top bar, like the editor's and the reader's ─────────────────────── */
+.home-header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding: 10px 20px; background: var(--home-bar); border-bottom: 1px solid var(--home-line); }
+.home-mark { flex: none; border-radius: 6px; }
+.home-heading { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; }
+.home-heading h1 { font-size: 15px; font-weight: 600; color: var(--home-strong); }
+.home-meta { margin: 0; color: var(--home-muted); font-size: 13px; }
+.home-file { margin: 0; color: var(--home-faint); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex-basis: 100%; }
+.home-health { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid #2c4a35; border-radius: 999px; color: var(--home-ok); text-decoration: none; font-size: 12px; }
+.home-health.is-warn { border-color: #5a4a1a; color: var(--home-warn); }
+.home-health.is-bad { border-color: #5c2b28; color: var(--home-bad); }
+
+.home > .home-error { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding: 10px 14px; border: 1px solid #5c2b28; border-radius: var(--home-radius); background: var(--home-bad-soft); color: var(--home-bad); }
+
+/* ── Sections ─────────────────────────────────────────────────────────── */
+.home-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
+.home-section { background: var(--home-panel); border: 1px solid var(--home-line); border-radius: 8px; padding: 14px; min-width: 0; }
+.home-section--wide { grid-column: 1 / -1; }
+.home-section h2 { font-size: 11px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.08em; color: var(--home-muted); margin-bottom: 10px; }
+.home-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
+.home-section-head h2 { margin: 0; }
+
+/* ── Deck preview ─────────────────────────────────────────────────────── */
+.home-preview { display: block; position: relative; overflow: hidden; border: 1px solid var(--home-line); border-radius: var(--home-radius); background: #000; }
+.home-preview iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
+.home-preview-open { position: absolute; inset: 0; }
+.home-preview-bar { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
+.home-preview-count { color: var(--home-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
+.home-spacer { flex: 1; }
+
+/* ── Tiles ────────────────────────────────────────────────────────────── */
+.home-tiles { display: grid; gap: 6px; }
+.home-tile { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border: 1px solid var(--home-line); border-radius: var(--home-radius); background: var(--home-raised); color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
+.home-tile:hover { border-color: var(--home-control); background: #232323; }
+.home-tile:disabled { cursor: progress; }
+.home-tile > .home-icon { flex: none; color: var(--home-faint); }
+.home-tile-icon { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--home-radius); background: var(--home-button); color: var(--home-muted); }
+.home-tile-body { flex: 1; min-width: 0; display: grid; }
+.home-tile-body strong { font-weight: 600; color: var(--home-strong); font-size: 13px; }
+.home-tile-body span { color: var(--home-muted); font-size: 12px; overflow-wrap: anywhere; }
+
+/* ── Share ────────────────────────────────────────────────────────────── */
+.home-outputs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
+.home-output { display: flex; gap: 12px; align-items: center; padding: 8px 10px; border: 1px solid var(--home-line); border-radius: var(--home-radius); background: var(--home-raised); }
+.home-output-body { flex: 1; min-width: 0; display: grid; }
+.home-output-body strong { font-size: 13px; color: var(--home-strong); }
+.home-output-body > span { color: var(--home-muted); font-size: 12px; }
+.home-output-body code { color: var(--home-faint); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.home-output-body details { margin-top: 6px; font-size: 12px; }
+.home-output-body pre { max-height: 220px; overflow: auto; padding: 8px; border-radius: 4px; background: var(--home-bg); white-space: pre-wrap; }
+.home-note { color: var(--home-warn) !important; }
+.home-relay--up { color: var(--home-ok) !important; }
+.home-relay--refused { color: var(--home-bad) !important; }
+.home-output-actions { flex: none; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
+.home-status { font-size: 12px; color: var(--home-faint); min-width: 90px; text-align: right; }
+.home-status--done { color: var(--home-ok); }
+.home-status--failed { color: var(--home-bad); }
+.home-status--running { color: var(--home-warn); }
+
+/* ── Buttons, as in the editor ────────────────────────────────────────── */
+.home-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--home-control); border-radius: 5px; background: var(--home-button); color: var(--home-ink); font: inherit; font-size: 13px; line-height: 1.4; cursor: pointer; text-decoration: none; }
+.home-btn:hover:not(:disabled) { border-color: #5a5a5a; color: #fff; }
+.home-btn:disabled { opacity: .45; cursor: default; }
+.home-btn--primary { background: var(--home-primary); border-color: var(--home-primary-line); color: var(--home-primary-ink); }
+.home-btn--small { padding: 2px 8px; font-size: 12px; }
+.home-link { border: 0; background: none; padding: 0; font: inherit; color: var(--home-muted); cursor: pointer; text-decoration: underline; }
+.home-link:hover { color: var(--home-strong); }
+
+/* ── Check ────────────────────────────────────────────────────────────── */
+.home-ok { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--home-ok); font-size: 13px; }
+.home-diagnostics { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
+.home-diagnostic { display: flex; gap: 10px; align-items: baseline; padding: 6px 10px; border-radius: 4px; background: var(--home-warn-soft); font-size: 13px; }
+.home-diagnostic--error { background: var(--home-bad-soft); }
+.home-badge { flex: none; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--home-warn); }
+.home-diagnostic--error .home-badge { color: var(--home-bad); }
+.home-line { margin-left: auto; flex: none; color: var(--home-faint); font-size: 12px; }
+
+/* ── Live polls ───────────────────────────────────────────────────────── */
+.home-live { display: grid; gap: 10px; margin: 0; }
+.home-live > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: baseline; }
+.home-live dt { color: var(--home-muted); font-size: 12px; }
+.home-live dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; font-size: 13px; }
+.home-live dd > p { flex-basis: 100%; margin: 0; color: var(--home-muted); font-size: 12px; }
+.home-live code { overflow-wrap: anywhere; }
+.home-live a { color: var(--home-ink); }
+.home-code { padding: 1px 6px; border: 1px solid var(--home-control); border-radius: 4px; background: var(--home-button); color: var(--home-strong); }
+.home-pill { display: inline-block; padding: 0 8px; border: 1px solid var(--home-control); border-radius: 999px; font-size: 11px; color: var(--home-muted); }
+.home-pill.is-ok { border-color: #2c4a35; color: var(--home-ok); }
+.home-pill.is-bad { border-color: #5c2b28; color: var(--home-bad); }
+
+@media (max-width: 760px) {
+  .home > :not(.home-header) { padding-left: 12px; padding-right: 12px; }
+  .home-header { margin-bottom: 14px; padding: 10px 12px; }
+  .home-grid { grid-template-columns: minmax(0, 1fr); }
+  .home-output { flex-wrap: wrap; }
+  .home-output-actions { width: 100%; justify-content: flex-start; }
+  .home-status { text-align: left; min-width: 0; }
+  .home-live > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
+}
+
+.home-pair { --qr-ink: #000; --qr-bg: #fff; display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
+.home-pair canvas, .home-pair img, .home-pair svg { background: #fff; padding: 8px; border-radius: 6px; flex-shrink: 0; }
+.home-pair p, .home-tablet > p { font-size: 13px; margin: 0 0 8px; }
+
+/* A view that is open now, next to its title; the section head lists who is connected. */
+.home-open { margin-left: 8px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 500; color: var(--home-ok); background: rgba(129, 201, 149, 0.12); white-space: nowrap; }
+.home-section-head .connected-views { color: var(--home-muted); }

package/src/layouts/layoutApi.jsx

@@ -0,0 +1,205 @@
+import { h } from 'preact'
+import { useEffect, useRef } from 'preact/hooks'
+import { render } from 'preact'
+import { marked, Parser } from 'marked'
+import { registry } from '../runtime/registry'
+import { InkLayer } from '../runtime/ink/InkLayer.jsx'
+import themedSvgs from 'virtual:deck-svgs'
+
+// ─── Content extraction ────────────────────────────────────────────────────
+
+const FN_DEF_RE = /^\[\^([^\]\n]+)\]:\s+([^\n]+)/gm
+const FN_REF_RE = /\[\^([^\]\n]+)\]/g
+
+function preprocessFootnotes(markdown) {
+  const defs = {}
+  const stripped = markdown.replace(FN_DEF_RE, (_, label, text) => {
+    defs[label] = text.trim()
+    return ''
+  })
+
+  let counter = 0
+  const labelToNum = {}
+  const processed = stripped.replace(FN_REF_RE, (_, label) => {
+    if (labelToNum[label] === undefined) labelToNum[label] = ++counter
+    return `<sup>${labelToNum[label]}</sup>`
+  })
+
+  if (counter === 0) return { processed: markdown, footnotesHtml: '' }
+
+  const items = Object.keys(labelToNum)
+    .map(label => `<li>${marked.parseInline(defs[label] ?? label)}</li>`)
+    .join('')
+
+  return { processed, footnotesHtml: `<ol>${items}</ol>` }
+}
+
+// The deck's words for the audience (`slide.chapter` …), for layouts that show any.
+export { t } from '../core/labels.js'
+
+export function extractContent(markdown, { headingLevels = [], paragraph = false } = {}) {
+  const processed = markdown
+  const footnotesHtml = ''
+  const tokens = marked.lexer(processed)
+  const headings = {}
+  const paragraphs = []
+  const remaining = []
+
+  for (const token of tokens) {
+    if (token.type === 'heading' && headingLevels.includes(token.depth) && headings[token.depth] == null) {
+      headings[token.depth] = Parser.parseInline(token.tokens)
+    } else if (token.type === 'paragraph' && paragraph && paragraphs.length === 0 && !headings[2]) {
+      paragraphs.push(Parser.parseInline(token.tokens))
+    } else remaining.push(token)
+  }
+
+  const fullHtml = marked.parse(processed)
+  const bodyHtml = marked.parser(Object.assign(remaining, { links: tokens.links }))
+  return { headings, paragraphs, bodyHtml, fullHtml, footnotesHtml }
+}
+
+// ─── Pictures ─────────────────────────────────────────────────────────────
+
+// An SVG picture that uses the theme's colour variables is drawn inline, so it
+// follows the theme, palette and light or dark. The build lists them by the
+// path the deck uses.
+export const themedSvg = src => themedSvgs[src] ?? themedSvgs[String(src ?? '').split(/[?#]/)[0]]
+
+const attribute = (tag, name) => tag.match(new RegExp(`\\s${name}\\s*=\\s*(?:"([^"]*)"|'([^']*)')`, 'i'))?.slice(1).find(v => v != null)
+
+// Pictures in slide text keep the drawing's own size, like an <img>.
+export function inlineThemedPictures(html) {
+  if (!html || !html.includes('<img')) return html
+  return html.replace(/<img\b[^>]*>/gi, tag => {
+    const markup = themedSvg(attribute(tag, 'src'))
+    if (!markup) return tag
+    const alt = attribute(tag, 'alt') ?? ''
+    return `<span class="themed-picture themed-picture--inline" role="img" aria-label="${alt}">${markup}</span>`
+  })
+}
+
+// A picture from the slide's settings; `fit: cover` fills its box like a
+// photo, otherwise the drawing fits inside.
+export function Picture({ src, alt, fit, position, class: className, ...attributes }) {
+  const markup = themedSvg(src)
+  if (!markup) return <img class={className} src={src} alt={alt} style={{ objectFit: fit, objectPosition: position }} {...attributes} />
+  const aspect = fit === 'cover' ? 'xMidYMid slice' : 'xMidYMid meet'
+  // The box sets the size; the drawing scales inside it.
+  const html = markup.replace(/<svg\b[^>]*>/, tag => tag.replace(/\s(width|height|preserveAspectRatio)="[^"]*"/g, '').replace('<svg', `<svg preserveAspectRatio="${aspect}"`))
+  return <div class={['themed-picture', className].filter(Boolean).join(' ')} role="img" aria-label={alt} dangerouslySetInnerHTML={{ __html: html }} {...attributes} />
+}
+
+// ─── Hydration for inline components ──────────────────────────────────────
+
+export function HtmlContent({ html, class: className, ...attributes }) {
+  const ref = useRef()
+
+  useEffect(() => {
+    if (!ref.current) return
+    const mounted = []
+    for (const [name, Component] of Object.entries(registry)) {
+      for (const el of [...ref.current.querySelectorAll(name)]) {
+        const props = Object.fromEntries([...el.attributes].map(a => [a.name, a.value]))
+        const children = el.textContent
+        const wrapper = document.createElement('div')
+        el.replaceWith(wrapper)
+        render(h(Component, { ...props, children }), wrapper)
+        mounted.push(wrapper)
+      }
+    }
+    return () => mounted.forEach(wrapper => render(null, wrapper))
+  }, [html])
+
+  return <div class={className} {...attributes} ref={ref} dangerouslySetInnerHTML={{ __html: inlineThemedPictures(html) }} />
+}
+
+// ─── Header / footer / footnotes rails ────────────────────────────────────
+
+function SlideHeader({ deckConfig, right, logo, isTitle = false }) {
+  const org = deckConfig.meta?.organization ?? ''
+
+  // show.organization: 'title' (default) | 'all' | 'none'
+  const instSetting = deckConfig.show?.organization ?? 'title'
+  const showOrg = instSetting === 'all' || (instSetting === 'title' && isTitle)
+
+  // show.sections: 'all' (default) | 'none'
+  const showSection = (deckConfig.show?.sections ?? 'all') !== 'none'
+
+  return (
+    <div class="slide-header">
+      <span class="brand">{showOrg ? org : ''}</span>
+      {logo && <img class="slide-logo" src={logo} alt="" />}
+      {showSection && right != null && <span>{right}</span>}
+    </div>
+  )
+}
+
+function SlideFooter({ deckConfig, left, right, isTitle = false }) {
+  const { author, date } = deckConfig.meta ?? {}
+  const authorStr = [author, date].filter(Boolean).join(' · ')
+
+  // show.author (the author and date line): 'title' (default) | 'all' | 'none'
+  const adSetting = deckConfig.show?.author ?? 'title'
+  const showAuthor = adSetting === 'all' || (adSetting === 'title' && isTitle)
+
+  // show.numbers: 'slides' (default = all-except-title) | 'all' | 'none'
+  const pnSetting = deckConfig.show?.numbers ?? 'slides'
+  const showRight = pnSetting === 'all' || (pnSetting === 'slides' && !isTitle)
+
+  const leftContent = left ?? (showAuthor ? authorStr : '')
+  const footerClass = leftContent ? 'slide-footer' : 'slide-footer slide-footer--no-meta'
+
+  return (
+    <div class={footerClass}>
+      <span>{leftContent}</span>
+      {right != null && showRight && <span>{right}</span>}
+    </div>
+  )
+}
+
+function SlideFootnotes({ html }) {
+  if (!html) return null
+  return <div class="slide-footnotes" dangerouslySetInnerHTML={{ __html: html }} />
+}
+
+function slideNum(index) {
+  return String(index + 1).padStart(2, '0')
+}
+
+
+export function prepareSlide(slide) {
+  const position = region => region.source?.start ?? region.ranges?.[0]?.start ?? 0
+  const entries = Object.entries(slide.regions ?? { body: { name: 'body', content: slide.content } })
+    .sort((a, b) => position(a[1]) - position(b[1]))
+  let separator = '\u0000mdeck-region\u0000'
+  while (entries.some(([, r]) => r.content.includes(separator))) separator += '\u0000'
+  const { processed, footnotesHtml } = preprocessFootnotes(entries.map(([, r]) => r.content).join(separator))
+  const pieces = processed.split(separator)
+  const regions = Object.fromEntries(entries.map(([name, region], i) => [name, { ...region, content: pieces[i] }]))
+  return { ...slide, regions, content: regions.body?.content ?? '', footnotesHtml }
+}
+
+export function MarkdownRegion({ region, content, class: className, ...attributes }) {
+  const name = typeof region === 'object' ? region.name : undefined
+  const markdown = content ?? (typeof region === 'string' ? region : region?.content) ?? ''
+  return <HtmlContent class={className} data-region={name} {...attributes} html={marked.parse(markdown)} />
+}
+
+// Layouts supply body content; every layout receives the same outer frame.
+export function SlideFrame({ meta = {}, props = {}, deckConfig = {}, index = 0, id, manifest, footnotesHtml, children }) {
+  const layout = manifest.id === 'generic' ? meta.layout : manifest.id
+  const frame = manifest.frame ?? 'standard'
+  const title = frame === 'title'
+  const image = props.image
+  const classes = ['slide', layout && 'slide--' + String(layout).replace(/[^a-zA-Z0-9_-]/g, '-'),
+    image && ['title', 'chapter'].includes(layout) && 'has-image',
+    layout === 'full-bleed-image' && props.overlay && 'has-overlay'].filter(Boolean).join(' ')
+  return <section class={classes} data-slide-id={id} data-label={`${slideNum(index)} ${manifest.title}`}>
+    {frame !== 'none' && <SlideHeader deckConfig={deckConfig} logo={title ? deckConfig.meta?.logo : undefined}
+      isTitle={title} right={frame === 'chapter' ? meta.part ?? '' : meta.section ?? ''} />}
+    {children}
+    <SlideFootnotes html={footnotesHtml} />
+    {frame !== 'none' && <SlideFooter deckConfig={deckConfig} right={slideNum(index)} isTitle={title} />}
+    <InkLayer slideId={id} />
+  </section>
+}

package/src/layouts/layoutProps.js

@@ -0,0 +1,30 @@
+// Typed layout properties: shared by CLI validation, discovery and rendering.
+// Built-in layout manifests live in assets/extensions/layouts/*/extension.toml.
+
+export function resolveLayoutProps(manifest, meta = {}) {
+  const result = {}
+  for (const [key, schema] of Object.entries(manifest.properties ?? {})) {
+    if (schema.default !== undefined) result[key] = structuredClone(schema.default)
+    // Preserve legacy top-level fields for built-in layouts.
+    if (meta[key] !== undefined) result[key] = meta[key]
+  }
+  return { ...result, ...(meta.props ?? {}) }
+}
+
+export function propertyErrors(value, schema, path) {
+  const errors = []
+  const valid = schema.type === 'array' ? Array.isArray(value)
+    : schema.type === 'object' ? value !== null && typeof value === 'object' && !Array.isArray(value)
+    : schema.type === 'integer' ? Number.isInteger(value)
+    : typeof value === schema.type && (schema.type !== 'number' || Number.isFinite(value))
+  if (!valid) return [`${path} must be ${schema.type}`]
+  if (schema.enum && !schema.enum.includes(value)) errors.push(`${path} must be one of: ${schema.enum.join(', ')}`)
+  if (typeof value === 'number' && schema.minimum != null && value < schema.minimum) errors.push(`${path} must be at least ${schema.minimum}`)
+  if (typeof value === 'number' && schema.maximum != null && value > schema.maximum) errors.push(`${path} must be at most ${schema.maximum}`)
+  if (Array.isArray(value)) {
+    if (schema.minItems != null && value.length < schema.minItems) errors.push(`${path} needs at least ${schema.minItems} items`)
+    if (schema.maxItems != null && value.length > schema.maxItems) errors.push(`${path} allows at most ${schema.maxItems} items`)
+    if (schema.items) value.forEach((item, index) => errors.push(...propertyErrors(item, schema.items, `${path}[${index}]`)))
+  }
+  return errors
+}

package/src/layouts/renderSlide.jsx

@@ -0,0 +1,17 @@
+import { h } from 'preact'
+import { layouts } from 'virtual:mdeck-extensions'
+import { resolveLayoutProps } from './layoutProps'
+import { SlideFrame, prepareSlide } from './layoutApi'
+
+// Every layout — built-in or deck-local — arrives through the same registry.
+export { layouts }
+export const manifests = Object.fromEntries(Object.entries(layouts).map(([id, t]) => [id, t.manifest]))
+
+export function SlideRenderer(slide) {
+  const id = slide.meta.layout ?? 'generic'
+  const entry = Object.hasOwn(layouts, id) ? layouts[id] : layouts.generic
+  const prepared = prepareSlide(slide)
+  const props = resolveLayoutProps(entry.manifest, slide.meta)
+  const context = { ...prepared, props, manifest: entry.manifest }
+  return <SlideFrame {...context}>{h(entry.render, context)}</SlideFrame>
+}

package/src/live/answer/answer.css

@@ -0,0 +1,34 @@
+/* The phones' answer page. The presenter's screen sends the deck's colours
+   and fonts as CSS variables; these are only fallbacks. */
+:root {
+  --bg: #fff; --ink: #111; --muted: #666; --rule: #d6d6d6; --accent: #0d9488;
+  --font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
+}
+* { box-sizing: border-box; }
+html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--ink); }
+body { min-height: 100vh; display: flex; flex-direction: column; font: 18px/1.45 var(--font-body); -webkit-font-smoothing: antialiased; }
+#answer { flex: 1; display: flex; flex-direction: column; }
+.answer { flex: 1; width: 100%; max-width: 520px; margin: 0 auto; padding: 32px 20px; }
+.answer h1 {
+  margin: 0 0 22px; font-size: clamp(24px, 7vw, 34px); line-height: 1.15;
+  font-family: var(--answer-heading-family, var(--font-display, var(--font-body)));
+  font-weight: var(--answer-heading-weight, 700);
+  letter-spacing: var(--answer-heading-spacing, normal);
+  text-transform: var(--answer-heading-transform, none);
+}
+.answer--waiting p { font-family: var(--answer-heading-family, var(--font-display, var(--font-body))); font-size: 22px; font-weight: 600; }
+.answer-options, .answer-scale { display: grid; gap: 12px; }
+.answer-scale { grid-template-columns: repeat(auto-fit, minmax(48px, 1fr)); }
+.answer button {
+  padding: 18px 20px; border: 2px solid var(--rule); border-radius: 14px; background: var(--bg); color: var(--ink);
+  font: inherit; font-size: 20px; font-weight: 600; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
+}
+.answer-scale button { padding: 16px 0; text-align: center; }
+.answer button:hover { border-color: color-mix(in srgb, var(--accent) 60%, var(--rule)); }
+.answer button.is-picked { border-color: var(--accent); background: var(--accent); color: var(--on-accent, var(--bg)); }
+.answer-scale-labels { display: flex; justify-content: space-between; margin-top: 8px; color: var(--muted); font-size: 15px; }
+.answer-text { display: grid; gap: 12px; }
+.answer-text textarea { width: 100%; padding: 14px; border: 2px solid var(--rule); border-radius: 14px; background: var(--bg); color: var(--ink); font: inherit; resize: vertical; }
+.answer-text button[type=submit] { justify-self: start; background: var(--accent); border-color: var(--accent); color: var(--on-accent, var(--bg)); }
+.answer-status { margin: 18px 0 0; color: var(--muted); min-height: 2.8em; }
+footer { padding: 16px 20px; text-align: center; color: var(--muted); font-size: 14px; }

package/src/live/answer/answer.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="robots" content="noindex" />
+    <title>Answer</title>
+    <link rel="stylesheet" href="answer.css" />
+  </head>
+  <body>
+    <div id="answer"></div>
+    <script src="answer.js"></script>
+  </body>
+</html>

package/src/live/answer/answer.js

@@ -0,0 +1,130 @@
+// The phone page the server serves at <server>/<code>. It needs no deck:
+// the presenter's screen sends the activity on screen (what to ask and how to
+// answer), the deck's look and the words in the deck's language, and this page
+// shows them. Plain browser JavaScript, no build step.
+(() => {
+  const base = new URL('.', location.href)
+  const code = location.pathname.split('/').filter(Boolean).pop()
+  const root = document.getElementById('answer')
+  const FALLBACK = {
+    en: { waiting: 'The next question will appear here.', pick: 'Tap one answer.', thanks: 'Thanks! You chose “{choice}”. Tap another to change.', send: 'Send', sent: 'Sent. Thank you!', offline: 'Connecting…' },
+    de: { waiting: 'Die nächste Frage erscheint hier.', pick: 'Eine Antwort antippen.', thanks: 'Danke! Gewählt: „{choice}“. Zum Ändern eine andere antippen.', send: 'Senden', sent: 'Gesendet. Danke!', offline: 'Verbinde…' },
+  }
+  let words = FALLBACK[navigator.language?.slice(0, 2) === 'de' ? 'de' : 'en']
+  let current = null
+  let connected = false
+  let status = ''
+
+  const me = (() => {
+    try {
+      let id = localStorage.getItem('mdeck-live-client')
+      // randomUUID only exists on https or localhost, not at `mdeck run --network`'s http://192.168…
+      if (!id) localStorage.setItem('mdeck-live-client', id = crypto.randomUUID?.() ?? Array.from(crypto.getRandomValues(new Uint8Array(16)), b => b.toString(16).padStart(2, '0')).join(''))
+      return id
+    } catch { return String(Math.random()).slice(2) }
+  })()
+  const chosenKey = room => `mdeck-answer:${code}.${room}`
+  const remembered = room => { try { return localStorage.getItem(chosenKey(room)) } catch { return null } }
+  const remember = (room, value) => { try { localStorage.setItem(chosenKey(room), value) } catch {} }
+  const fill = (text, vars) => text.replace(/\{(\w+)\}/g, (all, name) => vars[name] ?? all)
+  const el = (tag, props = {}, ...children) => {
+    const node = document.createElement(tag)
+    for (const [key, value] of Object.entries(props)) {
+      if (key.startsWith('on')) node.addEventListener(key.slice(2), value)
+      else if (value != null && value !== false) node.setAttribute(key, value === true ? '' : value)
+    }
+    node.append(...children.flat().filter(child => child != null))
+    return node
+  }
+
+  // The deck's colours and fonts, as the presenter's screen shows them.
+  function applyLook(look, lang) {
+    if (lang) document.documentElement.lang = lang
+    // No look: keep the one the page has, fonts included.
+    if (!look?.tokens) return
+    const style = document.documentElement.style
+    for (const [name, value] of Object.entries(look?.tokens ?? {})) if (/^--[\w-]+$/.test(name)) style.setProperty(name, value)
+    for (const [name, value] of Object.entries(look?.heading ?? {})) style.setProperty(`--answer-heading-${name}`, value)
+    const wanted = (look?.fonts ?? []).filter(url => /^https:\/\//.test(url))
+    for (const link of [...document.querySelectorAll('link[data-theme-font]')]) if (!wanted.includes(link.href)) link.remove()
+    for (const url of wanted) if (!document.querySelector(`link[data-theme-font][href="${CSS.escape(url)}"]`)) document.head.append(el('link', { rel: 'stylesheet', href: url, 'data-theme-font': true }))
+  }
+
+  async function answer(room, value) {
+    const response = await fetch(new URL(`rooms/${encodeURIComponent(`${code}.${room}`)}`, base), { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ from: me, data: { value } }) })
+    if (!response.ok) throw new Error((await response.json().catch(() => ({}))).error ?? String(response.status))
+  }
+
+  const FORMS = {
+    // { question, options: [..] }: one of several answers, which can be changed.
+    choice(activity, room) {
+      const picked = remembered(room)
+      return [
+        el('div', { class: 'answer-options' }, activity.options.map(option => el('button', {
+          class: option === picked ? 'is-picked' : null, 'aria-pressed': String(option === picked),
+          onclick: async () => {
+            try { await answer(room, option); remember(room, option); status = fill(words.thanks, { choice: option }) } catch (error) { status = error.message }
+            render()
+          },
+        }, option))),
+        el('p', { class: 'answer-status', role: 'status' }, status || (picked ? fill(words.thanks, { choice: picked }) : words.pick)),
+      ]
+    },
+    // { question, placeholder, maxLength }: short text, as often as people like.
+    text(activity, room) {
+      const input = el('textarea', { rows: 3, maxlength: activity.maxLength ?? 200, placeholder: activity.placeholder ?? '' })
+      const form = el('form', { class: 'answer-text', onsubmit: async event => {
+        event.preventDefault()
+        const value = input.value.trim()
+        if (!value) return
+        try { await answer(room, value); status = words.sent } catch (error) { status = error.message }
+        render()
+      } }, input, el('button', { type: 'submit' }, words.send))
+      return [form, el('p', { class: 'answer-status', role: 'status' }, status)]
+    },
+    // { question, min, max, minLabel, maxLabel }: a number on a scale.
+    scale(activity, room) {
+      const picked = remembered(room)
+      const steps = []
+      for (let n = activity.min ?? 1; n <= (activity.max ?? 5); n++) steps.push(String(n))
+      return [
+        el('div', { class: 'answer-scale' }, steps.map(step => el('button', {
+          class: step === picked ? 'is-picked' : null, 'aria-pressed': String(step === picked),
+          onclick: async () => {
+            try { await answer(room, Number(step)); remember(room, step); status = fill(words.thanks, { choice: step }) } catch (error) { status = error.message }
+            render()
+          },
+        }, step))),
+        (activity.minLabel || activity.maxLabel) && el('div', { class: 'answer-scale-labels' }, el('span', {}, activity.minLabel ?? ''), el('span', {}, activity.maxLabel ?? '')),
+        el('p', { class: 'answer-status', role: 'status' }, status || (picked ? fill(words.thanks, { choice: picked }) : words.pick)),
+      ]
+    },
+  }
+
+  function render() {
+    const activity = current?.activity
+    const form = activity && FORMS[activity.type]
+    root.replaceChildren(
+      form
+        ? el('main', { class: 'answer' }, activity.question && el('h1', {}, activity.question), form(activity, current.room))
+        : el('main', { class: 'answer answer--waiting' }, el('p', {}, connected ? words.waiting : words.offline)),
+      current?.title ? el('footer', {}, current.title) : null,
+    )
+  }
+
+  function follow(state) {
+    const previous = current?.room
+    current = state
+    if (state?.labels) words = { ...words, ...state.labels }
+    applyLook(state?.look, state?.lang)
+    if (state?.room !== previous) status = ''
+    render()
+  }
+
+  render()
+  // view=phone: the presenter sees how many phones are connected.
+  const source = new EventSource(new URL(`rooms/${encodeURIComponent(code)}/events?view=phone&device=phone`, base))
+  source.addEventListener('snapshot', event => { connected = true; follow(JSON.parse(event.data).state) })
+  source.addEventListener('error', () => { connected = false; render() })
+  source.addEventListener('state', event => follow(JSON.parse(event.data).state))
+})()