@morphemecms/cms 0.9.0-next-20261105122349 → 0.9.0

package/src/formSections.ts

@@ -0,0 +1,100 @@
+// The sections of a long form, under each other on one page, each folding in and out under its heading (FoldSection in
+// ui.tsx), with their "on this page" list (SectionList, large and wider): which are open, the one in view (marked in the
+// list while the page scrolls), and a tap in the list, which opens one and scrolls to it. With `single` only one is open
+// at a time: opening one folds the others (the settings screens on a phone, SettingsSections.tsx). Exposes
+// useFormSections. Used by EntryForm.tsx and SettingsSections.tsx. Uses lib/section-in-view.mjs and lib/fold-open.mjs.
+import { useEffect, useRef, useState } from 'react';
+import { flushSync } from 'react-dom';
+import type { NavigationItem } from './ui';
+import { sectionInView, spyLine } from '../lib/section-in-view.mjs';
+import { onlyFirst, withOpen } from '../lib/fold-open.mjs';
+
+const scrolling = (): ScrollBehavior => (matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth');
+
+/** `sections`: the form's sections, in their order; `start`: those open from the start (the first marked in the list);
+ * `single`: only one open at a time. */
+export function useFormSections<S extends string>(sections: NavigationItem[], start: S[], single = false) {
+  // The section in view, marked in the sections list: while the page scrolls, the last one whose top is above a third of the
+  // screen (at the bottom of the page, the last one in view). A tap in the list marks its own and scrolls there; the
+  // mark stays meanwhile (`steering`, until the scroll ends).
+  const [section, setSection] = useState<S>(start[0]);
+  const boxes = useRef<Partial<Record<S, HTMLElement | null>>>({});
+  const order = useRef<S[]>([]);
+  order.current = sections.map((s) => s.id as S);
+  const steering = useRef(0);
+  const spy = useRef(() => {});
+  const steer = (id: S) => {
+    setSection(id);
+    steering.current = performance.now() + 1500;
+    addEventListener('scrollend', () => (steering.current = 0), { once: true });
+  };
+  const [open, setOpen] = useState<ReadonlySet<S>>(() => new Set(single ? start.slice(0, 1) : start));
+  const opened = (was: ReadonlySet<S>, id: S) => withOpen(was, id, single);
+  const unfold = (id: S) => setOpen((was) => opened(was, id));
+  // The window narrowed to `single`: only the first of those open stays open.
+  useEffect(() => {
+    if (single) setOpen((was) => onlyFirst(was, order.current));
+  }, [single]);
+  // A section opened by its heading is marked in the sections list; one folded, the one in view now (the page is shorter,
+  // without a scroll). With `single`, one whose heading went up out of view as the one above it folded is scrolled to.
+  const toggle = (id: S) => {
+    const opening = !open.has(id);
+    setOpen((was) => {
+      if (opening) return opened(was, id);
+      const next = new Set(was);
+      next.delete(id);
+      return next;
+    });
+    if (opening) setSection(id);
+    else requestAnimationFrame(() => spy.current());
+    if (opening && single)
+      requestAnimationFrame(() => {
+        const box = boxes.current[id];
+        if (box && box.getBoundingClientRect().top < 0) box.scrollIntoView({ block: 'start', behavior: scrolling() });
+      });
+  };
+  useEffect(() => {
+    let frame = 0;
+    spy.current = () => {
+      frame = 0;
+      if (performance.now() < steering.current) return;
+      const atBottom = innerHeight + scrollY >= document.documentElement.scrollHeight - 8;
+      const tops: Record<string, number | undefined> = {};
+      for (const id of order.current) tops[id] = boxes.current[id]?.getBoundingClientRect().top;
+      const here = sectionInView(order.current, tops, spyLine(innerHeight, atBottom));
+      if (here) setSection(here as S);
+    };
+    const onScroll = () => {
+      if (!frame) frame = requestAnimationFrame(spy.current);
+    };
+    addEventListener('scroll', onScroll, { passive: true });
+    return () => {
+      removeEventListener('scroll', onScroll);
+      cancelAnimationFrame(frame);
+    };
+  }, []);
+  // Opens a section and scrolls to it (or to `box` in it). It is opened at once (flushSync), so it is there to scroll to.
+  const goTo = (id: S, box?: HTMLElement | null) => {
+    if (!open.has(id)) flushSync(() => unfold(id));
+    steer(id);
+    requestAnimationFrame(() => (box ?? boxes.current[id])?.scrollIntoView({ block: 'start', behavior: scrolling() }));
+  };
+  return {
+    /** The section in view, for the sections list (SectionList `value`). */
+    section,
+    /** Marks a section in the list while the page scrolls to it (a field that keeps the form from being saved). */
+    steer,
+    /** Opens a section (a field in it keeps the form from being saved: useWrongField's `open`). */
+    unfold,
+    goTo,
+    /** A tap in the sections list (SectionList `onChange`). */
+    pick: (id: string) => goTo(id as S),
+    /** A section's FoldSection props: where it is, its heading (its name in the list), and whether it is open. */
+    sectionProps: (id: S) => ({
+      ref: (el: HTMLElement | null) => void (boxes.current[id] = el),
+      title: sections.find((s) => s.id === id)!.label,
+      open: open.has(id),
+      onToggle: () => toggle(id),
+    }),
+  };
+}

package/src/frontmatter.mjs

@@ -44,7 +44,7 @@ function toNode(doc, key, value) {
   return node;
 }
 
-// A true/false field that is true when it is missing from the file (Field.missing, "Sidekolonne": `side`): booleanRead
+// A true/false field that is true when it is missing from the file (Field.missing): booleanRead
 // gives the form's value for what is in the file; booleanWrite what is written for the form's value (nothing, '', when
 // it is the missing one, so the key leaves the file).
 export const booleanRead = (value, missing) => (value === undefined ? missing === true : value === true);

package/src/frontmatter.test.mjs

@@ -1,12 +1,12 @@
-// Tests booleanRead and booleanWrite (frontmatter.mjs): the page switch "Sidekolonne" is `side: false` when off and the
-// key is missing when on. Run: node --test src/frontmatter.test.mjs
+// Tests booleanRead and booleanWrite (frontmatter.mjs): a switch that is on when its key is missing (Field.missing) is
+// `key: false` when off and the key is missing when on. Run: node --test src/frontmatter.test.mjs
 import assert from 'node:assert/strict';
 import { test } from 'node:test';
 import { booleanRead, booleanWrite, writeFields } from './frontmatter.mjs';
 
-const yaml = 'title: "Om os"\nwide: false';
+const yaml = 'title: "Om os"\ndraft: false';
 
-test('a missing key reads as on, side: false as off', () => {
+test('a missing key reads as on, key: false as off', () => {
   assert.equal(booleanRead(undefined, true), true);
   assert.equal(booleanRead(false, true), false);
   assert.equal(booleanRead(true, true), true);
@@ -14,11 +14,11 @@ test('a missing key reads as on, side: false as off', () => {
   assert.equal(booleanRead(true, undefined), true);
 });
 
-test('off writes side: false, on removes the key and leaves the rest as it was', () => {
-  const off = writeFields(yaml, { side: booleanWrite(false, true) });
-  assert.equal(off, `${yaml}\nside: false`);
-  assert.equal(writeFields(off, { side: booleanWrite(true, true) }), yaml);
-  assert.equal(writeFields(yaml, { side: booleanWrite(true, true) }), yaml);
+test('off writes key: false, on removes the key and leaves the rest as it was', () => {
+  const off = writeFields(yaml, { pinned: booleanWrite(false, true) });
+  assert.equal(off, `${yaml}\npinned: false`);
+  assert.equal(writeFields(off, { pinned: booleanWrite(true, true) }), yaml);
+  assert.equal(writeFields(yaml, { pinned: booleanWrite(true, true) }), yaml);
 });
 
 test('a switch without a missing value is written as it is', () => {
@@ -27,7 +27,7 @@ test('a switch without a missing value is written as it is', () => {
 });
 
 test('front matter with CRLF line breaks is written back unchanged, and added fields use CRLF too', () => {
-  const crlf = 'title: "Om os"\r\nwide: false';
+  const crlf = 'title: "Om os"\r\ndraft: false';
   assert.equal(writeFields(crlf, {}), crlf);
-  assert.equal(writeFields(crlf, { side: false }), `${crlf}\r\nside: false`);
+  assert.equal(writeFields(crlf, { pinned: false }), `${crlf}\r\npinned: false`);
 });

package/src/headerPreview.d.mts

@@ -0,0 +1,48 @@
+/**
+ * What the form (`now`) changes from the files as they were saved (`saved`): only what differs is in it, so the rest of
+ * the page stays exactly as on the site.
+ * @param {HeaderValues} saved
+ * @param {HeaderValues} now
+ * @returns {HeaderDraft}
+ */
+export function headerDraft(saved: HeaderValues, now: HeaderValues): HeaderDraft;
+/**
+ * Puts what the form changes (headerDraft) into the site's page, drawn as the theme draws it (`theme`).
+ * @param {Document} doc
+ * @param {HeaderDraft} draft
+ * @param {HeaderTheme} theme
+ */
+export function swapHeader(doc: Document, draft: HeaderDraft, theme: HeaderTheme): void;
+export type NavLink = import("../site/header.mjs").NavLink;
+export type NavItem = import("../site/header.mjs").NavItem;
+export type Button = import("../site/header.mjs").Button;
+/**
+ * The header's three files as the form has them: menu.json, mobile-menu.json and header.json.
+ */
+export type HeaderValues = {
+    menu: Record<string, any>;
+    mobileMenu: Record<string, any>;
+    header: Record<string, any>;
+};
+/**
+ * What the form changes in the header; undefined leaves it as it is on the site. `nav` null: the menu is off (no items,
+ * no menu button); `mobileNav` empty: no bar; `button` null: the phone icon.
+ */
+export type HeaderDraft = {
+    nav?: NavItem[] | null;
+    mobileNav?: NavLink[];
+    menuSide?: "start" | "end";
+    button?: Button | null;
+};
+/**
+ * How the theme draws what the page may not have: the menu button's classes on each side, the button's place as HTML
+ * (when `button` changed; with data-editor="header-cta"), an empty bar of "Mobilmenu" with one tab (for a page without
+ * one), the name of an item's sub-pages button, and the page's address (for the open page's item).
+ */
+export type HeaderTheme = {
+    menuClass: Record<"start" | "end", string>;
+    cta?: string;
+    mobileNav: string;
+    subpagesOf: (label: string) => string;
+    current: string;
+};

package/src/headerPreview.mjs

@@ -0,0 +1,168 @@
+// The editor's preview of the header (HeaderSettings.tsx): what the header's settings in the form change (headerDraft),
+// and those changes put into the site's page (swapHeader), in the parts Header.astro and MobileNav.astro mark with
+// data-editor: the menu's items (header-nav), the menu button (header-menu) and its side, the bar of "Mobilmenu"
+// (mobile-nav) and the button's place (header-cta). Exposes headerDraft and swapHeader. Uses site/header.mjs; a DOM (the
+// browser's, jsdom in the tests), no React: what the theme's components draw comes in as HTML.
+import { headerOf, sortedNav } from '../site/header.mjs';
+
+/** @typedef {import('../site/header.mjs').NavLink} NavLink */
+/** @typedef {import('../site/header.mjs').NavItem} NavItem */
+/** @typedef {import('../site/header.mjs').Button} Button */
+
+/**
+ * The header's three files as the form has them: menu.json, mobile-menu.json and header.json.
+ * @typedef {{ menu: Record<string, any>, mobileMenu: Record<string, any>, header: Record<string, any> }} HeaderValues
+ */
+
+/**
+ * What the form changes in the header; undefined leaves it as it is on the site. `nav` null: the menu is off (no items,
+ * no menu button); `mobileNav` empty: no bar; `button` null: the phone icon.
+ * @typedef {{ nav?: NavItem[] | null, mobileNav?: NavLink[], menuSide?: 'start' | 'end', button?: Button | null }} HeaderDraft
+ */
+
+// As site/site.ts reads the files: the menu's items unless it is off, the bar's links while it is on.
+/** @param {Record<string, any>} menu */
+const navOf = (menu) => (menu.enabled !== false ? sortedNav(menu.items ?? []).map(linkOf) : null);
+/** @param {Record<string, any>} mobileMenu */
+const mobileNavOf = (mobileMenu) => (mobileMenu.enabled ? (mobileMenu.items ?? []).map(linkOf) : []);
+// An item with only what the header shows of it.
+/** @param {Record<string, any>} item @returns {NavItem} */
+const linkOf = ({ label = '', href = '', children }) =>
+  children?.length ? { label, href, children: children.map(linkOf) } : { label, href };
+
+const same = (a, b) => JSON.stringify(a) === JSON.stringify(b);
+
+/**
+ * What the form (`now`) changes from the files as they were saved (`saved`): only what differs is in it, so the rest of
+ * the page stays exactly as on the site.
+ * @param {HeaderValues} saved
+ * @param {HeaderValues} now
+ * @returns {HeaderDraft}
+ */
+export function headerDraft(saved, now) {
+  /** @type {HeaderDraft} */
+  const draft = {};
+  const [nav, navBefore] = [navOf(now.menu), navOf(saved.menu)];
+  if (!same(nav, navBefore)) draft.nav = nav;
+  const [mobileNav, mobileBefore] = [mobileNavOf(now.mobileMenu), mobileNavOf(saved.mobileMenu)];
+  if (!same(mobileNav, mobileBefore)) draft.mobileNav = mobileNav;
+  const [header, before] = [headerOf(now.header), headerOf(saved.header)];
+  if (header.menuSide !== before.menuSide) draft.menuSide = header.menuSide;
+  if (!same(header.button, before.button)) draft.button = header.button;
+  return draft;
+}
+
+/**
+ * How the theme draws what the page may not have: the menu button's classes on each side, the button's place as HTML
+ * (when `button` changed; with data-editor="header-cta"), an empty bar of "Mobilmenu" with one tab (for a page without
+ * one), the name of an item's sub-pages button, and the page's address (for the open page's item).
+ * @typedef {{ menuClass: Record<'start' | 'end', string>, cta?: string, mobileNav: string, subpagesOf: (label: string) => string, current: string }} HeaderTheme
+ */
+
+/** @param {ParentNode} doc @param {string} name @returns {HTMLElement | null} */
+const part = (doc, name) => doc.querySelector(`[data-editor="${name}"]`);
+
+// As Header.astro marks the open page: its own address, or a page under it (not the front page's).
+/** @param {string} current @param {string} href */
+const isActive = (current, href) => current === href || (href !== '/' && current.startsWith(href));
+
+/** @param {Element | null} a @param {NavLink} link @param {boolean} active */
+function setLink(a, link, active) {
+  if (!a) return;
+  a.textContent = link.label;
+  a.setAttribute('href', link.href);
+  if (active) a.setAttribute('aria-current', 'page');
+  else a.removeAttribute('aria-current');
+}
+
+/** @param {Document} doc @param {string} html */
+function fromHtml(doc, html) {
+  const box = doc.createElement('template');
+  box.innerHTML = html.trim();
+  return box.content;
+}
+
+// The menu's items, each drawn as one of the page's: an item with sub-items as one that has them (its button and menu),
+// else as one without. A page whose menu has neither keeps it as it is.
+/** @param {HTMLElement} nav @param {NavItem[]} items @param {HeaderTheme} theme */
+function drawNav(nav, items, theme) {
+  const list = nav.querySelector('ul');
+  const rows = [...(list?.children ?? [])];
+  const plain = rows.find((li) => !li.querySelector('[data-nav-toggle]'));
+  const parent = rows.find((li) => li.querySelector('[data-nav-toggle]'));
+  if (!list || (!plain && !parent)) return;
+  const drawn = items.map((item, i) => {
+    const kids = item.children ?? [];
+    const li = /** @type {HTMLElement} */ (((kids.length && parent) || plain || parent).cloneNode(true));
+    setLink(li.querySelector('a'), item, isActive(theme.current, item.href));
+    const toggle = li.querySelector('[data-nav-toggle]');
+    const menu = toggle && li.querySelector(`[id="${toggle.getAttribute('aria-controls')}"]`);
+    if (!kids.length) {
+      toggle?.remove();
+      menu?.remove();
+      return li;
+    }
+    if (toggle && menu) {
+      menu.id = `menu-${i}`;
+      toggle.setAttribute('aria-controls', menu.id);
+      toggle.setAttribute('aria-label', theme.subpagesOf(item.label));
+      const sub = menu.querySelector('ul');
+      const one = sub?.firstElementChild;
+      if (sub && one)
+        sub.replaceChildren(
+          ...kids.map((child) => {
+            const row = /** @type {HTMLElement} */ (one.cloneNode(true));
+            setLink(row.querySelector('a'), child, theme.current === child.href);
+            return row;
+          }),
+        );
+    }
+    return li;
+  });
+  list.replaceChildren(...drawn);
+}
+
+// The bar of "Mobilmenu": its links as its tabs, the first one's look; a page without the bar gets the theme's empty one at
+// the end of the header, where MobileNav.astro is.
+/** @param {Document} doc @param {NavLink[]} links @param {HeaderTheme} theme */
+function drawMobileNav(doc, links, theme) {
+  let bar = part(doc, 'mobile-nav');
+  if (!links.length) return bar?.remove();
+  if (!bar) {
+    part(doc, 'header')?.append(fromHtml(doc, theme.mobileNav));
+    bar = part(doc, 'mobile-nav');
+  }
+  const list = bar?.querySelector('ul');
+  const one = list?.firstElementChild;
+  if (!list || !one) return;
+  list.replaceChildren(
+    ...links.map((link) => {
+      const row = /** @type {HTMLElement} */ (one.cloneNode(true));
+      setLink(row.querySelector('a'), link, isActive(theme.current, link.href));
+      return row;
+    }),
+  );
+}
+
+/**
+ * Puts what the form changes (headerDraft) into the site's page, drawn as the theme draws it (`theme`).
+ * @param {Document} doc
+ * @param {HeaderDraft} draft
+ * @param {HeaderTheme} theme
+ */
+export function swapHeader(doc, draft, theme) {
+  const nav = part(doc, 'header-nav');
+  const menu = part(doc, 'header-menu');
+  if (draft.nav === null) {
+    nav?.remove();
+    menu?.remove();
+  } else if (draft.nav && nav) drawNav(nav, draft.nav, theme);
+  if (draft.mobileNav) drawMobileNav(doc, draft.mobileNav, theme);
+  if (draft.button !== undefined && theme.cta !== undefined) part(doc, 'header-cta')?.replaceWith(fromHtml(doc, theme.cta));
+  // The menu button first in the header's row, or last (after the button's place).
+  if (draft.menuSide && menu?.isConnected && menu.parentElement) {
+    menu.className = theme.menuClass[draft.menuSide];
+    if (draft.menuSide === 'start') menu.parentElement.prepend(menu);
+    else menu.parentElement.append(menu);
+  }
+}

package/src/headerPreview.test.mjs

@@ -0,0 +1,183 @@
+// Tests headerPreview.mjs: what the header's settings in the form change (headerDraft), and those changes put into a page
+// drawn as Header.astro and MobileNav.astro draw it (swapHeader). jsdom stands in for the browser's DOM.
+// Run: node --test src/headerPreview.test.mjs
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { JSDOM } from 'jsdom';
+import { headerDraft, swapHeader } from './headerPreview.mjs';
+
+// A page with the header as the site draws it: the menu button at the start, an item without and one with sub-items, the
+// phone icon, and the bar of "Mobilmenu".
+const PAGE = `<!doctype html><html><body>
+<header data-editor="header"><div data-header-row>
+  <div data-editor="header-menu" class="start-class"><button>Menu</button></div>
+  <a href="/" class="title">Logo</a>
+  <nav data-editor="header-nav"><ul>
+    <li data-nav-item><a href="/" class="md-nav-item" aria-current="page">Forside</a></li>
+    <li data-nav-item><a href="/b/" class="md-nav-item md-nav-item-parent">Behandlinger</a>
+      <button data-nav-toggle aria-controls="menu-1" aria-label="Sider under Behandlinger"></button>
+      <div id="menu-1"><ul><li><a href="/b/a/">Arm</a></li></ul></div></li>
+  </ul></nav>
+  <a data-editor="header-cta" href="tel:12345678" aria-label="Ring 12 34 56 78">phone</a>
+</div>
+<nav data-editor="mobile-nav"><ul><li><a href="/" class="tab" aria-current="page">Forside</a></li></ul></nav>
+</header><main></main></body></html>`;
+
+const THEME = {
+  menuClass: { start: 'start-class', end: 'end-class' },
+  mobileNav: '<nav data-editor="mobile-nav" class="bar"><ul class="tabs"><li><a href="/" class="tab"></a></li></ul></nav>',
+  subpagesOf: (label) => `Sider under ${label}`,
+  current: '/',
+};
+
+const page = () => new JSDOM(PAGE).window.document;
+const part = (doc, name) => doc.querySelector(`[data-editor="${name}"]`);
+const labels = (el) => [...el.querySelectorAll(':scope > ul > li > a')].map((a) => a.textContent);
+
+const SAVED = {
+  menu: {
+    enabled: true,
+    items: [
+      { label: 'Forside', href: '/' },
+      { label: 'Behandlinger', href: '/b/', children: [{ label: 'Arm', href: '/b/a/' }] },
+    ],
+  },
+  mobileMenu: { enabled: true, items: [{ label: 'Forside', href: '/' }] },
+  header: { menuSide: 'start' },
+};
+const withChange = (change) => ({ ...SAVED, ...change });
+
+test('headerDraft: nothing changed is an empty draft', () => {
+  assert.deepEqual(headerDraft(SAVED, structuredClone(SAVED)), {});
+});
+
+test('headerDraft: the menu turned off is no items and no menu button', () => {
+  assert.deepEqual(headerDraft(SAVED, withChange({ menu: { ...SAVED.menu, enabled: false } })), { nav: null });
+});
+
+test('headerDraft: the menu items with their sub-items A–Å', () => {
+  const items = [
+    {
+      label: 'Om',
+      href: '/om/',
+      children: [
+        { label: 'Zone', href: '/z/' },
+        { label: 'Arm', href: '/a/' },
+      ],
+    },
+  ];
+  assert.deepEqual(headerDraft(SAVED, withChange({ menu: { enabled: true, items } })).nav, [
+    {
+      label: 'Om',
+      href: '/om/',
+      children: [
+        { label: 'Arm', href: '/a/' },
+        { label: 'Zone', href: '/z/' },
+      ],
+    },
+  ]);
+});
+
+test('headerDraft: "Mobilmenu" turned off is an empty bar, turned on its links', () => {
+  assert.deepEqual(headerDraft(SAVED, withChange({ mobileMenu: { ...SAVED.mobileMenu, enabled: false } })), { mobileNav: [] });
+  const off = withChange({ mobileMenu: { enabled: false, items: [{ label: 'Kontakt', href: '/kontakt/' }] } });
+  assert.deepEqual(headerDraft(off, withChange({ mobileMenu: { ...off.mobileMenu, enabled: true } })), {
+    mobileNav: [{ label: 'Kontakt', href: '/kontakt/' }],
+  });
+});
+
+test('headerDraft: the button and the menu button at the end', () => {
+  const header = { button: { enabled: true, label: 'Book', to: 'booking' }, menuSide: 'end' };
+  assert.deepEqual(headerDraft(SAVED, withChange({ header })), { menuSide: 'end', button: { label: 'Book', to: 'booking' } });
+  assert.deepEqual(headerDraft(withChange({ header }), SAVED), { menuSide: 'start', button: null });
+});
+
+test('swapHeader: an empty draft leaves the page as it is', () => {
+  const doc = page();
+  const before = doc.body.innerHTML;
+  swapHeader(doc, {}, THEME);
+  assert.equal(doc.body.innerHTML, before);
+});
+
+test('swapHeader: the menu items drawn again, with and without sub-items', () => {
+  const doc = page();
+  const nav = [
+    { label: 'Kontakt', href: '/kontakt/' },
+    {
+      label: 'Om',
+      href: '/om/',
+      children: [
+        { label: 'Hold', href: '/om/hold/' },
+        { label: 'Pris', href: '/om/pris/' },
+      ],
+    },
+    { label: 'Forside', href: '/' },
+  ];
+  swapHeader(doc, { nav }, THEME);
+  const el = part(doc, 'header-nav');
+  assert.deepEqual(labels(el), ['Kontakt', 'Om', 'Forside']);
+  const [kontakt, om, forside] = el.querySelectorAll(':scope > ul > li');
+  assert.equal(kontakt.querySelector('[data-nav-toggle]'), null);
+  assert.equal(kontakt.querySelector('a').hasAttribute('aria-current'), false);
+  assert.equal(forside.querySelector('a').getAttribute('aria-current'), 'page');
+  const toggle = om.querySelector('[data-nav-toggle]');
+  assert.equal(toggle.getAttribute('aria-controls'), 'menu-1');
+  assert.equal(toggle.getAttribute('aria-label'), 'Sider under Om');
+  assert.deepEqual(
+    [...om.querySelectorAll('#menu-1 a')].map((a) => [a.textContent, a.getAttribute('href')]),
+    [
+      ['Hold', '/om/hold/'],
+      ['Pris', '/om/pris/'],
+    ],
+  );
+});
+
+test('swapHeader: the menu off removes its items and the menu button', () => {
+  const doc = page();
+  swapHeader(doc, { nav: null }, THEME);
+  assert.equal(part(doc, 'header-nav'), null);
+  assert.equal(part(doc, 'header-menu'), null);
+});
+
+test('swapHeader: the bar of "Mobilmenu" drawn again, removed, and put in when the page has none', () => {
+  const doc = page();
+  swapHeader(
+    doc,
+    {
+      mobileNav: [
+        { label: 'A', href: '/a/' },
+        { label: 'B', href: '/b/' },
+      ],
+    },
+    THEME,
+  );
+  assert.deepEqual(labels(part(doc, 'mobile-nav')), ['A', 'B']);
+  swapHeader(doc, { mobileNav: [] }, THEME);
+  assert.equal(part(doc, 'mobile-nav'), null);
+  swapHeader(doc, { mobileNav: [{ label: 'C', href: '/' }] }, THEME);
+  const bar = part(doc, 'mobile-nav');
+  assert.equal(bar.className, 'bar');
+  assert.equal(bar.parentElement, part(doc, 'header'));
+  assert.deepEqual(labels(bar), ['C']);
+  assert.equal(bar.querySelector('a').getAttribute('aria-current'), 'page');
+});
+
+test('swapHeader: the button in place of the phone icon', () => {
+  const doc = page();
+  const cta = '<div data-editor="header-cta" class="cta"><a href="/booking/">Book</a></div>';
+  swapHeader(doc, { button: { label: 'Book', to: 'booking' } }, { ...THEME, cta });
+  assert.equal(part(doc, 'header-cta').className, 'cta');
+  assert.equal(part(doc, 'header-cta').textContent, 'Book');
+  assert.equal(doc.querySelectorAll('[data-editor="header-cta"]').length, 1);
+});
+
+test('swapHeader: the menu button at the end and back at the start', () => {
+  const doc = page();
+  swapHeader(doc, { menuSide: 'end' }, THEME);
+  const menu = part(doc, 'header-menu');
+  assert.equal(menu.className, 'end-class');
+  assert.equal(menu.parentElement.lastElementChild, menu);
+  swapHeader(doc, { menuSide: 'start' }, THEME);
+  assert.equal(menu.className, 'start-class');
+  assert.equal(menu.parentElement.firstElementChild, menu);
+});

package/src/headerTheme.tsx

@@ -0,0 +1,58 @@
+// How the theme draws the parts of the header that its settings put in, as HTML for the editor's preview of the header
+// (headerPreview.mjs HeaderTheme): the button or the phone icon in the button's place, an empty bar of "Mobilmenu", the
+// menu button's classes on each side. Exposes headerThemeOf. Uses the theme's Buttons, IconButton, Tabs and headerParts.ts.
+import Buttons from '@theme/blocks/buttons/Buttons';
+import IconButton from '@theme/ui/IconButton';
+import { tabClass } from '@theme/ui/Tabs';
+import { headerCtaClass, headerEdge, headerMenuClass, mobileNavClass, mobileNavListClass } from '@theme/components/headerParts';
+import { buttonsOf } from './standard/buttons/view';
+import type { Button } from './standard/buttons/fields';
+import type { BlockData } from './blocks';
+import { htmlOf } from './pagePreview';
+import { siteT } from './i18n';
+import type { HeaderTheme } from './headerPreview.mjs';
+
+// As Header.astro draws the button's place: the button (filled) from the medium window size up, else the phone icon.
+function ctaOf(button: Button | null, data: BlockData) {
+  if (button) {
+    return (
+      <div data-editor="header-cta" className={headerCtaClass}>
+        <Buttons buttons={buttonsOf([{ ...button, kind: 'filled' }], data)} />
+      </div>
+    );
+  }
+  const { phone } = data.site.contact;
+  return (
+    <IconButton
+      href={`tel:${phone.replace(/\s/g, '')}`}
+      icon="phone"
+      label={`${data.site.labels.call} ${phone}`}
+      className={headerEdge.end}
+      data-editor="header-cta"
+    />
+  );
+}
+
+// As MobileNav.astro draws the bar, with one tab for the links to be drawn as.
+const mobileNavHtml = () =>
+  htmlOf(
+    <nav aria-label={siteT.theme.mobileMenu} data-mobile-nav data-editor="mobile-nav" className={mobileNavClass}>
+      <ul className={mobileNavListClass}>
+        <li>
+          <a href="/" className={tabClass} />
+        </li>
+      </ul>
+    </nav>,
+  );
+
+/** The theme's parts for the preview; `button`: the header's button as the form has it (headerOf), when it changed. The
+ * HTML is drawn here, when the preview draws the page, not while the form is drawn. */
+export function headerThemeOf(button: Button | null | undefined, data: BlockData): HeaderTheme {
+  return {
+    menuClass: { start: headerMenuClass('start'), end: headerMenuClass('end') },
+    cta: button === undefined ? undefined : htmlOf(ctaOf(button, data)),
+    mobileNav: mobileNavHtml(),
+    subpagesOf: siteT.theme.subpagesOf,
+    current: '/',
+  };
+}

package/src/i18n/da-DK/common.ts

@@ -90,6 +90,7 @@ export const common: Messages['common'] = {
   parts: {
     company: 'Virksomheden',
     header: 'Header',
+    footer: 'Footer',
     lists: 'Lister',
     blocks: 'Blokskabeloner',
     media: 'Filer',

package/src/i18n/da-DK/library.ts

@@ -67,6 +67,8 @@ export const library: Messages['library'] = {
   changeMotion: 'Skift bevægelse',
   motionSaved: (change) => `${change}. Hjemmesiden får den nye bevægelse om et par minutter.`,
   motionCommit: (name) => `Editor: skift bevægelse til ${name}`,
+  headerMenuButton: 'Menuknap',
+  footerSections: { text: 'Tekst', contact: 'Kontakt', links: 'Links' },
   sideNone: 'Ingen',
   sideNoneHint: 'Siderne har ingen kolonne ved siden af teksten',
   sideEmpty: 'Ingen installeret blok kan tegnes ved siden af en sides tekst.',

package/src/i18n/da-DK/preview.ts

@@ -5,6 +5,8 @@ export const preview: Messages['preview'] = {
   title: 'Forhåndsvisning',
   size: 'Vinduesstørrelse',
   sizes: { compact: 'Kompakt', medium: 'Mellem', expanded: 'Udvidet', large: 'Stor', extraLarge: 'Ekstra stor' },
+  phone: 'Telefon',
+  computer: 'Computer',
   making: 'Henter forhåndsvisningen…',
   failed: (error) => `Kunne ikke oprette forhåndsvisningen: ${error}`,
   notHere: 'Den side kan ikke forhåndsvises',

package/src/i18n/da-DK/text.ts

@@ -22,6 +22,7 @@ export const text: Messages['text'] = {
   color: 'Farve',
   colors: { accent: 'Accentfarve', muted: 'Stille tekst' },
   noColor: 'Ingen farve',
+  sectionSettings: 'Sektionsindstillinger',
   sectionColor: 'Sektionsfarve',
   sectionColors: { none: 'Ingen', surface: 'Flade', tint: 'Tone', accent: 'Accent' },
   linkTo: 'Linket går til',

package/src/i18n/en-US/common.ts

@@ -103,6 +103,7 @@ export const common = {
   parts: {
     company: 'Business',
     header: 'Header',
+    footer: 'Footer',
     lists: 'Lists',
     blocks: 'Block templates',
     media: 'Files',