mdeck 3.0.0 → 3.2.0

package/src/build/themeCheck.js

@@ -89,7 +89,8 @@ export function buildSampleDeck({ extensions = {}, outDir }) {
   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 })
+    // Keyed by id, or by "kind:id" to keep a theme and a palette of one name apart.
+    for (const [key, dir] of Object.entries(extensions)) cpSync(dir, resolve(temp, 'extensions', ...key.split(':').map((part, i, all) => all.length > 1 && i === 0 ? `${part}s` : part)), { recursive: true })
     mkdirSync(resolve(temp, 'home'))
     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') } })
@@ -146,15 +147,25 @@ export function checkLooks(looks, { extensions = {} } = {}) {
   })
 }
 
+// The size of a theme's icon in lists, in CSS pixels; drawn at twice that
+// for sharp screens.
+export const ICON = { width: 96, height: 54, scale: 2 }
+
 // Pictures of looks on the sample deck, as WebP: { file, theme, palette,
-// slide } each, slide counting from 1.
+// slide, icon } each, slide counting from 1. `icon`, if given, is a second
+// file with the same slide at icon size: small enough for a list, and still
+// showing the theme's type, colours and shapes.
 export function renderPreviews(shots, { extensions = {}, width = 960, height = 540 } = {}) {
   return withSampleDeck({ extensions }, async ({ open }) => {
-    for (const { file, theme, palette = '', slide = 1 } of shots) {
+    for (const { file, theme, palette = '', slide = 1, icon = null } of shots) {
       const page = await open({ theme, palette })
       if (slide > 1) { await page.evaluate(`document.querySelector('deck-stage').goTo(${slide - 1})`); await settle(page) }
       mkdirSync(resolve(file, '..'), { recursive: true })
       writeFileSync(file, await page.screenshot({ width, height, format: 'webp' }))
+      if (icon) {
+        mkdirSync(resolve(icon, '..'), { recursive: true })
+        writeFileSync(icon, await page.screenshot({ ...ICON, format: 'webp' }))
+      }
       await page.close()
     }
   })

package/src/cli/args.js

@@ -7,7 +7,8 @@ const commands = {
   run: { ...common, '--network': flag, '--server': optional, max: 1 },
   edit: { ...common, max: 1 },
   design: { ...common, max: 1 },
-  themes: { '--local': flag, '--global': flag, '--force': flag, '--check': flag, '--output': value, '-o': '--output', max: 4 },
+  themes: { '--local': flag, '--force': flag, '--check': flag, '--output': value, '-o': '--output', max: 4 },
+  palettes: { '--local': flag, '--force': flag, 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

@@ -19,7 +19,7 @@ import { createPairing, pairingPlugin } from '../build/pairing.js'
 import { isAllowedRequest } from '../build/editorPlugin.js'
 import { renderPdf, attachPdf, findChrome } from '../build/pdf.js'
 import { installSkill, readSkill, TARGETS } from './skill.js'
-import { runThemes } from './themes.js'
+import { runPackages } from './themes.js'
 import { ManifestError, KINDS } from '../extensions/manifest.js'
 
 import { frameworkRoot } from '../paths.js'
@@ -313,9 +313,10 @@ 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: 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.green}mdeck themes${c.reset} search [words]               Themes from mdeck and the theme repository; install <theme>
+      install <theme>, remove <theme>       brings its default palette along; for every deck, or add
+      update [theme], list                  slides.md or --local for one deck; --force replaces edited files
+    ${c.green}mdeck palettes${c.reset} search | install | remove | update | list   The same for palettes
 
   ${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
@@ -613,8 +614,8 @@ if (command === 'new') {
   tip(`Changes are saved to the file as you type. Before the first change, a copy goes to ${BACKUP_DIR}/ beside it.\n`)
 
 // ── themes ────────────────────────────────────────────────────────────────────
-} else if (command === 'themes') {
-  await runThemes({ positionals: positionals(), flag: name => hasFlag(name), output: outputOption, ui: { ok, err, tip, c } })
+} else if (command === 'themes' || command === 'palettes') {
+  await runPackages({ kind: command.slice(0, -1), positionals: positionals(), flag: name => hasFlag(name), output: outputOption, ui: { ok, err, tip, c } })
 
 // ── design ────────────────────────────────────────────────────────────────────
 // The design page: with a deck, beside its editor; with a folder (or nothing),

package/src/cli/themes.js

@@ -1,93 +1,96 @@
-// `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'
+// `mdeck themes` and `mdeck palettes`: install, update and remove themes and
+// palettes, each on its own. Some come with mdeck, the others from the theme
+// repository. A theme brings its default palette along, a palette that
+// belongs to one theme brings that theme. They 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 built-in one is removed by hiding it and installed again
+// from mdeck's own copy, so that works offline. `mdeck themes build` is for
+// the repository itself.
+import { existsSync, statSync, writeFileSync } from 'node:fs'
 import { createRequire } from 'node:module'
-import { dirname, resolve } from 'node:path'
-import { bundledPacks, loadRegistry, manifestsOf, removedPacks, userExtensionsDir } from '../extensions/discover.js'
-import { target, packsAt, installHere, removeHere } from '../extensions/installed.js'
+import { resolve } from 'node:path'
+import { loadRegistry, manifestsOf, removedBuiltIns, userExtensionsDir } from '../extensions/discover.js'
+import { target, installHere, removeHere } from '../extensions/installed.js'
 import { palettesFor } from '../extensions/tokens.js'
 import { ManifestError } from '../extensions/manifest.js'
-import { buildRepository, compareVersions, findPack, installedPacks, installWithRequirements, loadCatalogue, PackError } from '../extensions/packs.js'
+import { buildRepository, compareVersions, findEntry, installedPackages, keyOf, loadCatalogue, PackageError } from '../extensions/packages.js'
 
 const VERSION = createRequire(import.meta.url)('../../package.json').version
 
-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]'
+const usage = kind => `search [words] | install <${kind}> | remove <${kind}> | update [${kind}] | list — for every deck, or beside a deck with [slides.md or folder] or --local${kind === 'theme' ? '; build <repository> -o <out> [--check]' : ''}`
 
 // 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])))
+// marked as built in or from the repository: for the theme browser.
+function looksOf(registry, catalogue) {
+  const builtIn = new Set([...catalogue.themes, ...catalogue.palettes].filter(entry => entry.builtIn).map(entry => entry.id + (catalogue.themes.includes(entry) ? ':t' : ':p')))
   const palettes = manifestsOf(registry, 'palette')
+  // Each theme's icon for the gallery's list (see renderPreviews).
+  const icons = new Map(catalogue.themes.map(entry => [entry.id, entry.icon]))
   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) })),
+    themes: Object.values(manifestsOf(registry, 'theme')).map(theme => ({ id: theme.id, title: theme.title, description: theme.description ?? '', builtIn: builtIn.has(theme.id + ':t'),
+      palette: theme.palette, appearance: theme.appearance ?? 'light', palettes: palettesFor(theme, palettes).map(p => p.id),
+      ...(icons.get(theme.id) ? { icon: icons.get(theme.id) } : {}) })),
+    palettes: Object.values(palettes).map(palette => ({ id: palette.id, title: palette.title, description: palette.description ?? '', builtIn: builtIn.has(palette.id + ':p'),
+      ...(palette.theme ? { theme: palette.theme } : {}), light: colours(palette.light), dark: colours(palette.dark) })),
   }
 }
 
-export async function runThemes({ positionals, flag, output, ui: { ok, err, tip, c } }) {
+export async function runPackages({ kind, positionals, flag, output, ui: { ok, err, tip, c } }) {
+  const kinds = `${kind}s`
   const [sub = 'search', ...rest] = positionals
   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('; ')
+  const warnOffline = catalogue => { if (catalogue.offline) tip(`The theme repository could not be reached (${catalogue.offline}); showing the ${kinds} that come with mdeck.`) }
+  const label = step => `the ${step.kind} ${step.id}`
   try {
     if (sub === 'search') {
-      const catalogue = await loadCatalogue({ bundled: bundledPacks({ all: true }) })
+      const catalogue = await loadCatalogue()
       warnOffline(catalogue)
       const words = rest.map(word => word.toLowerCase())
-      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 = 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(', ')}` : '', pack.requires?.length ? `requires: ${pack.requires.join(', ')}` : ''].filter(Boolean).join(' · ')} · by ${pack.author}, ${pack.license}${c.reset}`)
+      const forEvery = installedPackages(userExtensionsDir()), here = installedPackages(resolve('extensions')), hidden = removedBuiltIns()
+      const found = catalogue.entries.filter(entry => entry.kind === kind && words.every(word => [entry.id, entry.title, entry.description, entry.palette ?? '', entry.theme ?? ''].join(' ').toLowerCase().includes(word)))
+      if (!found.length) return tip(`No ${kind} matches${words.length ? ` "${words.join(' ')}"` : ''}`)
+      for (const entry of found) {
+        const key = keyOf(kind, entry.id)
+        const have = here[key] ?? forEvery[key]
+        const state = have ? (compareVersions(entry.version, have.version ?? '0.0.0') > 0 ? ` ${c.yellow}(${have.version} installed, update available)${c.reset}` : ` ${c.green}(installed)${c.reset}`)
+          : entry.builtIn ? (hidden.includes(key) ? ` ${c.dim}(comes with mdeck, removed)${c.reset}` : ` ${c.green}(comes with mdeck)${c.reset}`)
+          : entry.builtInVersion ? ` ${c.yellow}(comes with mdeck as ${entry.builtInVersion}, update available)${c.reset}` : ''
+        console.log(`\n  ${c.cyan}${entry.id}${c.reset} ${entry.version} — ${entry.title}${state}`)
+        if (entry.description) console.log(`    ${entry.description}`)
+        const facts = [kind === 'theme' ? `palette: ${entry.palette}` : entry.theme ? `only for the theme ${entry.theme}` : '', entry.author ? `by ${entry.author}` : '', entry.license].filter(Boolean)
+        if (facts.length) console.log(`    ${c.dim}${facts.join(' · ')}${c.reset}`)
       }
       console.log()
-      return tip('Install one for every deck with: mdeck themes install <pack>   (beside a deck: add slides.md or --local)')
+      return tip(`Install one for every deck with: mdeck ${kinds} install <${kind}>   (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] [--local]; mdeck themes search lists them.') }
+      if (!id) { err(`Name a ${kind}.`); return tip(`Usage: mdeck ${kinds} install <${kind}> [slides.md or folder] [--local]; mdeck ${kinds} search lists them.`) }
       const at = target(where, local)
-      const catalogue = await loadCatalogue({ bundled: bundledPacks({ all: true }) })
+      const catalogue = await loadCatalogue()
       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)}` : ''}`)
+      findEntry(catalogue, kind, id)
+      for (const step of await installHere(catalogue, kind, id, at, { mdeckVersion: VERSION, force })) {
+        const what = step.requested ? label(step) : `${label(step)}, which it needs,`
+        if (step.kept) tip(`${what[0].toUpperCase() + what.slice(1)} is there already`)
+        else if (step.builtIn) step.wasRemoved || step.requested ? ok(`${label(step)[0].toUpperCase() + label(step).slice(1)} comes with mdeck${step.wasRemoved ? ' and is offered again' : ''}`) : null
+        else ok(`${step.replaced ? `Updated ${label(step)} from ${step.replaced} to ${step.version}` : `Installed ${label(step)} ${step.version}`} ${at.label}`)
       }
-      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')
+      tip(`Use it with "${kind}: ${id}" at the top of a slide file. Look at it on a sample deck: mdeck design`)
+      return
     }
 
     if (sub === 'remove') {
       const [id, where] = rest
-      if (!id) { err('Name a pack.'); return tip('Usage: mdeck themes remove <pack> [slides.md or folder] [--local]') }
+      if (!id) { err(`Name a ${kind}.`); return tip(`Usage: mdeck ${kinds} remove <${kind}> [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`)
+      for (const step of removeHere(kind, id, at, { force })) {
+        ok(step.hidden ? `${label(step)[0].toUpperCase() + label(step).slice(1)} comes with mdeck and is no longer offered; mdeck ${step.kind}s install ${step.id} brings it back` : `Removed ${label(step)} ${at.label}`)
+      }
       return
     }
 
@@ -95,19 +98,18 @@ export async function runThemes({ positionals, flag, output, ui: { ok, err, tip,
       const [first, second] = rest
       const named = first && !/\.md$/i.test(first) && !(existsSync(first) && statSync(first).isDirectory()) ? first : null
       const at = target(named ? second : first, local)
-      const catalogue = await loadCatalogue({ bundled: bundledPacks({ all: true }) })
+      const catalogue = await loadCatalogue()
       warnOffline(catalogue)
-      const installed = packsAt(at)
-      const ids = named ? [named] : Object.keys(installed)
-      if (!ids.length) return tip(`No packs installed ${at.label}`)
+      const installed = Object.values(installedPackages(at.root)).filter(item => item.kind === kind)
+      const ids = named ? [named] : installed.map(item => item.id)
+      if (!ids.length) return tip(`No ${kinds} installed ${at.label}`)
       for (const id of ids) {
-        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}`)
+        const have = installed.find(item => item.id === id)
+        if (!have) throw new PackageError(`The ${kind} ${id} is not installed ${at.label}`)
+        const entry = findEntry(catalogue, kind, id)
+        if (entry.builtIn || compareVersions(entry.version, have.version ?? '0.0.0') <= 0) { tip(`The ${kind} ${id} ${have.version} is up to date`); continue }
+        await installHere(catalogue, kind, id, at, { mdeckVersion: VERSION, force })
+        ok(`Updated the ${kind} ${id} ${have.version} → ${entry.version}`)
       }
       loadRegistry(at.deck)
       return
@@ -115,54 +117,59 @@ export async function runThemes({ positionals, flag, output, ui: { ok, err, tip,
 
     if (sub === 'list') {
       const [where] = rest
-      const hidden = removedPacks()
+      const hidden = removedBuiltIns()
+      const catalogue = await loadCatalogue({ online: false })
       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}` : ''}`)
+      for (const entry of catalogue.entries.filter(entry => entry.kind === kind)) console.log(`    ${c.cyan}${entry.id}${c.reset}${hidden.includes(keyOf(kind, entry.id)) ? ` ${c.dim}(removed; mdeck ${kinds} install ${entry.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(', ')}${pack.requires.length ? ` ${c.dim}(requires ${pack.requires.join(', ')})${c.reset}` : ''}`)
+      for (const [title, root] of sections) {
+        const items = Object.values(installedPackages(root)).filter(item => item.kind === kind)
+        console.log(`\n  ${c.bold}${title}${c.reset} ${c.dim}${root}${c.reset}`)
+        if (!items.length) console.log(`    ${c.dim}none${c.reset}`)
+        for (const item of items) console.log(`    ${c.cyan}${item.id}${c.reset} ${item.version}`)
       }
       console.log()
       return
     }
 
-    if (sub === 'build') {
-      const [packsDir] = rest
+    if (sub === 'build' && kind === 'theme') {
+      const [repoDir] = 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 bundled = bundledPacks({ all: true })
-      const index = buildRepository(resolve(packsDir), resolve(out), { bundled })
+      if (!repoDir || !out) { err('Name the repository folder and the output folder.'); return tip('Usage: mdeck themes build <repository folder> -o <output folder> [--check]') }
+      const { catalogue, dirs } = buildRepository(resolve(repoDir), resolve(out))
       // 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'
+      // the built-in ones are in it already.
+      const repo = [...catalogue.themes.map(e => ({ ...e, kind: 'theme' })), ...catalogue.palettes.map(e => ({ ...e, kind: 'palette' }))].filter(entry => !entry.builtIn)
+      const extensions = Object.fromEntries(repo.map(entry => [keyOf(entry.kind, entry.id), dirs[keyOf(entry.kind, entry.id)]]))
       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 }))])
+      const looks = [...catalogue.themes, ...catalogue.palettes.map(p => ({ ...p, isPalette: true }))].map(entry => entry.isPalette
+        ? { key: `palettes/${entry.id}`, theme: entry.theme ?? 'neue', palette: entry.id }
+        : { key: `themes/${entry.id}`, theme: entry.id })
       if (flag('--check')) {
         const failures = await checkLooks(looks, { extensions })
         if (failures.length) { err(`The theme check found ${failures.length} problem(s):`); for (const line of failures) console.error(`    ${line}`); process.exitCode = 1; return }
-        ok(`Checked ${looks.map(look => look.id).join(', ')}, light and dark, on every kind of slide`)
+        ok(`Checked ${catalogue.themes.length} themes and ${catalogue.palettes.length} palettes, light and dark, on every kind of slide`)
       }
       // Themes on the title slide, palettes on the chapter slide (the third).
-      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')
+      // Themes also get an icon of their title slide for lists; a palette's
+      // colours are its icon.
+      await renderPreviews(looks.map(look => ({ file: resolve(out, 'previews', `${look.key}.webp`), theme: look.theme, palette: look.palette ?? '', slide: look.palette ? 3 : 1,
+        ...(look.palette ? {} : { icon: resolve(out, 'previews', `${look.key}-icon.webp`) }) })), { extensions })
+      for (const entry of catalogue.themes) Object.assign(entry, { preview: `previews/themes/${entry.id}.webp`, icon: `previews/themes/${entry.id}-icon.webp` })
+      for (const entry of catalogue.palettes) entry.preview = `previews/palettes/${entry.id}.webp`
+      writeFileSync(resolve(out, 'catalogue.json'), JSON.stringify(catalogue, 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)}`)
+      writeFileSync(resolve(out, 'looks.json'), JSON.stringify(looksOf(registry, catalogue), null, 2) + '\n')
+      return ok(`Built ${catalogue.themes.length} themes and ${catalogue.palettes.length} palettes into ${resolve(out)}`)
     }
 
-    err(`Unknown: mdeck themes ${sub}`)
-    tip(`Use: mdeck themes ${USAGE}`)
+    err(`Unknown: mdeck ${kinds} ${sub}`)
+    tip(`Use: mdeck ${kinds} ${usage(kind)}`)
     process.exitCode = 1
   } catch (error) {
-    if (!(error instanceof PackError || error instanceof ManifestError)) throw error
+    if (!(error instanceof PackageError || error instanceof ManifestError)) throw error
     err(error.message)
     process.exitCode = 1
   }

package/src/editor/api.js

@@ -52,24 +52,25 @@ export async function deleteExtension(kind, id) {
   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' } })
+// Every theme and palette mdeck and the theme repository offer, each marked
+// whether it is available to every deck already.
+export async function loadCatalogue() {
+  const response = await fetch('/__mdeck/themes/catalogue', { headers: { Accept: 'application/json' } })
   if (!response.ok) throw await failure(response)
   return response.json()
 }
 
-// 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 }) })
+// Installs a theme (with its default palette) or a palette for every deck.
+// Returns the steps and the new registry.
+export async function installPackage(kind, id) {
+  const response = await fetch('/__mdeck/themes/install', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ kind, 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 }) })
+// Removes a theme or palette for every deck (a built-in one is hidden).
+export async function removePackage(kind, id) {
+  const response = await fetch('/__mdeck/themes/remove', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ kind, id }) })
   if (!response.ok) throw await failure(response)
   return response.json()
 }

package/src/editor/components/DesignApp.jsx

@@ -1,7 +1,7 @@
 import { h } from 'preact'
 import { useEffect, useRef, useState } from 'preact/hooks'
 import { useDeckDocument } from '../useDeckDocument.js'
-import { loadExtension, saveExtension, deleteExtension, installThemePack, removeThemePack } from '../api.js'
+import { loadExtension, saveExtension, deleteExtension, installPackage, removePackage } from '../api.js'
 import { starterFiles, parseManifest, toModel, toRuntimeManifest, MANIFEST } from '../extensions.js'
 import { sampleDeck, sampleDataUrl } from '../sampleDeck.js'
 import { parseTarget, launchPageUrl } from '../designLink.js'
@@ -118,18 +118,16 @@ export function DesignApp() {
     } 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)
+  // A theme or palette installed for every deck, then opened.
+  const installOnline = async (kind, id) => {
+    const result = await installPackage(kind, id)
     dispatch({ type: 'setRegistry', registry: result.registry })
-    const id = pack[`${kind}s`][0]
-    if (id) await select(kind, 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)
+  // Removes a theme or palette for every deck; the deck's look is not changed.
+  const removeOnline = async (kind, id) => {
+    const result = await removePackage(kind, id)
     dispatch({ type: 'setRegistry', registry: result.registry })
     setCurrent(null)
   }
@@ -253,7 +251,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)} onRemovePack={removeOnline} />}
+            : <BuiltInCard extension={current} manifest={manifests[`${current.kind}s`][current.id]} onCopy={() => copyDialog(current.kind, current.id)} onRemove={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

@@ -45,30 +45,29 @@ 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, onRemovePack }) {
+// A built-in or installed theme or palette: what it is, the one way to
+// change it (a copy in the deck's extensions folder), and removing it.
+export function BuiltInCard({ extension, manifest, onCopy, onRemove }) {
   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 for every deck` : `Comes with mdeck`}{pack ? ` · pack ${pack}` : ''}</p>
+    <p class="section-title">{user ? `Installed for every deck` : `Comes with mdeck`}{manifest?.version ? ` · ${manifest.version}` : ''}</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 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>
+    <p class="note">{user ? `Installed ${kind}s change only when they are updated (mdeck ${kind}s 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>
+      {onRemove && (removing === 'confirm'
+        ? <><span class="muted" style={{ alignSelf: 'center' }}>Remove the {kind} {id} for every deck?</span>
+          <button class="btn" onClick={async () => { setRemoving('busy'); try { await onRemove(kind, id); 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>)}
+        : <button class="btn" disabled={removing === 'busy'} onClick={() => setRemoving('confirm')}>Remove {kind}</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>}
+    {!user && <p class="hint-text">Removing a {kind} 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

@@ -3,13 +3,13 @@ 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'
+import { loadCatalogue } 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
+// deck; the built-in ones; and those to install from the theme repository.
+// 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.
@@ -44,24 +44,24 @@ export function ExtensionsPanel({ registry, view = {}, owner = "This deck's", se
     </>}
     <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} />
+    <OnlinePackages key="online" kind={kind} onInstall={onInstall} />
   </aside>
 }
 
-// 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 }) {
+// Themes or palettes not available yet: from the theme repository, and
+// built-in ones that were removed. Loaded on request, since it needs the
+// network. Installing makes one available to every deck; a theme brings its
+// default palette along.
+function OnlinePackages({ kind, onInstall }) {
   const [state, setState] = useState({ status: 'idle' })
   const [busy, setBusy] = useState(null)
   const load = () => {
-    setState(prev => ({ ...prev, status: prev.index ? 'ready' : 'loading' }))
-    loadThemeIndex().then(index => setState({ status: 'ready', index }), error => setState({ status: 'error', error: error.message }))
+    setState(prev => ({ ...prev, status: prev.catalogue ? 'ready' : 'loading' }))
+    loadCatalogue().then(catalogue => setState({ status: 'ready', catalogue }), error => setState({ status: 'error', error: error.message }))
   }
-  const install = async pack => {
-    setBusy(pack.id)
-    try { await onInstall(pack, kind); load() } catch (error) { setState(prev => ({ ...prev, error: error.message })) }
+  const install = async entry => {
+    setBusy(entry.id)
+    try { await onInstall(entry.kind, entry.id); load() } catch (error) { setState(prev => ({ ...prev, error: error.message })) }
     setBusy(null)
   }
   const head = <div class="panel-section-head"><p class="section-title">More to install</p></div>
@@ -69,22 +69,18 @@ function OnlinePacks({ kind, onInstall }) {
     {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 && !index.installed?.[pack.id])
+  const { catalogue } = state
+  const entries = catalogue.entries.filter(entry => entry.kind === kind && !entry.available)
   return <>{head}
     {state.error && <p class="panel-hint online-error">{state.error}</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 previews = pack.previews ?? pack.repository?.previews
-      return <li key={pack.id} class="outline-item has-thumb online-pack">
-        {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.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>
+    {catalogue.offline && <p class="panel-hint">The theme repository could not be reached; showing what comes with mdeck.</p>}
+    {!entries.length && <p class="panel-hint">Every {kind} there is, is installed.</p>}
+    <ol class="outline-list">{entries.map(entry => <li key={entry.id} class="outline-item has-thumb online-pack">
+      {entry.preview && <div class="thumb"><img src={entry.preview} alt="" loading="lazy" /></div>}
+      <span><span class="title" style={{ display: 'block' }}>{entry.title} <span class="muted">{entry.version}</span></span>
+        <span class="online-meta">{entry.removed ? 'comes with mdeck, removed' : entry.author}{kind === 'theme' ? ` · with ${entry.palette}` : entry.theme ? ` · for ${entry.theme}` : ''}</span></span>
+      <button class="btn is-small" disabled={busy === entry.id} onClick={() => install(entry)}>{busy === entry.id ? 'Installing…' : 'Install'}</button>
+    </li>)}</ol>
   </>
 }