@morphemecms/cms 0.0.0-stage → 0.1.0

package/lib/contactBar.ts

@@ -0,0 +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 },
+    ],
+  };
+}

package/lib/cookieCategories.d.mts

@@ -0,0 +1,17 @@
+/** @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: readonly CookieCategory[];
+/** Those the visitor says yes or no to in the cookie banner. @type {readonly ConsentCategory[]} */
+export const CONSENT_CATEGORIES: readonly ConsentCategory[];
+export function isCookieCategory(value: unknown): value is CookieCategory;
+export function isConsentCategory(value: unknown): value is ConsentCategory;
+export function categoryOf({ category, when }: {
+    category?: unknown;
+    when?: unknown;
+}): CookieCategory;
+export type CookieCategory = "necessary" | "preferences" | "statistics" | "marketing" | "targeting";
+/**
+ * One the visitor says yes or no to.
+ */
+export type ConsentCategory = Exclude<CookieCategory, "necessary">;

package/lib/cookieCategories.mjs

@@ -0,0 +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');

package/lib/crop.d.mts

@@ -0,0 +1,34 @@
+/** Width divided by height of a format ('2:3'), or 0 when it is none. */
+export function ratioOf(format: any): number;
+/** Whether a picture's address is marked decorative, and the address without the mark (else as it is). */
+export function decorativeOf(address: any): {
+    address: string;
+    decorative: boolean;
+};
+/** The address marked decorative, or without the mark. */
+export function decorated(address: any, decorative: any): string;
+/** The picture's own address, its format and crop ([left, top, width, height]) when it has them (an
+ * address without a format is left as it is), and whether it is decorative. */
+export function splitPicture(address: any): {
+    src: string;
+    format: string | null;
+    crop: number[] | null;
+    decorative: boolean;
+};
+/** The address with the format and crop after it (only the address without a format), marked decorative when it is. */
+export function joinPicture(src: any, format: any, crop: any, decorative?: boolean): string;
+/** The largest part of a picture (aspect: its width divided by its height) in a format, in the middle. */
+export function middleCrop(aspect: any, format: any): number[] | null;
+/** The styles of a cut picture: its box (in the format) and the picture in it, as CSS text; how much
+ * wider than the box the picture is (for its sizes). Without a crop the picture is its own box. */
+export function cropStyle(format: any, crop: any): {
+    box: null;
+    img: string;
+    scale: number;
+} | {
+    box: string;
+    img: string;
+    scale: number;
+};
+/** The formats a picture can be cut to, as width:height. */
+export const FORMATS: string[];

package/lib/crop.mjs

@@ -0,0 +1,83 @@
+// A picture in the text cut to a format (its sides, as 2:3) in the editor (Crop.tsx), written after
+// its address in the Markdown, so the file and the picture stay as they are:
+//   ![Kontoret](/images/uploads/2024/05/kontor.webp#format=2:3&crop=12.5,0,75,100)
+// crop: the part of the picture that is shown, in percent of its width and height: from the left,
+// from the top, its width and its height. Shown so on the site (rehypeResponsiveImages, images.mjs)
+// and on its card in the editor (MarkdownEditor.tsx). Without crop the middle of it is shown.
+// A decorative picture ("Dekorativt billede": screen readers skip it) is marked there too, alone or after
+// the format and crop, and drawn with alt="" on the site:
+//   ![](/images/uploads/2024/05/blomst.webp#decorative)
+// The mark is part of the address, so Milkdown keeps it as it is, and a visitor never sees it.
+
+/** The formats a picture can be cut to, as width:height. */
+export const FORMATS = ['1:1', '4:5', '3:4', '2:3', '3:2', '4:3', '16:9'];
+
+const FORMAT = /^(\d+(?:\.\d+)?):(\d+(?:\.\d+)?)$/;
+
+/** Width divided by height of a format ('2:3'), or 0 when it is none. */
+export function ratioOf(format) {
+  const m = String(format ?? '').match(FORMAT);
+  return m && +m[1] > 0 && +m[2] > 0 ? +m[1] / +m[2] : 0;
+}
+
+const DECORATIVE = 'decorative';
+
+/** Whether a picture's address is marked decorative, and the address without the mark (else as it is). */
+export function decorativeOf(address) {
+  const text = String(address);
+  const at = text.indexOf('#');
+  const params = at < 0 ? [] : text.slice(at + 1).split('&');
+  const rest = params.filter((p) => p !== DECORATIVE);
+  if (rest.length === params.length) return { address: text, decorative: false };
+  return { address: text.slice(0, at) + (rest.length ? `#${rest.join('&')}` : ''), decorative: true };
+}
+
+/** The address marked decorative, or without the mark. */
+export function decorated(address, decorative) {
+  const plain = decorativeOf(address).address;
+  return decorative ? `${plain}${plain.includes('#') ? '&' : '#'}${DECORATIVE}` : plain;
+}
+
+/** The picture's own address, its format and crop ([left, top, width, height]) when it has them (an
+ * address without a format is left as it is), and whether it is decorative. */
+export function splitPicture(address) {
+  const { address: own, decorative } = decorativeOf(address);
+  const [src, fragment = ''] = own.split('#');
+  const params = new URLSearchParams(fragment);
+  const format = params.get('format');
+  if (!ratioOf(format)) return { src: own, format: '', crop: null, decorative };
+  const crop = (params.get('crop') ?? '').split(',').map(Number);
+  const fits = crop.length === 4 && crop.every((n) => Number.isFinite(n) && n >= 0 && n <= 100) && crop[2] > 0 && crop[3] > 0;
+  return { src, format, crop: fits ? crop : null, decorative };
+}
+
+const round = (n) => Math.round(n * 10) / 10;
+
+/** The address with the format and crop after it (only the address without a format), marked decorative when it is. */
+export function joinPicture(src, format, crop, decorative = false) {
+  if (!ratioOf(format)) return decorated(src, decorative);
+  return decorated(`${src}#format=${format}${crop ? `&crop=${crop.map(round).join(',')}` : ''}`, decorative);
+}
+
+/** The largest part of a picture (aspect: its width divided by its height) in a format, in the middle. */
+export function middleCrop(aspect, format) {
+  const ratio = ratioOf(format);
+  if (!ratio || !aspect) return null;
+  const [w, h] = aspect > ratio ? [(ratio / aspect) * 100, 100] : [100, (aspect / ratio) * 100];
+  return [(100 - w) / 2, (100 - h) / 2, w, h];
+}
+
+/** The styles of a cut picture: its box (in the format) and the picture in it, as CSS text; how much
+ * wider than the box the picture is (for its sizes). Without a crop the picture is its own box. */
+export function cropStyle(format, crop) {
+  const [a, b] = format.split(':');
+  const aspect = `aspect-ratio: ${a} / ${b}`;
+  if (!crop) return { box: null, img: `${aspect}; object-fit: cover`, scale: 1 };
+  const [x, y, w] = crop;
+  return {
+    box: aspect,
+    // The picture's width in percent of the box's, moved by percent of its own size.
+    img: `width: ${Math.round((100 / w) * 100 * 100) / 100}%; transform: translate(${-round(x)}%, ${-round(y)}%)`,
+    scale: 100 / w,
+  };
+}

package/lib/csp.d.mts

@@ -0,0 +1,22 @@
+/** The hash of each inline script that runs in a page, as CSP writes it. @param {string} html */
+export function scriptHashes(html: string): any[];
+/** The other addresses (origins) a page's HTML loads its scripts, frames and pictures from.
+ * @param {string} html @returns {Required<Pick<Sources, 'script' | 'frame' | 'img'>>} */
+export function pageOrigins(html: string): Required<Pick<Sources, "script" | "frame" | "img">>;
+/** A page's policy: on the site, or the editor's (`editor`). @param {string} html
+ * @param {{ editor?: boolean, site?: Sources, images?: string[] }} options */
+export function pagePolicy(html: string, { editor, site, images }: {
+    editor?: boolean;
+    site?: Sources;
+    images?: string[];
+}): string;
+/** The policy as the first thing in a page's <head> (after its charset, which must stay in its first bytes).
+ * @param {string} html @param {string} value */
+export function withPolicy(html: string, value: string): string | undefined;
+/** The Astro integration that writes the policy into every page built (packages/editor/astro.mjs).
+ * @param {{ site?: Sources }} [options] @returns {import('astro').AstroIntegration} */
+export function csp({ site }?: {
+    site?: Sources;
+}): import("astro").AstroIntegration;
+export type Sources = import("./cspSources.mjs").Sources;
+export { allows, isSource, joined, KINDS, kindOf, sourcesProblems } from "./cspSources.mjs";

package/lib/csp.mjs

@@ -0,0 +1,130 @@
+// The Content Security Policy of every page the site builds, as a <meta http-equiv> at the top of its <head>: the
+// browser runs only the scripts the build put in the page (each inline one by its hash) and those from the site's own
+// address, and loads from elsewhere only what is allowed below. So HTML that gets into a page after the build (in the
+// editor's preview, by a fault in a script) can run nothing. What the build wrote is trusted: the addresses of the
+// scripts, frames and pictures in a page (HTML written in a page's text, an embed) are allowed on that page.
+// Allowed everywhere besides: the videos (video.mjs plays them from YouTube's and Vimeo's players), what the site gives
+// (`site`: its measuring, packages/editor/site/siteCsp.mjs) and what each app installed gives (`src/apps/<app>/csp.json`, in
+// packages/editor/site/siteCsp.mjs too), with the addresses allowed in the editor (the site's own, config.csp). The editor's page (/editor/) has its own, stricter policy: GitHub, the stills of the videos,
+// and nothing of the site's or the apps'. Styles may be inline (the pages have style="…" and React sets them).
+// A meta tag cannot say who may frame a page; X-Frame-Options in packages/editor/pages/_headers.txt does.
+import { createHash } from 'node:crypto';
+import { readdirSync, readFileSync, writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { joined } from './cspSources.mjs';
+
+// What a site or an app may add to the policy, and the checks of it, without Node, so the site's Worker can use them too.
+export { allows, isSource, joined, KINDS, kindOf, sourcesProblems } from './cspSources.mjs';
+
+/** @typedef {import('./cspSources.mjs').Sources} Sources */
+
+/** What the videos need on the site: their players, put in place when a video is played (video.mjs). */
+const VIDEOS = { frame: ['https://www.youtube-nocookie.com', 'https://player.vimeo.com'] };
+
+/** What the editor needs (GitHub it asks through the site's Worker, on its own address: github.ts): Vimeo's details of a video and the stills of the videos
+ * (standard/video/view.ts), and what it makes in the browser (pictures, files) as blob: and data:. */
+const EDITOR = {
+  img: ['blob:', 'https://i.ytimg.com', 'https://i.vimeocdn.com'],
+  connect: ['blob:', 'data:', 'https://vimeo.com'],
+};
+
+// An inline script that runs (not JSON, JSON-LD or a template).
+const RUNS = /^(module|text\/javascript|application\/javascript)?$/i;
+const SCRIPT = /<script\b([^>]*)>([\s\S]*?)<\/script>/gi;
+const attr = (attrs, name) => new RegExp(`\\s${name}\\s*=\\s*"([^"]*)"`, 'i').exec(attrs)?.[1];
+
+/** The hash of each inline script that runs in a page, as CSP writes it. @param {string} html */
+export function scriptHashes(html) {
+  const hashes = new Set();
+  for (const [, attrs, code] of html.matchAll(SCRIPT))
+    if (attr(attrs, 'src') === undefined && RUNS.test(attr(attrs, 'type') ?? ''))
+      hashes.add(`'sha256-${createHash('sha256').update(code, 'utf8').digest('base64')}'`);
+  return [...hashes];
+}
+
+/** The other addresses (origins) a page's HTML loads its scripts, frames and pictures from.
+ * @param {string} html @returns {Required<Pick<Sources, 'script' | 'frame' | 'img'>>} */
+export function pageOrigins(html) {
+  const found = { script: new Set(), frame: new Set(), img: new Set() };
+  const add = (set, url) => {
+    try {
+      const { protocol, origin } = new URL(url.replace(/&amp;/g, '&'));
+      if (protocol === 'https:' || protocol === 'http:') set.add(origin);
+    } catch {}
+  };
+  for (const [, attrs] of html.matchAll(/<script\b([^>]*)>/gi)) add(found.script, attr(attrs, 'src') ?? '');
+  for (const [, attrs] of html.matchAll(/<iframe\b([^>]*)>/gi)) add(found.frame, attr(attrs, 'src') ?? attr(attrs, 'data-src') ?? '');
+  for (const [, attrs] of html.matchAll(/<(?:img|source)\b([^>]*)>/gi)) {
+    add(found.img, attr(attrs, 'src') ?? '');
+    for (const part of (attr(attrs, 'srcset') ?? '').split(',')) add(found.img, part.trim().split(/\s+/)[0]);
+  }
+  return { script: [...found.script], frame: [...found.frame], img: [...found.img] };
+}
+
+/** The policy, from its directives (an empty one is left out, `none` when it must say so).
+ * @param {Record<string, (string | undefined)[]>} directives */
+function policy(directives) {
+  return Object.entries(directives)
+    .map(([name, values]) => [name, [...new Set(values.filter(Boolean))]])
+    .map(([name, values]) => `${name} ${values.length ? values.join(' ') : "'none'"}`)
+    .join('; ');
+}
+
+/** A page's policy: on the site, or the editor's (`editor`). @param {string} html
+ * @param {{ editor?: boolean, site?: Sources, images?: string[] }} options */
+export function pagePolicy(html, { editor = false, site = {}, images = [] }) {
+  const page = pageOrigins(html);
+  const s = editor ? joined(EDITOR, { img: images }) : joined(VIDEOS, site, page);
+  return policy({
+    'default-src': ["'self'"],
+    'script-src': ["'self'", ...scriptHashes(html), ...s.script],
+    'style-src': ["'self'", "'unsafe-inline'", ...s.style],
+    'img-src': ["'self'", 'data:', ...s.img],
+    'font-src': ["'self'", 'data:'],
+    'connect-src': ["'self'", ...s.connect],
+    'media-src': ["'self'", ...(editor ? ['blob:', 'data:'] : [])],
+    // The editor shows a page in a frame of its own (srcdoc, PageFrame in ui.tsx).
+    'frame-src': editor ? ["'self'", 'blob:', 'data:'] : s.frame,
+    'worker-src': ["'self'"],
+    'form-action': ["'self'", ...s.form],
+    'object-src': [],
+    'base-uri': ["'self'"],
+  });
+}
+
+/** The policy as the first thing in a page's <head> (after its charset, which must stay in its first bytes).
+ * @param {string} html @param {string} value */
+export function withPolicy(html, value) {
+  const meta = `<meta http-equiv="Content-Security-Policy" content="${value.replace(/&/g, '&amp;').replace(/"/g, '&quot;')}">`;
+  const at = /<meta\s+charset\s*=\s*"?[\w-]+"?\s*\/?>/i.exec(html) ?? /<head\b[^>]*>/i.exec(html);
+  if (!at) return undefined;
+  const end = at.index + at[0].length;
+  return html.slice(0, end) + meta + html.slice(end);
+}
+
+/** The Astro integration that writes the policy into every page built (packages/editor/astro.mjs).
+ * @param {{ site?: Sources }} [options] @returns {import('astro').AstroIntegration} */
+export function csp({ site = {} } = {}) {
+  return {
+    name: 'content-security-policy',
+    hooks: {
+      'astro:build:done': ({ dir, logger }) => {
+        const root = fileURLToPath(dir);
+        const files = readdirSync(root, { recursive: true, encoding: 'utf8' }).filter((f) => f.endsWith('.html'));
+        const pages = files.map((file) => ({ file, html: readFileSync(join(root, file), 'utf8') }));
+        // The editor shows the site's pages in its preview, with their pictures.
+        const images = [...new Set(pages.flatMap((p) => pageOrigins(p.html).img))];
+        const missing = [];
+        for (const { file, html } of pages) {
+          const editor = file.split(/[\\/]/)[0] === 'editor';
+          const out = withPolicy(html, pagePolicy(html, { editor, site, images }));
+          if (out) writeFileSync(join(root, file), out);
+          else missing.push(file);
+        }
+        if (missing.length) throw new Error(`Content-Security-Policy: ingen <head> i ${missing.join(', ')}`);
+        logger.info(`${pages.length} sider har en Content-Security-Policy.`);
+      },
+    },
+  };
+}

package/lib/cspSources.d.mts

@@ -0,0 +1,24 @@
+/** The kind of sources a directive of the policy takes, as a browser names it when it stops something
+ * (securitypolicyviolation's violatedDirective: img-src, script-src-elem …); undefined for one a site or an app cannot
+ * add to (font-src, media-src …). @param {string} directive */
+export function kindOf(directive: string): string | undefined;
+/** What is wrong with sources written in a file (an app's csp.json), each as a sentence; none when they are right.
+ * @param {unknown} sources @param {string} file */
+export function sourcesProblems(sources: unknown, file: string): string[];
+/** Whether the sources allow an address (its origin, or one under a `*.` domain), as any kind or as `kind`.
+ * @param {Sources} sources @param {string} url @param {string} [kind] */
+export function allows(sources: Sources, url: string, kind?: string): any;
+/** The sources together. @param {Sources[]} all @returns {Required<Sources>} */
+export function joined(...all: Sources[]): Required<Sources>;
+/** @typedef {{ script?: string[], style?: string[], img?: string[], connect?: string[], frame?: string[], form?: string[] }} Sources */
+/** The kinds of sources a site or an app can add (a Sources' keys, csp.json's). */
+export const KINDS: string[];
+export function isSource(source: unknown): boolean;
+export type Sources = {
+    script?: string[];
+    style?: string[];
+    img?: string[];
+    connect?: string[];
+    frame?: string[];
+    form?: string[];
+};

package/lib/cspSources.mjs

@@ -0,0 +1,60 @@
+// What a site or an app may add to the pages' Content Security Policy (csp.mjs), by kind (an app's csp.json, the
+// site's own addresses), and the checks of it. No dependencies, so the site's Worker can use it too (the app
+// "Cookiescanner" allows an address the policy stopped).
+
+/** @typedef {{ script?: string[], style?: string[], img?: string[], connect?: string[], frame?: string[], form?: string[] }} Sources */
+
+/** The kinds of sources a site or an app can add (a Sources' keys, csp.json's). */
+export const KINDS = ['script', 'style', 'img', 'connect', 'frame', 'form'];
+
+// A source as a site or an app gives it: an address (origin) on https, with `*.` for all under a domain. Nothing that
+// lets everything through (`*`, `https:`, 'unsafe-inline', 'unsafe-eval').
+const SOURCE = /^https:\/\/(\*\.)?[a-z0-9-]+(\.[a-z0-9-]+)+(:\d+)?$/;
+
+/** Whether a source is one a site or an app may give (see SOURCE). @param {unknown} source */
+export const isSource = (source) => typeof source === 'string' && SOURCE.test(source);
+
+/** The kind of sources a directive of the policy takes, as a browser names it when it stops something
+ * (securitypolicyviolation's violatedDirective: img-src, script-src-elem …); undefined for one a site or an app cannot
+ * add to (font-src, media-src …). @param {string} directive */
+export function kindOf(directive) {
+  if (directive === 'form-action') return 'form';
+  if (directive === 'child-src') return 'frame';
+  const kind = /^(script|style|img|connect|frame)-src(-elem|-attr)?$/.exec(directive)?.[1];
+  return kind;
+}
+
+/** What is wrong with sources written in a file (an app's csp.json), each as a sentence; none when they are right.
+ * @param {unknown} sources @param {string} file */
+export function sourcesProblems(sources, file) {
+  if (!sources || typeof sources !== 'object' || Array.isArray(sources)) return [`${file}: skal være et objekt med ${KINDS.join(', ')}.`];
+  return Object.entries(sources).flatMap(([kind, values]) =>
+    !KINDS.includes(kind)
+      ? [`${file}: "${kind}" er ikke en af ${KINDS.join(', ')}.`]
+      : !Array.isArray(values)
+        ? [`${file}: "${kind}" skal være en liste af adresser.`]
+        : values
+            .filter((v) => !isSource(v))
+            .map(
+              (v) =>
+                `${file}: ${JSON.stringify(v)} under "${kind}" er ikke en adresse som https://eksempel.dk eller https://*.eksempel.dk.`,
+            ),
+  );
+}
+
+/** Whether the sources allow an address (its origin, or one under a `*.` domain), as any kind or as `kind`.
+ * @param {Sources} sources @param {string} url @param {string} [kind] */
+export function allows(sources, url, kind) {
+  const { origin, host } = new URL(url);
+  return (kind ? (sources[kind] ?? []) : Object.values(sources).flat()).some(
+    (s) => s === origin || (s.startsWith('https://*.') && host.endsWith(s.slice('https://*'.length))),
+  );
+}
+
+/** The sources together. @param {Sources[]} all @returns {Required<Sources>} */
+export function joined(...all) {
+  /** @type {Required<Sources>} */
+  const sum = Object.fromEntries(KINDS.map((kind) => [kind, []]));
+  for (const sources of all) for (const kind of KINDS) sum[kind].push(...(sources[kind] ?? []));
+  return sum;
+}