mdeck 2.3.0

package/src/components/Question.jsx

@@ -0,0 +1,28 @@
+import { h } from 'preact'
+import { useRoom } from '../live/client.js'
+import { JoinCode, ActivityFooter, wantsQr } from './activity.jsx'
+import { t } from '../core/labels.js'
+import './poll.css'
+
+// <question room="ask" question="What should we cover next?" placeholder="Your question" />
+// Open answers: phones get a text field and may send as often as they like;
+// the slide shows the newest answers as cards (`limit`, 8 by default).
+
+export default function Question({ room = 'question', question = '', limit = '8', qr }) {
+  const live = useRoom(room)
+  const answers = live.messages.map(message => ({ n: message.n, text: String(message.data?.value ?? '').trim() })).filter(answer => answer.text)
+  const shown = answers.slice(-Math.max(1, Number(limit) || 8)).reverse()
+  const code = wantsQr(qr)
+  return <div class="poll poll--question">
+    <div class="poll-main">
+      {question && <p class="poll-question">{question}</p>}
+      {shown.length
+        ? <ul class="question-cards">{shown.map(answer => <li key={answer.n}>{answer.text}</li>)}</ul>
+        : !live.offline && <p class="question-empty">{t('question.empty')}</p>}
+      <ActivityFooter count={answers.length} {...live} />
+    </div>
+    <JoinCode room={room} {...live} qr={code} size={240} />
+  </div>
+}
+
+Question.phone = ({ question, placeholder }, { slideTitle = '' } = {}) => ({ type: 'text', question: question || slideTitle, placeholder: placeholder ?? '', maxLength: 200 })

package/src/components/Scale.jsx

@@ -0,0 +1,47 @@
+import { h } from 'preact'
+import { useRoom, latestByDevice } from '../live/client.js'
+import { JoinCode, ActivityFooter, wantsQr } from './activity.jsx'
+import { t } from '../core/labels.js'
+import './poll.css'
+
+// <scale room="pace" question="How is the pace?" min="1" max="5" low="Too slow" high="Too fast" />
+// Phones pick a number; each device's latest answer counts. The slide shows
+// how many chose each number, and the average.
+
+const bounds = ({ min, max }) => {
+  const low = Number.isFinite(Number(min)) && min !== '' && min != null ? Math.round(Number(min)) : 1
+  const high = Number.isFinite(Number(max)) && max !== '' && max != null ? Math.round(Number(max)) : 5
+  return high > low && high - low <= 10 ? [low, high] : [1, 5]
+}
+
+export default function Scale({ room = 'scale', question = '', low = '', high = '', qr, ...rest }) {
+  const [min, max] = bounds(rest)
+  const steps = Array.from({ length: max - min + 1 }, (_, i) => min + i)
+  const live = useRoom(room)
+  const values = latestByDevice(live.messages).map(message => Number(message.data?.value)).filter(value => steps.includes(value))
+  const counts = steps.map(step => values.filter(value => value === step).length)
+  const most = Math.max(1, ...counts)
+  const average = values.length ? (values.reduce((sum, value) => sum + value, 0) / values.length).toFixed(1) : null
+  const code = wantsQr(qr)
+  return <div class={`poll poll--scale${live.offline && !values.length ? ' is-static' : ''}`}>
+    <div class="poll-main">
+      {question && <p class="poll-question">{question}</p>}
+      <div class="scale-columns" role="list">
+        {steps.map((step, i) => <div class="scale-column" role="listitem" key={step}>
+          <span class="scale-count">{counts[i]}</span>
+          <span class="scale-track"><span class="scale-fill" style={{ height: `${(counts[i] / most) * 100}%` }} /></span>
+          <span class="scale-step">{step}</span>
+        </div>)}
+      </div>
+      {(low || high) && <p class="scale-labels"><span>{low}</span><span>{high}</span></p>}
+      <ActivityFooter count={values.length} {...live} />
+      {average && <p class="scale-average">{t('scale.average', { n: average })}</p>}
+    </div>
+    <JoinCode room={room} {...live} qr={code} size={240} />
+  </div>
+}
+
+Scale.phone = ({ question, low, high, ...rest }, { slideTitle = '' } = {}) => {
+  const [min, max] = bounds(rest)
+  return { type: 'scale', question: question || slideTitle, min, max, minLabel: low ?? '', maxLabel: high ?? '' }
+}

package/src/components/VideoPlayer.jsx

@@ -0,0 +1,108 @@
+import { h } from 'preact'
+import { useEffect, useRef, useState } from 'preact/hooks'
+import './video-player.css'
+
+function getEmbedUrl(rawUrl, autoplay = false) {
+  const ap = autoplay
+  const yt = rawUrl.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([\w-]+)/)
+  if (yt) return `https://www.youtube.com/embed/${yt[1]}?rel=0${ap ? '&autoplay=1&mute=1' : ''}`
+  const vi = rawUrl.match(/vimeo\.com\/(\d+)/)
+  if (vi) return `https://player.vimeo.com/video/${vi[1]}${ap ? '?autoplay=1&muted=1' : ''}`
+  const sw = rawUrl.match(/tube\.switch\.ch\/(?:videos|embed)\/([\w-]+)/)
+  if (sw) return `https://tube.switch.ch/embed/${sw[1]}${ap ? '?autoplay=1' : ''}`
+  return rawUrl
+}
+
+export default function VideoPlayer({ src, url, play = 'click', aspect, muted }) {
+  const containerRef = useRef(null)
+  const videoRef     = useRef(null)
+
+  // The HtmlContent hydration wrapper has no width; stretch it so percentage widths work
+  useEffect(() => {
+    if (containerRef.current?.parentElement) {
+      containerRef.current.parentElement.style.width = '100%'
+    }
+  }, [])
+
+  // Preact doesn't reliably apply the muted attribute via props — set it on the DOM node directly
+  useEffect(() => {
+    if (videoRef.current) videoRef.current.muted = (play === 'auto' || muted != null)
+  }, [play, muted])
+  // Web video: click mode renders immediately; auto mode starts null and is set by slidechange
+  const [iframeSrc, setIframeSrc] = useState(
+    url && play === 'click' ? getEmbedUrl(url, false) : null
+  )
+
+  // Local video: pause on slide deactivation for all modes; also play on activation for "auto"
+  useEffect(() => {
+    if (!src) return
+    const stage = document.querySelector('deck-stage')
+    if (!stage) return
+
+    // If already on the active slide when we mount, play immediately for auto mode
+    if (play === 'auto') {
+      const active = stage.querySelector('[data-deck-active]')
+      if (active?.contains(containerRef.current)) videoRef.current?.play()
+    }
+
+    function onSlideChange(e) {
+      const active = e.detail.slide?.contains(containerRef.current)
+      if (active && play === 'auto') {
+        videoRef.current?.play()
+      } else if (!active) {
+        videoRef.current?.pause()
+        if (play === 'auto' && videoRef.current) videoRef.current.currentTime = 0
+      }
+    }
+    stage.addEventListener('slidechange', onSlideChange)
+    return () => stage.removeEventListener('slidechange', onSlideChange)
+  }, [play, src])
+
+  // Web video auto mode: clear/restore src on slide change to stop/start playback
+  useEffect(() => {
+    if (play !== 'auto' || !url) return
+    const stage = document.querySelector('deck-stage')
+    if (!stage) return
+    const embedUrl = getEmbedUrl(url, true)
+
+    // Check immediately in case we mounted after the init slidechange fired
+    const active = stage.querySelector('[data-deck-active]')
+    if (active?.contains(containerRef.current)) setIframeSrc(embedUrl)
+
+    function onSlideChange(e) {
+      const active = e.detail.slide?.contains(containerRef.current)
+      setIframeSrc(active ? embedUrl : null)
+    }
+    stage.addEventListener('slidechange', onSlideChange)
+    return () => stage.removeEventListener('slidechange', onSlideChange)
+  }, [play, url])
+
+  const fixedAspect = typeof aspect === 'string' && aspect.trim() !== ''
+
+  return (
+    <div
+      ref={containerRef}
+      class="video-player-container"
+      // max-height: 800px würde das aspectRatio sonst überstimmen: der Kasten
+      // wird flacher als das Video und dieses innen eingepasst -> schwarze
+      // Ränder. Also die Breite passend zur Höhenbegrenzung mitdeckeln.
+      style={fixedAspect
+        ? { aspectRatio: aspect, maxWidth: `calc(800px * (${aspect}))`, margin: '0 auto' }
+        : undefined}
+    >
+      {url ? (
+        iframeSrc
+          ? <iframe src={iframeSrc} allow="autoplay; fullscreen" allowFullScreen
+              style={{ width: '100%', height: fixedAspect ? '100%' : 'auto', aspectRatio: fixedAspect ? undefined : '16 / 9', border: '0', display: 'block' }} />
+          : <div class="video-player-placeholder" />
+      ) : (
+        <video
+          ref={videoRef}
+          src={src}
+          controls
+          style={{ width: '100%', height: fixedAspect ? '100%' : 'auto', display: 'block' }}
+        />
+      )}
+    </div>
+  )
+}

package/src/components/WordCloud.jsx

@@ -0,0 +1,106 @@
+import { h } from 'preact'
+import { useEffect, useMemo, useRef, useState } from 'preact/hooks'
+import cloud from 'd3-cloud'
+import { useRoom } from '../live/client.js'
+import { JoinCode, ActivityFooter, wantsQr } from './activity.jsx'
+import { t } from '../core/labels.js'
+import './poll.css'
+
+// <wordcloud room="mood" question="One word for today?" />
+// Phones send a word or two, as often as they like. The slide packs every
+// answer into a cloud around its middle: the more often it was sent, the
+// larger; some stand upright. Answers that differ only in case or spacing
+// count together. `height` is the cloud's height in slide pixels (520),
+// `limit` the most words shown (60).
+
+// The same answers always give the same cloud, and a new word moves the
+// others as little as the layout allows.
+function seeded(seed) {
+  let state = seed >>> 0 || 1
+  return () => { state = (state * 1664525 + 1013904223) >>> 0; return state / 2 ** 32 }
+}
+const hash = text => [...text].reduce((sum, char) => (sum * 31 + char.codePointAt(0)) >>> 0, 7)
+
+function countWords(messages) {
+  const counts = new Map()
+  for (const message of messages) {
+    const text = String(message.data?.value ?? '').trim().replace(/\s+/g, ' ')
+    if (!text) continue
+    const key = text.toLocaleLowerCase()
+    const entry = counts.get(key) ?? { text, n: 0 }
+    entry.n++
+    counts.set(key, entry)
+  }
+  return [...counts.values()].sort((a, b) => b.n - a.n || a.text.localeCompare(b.text))
+}
+
+// Places the words (d3-cloud: an Archimedean spiral from the middle, tested
+// against the letters' real shapes). When not every word fits, it tries again
+// smaller, so no answer is left out.
+function layout(words, { width, height, font }) {
+  if (!words.length || width < 50) return []
+  const most = words[0].n
+  const largest = Math.min(150, height * 0.3)
+  let placed = []
+  for (let scale = 1; scale > 0.3; scale *= 0.82) {
+    const top = largest * scale, bottom = Math.max(18, 26 * scale)
+    cloud()
+      .size([width, height])
+      .words(words.map((word, i) => ({
+        text: word.text, n: word.n,
+        size: bottom + (top - bottom) * Math.sqrt(word.n / most),
+        rotate: i > 0 && hash(word.text) % 5 === 0 ? -90 : 0,
+      })))
+      .font(font).fontWeight('700').fontSize(word => word.size).rotate(word => word.rotate)
+      .padding(Math.max(2, 6 * scale)).spiral('archimedean')
+      .random(seeded(words.length * 7919 + hash(words[0].text)))
+      .timeInterval(Infinity)
+      .on('end', output => { placed = output })
+      .start()
+    if (placed.length === words.length) break
+  }
+  return placed
+}
+
+export default function WordCloud({ room = 'words', question = '', limit = '60', height = '520', qr }) {
+  const live = useRoom(room)
+  const all = countWords(live.messages)
+  const words = all.slice(0, Math.max(1, Number(limit) || 60))
+  const total = all.reduce((sum, word) => sum + word.n, 0)
+  const cloudHeight = Math.max(200, Number(height) || 520)
+  const ref = useRef(null)
+  // Slide pixels: the stage scales the whole slide, offsetWidth is unscaled.
+  const [measure, setMeasure] = useState({ width: 0, font: 'sans-serif', fontsReady: 0 })
+  useEffect(() => {
+    const element = ref.current
+    if (!element) return
+    const read = () => setMeasure(current => ({ ...current, width: element.offsetWidth, font: getComputedStyle(element).fontFamily || 'sans-serif' }))
+    read()
+    // The theme's font must be there before letters are measured.
+    document.fonts?.ready.then(() => setMeasure(current => ({ ...current, fontsReady: current.fontsReady + 1 })))
+    const observer = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(read) : null
+    observer?.observe(element)
+    return () => observer?.disconnect()
+  }, [])
+  const key = words.map(word => `${word.text}:${word.n}`).join('|')
+  const placed = useMemo(() => layout(words, { width: measure.width, height: cloudHeight, font: measure.font }), [key, measure.width, measure.font, measure.fontsReady, cloudHeight])
+  const code = wantsQr(qr)
+  return <div class="poll poll--cloud">
+    <div class="poll-main">
+      {question && <p class="poll-question">{question}</p>}
+      {/* Without a server and words there is nothing to place: no empty box. */}
+      <div class="word-cloud" ref={ref} style={{ height: live.offline && !words.length ? 0 : `${cloudHeight}px` }}>
+        {words.length
+          ? <svg viewBox={`${-measure.width / 2} ${-cloudHeight / 2} ${measure.width || 1} ${cloudHeight}`} width="100%" height="100%" role="img" aria-label={words.map(word => word.text).join(', ')}>
+            {placed.map(word => <text key={word.text} class={`word word--${word.text === words[0].text ? 0 : hash(word.text) % 6}`} text-anchor="middle"
+              style={{ fontSize: `${word.size}px`, fontFamily: measure.font, transform: `translate(${word.x}px, ${word.y}px) rotate(${word.rotate}deg)` }}>{word.text}</text>)}
+          </svg>
+          : !live.offline && <p class="question-empty">{t('question.empty')}</p>}
+      </div>
+      <ActivityFooter count={total} {...live} />
+    </div>
+    <JoinCode room={room} {...live} qr={code} size={240} />
+  </div>
+}
+
+WordCloud.phone = ({ question, placeholder }, { slideTitle = '' } = {}) => ({ type: 'text', question: question || slideTitle, placeholder: placeholder ?? '', maxLength: 40 })

package/src/components/activity.jsx

@@ -0,0 +1,35 @@
+import { h } from 'preact'
+import QrCode from './QrCode.jsx'
+import { t } from '../core/labels.js'
+
+// Parts every activity on a slide shares (<poll>, <question>, <wordcloud>,
+// <scale>, and <qrcode join />): the deck's join code and the line with the number of
+// answers, the live dot and Reset.
+
+export const shortLink = url => url.replace(/^https?:\/\//, '')
+// `qr="false"` (or "no", "off") leaves the code out: it was on an earlier
+// slide (<qrcode join />), and people's phones follow along.
+export const wantsQr = qr => !/^(false|no|off|0)$/i.test(String(qr ?? 'true'))
+
+/** The join code with the short link, or how to make phones reach the server. */
+export function JoinCode({ room, joinUrl, localJoinUrl, known, offline, qr = true, size = 300, label = t('poll.scan') }) {
+  if (!qr || offline || (!known && !joinUrl)) return null
+  if (!joinUrl) return <p class="poll-join poll-join--local">{t('poll.unreachable', { command: <code>mdeck run --network</code>, setting: <code>server</code> })} <a href={localJoinUrl} target="_blank" rel="noopener">{t('poll.tryHere')}</a></p>
+  return <a class="poll-join" href={joinUrl} target="_blank" rel="noopener" data-room={room}>
+    <QrCode url={joinUrl} size={String(size)} />
+    <span>{label}</span>
+    <span class="poll-link">{shortLink(joinUrl)}</span>
+  </a>
+}
+
+/** Number of answers, whether the room is live, and Reset for the presenter; `children` go at the end. */
+export function ActivityFooter({ count, connected, canReset, reset, offline, children }) {
+  // Without a server this is a record of the talk: no count, dot or buttons.
+  if (offline && !count) return <p class="poll-total poll-static">{t('poll.static')}</p>
+  return <p class="poll-total">
+    <span class={`poll-dot${connected ? ' is-live' : ''}`} title={connected ? t('poll.live') : t('poll.offline')} />
+    {count === 1 ? t('poll.answer') : t('poll.answers', { n: count })}
+    {canReset && <button class="poll-reset" disabled={count === 0} onClick={() => reset().catch(() => {})}>{t('poll.reset')}</button>}
+    {children}
+  </p>
+}

package/src/components/callout.css

@@ -0,0 +1,78 @@
+:root {
+  --callout-note:      #0969da;
+  --callout-tip:       #1a7f37;
+  --callout-important: #8250df;
+  --callout-warning:   #eab308;
+  --callout-caution:   #cf222e;
+}
+
+.callout {
+  border-left: 4px solid var(--rule);
+  padding: 20px 28px;
+  background: var(--surface, var(--bg));
+  margin: var(--gap-item) 0;
+}
+.callout-title {
+  font-weight: 600;
+  font-size: var(--fs-eyebrow);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  margin: 0 0 8px 0;
+}
+.callout p { margin: 0; color: var(--ink-soft); padding-left: 28px; }
+
+.callout-note      { border-left-color: var(--callout-note); }
+.callout-tip       { border-left-color: var(--callout-tip); }
+.callout-important { border-left-color: var(--callout-important); }
+.callout-warning   { border-left-color: var(--callout-warning); }
+.callout-caution   { border-left-color: var(--callout-caution); }
+
+/* Titles are text: the signal colour mixed with the text colour, darker on
+   light slides and lighter on dark ones, so they can be read on both. The
+   yellow of a warning needs more of the text colour. */
+.callout-note      .callout-title { color: color-mix(in oklab, var(--callout-note) 65%, var(--ink)); }
+.callout-tip       .callout-title { color: color-mix(in oklab, var(--callout-tip) 65%, var(--ink)); }
+.callout-important .callout-title { color: color-mix(in oklab, var(--callout-important) 65%, var(--ink)); }
+.callout-warning   .callout-title { color: color-mix(in oklab, var(--callout-warning) 45%, var(--ink)); }
+.callout-caution   .callout-title { color: color-mix(in oklab, var(--callout-caution) 65%, var(--ink)); }
+
+/* Blocks for lectures, in every theme. Theorems, lemmas and corollaries in
+   the accent with the statement in italics, definitions in the second
+   accent; examples and remarks stay plain. A proof is no box: "Proof." runs
+   into its text, and a square ends it. Themes with their own callout style
+   colour these blocks their way; the proof is shared, and themes that set
+   it differently (academic, sketch) use the same selectors. */
+.callout:is(.callout-theorem, .callout-lemma, .callout-corollary) { border-left-color: var(--accent); }
+.callout.callout-definition { border-left-color: var(--accent-2); }
+.callout:is(.callout-theorem, .callout-lemma, .callout-corollary) .callout-title { color: color-mix(in oklab, var(--accent) 75%, var(--ink)); }
+.callout.callout-definition .callout-title { color: color-mix(in oklab, var(--accent-2) 75%, var(--ink)); }
+.callout:is(.callout-theorem, .callout-lemma, .callout-corollary) > :not(.callout-title) { font-style: italic; }
+
+.slide-body .callout.callout-proof {
+  display: block;
+  background: none;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  padding: 0;
+  max-width: none;
+}
+.slide-body .callout.callout-proof::before { display: none; }
+.slide-body .callout.callout-proof .callout-title {
+  display: inline;
+  float: left;
+  margin: 0 0.4em 0 0;
+  padding: 0;
+  background: none;
+  font-size: inherit;
+  font-style: italic;
+  font-weight: 700;
+  line-height: inherit;
+  letter-spacing: 0;
+  text-transform: none;
+  color: var(--ink);
+}
+.slide-body .callout.callout-proof .callout-title::before { content: none; }
+.slide-body .callout.callout-proof .callout-title::after { content: '.'; }
+.slide-body .callout.callout-proof > :not(.callout-title) { padding-left: 0; font-style: normal; }
+.slide-body .callout.callout-proof > :last-child::after { content: '\220E'; margin-left: 0.6em; color: var(--ink); }

package/src/components/code-block.css

@@ -0,0 +1,123 @@
+:root {
+  --token-default:  #0a0a0a;
+  --token-comment:  #708090;
+  --token-string:   #669900;
+  --token-number:   #905050;
+  --token-keyword:  #0077aa;
+  --token-function: #dd4a68;
+  --token-operator: #9a6e3a;
+}
+
+code[class*="language-"] { color: var(--token-default); }
+.token.comment, .token.prolog, .token.doctype, .token.cdata { color: var(--token-comment); font-style: italic; }
+.token.punctuation { color: var(--token-default); opacity: 0.7; }
+.token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol, .token.deleted { color: var(--token-number); }
+.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted { color: var(--token-string); }
+.token.operator, .token.entity, .token.url, .token.regex, .token.variable { color: var(--token-operator); }
+.token.atrule, .token.attr-value, .token.keyword { color: var(--token-keyword); }
+.token.function, .token.class-name { color: var(--token-function); }
+.token.important, .token.bold { font-weight: bold; }
+.token.italic { font-style: italic; }
+
+/* ── Wrapper ────────────────────────────────────────────────────────────── */
+.code-block-wrapper {
+  position: relative;
+  margin: 40px 0;
+  width: 100%;
+  /* Centred layouts (focus, title) must not centre the lines of code. */
+  text-align: left;
+}
+
+/* ── Action buttons ─────────────────────────────────────────────────────── */
+.code-block-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 8px 12px;
+}
+
+.code-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  background: var(--bg, #fff);
+  color: var(--ink, #0a0a0a);
+  border: 1.5px solid var(--rule, #e5e5e5);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 0.1s;
+}
+.code-btn:hover { background: var(--rule, #e5e5e5); }
+.code-btn:disabled { opacity: 0.45; cursor: not-allowed; }
+.code-btn-spin { animation: code-btn-spin 0.9s linear infinite; }
+@keyframes code-btn-spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { .code-btn-spin { animation: none; } }
+
+
+/* ── Editable: highlighted pre + transparent textarea overlay ───────────── */
+.code-editable-container {
+  position: relative;
+}
+.code-editable-highlight {
+  overflow: hidden;
+  pointer-events: none;
+  user-select: none;
+  margin: 0;
+}
+/* The textarea sits on top; .code-block class makes it inherit the theme's
+   padding/line-height/font so cursor positions align exactly with the highlight layer.
+   The double-class selector overrides any single-class .code-block theme rules. */
+.code-block.code-editable-input {
+  position: absolute;
+  inset: 0;
+  background: transparent;
+  color: transparent;
+  caret-color: var(--ink, #0a0a0a);
+  border-color: transparent;   /* keep border width for layout alignment, hide color */
+  box-shadow: none;
+  resize: none;
+  overflow: hidden;
+  outline: none;
+  tab-size: 2;
+}
+.code-block.code-editable-input::before { display: none; }
+.code-block.code-editable-input::selection {
+  color: transparent;
+  background-color: rgba(100, 150, 255, 0.25);
+}
+
+/* ── Output area ────────────────────────────────────────────────────────── */
+.code-output {
+  margin: 0;
+  padding: 28px 48px;
+  background: var(--surface, var(--rule));
+  color: var(--ink);
+  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+  font-size: var(--code-size, 30px);
+  line-height: 1.55;
+  white-space: pre;
+  /* The height includes the padding, as the fitted height does (fit.js). */
+  box-sizing: border-box;
+  max-height: 10em;
+  overflow-y: auto;
+  border-radius: 0 8px 8px 8px;
+  border-left: 4px solid var(--rule);
+}
+.code-output--error {
+  color: #f87171;
+  border-left-color: #ef4444;
+}
+
+/* ── Code taller than its place on the slide (src/runtime/fit.js) ───────── */
+/* The runtime caps the height; the code scrolls inside. For editable code
+   the text field scrolls, and the highlighted layer follows it. */
+/* The capped height is the whole box, padding and rules included. */
+.code-block.is-capped { box-sizing: border-box; }
+pre.code-block.is-capped { overflow-y: auto; }
+.code-block.code-editable-highlight.is-capped { overflow: hidden; }
+.code-editable-container.is-capped .code-block.code-editable-input { overflow-y: auto; }
+/* While there is more below, the lower edge fades: the audience sees that
+   the code goes on. */
+:is(.code-block, .code-output).is-capped:not(.is-at-end) { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 72px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 72px), transparent); }

package/src/components/columns.css

@@ -0,0 +1,11 @@
+.columns {
+  display: flex;
+  gap: var(--gap-col, 4rem);
+  align-items: start;
+  width: 100%;
+}
+
+.column {
+  flex: 1;
+  min-width: 0;
+}

package/src/components/poll.css

@@ -0,0 +1,81 @@
+/* ── Poll on the slide ─────────────────────────────────────────────────── */
+.poll { display: flex; gap: 72px; align-items: center; width: 100%; font-size: var(--fs-body, 36px); color: var(--ink, #111); }
+.poll-main { flex: 1; min-width: 0; }
+.poll .poll-question { margin: 0 0 32px; font-weight: 600; }
+.poll-bars { display: grid; gap: 20px; }
+.poll-row { display: grid; grid-template-columns: minmax(120px, 28%) 1fr 3ch; gap: 24px; align-items: center; }
+.poll-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.poll-track { height: 1.1em; background: color-mix(in srgb, var(--ink, #111) 8%, transparent); border-radius: 6px; overflow: hidden; }
+.poll-fill { display: block; height: 100%; background: var(--accent, #0d9488); border-radius: 6px; transition: width .6s cubic-bezier(.2, .8, .2, 1); }
+.poll-count { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
+.poll .poll-total { display: flex; align-items: center; gap: 14px; margin: 36px 0 0; font-size: var(--fs-small, 24px); color: var(--muted, #666); }
+.poll-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--muted, #999); opacity: .5; }
+.poll-dot.is-live { background: #16a34a; opacity: 1; }
+.poll-reset { margin-left: auto; padding: 4px 14px; border: 1px solid var(--rule, #ccc); border-radius: 6px; background: none; color: inherit; font: inherit; cursor: pointer; }
+.poll-reset:disabled { opacity: .4; cursor: default; }
+/* The audience sees the results, not the presenter's controls. */
+deck-stage[data-follower] .poll-reset { display: none; }
+/* answer="…": the tick outlines the right answer's row (label, bar, count) in green. */
+.poll-solve { display: grid; place-items: center; width: 44px; height: 44px; margin-left: auto; padding: 0; border: 1px solid var(--rule, #ccc); border-radius: 50%; background: none; color: var(--muted, #666); cursor: pointer; opacity: .55; transition: opacity .2s, background .2s, color .2s; }
+.poll-reset + .poll-solve { margin-left: 0; }
+.poll-solve svg { width: 24px; height: 24px; }
+.poll-solve:hover, .poll-solve:focus-visible { opacity: 1; }
+.poll-solve.is-on { opacity: 1; background: var(--poll-correct, #16a34a); border-color: var(--poll-correct, #16a34a); color: #fff; }
+deck-stage[data-follower] .poll-solve { display: none; }
+.poll.is-solved .poll-row.is-correct { outline: 4px solid var(--poll-correct, #16a34a); outline-offset: 10px; border-radius: 10px; }
+.poll.is-solved .poll-row.is-correct .poll-label { font-weight: 700; color: var(--poll-correct, #16a34a); }
+.poll-link { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 20px; color: var(--muted, #555); }
+/* The join code in the slide's own colours (see QrCode.jsx). */
+.poll-join { flex: none; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px; border: 1px solid var(--rule, rgba(0,0,0,.12)); border-radius: 12px; color: var(--ink, #111); text-decoration: none; font-size: var(--fs-small, 24px); }
+.poll-join--local { display: block; max-width: 460px; text-align: left; line-height: 1.4; color: var(--ink-soft, var(--ink, #333)); }
+.poll-join--local code { display: inline; font-size: .9em; }
+.poll-join--local a { color: var(--accent, #0d9488); }
+
+/* <question>: the newest answers as cards */
+.question-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; }
+.slide-body .question-cards li::before, .question-cards li::before, .question-cards li::marker { content: none; display: none; }
+.slide-body .question-cards li { padding-left: 22px; }
+.question-cards li { margin: 0; padding: 18px 22px; border-radius: 10px; background: var(--surface, color-mix(in srgb, var(--ink, #111) 5%, transparent)); border-left: 5px solid var(--accent, #0d9488); font-size: .8em; line-height: 1.35; overflow-wrap: anywhere; animation: poll-in .4s ease both; }
+.question-cards li:first-child { border-left-color: var(--accent-2, var(--accent, #0d9488)); }
+.question-empty { margin: 0; color: var(--muted, #666); font-style: italic; }
+@keyframes poll-in { from { opacity: 0; transform: translateY(8px); } }
+
+/* <wordcloud>: SVG text placed by d3-cloud */
+.word-cloud { position: relative; width: 100%; }
+.word-cloud svg { display: block; overflow: visible; }
+.word { font-weight: 700; transition: transform .7s cubic-bezier(.2, .8, .2, 1), font-size .7s cubic-bezier(.2, .8, .2, 1); }
+/* Six colours from the palette: its accents and inks, and two blends of
+   them, all readable on the slide. A theme or deck may set --cloud-1…6. */
+.word--0 { fill: var(--cloud-1, var(--accent, #0d9488)); }
+.word--1 { fill: var(--cloud-2, var(--accent-2, #7c3aed)); }
+.word--2 { fill: var(--cloud-3, var(--ink, #111)); }
+.word--3 { fill: var(--cloud-4, color-mix(in oklab, var(--accent, #0d9488) 50%, var(--accent-2, #7c3aed))); }
+.word--4 { fill: var(--cloud-5, var(--ink-soft, #444)); }
+.word--5 { fill: var(--cloud-6, color-mix(in oklab, var(--accent, #0d9488) 55%, var(--ink, #111))); }
+
+/* <scale> */
+.scale-columns { display: flex; gap: 20px; align-items: stretch; height: 320px; }
+.scale-column { flex: 1; display: grid; grid-template-rows: auto 1fr auto; gap: 10px; justify-items: center; }
+.scale-track { width: 100%; display: flex; align-items: flex-end; background: color-mix(in srgb, var(--ink, #111) 6%, transparent); border-radius: 6px; overflow: hidden; }
+.scale-fill { display: block; width: 100%; background: var(--accent, #0d9488); border-radius: 6px 6px 0 0; transition: height .6s cubic-bezier(.2, .8, .2, 1); }
+.scale-count { font-variant-numeric: tabular-nums; font-weight: 600; font-size: var(--fs-small, 24px); }
+.scale-step { font-variant-numeric: tabular-nums; color: var(--muted, #666); }
+.poll .scale-labels { display: flex; justify-content: space-between; margin: 12px 0 0; font-size: var(--fs-small, 24px); color: var(--muted, #666); }
+.poll .scale-average { margin: 10px 0 0; font-size: var(--fs-small, 24px); font-weight: 600; }
+
+/* <qrcode join />: the join code, large, on a slide of its own */
+.poll-join-slide { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; }
+.poll-join-slide .poll-join { font-size: var(--fs-body, 32px); gap: 16px; padding: 24px 32px; }
+.poll-join-slide .poll-link { font-size: 28px; }
+@media print { .poll-reset, .poll-dot, .poll-solve { display: none; } .poll-fill, .scale-fill, .word { transition: none; animation: none; } .question-cards li { animation: none; } }
+
+/* A record of the talk (no room server: a PDF, a file sent to readers): the
+   question and its options, without counts, the live dot or a join code. */
+.poll.is-static .poll-count, .poll.is-static .scale-count { visibility: hidden; }
+.poll .poll-static, .poll-join-slide .poll-static { margin: 36px 0 0; color: var(--muted, #666); font-style: italic; font-size: var(--fs-small, 24px); }
+.poll-join-slide .poll-static { margin: 0; font-size: var(--fs-body, 32px); }
+
+/* On paper the join code and the presenter's controls have no use. */
+@media print {
+  .poll-join, .poll-reset, .poll-solve, .poll-dot { display: none !important; }
+}

package/src/components/video-player.css

@@ -0,0 +1,14 @@
+.video-player-container {
+  position: relative;
+  width: 100%;
+  max-height: 800px;
+  background: #000;
+  border-radius: var(--radius, 4px);
+  overflow: hidden;
+}
+
+.video-player-placeholder {
+  width: 100%;
+  height: 100%;
+  background: #111;
+}

package/src/core/devPath.js

@@ -0,0 +1,4 @@
+// The dev server's own addresses (/__mdeck/…) for pages it serves. With
+// `mdeck run --server` it serves at /t/<id>/ instead of /, so they follow
+// Vite's base path; built pages and Node tests have no dev server and use /.
+export const devPath = path => `${import.meta.env?.DEV ? (import.meta.env.BASE_URL ?? '/') : '/'}${path.replace(/^\//, '')}`