mdeck 2.3.0 → 3.0.0

package/src/build/themeCheck.js

@@ -11,6 +11,7 @@ import { resolve } from 'node:path'
 import { launchChrome } from './chrome.js'
 import { frameworkRoot } from '../paths.js'
 import { sampleDeck, SAMPLE_PICTURE } from '../editor/sampleDeck.js'
+import { loadRegistry } from '../extensions/discover.js'
 
 // Runs in the page before the deck: keeps what the page reports.
 const RECORDER = `window.__report = [];
@@ -80,18 +81,27 @@ const MEASURE = `(() => {
   return problems
 })()`
 
-// Builds the sample deck with `extensions` ({ id: folder }) beside it and
-// opens it in Chrome for `use({ open, ids })`. Installed user extensions are
-// left out, so the result depends only on what is given.
-export async function withSampleDeck({ extensions = {} } = {}, use) {
+// Builds the sample deck with `extensions` ({ id: folder }) beside it into
+// `outDir`, as a folder to host. Installed user extensions are left out, so
+// the result depends only on what is given. Returns the registry it used.
+export function buildSampleDeck({ extensions = {}, outDir }) {
   const temp = mkdtempSync(resolve(tmpdir(), 'mdeck-sample-'))
   try {
     writeFileSync(resolve(temp, 'slides.md'), sampleDeck())
     writeFileSync(resolve(temp, 'picture.svg'), SAMPLE_PICTURE)
     for (const [id, dir] of Object.entries(extensions)) cpSync(dir, resolve(temp, 'extensions', id), { recursive: true })
     mkdirSync(resolve(temp, 'home'))
-    execFileSync(process.execPath, [resolve(frameworkRoot, 'bin/mdeck.js'), 'build', resolve(temp, 'slides.md'), '-o', resolve(temp, 'out/index.html')],
+    execFileSync(process.execPath, [resolve(frameworkRoot, 'bin/mdeck.js'), 'build', resolve(temp, 'slides.md'), '-o', resolve(outDir, 'index.html')],
       { cwd: temp, stdio: 'pipe', env: { ...process.env, MDECK_HOME: resolve(temp, 'home') } })
+    return loadRegistry(resolve(temp, 'slides.md'), { userRoot: null })
+  } finally { rmSync(temp, { recursive: true, force: true }) }
+}
+
+// The sample deck built with `extensions`, opened in Chrome for `use({ open })`.
+export async function withSampleDeck({ extensions = {} } = {}, use) {
+  const temp = mkdtempSync(resolve(tmpdir(), 'mdeck-sample-'))
+  try {
+    buildSampleDeck({ extensions, outDir: resolve(temp, 'out') })
     const browser = await launchChrome({ dir: resolve(temp, 'out') })
     try {
       // A page with the deck in a look, recording what it reports.

package/src/cli/args.js

@@ -7,7 +7,7 @@ const commands = {
   run: { ...common, '--network': flag, '--server': optional, max: 1 },
   edit: { ...common, max: 1 },
   design: { ...common, max: 1 },
-  themes: { '--global': flag, '--force': flag, '--check': flag, '--output': value, '-o': '--output', max: 4 },
+  themes: { '--local': flag, '--global': flag, '--force': flag, '--check': flag, '--output': value, '-o': '--output', max: 4 },
   build: { ...output, '--single-file': flag, '--launchers': flag, '--reader': flag, '--notes': flag, max: 1 },
   send: { ...output, '--notes': flag, '--no-pdf': flag, max: 1 },
   pdf: { ...output, max: 1 },

package/src/cli/index.js

@@ -313,9 +313,9 @@ const HELP = `
     ${c.green}mdeck edit${c.reset} [slides.md]                    Edit slides in the browser; saves to the file
     ${c.green}mdeck design${c.reset} [folder | slides.md]         Look at and fine-tune themes and palettes on a sample deck;
                                               saves to the folder's extensions/ (default: this folder)
-    ${c.green}mdeck themes${c.reset} search [words]               Themes and palettes from the online repository
-      install <pack> [slides.md | folder]   into the deck's extensions/ (--global: for every deck)
-      remove <pack>, update [pack], list    --force replaces files changed by hand
+    ${c.green}mdeck themes${c.reset} search [words]               Themes and palettes: those that come with mdeck and the online repository
+      install <pack>, remove <pack>         for every deck; add slides.md or --local for one deck only
+      update [pack], list                   --force replaces files changed by hand
 
   ${c.dim}Make something to hand out${c.reset}
     ${c.green}mdeck build${c.reset} [slides.md] [-o dir/index.html]   A folder to host

package/src/cli/themes.js

@@ -1,103 +1,129 @@
-// `mdeck themes`: themes and palettes from the theme repository. Installs go
-// into a deck's extensions/ folder, or with --global into the user's
-// (~/.mdeck/extensions), where every deck finds them. `build` is for the
-// repository itself: it checks the packs and writes what is served.
+// `mdeck themes`: every theme and palette comes in a pack. Some packs come
+// with mdeck (the starter set), the others from the theme repository.
+// Packs are installed for every deck (~/.mdeck/extensions) unless a deck or
+// folder is named, or --local is given: then into the extensions folder
+// beside it, so the slide folder carries them. A pack that comes with mdeck
+// is removed by hiding it, and installed again from mdeck's own copy, so
+// that works offline. `build` is for the repository itself.
 import { existsSync, readFileSync, statSync, writeFileSync } from 'node:fs'
 import { createRequire } from 'node:module'
 import { dirname, resolve } from 'node:path'
-import { builtInRegistry, loadRegistry, userExtensionsDir } from '../extensions/discover.js'
+import { bundledPacks, loadRegistry, manifestsOf, removedPacks, userExtensionsDir } from '../extensions/discover.js'
+import { target, packsAt, installHere, removeHere } from '../extensions/installed.js'
+import { palettesFor } from '../extensions/tokens.js'
 import { ManifestError } from '../extensions/manifest.js'
-import { buildRepository, compareVersions, fetchIndex, findPack, installedPacks, installFromIndex, PackError, removePack } from '../extensions/packs.js'
+import { buildRepository, compareVersions, findPack, installedPacks, installWithRequirements, loadCatalogue, PackError } from '../extensions/packs.js'
 
 const VERSION = createRequire(import.meta.url)('../../package.json').version
 
-const USAGE = 'search [words] | install <pack> | remove <pack> | update [pack] | list, each with [slides.md or folder] and --global; build <packs> -o <out> [--check]'
+const USAGE = 'search [words] | install <pack> | remove <pack> | update [pack] | list — for every deck, or beside a deck with [slides.md or folder] or --local; build <packs> -o <out> [--check]'
 
-// The built-in themes and palettes a pack may name and must not reuse the ids of.
-const builtIns = () => {
-  const registry = builtInRegistry()
-  return { themes: registry.themes, palettes: registry.palettes }
-}
-
-// The extensions folder a command works on, and a slides path to load the
-// registry with: the user's with --global, else beside the deck or in the folder.
-function target(where, global) {
-  if (global) return { root: userExtensionsDir(), deck: resolve('slides.md'), label: 'for every deck' }
-  const given = resolve(where ?? '.')
-  const folder = existsSync(given) && statSync(given).isDirectory() ? given : dirname(given)
-  return { root: resolve(folder, 'extensions'), deck: existsSync(given) && !statSync(given).isDirectory() ? given : resolve(folder, 'slides.md'), label: `in ${resolve(folder, 'extensions')}` }
+// Every theme with the palettes it offers, and every palette's colours, each
+// marked with its pack and whether it comes with mdeck.
+function looksOf(registry, index) {
+  const packOf = Object.fromEntries(index.packs.flatMap(p => [...p.themes, ...p.palettes].map(id => [id, p])))
+  const palettes = manifestsOf(registry, 'palette')
+  const colours = tokens => Object.fromEntries(['--bg', '--surface', '--ink', '--accent', '--accent-2'].map(key => [key, tokens?.[key] ?? null]))
+  const origin = id => ({ pack: packOf[id]?.id ?? null, bundled: Boolean(packOf[id]?.bundled) })
+  return {
+    mdeck: VERSION,
+    themes: Object.values(manifestsOf(registry, 'theme')).map(theme => ({ id: theme.id, title: theme.title, description: theme.description ?? '', ...origin(theme.id),
+      palette: theme.palette, appearance: theme.appearance ?? 'light', palettes: palettesFor(theme, palettes).map(p => p.id) })),
+    palettes: Object.values(palettes).map(palette => ({ id: palette.id, title: palette.title, description: palette.description ?? '', ...origin(palette.id),
+      light: colours(palette.light), dark: colours(palette.dark) })),
+  }
 }
 
-const install = (index, entry, { root, force }) => installFromIndex(index, entry, { root, known: builtIns(), mdeckVersion: VERSION, force })
-
 export async function runThemes({ positionals, flag, output, ui: { ok, err, tip, c } }) {
   const [sub = 'search', ...rest] = positionals
-  const global = flag('--global'), force = flag('--force')
+  const local = flag('--local'), force = flag('--force')
+  const warnOffline = catalogue => { if (catalogue.offline) tip(`The theme repository could not be reached (${catalogue.offline}); showing the packs that come with mdeck.`) }
+  const what = step => [step.themes?.length ? `themes ${step.themes.join(', ')}` : '', step.palettes?.length ? `palettes ${step.palettes.join(', ')}` : ''].filter(Boolean).join('; ')
   try {
     if (sub === 'search') {
-      const index = await fetchIndex()
+      const catalogue = await loadCatalogue({ bundled: bundledPacks({ all: true }) })
+      warnOffline(catalogue)
       const words = rest.map(word => word.toLowerCase())
-      const local = installedPacks(target(null, false).root), mine = installedPacks(userExtensionsDir())
-      const found = index.packs.filter(pack => words.every(word => [pack.id, pack.title, pack.description, ...pack.themes, ...pack.palettes].join(' ').toLowerCase().includes(word)))
-      if (!found.length) return tip(`No pack matches${words.length ? ` "${words.join(' ')}"` : ''} in ${index.url}`)
+      const mine = packsAt(target(null, false)), here = installedPacks(target('.', true).root), hidden = removedPacks()
+      const found = catalogue.packs.filter(pack => words.every(word => [pack.id, pack.title, pack.description, ...pack.themes, ...pack.palettes].join(' ').toLowerCase().includes(word)))
+      if (!found.length) return tip(`No pack matches${words.length ? ` "${words.join(' ')}"` : ''}`)
       for (const pack of found) {
-        const have = local[pack.id] ?? mine[pack.id]
-        const state = !have ? '' : compareVersions(pack.version, have.version) > 0 ? ` ${c.yellow}(${have.version} installed, update available)${c.reset}` : ` ${c.green}(installed)${c.reset}`
+        const have = here[pack.id] ?? mine[pack.id]
+        const state = hidden.includes(pack.id) && !have ? ` ${c.dim}(comes with mdeck, removed)${c.reset}`
+          : !have ? (pack.bundled || pack.bundledVersion ? ` ${c.dim}(comes with mdeck)${c.reset}` : '')
+          : have.bundled ? (pack.bundled ? ` ${c.green}(comes with mdeck)${c.reset}` : ` ${c.yellow}(comes with mdeck as ${pack.bundledVersion}, update available)${c.reset}`)
+          : compareVersions(pack.version, have.version) > 0 ? ` ${c.yellow}(${have.version} installed, update available)${c.reset}` : ` ${c.green}(installed)${c.reset}`
         console.log(`\n  ${c.cyan}${pack.id}${c.reset} ${pack.version} — ${pack.title}${state}`)
         if (pack.description) console.log(`    ${pack.description}`)
-        console.log(`    ${c.dim}${[pack.themes.length ? `themes: ${pack.themes.join(', ')}` : '', pack.palettes.length ? `palettes: ${pack.palettes.join(', ')}` : ''].filter(Boolean).join(' · ')} · by ${pack.author}, ${pack.license}${c.reset}`)
+        console.log(`    ${c.dim}${[pack.themes.length ? `themes: ${pack.themes.join(', ')}` : '', pack.palettes.length ? `palettes: ${pack.palettes.join(', ')}` : '', pack.requires?.length ? `requires: ${pack.requires.join(', ')}` : ''].filter(Boolean).join(' · ')} · by ${pack.author}, ${pack.license}${c.reset}`)
       }
       console.log()
-      return tip('Install one with: mdeck themes install <pack> [slides.md]   (--global for every deck)')
+      return tip('Install one for every deck with: mdeck themes install <pack>   (beside a deck: add slides.md or --local)')
     }
 
     if (sub === 'install') {
       const [id, where] = rest
-      if (!id) { err('Name a pack.'); return tip('Usage: mdeck themes install <pack> [slides.md or folder] [--global]; mdeck themes search lists them.') }
-      const { root, deck, label } = target(where, global)
-      const index = await fetchIndex()
-      const result = await install(index, findPack(index, id), { root, force })
-      loadRegistry(deck)
-      ok(`${result.replaced ? `Updated ${id} from ${result.replaced}` : `Installed ${id}`} ${label}`)
-      if (result.themes.length) tip(`Themes: ${result.themes.join(', ')}. Use one with "theme: ${result.themes[0]}" in the deck settings.`)
-      if (result.palettes.length) tip(`Palettes: ${result.palettes.join(', ')}. Use one with "palette: ${result.palettes[0]}".`)
+      if (!id) { err('Name a pack.'); return tip('Usage: mdeck themes install <pack> [slides.md or folder] [--local]; mdeck themes search lists them.') }
+      const at = target(where, local)
+      const catalogue = await loadCatalogue({ bundled: bundledPacks({ all: true }) })
+      warnOffline(catalogue)
+      findPack(catalogue, id)
+      for (const step of await installHere(catalogue, id, at, { mdeckVersion: VERSION, force })) {
+        if (step.kept) tip(`${step.id} ${step.version} is there already`)
+        else if (step.bundled) (step.wasRemoved ? ok(`${step.id} comes with mdeck and is offered again ${at.label}`) : tip(`${step.id} comes with mdeck and is installed ${at.label} already`))
+        else ok(`${step.replaced ? `Updated ${step.id} from ${step.replaced} to ${step.version}` : `Installed ${step.id} ${step.version}`} ${at.label}${what(step) ? `: ${what(step)}` : ''}`)
+      }
+      loadRegistry(at.deck)
+      const pack = findPack(catalogue, id)
+      if (pack.themes.length) tip(`Use it with "theme: ${pack.themes[0]}" at the top of a slide file.`)
+      else if (pack.palettes.length) tip(`Use it with "palette: ${pack.palettes[0]}" at the top of a slide file.`)
       return tip('Look at it on a sample deck: mdeck design')
     }
 
     if (sub === 'remove') {
       const [id, where] = rest
-      if (!id) { err('Name a pack.'); return tip('Usage: mdeck themes remove <pack> [slides.md or folder] [--global]') }
-      const { root, label } = target(where, global)
-      const pack = removePack(id, { root, force })
-      return ok(`Removed ${id} ${label} (${pack.folders.join(', ')})`)
+      if (!id) { err('Name a pack.'); return tip('Usage: mdeck themes remove <pack> [slides.md or folder] [--local]') }
+      const at = target(where, local)
+      const catalogue = await loadCatalogue({ bundled: bundledPacks({ all: true }), online: false })
+      const removed = removeHere(catalogue, id, at, { force })
+      if (removed.folders.length) ok(`Removed ${id} ${at.label} (${removed.folders.join(', ')})`)
+      if (removed.hidden) ok(`${id} comes with mdeck and is no longer offered; mdeck themes install ${id} brings it back`)
+      return
     }
 
     if (sub === 'update') {
       const [first, second] = rest
       const named = first && !/\.md$/i.test(first) && !(existsSync(first) && statSync(first).isDirectory()) ? first : null
-      const { root, deck, label } = target(named ? second : first, global)
-      const installed = installedPacks(root)
+      const at = target(named ? second : first, local)
+      const catalogue = await loadCatalogue({ bundled: bundledPacks({ all: true }) })
+      warnOffline(catalogue)
+      const installed = packsAt(at)
       const ids = named ? [named] : Object.keys(installed)
-      if (!ids.length) return tip(`No packs installed ${label}`)
-      const index = await fetchIndex()
+      if (!ids.length) return tip(`No packs installed ${at.label}`)
       for (const id of ids) {
-        if (!installed[id]) throw new PackError(`The pack ${id} is not installed ${label}`)
-        const entry = findPack(index, id)
-        if (compareVersions(entry.version, installed[id].version) <= 0) { tip(`${id} ${installed[id].version} is up to date`); continue }
-        await install(index, entry, { root, force })
-        ok(`Updated ${id} ${installed[id].version} → ${entry.version}`)
+        const have = installed[id]
+        if (!have) throw new PackError(`The pack ${id} is not installed ${at.label}`)
+        const entry = findPack(catalogue, id)
+        // A bundled pack is up to date until the repository has a newer one.
+        if (have.bundled ? entry.bundled : compareVersions(entry.version, have.version) <= 0) { tip(`${id} ${have.version ?? entry.version} is up to date`); continue }
+        const steps = await installWithRequirements(catalogue, id, { root: at.root, mdeckVersion: VERSION, force, has: pack => pack !== id && Object.hasOwn(packsAt(at), pack) })
+        ok(`Updated ${id} ${have.version ?? entry.bundledVersion} → ${steps.at(-1).version}`)
       }
-      loadRegistry(deck)
+      loadRegistry(at.deck)
       return
     }
 
     if (sub === 'list') {
       const [where] = rest
-      for (const [label, root] of [['This folder', target(where, false).root], ['Every deck (--global)', userExtensionsDir()]]) {
+      const hidden = removedPacks()
+      console.log(`\n  ${c.bold}Come with mdeck${c.reset}`)
+      for (const id of Object.keys(bundledPacks({ all: true }))) console.log(`    ${c.cyan}${id}${c.reset}${hidden.includes(id) ? ` ${c.dim}(removed; mdeck themes install ${id} brings it back)${c.reset}` : ''}`)
+      const sections = [['For every deck', userExtensionsDir()], ...(where || local ? [['Beside the deck', target(where, true).root]] : [])]
+      for (const [label, root] of sections) {
         const packs = installedPacks(root)
         console.log(`\n  ${c.bold}${label}${c.reset} ${c.dim}${root}${c.reset}`)
         if (!Object.keys(packs).length) console.log(`    ${c.dim}none${c.reset}`)
-        for (const [id, pack] of Object.entries(packs)) console.log(`    ${c.cyan}${id}${c.reset} ${pack.version} — ${pack.folders.join(', ')}`)
+        for (const [id, pack] of Object.entries(packs)) console.log(`    ${c.cyan}${id}${c.reset} ${pack.version} — ${pack.folders.join(', ')}${pack.requires.length ? ` ${c.dim}(requires ${pack.requires.join(', ')})${c.reset}` : ''}`)
       }
       console.log()
       return
@@ -107,14 +133,14 @@ export async function runThemes({ positionals, flag, output, ui: { ok, err, tip,
       const [packsDir] = rest
       const out = output()
       if (!packsDir || !out) { err('Name the packs folder and the output folder.'); return tip('Usage: mdeck themes build <packs folder> -o <output folder> [--check]') }
-      const index = buildRepository(resolve(packsDir), resolve(out), { known: builtIns() })
-      // Every theme and palette of every pack, from the pack folders.
-      const extensions = Object.fromEntries(index.packs.flatMap(pack => [...pack.themes, ...pack.palettes].map(id => [id, resolve(packsDir, pack.id, id)])))
-      const paletteTheme = id => {
-        const text = readFileSync(resolve(extensions[id], 'extension.toml'), 'utf8')
-        return /^theme\s*=\s*"([^"]+)"/m.exec(text)?.[1] ?? 'neue'
-      }
-      const { checkLooks, renderPreviews } = await import('../build/themeCheck.js')
+      const bundled = bundledPacks({ all: true })
+      const index = buildRepository(resolve(packsDir), resolve(out), { bundled })
+      // The repository's own themes and palettes go beside the sample deck;
+      // the bundled ones are in it already.
+      const extensions = Object.fromEntries(index.packs.filter(pack => !pack.bundled).flatMap(pack => [...pack.themes, ...pack.palettes].map(id => [id, resolve(packsDir, pack.id, id)])))
+      const dirOf = id => extensions[id] ?? resolve(bundled[index.packs.find(pack => [...pack.themes, ...pack.palettes].includes(id)).id], id)
+      const paletteTheme = id => /^theme\s*=\s*"([^"]+)"/m.exec(readFileSync(resolve(dirOf(id), 'extension.toml'), 'utf8'))?.[1] ?? 'neue'
+      const { checkLooks, renderPreviews, buildSampleDeck } = await import('../build/themeCheck.js')
       const looks = index.packs.flatMap(pack => [...pack.themes.map(theme => ({ id: theme, theme })), ...pack.palettes.map(palette => ({ id: palette, theme: paletteTheme(palette), palette }))])
       if (flag('--check')) {
         const failures = await checkLooks(looks, { extensions })
@@ -125,6 +151,10 @@ export async function runThemes({ positionals, flag, output, ui: { ok, err, tip,
       await renderPreviews(looks.map(look => ({ file: resolve(out, 'previews', `${look.id}.webp`), theme: look.theme, palette: look.palette ?? '', slide: look.palette ? 3 : 1 })), { extensions })
       for (const pack of index.packs) pack.previews = Object.fromEntries([...pack.themes, ...pack.palettes].map(id => [id, `previews/${id}.webp`]))
       writeFileSync(resolve(out, 'index.json'), JSON.stringify(index, null, 2) + '\n')
+      // For the repository's theme browser: the sample deck with every theme
+      // and palette, and what each theme offers.
+      const registry = buildSampleDeck({ extensions, outDir: resolve(out, 'preview') })
+      writeFileSync(resolve(out, 'looks.json'), JSON.stringify(looksOf(registry, index), null, 2) + '\n')
       return ok(`Built ${index.packs.length} pack(s) into ${resolve(out)}`)
     }
 
@@ -137,4 +167,3 @@ export async function runThemes({ positionals, flag, output, ui: { ok, err, tip,
     process.exitCode = 1
   }
 }
-

package/src/core/validateDeck.js

@@ -3,6 +3,7 @@ import { isPlainObject, RENAMED_DECK_KEYS } from './parseSlides.js'
 import { palettesFor } from '../extensions/tokens.js'
 import { LABEL_KEYS, CALLOUT_TYPES } from './labels.js'
 import { resolveLayoutProps, propertyErrors } from '../layouts/layoutProps.js'
+import { movedHint } from '../extensions/moved.js'
 
 // `layouts`, `themes` and `palettes` are manifest maps from the extension
 // registry (see src/extensions/discover.js). Checks for a kind are skipped when
@@ -49,11 +50,12 @@ export function validateDeck(deck, { layouts = null, themes = null, palettes = n
       if (config.show[key] != null && !values.includes(config.show[key])) add('invalid-config', `show.${key} must be one of: ${values.join(', ')}`, deck.configSource?.start)
     }
   }
-  if (themes && config.theme != null && !Object.hasOwn(themes, config.theme)) add('unknown-theme', `Unknown theme "${config.theme}"; available: ${Object.keys(themes).join(', ')}`, deck.configSource?.start)
+  if (themes && config.theme != null && !Object.hasOwn(themes, config.theme)) add('unknown-theme', movedHint('theme', config.theme) ?? `Unknown theme "${config.theme}"; available: ${Object.keys(themes).join(', ') || 'none'}. mdeck themes search lists more to install`, deck.configSource?.start)
+  if (themes && config.theme == null && !Object.hasOwn(themes, 'neue')) add('unknown-theme', `This deck sets no theme, so it uses neue, which is not installed: run mdeck themes install neue, or set a theme${Object.keys(themes).length ? ` (${Object.keys(themes).join(', ')})` : ''}`, deck.configSource?.start ?? 0)
   if (palettes && themes && config.palette != null) {
     const theme = themes[config.theme ?? 'neue']
     const offered = theme ? palettesFor(theme, palettes).map(palette => palette.id) : Object.keys(palettes)
-    if (!Object.hasOwn(palettes, config.palette)) add('unknown-palette', `Unknown palette "${config.palette}"; available: ${offered.join(', ')}`, deck.configSource?.start)
+    if (!Object.hasOwn(palettes, config.palette)) add('unknown-palette', movedHint('palette', config.palette) ?? `Unknown palette "${config.palette}"; available: ${offered.join(', ')}`, deck.configSource?.start)
     else if (theme && !offered.includes(config.palette)) add('unknown-palette', `The theme "${theme.id}" does not offer the palette "${config.palette}"; available: ${offered.join(', ')}`, deck.configSource?.start)
   }
   if (themes && config.params != null && isPlainObject(config.params) && Object.hasOwn(themes, config.theme ?? 'neue')) {

package/src/editor/api.js

@@ -59,9 +59,17 @@ export async function loadThemeIndex() {
   return response.json()
 }
 
-// Installs a pack into the deck's extensions folder. Returns the new registry.
+// Installs a pack for every deck, with the packs it requires. 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()
 }
+
+// Removes a pack for every deck (one that comes with mdeck is hidden).
+export async function removeThemePack(id) {
+  const response = await fetch('/__mdeck/themes/remove', { 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

@@ -10,7 +10,7 @@ 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 { designUrl, DESIGN_TAB, launchPageUrl } 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' }
@@ -20,6 +20,7 @@ export function App() {
   const [picker, setPicker] = useState(false)
   const [inspectorWidth, setInspectorWidth] = useState(readInspectorWidth)
   const resize = width => { setInspectorWidth(width); storeInspectorWidth(width) }
+  const [home] = useState(launchPageUrl)
 
   const select = index => dispatch({ type: 'select', index })
   const actions = {
@@ -50,7 +51,8 @@ export function App() {
       <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>
+      {home && <a class="btn is-small" href={home}>Launch page</a>}
+      <a class="btn is-small" href={designUrl()} 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>

package/src/editor/components/DesignApp.jsx

@@ -1,10 +1,10 @@
 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 { loadExtension, saveExtension, deleteExtension, installThemePack, removeThemePack } from '../api.js'
 import { starterFiles, parseManifest, toModel, toRuntimeManifest, MANIFEST } from '../extensions.js'
 import { sampleDeck, sampleDataUrl } from '../sampleDeck.js'
-import { parseTarget } from '../designLink.js'
+import { parseTarget, launchPageUrl } from '../designLink.js'
 import { palettesFor } from '../../extensions/tokens.js'
 import { parseSlides } from '../../core/parseSlides.js'
 import { setDeckConfig } from '../../core/editDeck.js'
@@ -36,6 +36,7 @@ export function DesignApp() {
   const [slide, setSlide] = useState(0)
   const [inspectorWidth, setInspectorWidth] = useState(readInspectorWidth)
   const resize = width => { setInspectorWidth(width); storeInspectorWidth(width) }
+  const [home] = useState(launchPageUrl)
   const timer = useRef(null)
   const currentRef = useRef(current)
   currentRef.current = current
@@ -126,6 +127,13 @@ export function DesignApp() {
     if (id) await select(kind, id)
   }
 
+  // Removes a pack for every deck; the deck's look is not changed.
+  const removeOnline = async pack => {
+    const result = await removeThemePack(pack)
+    dispatch({ type: 'setRegistry', registry: result.registry })
+    setCurrent(null)
+  }
+
   const remove = async () => {
     const target = current
     try {
@@ -232,6 +240,7 @@ export function DesignApp() {
       {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>}
+      {home && <a class="btn is-small" href={home}>Launch page</a>}
     </header>
     {state.status === 'conflict' && <ConflictBanner onReload={() => resolve('reload')} onOverwrite={() => resolve('overwrite')} />}
     <div class="editor-main" style={{ gridTemplateColumns: `290px minmax(0, 1fr) ${inspectorWidth}px` }}>
@@ -244,7 +253,7 @@ export function DesignApp() {
           ? <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)} />}
+            : <BuiltInCard extension={current} manifest={manifests[`${current.kind}s`][current.id]} onCopy={() => copyDialog(current.kind, current.id)} onRemovePack={removeOnline} />}
       </aside>
     </div>
     {dialog && <NewExtensionDialog kind={dialog.kind} initial={dialog.initial ?? null} registry={state.registry} existing={existing} onCreate={create} onClose={() => setDialog(null)} />}

package/src/editor/components/ExtensionEditor.jsx

@@ -47,17 +47,28 @@ export function ExtensionEditor({ extension, palettes = {}, status, error, note,
 
 // 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 }) {
+export function BuiltInCard({ extension, manifest, onCopy, onRemovePack }) {
   const { kind, id, files } = extension
   const user = extension.source === 'user'
+  const pack = manifest?.pack ?? null
+  const [removing, setRemoving] = useState(null)
   return <div class="form">
-    <p class="section-title">{user ? `Installed ${kind}, for every deck` : `Built-in ${kind}`}</p>
+    <p class="section-title">{user ? `Installed for every deck` : `Comes with mdeck`}{pack ? ` · pack ${pack}` : ''}</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>
+    <p class="note">{user ? `Installed ${kind}s change only when they are updated (mdeck themes update).` : `This ${kind} cannot be changed where it is.`} 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', flexWrap: 'wrap' }}>
+      <button class="btn is-primary" onClick={onCopy}>Copy to customise</button>
+      {pack && onRemovePack && (removing === 'confirm'
+        ? <><span class="muted" style={{ alignSelf: 'center' }}>Remove the pack {pack} for every deck?</span>
+          <button class="btn" onClick={async () => { setRemoving('busy'); try { await onRemovePack(pack); setRemoving(null) } catch (error) { setRemoving({ error: error.message }) } }}>Remove</button>
+          <button class="btn" onClick={() => setRemoving(null)}>Keep</button></>
+        : <button class="btn" disabled={removing === 'busy'} onClick={() => setRemoving('confirm')}>Remove pack</button>)}
+    </div>
+    {removing?.error && <p class="online-error">{removing.error}</p>}
+    {pack && !user && <p class="hint-text">Removing a pack that comes with mdeck hides it; install it again from “More to install”.</p>}
     <details class="builtin-source">
       <summary>{MANIFEST}</summary>
       <pre>{files?.[MANIFEST] ?? ''}</pre>

package/src/editor/components/ExtensionsPanel.jsx

@@ -37,54 +37,52 @@ export function ExtensionsPanel({ registry, view = {}, owner = "This deck's", se
     </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>}
+      : <p class="panel-hint">None yet. Copy one below to start{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>
+    <div class="panel-section-head"><p class="section-title">Come with mdeck</p></div>
     <ol class="outline-list">{builtIn.map(row)}</ol>
+    <OnlinePacks key="online" kind={kind} onInstall={onInstall} />
   </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 }) {
+// Packs not installed yet that have this kind of extension: from the theme
+// repository, and those that come with mdeck but were removed. Loaded on
+// request, since it needs the network. Installing makes a pack available to
+// every deck.
+function OnlinePacks({ kind, onInstall }) {
   const [state, setState] = useState({ status: 'idle' })
   const [busy, setBusy] = useState(null)
   const load = () => {
-    setState({ status: 'loading' })
+    setState(prev => ({ ...prev, status: prev.index ? 'ready' : '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 })) }
+    try { await onInstall(pack, kind); load() } 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>
+  const head = <div class="panel-section-head"><p class="section-title">More to install</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.status === 'loading' ? 'Loading…' : <button class="btn is-small" onClick={load}>Show what you can install</button>}
     {state.error && <p class="online-error">{state.error}</p>}
   </div></>
   const { index } = state
-  const packs = index.packs.filter(pack => pack[`${kind}s`].length)
+  const packs = index.packs.filter(pack => pack[`${kind}s`].length && !index.installed?.[pack.id])
   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>}
+    {index.offline && <p class="panel-hint">The theme repository could not be reached; showing what comes with mdeck.</p>}
+    {!packs.length && <p class="panel-hint">Every {kind} there is, is installed.</p>}
     <ol class="outline-list">{packs.map(pack => {
       const id = pack[`${kind}s`][0]
-      const have = index.installed?.[pack.id]
+      const previews = pack.previews ?? pack.repository?.previews
       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>}
+        {previews?.[id] && <div class="thumb"><img src={new URL(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>}
+          <span class="online-meta">{[...pack.themes, ...pack.palettes].join(', ')}{pack.removed ? ' · comes with mdeck, removed' : ` · ${pack.author}`}{pack.requires?.length ? ` · needs ${pack.requires.join(', ')}` : ''}</span></span>
+        <button class="btn is-small" disabled={busy === pack.id} onClick={() => install(pack)}>{busy === pack.id ? 'Installing…' : 'Install'}</button>
       </li>
     })}</ol>
   </>

package/src/editor/designLink.js

@@ -4,11 +4,15 @@ 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`.
+// the deck's own. Both are `kind:id`. The launch page's address, if this
+// editor came from it, is passed on.
 export function designUrl({ copy = null, open = null } = {}) {
   const query = new URLSearchParams()
   if (copy) query.set('copy', copy)
   if (open) query.set('open', open)
+  // A new tab does not share this one's memory: the way back goes along.
+  const home = typeof location === 'undefined' ? null : launchPageUrl()
+  if (home) query.set('home', home)
   return query.size ? `${DESIGN_URL}?${query}` : DESIGN_URL
 }
 
@@ -17,3 +21,16 @@ 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
 }
+
+// The launch page of `mdeck run` that opened this editor, if one did: it
+// passes its address as ?home=…, kept for this tab so that switching
+// between the editor and the design page keeps the way back.
+const HOME_KEY = 'mdeck-launch-page'
+export function launchPageUrl() {
+  let home = new URLSearchParams(location.search).get('home')
+  try {
+    if (home) sessionStorage.setItem(HOME_KEY, home)
+    else home = sessionStorage.getItem(HOME_KEY)
+  } catch {}
+  try { return home && /^https?:$/.test(new URL(home).protocol) ? home : null } catch { return null }
+}

package/src/editor/sampleDeck.js

@@ -2,7 +2,9 @@
 // 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>'
+// A drawing in the palette's colours (with plain colours elsewhere): a chart
+// over hills under a sun, for every layout that shows a picture.
+export const SAMPLE_PICTURE = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500"><rect width="800" height="500" fill="var(--surface, #eef1f4)"/><g stroke="var(--rule, #d5dbe1)" stroke-width="2"><path d="M0 100H800M0 200H800M0 300H800M0 400H800M100 0V500M200 0V500M300 0V500M400 0V500M500 0V500M600 0V500M700 0V500"/></g><circle cx="580" cy="165" r="128" fill="none" stroke="var(--accent, #3d5a73)" stroke-width="4" opacity="0.35"/><circle cx="580" cy="165" r="88" fill="var(--accent, #3d5a73)"/><path d="M0 360C140 292 262 300 384 338S628 424 800 330V500H0Z" fill="var(--accent-2, #c2410c)"/><path d="M0 418C168 366 330 392 470 422S690 474 800 434V500H0Z" fill="var(--accent, #3d5a73)" opacity="0.6"/><polyline points="80,262 170,214 260,236 350,170 440,196" fill="none" stroke="var(--ink, #1b2733)" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/><g fill="var(--bg, #ffffff)" stroke="var(--ink, #1b2733)" stroke-width="5"><circle cx="80" cy="262" r="10"/><circle cx="170" cy="214" r="10"/><circle cx="260" cy="236" r="10"/><circle cx="350" cy="170" r="10"/><circle cx="440" cy="196" r="10"/></g></svg>'
 
 // `picture` is where the slides find the picture: a file beside the deck, or
 // a data URL where there is no such file.