mdeck 2.3.0

package/src/editor/components/ExtensionForms.jsx

@@ -0,0 +1,134 @@
+import { h, Fragment } from 'preact'
+import { Icon } from '../../components/Icon.jsx'
+import { CORE_TOKENS } from '../extensions.js'
+import { Field, TextArea } from './Field.jsx'
+import { PalettePicker, Swatches } from './PalettePicker.jsx'
+
+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)
+
+function Identity({ model, onChange }) {
+  return <>
+    <div class="grid-2">
+      <Field label="Title"><input type="text" value={model.title} onInput={e => onChange({ title: e.currentTarget.value })} /></Field>
+      <Field label="Id" hint="folder name"><input type="text" value={model.id} disabled /></Field>
+    </div>
+    <Field label="Description"><input type="text" value={model.description ?? ''} onInput={e => onChange({ description: e.currentTarget.value })} /></Field>
+  </>
+}
+
+export function TokenList({ tokens, onChange, suggestions = CORE_TOKENS, title = 'Tokens' }) {
+  const missing = suggestions.filter(name => !tokens.some(token => token.name === name))
+  return <>
+    <p class="section-title">{title}</p>
+    {tokens.map((token, index) => <div class="field" key={index}>
+      <div class="row">
+        <input type="text" value={token.name} placeholder="--name" style={{ flex: '0 0 140px', fontFamily: 'ui-monospace, monospace' }} onInput={e => onChange(update(tokens, index, { name: e.currentTarget.value }))} />
+        {isColor(token.value) && <input type="color" value={token.value.length === 4 ? '#' + [...token.value.slice(1)].map(c => c + c).join('') : token.value.slice(0, 7)} style={{ flex: '0 0 auto' }} onInput={e => onChange(update(tokens, index, { value: e.currentTarget.value }))} />}
+        <input type="text" value={token.value ?? ''} style={{ fontFamily: 'ui-monospace, monospace' }} onInput={e => onChange(update(tokens, index, { value: e.currentTarget.value }))} />
+        <button class="btn is-small is-icon" title="Remove token" aria-label="Remove token" onClick={() => onChange(without(tokens, index))}><Icon name="close" size={14} /></button>
+      </div>
+    </div>)}
+    <div class="row" style={{ display: 'flex', gap: '6px', flexWrap: 'wrap' }}>
+      {missing.map(name => <button key={name} class="btn is-small" onClick={() => onChange([...tokens, { name, value: '#888888' }])}>+ {name}</button>)}
+      <button class="btn is-small" onClick={() => onChange([...tokens, { name: '', value: '' }])}>+ other</button>
+    </div>
+  </>
+}
+
+// A palette has every colour twice: light (for bright rooms) and dark. Themes
+// use the other variant for inverted slides.
+export function PaletteForm({ model, onChange }) {
+  return <>
+    <Identity model={model} onChange={onChange} />
+    <Field label="Only for the theme" hint="leave empty to offer it to every theme"><input type="text" value={model.theme ?? ''} placeholder="theme id" onInput={e => onChange({ theme: e.currentTarget.value.trim() })} /></Field>
+    <TokenList title="Light colours" tokens={model.light} onChange={light => onChange({ light })} />
+    <TokenList title="Dark colours" tokens={model.dark} onChange={dark => onChange({ dark })} />
+  </>
+}
+
+// Theme tokens in groups, so fonts, sizes and spacing are found where one
+// looks for them. Each group suggests the tokens themes usually set.
+const TOKEN_GROUPS = [
+  ['Fonts', name => name.startsWith('--font-'), ['--font-display', '--font-body', '--font-mono']],
+  ['Sizes', name => name.startsWith('--fs-'), ['--fs-display', '--fs-title', '--fs-h', '--fs-body', '--fs-small']],
+  ['Spacing', name => name.startsWith('--pad-'), ['--pad-x', '--pad-y']],
+]
+const groupOf = name => TOKEN_GROUPS.findIndex(([, test]) => test(name))
+
+function TokenRow({ token, onChange, onRemove }) {
+  return <div class="field">
+    <div class="row">
+      <input type="text" value={token.name} placeholder="--name" style={{ flex: '0 0 140px', fontFamily: 'ui-monospace, monospace' }} onInput={e => onChange({ name: e.currentTarget.value })} />
+      {isColor(token.value) && <input type="color" value={token.value.length === 4 ? '#' + [...token.value.slice(1)].map(c => c + c).join('') : token.value.slice(0, 7)} style={{ flex: '0 0 auto' }} onInput={e => onChange({ value: e.currentTarget.value })} />}
+      <input type="text" value={token.value ?? ''} style={{ fontFamily: 'ui-monospace, monospace' }} onInput={e => onChange({ value: e.currentTarget.value })} />
+      <button class="btn is-small is-icon" title="Remove token" aria-label="Remove token" onClick={onRemove}><Icon name="close" size={14} /></button>
+    </div>
+  </div>
+}
+
+function ThemeTokens({ tokens, onChange, children }) {
+  const set = (index, patch) => onChange(update(tokens, index, patch))
+  const rows = test => tokens.map((token, index) => [token, index]).filter(([token]) => test(token))
+    .map(([token, index]) => <TokenRow key={index} token={token} onChange={patch => set(index, patch)} onRemove={() => onChange(without(tokens, index))} />)
+  const add = name => onChange([...tokens, { name, value: '' }])
+  return <>
+    {TOKEN_GROUPS.map(([title, , suggested], group) => <Fragment key={title}>
+      <p class="section-title">{title}</p>
+      {group === 0 && children}
+      {rows(token => groupOf(token.name) === group)}
+      <div class="row" style={{ display: 'flex', gap: '6px', flexWrap: 'wrap' }}>
+        {suggested.filter(name => !tokens.some(token => token.name === name)).map(name => <button key={name} class="btn is-small" onClick={() => add(name)}>+ {name}</button>)}
+      </div>
+    </Fragment>)}
+    <p class="section-title">Other tokens</p>
+    {rows(token => groupOf(token.name) < 0)}
+    <div><button class="btn is-small" onClick={() => add('')}>+ token</button></div>
+  </>
+}
+
+export function ThemeForm({ model, files, palettes = {}, onChange, onFile }) {
+  const tokenNames = model.tokens.map(token => token.name).filter(Boolean)
+  // Palettes this theme may offer: shared ones and its own private ones.
+  const usable = Object.values(palettes).filter(palette => !palette.theme || palette.theme === model.id)
+  const offered = model.palettes?.length ? usable.filter(palette => model.palettes.includes(palette.id)) : usable
+  const appearance = model.appearance ?? 'light'
+  const toggle = (id, on) => onChange({ palettes: on ? [...(model.palettes ?? []), id] : (model.palettes ?? []).filter(other => other !== id) })
+  return <>
+    <Identity model={model} onChange={onChange} />
+    <p class="section-title">Colours</p>
+    <p class="hint-text">A theme takes all its colours from palettes; the deck can choose another one it offers.</p>
+    <div class="grid-2">
+      <Field label="Default palette">
+        <PalettePicker offered={offered} selected={palettes[model.palette] ?? null} appearance={appearance} onChoose={id => onChange({ palette: id })} />
+      </Field>
+      <Field label="Starts"><select value={appearance} onChange={e => onChange({ appearance: e.currentTarget.value })}><option value="light">Light</option><option value="dark">Dark</option></select></Field>
+    </div>
+    <Field label="Offers these palettes" hint="none ticked offers every palette">
+      <div class="palette-checks">
+        {usable.map(palette => <label key={palette.id} class="palette-check">
+          <input type="checkbox" checked={(model.palettes ?? []).includes(palette.id)} onChange={e => toggle(palette.id, e.currentTarget.checked)} />
+          <span class="palette-name">{palette.title}</span><Swatches tokens={palette[appearance] ?? {}} />
+        </label>)}
+      </div>
+    </Field>
+    <ThemeTokens tokens={model.tokens} onChange={tokens => onChange({ tokens })}>
+      <Field label="Font stylesheets" hint="one URL per line, e.g. from Google Fonts"><TextArea rows={2} value={model.fonts.join('\n')} onInput={text => onChange({ fonts: text.split(/\r?\n/).map(line => line.trim()).filter(Boolean) })} /></Field>
+    </ThemeTokens>
+    <p class="section-title">Author settings (params)</p>
+    {model.params.map((param, index) => <div class="field" key={index}>
+      <div class="row">
+        <input type="text" value={param.name} placeholder="fontBody" onInput={e => onChange({ params: update(model.params, index, { name: e.currentTarget.value }) })} />
+        <select value={param.token ?? ''} onChange={e => onChange({ params: update(model.params, index, { token: e.currentTarget.value }) })}><option value="">token…</option>{tokenNames.map(name => <option key={name} value={name}>{name}</option>)}</select>
+        <input type="text" value={param.title ?? ''} placeholder="Title" onInput={e => onChange({ params: update(model.params, index, { title: e.currentTarget.value }) })} />
+        <button class="btn is-small is-icon" title="Remove setting" aria-label="Remove setting" onClick={() => onChange({ params: without(model.params, index) })}><Icon name="close" size={14} /></button>
+      </div>
+    </div>)}
+    <div><button class="btn is-small" onClick={() => onChange({ params: [...model.params, { name: '', token: tokenNames[0] ?? '', title: '' }] })}>+ setting</button></div>
+    <details class="advanced">
+      <summary>Advanced: styles.css</summary>
+      <Field label="styles.css" hint="rules only; token defaults come from the lists above"><TextArea tall rows={20} value={files['styles.css'] ?? ''} onInput={text => onFile('styles.css', text)} /></Field>
+    </details>
+  </>
+}

package/src/editor/components/ExtensionsPanel.jsx

@@ -0,0 +1,114 @@
+import { h } from 'preact'
+import { useEffect, useState } from 'preact/hooks'
+import { ID_RE } from '../extensions.js'
+import { Icon } from '../../components/Icon.jsx'
+import { LookThumbnail } from './LookThumbnail.jsx'
+import { loadThemeIndex } from '../api.js'
+
+const KINDS = [['theme', 'Themes'], ['palette', 'Palettes']]
+
+// The deck's own themes or palettes, to change; those installed for every
+// deck; packs from the theme repository; and the built-in ones to start
+// from. A new theme always starts as a copy; a palette can also start from
+// readable plain colours. The pictures show the sample deck as `view` says:
+// palettes in the preview's theme where it offers them, themes with its
+// palette where they offer it, both in its light or dark.
+export function ExtensionsPanel({ registry, view = {}, owner = "This deck's", selected, onSelect, onCreate, onInstall }) {
+  const [kind, setKind] = useState(selected?.kind ?? 'theme')
+  useEffect(() => { if (selected?.kind) setKind(selected.kind) }, [selected?.kind])
+  const items = registry?.[`${kind}s`] ?? []
+  const own = items.filter(item => item.source === 'local')
+  const installed = items.filter(item => item.source === 'user')
+  const builtIn = items.filter(item => item.source === 'built-in')
+  const name = `${kind}s`
+  const row = item => <li key={item.id} class={`outline-item has-thumb${selected?.kind === kind && selected?.id === item.id ? ' is-selected' : ''}`}
+    onClick={() => onSelect(kind, item.id)} style={{ gridTemplateColumns: 'minmax(0, 1fr) auto' }}>
+    {kind === 'theme' && <LookThumbnail sample theme={item.id} palette={view.paletteFor?.(item.id) ?? ''} appearance={view.appearance} />}
+    {kind === 'palette' && <LookThumbnail sample theme={view.themeFor?.(item.id) ?? ''} palette={item.id} appearance={view.appearance} />}
+    <span><span class="title" style={{ display: 'block' }}>{item.title}</span><span class="layout">{item.id}</span></span>
+  </li>
+  return <aside class="editor-panel">
+    <div class="editor-panel-head extensions-tabs">
+      <div class="tabs">{KINDS.map(([id, label]) => <button key={id} class={kind === id ? 'is-active' : ''} onClick={() => setKind(id)}>{label}</button>)}</div>
+    </div>
+    <div class="panel-section-head">
+      <p class="section-title">{owner} {name}</p>
+      {kind === 'palette' && <button class="btn is-small is-icon" title="New palette" aria-label="New palette" onClick={() => onCreate(kind)}><Icon name="add" size={14} /></button>}
+    </div>
+    {own.length
+      ? <ol class="outline-list">{own.map(row)}</ol>
+      : <p class="panel-hint">None yet. Start from a built-in one below{kind === 'palette' ? ', or with + from plain colours' : ''}.</p>}
+    {installed.length > 0 && <>
+      <div class="panel-section-head"><p class="section-title">Installed for every deck</p></div>
+      <ol class="outline-list">{installed.map(row)}</ol>
+    </>}
+    <OnlinePacks key="online" kind={kind} owner={owner} onInstall={onInstall} />
+    <div class="panel-section-head"><p class="section-title">Built in, to start from</p></div>
+    <ol class="outline-list">{builtIn.map(row)}</ol>
+  </aside>
+}
+
+// Packs from the theme repository with this kind of extension, loaded on
+// request since it needs the network. Installing puts a pack beside the deck.
+function OnlinePacks({ kind, owner, onInstall }) {
+  const [state, setState] = useState({ status: 'idle' })
+  const [busy, setBusy] = useState(null)
+  const load = () => {
+    setState({ status: 'loading' })
+    loadThemeIndex().then(index => setState({ status: 'ready', index }), error => setState({ status: 'error', error: error.message }))
+  }
+  const install = async pack => {
+    setBusy(pack.id)
+    try {
+      await onInstall(pack, kind)
+      setState(prev => ({ ...prev, index: { ...prev.index, installed: { ...prev.index.installed, [pack.id]: { version: pack.version } } } }))
+    } catch (error) { setState(prev => ({ ...prev, error: error.message })) }
+    setBusy(null)
+  }
+  const head = <div class="panel-section-head"><p class="section-title">From the theme repository</p></div>
+  if (state.status !== 'ready') return <>{head}<div class="panel-hint">
+    {state.status === 'loading' ? 'Loading…' : <button class="btn is-small" onClick={load}>Show what others made</button>}
+    {state.error && <p class="online-error">{state.error}</p>}
+  </div></>
+  const { index } = state
+  const packs = index.packs.filter(pack => pack[`${kind}s`].length)
+  return <>{head}
+    {state.error && <p class="panel-hint online-error">{state.error}</p>}
+    {!packs.length && <p class="panel-hint">No {kind}s there yet.</p>}
+    <ol class="outline-list">{packs.map(pack => {
+      const id = pack[`${kind}s`][0]
+      const have = index.installed?.[pack.id]
+      return <li key={pack.id} class="outline-item has-thumb online-pack">
+        {pack.previews?.[id] && <div class="thumb"><img src={new URL(pack.previews[id], index.url).href} alt="" loading="lazy" /></div>}
+        <span><span class="title" style={{ display: 'block' }}>{pack.title} <span class="muted">{pack.version}</span></span>
+          <span class="online-meta">{[...pack.themes, ...pack.palettes].join(', ')} · {pack.author}</span></span>
+        {have
+          ? <span class="muted">{`Installed${have.version !== pack.version ? ` (${have.version})` : ''} in ${owner === "This folder's" ? 'this folder' : 'this deck'}`}</span>
+          : <button class="btn is-small" disabled={busy === pack.id} onClick={() => install(pack)}>{busy === pack.id ? 'Installing…' : 'Install'}</button>}
+      </li>
+    })}</ol>
+  </>
+}
+
+export function NewExtensionDialog({ kind, registry, existing, onCreate, onClose, initial = null }) {
+  const [id, setId] = useState(initial?.id ?? '')
+  const [title, setTitle] = useState(initial?.title ?? '')
+  const [from, setFrom] = useState(initial?.from ?? '')
+  const taken = existing.has(id)
+  const valid = ID_RE.test(id) && !taken && title.trim() && (from || kind !== 'theme')
+  const options = registry?.[`${kind}s`] ?? []
+  return <div class="modal-scrim" onClick={onClose}>
+    <div class="modal" onClick={event => event.stopPropagation()}>
+      <h2>New {kind}</h2>
+      <div class="form" style={{ padding: 0 }}>
+        <div class="field"><label>Title</label><input type="text" value={title} autofocus onInput={e => { setTitle(e.currentTarget.value); if (!initial?.id) setId(e.currentTarget.value.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '').replace(/^[^a-z]+/, '')) }} /></div>
+        <div class="field"><label>Id <span class="hint">folder name in extensions/</span></label><input type="text" value={id} onInput={e => setId(e.currentTarget.value)} />{id && !ID_RE.test(id) && <span class="error">Use lowercase letters, digits and hyphens, starting with a letter</span>}{taken && <span class="error">That id is already in use</span>}</div>
+        <div class="field"><label>Start from</label><select value={from} onChange={e => setFrom(e.currentTarget.value)}>{kind !== 'theme' && <option value="">Plain colours</option>}{options.map(item => <option key={item.id} value={item.id}>{item.title}</option>)}</select></div>
+        <div class="row" style={{ display: 'flex', gap: '8px' }}>
+          <button class="btn is-primary" disabled={!valid} onClick={() => onCreate({ kind, id, title: title.trim(), from: from || null })}>Create</button>
+          <button class="btn" onClick={onClose}>Cancel</button>
+        </div>
+      </div>
+    </div>
+  </div>
+}

package/src/editor/components/Field.jsx

@@ -0,0 +1,24 @@
+import { h } from 'preact'
+import { useEffect, useState } from 'preact/hooks'
+
+const normalize = text => String(text ?? '').replace(/\r?\n/g, '\n').trim()
+
+// A textarea whose value derives from the deck source. It keeps a local
+// draft so trimming and newline normalization never move the caret, and only
+// resyncs when the model really differs from what is being typed.
+export function TextArea({ value, onInput, rows = 4, tall = false, ...rest }) {
+  const [draft, setDraft] = useState(value ?? '')
+  useEffect(() => { if (normalize(value) !== normalize(draft)) setDraft(value ?? '') }, [value])
+  // Grow with the text so nothing has to be scrolled inside a small box.
+  const lines = draft.split('\n').length + 1
+  return <textarea rows={tall ? rows : Math.min(40, Math.max(rows, lines))} class={tall ? 'is-tall' : ''} value={draft} spellcheck={false}
+    onInput={event => { setDraft(event.currentTarget.value); onInput(event.currentTarget.value) }} {...rest} />
+}
+
+export function Field({ label, required, hint, error, children }) {
+  return <div class="field">
+    {label && <label>{label}{required && <span class="req">required</span>}{hint && <span class="hint">{hint}</span>}</label>}
+    {children}
+    {error && <span class="error">{error}</span>}
+  </div>
+}

package/src/editor/components/Inspector.jsx

@@ -0,0 +1,36 @@
+import { h } from 'preact'
+import { slideDiagnostics } from '../model.js'
+import { LayoutSelect } from './LayoutSelect.jsx'
+import { RegionEditor } from './RegionEditor.jsx'
+import { PropsForm } from './PropsForm.jsx'
+import { MetaFields } from './MetaFields.jsx'
+import { RawSlideEditor } from './RawSlideEditor.jsx'
+import { Diagnostics } from './Diagnostics.jsx'
+
+export function Inspector({ state, dispatch, edit }) {
+  const { deck, manifests, selectedIndex, inspectorMode, diagnostics } = state
+  const slide = deck.slides[selectedIndex]
+  if (!slide) return <div class="form"><p class="empty">Select a slide to edit it.</p></div>
+  // Helpers receive the slide as it exists when the edit is applied, so ids
+  // shifted by earlier edits never go stale.
+  const slideEdit = (fn, options = {}) => edit(d => { const current = d.slides[selectedIndex]; return current ? fn(d, current.id, current) : d.source }, { ...options, group: options.group ? `${options.group}:${selectedIndex}` : undefined })
+  const manifest = manifests.layouts[slide.meta.layout ?? 'generic']
+  const problems = slideDiagnostics(diagnostics, slide)
+  return <>
+    <div class="tabs">
+      <button class={inspectorMode === 'form' ? 'is-active' : ''} onClick={() => dispatch({ type: 'setInspectorMode', mode: 'form' })}>Fields</button>
+      <button class={inspectorMode === 'raw' ? 'is-active' : ''} onClick={() => dispatch({ type: 'setInspectorMode', mode: 'raw' })}>Markdown</button>
+    </div>
+    <div class="form">
+      <Diagnostics items={problems} />
+      {inspectorMode === 'raw'
+        ? <RawSlideEditor deck={deck} slide={slide} slideEdit={slideEdit} />
+        : <>
+          <LayoutSelect slide={slide} manifests={manifests} slideEdit={slideEdit} />
+          <RegionEditor slide={slide} manifest={manifest} slideEdit={slideEdit} />
+          <PropsForm slide={slide} manifest={manifest} slideEdit={slideEdit} />
+          <MetaFields slide={slide} slideEdit={slideEdit} />
+        </>}
+    </div>
+  </>
+}

package/src/editor/components/LayoutPicker.jsx

@@ -0,0 +1,23 @@
+import { h } from 'preact'
+import { useEffect } from 'preact/hooks'
+
+export function LayoutPicker({ layouts, onPick, onClose }) {
+  useEffect(() => {
+    const onKey = event => { if (event.key === 'Escape') onClose() }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [])
+  return <div class="modal-scrim" onClick={onClose}>
+    <div class="modal" onClick={event => event.stopPropagation()}>
+      <h2>Add a slide</h2>
+      <ul class="picker">
+        {Object.values(layouts).map(item => <li key={item.id}>
+          <button class="btn" onClick={() => onPick(item)}>
+            <strong>{item.title}</strong>
+            {item.description && <small>{item.description}</small>}
+          </button>
+        </li>)}
+      </ul>
+    </div>
+  </div>
+}

package/src/editor/components/LayoutSelect.jsx

@@ -0,0 +1,25 @@
+import { h } from 'preact'
+import { parseSlides } from '../../core/parseSlides.js'
+import { setSlideMeta, setRegion } from '../../core/editDeck.js'
+import { Field } from './Field.jsx'
+
+export function LayoutSelect({ slide, manifests, slideEdit }) {
+  const current = slide.meta.layout ?? 'generic'
+  const manifest = manifests.layouts[current]
+  const missing = Object.entries(manifest?.regions ?? {}).filter(([name, region]) => region.required && !slide.regions[name]?.content.trim()).map(([name]) => name)
+  const known = Object.hasOwn(manifests.layouts, current)
+  const addMissing = () => slideEdit((deck, id) => {
+    let source = deck.source
+    for (const name of missing) source = setRegion(parseSlides(source), id, name, '')
+    return source
+  })
+  return <Field label="Layout" hint={manifest?.description} error={known ? null : `Unknown layout "${current}"; the content renders with the plain layout`}>
+    <div class="row">
+      <select value={current} onChange={event => { const layout = event.currentTarget.value; slideEdit((deck, id) => setSlideMeta(deck, id, { layout: layout === 'generic' ? undefined : layout })) }}>
+        {!known && <option value={current}>{current}</option>}
+        {Object.values(manifests.layouts).map(item => <option key={item.id} value={item.id}>{item.title}</option>)}
+      </select>
+      {missing.length > 0 && <button class="btn is-small" onClick={addMissing} title={`Add ${missing.join(', ')}`}>Add areas</button>}
+    </div>
+  </Field>
+}

package/src/editor/components/LookThumbnail.jsx

@@ -0,0 +1,8 @@
+import { h } from 'preact'
+
+// The first slide in a theme and palette, as a small live picture: the
+// deck's, or with `sample` the sample deck's. Empty values mean the deck's
+// own, and light or dark stays the deck's unless `appearance` is given.
+export function LookThumbnail({ theme = '', palette = '', appearance = '', sample = false }) {
+  return <div class="thumb"><iframe src={`/?embedded=1${sample ? '&sample=1' : ''}&theme=${encodeURIComponent(theme)}&palette=${encodeURIComponent(palette)}${appearance ? `&appearance=${appearance}` : ''}`} title="" tabIndex={-1} loading="lazy" scrolling="no" /></div>
+}

package/src/editor/components/MetaFields.jsx

@@ -0,0 +1,24 @@
+import { h } from 'preact'
+import { setSlideMeta, setSlideNotes } from '../../core/editDeck.js'
+import { Field, TextArea } from './Field.jsx'
+
+const MORE = [['section', 'Section label shown in the header'], ['number', 'Chapter number'], ['part', 'Part name for chapter slides'], ['label', 'Replaces the word "Chapter"'], ['description', 'Chapter description'], ['eyebrow', 'Small line above a heading'], ['attribution', 'Source of a quote']]
+
+export function MetaFields({ slide, slideEdit }) {
+  const meta = slide.authoredMeta
+  const text = (key, numeric = false) => <input type={numeric ? 'number' : 'text'} value={meta[key] ?? ''} onInput={event => {
+    const raw = event.currentTarget.value
+    const value = raw === '' ? undefined : numeric && Number.isFinite(Number(raw)) ? Number(raw) : raw
+    slideEdit((deck, id) => setSlideMeta(deck, id, { [key]: value }), { group: `meta:${key}` })
+  }} />
+  return <>
+    <Field label="Slide id" hint="stable anchor and link target">{text('id')}</Field>
+    <Field label="Speaker notes"><TextArea rows={4} value={slide.meta.notes ?? ''} onInput={value => slideEdit((deck, id) => setSlideNotes(deck, id, value), { group: 'notes' })} /></Field>
+    <details class="more" open={MORE.some(([key]) => meta[key] != null)}>
+      <summary>More metadata</summary>
+      <div class="form">
+        {MORE.map(([key, hint]) => <Field key={key} label={key} hint={hint}>{text(key, key === 'number')}</Field>)}
+      </div>
+    </details>
+  </>
+}

package/src/editor/components/Outline.jsx

@@ -0,0 +1,28 @@
+import { h } from 'preact'
+import { Icon } from '../../components/Icon.jsx'
+import { slideTitle, slideDiagnostics } from '../model.js'
+
+export function Outline({ deck, manifests, diagnostics, selectedIndex, onSelect, onAdd, onDuplicate, onRemove, onMove }) {
+  const count = deck.slides.length
+  return <aside class="editor-panel">
+    <div class="editor-panel-head"><span>Slides</span><button class="btn is-small is-primary" onClick={onAdd} title="Add a slide after the selected one (⌘↩)"><Icon name="add" size={14} />Add</button></div>
+    {count === 0 && <p class="empty">No slides yet. Add one to get started.</p>}
+    <ol class="outline-list">
+      {deck.slides.map((slide, index) => {
+        const manifest = manifests.layouts[slide.meta.layout ?? 'generic']
+        const errors = slideDiagnostics(diagnostics, slide).some(d => d.severity === 'error')
+        return <li key={index} class={`outline-item${index === selectedIndex ? ' is-selected' : ''}`} onClick={() => onSelect(index)}>
+          <span class="num">{String(index + 1).padStart(2, '0')}</span>
+          <span><span class="title" style={{ display: 'block' }}>{slideTitle(slide, index, manifest)}</span><span class="layout">{manifest?.title ?? slide.meta.layout ?? 'content'}</span></span>
+          {errors ? <span class="dot" title="This slide has errors" /> : <span />}
+        </li>
+      })}
+    </ol>
+    {count > 0 && <div class="outline-tools">
+      <button class="btn is-small is-icon" onClick={() => onMove(-1)} disabled={selectedIndex <= 0} title="Move up" aria-label="Move up"><Icon name="up" size={14} /></button>
+      <button class="btn is-small is-icon" onClick={() => onMove(1)} disabled={selectedIndex >= count - 1} title="Move down" aria-label="Move down"><Icon name="down" size={14} /></button>
+      <button class="btn is-small" onClick={onDuplicate} title="Duplicate">Duplicate</button>
+      <button class="btn is-small" onClick={onRemove} title="Remove (⌘⌫). Undo with ⌘Z">Remove</button>
+    </div>}
+  </aside>
+}

package/src/editor/components/PalettePicker.jsx

@@ -0,0 +1,32 @@
+import { h } from 'preact'
+import { useEffect, useRef, useState } from 'preact/hooks'
+import { Icon } from '../../components/Icon.jsx'
+
+export function Swatches({ tokens = {} }) {
+  return <span class="swatches">{['--bg', '--surface', '--rule', '--accent', '--accent-2', '--ink'].map(key => tokens[key] ? <i key={key} style={{ background: tokens[key] }} /> : null)}</span>
+}
+
+// The palettes a theme offers, each with its colours in the light or dark
+// the deck shows, so they can be compared before choosing.
+export function PalettePicker({ offered, selected, defaultId, appearance, onChoose }) {
+  const [open, setOpen] = useState(false)
+  const ref = useRef(null)
+  useEffect(() => {
+    if (!open) return
+    const close = event => { if (event.type === 'keydown' ? event.key === 'Escape' : !ref.current?.contains(event.target)) setOpen(false) }
+    document.addEventListener('pointerdown', close)
+    document.addEventListener('keydown', close)
+    return () => { document.removeEventListener('pointerdown', close); document.removeEventListener('keydown', close) }
+  }, [open])
+  const label = palette => <><span class="palette-name">{palette.title}{palette.id === defaultId && <span class="palette-default"> · theme default</span>}</span><Swatches tokens={palette[appearance] ?? {}} /></>
+  return <div class="palette-picker" ref={ref}>
+    <button type="button" class="palette-current" aria-haspopup="listbox" aria-expanded={open} onClick={() => setOpen(o => !o)}>
+      {selected ? label(selected) : <span class="palette-name" />}
+      <Icon name="dropdown" size={14} />
+    </button>
+    {open && <div class="palette-list" role="listbox" aria-label="Palette">
+      {offered.map(palette => <button type="button" key={palette.id} role="option" aria-selected={palette.id === selected?.id} title={palette.description} class={palette.id === selected?.id ? 'is-active' : ''}
+        onClick={() => { setOpen(false); onChoose(palette.id) }}>{label(palette)}</button>)}
+    </div>}
+  </div>
+}

package/src/editor/components/Preview.jsx

@@ -0,0 +1,63 @@
+import { h } from 'preact'
+import { Icon } from '../../components/Icon.jsx'
+import { useEffect, useRef, useState } from 'preact/hooks'
+
+const PREVIEW_URL = '/?editor=1&embedded=1'
+
+// Hosts the deck runtime in editor mode and keeps it fed with the current
+// source. Navigation inside the preview reports back so the outline follows.
+export function Preview({ source, selection, config = null, overrides = null, reloadKey = 0, width, height, onState, onRendered, bar = null, total = 0 }) {
+  const frame = useRef(null)
+  const [ready, setReady] = useState(false)
+  const reported = useRef(null)
+  const post = message => frame.current?.contentWindow?.postMessage(message, location.origin)
+
+  useEffect(() => {
+    const onMessage = event => {
+      if (event.source !== frame.current?.contentWindow || event.origin !== location.origin) return
+      const data = event.data ?? {}
+      if (data.deckEditorReady) setReady(true)
+      if (data.deckRendered) onRendered(data.deckRendered)
+      if (data.deckStateChanged) {
+        reported.current = data.deckStateChanged.index
+        if (!['init', 'sync'].includes(data.reason)) onState(data.deckStateChanged.index)
+      }
+    }
+    window.addEventListener('message', onMessage)
+    return () => window.removeEventListener('message', onMessage)
+  }, [])
+
+  // Coalesce bursts of keystrokes into one push per tick. A timer rather than
+  // requestAnimationFrame, which stalls in background tabs.
+  const overridesKey = JSON.stringify({ config, overrides })
+  useEffect(() => {
+    if (!ready) return
+    const id = setTimeout(() => post({ deckSource: { source, selection, config, overrides } }), 0)
+    return () => clearTimeout(id)
+  }, [ready, source, overridesKey])
+
+  // Layout code is code inside the preview's module graph: after they
+  // change on disk the frame reloads and reports ready again.
+  useEffect(() => { if (reloadKey && frame.current) { setReady(false); frame.current.contentWindow?.location.reload() } }, [reloadKey])
+
+  useEffect(() => {
+    if (ready && reported.current !== selection.index) post({ deckControl: { command: 'setState', value: { index: selection.index, slideId: selection.slideId, step: -1 } } })
+  }, [ready, selection.index])
+
+  const control = command => post({ deckControl: { command } })
+  return <section class="preview" data-ready={String(ready)}>
+    {bar && <div class="preview-bar">{bar}</div>}
+    <div class="preview-frame">
+      {/* The runtime's listener exists once the frame has loaded; its own ready
+          message may arrive before this component listens, so both count. */}
+      <iframe ref={frame} title="Slide preview" src={PREVIEW_URL} onLoad={() => setReady(true)} style={{ aspectRatio: `${width} / ${height}` }} />
+    </div>
+    <div class="preview-tools">
+      <button class="btn is-small" onClick={() => control('prev')}><Icon name="prev" size={14} />Previous</button>
+      <button class="btn is-small" onClick={() => control('next')}>Next<Icon name="next" size={14} /></button>
+      <button class="btn is-small" onClick={() => control('reset')}>Reset</button>
+      <span class="spacer" />
+      <span>Slide {selection.index + 1}{total ? ` of ${total}` : ''}</span>
+    </div>
+  </section>
+}

package/src/editor/components/PropsForm.jsx

@@ -0,0 +1,46 @@
+import { h } from 'preact'
+import { Icon } from '../../components/Icon.jsx'
+import { useState } from 'preact/hooks'
+import { resolveLayoutProps, propertyErrors } from '../../layouts/layoutProps.js'
+import { setSlideMeta } from '../../core/editDeck.js'
+import { fieldKind, parseFieldValue, formatFieldValue } from '../schema.js'
+import { propSource } from '../model.js'
+import { Field, TextArea } from './Field.jsx'
+
+function PropControl({ name, schema, value, authored, onChange }) {
+  const kind = fieldKind(schema)
+  const [error, setError] = useState(null)
+  const commit = raw => {
+    const parsed = parseFieldValue(kind, raw, schema)
+    setError(parsed.error ?? null)
+    if (!parsed.error) onChange(parsed.value)
+  }
+  const errors = value === undefined ? [] : propertyErrors(value, schema, name)
+  const shown = error ?? errors[0]?.replace(`${name} `, '') ?? null
+  let control
+  if (kind === 'select') control = <select value={value ?? ''} onChange={e => commit(e.currentTarget.value)}>{schema.enum.map(option => <option key={option} value={option}>{String(option)}</option>)}</select>
+  else if (kind === 'checkbox') control = <label class="row" style={{ textTransform: 'none', letterSpacing: 0, color: '#e0e0e0', fontSize: '13px' }}><input type="checkbox" checked={Boolean(value)} onChange={e => commit(e.currentTarget.checked)} style={{ flex: '0 0 auto' }} /> <span>{value ? 'on' : 'off'}</span></label>
+  else if (kind === 'number') control = <input type="number" value={value ?? ''} min={schema.minimum} max={schema.maximum} step={schema.type === 'integer' ? 1 : 'any'} onInput={e => commit(e.currentTarget.value)} />
+  else if (kind === 'yaml') control = <TextArea rows={2} value={formatFieldValue(kind, value)} onInput={commit} />
+  else control = <input type="text" value={value ?? ''} onInput={e => commit(e.currentTarget.value)} />
+  return <Field label={schema.title ?? name} required={schema.required} hint={schema.description} error={shown}>
+    <div class="row">{control}{authored && <button class="btn is-small is-icon" title="Back to the default" aria-label="Back to the default" onClick={() => onChange(undefined)}><Icon name="close" size={14} /></button>}</div>
+  </Field>
+}
+
+export function PropsForm({ slide, manifest, slideEdit }) {
+  const properties = manifest?.properties ?? {}
+  if (!Object.keys(properties).length) return null
+  const values = resolveLayoutProps(manifest, slide.meta)
+  const write = (key, value) => slideEdit((deck, id, current) => {
+    if (propSource(current.authoredMeta, key) === 'legacy') return setSlideMeta(deck, id, { [key]: value })
+    const props = { ...(current.authoredMeta.props ?? {}) }
+    if (value === undefined) delete props[key]
+    else props[key] = value
+    return setSlideMeta(deck, id, { props: Object.keys(props).length ? props : undefined })
+  }, { group: `prop:${key}` })
+  return <>
+    <p class="section-title">Settings</p>
+    {Object.entries(properties).map(([name, schema]) => <PropControl key={name} name={name} schema={schema} value={values[name]} authored={Boolean(propSource(slide.authoredMeta, name))} onChange={value => write(name, value)} />)}
+  </>
+}

package/src/editor/components/RawSlideEditor.jsx

@@ -0,0 +1,9 @@
+import { h } from 'preact'
+import { replaceSlideSource, slideSourceText } from '../../core/editDeck.js'
+import { Field, TextArea } from './Field.jsx'
+
+export function RawSlideEditor({ deck, slide, slideEdit }) {
+  return <Field label="Slide Markdown" hint="everything between the --- lines">
+    <TextArea tall rows={18} value={slideSourceText(deck, slide.id)} onInput={text => slideEdit((d, id) => replaceSlideSource(d, id, text), { group: 'raw' })} />
+  </Field>
+}

package/src/editor/components/RegionEditor.jsx

@@ -0,0 +1,15 @@
+import { h } from 'preact'
+import { setRegion, removeRegion } from '../../core/editDeck.js'
+import { regionsFor } from '../model.js'
+import { Field, TextArea } from './Field.jsx'
+
+export function RegionEditor({ slide, manifest, slideEdit }) {
+  const regions = regionsFor(slide, manifest)
+  return <>
+    {regions.map(region => <Field key={region.name} label={region.name === 'body' ? 'Content' : region.name} required={region.required && !region.content.trim()}
+      hint={region.unknown ? 'not part of this layout' : region.description}>
+      <TextArea rows={region.name === 'body' ? 8 : 5} value={region.content} onInput={text => slideEdit((deck, id) => setRegion(deck, id, region.name, text), { group: `region:${region.name}` })} />
+      {region.unknown && <div><button class="btn is-small" onClick={() => slideEdit((deck, id) => removeRegion(deck, id, region.name))}>Remove this area</button></div>}
+    </Field>)}
+  </>
+}

package/src/editor/components/Resizer.jsx

@@ -0,0 +1,18 @@
+import { h } from 'preact'
+
+// Drag handle on the left edge of the inspector column.
+export function Resizer({ onResize, min = 320, max = () => window.innerWidth * 0.7 }) {
+  const start = event => {
+    event.preventDefault()
+    const move = e => onResize(Math.max(min, Math.min(max(), window.innerWidth - e.clientX)))
+    const stop = () => { window.removeEventListener('mousemove', move); window.removeEventListener('mouseup', stop); document.body.style.cursor = '' }
+    document.body.style.cursor = 'col-resize'
+    window.addEventListener('mousemove', move)
+    window.addEventListener('mouseup', stop)
+  }
+  return <div class="resizer" onMouseDown={start} title="Drag to resize" />
+}
+
+const KEY = 'mdeck-editor-inspector-width'
+export function readInspectorWidth() { try { const value = Number(localStorage.getItem(KEY)); return value >= 320 ? value : 400 } catch { return 400 } }
+export function storeInspectorWidth(width) { try { localStorage.setItem(KEY, String(width)) } catch {} }