mdeck 3.6.0 → 3.6.1

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 3.6.1 — 2026-10-09
+
+- `mdeck snapshot --sheet` saves one picture of the slides in a grid, each under its number and heading (`my-talk-sheet.png`): a whole deck at a glance, for you or an assistant. It works with `--slide` and `--dark`.
+- Fixed: pictures and PDFs could show a slide in its fallback font. mdeck now waits for the theme's font stylesheets and for every face the slides use before it takes a picture, renders a PDF or measures a slide, so `mdeck snapshot`, `mdeck pdf`, `mdeck check --render`, the theme check and the theme repository's previews show the theme's own fonts. Without a network it does not wait.
+
 ## 3.6.0 — 2026-10-09
 
 - A theme can say what it is for and how to write for it: a `[guide]` in its `extension.toml` with `suits` and `avoid` (short phrases) and `writing` (a few sentences). `mdeck list` and `mdeck themes search` show what each theme suits, search finds themes by it (`mdeck themes search photo`), and `mdeck list themes --json` and the theme repository's catalogue carry the whole guide. The slide-writing skill chooses a theme by its guide and follows its writing advice, as the theme author's advice and never as instructions. The six built-in themes have guides. A theme with a guide needs this version of mdeck.

package/README.md

@@ -1,5 +1,8 @@
 <p align="center">
-  <img src="assets/logo/logo-light.svg" alt="mdeck" width="280">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="assets/logo/logo-dark.svg">
+    <img src="assets/logo/logo-light.svg" alt="mdeck" width="280">
+  </picture>
 </p>
 
 <p align="center"><b>Hand your slides, papers and notes to an AI assistant. Get a clean deck to present in the browser. Share it as one HTML file or a PDF.</b></p>

package/docs/site/content/commands.md

@@ -141,9 +141,10 @@ The check takes a few seconds and needs Chrome or Chromium; set `MDECK_CHROME` t
 ```sh
 mdeck snapshot my-talk.md
 mdeck snapshot my-talk.md --slide 3,5-7 --dark
+mdeck snapshot my-talk.md --sheet
 ```
 
-This saves each slide, with all steps revealed, as a 1280×720 PNG file in `.mdeck-snapshots/` beside the deck (`-o` for another folder), named `my-talk-03.png` and so on, and prints the paths. `--slide` picks slides by number; `--dark` and `--light` show that appearance instead of the deck's own. An AI assistant that reads pictures can use them to look at what it wrote. If you keep your slides in Git, add `.mdeck-snapshots/` to your `.gitignore`.
+This saves each slide, with all steps revealed, as a 1280×720 PNG file in `.mdeck-snapshots/` beside the deck (`-o` for another folder), named `my-talk-03.png` and so on, and prints the paths. `--slide` picks slides by number; `--dark` and `--light` show that appearance instead of the deck's own. `--sheet` saves one picture instead, `my-talk-sheet.png`: the slides in a grid, each under its number and heading, to see a whole deck at a glance. An AI assistant that reads pictures can use them to look at what it wrote. If you keep your slides in Git, add `.mdeck-snapshots/` to your `.gitignore`.
 
 ## Layouts, themes and palettes
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdeck",
-  "version": "3.6.0",
+  "version": "3.6.1",
   "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",

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') {