@morphemecms/cms 0.9.0-next-20261105115842 → 0.9.1

package/scripts/side-width.mjs

@@ -0,0 +1,29 @@
+// The width and lead rules of a page's text (theme/layouts/PageLayout.astro), for check-side.mjs: textClasses reads the
+// classes of the text wrapper from built HTML; widthProblem and leadProblem say what is wrong with them. No dependencies,
+// so a unit test can run it.
+
+/** The classes of the text wrapper (data-editor="text") in a built page. */
+export const textClasses = (html) =>
+  html
+    .match(/<div data-editor="text" class="([^"]*)"/)?.[1]
+    .replaceAll('&amp;', '&')
+    .replaceAll('&gt;', '>')
+    .split(/\s+/) ?? [];
+
+/** The width rule for the text's classes: with a column the text stops at 66ch; without one the text is as wide as its
+ * container (max-w-none) and only its parts outside the blocks stop at 66ch. Returns what is wrong, or null. */
+export const LEAD = ['[&>p:first-child]:type-lead', '[&>p:first-child]:text-muted', '[&>p:first-child]:max-w-[52ch]'];
+
+/** The lead rule: without a column the text's first paragraph is the lead (type-lead, muted, 52ch); with one it is not. */
+export function leadProblem(text, side) {
+  const has = LEAD.filter((c) => text.includes(c)).length;
+  if (side) return has === 0 ? null : 'its first paragraph should not be a lead';
+  return has === LEAD.length ? null : 'its first paragraph should be a lead (type-lead, text-muted, max-w-[52ch])';
+}
+
+export function widthProblem(text, side) {
+  if (side) return text.includes('max-w-[66ch]') && !text.includes('max-w-none') ? null : 'its text should be max-w-[66ch], not max-w-none';
+  return text.includes('max-w-none') && text.includes('[&>:not(.not-prose)]:max-w-[66ch]')
+    ? null
+    : 'its text should be max-w-none, with 66ch for what is not a block';
+}

package/scripts/side-width.test.mjs

@@ -0,0 +1,30 @@
+// Tests the width rule of check-side.mjs (side-width.mjs: widthProblem) and how it reads the text's classes from built HTML.
+import assert from 'node:assert/strict';
+import { test } from 'node:test';
+import { LEAD, leadProblem, textClasses, widthProblem } from './side-width.mjs';
+
+const WIDE = ['prose', 'max-w-none', '[&>:not(.not-prose)]:max-w-[66ch]'];
+const NARROW = ['prose', 'max-w-[66ch]'];
+
+test('a page without a column: text as wide as its container, 66ch for what is not a block', () => {
+  assert.equal(widthProblem(WIDE, null), null);
+  assert.ok(widthProblem(NARROW, null));
+});
+
+test('a page with a column: text stops at 66ch', () => {
+  assert.equal(widthProblem(NARROW, 'left'), null);
+  assert.ok(widthProblem(WIDE, 'right'));
+});
+
+test('textClasses reads the classes of the text wrapper', () => {
+  const html =
+    '<article data-template="single"><div data-editor="text" class="prose max-w-none [&amp;>:not(.not-prose)]:max-w-[66ch]"></div>';
+  assert.deepEqual(textClasses(html), WIDE);
+});
+
+test('a page without a column: the first paragraph is the lead; with a column it is not', () => {
+  assert.equal(leadProblem([...WIDE, ...LEAD], null), null);
+  assert.ok(leadProblem(WIDE, null));
+  assert.equal(leadProblem(NARROW, 'left'), null);
+  assert.ok(leadProblem([...NARROW, ...LEAD], 'left'));
+});

package/site/content.config.ts

@@ -2,6 +2,7 @@
 // Depends on astro:content.
 import { defineCollection, z } from 'astro:content';
 import { glob } from 'astro/loaders';
+import { PAGE_TEMPLATES } from '../lib/page-template.mjs';
 
 // Kladde, Skjult or Planlagt (Udgivet when left out), and for Planlagt when, in Danish time
 // ("2026-11-01T08:00"): what each one is on the site is in packages/editor/lib/status.mjs.
@@ -76,10 +77,8 @@ const pages = defineCollection({
     canonical: z.string().optional(),
     // Not for search engines: noindex (Base.astro) and not in the sitemap (packages/editor/astro.mjs).
     noindex: z.boolean().optional().default(false),
-    // Across the whole page, without the owner's card beside the text (PageLayout.astro).
-    wide: z.boolean().optional().default(false),
-    // `false`: without the block beside the text, which src/data/side.json chooses (PageLayout.astro).
-    side: z.boolean().optional(),
+    // The page's template, one the theme offers (lib/page-template.mjs; PageLayout.astro). Left out: the theme's first.
+    template: z.enum(PAGE_TEMPLATES as [string, ...string[]]).optional(),
     // A new version of a page (/ny/…): what the owner should look at or answer before it replaces the
     // current page. Shown at the top of the new version and on /ny/.
     review: z.string().optional(),

package/site/header.d.mts

@@ -0,0 +1,21 @@
+/** @typedef {import('../src/standard/buttons/fields').Button} Button */
+/** @typedef {{ button: Button | null, menuSide: 'start' | 'end' }} Header */
+/**
+ * Reads src/data/header.json's content. Missing or wrong → defaults.
+ * @param {unknown} raw
+ * @returns {Header}
+ */
+export function headerOf(raw: unknown): Header;
+export function sortedNav<T extends NavItem>(items: T[]): T[];
+export type Button = any;
+export type Header = {
+    button: Button | null;
+    menuSide: "start" | "end";
+};
+export type NavLink = {
+    label: string;
+    href: string;
+};
+export type NavItem = NavLink & {
+    children?: NavLink[];
+};

package/site/header.mjs

@@ -0,0 +1,35 @@
+// The header's site setting (src/data/header.json, optional): a button in place of the phone icon, and the side of the
+// header the mobile menu button sits on; and the main menu's items as the header draws them. Exposes headerOf (pure;
+// missing or wrong data gives the defaults) and sortedNav. Used by site/site.ts and the editor's preview of the header
+// (src/headerPreview.mjs); the Button type is src/standard/buttons/fields.ts.
+
+/** @typedef {import('../src/standard/buttons/fields').Button} Button */
+/** @typedef {{ button: Button | null, menuSide: 'start' | 'end' }} Header */
+
+/**
+ * Reads src/data/header.json's content. Missing or wrong → defaults.
+ * @param {unknown} raw
+ * @returns {Header}
+ */
+export function headerOf(raw) {
+  const data = raw && typeof raw === 'object' ? /** @type {Record<string, any>} */ (raw) : {};
+  const { enabled, ...button } = data.button && typeof data.button === 'object' ? data.button : { enabled: false };
+  return {
+    button: enabled === true ? button : null,
+    menuSide: data.menuSide === 'end' ? 'end' : 'start',
+  };
+}
+
+/** @typedef {{ label: string, href: string }} NavLink */
+/** @typedef {NavLink & { children?: NavLink[] }} NavItem */
+
+/**
+ * The main menu's items (menu.json) as the header draws them: the sub-items in alphabetical order (Danish: æ, ø, å last).
+ * @template {NavItem} T
+ * @param {T[]} items
+ * @returns {T[]}
+ */
+export const sortedNav = (items) =>
+  items.map((item) =>
+    item.children ? { ...item, children: [...item.children].sort((a, b) => a.label.localeCompare(b.label, 'da')) } : item,
+  );

package/site/header.test.mjs

@@ -0,0 +1,59 @@
+import { strict as assert } from 'node:assert';
+import { test } from 'node:test';
+import { headerOf, sortedNav } from './header.mjs';
+
+test('no file', () => {
+  assert.deepEqual(headerOf(undefined), { button: null, menuSide: 'start' });
+});
+
+test('button off', () => {
+  assert.equal(headerOf({ button: { enabled: false, to: 'booking' } }).button, null);
+});
+
+test('button on', () => {
+  assert.deepEqual(headerOf({ button: { enabled: true, to: 'booking', label: 'Book en tid' } }).button, {
+    to: 'booking',
+    label: 'Book en tid',
+  });
+});
+
+test('menu at the end', () => {
+  assert.equal(headerOf({ menuSide: 'end' }).menuSide, 'end');
+});
+
+test('wrong menu side', () => {
+  assert.equal(headerOf({ menuSide: 'middle' }).menuSide, 'start');
+});
+
+test('wrong shapes', () => {
+  assert.deepEqual(headerOf('x'), { button: null, menuSide: 'start' });
+  assert.equal(headerOf({ button: 'x' }).button, null);
+});
+
+test('sortedNav sorts the sub-items A–Å and keeps the items in order', () => {
+  const items = [
+    { label: 'Om', href: '/om/' },
+    {
+      label: 'Behandlinger',
+      href: '/b/',
+      children: [
+        { label: 'Øre', href: '/b/oe/' },
+        { label: 'Arm', href: '/b/a/' },
+        { label: 'Zone', href: '/b/z/' },
+      ],
+    },
+  ];
+  const sorted = sortedNav(items);
+  assert.deepEqual(
+    sorted.map((i) => i.label),
+    ['Om', 'Behandlinger'],
+  );
+  assert.deepEqual(
+    sorted[1].children.map((c) => c.label),
+    ['Arm', 'Zone', 'Øre'],
+  );
+  assert.deepEqual(
+    items[1].children.map((c) => c.label),
+    ['Øre', 'Arm', 'Zone'],
+  );
+});

package/site/icons.d.mts

@@ -107,6 +107,7 @@ export const MATERIAL_SYMBOLS: {
     'arrow-up': string;
     'arrow-up-right': string;
     'arrows-down-up': string;
+    'arrows-horizontal': string;
     article: string;
     bank: string;
     bell: string;
@@ -142,6 +143,8 @@ export const MATERIAL_SYMBOLS: {
     code: string;
     coffee: string;
     columns: string;
+    'columns-plus-left': string;
+    'columns-plus-right': string;
     cookie: string;
     copy: string;
     'credit-card': string;
@@ -155,6 +158,7 @@ export const MATERIAL_SYMBOLS: {
     'envelope-simple-fill': string;
     eye: string;
     'eye-slash': string;
+    file: string;
     'file-pdf': string;
     'file-text': string;
     'file-text-fill': string;
@@ -290,6 +294,7 @@ export const LUCIDE: {
     'arrow-up': string;
     'arrow-up-right': string;
     'arrows-down-up': string;
+    'arrows-horizontal': string;
     'arrows-in-line-horizontal': string;
     'arrows-out-line-horizontal': string;
     article: string;
@@ -328,6 +333,8 @@ export const LUCIDE: {
     code: string;
     coffee: string;
     columns: string;
+    'columns-plus-left': string;
+    'columns-plus-right': string;
     cookie: string;
     copy: string;
     'credit-card': string;
@@ -341,6 +348,7 @@ export const LUCIDE: {
     'envelope-simple-fill': string;
     eye: string;
     'eye-slash': string;
+    file: string;
     'file-pdf': string;
     'file-text': string;
     'file-text-fill': string;
@@ -479,6 +487,7 @@ export const PACK_MAPS: {
         'arrow-up': string;
         'arrow-up-right': string;
         'arrows-down-up': string;
+        'arrows-horizontal': string;
         article: string;
         bank: string;
         bell: string;
@@ -514,6 +523,8 @@ export const PACK_MAPS: {
         code: string;
         coffee: string;
         columns: string;
+        'columns-plus-left': string;
+        'columns-plus-right': string;
         cookie: string;
         copy: string;
         'credit-card': string;
@@ -527,6 +538,7 @@ export const PACK_MAPS: {
         'envelope-simple-fill': string;
         eye: string;
         'eye-slash': string;
+        file: string;
         'file-pdf': string;
         'file-text': string;
         'file-text-fill': string;
@@ -660,6 +672,7 @@ export const PACK_MAPS: {
         'arrow-up': string;
         'arrow-up-right': string;
         'arrows-down-up': string;
+        'arrows-horizontal': string;
         'arrows-in-line-horizontal': string;
         'arrows-out-line-horizontal': string;
         article: string;
@@ -698,6 +711,8 @@ export const PACK_MAPS: {
         code: string;
         coffee: string;
         columns: string;
+        'columns-plus-left': string;
+        'columns-plus-right': string;
         cookie: string;
         copy: string;
         'credit-card': string;
@@ -711,6 +726,7 @@ export const PACK_MAPS: {
         'envelope-simple-fill': string;
         eye: string;
         'eye-slash': string;
+        file: string;
         'file-pdf': string;
         'file-text': string;
         'file-text-fill': string;

package/site/icons.mjs

@@ -121,6 +121,7 @@ export const MATERIAL_SYMBOLS = {
   'arrow-up': 'arrow_upward',
   'arrow-up-right': 'arrow_outward',
   'arrows-down-up': 'swap_vert',
+  'arrows-horizontal': 'width_full',
   article: 'article',
   bank: 'account_balance',
   bell: 'notifications',
@@ -156,6 +157,8 @@ export const MATERIAL_SYMBOLS = {
   code: 'code',
   coffee: 'local_cafe',
   columns: 'view_column_2',
+  'columns-plus-left': 'dock_to_right',
+  'columns-plus-right': 'dock_to_left',
   cookie: 'cookie',
   copy: 'content_copy',
   'credit-card': 'credit_card',
@@ -169,6 +172,7 @@ export const MATERIAL_SYMBOLS = {
   'envelope-simple-fill': 'mail-fill',
   eye: 'visibility',
   'eye-slash': 'visibility_off',
+  file: 'crop_portrait',
   'file-pdf': 'picture_as_pdf',
   'file-text': 'description',
   'file-text-fill': 'description-fill',
@@ -305,6 +309,7 @@ export const LUCIDE = {
   'arrow-up': 'arrow-up',
   'arrow-up-right': 'arrow-up-right',
   'arrows-down-up': 'arrow-down-up',
+  'arrows-horizontal': 'rectangle-horizontal',
   'arrows-in-line-horizontal': 'fold-horizontal',
   'arrows-out-line-horizontal': 'unfold-horizontal',
   article: 'file-text',
@@ -343,6 +348,8 @@ export const LUCIDE = {
   code: 'code',
   coffee: 'coffee',
   columns: 'columns-2',
+  'columns-plus-left': 'panel-left',
+  'columns-plus-right': 'panel-right',
   cookie: 'cookie',
   copy: 'copy',
   'credit-card': 'credit-card',
@@ -356,6 +363,7 @@ export const LUCIDE = {
   'envelope-simple-fill': 'mail-fill',
   eye: 'eye',
   'eye-slash': 'eye-off',
+  file: 'rectangle-vertical',
   'file-pdf': 'file-text',
   'file-text': 'file-text',
   'file-text-fill': 'file-text-fill',

package/site/site.ts

@@ -1,5 +1,5 @@
 // Name, title, phone, email, address and CVR number: contact.json; the profiles and share buttons: social.json (optional, an
-// older site has none); the texts of "Book en tid": booking.json (the calendar is the app Calendly's, src/apps/calendly/);
+// older site has none); the texts of "Book en tid": booking.json (the calendar is the app Calendly's, morpheme-apps/apps/calendly/);
 // the menus: menu.json and mobile-menu.json; the shared texts of the other blocks: their shared.ts, with those saved in
 // blocks.json over them (`blockTexts`).
 // The site's owner edits them in the editor (/editor/); what the editor does not edit is the site's config
@@ -12,6 +12,7 @@ import blocks from '@data/blocks.json';
 import standardPages from '@data/standard-pages.json';
 import { config } from '@site/config';
 import { socialOf } from './social.mjs';
+import { headerOf, sortedNav } from './header.mjs';
 import { sharedTexts, type SharedTexts } from '@morphemecms/cms/src/shared';
 import { standardShared } from '@morphemecms/cms/src/standard/sharedTexts';
 
@@ -24,6 +25,11 @@ const { cvr = '' } = contact as typeof contact & { cvr?: string };
 // Optional file: an older site has no social.json, so it is read with a glob, not an import.
 const socialFile = Object.values(import.meta.glob<Record<string, unknown>>('/src/data/social.json', { eager: true, import: 'default' }))[0];
 
+// Optional file (header.json, "Header"): a site without it keeps the header as it is.
+const headerFile = Object.values(import.meta.glob<Record<string, unknown>>('/src/data/header.json', { eager: true, import: 'default' }))[0];
+/** The header's button (in place of the phone icon, or null) and the side of the mobile menu button. */
+export const header = headerOf(headerFile);
+
 export const site = {
   name: contact.name,
   role: contact.role,
@@ -65,13 +71,12 @@ export const site = {
 
 // Primary navigation (menu.json, "Hovedmenu"). Labels, URLs and sub-items started out as the old site's menu.
 export type NavItem = { label: string; href: string; children?: { label: string; href: string }[] };
-export const nav: NavItem[] = menu.items;
+// Sub-items in alphabetical order (Danish: æ, ø, å last), in both the desktop and the mobile menu.
+export const nav: NavItem[] = sortedNav(menu.items);
 /** Whether the header has the menu and its button ("Aktiveret" under "Hovedmenu"). */
 export const navShown = menu.enabled !== false;
 /** The links in the bar under the header on a phone (mobile-menu.json, "Mobilmenu"); none when it is turned off. */
 export const mobileNav: { label: string; href: string }[] = mobileMenu.enabled ? mobileMenu.items : [];
-// Sub-items in alphabetical order (Danish: æ, ø, å last), in both the desktop and the mobile menu.
-for (const item of nav) item.children?.sort((a, b) => a.label.localeCompare(b.label, 'da'));
 
 /** The texts every copy of a block has ("Blokke" in the editor), with {…} for what differs, by
  * the block's type: those written in its shared.ts, with the saved ones (blocks.json) over them. The

package/site/templates.ts

@@ -0,0 +1,7 @@
+// The page templates the site's theme offers: the theme in use's ("templates" in its theme.json), else the standard theme's.
+// Exposes offeredTemplates, read by PageLayout.astro and the check in scripts/check-side.mjs.
+import { templatesOf } from '../lib/page-template.mjs';
+import theme from '@theme/theme.json';
+
+/** The templates a page can choose, the first the default. */
+export const offeredTemplates: string[] = templatesOf(theme as { templates?: unknown });

package/site/theme.mjs

@@ -14,6 +14,7 @@ import { installedPacks, isIconName, packFolder, packProblems, phosphorFile, svg
 import { MATERIAL_ALL, MATERIAL_SSR, materialModule, materialSsrModule } from './materialSymbols.mjs';
 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 { storeImportProblems } from './storeTheme.mjs';
 
 /** The site's choice of icon pack, `{ "pack": "<id>" }` (config.icons in src/site/config.ts). */
@@ -400,6 +401,8 @@ export function themeProblems(theme) {
       problems.push(
         `${themeFolder(theme)}/theme.json: "motion" er den bevægelse, temaet bruger, når ingen er valgt: ${MOTION_SCHEMES.map((s) => `"${s}"`).join(', ')}.`,
       );
+    // The page templates it offers (lib/page-template.mjs); without the key, the standard theme's list.
+    for (const p of templateProblems(manifest.templates)) problems.push(`${themeFolder(theme)}/theme.json: ${p}`);
     // Its own licence and the licences of what it brings (fonts, code, pictures), for "Licenser" and the store.
     problems.push(
       ...declarationProblems({

package/site/tracking.client.ts

@@ -79,7 +79,7 @@ function googleSettings() {
 }
 
 /** Google's data layer with the visitor's answer in consent mode, for a tag of Google's (googleTag, Google Tag
- * Manager's container, src/apps/gtm/), set up once, before the first tag loads; a new answer updates it (choose). */
+ * Manager's container, morpheme-apps/apps/gtm/), set up once, before the first tag loads; a new answer updates it (choose). */
 export function googleConsent() {
   window.dataLayer = window.dataLayer || [];
   if (typeof window.gtag === 'function') return;
@@ -95,7 +95,7 @@ export function googleConsent() {
 let tagged = false;
 
 /** The Google tag (gtag.js) with this ID (Google Analytics' G-…, Google Ads' AW-…), for the apps that measure with it
- * (src/apps/google-analytics/, src/apps/google-ads/), in afterConsent: loaded once for all of them, each ID configured. */
+ * (morpheme-apps/apps/google-analytics/, morpheme-apps/apps/google-ads/), in afterConsent: loaded once for all of them, each ID configured. */
 export function googleTag(id: string, config: Record<string, unknown> = {}) {
   googleConsent();
   window.gtag('config', id, config);
@@ -202,7 +202,7 @@ export const consentOf = (meta: HTMLElement | null) => (meta?.dataset.consent ??
 
 /** Runs `run` once the visitor has said yes to one of `categories` in the cookie banner (now, if they already have),
  * on the site's own address (`hosts`, or with ?tracking=test): for an app that loads something that sets cookies
- * (`cookies` in its index.ts, e.g. Google Analytics, src/apps/google-analytics/). A no to all of them after a yes
+ * (`cookies` in its index.ts, e.g. Google Analytics, morpheme-apps/apps/google-analytics/). A no to all of them after a yes
  * reloads the page, so it stops. */
 export function afterConsent(categories: ConsentCategory[], run: () => void) {
   if (categories.some(granted)) start(categories, run);
@@ -213,7 +213,7 @@ export function afterConsent(categories: ConsentCategory[], run: () => void) {
 removeCookies(CONSENT_CATEGORIES.filter((category) => !granted(category)));
 
 // A time was booked: an app that books says so with the event "booking:done" on the window, with how
-// (`method`, e.g. "calendly": src/apps/calendly/).
+// (`method`, e.g. "calendly": morpheme-apps/apps/calendly/).
 addEventListener('booking:done', (e) => track('book_appointment', { method: (e as CustomEvent).detail?.method }));
 
 document.addEventListener('click', (e) => {

package/src/App.tsx

@@ -3,7 +3,6 @@
 //   (empty)          the start page
 //   liste/<id>       the list of a part, e.g. liste/priser, and liste/<id>/<app> a tab an installed app adds to it
 //                    (AppDefinition.tabs): liste/cookies/cookiescanner
-//   header           what is in the header on every page (the menu)
 //   lister           the short lists (the testimonials, the apps' lists)
 //   indstillinger/appstore   the app store, its apps, and indstillinger/appstore/temaer its themes (AppList.tsx StorePage); the
 //                    other settings are screens of their own, in the drawer's last section (MainMenu.tsx)
@@ -22,6 +21,8 @@
 //   udseende         how the site looks (Library.tsx Theme): udseende/temaer the themes installed (Themes) and udseende/temaer/<theme>
 //                    a theme's page, with the button that swaps to it (ThemePage), udseende/ikonpakker the icon packs (IconPacks),
 //                    udseende/bevaegelse how it moves (MotionSchemes), udseende/sidekolonne the block beside the pages' text (SideColumn),
+//                    udseende/header the header's menus and settings with its preview (HeaderSettings.tsx; once at header),
+//                    udseende/footer the footer's texts and links with its preview (FooterSettings.tsx; once at src/data/footer.json),
 //                    udseende/farver the colours (Colors.tsx;
 //                    udseende/farver/reservefarver the site's own while an app changes the pages'), udseende/logo the logo
 //                    and icon (BrandForm.tsx), udseende/dele the parts (Library.tsx PartsHome): udseende/dele/editor the editor's, every
@@ -132,12 +133,13 @@ import {
 import Colors, { colorsOf, FALLBACK_ROUTE } from './Colors';
 import { applyColors, applyMotion } from './theme';
 import SideColumn from './SideColumn';
+import HeaderSettings from './HeaderSettings';
+import FooterSettings from './FooterSettings';
 import { apps, notOffered } from './registry';
 import {
   Account,
   Blocks,
   Company,
-  Header,
   List,
   Lists,
   PartsHome,
@@ -168,6 +170,7 @@ import { arrived, screenOf, up } from './nav';
 import { siteT, siteText, t } from './i18n';
 import { snackbar } from '../lib/snackbar';
 import { appRouteOf } from '../lib/appRoute.mjs';
+import { movedRoute } from './movedRoutes.mjs';
 import { appType, clearNotifications, isOn, remember, signOff, stopServerWait, syncDevice, told, waitOnServer } from './notificationData';
 import Notifications from './Notifications';
 import { EditorOwn, InEditor } from './standard/view';
@@ -262,32 +265,15 @@ function taken(address: string, relations: Record<Relation, Option[]>, redirects
   return { text: t.app.addressRedirects(address, name), redirect: { end, name, via } };
 }
 
-// Screens that have moved, by their old address: a link or a bookmark to one opens it where it is now.
-const MOVED: 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',
-  // 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',
+// The app store's screens that have moved (movedRoutes.mjs has the others).
+const STORE_MOVED: Record<string, string> = {
   [STORE_BEFORE]: STORE_ROUTE,
   [`${STORE_BEFORE}/temaer`]: STORE_THEMES,
 };
 
 // The editor's address after the "#" (nav.ts screenOf).
 function routeOf(hash: string) {
-  const route = MOVED[screenOf(hash)] ?? screenOf(hash);
+  const route = movedRoute(screenOf(hash), STORE_MOVED);
   // An app's settings: on the screen with its category, when it has one ("Analytics", AppList.tsx settingsRoute), and so
   // the pages of their fields (Field.page) after them. Otherwise they are on the Settings tab of its page: apps/<id>
   // (a field's page, apps/<id>/indstillinger/<field>, stays, drawn by the same page).
@@ -734,7 +720,6 @@ function Page({ route, files, env, user, builtAt, onLogout }: PageProps) {
   if (!route) return <Start builtAt={builtAt} />;
   if (route === 'konto') return <Account user={user} files={files} onLogout={onLogout} />;
   if (route === 'notifikationer') return <Notifications />;
-  if (route === 'header') return <Header files={files} />;
   if (route === 'lister') return <Lists files={files} />;
   if (route === 'virksomheden') return <Company files={files} />;
   if (route === 'blokke') return <Blocks files={files} />;
@@ -755,6 +740,8 @@ function Page({ route, files, env, user, builtAt, onLogout }: PageProps) {
   if (route === 'udseende/ikonpakker') return <IconPacks env={env} files={files} />;
   if (route === 'udseende/bevaegelse') return <MotionSchemes env={env} files={files} />;
   if (route === 'udseende/sidekolonne') return <SideColumn env={env} files={files} />;
+  if (route === 'udseende/header') return <HeaderSettings env={env} />;
+  if (route === 'udseende/footer') return <FooterSettings env={env} />;
   // A theme installed has its page; one from the store that is not (or not yet built), its page in the store.
   const themeShown = route.startsWith('udseende/temaer/') && themes.find((x) => x.id === route.slice(16));
   if (themeShown) return <ThemePage key={themeShown.id} of={themeShown} env={env} files={files} />;
@@ -819,7 +806,8 @@ function Page({ route, files, env, user, builtAt, onLogout }: PageProps) {
   }
 
   const found = collectionOf(collections, route);
-  const file = files.find((f) => f.path === route);
+  // An optional file (the header's) that the site has not got yet opens empty; the first save makes it.
+  const file = files.find((f) => f.path === route) ?? (found?.dataFile?.optional ? { path: route, oid: '', text: '{}\n' } : undefined);
   if (!found || !file)
     return (
       <Screen title={t.app.notFound} back={{ href: '#', label: siteName }}>