@morphemecms/cms 0.9.0-next-20261105115842 → 0.9.1

package/src/editor.css

@@ -24,10 +24,14 @@
   --editor-section-gap: 2rem;
   --editor-section-rhythm: 0.625em;
 
-  /* A form's "on this page" area (SectionPane in ui.tsx) against the window's end edge: its width, the card in it
+  /* A form's "on this page" area (SectionPane in ui.tsx) against the window's end edge: its width (the card is as wide as the navigation drawer), the card in it
      stands --section-pane-gap in from the end edge and from under the top bar. */
-  --section-pane-width: 16rem;
+  --section-pane-width: calc(var(--navigation-drawer-width, 22.5rem) + var(--section-pane-gap));
   --section-pane-gap: 2rem;
+
+  /* The side panel of a block's fields and the section settings (BottomSheet `panel` in ui.tsx) on large and wider: half the
+     space beside the start panel, the content column taking the other half (see below). */
+  --side-panel-width: calc((100vw - var(--column-start)) / 2);
 }
 
 /* In dark mode the score's number in the light colours, which are read on the dark. */
@@ -79,6 +83,11 @@
   padding-block-start: calc(var(--editor-section-rhythm) * 2);
 }
 
+/* A list keeps its own indent inside the frame, so its bullets and numbers stand clear of the line. */
+.editor-text .ProseMirror > :is(ul, ol)[data-section-part] {
+  padding-inline-start: calc(var(--editor-section-pad) + 1.625em);
+}
+
 .editor-text .ProseMirror > :is([data-section-part='start'], [data-section-part='only']) {
   margin-block-start: var(--editor-section-gap);
   border-block-start: var(--editor-section-frame);
@@ -433,7 +442,9 @@
    far as it must to stay clear of the panels: its start margin is the middle of the window less the start panel, but
    not less than nothing and not more than the space left between the panels less the column. Only when that space is
    smaller than the column does it get narrower. (Measured against the window's width, 100vw, scrollbar and all.) Below
-   medium nothing stands beside the content and the column is centred by auto margins. */
+   medium nothing stands beside the content and the column is centred by auto margins. While the side panel is open (see
+   the end of this block) the panel takes the end half of the space beside the start panel and the column the other half:
+   --column-width stays the column's most, so on a very wide window it is narrower than its half. */
 :root {
   --column-start: 0px;
   --column-end: 0px;
@@ -474,6 +485,34 @@
   :root:has(.editor-section-pane) .editor-save-bar {
     right: var(--section-pane-width);
   }
+
+  /* The side panel (.editor-side-panel: BottomSheet `panel`; BlockDialog.tsx sets [data-side-panel] on the root while it is
+     open) stands at the window's end edge under the top bar, the full remaining height. It takes the "on this page" area's
+     place (that is hidden), and the content, which stays in view, inert behind the modal <dialog>, keeps clear of it. Its
+     backdrop is clear: the page is not dimmed. */
+  :root[data-side-panel] {
+    --column-end: var(--side-panel-width);
+  }
+  :root[data-side-panel] .editor-section-pane {
+    display: none;
+  }
+  :root[data-side-panel] .editor-content {
+    padding-inline-end: var(--side-panel-width);
+  }
+  :root[data-side-panel] .editor-save-bar {
+    right: var(--side-panel-width);
+  }
+  .editor-side-panel {
+    inset: var(--top-bar-height) 0 0 auto;
+    width: var(--side-panel-width);
+    height: calc(100dvh - var(--top-bar-height));
+  }
+  .editor-side-panel:dir(rtl) {
+    inset: var(--top-bar-height) auto 0 0;
+  }
+  .editor-side-panel::backdrop {
+    background: transparent;
+  }
 }
 
 /* Like an app: no grey flash when tapping links and buttons on a phone, and no zoom on a double tap.

package/src/fields.tsx

@@ -509,6 +509,16 @@ function FieldControl({ field, value, onChange }: Props) {
 // that depends on one there (inUse).
 const AroundHere = createContext<Around | undefined>(undefined);
 
+/** An object field's own fields without its group, whose heading is elsewhere (a section of Appearance › Header: "Action
+ * button"), at the object's path, so a wrong one is marked as it is in the group (WrongField). */
+export function ObjectFields({ field, value, onChange }: Props) {
+  return (
+    <PathHere.Provider value={joined(useContext(PathHere), field.name)}>
+      <FieldList fields={field.fields!} value={(value ?? {}) as Record<string, unknown>} onChange={onChange} />
+    </PathHere.Provider>
+  );
+}
+
 // The fields of an object, in order.
 export function FieldList({
   fields,
@@ -762,18 +772,21 @@ const capitalFirst = (s: string) => s.charAt(0).toUpperCase() + s.slice(1);
 // ListItem), and the items under one (its list field, the submenu) indented along a line, shown with
 // the arrow at the right. An item's text and page are changed in a sheet from the bottom,
 // opened with a tap on it or the pencil, and saved with "Gem"; the sheet also removes it. A new item
-// (+ in the top bar, "Tilføj punkt" under a submenu) opens its sheet at once; "Annuller" there takes it
-// away again. The arrows move an item up and down.
+// (+ in the top bar, "Tilføj punkt" under a submenu, and under the menu with `add`) opens its sheet at once; "Annuller"
+// there takes it away again. The arrows move an item up and down.
 export function MenuList({
   field,
   value,
   onChange,
   depth = 0,
+  add = false,
 }: {
   field: Field;
   value: unknown[];
   onChange: (v: unknown) => void;
   depth?: number;
+  /** "Tilføj …" under the list too, where the top bar has no "+" for it (two menus on one screen: Appearance › Header). */
+  add?: boolean;
 }) {
   const [open, setOpen] = useState<number | null>(null);
   // The item whose sheet is open, its fields as they are being changed (and as they were, written as
@@ -884,23 +897,20 @@ export function MenuList({
                     onChange={(v) => onChange(value.map((x, j) => (j === i ? { ...(x as Item), [sub.name]: v } : x)))}
                     depth={depth + 1}
                   />
-                  <Button
-                    kind="text"
-                    size="small"
-                    icon={Plus}
-                    className="mt-1 ml-5"
+                  <AddItem
+                    field={sub}
+                    sub
                     onClick={() =>
                       onChange(value.map((x, j) => (j === i ? { ...(x as Item), [sub.name]: [...children, newItem(sub)] } : x)))
                     }
-                  >
-                    {t.forms.addOne(sub.singular ?? t.forms.item)}
-                  </Button>
+                  />
                 </div>
               )}
             </ListItem>
           );
         })}
       </ul>
+      {add && <AddItem field={field} onClick={() => onChange([...value, newItem(field)])} />}
       <BottomSheet
         ref={sheetRef}
         aria-label={editing ? nameOf(editing.value) || capitalFirst(singular) : undefined}
@@ -940,3 +950,12 @@ export function MenuList({
     </div>
   );
 }
+
+// "Tilføj …" (an item to a list of the menu): under a submenu (`sub`, indented as its items), or under the menu.
+function AddItem({ field, sub = false, onClick }: { field: Field; sub?: boolean; onClick: () => void }) {
+  return (
+    <Button kind="text" size="small" icon={Plus} className={sub ? 'mt-1 ml-5' : 'mt-1'} onClick={onClick}>
+      {t.forms.addOne(field.singular ?? t.forms.item)}
+    </Button>
+  );
+}

package/src/footerPreview.d.mts

@@ -0,0 +1,46 @@
+/**
+ * What the form (`now`) changes from footer.json as it was saved (`saved`): only what differs is in it, so the rest of the
+ * page stays exactly as on the site.
+ * @param {FooterValues} saved
+ * @param {FooterValues} now
+ * @returns {FooterDraft}
+ */
+export function footerDraft(saved: FooterValues, now: FooterValues): FooterDraft;
+/**
+ * Puts what the form changes (footerDraft) into the site's page: the texts as they are, and the links as copies of the
+ * page's own first link (or, when it has none, drawn with `theme`).
+ * @param {Document} doc
+ * @param {FooterDraft} draft
+ * @param {FooterTheme} theme
+ */
+export function swapFooter(doc: Document, draft: FooterDraft, theme: FooterTheme): void;
+/**
+ * footer.json as the form has it.
+ */
+export type FooterValues = {
+    text?: string;
+    contactHeading?: string;
+    linksHeading?: string;
+    links?: {
+        label?: string;
+        href?: string;
+    }[];
+};
+/**
+ * What the form changes in the footer; undefined leaves it as it is on the site.
+ */
+export type FooterDraft = {
+    text?: string;
+    contactHeading?: string;
+    linksHeading?: string;
+    links?: {
+        label: string;
+        href: string;
+    }[];
+};
+/**
+ * How the theme draws what the page may not have: the class of a link, for the list of a page whose footer has none.
+ */
+export type FooterTheme = {
+    linkClass: string;
+};

package/src/footerPreview.mjs

@@ -0,0 +1,84 @@
+// The editor's preview of the footer (FooterSettings.tsx): what the footer's form changes (footerDraft), and those changes
+// put into the site's page (swapFooter), in the parts Footer.astro marks with data-editor: the text under the name
+// (footer-text), the two headings (footer-contact-heading, footer-links-heading) and the links (footer-links).
+// Exposes footerDraft and swapFooter. A DOM (the browser's, jsdom in the tests), no React.
+
+/**
+ * footer.json as the form has it.
+ * @typedef {{ text?: string, contactHeading?: string, linksHeading?: string, links?: { label?: string, href?: string }[] }} FooterValues
+ */
+
+/**
+ * What the form changes in the footer; undefined leaves it as it is on the site.
+ * @typedef {{ text?: string, contactHeading?: string, linksHeading?: string, links?: { label: string, href: string }[] }} FooterDraft
+ */
+
+// A link with only what the footer shows of it.
+/** @param {{ label?: string, href?: string }} link */
+const linkOf = ({ label = '', href = '' }) => ({ label, href });
+
+const same = (a, b) => JSON.stringify(a) === JSON.stringify(b);
+
+/**
+ * What the form (`now`) changes from footer.json as it was saved (`saved`): only what differs is in it, so the rest of the
+ * page stays exactly as on the site.
+ * @param {FooterValues} saved
+ * @param {FooterValues} now
+ * @returns {FooterDraft}
+ */
+export function footerDraft(saved, now) {
+  /** @type {FooterDraft} */
+  const draft = {};
+  for (const name of /** @type {const} */ (['text', 'contactHeading', 'linksHeading'])) {
+    if ((now[name] ?? '') !== (saved[name] ?? '')) draft[name] = now[name] ?? '';
+  }
+  const [links, before] = [(now.links ?? []).map(linkOf), (saved.links ?? []).map(linkOf)];
+  if (!same(links, before)) draft.links = links;
+  return draft;
+}
+
+/**
+ * How the theme draws what the page may not have: the class of a link, for the list of a page whose footer has none.
+ * @typedef {{ linkClass: string }} FooterTheme
+ */
+
+/** @param {ParentNode} doc @param {string} name @returns {HTMLElement | null} */
+const part = (doc, name) => doc.querySelector(`[data-editor="${name}"]`);
+
+/**
+ * Puts what the form changes (footerDraft) into the site's page: the texts as they are, and the links as copies of the
+ * page's own first link (or, when it has none, drawn with `theme`).
+ * @param {Document} doc
+ * @param {FooterDraft} draft
+ * @param {FooterTheme} theme
+ */
+export function swapFooter(doc, draft, theme) {
+  for (const [name, key] of /** @type {const} */ ([
+    ['footer-text', 'text'],
+    ['footer-contact-heading', 'contactHeading'],
+    ['footer-links-heading', 'linksHeading'],
+  ])) {
+    const el = part(doc, name);
+    if (el && draft[key] !== undefined) el.textContent = draft[key];
+  }
+  const list = part(doc, 'footer-links');
+  if (!list || !draft.links) return;
+  const one = list.firstElementChild ?? null;
+  list.replaceChildren(
+    ...draft.links.map((link) => {
+      let row = /** @type {HTMLElement | null} */ (one?.cloneNode(true) ?? null);
+      if (!row) {
+        row = doc.createElement('li');
+        const a = doc.createElement('a');
+        a.className = theme.linkClass;
+        row.append(a);
+      }
+      const a = row.querySelector('a');
+      if (a) {
+        a.textContent = link.label;
+        a.setAttribute('href', link.href);
+      }
+      return row;
+    }),
+  );
+}

package/src/footerPreview.test.mjs

@@ -0,0 +1,100 @@
+// Tests footerPreview.mjs: what the footer's form changes (footerDraft), and those changes put into a page drawn as
+// Footer.astro draws it (swapFooter). jsdom stands in for the browser's DOM.
+// Run: node --test src/footerPreview.test.mjs
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { JSDOM } from 'jsdom';
+import { footerDraft, swapFooter } from './footerPreview.mjs';
+
+const PAGE = `<!doctype html><html><body>
+<footer data-editor="footer"><p class="name">Navn</p><p data-editor="footer-text">Gammel tekst</p>
+<p data-editor="footer-contact-heading">Kontakt</p>
+<p data-editor="footer-links-heading">Links</p>
+<ul data-editor="footer-links"><li class="row"><a href="/a/" class="item">A</a></li><li class="row"><a href="/b/" class="item">B</a></li></ul>
+</footer></body></html>`;
+
+const THEME = { linkClass: 'item' };
+const page = () => new JSDOM(PAGE).window.document;
+const part = (doc, name) => doc.querySelector(`[data-editor="${name}"]`);
+
+const SAVED = {
+  text: 'Gammel tekst',
+  contactHeading: 'Kontakt',
+  linksHeading: 'Links',
+  links: [
+    { label: 'A', href: '/a/' },
+    { label: 'B', href: '/b/' },
+  ],
+};
+
+test('footerDraft: nothing changed is an empty draft', () => {
+  assert.deepEqual(footerDraft(SAVED, structuredClone(SAVED)), {});
+});
+
+test('footerDraft: only the texts that differ', () => {
+  assert.deepEqual(footerDraft(SAVED, { ...SAVED, text: 'Ny', linksHeading: 'Praktisk' }), { text: 'Ny', linksHeading: 'Praktisk' });
+});
+
+test('footerDraft: the links with only label and href', () => {
+  const now = { ...SAVED, links: [{ label: 'C', href: '/c/', extra: 1 }] };
+  assert.deepEqual(footerDraft(SAVED, now), { links: [{ label: 'C', href: '/c/' }] });
+});
+
+test('footerDraft: a file the site has not got is empty', () => {
+  assert.deepEqual(footerDraft({}, {}), {});
+  assert.deepEqual(footerDraft({}, { text: 'Hej' }), { text: 'Hej' });
+});
+
+test('swapFooter: an empty draft leaves the page as it is', () => {
+  const doc = page();
+  const before = doc.body.innerHTML;
+  swapFooter(doc, {}, THEME);
+  assert.equal(doc.body.innerHTML, before);
+});
+
+test('swapFooter: the text and the two headings are redrawn', () => {
+  const doc = page();
+  swapFooter(doc, { text: 'Ny tekst', contactHeading: 'Ring', linksHeading: 'Praktisk' }, THEME);
+  assert.equal(part(doc, 'footer-text').textContent, 'Ny tekst');
+  assert.equal(part(doc, 'footer-contact-heading').textContent, 'Ring');
+  assert.equal(part(doc, 'footer-links-heading').textContent, 'Praktisk');
+});
+
+test('swapFooter: the links are copies of the page own', () => {
+  const doc = page();
+  const links = [
+    { label: 'X', href: '/x/' },
+    { label: 'Y', href: '/y/' },
+    { label: 'Z', href: '/z/' },
+  ];
+  swapFooter(doc, { links }, THEME);
+  const rows = [...part(doc, 'footer-links').children];
+  assert.deepEqual(
+    rows.map((li) => [li.className, li.querySelector('a').textContent, li.querySelector('a').getAttribute('href')]),
+    [
+      ['row', 'X', '/x/'],
+      ['row', 'Y', '/y/'],
+      ['row', 'Z', '/z/'],
+    ],
+  );
+});
+
+test('swapFooter: links with none on the page are drawn with the theme class', () => {
+  const doc = page();
+  part(doc, 'footer-links').replaceChildren();
+  swapFooter(doc, { links: [{ label: 'X', href: '/x/' }] }, THEME);
+  assert.equal(part(doc, 'footer-links').innerHTML, '<li><a class="item" href="/x/">X</a></li>');
+});
+
+test('swapFooter: no links leaves an empty list', () => {
+  const doc = page();
+  swapFooter(doc, { links: [] }, THEME);
+  assert.equal(part(doc, 'footer-links').children.length, 0);
+});
+
+test('swapFooter: a page without the marked parts is left alone', () => {
+  const doc = new JSDOM('<body><footer data-editor="footer"><slot></slot></footer></body>').window.document;
+  const before = doc.body.innerHTML;
+  swapFooter(doc, { text: 'x', links: [{ label: 'a', href: '/' }] }, THEME);
+  assert.equal(doc.body.innerHTML, before);
+});

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;
+};