mdeck 3.9.0 → 3.10.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 3.10.1 — 2026-10-11
+
+- Theme settings can be text: `type = "text"` for words a theme shows, such as Terminal's prompt. Authors write them as they should appear (`prompt: "~/demo $ "`), spaces included, and mdeck quotes them for the stylesheet; the editor shows a text box with the theme's own words. Before, such words could only be fixed in the theme.
+
+## 3.10.0 — 2026-10-11
+
+- Glass has a `motion` setting: `motion: 0` holds its light still, for recordings and calm rooms. The guide for theme authors names the settings themes share: `motion` for what moves while presenting and `texture` for grain, paper and scanlines.
+
 ## 3.9.0 — 2026-10-11
 
 - Theme parameters say what kind of value they take: `type = "size"` (pixels, with `min`, `max` and `step`), `"number"`, `"switch"` (1 or 0), `"choice"` (one of `choices`) or `"font"`. The deck settings show a slider, a box to tick or a list instead of a text box; a deck value that does not fit is left out, so the theme's own value stays, and `mdeck check` says why; a value outside the range is used, with a warning. `mdeck list themes` shows each theme's settings and what they take, and the design page lets a theme's author set the kind. `mdeck themes build` writes each theme's settings into the gallery's `looks.json`. A parameter without a type takes any text, as before. The built-in themes give every parameter a type and a description with its default and range. A theme that uses `type` needs this version of mdeck.

package/assets/extensions/themes/glass/extension.toml

@@ -3,7 +3,7 @@ kind = "theme"
 id = "glass"
 title = "Glass"
 description = "Liquid glass: soft pools of light behind every slide, content without frames, titles on a frosted pane with a bright rim; capsule labels, glass beads for list markers and a glass lens for chapter numbers; Geist throughout, dark by default."
-version = "0.2.0"
+version = "0.3.0"
 author = "Tilman Schieber"
 license = "MIT"
 # The palette this theme uses unless the deck sets one; colours come only from palettes.
@@ -40,6 +40,8 @@ styles = "styles.css"
 # The glass: how round the panes are and how much they blur what is behind them.
 "--glass-radius" = "44px"
 "--glass-blur" = "28px"
+# Whether the light drifts (1) or holds still (0).
+"--motion" = "1"
 
 # Type families
 "--font-display" = "\"Geist\", \"Inter\", \"Helvetica Neue\", Arial, sans-serif"
@@ -64,6 +66,12 @@ min = 0
 max = 48
 description = "28px by default, from 0px (clear glass) to about 48px."
 
+[params.motion]
+token = "--motion"
+title = "Motion"
+type = "switch"
+description = "1 (the default) lets the pools of light drift while presenting; 0 keeps them still, for recordings or a calm room. Print and reduced motion are always still."
+
 # What this theme is for and how to write for it: shown in listings, and read
 # by assistants that write slides as the theme author's advice.
 [guide]

package/assets/extensions/themes/glass/styles.css

@@ -53,9 +53,9 @@
      to tint. Radial gradients only (no blur filter): they stay vector in a
      PDF and are cheap to draw. */
   background:
-    radial-gradient(circle max(var(--a-r) * 2.8, 720px) at calc(var(--a-x) + var(--dx)) calc(var(--a-y) + var(--dy)), var(--wash-a) 0%, color-mix(in oklab, var(--wash-a) 55%, transparent) 40%, transparent 100%),
-    radial-gradient(circle max(var(--b-r) * 2.8, 640px) at calc(var(--b-x) - var(--dx)) calc(var(--b-y) - var(--dy)), var(--wash-b) 0%, color-mix(in oklab, var(--wash-b) 55%, transparent) 40%, transparent 100%),
-    radial-gradient(circle max(var(--c-r) * 2.6, 520px) at calc(var(--c-x) + var(--dy)) calc(var(--c-y) + var(--dx)), var(--wash-c) 0%, transparent 100%),
+    radial-gradient(circle max(var(--a-r) * 2.8, 720px) at calc(var(--a-x) + var(--dx) * var(--motion)) calc(var(--a-y) + var(--dy) * var(--motion)), var(--wash-a) 0%, color-mix(in oklab, var(--wash-a) 55%, transparent) 40%, transparent 100%),
+    radial-gradient(circle max(var(--b-r) * 2.8, 640px) at calc(var(--b-x) - var(--dx) * var(--motion)) calc(var(--b-y) - var(--dy) * var(--motion)), var(--wash-b) 0%, color-mix(in oklab, var(--wash-b) 55%, transparent) 40%, transparent 100%),
+    radial-gradient(circle max(var(--c-r) * 2.6, 520px) at calc(var(--c-x) + var(--dy) * var(--motion)) calc(var(--c-y) + var(--dx) * var(--motion)), var(--wash-c) 0%, transparent 100%),
     var(--canvas);
 }
 
@@ -526,7 +526,7 @@ strong { font-weight: 650; color: var(--ink); }
 }
 
 /* The light drifts slowly while presenting; never in print or for people
-   who prefer less motion. */
+   who prefer less motion. motion: 0 holds it still. */
 @media (prefers-reduced-motion: no-preference) {
   .slide:is(.slide--title, .slide--chapter, .slide--focus) { animation: glass-drift 22s ease-in-out infinite alternate; }
 }

package/docs/reference/authoring.md

@@ -82,7 +82,10 @@ params:
 
 Available params depend on the theme; `mdeck list themes` shows them with the
 kind of value each takes: a size in pixels, a number, a switch (`1` or `0`), a
-choice or a font. `0` or `0px` turns a feature off. A value that does not fit
+choice, a font or a text, written as it should appear (`prompt: "~/demo $ "`). `0` or `0px` turns a feature off.
+A font named this way is not downloaded: it has to be installed on the
+computer that shows the slides, or the browser uses the next font in the
+list; PDFs and single files embed only the theme's own fonts. A value that does not fit
 is left out, and `mdeck check` says why. Colours are not params: they come from
 the palette.
 

package/docs/reference/extensions.md

@@ -201,7 +201,7 @@ Keep headings to a few words; three or four points make a good slide.
   `:root` block from them, so the stylesheet only contains rules.
 - `params` name the settings authors may change under `params:` in the deck.
   Each points at a token; its default is the token's value, so nothing is
-  written twice. `type` (`size`, `number`, `switch`, `choice` or `font`) says
+  written twice. `type` (`size`, `number`, `switch`, `choice`, `font` or `text`) says
   what kind of value it takes; `min`, `max` and `step` go with a size (in
   pixels) or a number, `choices` with a choice. The token's value must be of
   that type. The editor shows a slider, a box to tick or a list for it, and

package/docs/reference/themes.md

@@ -79,7 +79,8 @@ params:
 
 A parameter's default is its token's value. `type` says what kind of value it
 takes: `size` (pixels, with `min`, `max` and `step`), `number` (with the same
-three), `switch` (1 or 0), `choice` (one of `choices`) or `font`. A deck value
+three), `switch` (1 or 0), `choice` (one of `choices`), `font` or `text` (words to show,
+which mdeck quotes; the token's value is a quoted CSS string). A deck value
 that does not fit is left out, and `mdeck check` reports it, like unknown
 parameter names; one outside `min` and `max` is used, with a warning. Without
 a `type`, a parameter takes any text.

package/docs/site/content/theme-authoring.md

@@ -138,7 +138,7 @@ params:
   fontBody: "Georgia, serif"
 ```
 
-Its default is simply the token's value. Colours are not parameters: they come from the palette.
+Its default is simply the token's value. Colours are not parameters: they come from the palette. A font a deck names this way is not downloaded: it has to be installed on the computer that shows the slides, or the browser uses the next font in the list; PDFs and single files embed only the theme's own fonts.
 
 Say what kind of value a parameter takes with `type`, so mdeck can check what authors write and the editor can offer the right control:
 
@@ -159,14 +159,17 @@ description = "12px by default, from about 6px to 20px; 0px leaves headings with
 | `switch` | `1` or `0` (also `true`/`false`, `on`/`off`) | a box to tick | |
 | `choice` | one of its `choices` | a list | `choices = ["left", "right"]` |
 | `font` | a CSS font list | a text box | |
+| `text` | words to show, such as a prompt; the author writes them plain and mdeck quotes them | a text box | |
 
-The token's value must be a value of that type: a `size` is written `"12px"`, a `switch` `"1"`. A value in the deck that does not fit is left out, and the theme's own value stays; `mdeck check` says why. A value outside `min` and `max` is used, with a warning: the range is what the theme was made for. A parameter without a `type` takes any text, as before.
+The token's value must be a value of that type: a `size` is written `"12px"`, a `switch` `"1"`, a `text` as a quoted CSS string, `"'~/talk $ '"`, used as `content: var(--prompt)`. A value in the deck that does not fit is left out, and the theme's own value stays; `mdeck check` says why. A value outside `min` and `max` is used, with a warning: the range is what the theme was made for. A parameter without a `type` takes any text, as before.
 
 A few habits make parameters easy to use:
 
 - Turn a feature off with its parameter at zero (`0px`, `0`) rather than a second parameter.
 - Use a switch or a strength by multiplying with it, as in `calc(330px * var(--shapes))`.
 - Let the `description` give the default and a sensible range: the editor shows it under the control, and assistants read it.
+- Offer what people change from one talk to the next, because of the room, the medium or the content, and leave sizes and distances at the values the theme was made with.
+- Use the shared names where they fit, so people learn them once: `motion` (a switch) turns off everything that moves while presenting, for recordings and calm rooms; `texture` (a switch) turns off grain, paper and scanlines, for washed-out projectors and handouts.
 
 ## Say what it is for
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdeck",
-  "version": "3.9.0",
+  "version": "3.10.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/src/editor/components/DeckSettings.jsx

@@ -10,7 +10,7 @@ import { PalettePicker } from './PalettePicker.jsx'
 import { LookThumbnail } from './LookThumbnail.jsx'
 import { designUrl, DESIGN_TAB } from '../designLink.js'
 import { normalMode } from '../../runtime/hotspots.js'
-import { paramValue } from '../../extensions/params.js'
+import { paramValue, paramDefault } from '../../extensions/params.js'
 
 // What the `show` setting controls: the label for each choice and its values.
 const SHOW = { organization: ['Organization', ['title', 'all', 'none']], author: ['Author and date', ['title', 'all', 'none']], numbers: ['Slide numbers', ['slides', 'all', 'none']], sections: ['Section labels', ['all', 'none']] }
@@ -112,8 +112,8 @@ function DesignLink({ kind, item }) {
 
 // The control for one theme parameter, by its type: a slider for a size or a
 // number with a range, a box to tick for a switch, a list for a choice, else
-// text (with a colour picker when the default is a colour). An empty value
-// means the theme's own.
+// a text box (with a colour picker when the default is a colour). An empty
+// value means the theme's own; a text shows the theme's without its quotes.
 function ParamInput({ def, value, onChange }) {
   const current = value != null && !paramValue(def, value).problem ? paramValue(def, value).value : def.default
   if (def.type === 'switch') return <>
@@ -137,6 +137,6 @@ function ParamInput({ def, value, onChange }) {
   const color = isColor(def.default)
   return <>
     {color ? <input type="color" value={isColor(value) ? value : def.default} onInput={e => onChange(e.currentTarget.value)} style={{ flex: '0 0 auto' }} /> : null}
-    <input type="text" value={value ?? ''} placeholder={def.default} onInput={e => onChange(e.currentTarget.value)} />
+    <input type="text" value={value ?? ''} placeholder={paramDefault(def)} onInput={e => onChange(e.currentTarget.value)} />
   </>
 }

package/src/editor/components/ExtensionForms.jsx

@@ -8,7 +8,7 @@ const isColor = value => /^#[0-9a-f]{3,8}$/i.test(String(value ?? '').trim())
 const update = (list, index, patch) => list.map((item, i) => i === index ? { ...item, ...patch } : item)
 const without = (list, index) => list.filter((_, i) => i !== index)
 // The kinds of value a theme parameter takes (see src/extensions/params.js).
-const PARAM_KINDS = [['', 'text'], ['size', 'size'], ['number', 'number'], ['switch', 'switch'], ['choice', 'choice'], ['font', 'font']]
+const PARAM_KINDS = [['', 'CSS value'], ['size', 'size'], ['number', 'number'], ['switch', 'switch'], ['choice', 'choice'], ['font', 'font'], ['text', 'text']]
 
 function Identity({ model, onChange }) {
   return <>

package/src/extensions/params.js

@@ -7,11 +7,13 @@
 //   switch   1 or 0 (also true and false, on and off, yes and no)
 //   choice   one of `choices`
 //   font     a CSS font list
+//   text     words to show, such as a prompt: the author writes them plain,
+//            mdeck quotes them; the theme's own value is a quoted CSS string
 //
 // The manifest check, `mdeck check`, the slides and the editor all use these
 // functions, so they agree on what a value means.
 
-export const PARAM_TYPES = ['size', 'number', 'switch', 'choice', 'font']
+export const PARAM_TYPES = ['size', 'number', 'switch', 'choice', 'font', 'text']
 export const PARAM_KEYS = ['token', 'title', 'description', 'type', 'min', 'max', 'step', 'choices']
 const RANGED = ['size', 'number']
 const NUMBER_RE = /^-?(\d+\.?\d*|\.\d+)$/
@@ -26,6 +28,25 @@ function pixels(value) {
 
 const unit = param => param.type === 'size' ? 'px' : ''
 
+// A CSS string literal ('…' or "…") and the text in it.
+const STRING_RE = /^(['"])((?:\\[^]|(?!\1)[^\\\n])*)\1$/
+
+/** Text as a CSS string: quoted, with backslashes, quotes and line breaks escaped. */
+export function cssString(text) {
+  return '"' + String(text).replace(/\\/g, '\\\\').replace(/"/g, '\\"').replace(/\r?\n/g, '\\A ') + '"'
+}
+
+/** The text in a CSS string literal, or null when it is not one. */
+export function unquote(css) {
+  const match = STRING_RE.exec(String(css).trim())
+  return match ? match[2].replace(/\\A ?/g, '\n').replace(/\\([^])/g, '$1') : null
+}
+
+/** A parameter's default as an author would write it: a text without its quotes. */
+export function paramDefault(param) {
+  return param.type === 'text' ? unquote(param.default) ?? param.default : param.default
+}
+
 /** The range a parameter was made for, as text ("6px to 20px", "at least 0"), or ''. */
 export function paramRange(param) {
   const { min, max } = param
@@ -54,6 +75,8 @@ export function paramValue(param, raw) {
   const type = param.type
   if (raw == null || (typeof raw === 'object')) return { problem: 'needs a single value' }
   if (!type) return { value: String(raw) }
+  // Text keeps its spaces (a prompt ends in one) and may be empty.
+  if (type === 'text') return { value: cssString(raw) }
   const text = String(raw).trim()
   if (!text) return { problem: 'is empty' }
   if (type === 'font') return { value: text }
@@ -98,6 +121,10 @@ export function paramSettingProblems(param, fallback) {
     else if (new Set(choices).size !== choices.length) problems.push(['choices', 'lists a value twice'])
   } else if (param.choices != null) problems.push(['choices', `is for a choice, not a ${type}`])
   if (problems.length || fallback == null) return problems
+  if (type === 'text') {
+    if (unquote(fallback) == null) problems.push(['type', `a text's token is a quoted CSS string, such as "'~/talk $ '" (got ${JSON.stringify(fallback)})`])
+    return problems
+  }
   // The default is the token's value: it has to be a value of this type too.
   const result = paramValue(param, fallback)
   if (result.problem) problems.push(['type', `the token's value ${JSON.stringify(fallback)} ${result.problem}`])