@morphemecms/cms 0.1.0 → 0.2.0-next-20261104150211

package/lib/blocks.mjs

@@ -1,90 +1,90 @@
-// Blocks the site's owner puts in the text of a page in the editor (/editor/, the Milkdown plugin in
-// packages/editor/src/markdown.mjs). Each is a folder in src/apps/<app>/blocks/, named by its type. In the Markdown each is
-// one line of HTML that nothing else writes, e.g.
-//   <div data-block="testimonials" data-props="{&quot;heading&quot;:&quot;Det siger kunderne&quot;}"></div>
-// so the rest of the text, and every page without blocks, is rendered as before. On the site
-// packages/editor/theme/components/RichText.astro shows the block's own component in its place.
-const escape = (s) => s.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
-const unescape = (s) =>
-  s
-    .replace(/&quot;|&#34;|&#x22;/gi, '"')
-    .replace(/&lt;|&#60;|&#x3c;/gi, '<')
-    .replace(/&gt;|&#62;|&#x3e;/gi, '>')
-    .replace(/&#39;|&#x27;/gi, "'")
-    .replace(/&amp;|&#38;|&#x26;/gi, '&');
-
-/** The line of HTML for a block. */
-export function blockHtml(type, props = {}) {
-  const json = JSON.stringify(props);
-  return json === '{}' ? `<div data-block="${type}"></div>` : `<div data-block="${type}" data-props="${escape(json)}"></div>`;
-}
-
-// A block as written by blockHtml, or as the site's HTML pipeline writes it again.
-const BLOCK = /<div data-block="([a-z]+)"(?: data-props="([^"]*)")?\s*><\/div>/;
-
-// Blocks that have become another block, by their old type: the block they are read as (its type and props), so a
-// text from before keeps working on the site and in the editor, which writes the new block when the page is saved.
-const FORMER = {
-  // "Blog" became "Blogindlæg" with all the posts (with any of its tags), the newest large.
-  blog: (props) => ({ type: 'posts', props: { ...props, show: 'all', design: 'featured' } }),
-};
-
-// types: the blocks that count (the folders in src/apps/<app>/blocks/); null for any.
-const read = (type, props, types) => {
-  let block;
-  try {
-    block = { type, props: props ? JSON.parse(unescape(props)) : {} };
-  } catch {
-    return null;
-  }
-  if (FORMER[type]) block = FORMER[type](block.props);
-  return types && !types.includes(block.type) ? null : block;
-};
-
-/** The block a piece of HTML is (and nothing else), or null; of any type unless types are given.
- * @param {string} html
- * @param {string[] | null} [types] */
-export function parseBlock(html, types = null) {
-  const m = html.trim().match(new RegExp(`^${BLOCK.source}$`));
-  return m ? read(m[1], m[2], types) : null;
-}
-
-/** Every block in a text, hidden ones too, in order ({ type, props }), of any type. nested: also those in the text of a
- * block (a "Knapper" block in a "Banner"'s text, written in its props), each after the block it is in.
- * @param {string} html
- * @returns {{ type: string; props: Record<string, any> }[]} */
-export function blocksIn(html, nested = false) {
-  const found = [...html.matchAll(new RegExp(BLOCK.source, 'g'))].map((m) => read(m[1], m[2], null)).filter((b) => b !== null);
-  if (!nested) return found;
-  const inside = (b) =>
-    Object.values(b.props).flatMap((v) => (typeof v === 'string' && v.includes('data-block=') ? blocksIn(v, true) : []));
-  return found.flatMap((b) => [b, ...inside(b)]);
-}
-
-/** A text (Markdown) cut at its first block of a type (on a line of its own, as blockHtml writes it): the text before
- * it, and the block's line with the text after it ('' without one).
- * @param {unknown} markdown
- * @param {string} type
- * @returns {[string, string]} */
-export function cutAtBlock(markdown, type) {
-  const lines = String(markdown ?? '').split('\n');
-  const at = lines.findIndex((line) => parseBlock(line, [type]));
-  return at < 0 ? [lines.join('\n').trim(), ''] : [lines.slice(0, at).join('\n').trim(), lines.slice(at).join('\n').trim()];
-}
-
-/** Rendered HTML in pieces: text ({ html }) and the blocks of these types in it ({ type, props }); a
- * hidden block (`hidden`, Skjul på siden in the editor) is left out. */
-export function splitBlocks(html, types) {
-  const parts = [];
-  const all = new RegExp(BLOCK.source, 'g');
-  let last = 0;
-  for (const m of html.matchAll(all)) {
-    const block = read(m[1], m[2], types);
-    if (!block) continue;
-    parts.push({ html: html.slice(last, m.index) });
-    if (!block.props.hidden) parts.push(block);
-    last = m.index + m[0].length;
-  }
-  parts.push({ html: html.slice(last) });
-  return parts.filter((p) => p.html === undefined || p.html.trim());
-}
+// Blocks the site's owner puts in the text of a page in the editor (/editor/, the Milkdown plugin in
+// packages/editor/src/markdown.mjs). Each is a folder in src/apps/<app>/blocks/, named by its type. In the Markdown each is
+// one line of HTML that nothing else writes, e.g.
+//   <div data-block="testimonials" data-props="{&quot;heading&quot;:&quot;Det siger kunderne&quot;}"></div>
+// so the rest of the text, and every page without blocks, is rendered as before. On the site
+// packages/editor/theme/components/RichText.astro shows the block's own component in its place.
+const escape = (s) => s.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+const unescape = (s) =>
+  s
+    .replace(/&quot;|&#34;|&#x22;/gi, '"')
+    .replace(/&lt;|&#60;|&#x3c;/gi, '<')
+    .replace(/&gt;|&#62;|&#x3e;/gi, '>')
+    .replace(/&#39;|&#x27;/gi, "'")
+    .replace(/&amp;|&#38;|&#x26;/gi, '&');
+
+/** The line of HTML for a block. */
+export function blockHtml(type, props = {}) {
+  const json = JSON.stringify(props);
+  return json === '{}' ? `<div data-block="${type}"></div>` : `<div data-block="${type}" data-props="${escape(json)}"></div>`;
+}
+
+// A block as written by blockHtml, or as the site's HTML pipeline writes it again.
+const BLOCK = /<div data-block="([a-z]+)"(?: data-props="([^"]*)")?\s*><\/div>/;
+
+// Blocks that have become another block, by their old type: the block they are read as (its type and props), so a
+// text from before keeps working on the site and in the editor, which writes the new block when the page is saved.
+const FORMER = {
+  // "Blog" became "Blogindlæg" with all the posts (with any of its tags), the newest large.
+  blog: (props) => ({ type: 'posts', props: { ...props, show: 'all', design: 'featured' } }),
+};
+
+// types: the blocks that count (the folders in src/apps/<app>/blocks/); null for any.
+const read = (type, props, types) => {
+  let block;
+  try {
+    block = { type, props: props ? JSON.parse(unescape(props)) : {} };
+  } catch {
+    return null;
+  }
+  if (FORMER[type]) block = FORMER[type](block.props);
+  return types && !types.includes(block.type) ? null : block;
+};
+
+/** The block a piece of HTML is (and nothing else), or null; of any type unless types are given.
+ * @param {string} html
+ * @param {string[] | null} [types] */
+export function parseBlock(html, types = null) {
+  const m = html.trim().match(new RegExp(`^${BLOCK.source}$`));
+  return m ? read(m[1], m[2], types) : null;
+}
+
+/** Every block in a text, hidden ones too, in order ({ type, props }), of any type. nested: also those in the text of a
+ * block (a "Knapper" block in a "Banner"'s text, written in its props), each after the block it is in.
+ * @param {string} html
+ * @returns {{ type: string; props: Record<string, any> }[]} */
+export function blocksIn(html, nested = false) {
+  const found = [...html.matchAll(new RegExp(BLOCK.source, 'g'))].map((m) => read(m[1], m[2], null)).filter((b) => b !== null);
+  if (!nested) return found;
+  const inside = (b) =>
+    Object.values(b.props).flatMap((v) => (typeof v === 'string' && v.includes('data-block=') ? blocksIn(v, true) : []));
+  return found.flatMap((b) => [b, ...inside(b)]);
+}
+
+/** A text (Markdown) cut at its first block of a type (on a line of its own, as blockHtml writes it): the text before
+ * it, and the block's line with the text after it ('' without one).
+ * @param {unknown} markdown
+ * @param {string} type
+ * @returns {[string, string]} */
+export function cutAtBlock(markdown, type) {
+  const lines = String(markdown ?? '').split('\n');
+  const at = lines.findIndex((line) => parseBlock(line, [type]));
+  return at < 0 ? [lines.join('\n').trim(), ''] : [lines.slice(0, at).join('\n').trim(), lines.slice(at).join('\n').trim()];
+}
+
+/** Rendered HTML in pieces: text ({ html }) and the blocks of these types in it ({ type, props }); a
+ * hidden block (`hidden`, Skjul på siden in the editor) is left out. */
+export function splitBlocks(html, types) {
+  const parts = [];
+  const all = new RegExp(BLOCK.source, 'g');
+  let last = 0;
+  for (const m of html.matchAll(all)) {
+    const block = read(m[1], m[2], types);
+    if (!block) continue;
+    parts.push({ html: html.slice(last, m.index) });
+    if (!block.props.hidden) parts.push(block);
+    last = m.index + m[0].length;
+  }
+  parts.push({ html: html.slice(last) });
+  return parts.filter((p) => p.html === undefined || p.html.trim());
+}

package/lib/caseCollisions.d.mts

@@ -0,0 +1,4 @@
+/** Groups of paths whose stems differ only by case, each sorted. @param {string[]} paths @returns {string[][]} */
+export function caseCollisions(paths: string[]): string[][];
+/** One Danish sentence per such group among the files under each dir (relative to root). @param {string} root @param {string[]} dirs */
+export function caseCollisionProblems(root: string, dirs: string[]): string[];

package/lib/caseCollisions.mjs

@@ -0,0 +1,62 @@
+// Files whose names differ only by case (Dialog.tsx beside dialog.ts): on a case-insensitive disk (Windows,
+// macOS) an import without its extension finds the wrong one. Exposes caseCollisions (pure) and caseCollisionProblems
+// (npm run check:content). Only node:fs and node:path.
+import { readdirSync, existsSync } from 'node:fs';
+import { join, relative } from 'node:path';
+
+/** A path without its last extension (theme/ui/Dialog.tsx -> theme/ui/Dialog). @param {string} path */
+function stemOf(path) {
+  const lastSlash = path.lastIndexOf('/');
+  const folder = lastSlash === -1 ? '' : path.slice(0, lastSlash + 1);
+  const name = lastSlash === -1 ? path : path.slice(lastSlash + 1);
+  const lastDot = name.lastIndexOf('.');
+  if (lastDot <= 0) return path;
+  return `${folder}${name.slice(0, lastDot)}`;
+}
+
+/** Groups of paths whose stems differ only by case, each sorted. @param {string[]} paths @returns {string[][]} */
+export function caseCollisions(paths) {
+  const groups = new Map();
+  for (const p of paths) {
+    const key = stemOf(p).toLowerCase();
+    if (!groups.has(key)) groups.set(key, new Set());
+    groups.get(key).add(stemOf(p));
+  }
+  const result = [];
+  for (const stems of groups.values()) {
+    if (stems.size >= 2) {
+      const group = paths.filter((p) => stems.has(stemOf(p))).sort();
+      result.push(group);
+    }
+  }
+  return result.sort((a, b) => (a[0] < b[0] ? -1 : a[0] > b[0] ? 1 : 0));
+}
+
+/** One Danish sentence per such group among the files under each dir (relative to root). @param {string} root @param {string[]} dirs */
+export function caseCollisionProblems(root, dirs) {
+  const problems = [];
+  for (const dir of dirs) {
+    const absDir = join(root, dir);
+    if (!existsSync(absDir)) continue;
+
+    const files = [];
+    const walk = (current) => {
+      for (const e of readdirSync(current, { withFileTypes: true })) {
+        if (e.isDirectory()) {
+          if (e.name !== 'node_modules' && !e.name.startsWith('.')) walk(join(current, e.name));
+        } else if (e.isFile()) {
+          const rel = relative(root, join(current, e.name)).split('\\').join('/');
+          files.push(rel);
+        }
+      }
+    };
+    walk(absDir);
+
+    for (const group of caseCollisions(files)) {
+      problems.push(
+        `${group.join(', ')}: navnene er ens, når store og små bogstaver ikke tæller, så en import uden filtype finder den forkerte på Windows og macOS. Giv den ene et andet navn.`,
+      );
+    }
+  }
+  return problems;
+}

package/lib/caseCollisions.test.d.mts

@@ -0,0 +1 @@
+export {};

package/lib/caseCollisions.test.mjs

@@ -0,0 +1,74 @@
+// Tests for lib/caseCollisions.mjs: which paths collide by case, and caseCollisionProblems on a folder,
+// skipping node_modules and taking a dir with the system's separators (Windows).
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { mkdtempSync, mkdirSync, writeFileSync, rmSync } from 'node:fs';
+import { join } from 'node:path';
+import { tmpdir } from 'node:os';
+import { caseCollisions, caseCollisionProblems } from './caseCollisions.mjs';
+
+test('caseCollisions detects Dialog collision', () => {
+  const input = ['theme/ui/Dialog.tsx', 'theme/ui/dialog.ts', 'theme/ui/Button.tsx'];
+  const expected = [['theme/ui/Dialog.tsx', 'theme/ui/dialog.ts']];
+  assert.deepEqual(caseCollisions(input), expected);
+});
+
+test('caseCollisions no collision for different stems', () => {
+  const input = ['src/Redirects.tsx', 'src/redirectData.ts'];
+  assert.deepEqual(caseCollisions(input), []);
+});
+
+test('caseCollisions no collision for identical stems', () => {
+  const input = ['a.ts', 'a.tsx'];
+  assert.deepEqual(caseCollisions(input), []);
+});
+
+test('caseCollisions detects mixed collision', () => {
+  const input = ['x/A.ts', 'x/a.tsx', 'x/a.css'];
+  const expected = [['x/A.ts', 'x/a.css', 'x/a.tsx']];
+  assert.deepEqual(caseCollisions(input), expected);
+});
+
+test('caseCollisions no collision for different folders', () => {
+  const input = ['one/A.ts', 'two/a.ts'];
+  assert.deepEqual(caseCollisions(input), []);
+});
+
+test('caseCollisionProblems checks folder and skips node_modules', () => {
+  const root = mkdtempSync(join(tmpdir(), 'case-'));
+  try {
+    const base = join(root, 'pkg');
+    mkdirSync(join(base, 'ui'), { recursive: true });
+    writeFileSync(join(base, 'ui', 'Dialog.tsx'), '');
+    writeFileSync(join(base, 'ui', 'dialog.ts'), '');
+    writeFileSync(join(base, 'ui', 'Button.tsx'), '');
+
+    const nm = join(base, 'node_modules', 'x');
+    mkdirSync(nm, { recursive: true });
+    writeFileSync(join(nm, 'A.js'), '');
+    writeFileSync(join(nm, 'a.ts'), '');
+
+    const problems = caseCollisionProblems(root, ['pkg', 'missing']);
+    assert.equal(problems.length, 1);
+    assert.ok(problems[0].startsWith('pkg/ui/Dialog.tsx, pkg/ui/dialog.ts: '));
+  } finally {
+    rmSync(root, { recursive: true, force: true });
+  }
+});
+
+test('caseCollisionProblems takes a dir with the system separator', () => {
+  const root = mkdtempSync(join(tmpdir(), 'case-'));
+  try {
+    const base = join(root, 'pkg');
+    mkdirSync(join(base, 'ui'), { recursive: true });
+    writeFileSync(join(base, 'ui', 'Dialog.tsx'), '');
+    writeFileSync(join(base, 'ui', 'dialog.ts'), '');
+    writeFileSync(join(base, 'ui', 'Button.tsx'), '');
+
+    const problems = caseCollisionProblems(root, [join('pkg', 'ui')]);
+    assert.equal(problems.length, 1);
+    assert.ok(problems[0].startsWith('pkg/ui/Dialog.tsx, pkg/ui/dialog.ts: '));
+  } finally {
+    rmSync(root, { recursive: true, force: true });
+  }
+});

package/lib/colors.ts

@@ -1,86 +1,86 @@
-// The site's colours as data, in the site's file of colours (config.colors, e.g. src/data/colors.json):
-// one set for light mode and one for dark, each a CSS variable by its name without "--":
-//   { "light": { "bg": "#f6f4f1", "accent": "#a3345a", … }, "dark": { … } }
-// and, when they are made from one source colour (dynamic colour, dynamic-colors.ts), the choice they were
-// made from: "dynamic": { "source": "#a3345a", "harmony": "analogous", "contrast": "standard" } (or a "variant" instead
-// of the "harmony", as one written before the harmonies has). (When each page takes
-// its colours from its picture, content-based colour, that is an app's: packages/editor/site/pageColors.ts.)
-// The site writes them into the <head> of its pages (colorsCss), so its CSS, Tailwind and the blocks
-// take them from there; the editor shows and changes them under "Farver" (Colors.tsx) and checks that
-// text can be read on its background (contrast). No React or browser here: the build uses it too.
-
-import type { Dynamic } from './dynamic-colors';
-
-export type ColorSet = Record<string, string>;
-export type Colors = { light: ColorSet; dark: ColorSet; dynamic?: Dynamic };
-export const MODES = ['light', 'dark'] as const;
-export type Mode = (typeof MODES)[number];
-
-const HEX = /^#[0-9a-f]{6}$/i;
-const NAME = /^[a-z][a-z0-9-]*$/;
-
-/** Whether a value is a colour as the file has it: # and six hex digits. */
-export const isColor = (value: unknown): value is string => typeof value === 'string' && HEX.test(value);
-
-/** What is wrong with the content of a file of colours, a line for each ('dark.accent: "rød"'), or []:
- * a mode or one of `names` missing, or a value that is not a colour. */
-export function colorProblems(value: unknown, names: string[]): string[] {
-  const colors = (value ?? {}) as Partial<Record<Mode, unknown>>;
-  return MODES.flatMap((mode) => {
-    const set = (colors[mode] ?? {}) as Record<string, unknown>;
-    return names.filter((name) => !isColor(set[name])).map((name) => `${mode}.${name}: ${JSON.stringify(set[name] ?? null)}`);
-  });
-}
-
-// One mode's colours as CSS declarations. Only names and values that cannot be anything but a colour,
-// since the CSS goes straight into the page.
-function declarations(set: ColorSet): string {
-  return Object.entries(set)
-    .map(([name, value]) => {
-      if (!NAME.test(name) || !isColor(value)) throw new Error(`Not a colour: ${name}: ${JSON.stringify(value)}`);
-      return `--${name}:${value};`;
-    })
-    .join('');
-}
-
-/** The colours as CSS for a <style> in the <head>: light mode on :root; dark mode when the phone or
- * computer is set to it (unless light is picked, data-theme="light" on <html>) and when dark is picked.
- * Throws on anything that is not a colour, so a broken file never reaches a page. */
-export function colorsCss(colors: Colors): string {
-  const dark = declarations(colors.dark);
-  return (
-    `:root{${declarations(colors.light)}}` +
-    `@media (prefers-color-scheme: dark){:root:not([data-theme='light']){${dark}}}` +
-    `:root[data-theme='dark']{${dark}}`
-  );
-}
-
-// A colour's relative luminance (WCAG 2).
-function luminance(hex: string): number {
-  const [r, g, b] = [1, 3, 5].map((i) => {
-    const c = parseInt(hex.slice(i, i + 2), 16) / 255;
-    return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
-  });
-  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
-}
-
-/** The contrast between two colours (WCAG 2), from 1 (the same) to 21 (black on white). Normal text
- * needs at least 4.5 (AA). */
-export function contrast(a: string, b: string): number {
-  const [light, dark] = [luminance(a), luminance(b)].sort((x, y) => y - x);
-  return (light + 0.05) / (dark + 0.05);
-}
-
-/** A pair of colours that must be readable: `text` on `on`, at least `min` (4.5 when left out), and
- * what it is in the site's words ("Teksten på knapperne"). */
-export type ColorPair = { text: string; on: string; what: string; min?: number };
-
-/** The pairs in a mode that are too hard to read, with their contrast. */
-export function lowContrast(set: ColorSet, pairs: ColorPair[]): (ColorPair & { ratio: number; min: number })[] {
-  return pairs.flatMap((pair) => {
-    if (!isColor(set[pair.text]) || !isColor(set[pair.on])) return [];
-    const ratio = contrast(set[pair.text], set[pair.on]);
-    const min = pair.min ?? 4.5;
-    return ratio < min ? [{ ...pair, ratio, min }] : [];
-  });
-}
+// The site's colours as data, in the site's file of colours (config.colors, e.g. src/data/colors.json):
+// one set for light mode and one for dark, each a CSS variable by its name without "--":
+//   { "light": { "bg": "#f6f4f1", "accent": "#a3345a", … }, "dark": { … } }
+// and, when they are made from one source colour (dynamic colour, dynamic-colors.ts), the choice they were
+// made from: "dynamic": { "source": "#a3345a", "harmony": "analogous", "contrast": "standard" } (or a "variant" instead
+// of the "harmony", as one written before the harmonies has). (When each page takes
+// its colours from its picture, content-based colour, that is an app's: packages/editor/site/pageColors.ts.)
+// The site writes them into the <head> of its pages (colorsCss), so its CSS, Tailwind and the blocks
+// take them from there; the editor shows and changes them under "Farver" (Colors.tsx) and checks that
+// text can be read on its background (contrast). No React or browser here: the build uses it too.
+
+import type { Dynamic } from './dynamic-colors';
+
+export type ColorSet = Record<string, string>;
+export type Colors = { light: ColorSet; dark: ColorSet; dynamic?: Dynamic };
+export const MODES = ['light', 'dark'] as const;
+export type Mode = (typeof MODES)[number];
+
+const HEX = /^#[0-9a-f]{6}$/i;
+const NAME = /^[a-z][a-z0-9-]*$/;
+
+/** Whether a value is a colour as the file has it: # and six hex digits. */
+export const isColor = (value: unknown): value is string => typeof value === 'string' && HEX.test(value);
+
+/** What is wrong with the content of a file of colours, a line for each ('dark.accent: "rød"'), or []:
+ * a mode or one of `names` missing, or a value that is not a colour. */
+export function colorProblems(value: unknown, names: string[]): string[] {
+  const colors = (value ?? {}) as Partial<Record<Mode, unknown>>;
+  return MODES.flatMap((mode) => {
+    const set = (colors[mode] ?? {}) as Record<string, unknown>;
+    return names.filter((name) => !isColor(set[name])).map((name) => `${mode}.${name}: ${JSON.stringify(set[name] ?? null)}`);
+  });
+}
+
+// One mode's colours as CSS declarations. Only names and values that cannot be anything but a colour,
+// since the CSS goes straight into the page.
+function declarations(set: ColorSet): string {
+  return Object.entries(set)
+    .map(([name, value]) => {
+      if (!NAME.test(name) || !isColor(value)) throw new Error(`Not a colour: ${name}: ${JSON.stringify(value)}`);
+      return `--${name}:${value};`;
+    })
+    .join('');
+}
+
+/** The colours as CSS for a <style> in the <head>: light mode on :root; dark mode when the phone or
+ * computer is set to it (unless light is picked, data-theme="light" on <html>) and when dark is picked.
+ * Throws on anything that is not a colour, so a broken file never reaches a page. */
+export function colorsCss(colors: Colors): string {
+  const dark = declarations(colors.dark);
+  return (
+    `:root{${declarations(colors.light)}}` +
+    `@media (prefers-color-scheme: dark){:root:not([data-theme='light']){${dark}}}` +
+    `:root[data-theme='dark']{${dark}}`
+  );
+}
+
+// A colour's relative luminance (WCAG 2).
+function luminance(hex: string): number {
+  const [r, g, b] = [1, 3, 5].map((i) => {
+    const c = parseInt(hex.slice(i, i + 2), 16) / 255;
+    return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+  });
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+
+/** The contrast between two colours (WCAG 2), from 1 (the same) to 21 (black on white). Normal text
+ * needs at least 4.5 (AA). */
+export function contrast(a: string, b: string): number {
+  const [light, dark] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+  return (light + 0.05) / (dark + 0.05);
+}
+
+/** A pair of colours that must be readable: `text` on `on`, at least `min` (4.5 when left out), and
+ * what it is in the site's words ("Teksten på knapperne"). */
+export type ColorPair = { text: string; on: string; what: string; min?: number };
+
+/** The pairs in a mode that are too hard to read, with their contrast. */
+export function lowContrast(set: ColorSet, pairs: ColorPair[]): (ColorPair & { ratio: number; min: number })[] {
+  return pairs.flatMap((pair) => {
+    if (!isColor(set[pair.text]) || !isColor(set[pair.on])) return [];
+    const ratio = contrast(set[pair.text], set[pair.on]);
+    const min = pair.min ?? 4.5;
+    return ratio < min ? [{ ...pair, ratio, min }] : [];
+  });
+}

package/lib/contactBar.ts

@@ -1,18 +1,18 @@
-// A promotion saved as a contact bar (the kind "Kontaktlinje", `contactbar`: the buttons "Ring" and "Kontakt" at the
-// bottom of a phone's screen, with the fields `phoneLabel`, `contactLabel` and `contactPage`), which is now an action
-// bar ("Handlingslinje", `bookingbar`) with those two buttons: the first calls, the second goes to its page (without
-// one, the contact page, `contactPath`), each with its own text. The site reads it so (site/popups.ts), and the editor
-// too (`upgrade` on "Promovering" in defaults/collections.ts), which saves it so. Any other promotion is as it is.
-export function fromContactBar(data: Record<string, unknown>, contactPath: string): Record<string, unknown> {
-  if (data.type !== 'contactbar') return data;
-  const { phoneLabel, contactLabel, contactPage, ...rest } = data;
-  const text = (value: unknown) => (typeof value === 'string' ? value.trim() : '');
-  return {
-    ...rest,
-    type: 'bookingbar',
-    buttons: [
-      { label: text(phoneLabel), to: 'phone' },
-      { label: text(contactLabel), to: 'page', href: text(contactPage) || contactPath },
-    ],
-  };
-}
+// A promotion saved as a contact bar (the kind "Kontaktlinje", `contactbar`: the buttons "Ring" and "Kontakt" at the
+// bottom of a phone's screen, with the fields `phoneLabel`, `contactLabel` and `contactPage`), which is now an action
+// bar ("Handlingslinje", `bookingbar`) with those two buttons: the first calls, the second goes to its page (without
+// one, the contact page, `contactPath`), each with its own text. The site reads it so (site/popups.ts), and the editor
+// too (`upgrade` on "Promovering" in defaults/collections.ts), which saves it so. Any other promotion is as it is.
+export function fromContactBar(data: Record<string, unknown>, contactPath: string): Record<string, unknown> {
+  if (data.type !== 'contactbar') return data;
+  const { phoneLabel, contactLabel, contactPage, ...rest } = data;
+  const text = (value: unknown) => (typeof value === 'string' ? value.trim() : '');
+  return {
+    ...rest,
+    type: 'bookingbar',
+    buttons: [
+      { label: text(phoneLabel), to: 'phone' },
+      { label: text(contactLabel), to: 'page', href: text(contactPage) || contactPath },
+    ],
+  };
+}

package/lib/contracts.d.mts

@@ -0,0 +1,15 @@
+/**
+ * Store contract versions: the API levels for apps and themes.
+ * Exposes APP_API and THEME_API.
+ */
+/** The version of the contract between the editor and an app (apps.ts: defineApp, its folder, and the theme's parts it
+ * draws with: the standard blocks' and the UI components, @theme/blocks/… and @theme/ui/…, imported from
+ * @morphemecms/cms): an app in the store says which it is written to, and only those the editor can run are
+ * offered. Raised when an app written to the one before no longer works. */
+export const APP_API: 2;
+/** The version of the contract between the editor and a theme (what a theme must and may have, "Hvad et tema må" in
+ * CLAUDE.md, themeProblems in packages/editor/site/theme.mjs, the standard theme's UI parts with Material 3's names and
+ * variants, the motion scheme's --motion-* springs and motionSpring/motionTiming (@morphemecms/cms/lib/motion),
+ * and the classes it styles): only themes written to it are offered. Raised when a theme written to the one before no
+ * longer works. */
+export const THEME_API: 3;

package/lib/contracts.mjs

@@ -0,0 +1,17 @@
+/**
+ * Store contract versions: the API levels for apps and themes.
+ * Exposes APP_API and THEME_API.
+ */
+
+/** The version of the contract between the editor and an app (apps.ts: defineApp, its folder, and the theme's parts it
+ * draws with: the standard blocks' and the UI components, @theme/blocks/… and @theme/ui/…, imported from
+ * @morphemecms/cms): an app in the store says which it is written to, and only those the editor can run are
+ * offered. Raised when an app written to the one before no longer works. */
+export const APP_API = 2;
+
+/** The version of the contract between the editor and a theme (what a theme must and may have, "Hvad et tema må" in
+ * CLAUDE.md, themeProblems in packages/editor/site/theme.mjs, the standard theme's UI parts with Material 3's names and
+ * variants, the motion scheme's --motion-* springs and motionSpring/motionTiming (@morphemecms/cms/lib/motion),
+ * and the classes it styles): only themes written to it are offered. Raised when a theme written to the one before no
+ * longer works. */
+export const THEME_API = 3;

package/lib/cookieCategories.mjs

@@ -1,28 +1,28 @@
-// The categories of cookies (and of what else a site stores in a visitor's browser), as a site declares them: each
-// cookie in the cookie list and in an app's cookies.json has one (`category`). Necessary ones are set without asking;
-// the visitor says yes or no to each of the others in the cookie banner, one at a time, so a yes to statistics is not
-// a yes to marketing. An app that loads something that sets cookies starts after a yes to its categories (`cookies` in
-// its index.ts, afterConsent in the site's tracking script). Marketing is measuring whether the ads work; targeted ads
-// (`targeting`: using the visit to show the visitor ads, remarketing) are a yes of their own, asked about only when an
-// app is set to use them. No dependencies, so the site's scripts, its Worker and its checks can use it.
-
-/** @typedef {'necessary' | 'preferences' | 'statistics' | 'marketing' | 'targeting'} CookieCategory
- * @typedef {Exclude<CookieCategory, 'necessary'>} ConsentCategory One the visitor says yes or no to. */
-
-/** The categories, in the order the cookie banner and the cookie list show them. @type {readonly CookieCategory[]} */
-export const COOKIE_CATEGORIES = ['necessary', 'preferences', 'statistics', 'marketing', 'targeting'];
-
-/** Those the visitor says yes or no to in the cookie banner. @type {readonly ConsentCategory[]} */
-export const CONSENT_CATEGORIES = ['preferences', 'statistics', 'marketing', 'targeting'];
-
-/** Whether a value is a category. @param {unknown} value @returns {value is CookieCategory} */
-export const isCookieCategory = (value) => COOKIE_CATEGORIES.includes(/** @type {CookieCategory} */ (value));
-
-/** Whether a value is a category the visitor says yes or no to. @param {unknown} value @returns {value is ConsentCategory} */
-export const isConsentCategory = (value) => CONSENT_CATEGORIES.includes(/** @type {ConsentCategory} */ (value));
-
-/** A cookie's category as its file has it (one in the cookie list, or in an app's cookies.json); one from before the
- * categories has `when` instead ('always': set also without a yes, so necessary), and one without either (npm run
- * check:content says so) counts as marketing, the one a visitor says yes to last.
- * @param {{ category?: unknown, when?: unknown }} cookie @returns {CookieCategory} */
-export const categoryOf = ({ category, when }) => (isCookieCategory(category) ? category : when === 'always' ? 'necessary' : 'marketing');
+// The categories of cookies (and of what else a site stores in a visitor's browser), as a site declares them: each
+// cookie in the cookie list and in an app's cookies.json has one (`category`). Necessary ones are set without asking;
+// the visitor says yes or no to each of the others in the cookie banner, one at a time, so a yes to statistics is not
+// a yes to marketing. An app that loads something that sets cookies starts after a yes to its categories (`cookies` in
+// its index.ts, afterConsent in the site's tracking script). Marketing is measuring whether the ads work; targeted ads
+// (`targeting`: using the visit to show the visitor ads, remarketing) are a yes of their own, asked about only when an
+// app is set to use them. No dependencies, so the site's scripts, its Worker and its checks can use it.
+
+/** @typedef {'necessary' | 'preferences' | 'statistics' | 'marketing' | 'targeting'} CookieCategory
+ * @typedef {Exclude<CookieCategory, 'necessary'>} ConsentCategory One the visitor says yes or no to. */
+
+/** The categories, in the order the cookie banner and the cookie list show them. @type {readonly CookieCategory[]} */
+export const COOKIE_CATEGORIES = ['necessary', 'preferences', 'statistics', 'marketing', 'targeting'];
+
+/** Those the visitor says yes or no to in the cookie banner. @type {readonly ConsentCategory[]} */
+export const CONSENT_CATEGORIES = ['preferences', 'statistics', 'marketing', 'targeting'];
+
+/** Whether a value is a category. @param {unknown} value @returns {value is CookieCategory} */
+export const isCookieCategory = (value) => COOKIE_CATEGORIES.includes(/** @type {CookieCategory} */ (value));
+
+/** Whether a value is a category the visitor says yes or no to. @param {unknown} value @returns {value is ConsentCategory} */
+export const isConsentCategory = (value) => CONSENT_CATEGORIES.includes(/** @type {ConsentCategory} */ (value));
+
+/** A cookie's category as its file has it (one in the cookie list, or in an app's cookies.json); one from before the
+ * categories has `when` instead ('always': set also without a yes, so necessary), and one without either (npm run
+ * check:content says so) counts as marketing, the one a visitor says yes to last.
+ * @param {{ category?: unknown, when?: unknown }} cookie @returns {CookieCategory} */
+export const categoryOf = ({ category, when }) => (isCookieCategory(category) ? category : when === 'always' ? 'necessary' : 'marketing');