mdeck 2.3.0

package/src/editor/designLink.js

@@ -0,0 +1,19 @@
+// The design page, where themes, palettes and layouts are made and changed.
+// Both editor pages open it in the same named tab, so it is never open twice.
+export const DESIGN_URL = '/design.html'
+export const DESIGN_TAB = 'mdeck-design'
+
+// `copy` starts a copy of a built-in extension to change; `open` opens one of
+// the deck's own. Both are `kind:id`.
+export function designUrl({ copy = null, open = null } = {}) {
+  const query = new URLSearchParams()
+  if (copy) query.set('copy', copy)
+  if (open) query.set('open', open)
+  return query.size ? `${DESIGN_URL}?${query}` : DESIGN_URL
+}
+
+// Reads `kind:id` back; null when it is not one.
+export function parseTarget(value) {
+  const match = /^(theme|palette|layout):([a-z][a-z0-9-]*)$/.exec(value ?? '')
+  return match ? { kind: match[1], id: match[2] } : null
+}

package/src/editor/editor.css

@@ -0,0 +1,139 @@
+:root { color-scheme: dark; }
+html, body { margin: 0; height: 100%; background: #111; color: #e6e6e6; font: 13px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
+#editor-root, #design-root { height: 100%; }
+.muted { color: #8e8e8e; }
+button, select, input, textarea { font: inherit; }
+a { color: #8ab4f8; }
+.editor { display: grid; grid-template-rows: 44px 1fr; height: 100vh; }
+.editor-topbar { display: flex; align-items: center; gap: 12px; padding: 0 14px; border-bottom: 1px solid #222; background: #161616; }
+.editor-topbar h1 { font-size: 14px; font-weight: 600; margin: 0; color: #eee; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.editor-topbar .spacer { flex: 1; }
+.editor-topbar .tabs button { padding: 10px 12px; }
+fieldset:disabled input, fieldset:disabled select, fieldset:disabled textarea, fieldset:disabled .btn { opacity: 0.6; cursor: not-allowed; }
+.editor-status { color: #a8a8a8; font-size: 12px; }
+.editor-status.is-error, .editor-status.is-conflict { color: #f28b82; }
+.editor-status.is-saving, .editor-status.is-unsaved { color: #e3c36d; }
+.editor-main { display: grid; grid-template-columns: 240px minmax(0, 1fr) 400px; min-height: 0; }
+.editor-panel { min-height: 0; overflow: hidden auto; border-right: 1px solid #222; position: relative; }
+.resizer { position: sticky; top: 0; float: left; width: 6px; height: 100vh; margin-right: -6px; cursor: col-resize; z-index: 3; }
+.resizer:hover { background: rgba(138, 180, 248, 0.25); }
+.editor-panel:last-child { border-right: 0; }
+.editor-panel-head { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid #222; position: sticky; top: 0; background: #111; z-index: 1; }
+.editor-panel-head span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: #a0a0a0; flex: 1; }
+.btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 5px 10px; border-radius: 5px; border: 1px solid #3a3a3a; background: #222; color: #e0e0e0; cursor: pointer; line-height: 1.4; }
+.btn:hover { color: #fff; border-color: #5a5a5a; }
+.btn:disabled { opacity: 0.4; cursor: default; }
+.btn.is-primary { background: #27436a; border-color: #3d6094; color: #e8f0ff; }
+.btn.is-small { padding: 2px 7px; font-size: 12px; }
+.btn.is-icon { padding: 3px 5px; }
+.outline-list { list-style: none; margin: 0; padding: 6px; }
+.outline-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 7px 8px; border-radius: 6px; cursor: pointer; color: #d6d6d6; }
+.outline-item:hover { background: #1e1e1e; }
+.outline-item.is-selected { background: #23384f; color: #ffffff; }
+.outline-item .num { color: #8a8a8a; font-variant-numeric: tabular-nums; }
+.outline-item > span { min-width: 0; }
+.outline-item .title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.outline-item .layout { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: #9a9a9a; }
+.outline-item .dot { width: 8px; height: 8px; border-radius: 50%; background: #f28b82; }
+.outline-item.has-thumb { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto auto; gap: 6px; }
+.thumb { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; border: 1px solid #2a2a2a; background: #000; pointer-events: none; }
+.thumb iframe { width: 100%; height: 100%; border: 0; display: block; }
+.outline-tools { display: flex; gap: 4px; padding: 6px 12px; border-top: 1px solid #222; position: sticky; bottom: 0; background: #111; }
+.preview { display: flex; flex-direction: column; min-height: 0; background: #0b0b0b; }
+.preview-frame { flex: 1; display: flex; align-items: center; justify-content: center; padding: 16px; min-height: 0; }
+.preview-frame iframe { border: 0; background: #000; box-shadow: 0 8px 40px rgba(0,0,0,0.6); width: 100%; max-height: 100%; }
+.preview-tools { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-top: 1px solid #222; color: #b0b0b0; }
+.preview-tools .spacer { flex: 1; }
+.tabs { display: flex; gap: 2px; padding: 8px 12px 0; border-bottom: 1px solid #222; position: sticky; top: 0; background: #111; z-index: 1; }
+.tabs button { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; color: #b4b4b4; padding: 6px 10px; cursor: pointer; }
+.tabs button.is-active { color: #fff; border-bottom-color: #8ab4f8; }
+.form { padding: 12px; display: flex; flex-direction: column; gap: 14px; }
+.field { display: flex; flex-direction: column; gap: 4px; }
+.field label { color: #b8b8b8; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; display: flex; gap: 6px; align-items: baseline; }
+.field label .req { color: #e3c36d; text-transform: none; letter-spacing: 0; }
+.field label .hint { color: #8e8e8e; text-transform: none; letter-spacing: 0; font-size: 12px; }
+.field .row { display: flex; gap: 6px; align-items: center; }
+.field .row > * { flex: 1; min-width: 0; }
+.field .row > .btn { flex: 0 0 auto; }
+.field .error { color: #f28b82; font-size: 12px; }
+.field small { color: #8e8e8e; }
+input[type="text"], input[type="number"], select, textarea { width: 100%; box-sizing: border-box; background: #1b1b1b; color: #f2f2f2; border: 1px solid #3a3a3a; border-radius: 5px; padding: 6px 8px; }
+input[type="text"]:focus, input[type="number"]:focus, select:focus, textarea:focus { outline: none; border-color: #4a6a8a; }
+input[type="color"] { width: 32px; height: 28px; padding: 2px; border: 1px solid #3a3a3a; border-radius: 5px; background: #1b1b1b; cursor: pointer; }
+textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px; line-height: 1.55; resize: vertical; min-height: 64px; }
+textarea.is-tall { min-height: calc(100vh - 220px); }
+.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
+.section-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: #c0c0c0; margin: 4px 0 -6px; }
+details.more summary { cursor: pointer; color: #b4b4b4; }
+details.more > .form { padding: 10px 0 0; }
+.diagnostics { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
+.diagnostics li { font-size: 12px; padding: 6px 8px; border-radius: 5px; background: #1a1414; color: #f28b82; }
+.diagnostics li.is-warning { background: #1a1810; color: #e3c36d; }
+.diagnostics li code { opacity: 0.7; margin-right: 6px; }
+.banner { display: flex; gap: 10px; align-items: center; padding: 8px 14px; background: #3a2a1a; color: #f3d9b1; border-bottom: 1px solid #5a3a1a; }
+.banner .spacer { flex: 1; }
+.modal-scrim { position: fixed; inset: 0; background: rgba(0,0,0,0.75); display: flex; align-items: center; justify-content: center; z-index: 100; }
+.modal { background: #161616; border: 1px solid #2a2a2a; border-radius: 10px; padding: 18px; width: min(90vw, 560px); max-height: 80vh; overflow: auto; }
+.modal h2 { margin: 0 0 12px; font-size: 14px; color: #eee; }
+.picker { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
+.picker button { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 2px; }
+.picker button small { color: #b0b0b0; }
+.swatches { display: inline-flex; gap: 2px; }
+.swatches i { width: 10px; height: 10px; border-radius: 2px; border: 1px solid rgba(255,255,255,0.08); }
+.empty { padding: 40px 20px; color: #a0a0a0; text-align: center; }
+.loading { display: flex; align-items: center; justify-content: center; height: 100vh; color: #b0b0b0; }
+/* The deck's palette: a list showing every palette's colours, and light or dark. */
+.palette-picker { position: relative; }
+.palette-current, .palette-list button { appearance: none; display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid #3a3a3a; border-radius: 5px; background: #1b1b1b; color: #f2f2f2; cursor: pointer; text-align: left; }
+.palette-current:hover, .palette-current[aria-expanded="true"] { border-color: #4a6a8a; }
+.palette-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.palette-default { color: #8e8e8e; }
+.palette-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 10; max-height: 360px; overflow: auto; padding: 4px; border: 1px solid #3a3a3a; border-radius: 6px; background: #1b1b1b; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5); }
+.palette-list button { border-color: transparent; background: none; color: #c8c8c8; }
+.palette-list button:hover { background: #262626; color: #fff; }
+.palette-list button.is-active { background: #27436a; color: #fff; }
+.appearance-toggle { display: flex; gap: 6px; }
+.appearance-toggle .btn { flex: 1; }
+.appearance-toggle .btn.is-active { background: #27436a; border-color: #3d6094; color: #fff; }
+.note { margin: 0; padding: 8px 10px; border-left: 3px solid #4a6a8a; background: #1a2230; color: #c8d4e4; font-size: 12px; border-radius: 0 4px 4px 0; }
+.extensions-tabs { padding: 0 10px 0 4px; align-items: stretch; }
+.extensions-tabs .tabs { flex: 1; padding: 0; border: 0; position: static; background: none; }
+.extensions-tabs .tabs button { padding: 12px 8px 10px; }
+.extensions-tabs > .btn { align-self: center; }
+.preview-bar { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid #222; color: #e0e0e0; }
+.preview-bar .spacer { flex: 1; }
+.preview-bar .muted { color: #8e8e8e; }
+.preview-choice { display: inline-flex; align-items: center; gap: 6px; color: #a8a8a8; font-size: 12px; }
+.preview-choice select { max-width: 160px; }
+.appearance-toggle.is-compact { gap: 2px; }
+.appearance-toggle.is-compact .btn { flex: 0 0 auto; }
+.segmented { display: inline-flex; border: 1px solid #3a3a3a; border-radius: 5px; overflow: hidden; }
+.segmented button { appearance: none; border: 0; background: #1b1b1b; color: #c8c8c8; padding: 3px 10px; font-size: 12px; cursor: pointer; }
+.segmented button + button { border-left: 1px solid #3a3a3a; }
+.segmented button.is-active { background: #27436a; color: #fff; }
+/* The deck's theme, chosen from pictures of its first slide. */
+.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
+.theme-choice { appearance: none; display: flex; flex-direction: column; gap: 4px; padding: 4px; border: 1px solid #2a2a2a; border-radius: 6px; background: #161616; color: #d6d6d6; cursor: pointer; text-align: left; font-size: 12px; }
+.theme-choice:hover { border-color: #4a6a8a; }
+.theme-choice.is-active { border-color: #60a5fa; background: #1d2b3c; color: #fff; }
+.theme-choice-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
+/* The design page: the deck's own extensions first, then built-in ones. */
+.panel-section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px 0; }
+.panel-section-head .section-title { margin: 0; }
+.online-pack .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.online-pack { cursor: default; }
+.online-meta { font-size: 11px; color: #9a9a9a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
+.online-error { color: #f28b82; margin: 6px 0 0; }
+.hint-text { margin: 0; color: #9a9a9a; font-size: 12px; }
+.panel-hint { margin: 6px 14px 4px; color: #9a9a9a; font-size: 12px; }
+.design-usage { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid #222; background: #161b22; font-size: 12px; }
+.design-usage > span { flex: 1; display: inline-flex; align-items: center; gap: 6px; }
+.palette-checks { display: grid; gap: 2px; max-height: 220px; overflow: auto; padding: 4px; border: 1px solid #2a2a2a; border-radius: 5px; }
+.field .palette-check { display: flex; align-items: center; gap: 8px; padding: 3px 4px; border-radius: 4px; cursor: pointer; text-transform: none; letter-spacing: normal; font-size: 13px; color: #d6d6d6; }
+.field .palette-check:hover { background: #1e1e1e; }
+.builtin-title { margin: 0; font-size: 16px; color: #f0f0f0; }
+.builtin-title .muted { font-size: 12px; font-weight: 400; margin-left: 6px; }
+.builtin-description { margin: 0; color: #c0c0c0; }
+.builtin-source summary, .advanced summary { cursor: pointer; color: #a8a8a8; }
+.builtin-source pre { margin: 8px 0 0; padding: 10px; max-height: 360px; overflow: auto; background: #161616; border: 1px solid #2a2a2a; border-radius: 5px; font-size: 11px; white-space: pre-wrap; }
+.advanced[open] summary { margin-bottom: 8px; }

package/src/editor/extensions.js

@@ -0,0 +1,86 @@
+// Extension editing model: the files of an extension folder are the source of
+// truth; forms read a model out of extension.toml and write it back as TOML.
+import { parse, stringify } from 'smol-toml'
+
+export const MANIFEST = 'extension.toml'
+export const ID_RE = /^[a-z][a-z0-9-]*$/
+export { COLOR_ROLES as CORE_TOKENS } from '../extensions/tokens.js'
+// Readable colours a new palette starts from.
+const STARTER_COLORS = {
+  light: { '--bg': '#ffffff', '--surface': '#f2f2f2', '--ink': '#111111', '--ink-soft': '#333333', '--muted': '#666666', '--rule': '#dadada', '--accent': '#0b6bcb', '--accent-2': '#c2410c', '--on-accent': '#ffffff' },
+  dark: { '--bg': '#111111', '--surface': '#1e1e1e', '--ink': '#f2f2f2', '--ink-soft': '#cfcfcf', '--muted': '#8f8f8f', '--rule': '#2e2e2e', '--accent': '#6aaeff', '--accent-2': '#fb923c', '--on-accent': '#111111' },
+}
+
+const entries = table => Object.entries(table ?? {}).map(([name, value]) => ({ name, ...(value && typeof value === 'object' && !Array.isArray(value) ? value : { value }) }))
+const table = (list, pick) => Object.fromEntries(list.filter(item => item.name).map(item => [item.name, pick(item)]))
+const clean = object => Object.fromEntries(Object.entries(object).filter(([, value]) => value !== undefined && value !== '' && value !== null && !(Array.isArray(value) && !value.length)))
+
+export function parseManifest(text) {
+  try { return { raw: parse(text) } } catch (error) { return { error: error.message.replace(/^Invalid TOML document: /, ''), line: error.line, column: error.column } }
+}
+
+// Raw TOML object → editable model. Unknown fields are kept in `extra`.
+export function toModel(raw) {
+  // `starter`, `source` and `file` come from registry listings, not manifests.
+  const { schema, kind, id, title, description, theme, light, dark, palette, palettes, appearance, fonts, files, tokens, params, frame, regions, properties, starter, source, file, ...extra } = raw
+  const model = { kind, id: id ?? '', title: title ?? '', description: description ?? '', extra, files: files ?? {} }
+  // A palette: its light and dark colours, and the theme it belongs to, if any.
+  if (kind === 'palette') return { ...model, theme: theme ?? '', light: entries(light), dark: entries(dark) }
+  if (kind === 'theme') return { ...model, palette: palette ?? '', palettes: palettes ?? [], appearance: appearance ?? 'light', fonts: fonts ?? [], tokens: entries(tokens), params: entries(params) }
+  if (kind === 'layout') return { ...model, frame: frame ?? 'standard', regions: entries(regions), properties: entries(properties).map(property => ({ ...property, enum: property.enum ?? [], items: property.items ?? null })) }
+  return model
+}
+
+export function toToml(model) {
+  const base = { schema: 1, kind: model.kind, id: model.id, title: model.title, ...clean({ description: model.description }) }
+  const tokens = table(model.tokens ?? [], token => token.value ?? '')
+  let raw
+  if (model.kind === 'palette') raw = { ...base, ...clean({ theme: model.theme }), ...model.extra, light: table(model.light ?? [], token => token.value ?? ''), dark: table(model.dark ?? [], token => token.value ?? '') }
+  else if (model.kind === 'theme') raw = {
+    ...base, palette: model.palette, ...clean({ palettes: model.palettes }), ...(model.appearance === 'dark' ? { appearance: 'dark' } : {}), fonts: model.fonts ?? [], ...model.extra,
+    files: { styles: 'styles.css', ...(model.files ?? {}) }, tokens,
+    params: table(model.params ?? [], param => clean({ token: param.token, title: param.title, description: param.description })),
+  }
+  else if (model.kind === 'layout') raw = {
+    ...base, ...(model.frame && model.frame !== 'standard' ? { frame: model.frame } : {}), ...model.extra, ...(Object.keys(model.files ?? {}).length ? { files: model.files } : {}),
+    regions: table(model.regions ?? [], region => clean({ description: region.description, required: region.required || undefined })),
+    properties: table(model.properties ?? [], property => propertySchema(property)),
+  }
+  else raw = { ...base, ...model.extra }
+  if (raw.params && !Object.keys(raw.params).length) delete raw.params
+  if (raw.properties && !Object.keys(raw.properties).length) delete raw.properties
+  return stringify(raw) + '\n'
+}
+
+function propertySchema(property) {
+  const schema = clean({ type: property.type ?? 'string', title: property.title, description: property.description, required: property.required || undefined,
+    enum: property.enum?.length ? property.enum : undefined, minimum: property.minimum, maximum: property.maximum, minItems: property.minItems, maxItems: property.maxItems })
+  if (property.default !== undefined && property.default !== null) schema.default = property.default
+  if (property.items && property.type === 'array') schema.items = clean({ type: property.items.type ?? 'string', minimum: property.items.minimum, maximum: property.items.maximum, enum: property.items.enum?.length ? property.items.enum : undefined })
+  return schema
+}
+
+// Manifest as the runtime expects it, for live previews of unsaved work.
+export function toRuntimeManifest(model) {
+  const tokens = table(model.tokens ?? [], token => token.value ?? '')
+  const shared = { id: model.id, title: model.title, description: model.description ?? '' }
+  if (model.kind === 'palette') return { ...shared, ...(model.theme ? { theme: model.theme } : {}), light: table(model.light ?? [], token => token.value ?? ''), dark: table(model.dark ?? [], token => token.value ?? '') }
+  if (model.kind === 'theme') return {
+    ...shared, palette: model.palette, ...(model.palettes?.length ? { palettes: model.palettes } : {}), appearance: model.appearance ?? 'light', fonts: model.fonts ?? [], tokens,
+    params: table(model.params ?? [], param => ({ token: param.token, default: tokens[param.token] ?? '', ...(param.title ? { title: param.title } : {}) })),
+  }
+  return shared
+}
+
+// Starting points for new extensions. `from` is a registry manifest to copy;
+// a theme is always a copy, a palette may start from readable plain colours.
+export function starterFiles(kind, id, title, from = null, fromFiles = {}) {
+  if (kind === 'palette') {
+    const light = from?.light ? entries(from.light) : entries(STARTER_COLORS.light)
+    const dark = from?.dark ? entries(from.dark) : entries(STARTER_COLORS.dark)
+    return { [MANIFEST]: toToml({ kind, id, title, description: '', theme: '', light, dark, extra: {} }) }
+  }
+  if (kind !== 'theme' || !from) throw new Error('A new theme starts as a copy of another one')
+  const params = from.params && Object.fromEntries(Object.entries(from.params).map(([name, param]) => [name, { token: param.token, title: param.title, description: param.description }]))
+  return { [MANIFEST]: toToml({ ...toModel({ ...from, kind, params }), id, title, files: {} }), 'styles.css': fromFiles['styles.css'] ?? '' }
+}

package/src/editor/keyboard.js

@@ -0,0 +1,21 @@
+const EDITABLE = 'input, textarea, select, [contenteditable]'
+
+// Undo and redo work everywhere (textarea values derive from the source, so
+// native undo would fight the model). Navigation and structure shortcuts stay
+// out of text fields.
+export function installShortcuts(handlers, target = window) {
+  const onKey = event => {
+    const mod = event.metaKey || event.ctrlKey
+    const key = event.key.toLowerCase()
+    if (mod && key === 'z') { event.preventDefault(); return event.shiftKey ? handlers.redo?.() : handlers.undo?.() }
+    if (mod && key === 'y') { event.preventDefault(); return handlers.redo?.() }
+    if (event.target?.closest?.(EDITABLE)) return
+    if (mod && key === 'enter') { event.preventDefault(); return handlers.add?.() }
+    if (mod && key === 'backspace') { event.preventDefault(); return handlers.remove?.() }
+    if (mod) return
+    if (key === 'arrowup' || key === 'arrowleft' || key === 'pageup') { event.preventDefault(); return handlers.prev?.() }
+    if (key === 'arrowdown' || key === 'arrowright' || key === 'pagedown') { event.preventDefault(); return handlers.next?.() }
+  }
+  target.addEventListener('keydown', onKey)
+  return () => target.removeEventListener('keydown', onKey)
+}

package/src/editor/model.js

@@ -0,0 +1,38 @@
+// Read-only helpers that derive editor views from the parsed deck and the
+// extension manifests.
+import { marked } from 'marked'
+export { slideTitle } from '../core/outline.js'
+
+// Body first, then the manifest's regions in order, then explicit regions the
+// manifest does not know about.
+export function regionsFor(slide, manifest) {
+  const declared = manifest?.regions ?? { body: {} }
+  const names = ['body', ...Object.keys(declared).filter(name => name !== 'body')]
+  const known = new Set(names)
+  const list = names.map(name => ({
+    name, description: declared[name]?.description ?? '', required: Boolean(declared[name]?.required),
+    present: Boolean(slide.regions[name]), content: slide.regions[name]?.content ?? '', unknown: false,
+  }))
+  for (const name of Object.keys(slide.regions)) {
+    if (!known.has(name)) list.push({ name, description: '', required: false, present: true, content: slide.regions[name].content, unknown: true })
+  }
+  return list
+}
+
+// Where an authored property value lives: under props, as a legacy top-level
+// key (built-in layouts accept image:, alt:, fit:, position:, overlay:), or nowhere.
+export function propSource(authoredMeta = {}, key) {
+  if (authoredMeta.props && Object.hasOwn(authoredMeta.props, key)) return 'props'
+  if (Object.hasOwn(authoredMeta, key) && key !== 'props') return 'legacy'
+  return null
+}
+
+export function slideDiagnostics(diagnostics, slide) {
+  return diagnostics.filter(d => d.offset >= slide.source.start && d.offset < Math.max(slide.source.end, slide.source.start + 1))
+}
+
+export function deckDiagnostics(diagnostics, deck) {
+  return diagnostics.filter(d => !deck.slides.some(slide => d.offset >= slide.source.start && d.offset < Math.max(slide.source.end, slide.source.start + 1)))
+}
+
+export { marked }

package/src/editor/sampleDeck.js

@@ -0,0 +1,165 @@
+// The sample deck: every built-in layout and kind of content, once, in
+// ordinary amounts. The design page previews themes and palettes on it, and
+// `npm run test:themes` checks every theme against it.
+
+export const SAMPLE_PICTURE = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"><rect width="400" height="300" fill="#6b7f99"/><circle cx="140" cy="150" r="80" fill="#e0c068"/><rect x="220" y="80" width="120" height="140" fill="#2d3e50"/></svg>'
+
+// `picture` is where the slides find the picture: a file beside the deck, or
+// a data URL where there is no such file.
+export function sampleDeck(picture = './picture.svg') {
+  return `---
+meta:
+  title: "Sample talk"
+  author: "A. Author"
+  organization: "Institute"
+  date: "2026-10-06"
+---
+
+---
+layout: title
+---
+# A talk about *trying* themes.
+## Every layout and every kind of content, once.
+
+---
+layout: title
+image: ./picture.svg
+alt: "Shapes"
+---
+# A title with a picture.
+## And a subtitle beside it.
+
+---
+layout: chapter
+number: 2
+part: Methods
+---
+# How it was *measured*
+
+One sentence about what this chapter covers.
+
+---
+layout: chapter
+number: 3
+image: ./picture.svg
+alt: "Shapes"
+---
+# A chapter with a picture
+
+---
+# Lists, emphasis and code
+
+- A point with *emphasis* and **strong** words
+- A second point with \`inline code\`
+  - A nested point
+  - Another nested point
+
+\`\`\`js
+const total = values.reduce((sum, value) => sum + value, 0)
+\`\`\`
+
+---
+# Numbers in a table
+
+| Group | Mean | Spread |
+|---|---|---|
+| Control | 4.2 | 0.8 |
+| Treatment | 5.1 | 0.6 |
+| Follow-up | 5.0 | 0.7 |
+
+The difference is $\\Delta = 0.9$, with a footnote.[^1]
+
+[^1]: A source for the claim.
+
+---
+# Callouts
+
+::: tip
+A tip in one sentence.
+:::
+
+::: warning
+A warning in one sentence.
+:::
+
+::: note Your own title
+A note with a title of its own.
+:::
+
+---
+# Blocks for lectures
+
+::: definition Definition 1 (Group)
+A set with an associative operation, a neutral element and inverses.
+:::
+
+::: theorem Theorem 2 (Lagrange)
+The order of a subgroup divides the order of the group.
+:::
+
+::: proof
+The cosets partition the group into parts of equal size.
+:::
+
+---
+# Two columns
+
+:::columns
+Some text on the left, with a formula:
+
+$$
+\\int_0^1 x^2 \\, dx = \\frac{1}{3}
+$$
+
++++
+
+1. First step
+2. Second step
+3. Third step
+:::
+
+---
+layout: focus
+eyebrow: Key point
+attribution: "Someone wise"
+---
+# A statement that takes a line or two on the slide.
+
+---
+layout: image-text
+image: ./picture.svg
+alt: "Shapes"
+---
+# A picture beside words
+
+Two sentences of text beside the picture. They explain what it shows.
+
+---
+layout: split
+---
+# A split slide
+:::slot left
+\`\`\`python
+def mean(values):
+    return sum(values) / len(values)
+\`\`\`
+:::
+:::slot right
+- What the code does
+- Why it matters
+:::
+
+---
+layout: full-bleed-image
+image: ./picture.svg
+alt: "Shapes"
+overlay: true
+---
+# A picture that fills the slide.
+`.replaceAll('./picture.svg', picture)
+}
+
+// The picture as a data URL, for a sample deck that has no folder of its own.
+export function sampleDataUrl() {
+  return `data:image/svg+xml,${encodeURIComponent(SAMPLE_PICTURE)}`
+}

package/src/editor/saveQueue.js

@@ -0,0 +1,47 @@
+// Debounced, serialized autosave. The queue owns the base hash: every
+// successful save advances it, a conflict pauses saving until the UI decides.
+export function createSaveQueue({ save, delay = 400, setTimeout = globalThis.setTimeout.bind(globalThis), clearTimeout = globalThis.clearTimeout.bind(globalThis), onSaving = () => {}, onSaved = () => {}, onConflict = () => {}, onError = () => {} }) {
+  let base = null
+  let latest = null
+  let timer = null
+  let inflight = null
+  let paused = false
+
+  function push(source) {
+    latest = source
+    if (paused) return
+    clearTimeout(timer)
+    timer = setTimeout(flush, delay)
+  }
+
+  function flush() {
+    clearTimeout(timer)
+    timer = null
+    if (inflight) return inflight
+    if (latest == null || paused || base == null) return Promise.resolve()
+    const source = latest
+    latest = null
+    onSaving()
+    inflight = Promise.resolve()
+      .then(() => save(source, base))
+      .then(result => { base = result.hash; onSaved({ hash: result.hash, source }) })
+      .catch(error => {
+        if (error?.conflict) { paused = true; latest = latest ?? source; onConflict(error) }
+        else { latest = latest ?? source; onError(error) }
+      })
+      .finally(() => { inflight = null; if (latest != null && !paused) push(latest) })
+    return inflight
+  }
+
+  return {
+    push,
+    flush,
+    setBase(hash) { base = hash },
+    base: () => base,
+    // After a conflict: overwrite keeps the local text and saves it over the disk version.
+    overwrite(hash) { base = hash; paused = false; return flush() },
+    // Reload drops the local text in favour of the disk version.
+    reload(hash) { base = hash; paused = false; latest = null },
+    pending: () => Boolean(latest != null || inflight || timer),
+  }
+}

package/src/editor/schema.js

@@ -0,0 +1,36 @@
+// Maps layout property schemas to form controls and back.
+import yaml from 'js-yaml'
+
+export function fieldKind(schema = {}) {
+  if (Array.isArray(schema.enum) && schema.enum.length) return 'select'
+  if (schema.type === 'boolean') return 'checkbox'
+  if (schema.type === 'number' || schema.type === 'integer') return 'number'
+  if (schema.type === 'array' || schema.type === 'object') return 'yaml'
+  return 'text'
+}
+
+// Returns { value } or { error } for a control's raw input.
+export function parseFieldValue(kind, raw, schema = {}) {
+  if (kind === 'checkbox') return { value: Boolean(raw) }
+  if (kind === 'number') {
+    if (String(raw).trim() === '') return { value: undefined }
+    const value = Number(raw)
+    if (!Number.isFinite(value)) return { error: 'Enter a number' }
+    if (schema.type === 'integer' && !Number.isInteger(value)) return { error: 'Enter a whole number' }
+    return { value }
+  }
+  if (kind === 'yaml') {
+    if (String(raw).trim() === '') return { value: undefined }
+    try {
+      const value = yaml.load(raw)
+      return { value }
+    } catch (error) { return { error: error.reason ?? error.message } }
+  }
+  return { value: String(raw) }
+}
+
+export function formatFieldValue(kind, value) {
+  if (value === undefined || value === null) return ''
+  if (kind === 'yaml') return yaml.dump(value, { flowLevel: Array.isArray(value) ? 0 : 1, lineWidth: -1, noRefs: true }).replace(/\n$/, '')
+  return String(value)
+}

package/src/editor/state.js

@@ -0,0 +1,92 @@
+// The editor's single source of truth is the deck source string. Every change
+// goes through `edit`, which applies a pure helper from src/core/editDeck.js,
+// reparses, revalidates and records undo history.
+import { parseSlides } from '../core/parseSlides.js'
+import { validateDeck } from '../core/validateDeck.js'
+
+const HISTORY_LIMIT = 200
+const COALESCE_MS = 1000
+
+function byId(list = []) { return Object.fromEntries(list.map(item => [item.id, item])) }
+
+export function derive(source, manifests) {
+  const deck = parseSlides(source)
+  const diagnostics = validateDeck(deck, { layouts: manifests.layouts, themes: manifests.themes, palettes: manifests.palettes })
+  return { deck, diagnostics }
+}
+
+export const initialState = {
+  loaded: false, designOnly: false, path: '', name: '', source: '', hash: null, savedSource: '',
+  deck: null, diagnostics: [], registry: null, manifests: { layouts: {}, themes: {}, palettes: {} }, warnings: [],
+  selectedIndex: 0, tab: 'slide', inspectorMode: 'form',
+  history: { past: [], future: [] },
+  status: 'saved', conflict: null, error: null, preview: { error: null, slideCount: 0 },
+}
+
+const clamp = (index, deck) => Math.max(0, Math.min(index, deck.slides.length - 1))
+
+export function selectedSlide(state) { return state.deck?.slides[state.selectedIndex] ?? null }
+
+export function reduce(state, action) {
+  switch (action.type) {
+    case 'load': {
+      const manifests = { layouts: byId(action.registry?.layouts), themes: byId(action.registry?.themes), palettes: byId(action.registry?.palettes) }
+      const { deck, diagnostics } = derive(action.source, manifests)
+      return { ...state, loaded: true, designOnly: Boolean(action.designOnly), path: action.path, name: action.name, source: action.source, savedSource: action.source, hash: action.hash, deck, diagnostics,
+        registry: action.registry ?? null, manifests, warnings: action.warnings ?? [], selectedIndex: clamp(state.selectedIndex, deck), history: { past: [], future: [] }, status: 'saved', conflict: null, error: null }
+    }
+    case 'edit': {
+      const result = action.apply(state.deck)
+      const source = typeof result === 'string' ? result : result.source
+      const index = typeof result === 'string' ? action.selectIndex ?? state.selectedIndex : result.index
+      if (source === state.source) return index === state.selectedIndex ? state : { ...state, selectedIndex: clamp(index, state.deck) }
+      const now = action.now ?? Date.now()
+      const last = state.history.past.at(-1)
+      const coalesce = action.group && last?.group === action.group && now - last.time < COALESCE_MS
+      const entry = { source: state.source, selectedIndex: state.selectedIndex, group: action.group ?? null, time: now }
+      const past = coalesce ? [...state.history.past.slice(0, -1), { ...last, time: now }] : [...state.history.past, entry].slice(-HISTORY_LIMIT)
+      const { deck, diagnostics } = derive(source, state.manifests)
+      return { ...state, source, deck, diagnostics, selectedIndex: clamp(index, deck), history: { past, future: [] }, status: state.status === 'conflict' ? 'conflict' : 'unsaved' }
+    }
+    case 'undo':
+    case 'redo': {
+      const from = action.type === 'undo' ? state.history.past : state.history.future
+      const entry = from.at(-1)
+      if (!entry) return state
+      const current = { source: state.source, selectedIndex: state.selectedIndex, group: null, time: 0 }
+      const { deck, diagnostics } = derive(entry.source, state.manifests)
+      const history = action.type === 'undo'
+        ? { past: from.slice(0, -1), future: [...state.history.future, current] }
+        : { past: [...state.history.past, current], future: from.slice(0, -1) }
+      return { ...state, source: entry.source, deck, diagnostics, selectedIndex: clamp(entry.selectedIndex, deck), history, status: state.status === 'conflict' ? 'conflict' : entry.source === state.savedSource ? 'saved' : 'unsaved' }
+    }
+    case 'select': return { ...state, selectedIndex: clamp(action.index, state.deck) }
+    case 'setTab': return { ...state, tab: action.tab }
+    case 'setInspectorMode': return { ...state, inspectorMode: action.mode }
+    case 'saving': return state.status === 'conflict' ? state : { ...state, status: 'saving', error: null }
+    case 'saved': return { ...state, hash: action.hash, savedSource: action.source, status: state.status === 'conflict' ? 'conflict' : action.source === state.source ? 'saved' : 'unsaved', error: null }
+    case 'saveError': return { ...state, status: 'error', error: action.message }
+    case 'conflict': return { ...state, status: 'conflict', conflict: { source: action.source, hash: action.hash } }
+    case 'resolveConflict': {
+      if (!state.conflict) return state
+      if (action.choice === 'overwrite') return { ...state, hash: state.conflict.hash, conflict: null, status: 'unsaved' }
+      const { deck, diagnostics } = derive(state.conflict.source, state.manifests)
+      const entry = { source: state.source, selectedIndex: state.selectedIndex, group: null, time: 0 }
+      return { ...state, source: state.conflict.source, savedSource: state.conflict.source, hash: state.conflict.hash, deck, diagnostics, selectedIndex: clamp(state.selectedIndex, deck), history: { past: [...state.history.past, entry].slice(-HISTORY_LIMIT), future: [] }, conflict: null, status: 'saved' }
+    }
+    case 'externalChange': {
+      if (action.hash === state.hash) return state
+      if (state.status !== 'saved') return reduce(state, { type: 'conflict', source: action.source, hash: action.hash })
+      const { deck, diagnostics } = derive(action.source, state.manifests)
+      const entry = { source: state.source, selectedIndex: state.selectedIndex, group: null, time: 0 }
+      return { ...state, source: action.source, savedSource: action.source, hash: action.hash, deck, diagnostics, selectedIndex: clamp(state.selectedIndex, deck), history: { past: [...state.history.past, entry].slice(-HISTORY_LIMIT), future: [] }, status: 'saved' }
+    }
+    case 'setRegistry': {
+      const manifests = { layouts: byId(action.registry?.layouts), themes: byId(action.registry?.themes), palettes: byId(action.registry?.palettes) }
+      const { deck, diagnostics } = derive(state.source, manifests)
+      return { ...state, registry: action.registry, manifests, warnings: action.registry?.warnings ?? state.warnings, deck, diagnostics }
+    }
+    case 'previewRendered': return { ...state, preview: { error: action.error ?? null, slideCount: action.slideCount ?? 0 } }
+    default: return state
+  }
+}