@morphemecms/cms 0.11.0 → 0.12.0

package/lib/video-id.mjs

@@ -43,7 +43,11 @@ export function videoOf(text) {
   return null;
 }
 
-/** The address that plays the video, with the settings in the address of the iframe it came from. */
+/** The address that plays the video, with the settings in the address of the iframe it came from.
+ * @param {any} video
+ * @param {string | null} [frame]
+ * @returns {string}
+ */
 export function player(video, frame) {
   let params;
   try {

package/lib/video.d.mts

@@ -1,7 +1,11 @@
 /** What stands in for a video (videoOf) on the site: its page, the address that plays it (`frame`: the address of the
  * iframe it replaces, if any), its title, and its still from the site, when it could be fetched. The video block's
- * view too (src/standard/video/load.ts). */
-export function facadeOf(video: any, title: any, frame: any): {
+ * view too (src/standard/video/load.ts).
+ * @param {any} video
+ * @param {any} [title]
+ * @param {string | null} [frame]
+ */
+export function facadeOf(video: any, title?: any, frame?: string | null): {
     href: string;
     player: string;
     title: any;

package/lib/video.mjs

@@ -39,7 +39,11 @@ function facade(video, title, frame, play) {
 
 /** What stands in for a video (videoOf) on the site: its page, the address that plays it (`frame`: the address of the
  * iframe it replaces, if any), its title, and its still from the site, when it could be fetched. The video block's
- * view too (src/standard/video/load.ts). */
+ * view too (src/standard/video/load.ts).
+ * @param {any} video
+ * @param {any} [title]
+ * @param {string | null} [frame]
+ */
 export function facadeOf(video, title, frame) {
   const still = `/images/_video/${stillName(video)}`;
   return {

package/lib/without-h1.d.mts

@@ -1 +1,2 @@
 export function withoutH1(html: string): string;
+export function h1SectionColor(html: string): string | null;

package/lib/without-h1.mjs

@@ -1,7 +1,22 @@
-// A page's text as HTML without its H1, which the layout draws in its own place (above the picture, PageLayout.astro).
-// Exposes withoutH1 (pure); the H1 is the first one wherever it stands, as pageH1 (src/sections.mjs) reads it. No dependencies.
+// A page's text as HTML without its H1, which the layout draws in its own place (above the picture, PageLayout.astro), and the
+// colour of the H1's section (the marker before it, lib/section-marker.mjs). Exposes withoutH1 and h1SectionColor (pure); the H1
+// is the first one wherever it stands, as pageH1 (src/sections.mjs) reads it. Depends on text-sections.mjs and section-marker.mjs.
+import { LABEL, MARKER } from './text-sections.mjs';
+import { SECTION_COLORS } from './section-marker.mjs';
 
-/** The html without its first <h1>…</h1> and the white space after it.
+// The first <h1>…</h1> and the white space after it, with the marker before it and the label between them, if any.
+const H1 = new RegExp(`(?:${MARKER})?(${LABEL})<h1\\b[^>]*>[\\s\\S]*?<\\/h1>\\s*`);
+
+/** The html without its first <h1>…</h1> and the white space after it, and without the marker before it (a label above it
+ * stays in the text).
  * @param {string} html
  * @returns {string} */
-export const withoutH1 = (html) => html.replace(/<h1\b[^>]*>[\s\S]*?<\/h1>\s*/, '');
+export const withoutH1 = (html) => html.replace(H1, (_, __, label) => label);
+
+/** The colour of the section the first H1 starts (the marker before it, or before the label above it), or null.
+ * @param {string} html
+ * @returns {string | null} */
+export const h1SectionColor = (html) => {
+  const color = html.match(H1)?.[1];
+  return SECTION_COLORS.includes(color) ? color : null;
+};

package/lib/without-h1.test.mjs

@@ -2,7 +2,7 @@
 // Run with `node --test packages/editor/lib/*.test.mjs` (part of npm run check).
 import { test } from 'node:test';
 import assert from 'node:assert/strict';
-import { withoutH1 } from './without-h1.mjs';
+import { h1SectionColor, withoutH1 } from './without-h1.mjs';
 
 test('an H1 at the top is taken out, with the space after it', () => {
   assert.equal(withoutH1('<h1 id="title">Title</h1>\n<p>Text</p>'), '<p>Text</p>');
@@ -20,6 +20,35 @@ test('only the first H1 goes', () => {
   assert.equal(withoutH1('<h1>A</h1><p>x</p><h1>B</h1>'), '<p>x</p><h1>B</h1>');
 });
 
+const M = (color) => `<div data-section="${color}"></div>`;
+
+test('the marker before the H1 is taken out with it', () => {
+  assert.equal(withoutH1(`${M('tint')}\n<h1 id="t">Title</h1>\n<p>Text</p>`), '<p>Text</p>');
+  assert.equal(withoutH1(`<p>Intro</p>\n${M('tint')}\n<h1>Title</h1>\n<h2>A</h2>`), '<p>Intro</p>\n<h2>A</h2>');
+});
+
+test('a label between the marker and the H1 stays in the text', () => {
+  const label = '<p class="block-eyebrow">Hello</p>';
+  assert.equal(withoutH1(`${M('accent')}\n${label}\n<h1>Title</h1>\n<p>Text</p>`), `${label}\n<p>Text</p>`);
+});
+
+test('the marker of an H2 is not taken out', () => {
+  const html = `<h1>Title</h1>\n${M('tint')}\n<h2>A</h2>`;
+  assert.equal(withoutH1(html), `${M('tint')}\n<h2>A</h2>`);
+});
+
+test('the colour of the H1 section is the marker before the H1', () => {
+  assert.equal(h1SectionColor(`${M('tint')}\n<h1>Title</h1>\n<p>x</p>`), 'tint');
+  assert.equal(h1SectionColor(`<p>a</p>${M('accent')}<p class="block-eyebrow">L</p><h1>T</h1>`), 'accent');
+});
+
+test('without a marker before the H1 there is no colour', () => {
+  assert.equal(h1SectionColor('<h1>Title</h1><p>x</p>'), null);
+  assert.equal(h1SectionColor(`<h1>Title</h1>${M('tint')}<h2>A</h2>`), null);
+  assert.equal(h1SectionColor(`${M('red')}<h1>Title</h1>`), null);
+  assert.equal(h1SectionColor('<p>x</p>'), null);
+});
+
 test('without an H1 the html is as it was', () => {
   assert.equal(withoutH1('<p>Text</p><h2>Section</h2>'), '<p>Text</p><h2>Section</h2>');
   assert.equal(withoutH1('<header>x</header>'), '<header>x</header>');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morphemecms/cms",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "Morpheme CMS: the editor for a site built with Astro, its screens, its blocks and the rules a site gives it. See README.md.",
   "license": "MIT",
   "author": "Lars Adolfsen",
@@ -40,7 +40,8 @@
   },
   "scripts": {
     "build": "node scripts/demo-build.mjs",
-    "check": "npm run format:check && npm run check:language && npm test && npm run check:types && npm run build && npm run check:editor",
+    "check": "npm run format:check && npm run check:language && npm test && npm run check:types && npm run build && npm run check:site-types && npm run check:editor",
+    "check:site-types": "node scripts/check-site-types.mjs",
     "check:types": "tsc -p tsconfig.types.json --noEmit",
     "check:editor": "cd .morpheme/demo/site && node ../../../bin/morpheme.mjs check:editor",
     "check:screens": "cd .morpheme/demo/site && node ../../../bin/morpheme.mjs check:screens",

package/scripts/app-screenshots.mjs

@@ -17,6 +17,7 @@ import { chromium } from 'playwright';
 import { createServer } from 'vite';
 import { aliases, themePlugin } from '@morphemecms/cms/site/theme.mjs';
 import { appFoldersPlugin } from '@morphemecms/cms/lib/apps.mjs';
+import { appSelf } from '@morphemecms/cms/site/appSelf.mjs';
 import { binOf } from './bin.mjs';
 import { openEditor, serveBuilt } from './built-site.mjs';
 
@@ -36,7 +37,7 @@ const vite = await createServer({
   configFile: false,
   logLevel: 'error',
   appType: 'custom',
-  plugins: [themePlugin(), appFoldersPlugin(ROOT)],
+  plugins: [themePlugin(), appFoldersPlugin(ROOT), appSelf()],
   resolve: { alias: aliases() },
   server: { middlewareMode: true, hmr: false, ws: false },
 });

package/scripts/check-content.mjs

@@ -25,6 +25,7 @@ import {
   themeProblems,
 } from '@morphemecms/cms/site/theme.mjs';
 import { appFoldersPlugin, appIds, appWorkersProblems } from '@morphemecms/cms/lib/apps.mjs';
+import { appSelf } from '@morphemecms/cms/site/appSelf.mjs';
 import { caseCollisionProblems } from '@morphemecms/cms/lib/caseCollisions.mjs';
 import { codePackageProblems, declarationProblems, ownerId } from '@morphemecms/cms/lib/licenses.mjs';
 import { breakpointProblems } from '@morphemecms/cms/site/breakpoints.mjs';
@@ -70,7 +71,7 @@ const server = await createServer({
   logLevel: 'error',
   appType: 'custom',
   // As in packages/editor/astro.mjs: the editor takes the site from src/site/ as @site, and the theme in use as @theme.
-  plugins: [themePlugin(), appFoldersPlugin(process.cwd())],
+  plugins: [themePlugin(), appFoldersPlugin(process.cwd()), appSelf()],
   resolve: { alias: aliases() },
   server: { middlewareMode: true, hmr: false, ws: false },
 });

package/scripts/check-site-types.mjs

@@ -0,0 +1,26 @@
+// Type-checks the package's whole TS source in the demo site, with the site's own tsc, as a site that has it from npm does.
+// Run by `npm run check:site-types`, after the build (.morpheme/demo/site, node_modules/@morphemecms/cms). Wiring only.
+import { execFileSync } from 'node:child_process';
+import { rmSync, writeFileSync } from 'node:fs';
+import { join, relative } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { binOf } from './bin.mjs';
+import { siteTypesConfig } from './site-types.mjs';
+
+const root = fileURLToPath(new URL('../', import.meta.url));
+const site = join(root, '.morpheme/demo/site');
+const config = join(site, 'tsconfig.package.json');
+const packageDir = relative(site, join(root, 'node_modules/@morphemecms/cms')).replaceAll('\\', '/');
+
+writeFileSync(config, JSON.stringify(siteTypesConfig(packageDir), null, 2));
+try {
+  execFileSync(process.execPath, [binOf('typescript', 'tsc', site), '--noEmit', '-p', 'tsconfig.package.json'], {
+    cwd: site,
+    stdio: 'inherit',
+  });
+} catch (error) {
+  console.error('The package source does not type-check as a site type-checks it: sites will fail the same way.');
+  process.exitCode = error.status ?? 1;
+} finally {
+  rmSync(config, { force: true });
+}

package/scripts/site-types.mjs

@@ -0,0 +1,14 @@
+// The tsconfig of the site-style type check (check-site-types.mjs): the demo site's own, plus the package's whole TS source.
+// Exposes siteTypesConfig(packageDir). No dependencies.
+
+const DIRS = ['src', 'site', 'lib', 'defaults', 'theme'];
+
+/**
+ * @param {string} packageDir the package's folder, relative to the site, with forward slashes
+ * @returns {{ extends: string, include: string[], exclude: string[] }}
+ */
+export const siteTypesConfig = (packageDir) => ({
+  extends: './tsconfig.json',
+  include: ['.astro/types.d.ts', '**/*', ...DIRS.flatMap((dir) => [`${packageDir}/${dir}/**/*.ts`, `${packageDir}/${dir}/**/*.tsx`])],
+  exclude: ['dist', `${packageDir}/**/*.test.*`],
+});

package/scripts/site-types.test.mjs

@@ -0,0 +1,21 @@
+// Tests siteTypesConfig (site-types.mjs): the tsconfig that type-checks the package's source as a site does.
+import assert from 'node:assert/strict';
+import { test } from 'node:test';
+import { siteTypesConfig } from './site-types.mjs';
+
+const PACKAGE = '../../../node_modules/@morphemecms/cms';
+const config = siteTypesConfig(PACKAGE);
+
+test('extends the site tsconfig', () => {
+  assert.equal(config.extends, './tsconfig.json');
+});
+
+test('includes the site first, then the package source', () => {
+  assert.deepEqual(config.include.slice(0, 2), ['.astro/types.d.ts', '**/*']);
+  assert.ok(config.include.includes(`${PACKAGE}/src/**/*.tsx`));
+  assert.ok(config.include.includes(`${PACKAGE}/lib/**/*.ts`));
+});
+
+test('excludes dist and the package tests', () => {
+  assert.deepEqual(config.exclude, ['dist', `${PACKAGE}/**/*.test.*`]);
+});

package/site/activeTheme.test.mjs

@@ -0,0 +1,52 @@
+// Tests of activeTheme and installedThemes (site/theme.mjs) with permanent theme ids.
+// Run with `node --test site/activeTheme.test.mjs`; the site's root is the working directory, set before the import.
+import { strict as assert } from 'node:assert';
+import { mkdirSync, mkdtempSync, writeFileSync } from 'node:fs';
+import { registerHooks } from 'node:module';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+import { test } from 'node:test';
+
+const PACKAGE = '@morphemecms/cms/';
+const pkg = new URL('../', import.meta.url);
+registerHooks({
+  resolve: (specifier, context, next) =>
+    specifier.startsWith(PACKAGE) ? next(new URL(specifier.slice(PACKAGE.length), pkg).href, context) : next(specifier, context),
+});
+
+const site = mkdtempSync(join(tmpdir(), 'site-'));
+const theme = (name) => {
+  mkdirSync(join(site, 'src/themes', name), { recursive: true });
+  writeFileSync(join(site, 'src/themes', name, 'theme.json'), '{}');
+};
+const choose = (value) => {
+  mkdirSync(join(site, 'src/data'), { recursive: true });
+  writeFileSync(join(site, 'src/data/theme.json'), JSON.stringify({ theme: value }));
+};
+theme('theme_fa395ad84690acbd');
+theme('own-theme');
+process.chdir(site);
+const { activeTheme, installedThemes } = await import('./theme.mjs');
+
+test('a permanent theme id is accepted', () => {
+  choose('theme_fa395ad84690acbd');
+  assert.equal(activeTheme(), 'theme_fa395ad84690acbd');
+});
+
+test('the standard theme and a site-own theme are accepted', () => {
+  choose('saturn');
+  assert.equal(activeTheme(), 'saturn');
+  choose('own-theme');
+  assert.equal(activeTheme(), 'own-theme');
+});
+
+test('a theme id that is not a store id stops the build', () => {
+  choose('theme_xyz');
+  assert.throws(() => activeTheme(), /theme_xyz/);
+});
+
+test('a theme folder that looks like a store id but is not one stops the build, naming the folder', () => {
+  assert.deepEqual(installedThemes(), ['saturn', 'own-theme', 'theme_fa395ad84690acbd']);
+  theme('theme_xyz');
+  assert.throws(() => installedThemes(), /src\/themes\/theme_xyz/);
+});

package/site/appSelf.d.mts

@@ -0,0 +1,2 @@
+/** @returns {import('vite').Plugin} */
+export function appSelf(): import("vite").Plugin;

package/site/appSelf.mjs

@@ -0,0 +1,23 @@
+// The Vite plugin behind `import self from '@app/self'` (app contract 3): the id of the app whose folder the importing
+// file is in. Exposes appSelf. Depends on appIdOf (lib/appId.mjs).
+import { appIdOf } from '../lib/appId.mjs';
+
+const SELF = '@app/self';
+const PREFIX = '\0app-self:';
+
+/** @returns {import('vite').Plugin} */
+export function appSelf() {
+  return {
+    name: 'app-self',
+    enforce: 'pre',
+    resolveId(source, importer) {
+      if (source !== SELF) return null;
+      const path = (importer ?? '').split('?')[0].replaceAll('\\', '/');
+      if (!/\/src\/apps\/[^/]+\//.test(path)) throw new Error(`${SELF} is only for app files: ${path}`);
+      return PREFIX + appIdOf(path);
+    },
+    load(id) {
+      return id.startsWith(PREFIX) ? `export default { id: ${JSON.stringify(id.slice(PREFIX.length)).replaceAll('"', "'")} };` : null;
+    },
+  };
+}

package/site/appSelf.test.mjs

@@ -0,0 +1,35 @@
+// Tests for the @app/self Vite plugin (site/appSelf.mjs): the id an app file gets, and the error outside apps.
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { appSelf } from './appSelf.mjs';
+
+/** The module text the plugin makes for `@app/self` imported from `importer`. */
+const moduleFor = (importer) => {
+  const plugin = appSelf();
+  const id = plugin.resolveId('@app/self', importer);
+  return plugin.load(id);
+};
+
+test('gives a store id', () => {
+  assert.equal(moduleFor('/x/src/apps/app_a030dfba69793996/link.ts'), "export default { id: 'app_a030dfba69793996' };");
+});
+
+test('gives a plain folder name', () => {
+  assert.equal(moduleFor('/x/src/apps/cookiescanner/worker.js'), "export default { id: 'cookiescanner' };");
+});
+
+test('gives the app of a nested file', () => {
+  assert.equal(moduleFor('/x/src/apps/mobilepay/blocks/mobilepay/load.ts'), "export default { id: 'mobilepay' };");
+});
+
+test('throws outside an app, with the path', () => {
+  assert.throws(() => moduleFor('/x/src/themes/saturn/a.ts'), /@app\/self is only for app files: \/x\/src\/themes\/saturn\/a\.ts/);
+});
+
+test('gives the same id for a Windows path', () => {
+  assert.equal(moduleFor(String.raw`C:\x\src\apps\app_a030dfba69793996\link.ts`), moduleFor('/x/src/apps/app_a030dfba69793996/link.ts'));
+});
+
+test('ignores other imports', () => {
+  assert.equal(appSelf().resolveId('react', '/x/src/apps/a/b.ts'), null);
+});

package/site/content.ts

@@ -1,14 +1,17 @@
+// The site's content collections (pages and blog posts): their status, paths, headings, and a page's text without its H1.
+// Exposes getPages, getPosts, pageHeading, pageHeadingHtml, withoutH1 and h1SectionColor. Depends on astro:content and lib/.
 import { getCollection, type CollectionEntry } from 'astro:content';
 import { categories, isBlogCategory } from './categories';
 import { displayTitle } from './text';
 import { isPreview } from './noindex.mjs';
 import { stateOf } from '@morphemecms/cms/lib/status.mjs';
 import { pageH1 } from '@morphemecms/cms/src/sections.mjs';
-import { withoutH1 } from '@morphemecms/cms/lib/without-h1.mjs';
+import { h1SectionColor, withoutH1 } from '@morphemecms/cms/lib/without-h1.mjs';
 
 // From text.ts, which the editor uses too (it has no content collections).
 export { displayTitle, openingText } from './text';
-export { stateOf, withoutH1 };
+// withoutH1 and h1SectionColor: a page's text without its H1 (and its marker), and the colour of the H1's section (PageLayout.astro).
+export { h1SectionColor, stateOf, withoutH1 };
 
 export type Post = CollectionEntry<'blog'>;
 // Every page has a path: its own, or /<file name>/ for pages created in the editor.

package/site/siteModules.mjs

@@ -3,6 +3,7 @@
 import { createServer } from 'vite';
 import { appFoldersPlugin } from '../lib/apps.mjs';
 import { aliases, themePlugin } from './theme.mjs';
+import { appSelf } from './appSelf.mjs';
 
 /**
  * Runs `use` with a loader of the site's modules (`@site/collections`, `/src/apps/<id>/index.ts`), then closes it.
@@ -15,7 +16,7 @@ export async function withSiteModules(use) {
     configFile: false,
     logLevel: 'error',
     appType: 'custom',
-    plugins: [themePlugin(), appFoldersPlugin(`${process.cwd()}/`)],
+    plugins: [themePlugin(), appFoldersPlugin(`${process.cwd()}/`), appSelf()],
     resolve: { alias: aliases() },
     server: { middlewareMode: true, hmr: false, ws: false },
   });

package/site/theme.mjs

@@ -4,7 +4,7 @@
 // theme or the look of a block, is the standard theme's, styled by the theme in use's CSS. The site and the editor
 // reach the theme as @theme (themePlugin: the theme in use's file, else the standard theme's), and the site's own
 // parts (src/site/) as @site (aliases): for packages/editor/astro.mjs and packages/editor/scripts/check-content.mjs. Stops with what is
-// wrong, when the theme named is not installed. Also the virtual modules with all Phosphor's icons (allIconsModule) and with the theme's coverage of Material's parts
+// wrong, when the theme named is not installed or a folder in src/themes/ is a malformed store id (a store id is theme_ + 16 hex characters). Also the virtual modules with all Phosphor's icons (allIconsModule) and with the theme's coverage of Material's parts
 // (coverageModule, site/themeCoverageFiles.mjs).
 import { existsSync, readdirSync, readFileSync, statSync } from 'node:fs';
 import { join, relative } from 'node:path';
@@ -16,6 +16,7 @@ import { MATERIAL_ALL, MATERIAL_SSR, materialModule, materialSsrModule } from '.
 import { ICON_PACK_FILE, ICON_PACK_LICENSE, SYSTEM_PACKS, THEME_PACKS_FOLDER, packInUse, packTheme, themePackId } from './iconPacks.mjs';
 import { MOTION_SCHEMES } from '@morphemecms/cms/lib/motion-schemes.mjs';
 import { templateProblems } from '@morphemecms/cms/lib/page-template.mjs';
+import { strayStoreId } from '@morphemecms/cms/lib/storeEntries.mjs';
 import { storeImportProblems } from './storeTheme.mjs';
 import { coverageModule } from './themeCoverageFiles.mjs';
 
@@ -52,13 +53,19 @@ export const THEME_FILES = [
   'editor/looks.mjs',
 ];
 
-/** The themes installed: the standard theme and the folders in src/themes/ with a theme.json. */
-export const installedThemes = () => [
-  STANDARD_THEME,
-  ...(existsSync(new URL('src/themes/', root)) ? readdirSync(new URL('src/themes/', root), { withFileTypes: true }) : [])
+/** The themes installed: the standard theme and the folders in src/themes/ with a theme.json. Stops on a folder that
+ * starts with `app_` or `theme_` but is not a store id of a theme. */
+export const installedThemes = () => {
+  const names = (existsSync(new URL('src/themes/', root)) ? readdirSync(new URL('src/themes/', root), { withFileTypes: true }) : [])
     .filter((e) => e.isDirectory() && existsSync(new URL(`src/themes/${e.name}/theme.json`, root)))
-    .map((e) => e.name),
-];
+    .map((e) => e.name);
+  const stray = names.find((name) => strayStoreId(name, 'theme'));
+  if (stray)
+    throw new Error(
+      `src/themes/${stray}: the folder name looks like a store id but is not one. A store theme id is theme_ and 16 lowercase hex characters; rename the folder.`,
+    );
+  return [STANDARD_THEME, ...names];
+};
 
 /** What every theme has itself. */
 export const OWN_FILES = ['theme.json', 'styles/global.css'];
@@ -455,7 +462,11 @@ export function siteFile(file) {
 /** The folder of the theme in use, under src/themes/. */
 export function activeTheme() {
   const { theme } = JSON.parse(readFileSync(new URL('src/data/theme.json', root), 'utf8'));
-  if (typeof theme !== 'string' || !/^[a-z0-9-]+$/.test(theme) || !existsSync(new URL(`${themeFolder(theme)}/theme.json`, root)))
+  if (
+    typeof theme !== 'string' ||
+    !/^([a-z0-9-]+|theme_[0-9a-f]{16})$/.test(theme) ||
+    !existsSync(new URL(`${themeFolder(theme)}/theme.json`, root))
+  )
     throw new Error(`src/data/theme.json: temaet ${JSON.stringify(theme)} er ikke installeret (src/themes/<tema>/theme.json).`);
   return theme;
 }

package/src/App.tsx

@@ -668,7 +668,7 @@ function Editor() {
         }
       >
         <>
-          <div className="editor-content min-w-0 flex-1">
+          <div className="editor-content relative min-w-0 flex-1">
             {files ? (
               <Page key={visit} route={route} files={files} env={env} user={user} builtAt={builtAt} onLogout={signOut} />
             ) : (

package/src/AppList.tsx

@@ -49,6 +49,11 @@ import { AnyIcon } from './icon';
 import {
   appCategories,
   appChanges,
+  appliedTo,
+  installedHere,
+  legacyOf,
+  mergeChanges,
+  moveChanges,
   appFolder,
   breaking,
   changedFiles,
@@ -64,7 +69,7 @@ import {
   type StoreAdd,
   type StoreRecord,
 } from './store';
-import { apps, siteBlocks } from './registry';
+import { apps, apps as siteApps, siteBlocks } from './registry';
 import { asWritten, backFrom, collections, companyParts, partScreens } from './site';
 import { byText, slugify, type Part } from './schema';
 import { headed, letterOf } from './Sheet';
@@ -273,7 +278,7 @@ const versionOf = (app: SiteApp) => updated.get(app.id) ?? app.store?.version ??
 
 /** The newer version of an app from the store, when the store has one. */
 const updateOf = (app: SiteApp, catalog: ShownApp[] | null | 'failed') => {
-  const found = app.store && Array.isArray(catalog) ? catalog.find((a) => a.id === app.id) : undefined;
+  const found = app.store && Array.isArray(catalog) ? catalog.find((a) => a.id === app.id || a.legacy === app.id) : undefined;
   return found && newer(found.version, versionOf(app)) ? found : undefined;
 };
 
@@ -491,7 +496,7 @@ function StoreScreen({ env, files, tab, again }: { env: Env; files: RepoFile[];
     allApps(catalog)
       .filter((a) => words.every((w) => a.words.includes(w)))
       .filter((a) => !category || a.category === category)
-      .filter((a) => !state || installed.includes(a.id) === (state === 'installed'))
+      .filter((a) => !state || installedHere(a, installed, siteApps) === (state === 'installed'))
       .sort((a, b) => order(a.label, b.label)),
     (a) => letterOf(a.label),
   );
@@ -692,11 +697,13 @@ function useStoreActions(env: Env, files: RepoFile[]) {
     next: () => Promise<Parameters<typeof appChanges>[2]>,
     // Whether to go on, with the app's files in the site now (an update asks, when some were changed).
     go: (current: RepoFile[]) => Promise<boolean> = async () => true,
+    // The id the app is installed under, when it is a legacy copy that moves to `id` (moveChanges).
+    legacy: string | null = null,
   ): Promise<boolean> {
     setRunning({ id, action, asking: false });
     env.notify({ text: text.busy });
     try {
-      const [current, wanted] = await Promise.all([env.folder(appFolder(id)), next()]);
+      const [current, wanted] = await Promise.all([env.folder(appFolder(legacy ?? id)), next()]);
       if (!(await go(current))) {
         env.notify(null);
         return false;
@@ -704,8 +711,11 @@ function useStoreActions(env: Env, files: RepoFile[]) {
       // `go` cleared the message (and its dialog stopped the button being busy): saving goes on.
       setRunning({ id, action, asking: false });
       env.notify({ text: text.busy });
-      const cookies = cookieChanges(id, wanted ? cookiesIn(wanted.files) : null, files);
-      await saveApp(env, text.commit, text.change, [...appChanges(id, current, wanted, installed, file), ...cookies], file);
+      const moved = legacy && wanted ? moveChanges({ id }, legacy, wanted, current, files) : null;
+      // The cookie list as the move leaves it (the legacy id rewritten), then the new release's cookies on it: one set of changes.
+      const cookies = cookieChanges(id, wanted ? cookiesIn(wanted.files) : null, moved ? appliedTo(files, moved) : files);
+      const changes = moved ? mergeChanges(moved, cookies) : [...appChanges(id, current, wanted, installed, file), ...cookies];
+      await saveApp(env, text.commit, text.change, changes, file);
       env.notify({ text: text.done, kind: text.kind ?? 'saved' });
       return true;
     } catch (e) {
@@ -731,7 +741,7 @@ function useStoreActions(env: Env, files: RepoFile[]) {
         },
         async () => ({ files: await env.store.files(app), record: recordOf(app) }),
       ),
-    async update(app: ShownApp, record: StoreRecord) {
+    async update(app: ShownApp, record: StoreRecord, legacy: string | null = null) {
       const done = await change(
         app.id,
         'update',
@@ -751,9 +761,10 @@ function useStoreActions(env: Env, files: RepoFile[]) {
             record.version,
             app.version,
             notesSince(app.releaseNotes, record.version, app.version),
-            changedFiles(app.id, record, current),
+            changedFiles(app.id, record, current, appFolder(legacy ?? app.id)),
           );
         },
+        legacy,
       );
       if (done) updated.set(app.id, app.version);
       return done;
@@ -1047,7 +1058,11 @@ function AppContent({ app, env, files, tab, fields }: AppProps & { tab: AppTab;
       {(!on || (update && app.store)) && (
         <div className="mb-8">
           {on ? (
-            <Button disabled={saving} busy={store.busy(app.id, 'update')} onClick={() => store.update(update!, app.store!)}>
+            <Button
+              disabled={saving}
+              busy={store.busy(update!.id, 'update')}
+              onClick={() => store.update(update!, app.store!, legacyOf(update!, apps))}
+            >
               {t.apps.update(update!.version)}
             </Button>
           ) : (