@morphemecms/cms 0.11.0 → 0.13.0-next-20261106203613

package/src/legacyMove.ts

@@ -0,0 +1,131 @@
+// The legacy move: a store app or theme installed under its old id (folder `src/apps/mailchimp/`) moves to its permanent
+// id (`app_` or `theme_` plus 16 hex) when it is updated. Exposes legacyOf (is a legacy copy installed?), installedHere (does the store list show an entry as installed?) and moveChanges
+// (one list of changes: new folder, old files deleted, every id rewritten; docs/store-ids.md Table 1). Pure; the site's
+// paths are passed in (store.ts binds them to the site's config). Depends on lib/folderChanges.mjs.
+import type { Change, RepoFile } from './github';
+import { folderChanges } from '../lib/folderChanges.mjs';
+import type { StoreRecord } from './store';
+
+/** Where a site keeps what names an app or a theme (the site's config, and the popups' folder). */
+export type SitePaths = {
+  appsFolder: string;
+  themesFolder: string;
+  installed: string;
+  settings: string;
+  theme: string;
+  icons: string;
+  blockSettings: string;
+  popups: string;
+  cookieList: string;
+};
+
+type Next = { files: { path: string; content: string | Uint8Array }[]; record: StoreRecord };
+
+/** The old id of a catalog entry (`entry.legacy`) when a folder of that name is installed from the store (`folders`: the
+ * apps or themes the site has, with `store` when the folder has a store.json); else null (none, or the site's own). */
+export function legacyOf(entry: { legacy?: string }, folders: { id: string; store?: unknown }[]): string | null {
+  return entry.legacy && folders.some((f) => f.id === entry.legacy && f.store) ? entry.legacy : null;
+}
+
+/** Whether the store's list counts a catalog entry as installed: its own id is installed, or its old id (`entry.legacy`)
+ * is, as a copy from the store (`folders`: the apps or themes the site has). `installed`: the ids installed. */
+export function installedHere(
+  entry: { id: string; legacy?: string },
+  installed: string[],
+  folders: { id: string; store?: unknown }[],
+): boolean {
+  const old = legacyOf(entry, folders);
+  return installed.includes(entry.id) || (old !== null && installed.includes(old));
+}
+
+const parse = (text: string): any => {
+  try {
+    return JSON.parse(text);
+  } catch {
+    return undefined;
+  }
+};
+
+/** A file with a value changed (`change` gives the new JSON, or undefined when nothing in it names the legacy id). */
+function rewrite(files: RepoFile[], change: (json: any) => any): Change[] {
+  return files.flatMap((f) => {
+    const json = parse(f.text);
+    const out = json && typeof json === 'object' ? change(json) : undefined;
+    return out === undefined ? [] : [{ path: f.path, content: `${JSON.stringify(out, null, 2)}\n`, oid: f.oid }];
+  });
+}
+
+const inFolder = (site: RepoFile[], folder: string) => site.filter((f) => f.path.startsWith(`${folder}/`) && f.path.endsWith('.json'));
+const only = (site: RepoFile[], path: string) => site.filter((f) => f.path === path);
+
+/** The changes that make the folder `current` (the legacy folder, or the item's own when it has no legacy) the store's
+ * version of `entry` in its permanent folder. With a legacy id they also delete the legacy folder's files and rewrite
+ * every value that names it (`site`: the site's files now). In one commit. */
+export function moveChanges(
+  entry: { id: string },
+  legacy: string | null,
+  next: Next,
+  current: RepoFile[],
+  site: RepoFile[],
+  paths: SitePaths,
+): Change[] {
+  const isApp = entry.id.startsWith('app_');
+  const folder = (id: string) => `${isApp ? paths.appsFolder : paths.themesFolder}/${id}`;
+  if (!legacy) return folderChanges(folder(entry.id), current, next);
+  const swap = (v: unknown) => (v === legacy ? entry.id : undefined);
+  const changes = [...folderChanges(folder(entry.id), [], next), ...folderChanges(folder(legacy), current, null)];
+  if (isApp) {
+    changes.push(
+      ...rewrite(only(site, paths.installed), (j) =>
+        Array.isArray(j.installed) && j.installed.includes(legacy)
+          ? { ...j, installed: [...new Set(j.installed.map((x: unknown) => (x === legacy ? entry.id : x)))].sort() }
+          : undefined,
+      ),
+      ...rewrite(inFolder(site, paths.popups), (j) => (swap(j.type) ? { ...j, type: entry.id } : undefined)),
+      ...rewrite(inFolder(site, paths.cookieList), (j) => (swap(j.app) ? { ...j, app: entry.id } : undefined)),
+      ...rewrite(only(site, paths.blockSettings), (j) => {
+        const off = Array.isArray(j.off)
+          ? j.off.map((x: unknown) => (typeof x === 'string' && x.endsWith(`/${legacy}`) ? `${x.slice(0, -legacy.length)}${entry.id}` : x))
+          : [];
+        return off.some((x: unknown, i: number) => x !== j.off[i]) ? { ...j, off } : undefined;
+      }),
+    );
+    // The settings file is renamed with its content kept.
+    const old = site.find((f) => f.path === `${paths.settings}/${legacy}.json`);
+    if (old)
+      changes.push(
+        { path: old.path, content: null, oid: old.oid },
+        { path: `${paths.settings}/${entry.id}.json`, content: old.text, oid: null },
+      );
+  } else {
+    changes.push(
+      ...rewrite(only(site, paths.theme), (j) => (swap(j.theme) ? { ...j, theme: entry.id } : undefined)),
+      ...rewrite(only(site, paths.icons), (j) =>
+        typeof j.pack === 'string' && j.pack.startsWith(`${legacy}/`)
+          ? { ...j, pack: `${entry.id}${j.pack.slice(legacy.length)}` }
+          : undefined,
+      ),
+    );
+  }
+  return changes;
+}
+
+/** The site's files as they are after `changes` (a changed file with its new text, a deleted one gone, a new one added),
+ * for what must be worked out from the site after a move (the cookie list). */
+export function appliedTo(site: RepoFile[], changes: Change[]): RepoFile[] {
+  const by = new Map(changes.map((c) => [c.path, c]));
+  const kept = site.flatMap((f) => {
+    const c = by.get(f.path);
+    return !c ? [f] : typeof c.content === 'string' ? [{ ...f, text: c.content }] : [];
+  });
+  const added = changes.filter((c) => typeof c.content === 'string' && !site.some((f) => f.path === c.path));
+  return [...kept, ...added.map((c) => ({ path: c.path, oid: '', text: c.content as string }))];
+}
+
+/** Two lists of changes as one: for a path in both, the later one wins (a file rewritten by the move, then deleted by the
+ * cookie list), its `oid` that of the site's file; so no file is changed twice. */
+export function mergeChanges(first: Change[], later: Change[]): Change[] {
+  const oid = new Map(first.map((c) => [c.path, c.oid]));
+  const paths = new Set(later.map((c) => c.path));
+  return [...first.filter((c) => !paths.has(c.path)), ...later.map((c) => (oid.has(c.path) ? { ...c, oid: oid.get(c.path)! } : c))];
+}

package/src/licenseData.ts

@@ -20,8 +20,8 @@ export type ThirdParty =
 /** The licence of one's own work that grants nothing ("all rights reserved"), as npm writes it. */
 export const UNLICENSED = 'UNLICENSED';
 
-/** Who brings a work: the editor, the site's own code, or an app or a theme (`app/<id>`, `tema/<id>`, LicenseOwner.id). */
-export type LicenseWhere = 'editor' | 'site' | `app/${string}` | `tema/${string}`;
+/** Who brings a work: the editor, the site's own code, or an app or a theme (`app/<id>`, `theme/<id>`, LicenseOwner.id). */
+export type LicenseWhere = 'editor' | 'site' | `app/${string}` | `theme/${string}`;
 
 /** A third-party work as the build found it: its id (a package's name; `ikoner/<id>` for an icon set; `<owner>/<name>`
  * for another work an app or a theme declares), its name, version, who made it, its licence's name and text (`standard`:
@@ -46,7 +46,7 @@ export type LicensedWork = {
 /** An app or a theme with its own licence (`text`: LICENSE in its folder, none when it is UNLICENSED) and the works it
  * brings (their ids: those it declares, and those shipped through them alone), and whether the site is built with it. */
 export type LicenseOwner = {
-  id: `app/${string}` | `tema/${string}`;
+  id: `app/${string}` | `theme/${string}`;
   kind: 'app' | 'theme';
   /** Its folder's name in src/apps/ or src/themes/. */
   key: string;

package/src/markdown.mjs

@@ -130,8 +130,8 @@ export const textColorSchema = $markSchema('textColor', () => ({
   },
 }));
 
-// The colour of a section (packages/editor/lib/section-marker.mjs): the marker line before an H2, or before the label above it
-// (eyebrow), is read into the H2's attribute `section` and written back before it. It must be read before remarkSiteBlocks
+// The colour of a section (packages/editor/lib/section-marker.mjs): the marker line before an H1 or H2, or before the label above it
+// (eyebrow), is read into the heading's attribute `section` and written back before it. It must be read before remarkSiteBlocks
 // sees it, so it is the first plugin of that kind in makeEditor. A marker with nothing to colour is dropped.
 const htmlOf = (node) => {
   const only = node?.type === 'paragraph' && node.children?.length === 1 ? node.children[0] : node;
@@ -143,12 +143,12 @@ const remarkSectionMarkers = $remark('remarkSectionMarkers', () => () => (tree)
     const color = markerColor(htmlOf(child));
     if (color === null) return true;
     const next = isLabelLine(htmlOf(parts[i + 1])) ? parts[i + 2] : parts[i + 1];
-    if (next?.type === 'heading' && next.depth === 2) next.section = color;
+    if (next?.type === 'heading' && next.depth <= 2) next.section = color;
     return false;
   });
 });
 
-// The commonmark heading with the section colour as an attribute (only an H2 has one). Written back before the heading, or
+// The commonmark heading with the section colour as an attribute (only an H1 or H2 has one). Written back before the heading, or
 // before its label, which is already the last thing written (a line of HTML).
 /** @type {import('@milkdown/kit/utils').$NodeSchema<'heading'>} */
 export const headingWithSection = headingSchema.extendSchema((prev) => (ctx) => {
@@ -159,7 +159,7 @@ export const headingWithSection = headingSchema.extendSchema((prev) => (ctx) =>
     parseMarkdown: {
       match: base.parseMarkdown.match,
       runner: (state, node, type) => {
-        state.openNode(type, { level: node.depth, section: node.depth === 2 ? (node.section ?? null) : null });
+        state.openNode(type, { level: node.depth, section: node.depth <= 2 ? (node.section ?? null) : null });
         state.next(node.children);
         state.closeNode();
       },
@@ -168,8 +168,11 @@ export const headingWithSection = headingSchema.extendSchema((prev) => (ctx) =>
       match: base.toMarkdown.match,
       runner: (state, node) => {
         const { level, section } = node.attrs;
-        const written = state.top()?.children;
-        if (level === 2 && SECTION_COLORS.includes(section) && Array.isArray(written)) {
+        const top = state.top();
+        // The document has no children before its first node is written: a heading at the very top starts them.
+        if (top && !top.children) top.children = [];
+        const written = top?.children;
+        if (level <= 2 && SECTION_COLORS.includes(section) && Array.isArray(written)) {
           const last = written.at(-1);
           const at = last?.type === 'html' && isLabelLine(last.value) ? written.length - 1 : written.length;
           written.splice(at, 0, { type: 'html', value: sectionMarker(section) });

package/src/markdown.test.mjs

@@ -1,4 +1,4 @@
-// Tests for src/markdown.mjs: the section colour marker is read into the H2's `section` attribute and written back as it was
+// Tests for src/markdown.mjs: the section colour marker is read into the H1's or H2's `section` attribute and written back as it was
 // (before the label, if any). Milkdown needs a DOM; jsdom stands in. Run: node --test packages/editor/src/markdown.test.mjs
 import { test } from 'node:test';
 import assert from 'node:assert/strict';
@@ -46,6 +46,20 @@ test('a coloured section comes back byte for byte', async () => {
   assert.deepEqual(nodes, ['heading', 'paragraph', 'heading:tint', 'paragraph', 'heading:accent', 'paragraph']);
 });
 
+test('a coloured H1 comes back byte for byte', async () => {
+  const text = marked('tint', '# About\n\nText\n');
+  const { saved, nodes } = await through(text);
+  assert.equal(saved, text);
+  assert.deepEqual(nodes, ['heading:tint', 'paragraph']);
+});
+
+test('the marker comes before a label above the H1', async () => {
+  const text = marked('accent', '<p class="block-eyebrow">Welcome</p>\n\n# About\n\nText\n');
+  const { saved, nodes } = await through(text);
+  assert.equal(saved, text);
+  assert.ok(nodes.includes('heading:accent'));
+});
+
 test('a text without markers is written as before', async () => {
   const text = '# Title\n\n## One\n\nText\n';
   assert.equal((await through(text)).saved, text);
@@ -58,7 +72,7 @@ test('the marker comes before a label above the H2', async () => {
   assert.ok(nodes.includes('heading:surface'));
 });
 
-test('a marker not followed by an H2 is dropped', async () => {
+test('a marker not followed by an H1 or H2 is dropped', async () => {
   assert.deepEqual(await through(marked('tint', 'Plain text\n\n## B\n')), {
     saved: 'Plain text\n\n## B\n',
     nodes: ['paragraph', 'heading'],

package/src/menuChildren.ts

@@ -18,16 +18,16 @@ const listOf = (ids: string[]): MenuChild[] =>
 
 /** The sub-items of a menu item, in their order: none for most. */
 export function childrenOf(id: string, files: RepoFile[]): MenuChild[] {
-  if (id === 'lister') return listOf(listsShown(files));
-  if (id === 'virksomheden') return companyParts.map((p) => ({ id: p.id, label: p.label, href: `#virksomheden/${p.id}` }));
+  if (id === 'lists') return listOf(listsShown(files));
+  if (id === 'company') return companyParts.map((p) => ({ id: p.id, label: p.label, href: `#company/${p.id}` }));
   if (id === 'apps') {
     const installed = installedApps(files);
     return apps.filter((a) => installed.includes(a.id)).map((a) => ({ id: a.id, label: a.label, href: `#apps/${a.id}` }));
   }
-  if (id === 'videresendelser') {
+  if (id === 'redirects') {
     return [
-      { id: 'alle', label: t.redirects.all, href: `#${TAB_ROUTES.redirects}` },
-      { id: 'ikke-fundet', label: t.redirects.missing.title, href: `#${TAB_ROUTES.missing}` },
+      { id: 'all', label: t.redirects.all, href: `#${TAB_ROUTES.redirects}` },
+      { id: 'not-found', label: t.redirects.missing.title, href: `#${TAB_ROUTES.missing}` },
     ];
   }
   return [];

package/src/menuOpen.ts

@@ -1,9 +1,13 @@
 // Whether the main menu's drawer is open, for the drawer (MainMenu.tsx) and the menu buttons (Screen.tsx, the rail): at expanded
 // and wider the standard drawer's remembered state (sidebar.ts), below it the modal drawer's, which is not remembered.
-// Which one is on screen is lib/menu-layout.mjs. Exposes useMenuOpen.
+// Which one is on screen is lib/menu-layout.mjs. From expanded to below large the standard drawer yields to the rail while
+// the standard side panel is open (drawerYield.mjs, sidePanel.ts); the remembered state does not change for that.
+// Exposes useMenuOpen.
 import { useCallback, useSyncExternalStore } from 'react';
 import { setSidebar, useSidebar } from './sidebar';
-import { useMenuLayout } from './ui';
+import { drawerShown } from './drawerYield.mjs';
+import { setDrawerReopened, useDrawerReopened, usePanelOpen } from './sidePanel';
+import { useAtLeast, useMenuLayout } from './ui';
 
 let modalOpen = false;
 const listeners = new Set<() => void>();
@@ -28,7 +32,19 @@ export function useMenuOpen() {
   const wide = useMenuLayout().expanded === 'standard';
   const standard = useSidebar();
   const modal = useModalOpen();
-  const open = wide ? standard : modal;
-  const setOpen = useCallback((next: boolean) => (wide ? setSidebar(next) : setModal(next)), [wide]);
+  const panel = usePanelOpen();
+  const large = useAtLeast('large');
+  const reopened = useDrawerReopened();
+  const open = wide ? drawerShown(standard, panel, large, reopened) : modal;
+  const setOpen = useCallback(
+    (next: boolean) => {
+      if (!wide) return setModal(next);
+      // While the drawer yields, opening it is for as long as the panel stays open; closing it is remembered.
+      if (next && panel && !large) return setDrawerReopened(true);
+      setDrawerReopened(false);
+      setSidebar(next);
+    },
+    [wide, panel, large],
+  );
   return { open, setOpen, toggle: () => setOpen(!open) };
 }

package/src/movedRoutes.d.mts

@@ -1,3 +1,10 @@
 /** Where each moved screen is now, by its old address. */
 export const MOVED: Record<string, string>;
-export function movedRoute(route: string, more?: Record<string, string>): string;
+/**
+ * Old route prefix (Danish, one or more segments, as the routes were before the ids got English names) -> its new
+ * English prefix. Only a route that starts with the old prefix is renamed, and the rest of it is data (a file path, a
+ * slug, an id) that keeps its name. A key segment `*` matches any one segment and keeps it (in the value too).
+ * Old links keep working through it. The longest matching key wins.
+ */
+export const RENAMED: Record<string, string>;
+export function movedRoute(route: string, more?: Record<string, string>, renamed?: Record<string, string>): string;

package/src/movedRoutes.mjs

@@ -1,35 +1,116 @@
-// The editor's screens that have moved, by their old address after the "#": a link or a bookmark to one opens it where
-// it is now. Exposes MOVED and movedRoute (pure). Used by App.tsx (routeOf), which adds the app store's own.
+// The editor's screens that have moved or been renamed, by their old address after the "#": a link or a bookmark to one
+// opens it where it is now. Exposes MOVED, RENAMED and movedRoute (pure). Used by App.tsx (routeOf), which adds the app store's own.
 
 /** Where each moved screen is now, by its old address. */
 export const MOVED = /** @type {Record<string, string>} */ ({
-  farver: 'udseende/farver',
-  'virksomheden/logo': 'udseende/logo',
-  'tema/blokvalg': 'blokvalg',
-  dele: 'udseende/dele',
-  tema: 'udseende',
-  'tema/farver': 'udseende/farver',
-  'tema/logo': 'udseende/logo',
-  'tema/dele': 'udseende/dele',
-  'tema/dele/editor': 'udseende/dele/editor',
-  'virksomheden/bank': 'virksomheden/betaling/bank',
-  videresendelser: 'seo/videresendelser',
-  'videresendelser/alle': 'seo/videresendelser/alle',
-  'videresendelser/ikke-fundet': 'seo/videresendelser/ikke-fundet',
+  farver: 'appearance/colors',
+  'virksomheden/logo': 'appearance/logo',
+  'tema/blokvalg': 'block-settings',
+  dele: 'appearance/parts',
+  tema: 'appearance',
+  'tema/farver': 'appearance/colors',
+  'tema/logo': 'appearance/logo',
+  'tema/dele': 'appearance/parts',
+  'tema/dele/editor': 'appearance/parts/editor',
+  'virksomheden/bank': 'company/payment/bank',
+  videresendelser: 'seo/redirects',
+  'videresendelser/alle': 'seo/redirects/all',
+  'videresendelser/ikke-fundet': 'seo/redirects/not-found',
   // The settings of the booking and newsletter apps were on a screen "Promovering"; they are on the apps' own pages now.
   promovering: 'apps',
-  'promovering/calendly': 'apps/calendly',
-  'promovering/mailchimp': 'apps/mailchimp',
+  'promovering/calendly': 'apps/app_a030dfba69793996',
+  'promovering/mailchimp': 'apps/app_5c4b6ba067ef127f',
   // The header's menus and settings were on a screen of their own under "Globalt"; they are under "Udseende" now.
-  header: 'udseende/header',
+  header: 'appearance/header',
   // The footer's form was the file's own screen; it is under "Udseende" now.
-  'src/data/footer.json': 'udseende/footer',
+  'src/data/footer.json': 'appearance/footer',
 });
 
 /**
- * The address a screen is at now: where it moved to (`more` first, then MOVED), else the same address.
+ * Old route prefix (Danish, one or more segments, as the routes were before the ids got English names) -> its new
+ * English prefix. Only a route that starts with the old prefix is renamed, and the rest of it is data (a file path, a
+ * slug, an id) that keeps its name. A key segment `*` matches any one segment and keeps it (in the value too).
+ * Old links keep working through it. The longest matching key wins.
+ */
+export const RENAMED = /** @type {Record<string, string>} */ ({
+  indstillinger: 'settings',
+  'indstillinger/appstore/temaer': 'settings/appstore/themes',
+  'apps/*/indstillinger': 'apps/*/settings',
+  'apps/*/om': 'apps/*/about',
+  'apps/udvikler': 'apps/developer',
+  udseende: 'appearance',
+  'udseende/temaer': 'appearance/themes',
+  'udseende/ikonpakker': 'appearance/icon-packs',
+  'udseende/bevaegelse': 'appearance/motion',
+  'udseende/sidekolonne': 'appearance/side-column',
+  'udseende/farver': 'appearance/colors',
+  'udseende/farver/reservefarver': 'appearance/colors/fallback-colors',
+  'udseende/dele': 'appearance/parts',
+  'udseende/dele/blokke': 'appearance/parts/blocks',
+  'udseende/dele/liste': 'appearance/parts/list',
+  'udseende/dele/vaerdier': 'appearance/parts/values',
+  'udseende/standardsider': 'appearance/default-pages',
+  maaling: 'analytics',
+  privatliv: 'privacy',
+  'privatliv/cookiebanner': 'privacy/cookie-banner',
+  'privatliv/samtykker': 'privacy/consents',
+  'privatliv/privatlivssider': 'privacy/privacy-pages',
+  lister: 'lists',
+  liste: 'list',
+  'liste/kategorier': 'list/tags',
+  'liste/udtalelser': 'list/testimonials',
+  'liste/mobilmenu': 'list/mobile-menu',
+  ny: 'new',
+  'ny/kategorier': 'new/tags',
+  'ny/udtalelser': 'new/testimonials',
+  slettet: 'deleted',
+  'slettet/kategorier': 'deleted/tags',
+  'slettet/udtalelser': 'deleted/testimonials',
+  'slettet/mobilmenu': 'deleted/mobile-menu',
+  'slettet/filer': 'deleted/files',
+  virksomheden: 'company',
+  'virksomheden/kontakt': 'company/contact',
+  'virksomheden/sociale-medier': 'company/social-media',
+  'virksomheden/betaling': 'company/payment',
+  blokke: 'blocks',
+  filer: 'files',
+  'seo/videresendelser': 'seo/redirects',
+  'seo/videresendelser/alle': 'seo/redirects/all',
+  'seo/videresendelser/ikke-fundet': 'seo/redirects/not-found',
+  'seo/interne-links': 'seo/internal-links',
+  'seo/vurdering': 'seo/rating',
+  blokvalg: 'block-settings',
+  avanceret: 'advanced',
+  licenser: 'licenses',
+  konto: 'account',
+  notifikationer: 'notifications',
+});
+
+/**
+ * The address a screen is at now: where it moved to (`more` first, then MOVED), else the address with its longest old
+ * prefix in `renamed` replaced and the rest as it is, else the same address.
  * @param {string} route
  * @param {Record<string, string>} [more]
+ * @param {Record<string, string>} [renamed]
  * @returns {string}
  */
-export const movedRoute = (route, more = {}) => more[route] ?? MOVED[route] ?? route;
+export const movedRoute = (route, more = {}, renamed = RENAMED) => {
+  const moved = more[route] ?? MOVED[route];
+  if (moved !== undefined) return moved;
+  const parts = route.split('/');
+  let best = null;
+  for (const key of Object.keys(renamed)) {
+    const old = key.split('/');
+    if (old.length > parts.length || (best && old.length <= best.old.length)) continue;
+    if (old.every((segment, n) => segment === '*' || segment === parts[n])) best = { key, old };
+  }
+  if (!best) return route;
+  const kept = parts.slice(0, best.old.length);
+  let n = 0;
+  const now = renamed[best.key].split('/').map((segment) => {
+    if (segment !== '*') return segment;
+    while (best.old[n] !== '*') n += 1;
+    return kept[n++];
+  });
+  return [...now, ...parts.slice(best.old.length)].join('/');
+};

package/src/movedRoutes.test.mjs

@@ -4,19 +4,141 @@ import assert from 'node:assert/strict';
 import { movedRoute } from './movedRoutes.mjs';
 
 test('the old header screen opens Appearance › Header', () => {
-  assert.equal(movedRoute('header'), 'udseende/header');
+  assert.equal(movedRoute('header'), 'appearance/header');
 });
 
 test('the old footer form opens Appearance › Footer', () => {
-  assert.equal(movedRoute('src/data/footer.json'), 'udseende/footer');
+  assert.equal(movedRoute('src/data/footer.json'), 'appearance/footer');
 });
 
 test('an address that has not moved stays', () => {
-  assert.equal(movedRoute('udseende/header'), 'udseende/header');
-  assert.equal(movedRoute('lister'), 'lister');
+  assert.equal(movedRoute('appearance/header'), 'appearance/header');
+  assert.equal(movedRoute('lists'), 'lists');
 });
 
 test('the extra moves come first', () => {
-  assert.equal(movedRoute('butik', { butik: 'indstillinger/appstore' }), 'indstillinger/appstore');
-  assert.equal(movedRoute('tema', { butik: 'x' }), 'udseende');
+  assert.equal(movedRoute('butik', { butik: 'settings/appstore' }), 'settings/appstore');
+  assert.equal(movedRoute('tema', { butik: 'x' }), 'appearance');
+});
+
+test('only the old prefix of an address is renamed, the rest stays', () => {
+  const renamed = { indstillinger: 'settings', 'udseende/dele': 'appearance/parts', liste: 'list' };
+  assert.equal(movedRoute('indstillinger/appstore', {}, renamed), 'settings/appstore');
+  assert.equal(movedRoute('udseende/dele/liste/kontakt', {}, renamed), 'appearance/parts/liste/kontakt');
+});
+
+test('a key segment * matches any one segment and keeps it', () => {
+  const renamed = { 'apps/*/indstillinger': 'apps/*/settings' };
+  assert.equal(movedRoute('apps/x/indstillinger/variant', {}, renamed), 'apps/x/settings/variant');
+  assert.equal(movedRoute('apps/x/om', {}, renamed), 'apps/x/om');
+});
+
+test('data inside an address is not renamed', () => {
+  assert.equal(movedRoute('files/filer/doc.pdf'), 'files/filer/doc.pdf');
+  assert.equal(movedRoute('blog/farver'), 'blog/farver');
+  assert.equal(movedRoute('list/temaer'), 'list/temaer');
+});
+
+test('old prefixes are renamed, the data after them stays', () => {
+  assert.equal(movedRoute('filer/filer/doc.pdf'), 'files/filer/doc.pdf');
+  assert.equal(movedRoute('liste/temaer'), 'list/temaer');
+  assert.equal(movedRoute('udseende/dele/liste/kontakt'), 'appearance/parts/list/kontakt');
+  assert.equal(movedRoute('indstillinger/appstore'), 'settings/appstore');
+  assert.equal(movedRoute('udseende/farver'), 'appearance/colors');
+});
+
+test('every old route prefix opens the screen where it is now', () => {
+  const cases = {
+    indstillinger: 'settings',
+    'indstillinger/appstore/temaer': 'settings/appstore/themes',
+    'apps/google-analytics/indstillinger': 'apps/google-analytics/settings',
+    'apps/udvikler/acme': 'apps/developer/acme',
+    'apps/cms-version/om': 'apps/cms-version/about',
+    'apps/content-colors/indstillinger/variant': 'apps/content-colors/settings/variant',
+    udseende: 'appearance',
+    'udseende/temaer': 'appearance/themes',
+    'udseende/temaer/material': 'appearance/themes/material',
+    'udseende/ikonpakker': 'appearance/icon-packs',
+    'udseende/bevaegelse': 'appearance/motion',
+    'udseende/sidekolonne': 'appearance/side-column',
+    'udseende/farver/reservefarver': 'appearance/colors/fallback-colors',
+    'udseende/dele': 'appearance/parts',
+    'udseende/dele/editor': 'appearance/parts/editor',
+    'udseende/dele/blokke': 'appearance/parts/blocks',
+    'udseende/dele/vaerdier': 'appearance/parts/values',
+    'udseende/standardsider': 'appearance/default-pages',
+    'udseende/logo': 'appearance/logo',
+    maaling: 'analytics',
+    'maaling/google-analytics': 'analytics/google-analytics',
+    privatliv: 'privacy',
+    'privatliv/cookiebanner': 'privacy/cookie-banner',
+    'privatliv/samtykker': 'privacy/consents',
+    'privatliv/privatlivssider': 'privacy/privacy-pages',
+    lister: 'lists',
+    liste: 'list',
+    'liste/priser/cookiescanner': 'list/priser/cookiescanner',
+    'liste/kategorier': 'list/tags',
+    ny: 'new',
+    'ny/popups/mailchimp': 'new/popups/mailchimp',
+    'ny/kategorier': 'new/tags',
+    'ny/udtalelser': 'new/testimonials',
+    slettet: 'deleted',
+    'slettet/priser': 'deleted/priser',
+    'slettet/kategorier': 'deleted/tags',
+    'slettet/udtalelser': 'deleted/testimonials',
+    'liste/udtalelser': 'list/testimonials',
+    'liste/mobilmenu': 'list/mobile-menu',
+    'slettet/mobilmenu': 'deleted/mobile-menu',
+    'slettet/filer': 'deleted/files',
+    virksomheden: 'company',
+    'virksomheden/kontakt': 'company/contact',
+    'virksomheden/sociale-medier': 'company/social-media',
+    'virksomheden/betaling/mobilepay': 'company/payment/mobilepay',
+    blokke: 'blocks',
+    'blokke/accordion': 'blocks/accordion',
+    filer: 'files',
+    'seo/videresendelser': 'seo/redirects',
+    'seo/videresendelser/alle': 'seo/redirects/all',
+    'seo/videresendelser/ikke-fundet': 'seo/redirects/not-found',
+    'seo/interne-links': 'seo/internal-links',
+    'seo/vurdering': 'seo/rating',
+    blokvalg: 'block-settings',
+    avanceret: 'advanced',
+    licenser: 'licenses',
+    konto: 'account',
+    notifikationer: 'notifications',
+    'licenser/mit': 'licenses/mit',
+  };
+  for (const [old, now] of Object.entries(cases)) assert.equal(movedRoute(old), now, old);
+});
+
+test('a new address stays', () => {
+  assert.equal(movedRoute('settings/appstore'), 'settings/appstore');
+  assert.equal(movedRoute('blog/mit-indlaeg'), 'blog/mit-indlaeg');
+});
+
+test('a moved address wins over a renamed segment', () => {
+  assert.equal(movedRoute('tema', {}, { tema: 'x' }), 'appearance');
+});
+
+test('an old route to the app store opens it at its English route', () => {
+  assert.equal(movedRoute('indstillinger/appstore'), 'settings/appstore');
+});
+
+test('the old colours route opens the colours screen under Appearance', () => {
+  assert.equal(movedRoute('farver'), 'appearance/colors');
+});
+
+test('an old parts route keeps a list id and opens at its English route', () => {
+  assert.equal(movedRoute('udseende/dele/liste/kontakt'), 'appearance/parts/list/kontakt');
+});
+
+test('the old theme routes open the screens under Appearance', () => {
+  assert.equal(movedRoute('tema'), 'appearance');
+  assert.equal(movedRoute('tema/dele/editor'), 'appearance/parts/editor');
+});
+
+test('the old booking and newsletter settings open the apps by their permanent ids', () => {
+  assert.equal(movedRoute('promovering/calendly'), 'apps/app_a030dfba69793996');
+  assert.equal(movedRoute('promovering/mailchimp'), 'apps/app_5c4b6ba067ef127f');
 });

package/src/nav.ts

@@ -9,7 +9,7 @@ type Step = { at: number; prev: string | null };
 
 const step = () => history.state as Step | null;
 
-/** The screen of an address ("#liste/sider" → "liste/sider", "#" → ""); one with a broken %-sign is
+/** The screen of an address ("#list/sider" → "list/sider", "#" → ""); one with a broken %-sign is
  * the start screen. */
 export function screenOf(hash: string) {
   try {

package/src/notificationData.ts

@@ -1,4 +1,4 @@
-// The notifications (#notifikationer, Notifications.tsx): what the editor and the apps have to say that is worth
+// The notifications (#notifications, Notifications.tsx): what the editor and the apps have to say that is worth
 // reading again, newest first, with when it came and the link it had. Each has a type: the editor's own (`site`: the
 // site is updated or not, `saved`: something is saved, deleted, restored or installed, `failed`: it could not be,
 // `updates`: an app from the store updated on its own, AppList.tsx autoUpdate), or

package/src/pageH1Panel.d.mts

@@ -0,0 +1,4 @@
+/** Puts the page's header (the layout's `article > header`) in a panel of this colour, with the intro (HTML, in the text's own
+ * class) after it; no colour (null) leaves the header without a panel. A panel the site's page has is first taken away.
+ * @param {Document} doc @param {string | null} color @param {string} introHtml */
+export function setH1Panel(doc: Document, color: string | null, introHtml: string): void;