mdeck 2.3.0

package/src/editor/api.js

@@ -0,0 +1,67 @@
+// Talks to the editing API served by src/build/editorPlugin.js.
+export class ConflictError extends Error {
+  constructor({ source, hash }) {
+    super('The file changed on disk')
+    this.conflict = true
+    this.source = source
+    this.hash = hash
+  }
+}
+
+async function failure(response) {
+  let message = response.statusText
+  try { message = (await response.json()).error ?? message } catch {}
+  return new Error(message)
+}
+
+export async function loadDeck() {
+  const response = await fetch('/__mdeck/deck', { headers: { Accept: 'application/json' } })
+  if (!response.ok) throw await failure(response)
+  return response.json()
+}
+
+export async function saveSource(source, base, { keepalive = false } = {}) {
+  const response = await fetch('/__mdeck/source', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ source, base }), keepalive })
+  if (response.status === 409) throw new ConflictError(await response.json())
+  if (!response.ok) throw await failure(response)
+  return response.json()
+}
+
+export function onServerEvent(name, callback) {
+  if (!import.meta.hot) return () => {}
+  import.meta.hot.on(name, callback)
+  return () => import.meta.hot.off?.(name, callback)
+}
+
+export async function loadExtension(kind, id) {
+  const response = await fetch(`/__mdeck/extension/${kind}/${id}`, { headers: { Accept: 'application/json' } })
+  if (!response.ok) throw await failure(response)
+  return response.json()
+}
+
+// files: { name: text | null }; null removes a file. Returns the new registry.
+export async function saveExtension(kind, id, files) {
+  const response = await fetch(`/__mdeck/extension/${kind}/${id}`, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ files }) })
+  if (!response.ok) throw await failure(response)
+  return response.json()
+}
+
+export async function deleteExtension(kind, id) {
+  const response = await fetch(`/__mdeck/extension/${kind}/${id}`, { method: 'DELETE', headers: { Accept: 'application/json' } })
+  if (!response.ok) throw await failure(response)
+  return response.json()
+}
+
+// The theme repository: its packs, with those installed beside the deck.
+export async function loadThemeIndex() {
+  const response = await fetch('/__mdeck/themes/index', { headers: { Accept: 'application/json' } })
+  if (!response.ok) throw await failure(response)
+  return response.json()
+}
+
+// Installs a pack into the deck's extensions folder. Returns the new registry.
+export async function installThemePack(id) {
+  const response = await fetch('/__mdeck/themes/install', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ id }) })
+  if (!response.ok) throw await failure(response)
+  return response.json()
+}

package/src/editor/components/App.jsx

@@ -0,0 +1,75 @@
+import { h } from 'preact'
+import { useEffect, useState } from 'preact/hooks'
+import { useDeckDocument } from '../useDeckDocument.js'
+import { installShortcuts } from '../keyboard.js'
+import { insertSlide, removeSlide, moveSlide, slideSourceText } from '../../core/editDeck.js'
+import { Outline } from './Outline.jsx'
+import { Preview } from './Preview.jsx'
+import { Inspector } from './Inspector.jsx'
+import { DeckSettings } from './DeckSettings.jsx'
+import { LayoutPicker } from './LayoutPicker.jsx'
+import { ConflictBanner } from './ConflictBanner.jsx'
+import { Resizer, readInspectorWidth, storeInspectorWidth } from './Resizer.jsx'
+import { DESIGN_URL, DESIGN_TAB } from '../designLink.js'
+import markUrl from '../../../assets/logo/mark.svg'
+
+const STATUS = { saved: 'Saved', unsaved: 'Unsaved changes', saving: 'Saving…', conflict: 'Conflict', error: 'Could not save' }
+
+export function App() {
+  const { state, stateRef, dispatch, edit, resolve, loadError, previewKey } = useDeckDocument()
+  const [picker, setPicker] = useState(false)
+  const [inspectorWidth, setInspectorWidth] = useState(readInspectorWidth)
+  const resize = width => { setInspectorWidth(width); storeInspectorWidth(width) }
+
+  const select = index => dispatch({ type: 'select', index })
+  const actions = {
+    undo: () => dispatch({ type: 'undo' }),
+    redo: () => dispatch({ type: 'redo' }),
+    prev: () => select(stateRef.current.selectedIndex - 1),
+    next: () => select(stateRef.current.selectedIndex + 1),
+    add: () => setPicker(true),
+    remove: () => { const s = stateRef.current; const slide = s.deck?.slides[s.selectedIndex]; if (slide) edit(d => removeSlide(d, d.slides[s.selectedIndex].id)) },
+    duplicate: () => { const s = stateRef.current; if (s.deck?.slides[s.selectedIndex]) edit(d => insertSlide(d, s.selectedIndex + 1, slideSourceText(d, d.slides[s.selectedIndex].id))) },
+    move: delta => { const s = stateRef.current; if (s.deck?.slides[s.selectedIndex]) edit(d => moveSlide(d, d.slides[s.selectedIndex].id, s.selectedIndex + delta)) },
+    pick: layout => { const s = stateRef.current; edit(d => insertSlide(d, s.deck.slides.length ? s.selectedIndex + 1 : 0, layout.starter)); setPicker(false) },
+    resolve,
+  }
+  useEffect(() => installShortcuts(actions), [])
+
+  if (loadError) return <div class="loading">Could not load the deck: {loadError}</div>
+  if (!state.loaded) return <div class="loading">Loading…</div>
+  const { deck, selectedIndex, tab } = state
+  const slide = deck.slides[selectedIndex]
+  const selection = { index: selectedIndex, slideId: slide?.id ?? null }
+
+  return <div class="editor">
+    <header class="editor-topbar">
+      <img src={markUrl} alt="" width="22" height="22" style={{ borderRadius: '5px' }} />
+      <h1 title={state.path}>{state.name}</h1>
+      <span class={`editor-status is-${state.status}`}>{STATUS[state.status]}{state.error ? `: ${state.error}` : ''}</span>
+      <span class="spacer" />
+      <button class="btn is-small" onClick={actions.undo} disabled={!state.history.past.length} title="Undo (⌘Z)">Undo</button>
+      <button class="btn is-small" onClick={actions.redo} disabled={!state.history.future.length} title="Redo (⇧⌘Z)">Redo</button>
+      <a class="btn is-small" href={DESIGN_URL} target={DESIGN_TAB} title="Make and change themes, palettes and layouts, on a sample deck">Design themes</a>
+      <a class="btn is-small" href="/?view=presenter" target="_blank" rel="noopener">Present</a>
+      <a class="btn is-small" href="/" target="_blank" rel="noopener">Open deck</a>
+    </header>
+    {state.status === 'conflict' && <ConflictBanner onReload={() => actions.resolve('reload')} onOverwrite={() => actions.resolve('overwrite')} />}
+    <div class="editor-main" style={{ gridTemplateColumns: `240px minmax(0, 1fr) ${inspectorWidth}px` }}>
+      <Outline deck={deck} manifests={state.manifests} diagnostics={state.diagnostics} selectedIndex={selectedIndex}
+        onSelect={select} onAdd={actions.add} onDuplicate={actions.duplicate} onRemove={actions.remove} onMove={actions.move} />
+      <Preview source={state.source} selection={selection} reloadKey={previewKey} total={deck.slides.length} width={deck.deckConfig.width ?? 1920} height={deck.deckConfig.height ?? 1080}
+        onState={index => { if (index !== stateRef.current.selectedIndex) select(index) }}
+        onRendered={info => dispatch({ type: 'previewRendered', ...info })} />
+      <aside class="editor-panel">
+        <Resizer onResize={resize} />
+        <div class="tabs">
+          <button class={tab === 'slide' ? 'is-active' : ''} onClick={() => dispatch({ type: 'setTab', tab: 'slide' })}>Slide</button>
+          <button class={tab === 'deck' ? 'is-active' : ''} onClick={() => dispatch({ type: 'setTab', tab: 'deck' })}>Deck</button>
+        </div>
+        {tab === 'deck' ? <DeckSettings state={state} edit={edit} /> : <Inspector state={state} dispatch={dispatch} edit={edit} />}
+      </aside>
+    </div>
+    {picker && <LayoutPicker layouts={state.manifests.layouts} onPick={actions.pick} onClose={() => setPicker(false)} />}
+  </div>
+}

package/src/editor/components/ConflictBanner.jsx

@@ -0,0 +1,10 @@
+import { h } from 'preact'
+
+export function ConflictBanner({ onReload, onOverwrite }) {
+  return <div class="banner">
+    <span>The slide file was changed by another program while you had unsaved edits here.</span>
+    <span class="spacer" />
+    <button class="btn is-small" onClick={onReload}>Use the file from disk</button>
+    <button class="btn is-small is-primary" onClick={onOverwrite}>Keep my edits</button>
+  </div>
+}

package/src/editor/components/DeckSettings.jsx

@@ -0,0 +1,108 @@
+import { h } from 'preact'
+import { Icon } from '../../components/Icon.jsx'
+import { setDeckConfig } from '../../core/editDeck.js'
+import { resolvePalette } from '../../extensions/appearance.js'
+import { palettesFor } from '../../extensions/tokens.js'
+import { deckDiagnostics } from '../model.js'
+import { Field } from './Field.jsx'
+import { Diagnostics } from './Diagnostics.jsx'
+import { PalettePicker } from './PalettePicker.jsx'
+import { LookThumbnail } from './LookThumbnail.jsx'
+import { designUrl, DESIGN_TAB } from '../designLink.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']] }
+const META = [['title', 'Title'], ['author', 'Author'], ['organization', 'Organization'], ['date', 'Date'], ['logo', 'Logo path']]
+const isColor = value => /^#[0-9a-f]{3,8}$/i.test(String(value ?? '').trim())
+
+export function DeckSettings({ state, edit }) {
+  const { deck, manifests, diagnostics, warnings } = state
+  const config = deck.deckConfig
+  const patch = (values, group) => edit(d => setDeckConfig(d, values), { group })
+  const themeId = config.theme ?? 'neue'
+  const theme = manifests.themes[themeId]
+  // The palettes this theme offers and the one the deck gets (its own, else the theme's).
+  // The theme's own palette comes first.
+  const offered = (theme ? palettesFor(theme, manifests.palettes) : Object.values(manifests.palettes))
+    .sort((a, b) => (b.id === theme?.palette) - (a.id === theme?.palette))
+  const shown = theme ? resolvePalette({ theme, palettes: manifests.palettes, palette: config.palette, appearance: config.appearance }) : { palette: null, appearance: 'light' }
+  const palette = shown.palette
+  const text = (key, value) => patch({ [key]: value === '' ? undefined : value }, `deck:${key}`)
+  const themeAppearance = theme?.appearance ?? 'light'
+  // A palette the new theme does not offer is dropped, so the deck gets that theme's own.
+  const offers = (next, paletteId) => !paletteId || !next || palettesFor(next, manifests.palettes).some(p => p.id === paletteId)
+  const chooseTheme = id => {
+    const keeps = offers(manifests.themes[id], config.palette)
+    patch({ theme: id, ...(keeps ? {} : { palette: undefined }) }, 'deck:theme')
+  }
+  const meta = (key, value) => { const next = { ...(config.meta ?? {}) }; if (value === '') delete next[key]; else next[key] = value; patch({ meta: Object.keys(next).length ? next : undefined }, `deck:meta:${key}`) }
+  const show = (key, value) => { const next = { ...(config.show ?? {}) }; if (value === '') delete next[key]; else next[key] = value; patch({ show: Object.keys(next).length ? next : undefined }, `deck:show:${key}`) }
+  const param = (key, value) => { const next = { ...(config.params ?? {}) }; if (value === '') delete next[key]; else next[key] = value; patch({ params: Object.keys(next).length ? next : undefined }, `deck:params:${key}`) }
+  const problems = deckDiagnostics(diagnostics, deck)
+  return <div class="form">
+    <Diagnostics items={[...warnings.map(message => ({ severity: 'warning', message, code: 'extension' })), ...problems]} />
+    <p class="section-title">Look</p>
+    <Field label="Theme" hint={theme?.description}>
+      <div class="theme-grid" role="radiogroup" aria-label="Theme">
+        {!theme && <button type="button" role="radio" aria-checked="true" class="theme-choice is-active"><span class="theme-choice-name">{themeId} (not found)</span></button>}
+        {Object.values(manifests.themes).map(t => <button type="button" key={t.id} role="radio" aria-checked={t.id === themeId} title={t.description}
+          class={`theme-choice${t.id === themeId ? ' is-active' : ''}`} onClick={() => chooseTheme(t.id)}>
+          <LookThumbnail theme={t.id} palette={offers(t, config.palette) ? config.palette ?? '' : ''} />
+          <span class="theme-choice-name">{t.title}{t.source === 'local' && <span class="palette-default"> · this deck</span>}</span>
+        </button>)}
+      </div>
+    </Field>
+    <Field label="Palette" hint={palette?.description}>
+      <PalettePicker offered={offered} selected={palette} defaultId={theme?.palette} appearance={shown.appearance}
+        onChoose={id => text('palette', id === theme?.palette ? '' : id)} />
+    </Field>
+    <Field label="Light or dark" hint="dark for dark rooms; inverted slides use the other one">
+      <div class="appearance-toggle" role="group" aria-label="Light or dark">
+        {['light', 'dark'].map(mode => <button type="button" key={mode} class={`btn${shown.appearance === mode ? ' is-active' : ''}`} aria-pressed={shown.appearance === mode}
+          onClick={() => text('appearance', mode === themeAppearance ? '' : mode)}>
+          <Icon name={mode === 'light' ? 'sun' : 'moon'} size={14} />{mode === 'light' ? 'Light' : 'Dark'}{mode === themeAppearance && <span class="palette-default"> · theme default</span>}
+        </button>)}
+      </div>
+    </Field>
+    <Field label="Make it your own" hint="opens the design page; a built-in one is copied into this deck's extensions folder first">
+      <div class="row" style={{ display: 'flex', gap: '6px', flexWrap: 'wrap' }}>
+        {theme && <DesignLink kind="theme" item={theme} />}
+        {palette && <DesignLink kind="palette" item={palette} />}
+      </div>
+    </Field>
+    {theme && Object.keys(theme.params).length > 0 && <>
+      <p class="section-title">Theme settings</p>
+      {Object.entries(theme.params).map(([key, def]) => {
+        const value = config.params?.[key]
+        const color = isColor(def.default)
+        return <Field key={key} label={def.title ?? key} hint={def.description}>
+          <div class="row">
+            {color ? <input type="color" value={isColor(value) ? value : def.default} onInput={e => param(key, e.currentTarget.value)} style={{ flex: '0 0 auto' }} /> : null}
+            <input type="text" value={value ?? ''} placeholder={def.default} onInput={e => param(key, e.currentTarget.value)} />
+            {value != null && <button class="btn is-small is-icon" title="Back to the default" aria-label="Back to the default" onClick={() => param(key, '')}><Icon name="close" size={14} /></button>}
+          </div>
+        </Field>
+      })}
+    </>}
+    <p class="section-title">About the talk</p>
+    {META.map(([key, label]) => <Field key={key} label={label}><input type="text" value={config.meta?.[key] ?? ''} onInput={e => meta(key, e.currentTarget.value)} /></Field>)}
+    <p class="section-title">Slide frame</p>
+    <div class="grid-2">
+      <Field label="Width"><input type="number" value={config.width ?? 1920} onInput={e => patch({ width: Number(e.currentTarget.value) || undefined }, 'deck:width')} /></Field>
+      <Field label="Height"><input type="number" value={config.height ?? 1080} onInput={e => patch({ height: Number(e.currentTarget.value) || undefined }, 'deck:height')} /></Field>
+      {Object.entries(SHOW).map(([key, [label, options]]) => <Field key={key} label={label}>
+        <select value={config.show?.[key] ?? ''} onChange={e => show(key, e.currentTarget.value)}><option value="">default</option>{options.map(o => <option key={o} value={o}>{o}</option>)}</select>
+      </Field>)}
+      <Field label="Language" hint="of the deck, e.g. en, de or de-CH"><input type="text" value={config.lang ?? ''} placeholder="en" onInput={e => text('lang', e.currentTarget.value)} /></Field>
+    </div>
+  </div>
+}
+
+// Opens the design page on the deck's own theme or palette, or on a new copy
+// of a built-in one.
+function DesignLink({ kind, item }) {
+  const own = item.source === 'local'
+  return <a class="btn is-small" target={DESIGN_TAB} href={designUrl(own ? { open: `${kind}:${item.id}` } : { copy: `${kind}:${item.id}` })}>
+    {own ? `Edit ${kind}` : `Customise ${kind}`} <span class="muted">{item.title}</span>
+  </a>
+}

package/src/editor/components/DesignApp.jsx

@@ -0,0 +1,252 @@
+import { h } from 'preact'
+import { useEffect, useRef, useState } from 'preact/hooks'
+import { useDeckDocument } from '../useDeckDocument.js'
+import { loadExtension, saveExtension, deleteExtension, installThemePack } from '../api.js'
+import { starterFiles, parseManifest, toModel, toRuntimeManifest, MANIFEST } from '../extensions.js'
+import { sampleDeck, sampleDataUrl } from '../sampleDeck.js'
+import { parseTarget } from '../designLink.js'
+import { palettesFor } from '../../extensions/tokens.js'
+import { parseSlides } from '../../core/parseSlides.js'
+import { setDeckConfig } from '../../core/editDeck.js'
+import { Icon } from '../../components/Icon.jsx'
+import { ExtensionsPanel, NewExtensionDialog } from './ExtensionsPanel.jsx'
+import { ExtensionEditor, BuiltInCard } from './ExtensionEditor.jsx'
+import { Preview } from './Preview.jsx'
+import { ConflictBanner } from './ConflictBanner.jsx'
+import { Resizer, readInspectorWidth, storeInspectorWidth } from './Resizer.jsx'
+import markUrl from '../../../assets/logo/mark.svg'
+
+const SAVE_DELAY = 500
+const SAMPLE = sampleDeck(sampleDataUrl())
+
+// The design page: makes and changes the deck's own themes and palettes,
+// previewed on a sample deck with every kind of slide, or on the deck itself.
+// Layouts are code, written by hand or by an assistant, not here. Choosing the deck's look happens in the editor's Deck
+// settings; here a finished theme or palette can be put to use in one step.
+export function DesignApp() {
+  const { state, dispatch, edit, resolve, loadError, previewKey } = useDeckDocument()
+  const [current, setCurrent] = useState(null) // { kind, id, source, files, dirty: {} }
+  const [status, setStatus] = useState('saved')
+  const [error, setError] = useState(null)
+  const [dialog, setDialog] = useState(null)
+  // What the preview shows around the extension being edited: a theme, a
+  // palette and light or dark, starting as the deck's.
+  const [view, setView] = useState(null)
+  const [onDeck, setOnDeck] = useState(false)
+  const [slide, setSlide] = useState(0)
+  const [inspectorWidth, setInspectorWidth] = useState(readInspectorWidth)
+  const resize = width => { setInspectorWidth(width); storeInspectorWidth(width) }
+  const timer = useRef(null)
+  const currentRef = useRef(current)
+  currentRef.current = current
+  const { manifests } = state
+  const deckConfig = state.deck?.deckConfig ?? {}
+  const offers = (theme, paletteId) => !paletteId || !theme || palettesFor(theme, manifests.palettes).some(p => p.id === paletteId)
+
+  // A theme to show a palette in: the given one where it offers it, else the
+  // palette's own theme, else the first that offers it.
+  const themeFor = (paletteId, preferred) => {
+    const palette = manifests.palettes[paletteId]
+    if (offers(manifests.themes[preferred], paletteId)) return preferred
+    if (palette?.theme && manifests.themes[palette.theme]) return palette.theme
+    return Object.values(manifests.themes).find(t => offers(t, paletteId))?.id ?? preferred
+  }
+
+  // The preview follows the extension opened: a theme is shown with the
+  // palette where it offers it, a palette in a theme that offers it.
+  const follow = (kind, id) => setView(prev => {
+    if (kind === 'theme') return { ...prev, theme: id, palette: offers(manifests.themes[id], prev.palette) ? prev.palette : '' }
+    if (kind === 'palette') {
+      return { ...prev, theme: themeFor(id, prev.theme), palette: id }
+    }
+    return prev
+  })
+
+  const show = (kind, id, extension) => {
+    setCurrent({ ...extension, dirty: {} }); setStatus('saved'); setError(null)
+    follow(kind, id)
+  }
+
+  const select = async (kind, id) => {
+    await flush()
+    try { show(kind, id, await loadExtension(kind, id)) } catch (caught) { setError(caught.message) }
+  }
+
+  const flush = async () => {
+    clearTimeout(timer.current)
+    const target = currentRef.current
+    if (!target || !Object.keys(target.dirty).length) return
+    setStatus('saving')
+    try {
+      const result = await saveExtension(target.kind, target.id, target.dirty)
+      dispatch({ type: 'setRegistry', registry: result.registry })
+      setCurrent(prev => prev && prev.id === target.id ? { ...prev, dirty: Object.fromEntries(Object.entries(prev.dirty).filter(([name, text]) => target.dirty[name] !== text)) } : prev)
+      setStatus('saved'); setError(null)
+    } catch (caught) { setStatus('error'); setError(caught.message) }
+  }
+
+  const onFiles = patch => {
+    setCurrent(prev => {
+      const files = { ...prev.files }
+      for (const [name, text] of Object.entries(patch)) { if (text === null) delete files[name]; else files[name] = text }
+      return { ...prev, files, dirty: { ...prev.dirty, ...patch } }
+    })
+    setStatus('unsaved')
+    clearTimeout(timer.current)
+    timer.current = setTimeout(flush, SAVE_DELAY)
+  }
+
+  const existing = new Set(Object.values(manifests).flatMap(byId => Object.keys(byId)))
+  const freeId = base => { let id = base, n = 2; while (existing.has(id)) id = `${base}-${n++}`; return id }
+  const copyDialog = (kind, from) => {
+    const item = manifests[`${kind}s`][from]
+    setDialog({ kind, initial: { from, title: `${item?.title ?? from} (custom)`, id: freeId(`${from}-custom`) } })
+  }
+
+  const create = async ({ kind, id, title, from }) => {
+    setDialog(null)
+    await flush()
+    const manifest = from ? manifests[`${kind}s`][from] : null
+    let fromFiles = {}
+    if (from) { try { fromFiles = (await loadExtension(kind, from)).files } catch {} }
+    const files = starterFiles(kind, id, title, manifest, fromFiles)
+    try {
+      const result = await saveExtension(kind, id, files)
+      dispatch({ type: 'setRegistry', registry: result.registry })
+      show(kind, id, { kind, id, source: 'local', dir: result.dir, files: result.files })
+    } catch (caught) { setError(caught.message) }
+  }
+
+  // A pack from the theme repository, installed beside the deck; its first
+  // theme or palette of the kind shown is opened.
+  const installOnline = async (pack, kind) => {
+    const result = await installThemePack(pack.id)
+    dispatch({ type: 'setRegistry', registry: result.registry })
+    const id = pack[`${kind}s`][0]
+    if (id) await select(kind, id)
+  }
+
+  const remove = async () => {
+    const target = current
+    try {
+      const result = await deleteExtension(target.kind, target.id)
+      dispatch({ type: 'setRegistry', registry: result.registry })
+      setCurrent(null)
+    } catch (caught) { setError(caught.message) }
+  }
+
+  // Once the deck is loaded: start from its look, then follow the link that
+  // opened the page (`?open=theme:mine`, `?copy=palette:lagoon`).
+  useEffect(() => {
+    if (!state.loaded || view) return
+    setView({ theme: deckConfig.theme ?? 'neue', palette: deckConfig.palette ?? '', appearance: deckConfig.appearance ?? '' })
+    const query = new URLSearchParams(location.search)
+    const open = parseTarget(query.get('open')), copy = parseTarget(query.get('copy'))
+    if (open || copy) history.replaceState(null, '', location.pathname)
+    if (open && open.kind !== 'layout') select(open.kind, open.id)
+    if (copy && copy.kind !== 'layout' && manifests[`${copy.kind}s`][copy.id]) { select(copy.kind, copy.id); copyDialog(copy.kind, copy.id) }
+  }, [state.loaded])
+
+  useEffect(() => () => clearTimeout(timer.current), [])
+  // Extension files changed on disk: pick up the new contents unless local
+  // edits are still waiting to be saved.
+  useEffect(() => {
+    const target = currentRef.current
+    if (!previewKey || !target || Object.keys(target.dirty).length) return
+    loadExtension(target.kind, target.id).then(fresh => setCurrent(prev => prev && prev.id === target.id && !Object.keys(prev.dirty).length ? { ...prev, ...fresh, dirty: {} } : prev)).catch(() => {})
+  }, [previewKey])
+  useEffect(() => { const handler = () => flush(); window.addEventListener('beforeunload', handler); return () => window.removeEventListener('beforeunload', handler) }, [])
+  useEffect(() => { document.title = state.name ? `Design · ${state.name}` : 'mdeck design' }, [state.name])
+
+  if (loadError) return <div class="loading">Could not load the deck: {loadError}</div>
+  if (!state.loaded || !view) return <div class="loading">Loading…</div>
+
+  // The preview: unsaved themes and palettes reach it as runtime overrides.
+  const parsed = current?.files?.[MANIFEST] ? parseManifest(current.files[MANIFEST]) : null
+  const model = parsed?.raw ? toModel({ ...parsed.raw, kind: current.kind }) : null
+  const editing = kind => current?.kind === kind && model ? current.id : null
+  let overrides = null, note = null
+  const themes = manifests.themes
+  const themeId = editing('theme') ?? (themes[view.theme] ? view.theme : 'neue')
+  const theme = editing('theme') ? toRuntimeManifest(model) : themes[themeId]
+  const offered = theme ? palettesFor(theme, manifests.palettes) : Object.values(manifests.palettes)
+  const paletteId = editing('palette') ?? (view.palette && offered.some(p => p.id === view.palette) ? view.palette : '')
+  if (editing('palette')) {
+    overrides = { palettes: { [current.id]: toRuntimeManifest(model) } }
+    if (theme && !offered.some(p => p.id === current.id)) note = `${theme.title} offers only its own colours, so the preview shows those. Choose another theme above the preview to see ${model.title || current.id}.`
+  }
+  if (editing('theme')) overrides = { themes: { [current.id]: { manifest: toRuntimeManifest(model), styles: current.files['styles.css'] ?? '' } } }
+  const source = onDeck ? state.source : SAMPLE
+  const config = { theme: themeId, palette: paletteId, ...(view.appearance ? { appearance: view.appearance } : {}) }
+  const appearance = view.appearance || theme?.appearance || 'light'
+  const slideCount = parseSlides(source).slides.length
+  const index = Math.min(slide, Math.max(0, slideCount - 1))
+
+  // Whether the deck uses the theme or palette being edited, and the one
+  // change that makes it.
+  const deckThemeId = deckConfig.theme ?? 'neue'
+  const deckTheme = themes[deckThemeId]
+  const deckPaletteId = deckConfig.palette && offers(deckTheme, deckConfig.palette) ? deckConfig.palette : deckTheme?.palette
+  const inDeck = current?.kind === 'theme' ? deckThemeId === current.id : current?.kind === 'palette' ? deckPaletteId === current.id : false
+  const useInDeck = () => {
+    if (current.kind === 'theme') edit(d => setDeckConfig(d, { theme: current.id, ...(offers(themes[current.id], deckConfig.palette) ? {} : { palette: undefined }) }), { group: 'design:use' })
+    else edit(d => setDeckConfig(d, { palette: current.id, ...(offers(deckTheme, current.id) ? {} : { theme: themeId }) }), { group: 'design:use' })
+  }
+
+  const bar = <>
+    {!state.designOnly && <div class="segmented" role="group" aria-label="Preview on">
+      <button type="button" class={!onDeck ? 'is-active' : ''} aria-pressed={!onDeck} onClick={() => { setOnDeck(false); setSlide(0) }}>Sample deck</button>
+      <button type="button" class={onDeck ? 'is-active' : ''} aria-pressed={onDeck} onClick={() => { setOnDeck(true); setSlide(0) }}>My deck</button>
+    </div>}
+    <span class="spacer" />
+    <label class="preview-choice">Theme
+      <select value={themeId} disabled={Boolean(editing('theme'))} onChange={e => follow('theme', e.currentTarget.value)}>
+        {editing('theme') && !themes[themeId] && <option value={themeId}>{model.title || themeId}</option>}
+        {Object.values(themes).map(t => <option key={t.id} value={t.id}>{t.title}</option>)}
+      </select>
+    </label>
+    <label class="preview-choice">Palette
+      <select value={paletteId} disabled={Boolean(editing('palette'))} onChange={e => setView(prev => ({ ...prev, palette: e.currentTarget.value }))}>
+        <option value="">{theme?.palette && manifests.palettes[theme.palette] ? `${manifests.palettes[theme.palette].title} (theme default)` : 'Theme default'}</option>
+        {editing('palette') && !offered.some(p => p.id === current.id) && <option value={current.id}>{model.title || current.id}</option>}
+        {offered.filter(p => p.id !== theme?.palette).map(p => <option key={p.id} value={p.id}>{p.title}</option>)}
+      </select>
+    </label>
+    <div class="appearance-toggle is-compact" role="group" aria-label="Light or dark">
+      {['light', 'dark'].map(mode => <button type="button" key={mode} title={mode === 'light' ? 'Light' : 'Dark'} aria-label={mode === 'light' ? 'Light' : 'Dark'} aria-pressed={appearance === mode}
+        class={`btn is-small is-icon${appearance === mode ? ' is-active' : ''}`} onClick={() => setView(prev => ({ ...prev, appearance: mode }))}><Icon name={mode === 'light' ? 'sun' : 'moon'} size={14} /></button>)}
+    </div>
+  </>
+
+  const usage = !state.designOnly && current && current.source === 'local' && <div class="design-usage">
+    {inDeck
+      ? <span><Icon name="check" size={14} /> The deck uses this {current.kind}.</span>
+      : <><span class="muted">The deck does not use this {current.kind}.</span><button class="btn is-small is-primary" onClick={useInDeck}>Use in my deck</button></>}
+  </div>
+
+  return <div class="editor">
+    <header class="editor-topbar">
+      <img src={markUrl} alt="" width="22" height="22" style={{ borderRadius: '5px' }} />
+      <h1 title={state.path}>Design <span class="muted">· {state.name}</span></h1>
+      <span class="spacer" />
+      {state.designOnly
+        ? <span class="muted" title={`${state.path}/extensions`}>Saved in {state.name}/extensions</span>
+        : <a class="btn is-small" href="/editor.html">Back to the slides</a>}
+    </header>
+    {state.status === 'conflict' && <ConflictBanner onReload={() => resolve('reload')} onOverwrite={() => resolve('overwrite')} />}
+    <div class="editor-main" style={{ gridTemplateColumns: `290px minmax(0, 1fr) ${inspectorWidth}px` }}>
+      <ExtensionsPanel registry={state.registry} owner={state.designOnly ? "This folder's" : "This deck's"} view={{ appearance, themeFor: id => themeFor(id, themeId), paletteFor: id => offers(themes[id], paletteId) ? paletteId : '' }} selected={current} onSelect={select} onCreate={kind => setDialog({ kind })} onInstall={installOnline} />
+      <Preview source={source} selection={{ index, slideId: null }} config={config} overrides={overrides} bar={bar} reloadKey={previewKey} total={slideCount}
+        width={deckConfig.width ?? 1920} height={deckConfig.height ?? 1080} onState={setSlide} onRendered={info => dispatch({ type: 'previewRendered', ...info })} />
+      <aside class="editor-panel">
+        <Resizer onResize={resize} />
+        {!current
+          ? <div class="form"><p class="empty">Choose one of {state.designOnly ? "this folder's" : "this deck's"} themes and palettes on the left to change it, or start from a built-in one. What you change is saved as you type, in the <code>extensions</code> folder {state.designOnly ? 'of this folder, where decks in it find them' : "beside the deck. The deck's look is chosen in the editor's Deck settings"}.{error ? ` ${error}` : ''}</p></div>
+          : current.source === 'local'
+            ? <>{usage}<ExtensionEditor extension={current} palettes={manifests.palettes} status={status} error={error} note={note} onFiles={onFiles} onDelete={remove} onCopy={() => copyDialog(current.kind, current.id)} /></>
+            : <BuiltInCard extension={current} manifest={manifests[`${current.kind}s`][current.id]} onCopy={() => copyDialog(current.kind, current.id)} />}
+      </aside>
+    </div>
+    {dialog && <NewExtensionDialog kind={dialog.kind} initial={dialog.initial ?? null} registry={state.registry} existing={existing} onCreate={create} onClose={() => setDialog(null)} />}
+  </div>
+}

package/src/editor/components/Diagnostics.jsx

@@ -0,0 +1,10 @@
+import { h } from 'preact'
+
+export function Diagnostics({ items, onPick }) {
+  if (!items.length) return null
+  return <ul class="diagnostics">
+    {items.map((d, i) => <li key={i} class={d.severity === 'warning' ? 'is-warning' : ''} onClick={onPick ? () => onPick(d) : undefined} style={onPick ? { cursor: 'pointer' } : undefined}>
+      <code>{d.line ? `line ${d.line}` : d.code}</code>{d.message}
+    </li>)}
+  </ul>
+}

package/src/editor/components/ExtensionEditor.jsx

@@ -0,0 +1,66 @@
+import { h } from 'preact'
+import { useState } from 'preact/hooks'
+import { parseManifest, toModel, toToml, MANIFEST } from '../extensions.js'
+import { PaletteForm, ThemeForm } from './ExtensionForms.jsx'
+import { Diagnostics } from './Diagnostics.jsx'
+import { Field, TextArea } from './Field.jsx'
+import { Swatches } from './PalettePicker.jsx'
+
+const KIND_LABEL = { palette: 'Palette', theme: 'Theme' }
+
+// Edits one of the deck's own extensions. `files` is the source of truth; the
+// form derives its model from extension.toml and writes TOML back.
+export function ExtensionEditor({ extension, palettes = {}, status, error, note, onFiles, onDelete, onCopy }) {
+  const [mode, setMode] = useState('form')
+  const [confirm, setConfirm] = useState(false)
+  const { kind, id, files } = extension
+  const parsed = parseManifest(files[MANIFEST] ?? '')
+  const model = parsed.raw ? toModel({ ...parsed.raw, kind }) : null
+  const change = patch => onFiles({ [MANIFEST]: toToml({ ...model, ...patch }) })
+  const file = (name, text) => onFiles({ [name]: text })
+  const problems = [
+    ...(parsed.error ? [{ severity: 'error', message: parsed.error, line: parsed.line }] : []),
+    ...(error ? [{ severity: 'error', message: error, code: 'save' }] : []),
+  ]
+  return <>
+    <div class="tabs">
+      <button class={mode === 'form' ? 'is-active' : ''} onClick={() => setMode('form')}>{KIND_LABEL[kind]}</button>
+      <button class={mode === 'raw' ? 'is-active' : ''} onClick={() => setMode('raw')}>extension.toml</button>
+      <span style={{ flex: 1 }} />
+      <span class={`editor-status is-${status}`} style={{ alignSelf: 'center' }}>{{ saved: 'Saved', unsaved: 'Unsaved', saving: 'Saving…', error: 'Not saved' }[status]}</span>
+    </div>
+    <div class="form">
+      <Diagnostics items={problems} />
+      {note && <p class="note">{note}</p>}
+      {mode === 'raw' || !model
+        ? <Field label="extension.toml"><TextArea tall rows={24} value={files[MANIFEST] ?? ''} onInput={text => file(MANIFEST, text)} /></Field>
+        : kind === 'palette' ? <PaletteForm model={model} onChange={change} />
+        : <ThemeForm model={model} files={files} palettes={palettes} onChange={change} onFile={file} />}
+      <div class="row" style={{ display: 'flex', gap: '8px', marginTop: '8px' }}>
+        {confirm
+          ? <><span style={{ color: '#f28b82' }}>Delete the folder extensions/{id}?</span><button class="btn is-small" onClick={onDelete}>Yes, delete</button><button class="btn is-small" onClick={() => setConfirm(false)}>Keep</button></>
+          : <><button class="btn is-small" onClick={onCopy}>Make a copy</button><button class="btn is-small" onClick={() => setConfirm(true)}>Delete this {kind}</button></>}
+      </div>
+    </div>
+  </>
+}
+
+// A built-in or installed extension: what it is, and the one way to change
+// it, a copy in the deck's extensions folder.
+export function BuiltInCard({ extension, manifest, onCopy }) {
+  const { kind, id, files } = extension
+  const user = extension.source === 'user'
+  return <div class="form">
+    <p class="section-title">{user ? `Installed ${kind}, for every deck` : `Built-in ${kind}`}</p>
+    <h2 class="builtin-title">{manifest?.title ?? id} <span class="muted">{id}</span></h2>
+    {manifest?.description && <p class="builtin-description">{manifest.description}</p>}
+    {kind === 'palette' && manifest && ['light', 'dark'].map(mode => <Field key={mode} label={mode === 'light' ? 'Light' : 'Dark'}><Swatches tokens={manifest[mode] ?? {}} /></Field>)}
+    {kind === 'theme' && manifest?.palette && <p class="builtin-description">Its default palette is <code>{manifest.palette}</code>{manifest.palettes?.length ? `; it offers only ${manifest.palettes.join(', ')}` : ''}.</p>}
+    <p class="note">{user ? `Installed ${kind}s are changed only by updating them (mdeck themes update --global).` : `Built-in ${kind}s cannot be changed.`} Copy this one into the deck's <code>extensions</code> folder and change the copy. The preview shows every change as you make it.</p>
+    <div class="row" style={{ display: 'flex', gap: '8px' }}><button class="btn is-primary" onClick={onCopy}>Copy to customise</button></div>
+    <details class="builtin-source">
+      <summary>{MANIFEST}</summary>
+      <pre>{files?.[MANIFEST] ?? ''}</pre>
+    </details>
+  </div>
+}