@morphemecms/cms 0.0.0-stage → 0.1.0

package/src/images.ts

@@ -0,0 +1,163 @@
+// Pictures added in the editor. Before upload they are made at most 2000 px and WebP (JPEG in
+// browsers that cannot write WebP, like Safari), as the old editor did; packages/editor/scripts/responsive-images.mjs
+// makes the smaller sizes when the site is built. They go in public/images/uploads/<year>/<month>/
+// like imported pictures, and are saved in the same commit as the page that uses them (on
+// their own from Filer, Media.tsx). PDFs, videos and zip files, from Filer, are saved as they are, in
+// public/filer/ (prepareFile).
+import { useState } from 'react';
+import { slugify } from './schema';
+import { sourceColorsOf } from '../lib/dynamic-colors';
+import { config } from '@site/config';
+import type { Status } from './FormFrame';
+import { t } from './i18n';
+
+const MAX = 2000;
+
+// url: a temporary address of the picture in this browser, shown until the site is rebuilt.
+export type Upload = { url: string; path: string; bytes: Uint8Array; saved: boolean };
+
+// The pictures made ready in this visit, by their address on the site: shown from the browser
+// (shownAt), as the site has them only once it has been rebuilt.
+const fresh = new Map<string, string>();
+export const shownAt = (src: string) => fresh.get(src) ?? src;
+// A picture renamed in this visit is shown from its old address until the site is rebuilt.
+export const showMoved = (from: string, to: string) => fresh.set(to, shownAt(from));
+
+/** What a file in the site's folder of files is, by its ending: a PDF, a video or a zip file. */
+export type FileKind = 'pdf' | 'video' | 'zip';
+
+// The endings of each kind, with the type a browser shows it as.
+const ENDINGS: Record<string, [FileKind, string]> = {
+  pdf: ['pdf', 'application/pdf'],
+  mp4: ['video', 'video/mp4'],
+  m4v: ['video', 'video/mp4'],
+  mov: ['video', 'video/quicktime'],
+  webm: ['video', 'video/webm'],
+  zip: ['zip', 'application/zip'],
+};
+const endingOf = (name: string) => /\.([^./]+)$/.exec(name)?.[1].toLowerCase() ?? '';
+
+/** A file's kind by its name or address, or null for one that is not a PDF, a video or a zip file. */
+export const fileKindOf = (name: string): FileKind | null => ENDINGS[endingOf(name)]?.[0] ?? null;
+
+/** The type a browser shows a file as, by its name ('' for a picture). */
+export const typeOf = (name: string) => ENDINGS[endingOf(name)]?.[1] ?? '';
+
+// A picked file's ending: its own, or for one without it the first of its type ("Guide" from a phone,
+// application/pdf, as pdf); '' for another kind of file.
+const pickedEnding = (file: File) =>
+  ENDINGS[endingOf(file.name)] ? endingOf(file.name) : (Object.keys(ENDINGS).find((e) => ENDINGS[e][1] === file.type) ?? '');
+
+/** A picked file's kind, by its ending or else its type, or null for one that is not a PDF, a video or a zip file. */
+export const pickedKindOf = (file: File): FileKind | null => ENDINGS[pickedEnding(file)]?.[0] ?? null;
+
+/** A file picked on the phone or computer: a picture, or (`all`, in Filer) a picture, a PDF, a video or a
+ * zip file. */
+export function pickImage(all = false): Promise<File | null> {
+  return new Promise((resolve) => {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = all
+      ? ['image/*', ...new Set(Object.values(ENDINGS).map(([, type]) => type)), ...Object.keys(ENDINGS).map((e) => `.${e}`)].join(',')
+      : 'image/*';
+    input.addEventListener('change', () => resolve(input.files?.[0] ?? null));
+    input.addEventListener('cancel', () => resolve(null));
+    input.click();
+  });
+}
+
+/** The colours in a picture that are best as a source colour (dynamic colour, sourceColorsOf), best first: one on the
+ * phone or computer (it is not uploaded), or one at an address of the editor's own. Read small, which is enough and quick. */
+export async function colorsInPicture(file: Blob): Promise<string[]> {
+  const bitmap = await createImageBitmap(file);
+  const scale = Math.min(1, 128 / Math.max(bitmap.width, bitmap.height));
+  const canvas = document.createElement('canvas');
+  canvas.width = Math.max(1, Math.round(bitmap.width * scale));
+  canvas.height = Math.max(1, Math.round(bitmap.height * scale));
+  const context = canvas.getContext('2d')!;
+  context.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
+  bitmap.close();
+  return sourceColorsOf(context.getImageData(0, 0, canvas.width, canvas.height).data);
+}
+
+export async function prepareImage(file: File): Promise<Upload> {
+  const bitmap = await createImageBitmap(file, { imageOrientation: 'from-image' }).catch(() => {
+    throw new Error(t.app.pictureNotOpened);
+  });
+  const scale = Math.min(1, MAX / Math.max(bitmap.width, bitmap.height));
+  const canvas = document.createElement('canvas');
+  canvas.width = Math.round(bitmap.width * scale);
+  canvas.height = Math.round(bitmap.height * scale);
+  canvas.getContext('2d')!.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
+  bitmap.close();
+  const encode = (type: string) => new Promise<Blob | null>((resolve) => canvas.toBlob(resolve, type, 0.82));
+  let blob = await encode('image/webp');
+  if (blob?.type !== 'image/webp') blob = await encode('image/jpeg');
+  if (!blob) throw new Error(t.app.pictureNotReady);
+
+  const now = new Date();
+  const folder = `${config.folders.media}/${now.getFullYear()}/${String(now.getMonth() + 1).padStart(2, '0')}`;
+  // A short random ending, so two pictures called IMG_1234 do not get the same name.
+  const name = `${slugify(file.name.replace(/\.[^.]*$/, '')) || 'billede'}-${Math.random().toString(36).slice(2, 6)}`;
+  const ext = blob.type === 'image/webp' ? 'webp' : 'jpg';
+  const upload = {
+    url: URL.createObjectURL(blob),
+    path: `${folder}/${name}.${ext}`,
+    bytes: new Uint8Array(await blob.arrayBuffer()),
+    saved: false,
+  };
+  fresh.set(publicPath(upload.path), upload.url);
+  return upload;
+}
+
+/** The most a PDF, a video or a zip file may weigh, in MB: it goes to GitHub in one request with the commit. */
+export const FILE_MAX_MB = 10;
+
+/** A PDF, a video or a zip file as it is, in the site's folder of files (`config.folders.files`, /filer/ on
+ * the site), named by its own name as an address ("Stress guide.pdf" as stress-guide.pdf, the ending in
+ * small letters), with -2, -3 … when the name is taken (`taken`: the paths there are). */
+export async function prepareFile(file: File, taken: string[]): Promise<Upload> {
+  if (file.size > FILE_MAX_MB * 1024 * 1024) throw new Error(t.media.tooBig(FILE_MAX_MB));
+  const folder = config.folders.files;
+  const stem = slugify(file.name.replace(/\.[^.]*$/, '')) || 'fil';
+  const ending = pickedEnding(file);
+  let path = `${folder}/${stem}.${ending}`;
+  for (let n = 2; taken.includes(path); n++) path = `${folder}/${stem}-${n}.${ending}`;
+  const upload = { url: URL.createObjectURL(file), path, bytes: new Uint8Array(await file.arrayBuffer()), saved: false };
+  fresh.set(publicPath(upload.path), upload.url);
+  return upload;
+}
+
+// The address of an uploaded picture on the site.
+export const publicPath = (path: string) => path.replace(/^public/, '');
+
+// The pictures added in a form (a page, a fixed page), kept in the browser until "Gem", which saves
+// them in the same commit. upload: pick one and make it ready; added: those not saved yet, newest
+// first (offered in the gallery, MediaPicker.tsx); saving: the pictures a text uses.
+export function useUploads(notify: (status: Status) => void) {
+  const [uploads, setUploads] = useState<Upload[]>([]);
+
+  async function upload(): Promise<Upload | null> {
+    const file = await pickImage();
+    if (!file) return null;
+    notify({ text: t.app.preparingPicture });
+    try {
+      const prepared = await prepareImage(file);
+      setUploads((u) => [...u, prepared]);
+      notify(null);
+      return prepared;
+    } catch (e) {
+      notify({ text: (e as Error).message, error: true });
+      return null;
+    }
+  }
+
+  const added = uploads.filter((u) => !u.saved).reverse();
+  /** The pictures not saved yet that a text uses. */
+  const usedIn = (text: string) => uploads.filter((u) => !u.saved && text.includes(publicPath(u.path)));
+  const markSaved = (pictures: Upload[]) => setUploads((all) => all.map((u) => (pictures.includes(u) ? { ...u, saved: true } : u)));
+
+  return { upload, added, usedIn, markSaved };
+}
+
+export type Uploads = ReturnType<typeof useUploads>;

package/src/licenses.ts

@@ -0,0 +1,79 @@
+// The licences of the third-party work the site and the editor are made with ("Licenser" under "Indstillinger",
+// Licenses.tsx), as the build finds them (/editor/licenses.json, licensesIntegration in packages/editor/lib/licenses.mjs),
+// what an app (defineApp) and a theme (theme.json) declare (their own licence and the third-party work they bring), and
+// what the store's catalog has of them (scripts/store-release.mjs, storeLicenses).
+
+/** What a third-party work is to the site: a font, icons, code (a library, also styles) or pictures. */
+export type LicenseKind = 'font' | 'icons' | 'library' | 'image';
+
+/** A third-party work an app or a theme brings, as it declares it (`thirdParty`): an npm package it imports (its
+ * version, who made it, its licence and its text are its folder's; `author`, and `file`, a file in the app's or the
+ * theme's folder with the licence's text, for a package that has neither); or another work (a font or pictures in its
+ * folder), with its name, who made it, its licence's name and the file in its folder with its text. A theme's icon
+ * packs (icon-packs/) are not declared here: each pack's manifest says its licence. */
+export type ThirdParty =
+  | { package: string; kind: LicenseKind; author?: string; file?: string }
+  | { name: string; version?: string; author: string; license: string; file: string; kind: LicenseKind };
+
+/** 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}`;
+
+/** 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`:
+ * the licence's standard text, as the package has none of its own), what it is, who brings it (`where`, none for an
+ * icon set or a work only an app or a theme not in use brings) and through which packages (`via`, when the site does not
+ * import it itself). `shipped: false`: brought by an app or a theme the site is built with, but not in what is downloaded (the Worker's, the
+ * build's). */
+export type LicensedWork = {
+  id: string;
+  name: string;
+  version: string | null;
+  author: string;
+  license: string;
+  text: string;
+  standard?: boolean;
+  kind: LicenseKind;
+  where: LicenseWhere[];
+  via?: string[];
+  shipped?: false;
+};
+
+/** 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}`;
+  kind: 'app' | 'theme';
+  /** Its folder's name in src/apps/ or src/themes/. */
+  key: string;
+  name: string;
+  version: string | null;
+  author: string;
+  license: string;
+  text: string | null;
+  works: string[];
+  inUse: boolean;
+};
+
+/** What the build wrote (/editor/licenses.json). */
+export type LicensesFile = { works: LicensedWork[]; owners: LicenseOwner[] };
+
+/** A work an app or a theme declares, as the store's catalog has it: without its text. */
+export type StoreLicense = Pick<LicensedWork, 'name' | 'version' | 'author' | 'license' | 'kind'>;
+
+/** An app's or a theme's licences as the store's catalog has them: its own licence's name and what it brings. */
+export type StoreLicenses = { license: string; works: StoreLicense[] };
+
+// The file, fetched once each time the editor opens: undefined while it loads, null when there is none (the site is not
+// built since it came, or the editor is offline).
+let loaded: Promise<LicensesFile | null> | undefined;
+
+/** The licences as the site was last built (/editor/licenses.json). */
+export function loadLicenses(): Promise<LicensesFile | null> {
+  loaded ??= fetch('/editor/licenses.json', { cache: 'no-store' })
+    .then((res) => (res.ok ? (res.json() as Promise<LicensesFile>) : null))
+    .catch(() => null);
+  return loaded;
+}

package/src/markdown.d.mts

@@ -0,0 +1,12 @@
+/** A Milkdown editor of the text, in root (not created yet). @param {HTMLElement | null} root @param {string} markdown
+ * @returns {import('@milkdown/kit/core').Editor} */
+export function makeEditor(root: HTMLElement | null, markdown: string): import("@milkdown/kit/core").Editor;
+export function partsOf(ctx: any): any[];
+export function markdownOf(ctx: any): any;
+export const HTML: "html";
+/** @type {import('@milkdown/kit/utils').$NodeSchema<'siteBlock'>} */
+export const siteBlockSchema: import("@milkdown/kit/utils").$NodeSchema<"siteBlock">;
+/** @type {import('@milkdown/kit/utils').$MarkSchema<'textColor'>} */
+export const textColorSchema: import("@milkdown/kit/utils").$MarkSchema<"textColor">;
+/** @type {import('@milkdown/kit/utils').$Prose} */
+export const spacing: import("@milkdown/kit/utils").$Prose;

package/src/markdown.mjs

@@ -0,0 +1,204 @@
+// The Milkdown setup shared by the editor (/editor/) and packages/editor/scripts/editor-roundtrip.mjs, so the check
+// runs the same Markdown parser and writer as the browser.
+import { Editor, editorViewCtx, rootCtx, defaultValueCtx, remarkStringifyOptionsCtx, serializerCtx } from '@milkdown/kit/core';
+import { commonmark } from '@milkdown/kit/preset/commonmark';
+import { gfm } from '@milkdown/kit/preset/gfm';
+import { $markSchema, $nodeSchema, $prose, $remark } from '@milkdown/kit/utils';
+import { Plugin } from '@milkdown/kit/prose/state';
+import { blockHtml, parseBlock } from '../lib/blocks.mjs';
+import { COLOR_CLOSE, TEXT_COLORS, colorClass, colorOpen, colorOpened } from '../lib/text-colors.mjs';
+
+// Write Markdown the way imported files are written: "-   " bullets and
+// "* * *" rules, so a save changes as few lines as possible.
+const stringify = { bullet: '-', listItemIndent: 'tab', rule: '*', ruleSpaces: true };
+
+// The site's blocks in the text (packages/editor/lib/blocks.mjs), read from and written back as their line of HTML.
+// Milkdown puts HTML at the top of the text in a paragraph; a paragraph that is only a block becomes
+// a siteBlock node (with its type and props) before the text is read. Any type is read: the sections
+// of the fixed pages are blocks too (sections.mjs); the site shows only its own (RichText.astro).
+// Other HTML on a line of its own (YouTube, Vimeo, Calendly, an imported table) is a block too, of the
+// type HTML, with the HTML as it is as its `code`, and written back as it was.
+export const HTML = 'html';
+const remarkSiteBlocks = $remark('remarkSiteBlocks', () => () => (tree) => {
+  tree.children = tree.children.map((child) => {
+    const only = child.type === 'paragraph' && child.children?.length === 1 ? child.children[0] : child;
+    if (only.type !== 'html') return child;
+    const block = parseBlock(String(only.value), null);
+    return block
+      ? { type: 'siteBlock', blockType: block.type, props: block.props }
+      : { type: 'siteBlock', blockType: HTML, props: { code: String(only.value) } };
+  });
+});
+
+// One node per block, with its type and its props. How it looks in the editor: MarkdownEditor.tsx.
+/** @type {import('@milkdown/kit/utils').$NodeSchema<'siteBlock'>} */
+export const siteBlockSchema = $nodeSchema('siteBlock', () => ({
+  group: 'block',
+  atom: true,
+  selectable: true,
+  attrs: { type: { default: '' }, props: { default: {} } },
+  parseDOM: [{ tag: 'div[data-site-block]', getAttrs: (dom) => parseBlock(dom.dataset.siteBlock ?? '', null) ?? false }],
+  toDOM: (node) => ['div', { 'data-site-block': blockHtml(node.attrs.type, node.attrs.props) }],
+  parseMarkdown: {
+    match: (node) => node.type === 'siteBlock',
+    runner: (state, node, type) => {
+      state.addNode(type, { type: node.blockType, props: node.props });
+    },
+  },
+  toMarkdown: {
+    match: (node) => node.type.name === 'siteBlock',
+    runner: (state, node) => {
+      const { type, props } = node.attrs;
+      state.addNode('html', undefined, type === HTML ? String(props.code ?? '') : blockHtml(type, props));
+    },
+  },
+}));
+
+// A word or more in one of the site's colours (packages/editor/lib/text-colors.mjs): in the Markdown the HTML around
+// it, <span class="color-accent">…</span>, which Milkdown would read as two pieces of HTML with the text between them;
+// read as the text with the colour (a mark), and written back as the same HTML. A piece of HTML without its end, or
+// another span, stays HTML.
+function colorRuns(children) {
+  const out = [];
+  for (let i = 0; i < children.length; i++) {
+    const color = children[i].type === 'html' ? colorOpened(children[i].value) : null;
+    let end = -1;
+    for (let j = i + 1, depth = 0; color && j < children.length && end < 0; j++) {
+      const node = children[j];
+      if (node.type !== 'html') continue;
+      if (/^<span\b/.test(node.value)) depth++;
+      else if (node.value === COLOR_CLOSE && depth-- === 0) end = j;
+    }
+    if (end < 0) out.push(children[i]);
+    else {
+      out.push({ type: 'textColor', color, children: children.slice(i + 1, end) });
+      i = end;
+    }
+  }
+  return out;
+}
+
+function textColorMarkdown(node, _, state, info) {
+  const tracker = state.createTracker(info);
+  let value = tracker.move(colorOpen(node.color));
+  value += tracker.move(state.containerPhrasing(node, { ...tracker.current(), before: '>', after: '<' }));
+  return value + tracker.move(COLOR_CLOSE);
+}
+textColorMarkdown.peek = () => '<';
+
+const remarkTextColors = $remark(
+  'remarkTextColors',
+  () =>
+    function () {
+      const data = this.data();
+      (data.toMarkdownExtensions ??= []).push({ handlers: { textColor: textColorMarkdown } });
+      const walk = (node) => {
+        if (!node.children) return;
+        node.children = colorRuns(node.children);
+        node.children.forEach(walk);
+      };
+      return walk;
+    },
+);
+
+/** @type {import('@milkdown/kit/utils').$MarkSchema<'textColor'>} */
+export const textColorSchema = $markSchema('textColor', () => ({
+  attrs: { color: { default: TEXT_COLORS[0] } },
+  parseDOM: TEXT_COLORS.map((color) => ({ tag: `span.${colorClass(color)}`, attrs: { color } })),
+  toDOM: (mark) => ['span', { class: colorClass(mark.attrs.color) }],
+  parseMarkdown: {
+    match: (node) => node.type === 'textColor',
+    runner: (state, node, markType) => {
+      state.openMark(markType, { color: node.color });
+      state.next(node.children);
+      state.closeMark(markType);
+    },
+  },
+  toMarkdown: {
+    match: (mark) => mark.type.name === 'textColor',
+    runner: (state, mark) => {
+      state.withMark(mark, 'textColor', undefined, { color: mark.attrs.color });
+    },
+  },
+}));
+
+/** A Milkdown editor of the text, in root (not created yet). @param {HTMLElement | null} root @param {string} markdown
+ * @returns {import('@milkdown/kit/core').Editor} */
+export function makeEditor(root, markdown) {
+  return Editor.make()
+    .config((ctx) => {
+      ctx.set(rootCtx, root);
+      ctx.set(defaultValueCtx, markdown);
+      ctx.update(remarkStringifyOptionsCtx, (options) => ({ ...options, ...stringify }));
+    })
+    .use(commonmark)
+    .use(gfm)
+    .use(remarkSiteBlocks)
+    .use(siteBlockSchema)
+    .use(remarkTextColors)
+    .use(textColorSchema);
+}
+
+// The text in parts, for a fixed page's sections (sections.mjs): each block, each heading at the top
+// level ("Overskrift", H2), and the Markdown of the text between them. Empty paragraphs (the lines
+// kept free between two blocks to write in), empty headings (left when one is deleted) and the page's H1
+// (no section's) are left out.
+export function partsOf(ctx) {
+  const doc = ctx.get(editorViewCtx).state.doc;
+  const serialize = ctx.get(serializerCtx);
+  const parts = [];
+  let run = [];
+  const flush = () => {
+    const markdown = run.length ? serialize(doc.type.create(null, run)).trim() : '';
+    if (markdown) parts.push({ markdown });
+    run = [];
+  };
+  doc.forEach((node) => {
+    // HTML in a section's text stays in its text.
+    if (node.type.name === 'siteBlock' && node.attrs.type !== HTML) {
+      flush();
+      parts.push({ block: { type: node.attrs.type, props: node.attrs.props } });
+    } else if (node.type.name === 'heading' && node.attrs.level === 2) {
+      flush();
+      parts.push({ heading: node.textContent.trim() });
+    } else if (node.type.name === 'heading' && node.attrs.level === 1) {
+      flush();
+    } else if (!((node.type.name === 'paragraph' || node.type.name === 'heading') && !node.textContent.trim() && !node.childCount))
+      run.push(node);
+  });
+  flush();
+  return parts;
+}
+
+// Keeps a free line (an empty paragraph) between two blocks and before and after them, so there is
+// always a place to write a text between them. Not part of undo. Used by the editor (MarkdownEditor.tsx)
+// and the check, which writes the text back with the free lines in it.
+/** @type {import('@milkdown/kit/utils').$Prose} */
+export const spacing = $prose(
+  () =>
+    new Plugin({
+      appendTransaction: (_, __, state) => {
+        const gaps = [];
+        let before = null;
+        state.doc.forEach((node, at) => {
+          if (node.type.name === 'siteBlock' && (!before || before.type.name === 'siteBlock')) gaps.push(at);
+          before = node;
+        });
+        if (state.doc.lastChild?.type.name === 'siteBlock') gaps.push(state.doc.content.size);
+        if (!gaps.length) return null;
+        const tr = state.tr;
+        for (const at of gaps.reverse()) tr.insert(at, state.schema.nodes.paragraph.create());
+        return tr.setMeta('addToHistory', false);
+      },
+    }),
+);
+
+// The Markdown of the text, without its empty paragraphs (the free lines between the blocks).
+export function markdownOf(ctx) {
+  const doc = ctx.get(editorViewCtx).state.doc;
+  const kept = [];
+  doc.forEach((node) => {
+    if (!(node.type.name === 'paragraph' && node.content.size === 0)) kept.push(node);
+  });
+  return ctx.get(serializerCtx)(doc.type.create(null, kept));
+}

package/src/nav.ts

@@ -0,0 +1,68 @@
+// How the editor goes between its screens (the address after the "#") in the browser's history, so
+// that the back arrow and the phone's back gesture go the same way. The back arrow goes to the screen
+// above (Screen.tsx `back`); when that is the screen before it in the history, it goes back there, as
+// the gesture does, and otherwise the screen above takes the place of this one. No step is added, so
+// the gesture never brings back a screen that was left with the arrow. Every step in the history knows
+// its place and the screen before it (`history.state`).
+
+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 start screen. */
+export function screenOf(hash: string) {
+  try {
+    return decodeURIComponent(hash.replace(/^#/, ''));
+  } catch {
+    return '';
+  }
+}
+
+// The place of the screen that is shown, and while a step is undone (arrived), the place it goes back to.
+let at = step()?.at ?? 0;
+let undoing: number | null = null;
+if (!step()) history.replaceState({ at, prev: null } satisfies Step, '');
+
+/** Called by the app on every new address, with the screen it came from: null when it is a step back
+ * that `undo` asked for, else how to undo the step (back to the screen it came from) and take it again
+ * (when the owner leaves without saving). */
+export function arrived(from: string): { undo: () => void; redo: () => void } | null {
+  const now = step();
+  if (undoing !== null && now?.at === undoing) {
+    at = undoing;
+    undoing = null;
+    return null;
+  }
+  undoing = null;
+  const before = at;
+  // A step that was there (back, forward): its own place.
+  if (now) {
+    at = now.at;
+    return {
+      undo: () => ((undoing = before), history.go(before - now.at)),
+      redo: () => history.go(now.at - before),
+    };
+  }
+  // A new step (a link, or the address typed): after this one.
+  const href = location.hash;
+  at = before + 1;
+  history.replaceState({ at, prev: from } satisfies Step, '');
+  return {
+    undo: () => ((undoing = before), history.back()),
+    redo: () => (location.hash = href),
+  };
+}
+
+/** Puts another screen in the place of this one (no new step in the history). */
+export function replace(href: string) {
+  history.replaceState({ at, prev: step()?.prev ?? null } satisfies Step, '', href);
+  dispatchEvent(new HashChangeEvent('hashchange'));
+}
+
+/** The back arrow: to the screen above, `href`. Back in the history when that is the screen before,
+ * else in the place of this one. */
+export function up(href: string) {
+  if (step()?.prev === screenOf(href)) history.back();
+  else replace(href);
+}

package/src/notFound.ts

@@ -0,0 +1,28 @@
+// The addresses visitors came to that do not exist, as the site's Worker keeps them (packages/editor/worker/not-found.js,
+// /api/not-found on the editor's own address), for "Ikke fundet" under "Videresendelser" (Redirects.tsx).
+// Asked with the GitHub sign-in (the Worker's cookie, sent with the request): the Worker lets only someone who can save
+// the site see them.
+
+/** An address that does not exist: how many visits, the first and the last (ISO dates), and where the
+ * last visitor came from (an address of the site, another site's name, or ''). */
+export type Missing = { path: string; count: number; first: string; last: string; from: string };
+
+const API = '/api/not-found';
+
+/** The addresses, most visits first; null when the site does not keep them (no Worker, no storage). */
+export async function loadNotFound(): Promise<Missing[] | null> {
+  const res = await fetch(API, { cache: 'no-store' });
+  if (res.status === 503 || !res.headers.get('content-type')?.includes('application/json')) return null;
+  if (!res.ok) throw new Error(String(res.status));
+  return ((await res.json()) as { entries: Missing[] }).entries;
+}
+
+/** Takes the addresses off the list (they now send on, or are not worth it). */
+export async function forgetNotFound(paths: string[]): Promise<void> {
+  const res = await fetch(API, {
+    method: 'DELETE',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify({ paths }),
+  });
+  if (!res.ok) throw new Error(String(res.status));
+}