mdeck 3.6.0 → 3.6.2

package/docs/site/examples/first-talk.results.json

@@ -0,0 +1,171 @@
+{
+  "version": 1,
+  "rooms": {
+    "first": {
+      "savedAt": "2026-10-09T09:13:00.000Z",
+      "closed": false,
+      "answers": [
+        {
+          "phone": 1,
+          "at": "2026-10-09T09:12:00.000Z",
+          "value": "Drawing on slides"
+        },
+        {
+          "phone": 2,
+          "at": "2026-10-09T09:12:01.700Z",
+          "value": "A new theme"
+        },
+        {
+          "phone": 3,
+          "at": "2026-10-09T09:12:03.400Z",
+          "value": "Citations"
+        },
+        {
+          "phone": 4,
+          "at": "2026-10-09T09:12:05.100Z",
+          "value": "Drawing on slides"
+        },
+        {
+          "phone": 5,
+          "at": "2026-10-09T09:12:06.800Z",
+          "value": "A new theme"
+        },
+        {
+          "phone": 6,
+          "at": "2026-10-09T09:12:08.500Z",
+          "value": "Polls from phones"
+        },
+        {
+          "phone": 7,
+          "at": "2026-10-09T09:12:10.200Z",
+          "value": "Drawing on slides"
+        },
+        {
+          "phone": 8,
+          "at": "2026-10-09T09:12:11.900Z",
+          "value": "A new theme"
+        },
+        {
+          "phone": 9,
+          "at": "2026-10-09T09:12:13.600Z",
+          "value": "Polls from phones"
+        },
+        {
+          "phone": 10,
+          "at": "2026-10-09T09:12:15.300Z",
+          "value": "Drawing on slides"
+        },
+        {
+          "phone": 11,
+          "at": "2026-10-09T09:12:17.000Z",
+          "value": "A new theme"
+        },
+        {
+          "phone": 12,
+          "at": "2026-10-09T09:12:18.700Z",
+          "value": "Polls from phones"
+        },
+        {
+          "phone": 13,
+          "at": "2026-10-09T09:12:20.400Z",
+          "value": "Drawing on slides"
+        },
+        {
+          "phone": 14,
+          "at": "2026-10-09T09:12:22.100Z",
+          "value": "Citations"
+        },
+        {
+          "phone": 15,
+          "at": "2026-10-09T09:12:23.800Z",
+          "value": "Polls from phones"
+        },
+        {
+          "phone": 16,
+          "at": "2026-10-09T09:12:25.500Z",
+          "value": "Drawing on slides"
+        },
+        {
+          "phone": 17,
+          "at": "2026-10-09T09:12:27.200Z",
+          "value": "Citations"
+        },
+        {
+          "phone": 18,
+          "at": "2026-10-09T09:12:28.900Z",
+          "value": "Drawing on slides"
+        },
+        {
+          "phone": 19,
+          "at": "2026-10-09T09:12:30.600Z",
+          "value": "A new theme"
+        },
+        {
+          "phone": 20,
+          "at": "2026-10-09T09:12:32.300Z",
+          "value": "Polls from phones"
+        },
+        {
+          "phone": 21,
+          "at": "2026-10-09T09:12:34.000Z",
+          "value": "Drawing on slides"
+        },
+        {
+          "phone": 22,
+          "at": "2026-10-09T09:12:35.700Z",
+          "value": "A new theme"
+        },
+        {
+          "phone": 23,
+          "at": "2026-10-09T09:12:37.400Z",
+          "value": "Polls from phones"
+        },
+        {
+          "phone": 24,
+          "at": "2026-10-09T09:12:39.100Z",
+          "value": "Drawing on slides"
+        },
+        {
+          "phone": 25,
+          "at": "2026-10-09T09:12:40.800Z",
+          "value": "A new theme"
+        },
+        {
+          "phone": 26,
+          "at": "2026-10-09T09:12:42.500Z",
+          "value": "Polls from phones"
+        },
+        {
+          "phone": 27,
+          "at": "2026-10-09T09:12:44.200Z",
+          "value": "Drawing on slides"
+        },
+        {
+          "phone": 28,
+          "at": "2026-10-09T09:12:45.900Z",
+          "value": "Citations"
+        },
+        {
+          "phone": 29,
+          "at": "2026-10-09T09:12:47.600Z",
+          "value": "Polls from phones"
+        },
+        {
+          "phone": 30,
+          "at": "2026-10-09T09:12:49.300Z",
+          "value": "Drawing on slides"
+        },
+        {
+          "phone": 31,
+          "at": "2026-10-09T09:12:51.000Z",
+          "value": "Citations"
+        },
+        {
+          "phone": 32,
+          "at": "2026-10-09T09:12:52.700Z",
+          "value": "Polls from phones"
+        }
+      ]
+    }
+  }
+}

package/docs/site/examples/mdeck.svg

@@ -0,0 +1,66 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="960" height="800" viewBox="0 0 960 800">
+  <!-- A Markdown file becoming a stack of slides. The colours come from the
+       deck's palette (var(--accent) …), so the picture follows the theme;
+       the fallbacks apply where it is shown as a plain image. -->
+  <style>
+    .mdk-paper { fill: var(--surface, #eef1fb); stroke: var(--rule, #d5dbf0); stroke-width: 3; }
+    .mdk-fold { fill: var(--rule, #d5dbf0); }
+    .mdk-shadow { fill: var(--ink, #0c1033); opacity: .12; }
+    .mdk-code { font-family: ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace; font-size: 30px; fill: var(--ink-soft, #2a2f55); }
+    .mdk-mark { fill: var(--accent, #1f3fd1); font-weight: 700; }
+    .mdk-quiet { fill: var(--muted, #5b6080); }
+    .mdk-slide { fill: var(--bg, #ffffff); stroke: var(--ink, #0c1033); stroke-width: 3; }
+    .mdk-accent { fill: var(--accent, #1f3fd1); }
+    .mdk-accent-2 { fill: var(--accent-2, #e8590c); }
+    .mdk-rule { fill: var(--rule, #d5dbf0); }
+    .mdk-on-accent { fill: var(--on-accent, #ffffff); font-family: var(--font-display, sans-serif); font-weight: 800; font-size: 96px; }
+    .mdk-title { fill: var(--ink, #0c1033); font-family: var(--font-display, sans-serif); font-weight: 800; font-size: 46px; }
+    .mdk-arrow { fill: none; stroke: var(--accent-2, #e8590c); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
+  </style>
+
+  <!-- The text file -->
+  <g transform="rotate(-5 230 400)">
+    <rect class="mdk-shadow" x="56" y="146" width="370" height="510" rx="18"/>
+    <path class="mdk-paper" d="M58 130 h290 l62 62 v438 a18 18 0 0 1 -18 18 h-316 a18 18 0 0 1 -18 -18 v-482 a18 18 0 0 1 18 -18 z"/>
+    <path class="mdk-fold" d="M348 130 v44 a18 18 0 0 0 18 18 h44 z"/>
+    <text class="mdk-code" x="84" y="232"><tspan class="mdk-mark">#</tspan> A talk</text>
+    <text class="mdk-code" x="84" y="300"><tspan class="mdk-mark">-</tspan> one idea</text>
+    <text class="mdk-code" x="84" y="344"><tspan class="mdk-mark">-</tspan> an example</text>
+    <text class="mdk-code mdk-mark" x="84" y="412">---</text>
+    <text class="mdk-code mdk-quiet" x="84" y="480">:::notes</text>
+    <text class="mdk-code mdk-quiet" x="84" y="524">pause here</text>
+    <text class="mdk-code mdk-quiet" x="84" y="568">:::</text>
+  </g>
+
+  <!-- From text to slides -->
+  <path class="mdk-arrow" d="M300 112 C 380 20, 560 22, 640 150" stroke-dasharray="2 16"/>
+  <path class="mdk-arrow" d="M612 138 l30 16 l4 -34"/>
+  <path class="mdk-accent" d="M470 60 l7 17 l17 7 l-17 7 l-7 17 l-7 -17 l-17 -7 l17 -7 z"/>
+  <path class="mdk-accent-2" d="M760 210 l5 12 l12 5 l-12 5 l-5 12 l-5 -12 l-12 -5 l12 -5 z"/>
+
+  <!-- The slides: a chapter, a statement, and a content slide in front -->
+  <g transform="rotate(9 680 330)">
+    <rect class="mdk-accent-2" x="440" y="200" width="480" height="270" rx="14"/>
+  </g>
+  <g transform="rotate(3 660 420)">
+    <rect class="mdk-accent" x="420" y="290" width="480" height="270" rx="14"/>
+    <text class="mdk-on-accent" x="452" y="386">2</text>
+    <rect class="mdk-accent-2" x="512" y="350" width="80" height="10" rx="5"/>
+  </g>
+  <g transform="rotate(-3 640 540)">
+    <rect class="mdk-shadow" x="412" y="420" width="480" height="270" rx="14"/>
+    <rect class="mdk-slide" x="400" y="404" width="480" height="270" rx="14"/>
+    <text class="mdk-title" x="432" y="470">A talk</text>
+    <rect class="mdk-accent" x="432" y="486" width="88" height="8" rx="4"/>
+    <rect class="mdk-accent" x="432" y="524" width="14" height="14" rx="3"/>
+    <rect class="mdk-rule" x="458" y="525" width="150" height="12" rx="6"/>
+    <rect class="mdk-accent" x="432" y="562" width="14" height="14" rx="3"/>
+    <rect class="mdk-rule" x="458" y="563" width="120" height="12" rx="6"/>
+    <rect class="mdk-accent" x="432" y="600" width="14" height="14" rx="3"/>
+    <rect class="mdk-rule" x="458" y="601" width="136" height="12" rx="6"/>
+    <rect class="mdk-accent-2" x="682" y="580" width="34" height="62" rx="4"/>
+    <rect class="mdk-accent" x="726" y="530" width="34" height="112" rx="4"/>
+    <rect class="mdk-accent-2" x="770" y="556" width="34" height="86" rx="4"/>
+    <rect class="mdk-accent" x="814" y="500" width="34" height="142" rx="4"/>
+  </g>
+</svg>

package/docs/site/examples/references.bib

@@ -0,0 +1,23 @@
+@misc{gruber2004,
+  author = {Gruber, John},
+  title = {Markdown},
+  howpublished = {Daring Fireball},
+  year = {2004},
+  url = {https://daringfireball.net/projects/markdown/}
+}
+@article{knuth1984,
+  author = {Knuth, Donald E.},
+  title = {Literate Programming},
+  journal = {The Computer Journal},
+  volume = {27},
+  number = {2},
+  pages = {97--111},
+  year = {1984},
+  doi = {10.1093/comjnl/27.2.97}
+}
+@misc{pandoc,
+  author = {MacFarlane, John},
+  title = {Pandoc: A Universal Document Converter},
+  year = {2006},
+  url = {https://pandoc.org/}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdeck",
-  "version": "3.6.0",
+  "version": "3.6.2",
   "type": "module",
   "description": "Write slides as a plain text file, present them in the browser, share them as one HTML file or PDF.",
   "license": "MIT",
@@ -54,7 +54,8 @@
     "playground": "vite --config playground/vite.config.js",
     "playground:build": "vite build --config playground/vite.config.js",
     "readme-images": "node tools/readme-images.mjs",
-    "theme-images": "node tools/theme-images.mjs"
+    "theme-images": "node tools/theme-images.mjs",
+    "feature-images": "node tools/feature-images.mjs"
   },
   "dependencies": {
     "@citation-js/core": "^0.9.0",

package/skills/write-slides/SKILL.md

@@ -136,7 +136,7 @@ mdeck check <deck>.md --render
 
 Fix anything it reports. `--render` builds the deck and shows every slide in Chrome with all steps revealed; it names each slide whose content does not fit, whose text is cut off at the edge or hard to read, with the line the slide starts on. Shorten or split those slides, or pick another layout, and check again. If Chrome is missing, run the check without `--render` and tell the user.
 
-To see slides yourself, if you can read pictures, run `mdeck snapshot <deck>.md --slide 3,5-7`: it saves PNG files to `.mdeck-snapshots/` beside the deck and prints their paths (`--dark` shows the dark appearance). Look at slides you were unsure about, such as diagrams, pictures and columns. When you worked from source material, list what you left out or moved to notes, and anything you added that is not in the material. Finish by telling the user the two commands they will want next: `mdeck run <deck>.md` for the launch page (preview, presenting, editor, builds and checks), and `mdeck send <deck>.md` for a file to send around (a reader view with a PDF; notes are removed unless `--notes` is added).
+To see slides yourself, if you can read pictures, run `mdeck snapshot <deck>.md --sheet`: it saves one picture of every slide in a grid, each under its number and heading, to `.mdeck-snapshots/` beside the deck and prints its path. For a closer look, `mdeck snapshot <deck>.md --slide 3,5-7` saves those slides as separate PNG files (`--dark` shows the dark appearance; `--sheet` works with `--slide` too). Look at slides you were unsure about, such as diagrams, pictures and columns. When you worked from source material, list what you left out or moved to notes, and anything you added that is not in the material. Finish by telling the user the two commands they will want next: `mdeck run <deck>.md` for the launch page (preview, presenting, editor, builds and checks), and `mdeck send <deck>.md` for a file to send around (a reader view with a PDF; notes are removed unless `--notes` is added).
 
 ## 5. A new look: themes and palettes
 

package/src/build/chrome.js

@@ -32,6 +32,32 @@ export function serveDirectory(root) {
   })
 }
 
+// Runs in a deck page once it is up: the theme's fonts, loaded before any
+// picture or measurement. document.fonts.status is already 'loaded' before
+// a font stylesheet arrives (nothing is pending yet), and a face is only
+// fetched once text uses it, so a slide could be captured, or measured, in
+// its fallback font. This waits for every stylesheet to load or fail, then
+// asks for each face that text on any slide (hidden ones too) uses, and
+// waits for them and two frames. A font that cannot be fetched (offline)
+// does not hold it up for longer than `limit` milliseconds.
+export const FONTS_READY = `(async (limit = 8000) => {
+  const timeout = new Promise(done => setTimeout(done, limit))
+  // A stylesheet that already failed has no sheet and fires nothing more; its
+  // request is finished all the same.
+  const sheets = [...document.querySelectorAll('link[rel="stylesheet"]')].filter(link => !link.sheet && !performance.getEntriesByName(link.href).length)
+    .map(link => new Promise(done => { link.addEventListener('load', done, { once: true }); link.addEventListener('error', done, { once: true }) }))
+  await Promise.race([Promise.all(sheets), timeout])
+  const faces = new Set()
+  for (const element of document.querySelectorAll('deck-stage *')) {
+    if (![...element.childNodes].some(node => node.nodeType === 3 && node.textContent.trim())) continue
+    const style = getComputedStyle(element)
+    faces.add(style.fontStyle + ' ' + style.fontWeight + ' 32px ' + style.fontFamily)
+  }
+  await Promise.race([Promise.all([...faces].map(face => document.fonts.load(face).catch(() => null))).then(() => document.fonts.ready), timeout])
+  await new Promise(done => requestAnimationFrame(() => requestAnimationFrame(done)))
+  return true
+})()`
+
 // Starts Chrome and a static server for `dir`. `open(path)` returns a page
 // with evaluate(), send() and waitFor(); call close() when done.
 export async function launchChrome({ dir, chrome = findChrome(), timeout = 90000 } = {}) {
@@ -110,8 +136,13 @@ export async function launchChrome({ dir, chrome = findChrome(), timeout = 90000
           }
           return false
         },
-        // Waits until the deck stage exists, fonts are loaded and images decoded.
-        waitForDeck: () => page.waitFor("document.querySelector('deck-stage')?.length > 0 && document.fonts.status === 'loaded' && [...document.images].every(image => image.complete)"),
+        // Waits until the deck stage exists, images are decoded and the
+        // theme's fonts are loaded (FONTS_READY).
+        async waitForDeck() {
+          const ready = await page.waitFor("document.querySelector('deck-stage')?.length > 0 && document.fonts.status === 'loaded' && [...document.images].every(image => image.complete)")
+          if (ready) await page.evaluate(FONTS_READY)
+          return ready
+        },
         async screenshot({ width = 1600, height = 900, scale = 1, format = 'png' } = {}) {
           await send('Emulation.setDeviceMetricsOverride', { width, height, deviceScaleFactor: scale, mobile: false }, sessionId)
           await delay(150)

package/src/build/renderCheck.js

@@ -79,20 +79,51 @@ export function renderCheck(slidesPath) {
 }
 
 // Pictures of slides (numbers from 1; all when none are given) as PNG files
-// in `outDir`, named <deck>-<number>.png. Returns the files written.
-export async function snapshot(slidesPath, { slides = [], outDir, width = 1280, height = 720, appearance = '' } = {}) {
+// in `outDir`, named <deck>-<number>.png. With `sheet`, one picture instead,
+// <deck>-sheet.png: the slides in a grid, each under its number and heading,
+// so a person or an assistant sees the whole deck at once. Returns the files
+// written.
+export async function snapshot(slidesPath, { slides = [], outDir, width = 1280, height = 720, appearance = '', sheet = false } = {}) {
   const name = basename(slidesPath).replace(/\.md$/i, '')
+  const labels = sheet ? slideLabels(readFileSync(slidesPath, 'utf8')) : []
   mkdirSync(outDir, { recursive: true })
   return withDeckPage(slidesPath, { appearance, width, height }, async ({ page, count, show }) => {
     const wanted = slides.length ? slides : Array.from({ length: count }, (_, i) => i + 1)
-    const files = []
+    const files = [], shots = []
     for (const number of wanted) {
       if (number < 1 || number > count) throw new Error(`There is no slide ${number}; the deck has ${count}`)
       await show(number - 1)
+      const picture = await page.screenshot({ width, height })
+      if (sheet) { shots.push({ number, heading: labels[number - 1]?.heading ?? '', picture }); continue }
       const file = resolve(outDir, `${name}-${String(number).padStart(2, '0')}.png`)
-      writeFileSync(file, await page.screenshot({ width, height }))
+      writeFileSync(file, picture)
       files.push(file)
     }
-    return files
+    if (!sheet) return files
+    const file = resolve(outDir, `${name}-sheet.png`)
+    writeFileSync(file, await contactSheet(page, shots))
+    return [file]
   })
 }
+
+// The slides' pictures in a grid on a dark page, each at half size under its
+// number and heading; drawn by the page that took them, as its last task.
+const CELL = { width: 640, height: 360, label: 30, gap: 24 }
+async function contactSheet(page, shots) {
+  const columns = shots.length <= 1 ? 1 : shots.length <= 4 ? 2 : shots.length <= 9 ? 3 : 4
+  const rows = Math.ceil(shots.length / columns)
+  const width = columns * CELL.width + (columns + 1) * CELL.gap
+  const height = rows * (CELL.height + CELL.label) + (rows + 1) * CELL.gap
+  const escape = text => String(text).replace(/[&<>"]/g, ch => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' })[ch])
+  const cells = shots.map(({ number, heading, picture }) => `<figure><figcaption><b>${String(number).padStart(2, '0')}</b> ${escape(heading)}</figcaption><img src="data:image/png;base64,${picture.toString('base64')}"></figure>`).join('')
+  const html = `<!doctype html><meta charset="utf-8"><style>
+    html, body { margin: 0; background: #1c1c1c; }
+    main { display: grid; grid-template-columns: repeat(${columns}, ${CELL.width}px); gap: ${CELL.gap}px; padding: ${CELL.gap}px; }
+    figure { margin: 0; }
+    figcaption { height: ${CELL.label}px; font: 15px/1.2 system-ui, sans-serif; color: #c8c8c8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    figcaption b { color: #fff; margin-right: 6px; font-variant-numeric: tabular-nums; }
+    img { display: block; width: ${CELL.width}px; height: ${CELL.height}px; outline: 1px solid #3a3a3a; }
+  </style><main>${cells}</main>`
+  await page.evaluate(`document.open(); document.write(${JSON.stringify(html)}); document.close(); Promise.all([...document.images].map(image => image.decode())).then(() => true)`)
+  return page.screenshot({ width, height })
+}

package/src/cli/args.js

@@ -14,7 +14,7 @@ const commands = {
   pdf: { ...output, '--no-polls': flag, max: 1 },
   preview: { ...common, max: 1 },
   check: { '--strict': flag, '--render': flag, max: 1 },
-  snapshot: { '--output': value, '-o': '--output', '--slide': value, '--dark': flag, '--light': flag, max: 1 },
+  snapshot: { '--output': value, '-o': '--output', '--slide': value, '--dark': flag, '--light': flag, '--sheet': flag, max: 1 },
   list: { '--json': flag, max: 2 },
   starter: { max: 2 },
   docs: { ...common, '--build': flag, max: 1 },

package/src/cli/index.js

@@ -343,6 +343,7 @@ const HELP = `
                              does not fit, text cut off or hard to read, errors on the page
     ${c.green}mdeck snapshot${c.reset} [slides.md]                Pictures of slides as PNG files (default: .mdeck-snapshots/)
       --slide <numbers>      only these slides: 3, 3,5 or 2-4
+      --sheet                one picture of them all in a grid, each under its number and heading
       --dark | --light       in this appearance instead of the deck's own   -o <folder>
     ${c.green}mdeck results${c.reset} [slides.md] [-o answers.csv]  The answers kept in the talk, as CSV (room, phone, time, answer)
     ${c.green}mdeck list${c.reset} [layouts|themes|palettes] [slides.md] [--json]
@@ -503,7 +504,7 @@ if (command === 'new') {
     const outDir = resolve(outputOption() ?? resolve(dirname(resolve(input)), '.mdeck-snapshots'))
     const appearance = hasFlag('--dark') ? 'dark' : hasFlag('--light') ? 'light' : ''
     const { snapshot } = await import('../build/renderCheck.js')
-    for (const file of await snapshot(input, { slides, outDir, appearance })) console.log(relative(process.cwd(), file))
+    for (const file of await snapshot(input, { slides, outDir, appearance, sheet: hasFlag('--sheet') })) console.log(relative(process.cwd(), file))
   } catch (error) { err(error.message); process.exitCode = 1 }
 
 } else if (command === 'list') {

package/src/core/labels.js

@@ -13,6 +13,9 @@ export const LABELS = {
     'reader.appearance': 'Light or dark',
     'reader.light': 'Light',
     'reader.dark': 'Dark',
+    'reader.drawings': 'Drawings',
+    'reader.hideDrawings': 'Hide the drawings',
+    'reader.showDrawings': 'Show the drawings',
     'reader.downloadPdf': 'Download PDF',
     'reader.savePdf': 'Save as PDF…',
     'reader.savePdfHint': "Opens the browser's print dialog; choose Save as PDF",
@@ -82,6 +85,9 @@ export const LABELS = {
     'reader.appearance': 'Hell oder dunkel',
     'reader.light': 'Hell',
     'reader.dark': 'Dunkel',
+    'reader.drawings': 'Zeichnungen',
+    'reader.hideDrawings': 'Zeichnungen ausblenden',
+    'reader.showDrawings': 'Zeichnungen einblenden',
     'reader.downloadPdf': 'PDF herunterladen',
     'reader.savePdf': 'Als PDF sichern…',
     'reader.savePdfHint': 'Öffnet den Druckdialog des Browsers; dort „Als PDF sichern“ wählen',

package/src/runtime/ReaderView.jsx

@@ -10,23 +10,25 @@ import './reader.css'
 import { t, stageLabels } from '../core/labels.js'
 import { followActiveRooms } from '../live/follow.js'
 import { Icon } from '../components/Icon.jsx'
+import { currentInk, onInkChange } from './ink/store.js'
 
 // The reader view for decks sent around by email: outline, the slides at a
-// comfortable size or stacked for reading, light or dark, PDF and a way back
-// into the full-screen deck. The theme and palette stay the sender's: a sent
+// comfortable size or stacked for reading, light or dark, the drawings shown
+// or hidden, PDF and a way back into the full-screen deck. The theme and palette stay the sender's: a sent
 // file carries only those, with their fonts.
 
 const lookKey = deckConfig => `mdeck-reader-look:${deckConfig.meta?.title ?? location.pathname}`
 
-// The reader's choice of light or dark, '' for the deck's own.
-function restoreAppearance(deckConfig) {
-  try {
-    const stored = JSON.parse(localStorage.getItem(lookKey(deckConfig)) ?? 'null')
-    if (['light', 'dark'].includes(stored?.appearance)) return stored.appearance
-  } catch {}
-  return ''
+// The reader's choices: light or dark ('' for the deck's own), and whether
+// the drawings show.
+function restoreLook(deckConfig) {
+  let stored = null
+  try { stored = JSON.parse(localStorage.getItem(lookKey(deckConfig)) ?? 'null') } catch {}
+  return { appearance: ['light', 'dark'].includes(stored?.appearance) ? stored.appearance : '', drawings: stored?.drawings !== false }
 }
 
+const hasInk = () => Object.values(currentInk()?.slides ?? {}).some(strokes => strokes?.length)
+
 // Every button carries an icon so the bar reads at a glance.
 const ReaderIcon = ({ name }) => <Icon name={name} class="reader-icon" />
 
@@ -57,7 +59,10 @@ function ReadPage({ slide, index, total, deckConfig, width, height, scale, showN
 export function ReaderView({ deck, deckConfig }) {
   const { slides } = deck
   const width = deckConfig.width ?? 1920, height = deckConfig.height ?? 1080
-  const [appearance, setAppearance] = useState(() => restoreAppearance(deckConfig))
+  const [appearance, setAppearance] = useState(() => restoreLook(deckConfig).appearance)
+  // Drawings come with the file; a reader may hide them, also for printing.
+  const [drawings, setDrawings] = useState(() => restoreLook(deckConfig).drawings)
+  const [inked, setInked] = useState(hasInk)
   const [mode, setMode] = useState('slides')
   const [index, setIndex] = useState(() => initialIndex(slides))
   const [navOpen, setNavOpen] = useState(false)
@@ -75,8 +80,11 @@ export function ReaderView({ deck, deckConfig }) {
 
   useEffect(() => {
     loadTheme({ ...deckConfig, appearance: shown }).catch(error => console.warn(error.message))
-    try { localStorage.setItem(lookKey(deckConfig), JSON.stringify({ appearance })) } catch {}
   }, [appearance])
+  useEffect(() => {
+    try { localStorage.setItem(lookKey(deckConfig), JSON.stringify({ appearance, drawings })) } catch {}
+  }, [appearance, drawings])
+  useEffect(() => onInkChange(() => setInked(hasInk())), [])
 
   useEffect(() => {
     const stage = stageRef.current
@@ -145,7 +153,7 @@ export function ReaderView({ deck, deckConfig }) {
   const metaLine = [meta.author, meta.organization, meta.date].filter(Boolean).join(' · ')
   const other = shown === 'dark' ? 'light' : 'dark'
 
-  return <div class="reader-view">
+  return <div class={`reader-view${drawings ? '' : ' is-ink-hidden'}`}>
     <header class="reader-top">
       <button class="reader-btn reader-nav-toggle" onClick={() => setNavOpen(open => !open)} aria-label={t('reader.outline')}><ReaderIcon name="menu" /></button>
       <h1>{meta.title ?? t('reader.untitled')}</h1>
@@ -155,6 +163,7 @@ export function ReaderView({ deck, deckConfig }) {
       <button class={`reader-btn${mode === 'slides' ? ' is-active' : ''}`} onClick={() => switchMode('slides')}><ReaderIcon name="slides" />{t('reader.slides')}</button>
       <button class={`reader-btn${mode === 'read' ? ' is-active' : ''}`} onClick={() => switchMode('read')}><ReaderIcon name="read" />{t('reader.read')}</button>
       {toggleAllowed && <button class="reader-btn" onClick={() => setAppearance(other === ownAppearance ? '' : other)} title={t('reader.appearance')}><ReaderIcon name={other === 'dark' ? 'moon' : 'sun'} />{t(other === 'dark' ? 'reader.dark' : 'reader.light')}</button>}
+      {inked && <button class="reader-btn" onClick={() => setDrawings(on => !on)} aria-pressed={drawings} title={t(drawings ? 'reader.hideDrawings' : 'reader.showDrawings')}><ReaderIcon name={drawings ? 'eye' : 'eye-off'} />{t('reader.drawings')}</button>}
       {pdf
         ? <a class="reader-btn" href={pdf} download={`${(meta.title ?? 'slides').replace(/[^\w.-]+/g, '-')}.pdf`}><ReaderIcon name="download" />{t('reader.downloadPdf')}</a>
         : <button class="reader-btn" onClick={savePdf} title={t('reader.savePdfHint')}><ReaderIcon name="download" />{t('reader.savePdf')}</button>}

package/src/runtime/deck-stage.js

@@ -89,7 +89,11 @@ import { inkPaint, snapAngle } from '../core/ink.js'
   // Zoom: up to this many times the fitted size.
   const ZOOM_MAX = 6;
   const VALIDATE_ATTR = 'no_overflowing_text,no_overlapping_text,slide_sized_text';
+  // An embedded deck (the presenter view's frames, a preview) hides its
+  // controls, unless the page embedding it asks for them with ?controls=1, as
+  // the docs' example deck does.
   const isEmbedded = new URLSearchParams(location.search).has('embedded');
+  const hideControls = isEmbedded && !new URLSearchParams(location.search).has('controls');
 
   const pad2 = (n) => String(n).padStart(2, '0');
 
@@ -742,7 +746,7 @@ import { inkPaint, snapAngle } from '../core/ink.js'
     }
 
     _flashOverlay() {
-      if (!this._overlay || isEmbedded) return;
+      if (!this._overlay || hideControls) return;
       this._overlay.setAttribute('data-visible', '');
       if (this._hideTimer) clearTimeout(this._hideTimer);
       this._hideTimer = setTimeout(() => {

package/src/runtime/reader.css

@@ -57,3 +57,5 @@
 .reader-entry { position: fixed; left: 14px; bottom: 14px; z-index: 50; padding: 6px 10px; border-radius: 6px; background: rgba(20,20,20,0.7); color: #fff; font: 13px system-ui, sans-serif; text-decoration: none; opacity: 0.25; transition: opacity 200ms; }
 .reader-entry:hover { opacity: 1; }
 @media print { .reader-entry { display: none !important; } }
+/* The reader hid the drawings: on the slides, in Read and in print. */
+.reader-view.is-ink-hidden .slide-ink { display: none; }