@morphemecms/cms 0.0.0-stage → 0.1.0

package/src/BrandForm.tsx

@@ -0,0 +1,164 @@
+// "Udseende" › "Logo og ikon" (#udseende/logo): a new logo (the mark by the site's name) and a new icon (the browser
+// tab, Google and the editor's app icon), made from a picture the owner picks (brand.ts), in the site's colours
+// ("Farver"). Both are saved together in one commit with "Gem ændringer".
+import { useEffect, useState } from 'react';
+import { ConflictError, type RepoFile } from './github';
+import FormFrame from './FormFrame';
+import { Button } from './ui';
+import { pickImage } from './images';
+import { BRAND_FILES, FAVICON, iconFiles, LOGO, logoFile, openPicture, solid, type Picture } from './brand';
+import type { Env } from './App';
+import { colorsOf } from './Colors';
+import { savedText } from './deploy';
+import { siteName } from '@site/editor';
+import { locale, siteT, t } from './i18n';
+
+const svgUrl = (text: string) => URL.createObjectURL(new Blob([text], { type: 'image/svg+xml' }));
+
+export default function BrandForm({ env }: { env: Env }) {
+  const notify = env.notify;
+  const [loaded, setLoaded] = useState<Record<string, RepoFile> | null>(null);
+  // The files to save, by path, and what the previews show.
+  const [changes, setChanges] = useState<Record<string, string | Uint8Array>>({});
+  const [logo, setLogo] = useState<{ url: string; picture: Picture | null }>({ url: '/logo.svg', picture: null });
+  const [icon, setIcon] = useState('/editor/icon-192.png');
+  const [saving, setSaving] = useState(false);
+  // Drawing the icons takes a moment.
+  const [drawing, setDrawing] = useState(false);
+  const dirty = Object.keys(changes).length > 0;
+
+  useEffect(() => {
+    env
+      .load(BRAND_FILES)
+      .then((files) => setLoaded(Object.fromEntries(files.map((f) => [f.path, f]))))
+      .catch((e) => notify({ text: t.company.brand.notLoaded((e as Error).message), error: true }));
+  }, []);
+
+  // Asks for a picture and opens it; null if none was picked or it cannot be used.
+  async function pick(): Promise<Picture | null> {
+    const file = await pickImage();
+    if (!file) return null;
+    try {
+      const picture = await openPicture(file);
+      notify(null);
+      return picture;
+    } catch (e) {
+      notify({ text: (e as Error).message, error: true });
+      return null;
+    }
+  }
+
+  async function newLogo() {
+    const picture = await pick();
+    if (!picture) return;
+    if (solid(picture)) return notify({ text: t.company.brand.solid, error: true });
+    const text = logoFile(picture);
+    setLogo({ url: svgUrl(text), picture });
+    setChanges((c) => ({ ...c, [LOGO]: text }));
+  }
+
+  async function newIcon(picture: Picture | null, fromLogo: boolean) {
+    if (!picture) return;
+    setDrawing(true);
+    try {
+      const { bg, accent } = colorsOf(env.files).light;
+      const { files, preview } = await iconFiles(picture, fromLogo, { bg, accent });
+      setIcon(preview);
+      setChanges((c) => ({ ...c, ...files }));
+    } catch (e) {
+      notify({ text: (e as Error).message, error: true });
+    } finally {
+      setDrawing(false);
+    }
+  }
+
+  // The icon from the logo: the new one if one was picked, else the one on the site.
+  async function iconFromLogo() {
+    const picture =
+      logo.picture ??
+      (await openPicture(new Blob([loaded![LOGO].text], { type: 'image/svg+xml' })).catch((e) => {
+        notify({ text: (e as Error).message, error: true });
+        return null;
+      }));
+    await newIcon(picture, true);
+  }
+
+  async function save() {
+    // Without the files on the site (still loading, or it failed), their ids are unknown, and the save
+    // would be refused as a new file where one exists.
+    if (!loaded) return notify({ text: t.company.brand.notLoadedYet, error: true });
+    const paths = Object.keys(changes);
+    const message = siteT.company.commit.brand(LOGO in changes, FAVICON in changes);
+    const files = paths.map((path) => ({ path, content: changes[path], oid: loaded[path]?.oid ?? null }));
+    const change = t.app.changes.edited(
+      new Intl.ListFormat(locale, { type: 'conjunction' }).format([
+        ...(LOGO in changes ? [t.app.changes.logo] : []),
+        ...(FAVICON in changes ? [t.app.changes.icon] : []),
+      ]),
+    );
+    setSaving(true);
+    notify({ text: t.common.saving });
+    try {
+      const oids = await env.commit(message, files, change);
+      setLoaded((all) => ({
+        ...all,
+        ...Object.fromEntries(
+          paths.map((path) => [path, { path, oid: oids[path], text: typeof changes[path] === 'string' ? changes[path] : '' }]),
+        ),
+      }));
+      setChanges({});
+      notify({ text: savedText(change), kind: 'saved' });
+      return true;
+    } catch (e) {
+      notify({ text: e instanceof ConflictError ? e.message : t.common.notSaved((e as Error).message), error: true, kind: 'failed' });
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  const mask = { maskImage: `url(${logo.url})`, WebkitMaskImage: `url(${logo.url})` };
+  return (
+    <FormFrame
+      title={t.common.parts.brand}
+      back={{ href: '#udseende', label: t.common.parts.appearance }}
+      dirty={dirty}
+      saving={saving || drawing}
+      onSave={save}
+    >
+      <section>
+        <h2 className="mb-1 font-medium">{t.company.brand.logo}</h2>
+        <p className="mb-3 text-sm text-muted">{t.company.brand.logoHint}</p>
+        <div className="flex flex-wrap items-center gap-4">
+          <div data-logo-preview className="flex items-center gap-2.5 rounded-2xl border border-line bg-surface px-4 py-3">
+            <span
+              aria-hidden="true"
+              className="h-10 w-9 shrink-0 bg-accent [mask-size:contain] [mask-position:center] [mask-repeat:no-repeat]"
+              style={mask}
+            />
+            <span className="font-medium tracking-tight">{siteName}</span>
+          </div>
+          <Button kind="outlined" size="small" disabled={saving} onClick={newLogo}>
+            {t.company.brand.newLogo}
+          </Button>
+        </div>
+      </section>
+      <section>
+        <h2 className="mb-1 font-medium">{t.company.brand.icon}</h2>
+        <div className="flex flex-wrap items-center gap-4">
+          <img
+            data-icon-preview
+            src={icon}
+            alt=""
+            className={`size-16 shrink-0 rounded-2xl shadow-soft ${drawing ? 'animate-pulse opacity-50' : ''}`}
+          />
+          <Button kind="outlined" size="small" disabled={saving || drawing} onClick={async () => newIcon(await pick(), false)}>
+            {t.company.brand.newIcon}
+          </Button>
+          <Button kind="outlined" size="small" disabled={saving || drawing || !loaded} onClick={iconFromLogo}>
+            {t.company.brand.iconFromLogo}
+          </Button>
+        </div>
+      </section>
+    </FormFrame>
+  );
+}

package/src/Colors.tsx

@@ -0,0 +1,476 @@
+// "Udseende" › "Farver" (#udseende/farver): the site's colours, for light and dark mode, in the site's file of
+// colours (config.colors, packages/editor/lib/colors.ts). The first tab, "Generator", where the screen starts, or one
+// mode at a time, picked with the tabs after it, and the editor is shown in the mode while the screen is open
+// (theme.ts holdTheme). Each mode has a little page drawn in its colours, the pairs that are too hard to
+// read (colorPairs in @site/colors, WCAG AA) and a field for each colour (colorFields). Colours
+// that are hard to read together cannot be saved; "Gem" then shows the mode they are in. "Brug
+// standardfarverne" puts back the ones the site was designed with (defaultColors). The generator is dynamic colour for
+// both modes at once, with its three base colours at the top (ColorTiles) and the little page in each mode under the
+// fields: it
+// makes all of them, in both modes, from one source colour, Material 3's way (dynamic colour,
+// lib/dynamic-colors.ts, each colour by its role, colorRoles): the source colour picked or taken from a
+// picture, or dragged on a colour wheel (ColorWheel), a colour harmony (HARMONIES: where the secondary and tertiary
+// colours are on the wheel from it) and a contrast level, kept in the file with the colours. Choosing one of them makes
+// the colours from them; changing a colour by hand turns it off. Material's other source of dynamic colour, each page's own picture, is an app ("Indholdsbaserede
+// farver", src/apps/content-colors/: pageColors in packages/editor/site/pageColors.ts). While an app installed changes the pages'
+// colours (hooks/page-colors.ts), each mode shows the pages' colours instead (PageColors), as the site was last built
+// (/editor/page-colors.json, packages/editor/scripts/page-colors.mjs): first a notice that the apps give them, with a button to the
+// site's own, which are only the fallback ("Reservefarver", #udseende/farver/reservefarver, a page of the same form, so
+// what is unsaved stays), then the apps, each to its settings, the pages with colours from a picture (the picture, the
+// page and its colours in the mode open), and those with the site's own. Saved with "Gem ændringer" in one commit; the
+// editor shows the new colours at once (theme.ts applyColors), the site when it is built again.
+import { useEffect, useMemo, useState } from 'react';
+import { Image, Moon, Palette, Sun } from '@phosphor-icons/react';
+import { ConflictError, type RepoFile } from './github';
+import FormFrame, { useFormPages } from './FormFrame';
+import {
+  Button,
+  ChipSet,
+  ColorField,
+  ColorSwatches,
+  ColorTiles,
+  ColorWheel,
+  ColorsPreview,
+  EmptyNote,
+  FilterChip,
+  FormColumns,
+  FormField,
+  Group,
+  Label,
+  LeadingImage,
+  LinkButton,
+  Notice,
+  SupportingText,
+  SegmentedButton,
+  ProblemNote,
+  ListItem,
+} from './ui';
+import type { Env } from './App';
+import { savedText } from './deploy';
+import { colorProblems, lowContrast, MODES, type Colors as ColorsData, type Mode } from '../lib/colors';
+import {
+  completeColors,
+  CONTRASTS,
+  dynamicColors,
+  dynamicProblems,
+  BASE_COLORS,
+  HARMONIES,
+  canSetBaseColor,
+  withBaseColor,
+  wheelColor,
+  wheelColors,
+  wheelDots,
+  type Contrast,
+  type Dynamic,
+} from '../lib/dynamic-colors';
+import { colorRoles, config, defaultColors } from '@site/editor';
+import { colorsInPicture, pickImage, shownAt } from './images';
+import { holdTheme, shownMode } from './theme';
+import { locale, siteT, t } from './i18n';
+import { colorFields, colorPairs, apps as siteApps } from './site';
+import { appSettings, installedApps, type SiteApp } from './apps';
+import { settingsRoute } from './AppList';
+import { splitPicture } from '../lib/crop.mjs';
+
+const names = colorFields.map((f) => f.name);
+
+/** The site's colours as the editor has them (with those a file written before them does not have made, completeColors),
+ * or the ones it was designed with when the file is missing or cannot be read (`unreadable`). */
+export function colorsOf(files: RepoFile[]): ColorsData & { unreadable?: boolean } {
+  const file = files.find((f) => f.path === config.colors);
+  try {
+    const colors = completeColors(JSON.parse(file?.text ?? ''), colorRoles);
+    if (!colorProblems(colors, names).length && (colors.dynamic === undefined || !dynamicProblems(colors.dynamic).length)) return colors;
+  } catch {}
+  return { ...defaultColors, unreadable: true };
+}
+
+const fileOf = (colors: ColorsData) => {
+  const sets = Object.fromEntries(MODES.map((m) => [m, Object.fromEntries(names.map((n) => [n, colors[m][n]]))]));
+  const d = colors.dynamic;
+  const dynamic = d && {
+    source: d.source,
+    ...(d.harmony ? { harmony: d.harmony } : { variant: d.variant }),
+    contrast: d.contrast,
+    ...(d.sourceLocked && { sourceLocked: true }),
+  };
+  return `${JSON.stringify({ ...sets, ...(dynamic && { dynamic }) }, null, 2)}\n`;
+};
+
+/** The colours made from a choice of dynamic colour, with the choice. */
+const madeFrom = (dynamic: Dynamic): Pick<ColorsData, 'light' | 'dark' | 'dynamic'> => ({ ...dynamicColors(dynamic, colorRoles), dynamic });
+
+// The colour wheel's edge and middle, the same for every choice.
+const wheel = wheelColors();
+
+const ratio = (n: number) => n.toLocaleString(locale, { maximumFractionDigits: 1 });
+
+// What a save of the colours changed (deploy.ts).
+const CHANGE = t.app.changes.edited(t.app.changes.colors);
+
+/** The screen's tabs: a mode's colours, or the generator (dynamic colour), for both. */
+type Tab = Mode | 'generator';
+
+/** The page with the site's own colours, while an app changes the pages' colours: the fallback. */
+export const FALLBACK_ROUTE = 'udseende/farver/reservefarver';
+
+/** The apps installed that change the pages' colours (hooks/page-colors.ts). */
+const colorApps = (files: RepoFile[]) => {
+  const installed = installedApps(files);
+  return siteApps.filter((a) => installed.includes(a.id) && a.needs.changes?.includes('page-colors'));
+};
+
+/** `fallback`: the page with the site's own colours is open (FALLBACK_ROUTE). */
+export default function Colors({ env, files, fallback }: { env: Env; files: RepoFile[]; fallback?: boolean }) {
+  const notify = env.notify;
+  const loaded = useMemo(() => colorsOf(files), [files]);
+  const [colors, setColors] = useState<ColorsData>(loaded);
+  const [saving, setSaving] = useState(false);
+  // It starts on the generator, or, on the page with the site's own colours (the fallback), in the mode the editor is
+  // shown in.
+  const [tab, setTab] = useState<Tab>(fallback ? shownMode : 'generator');
+  // The mode the editor is shown in: the tab's, or on the generator the last one open (at first the one it is in).
+  const [mode, setMode] = useState<Mode>(shownMode);
+  useEffect(() => holdTheme(mode), [mode]);
+  const show = (tab: Tab) => {
+    setTab(tab);
+    if (tab !== 'generator') setMode(tab);
+  };
+  const changing = useMemo(() => colorApps(files), [files]);
+  useEffect(() => () => holdTheme(null), []);
+  // While an app changes the pages' colours, the modes show the pages', and the site's own are on a page of the form.
+  useFormPages(changing.length ? ['udseende/farver', FALLBACK_ROUTE] : []);
+  const ownShown = fallback || !changing.length;
+  const appNames = new Intl.ListFormat(locale).format(changing.map((a) => a.label));
+  const file = files.find((f) => f.path === config.colors);
+  const text = fileOf(colors);
+  // Not changed while they are the file's (with the colours one written before them did not have, which a save adds).
+  const dirty = text !== file?.text && (!!loaded.unreadable || text !== fileOf(loaded));
+  const low = Object.fromEntries(MODES.map((m) => [m, lowContrast(colors[m], colorPairs)])) as Record<Mode, ReturnType<typeof lowContrast>>;
+  const isDefault = text === fileOf(defaultColors);
+  // The colours to pick from in a colour's sheet: the site's own, in both modes, and the ones it was made with.
+  const swatches = [...new Set([colors, defaultColors].flatMap((c) => MODES.flatMap((m) => names.map((n) => c[m][n].toLowerCase()))))];
+  const dynamic = colors.dynamic;
+  const d = t.colors.dynamic;
+
+  // A colour changed by hand: they are no longer made from the source colour.
+  const set = (mode: Mode, name: string, value: string) => {
+    if (dynamic) notify({ text: d.turnedOff });
+    setColors(({ dynamic: _, ...c }) => ({ ...c, [mode]: { ...c[mode], [name]: value } }));
+  };
+  // The generator's choice: the one the colours were made from, else where it starts (the accent colour in light mode,
+  // the first harmony, Material's standard contrast). Choosing makes the colours from it.
+  const choiceOf = (c: ColorsData): Dynamic => c.dynamic ?? { source: c.light.accent, harmony: HARMONIES[0], contrast: 'standard' };
+  const choice = choiceOf(colors);
+  const update = (change: (d: Dynamic) => Dynamic) => setColors((c) => ({ ...c, ...madeFrom(change(choiceOf(c))) }));
+  const setDynamic = (change: Partial<Dynamic>) => update((d) => ({ ...d, ...change }));
+
+  async function fromPicture() {
+    const file = await pickImage();
+    if (!file) return;
+    try {
+      const found = await colorsInPicture(file);
+      if (!found.length) return notify({ text: d.noColorInPicture, error: true });
+      setDynamic({ source: found[0] });
+      notify({ text: d.fromPictureDone });
+    } catch {
+      notify({ text: t.app.pictureNotOpened, error: true });
+    }
+  }
+
+  async function save() {
+    // The colours that are hard to read are shown with the mode they are in.
+    const hard = MODES.find((m) => low[m].length);
+    if (hard) {
+      show(hard);
+      if (!ownShown) location.hash = `#${FALLBACK_ROUTE}`;
+      return notify({ text: t.colors.cannotSave, error: true });
+    }
+    const path = config.colors;
+    const changes = [{ path, content: text, oid: file?.oid || null }];
+    setSaving(true);
+    notify({ text: t.common.saving });
+    try {
+      const oids = await env.commit(siteT.colors.commit, changes, CHANGE);
+      env.onSaved({ path, oid: oids[path], text });
+      notify({ text: savedText(CHANGE), kind: 'saved' });
+      return true;
+    } catch (e) {
+      notify({ text: e instanceof ConflictError ? e.message : t.common.notSaved((e as Error).message), error: true, kind: 'failed' });
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <FormFrame
+      title={changing.length && fallback ? t.colors.pages.fallback : t.common.parts.colors}
+      back={
+        changing.length && fallback
+          ? { href: '#udseende/farver', label: t.common.parts.colors, guard: (go) => go() }
+          : { href: '#udseende', label: t.common.parts.appearance }
+      }
+      dirty={dirty}
+      saving={saving}
+      onSave={save}
+      panel
+      tabs={{
+        label: t.colors.modes,
+        value: tab,
+        options: [
+          { value: 'generator', label: d.tab, icon: Palette },
+          { value: 'light', label: t.colors.light, icon: Sun },
+          { value: 'dark', label: t.colors.dark, icon: Moon },
+        ],
+        onChange: show,
+      }}
+    >
+      {tab === 'generator' ? (
+        generator()
+      ) : ownShown ? (
+        modeColors()
+      ) : (
+        <>
+          {/* The pages' colours come from the apps: said first, with the way to the site's own, the fallback. */}
+          <Notice
+            title={t.colors.pages.title}
+            action={
+              <LinkButton kind="outlined" size="small" href={`#${FALLBACK_ROUTE}`}>
+                {t.colors.pages.showFallback}
+              </LinkButton>
+            }
+          >
+            {t.colors.pages.byApps(appNames)}
+          </Notice>
+          <PageColors env={env} files={files} apps={changing} mode={mode} />
+        </>
+      )}
+    </FormFrame>
+  );
+
+  // A mode's little page and the pairs in it that are too hard to read.
+  function preview(mode: Mode) {
+    return (
+      <section className="space-y-4">
+        <ColorsPreview colors={colors[mode]} title={t.colors.preview.title(t.colors[mode])} />
+        {low[mode].length > 0 && (
+          <ProblemNote alert>
+            <ul className="space-y-1">
+              {low[mode].map((pair) => (
+                <li key={`${pair.text}-${pair.on}`}>{t.colors.tooLow(pair.what, ratio(pair.ratio), ratio(pair.min))}</li>
+              ))}
+            </ul>
+          </ProblemNote>
+        )}
+      </section>
+    );
+  }
+
+  // "Generator": dynamic colour, for both modes: the three base colours, the colour wheel with the harmonies, the
+  // source colour and the contrast, and the little page in each mode beside them (on a phone under them).
+  function generator() {
+    const dots = wheelDots(choice);
+    return (
+      <>
+        {loaded.unreadable && file && <ProblemNote>{t.colors.unreadable}</ProblemNote>}
+        <FormColumns
+          cards={false}
+          sticky
+          main={
+            <section className="space-y-5">
+              <FormField label={d.base}>
+                <div className="space-y-3">
+                  <ColorTiles
+                    label={d.base}
+                    colors={BASE_COLORS.map((which, i) => ({
+                      color: dots[i].color,
+                      name: [d.source, t.colors.preview.secondary, t.colors.preview.tertiary][i],
+                      disabled: !canSetBaseColor(choice, which),
+                      onChange: (color, lock) => update((c) => withBaseColor(c, which, color, lock)),
+                      // Only the source colour has a lock.
+                      ...(which === 'source' && {
+                        locked: !!choice.sourceLocked,
+                        onLock: (locked: boolean) => update(({ sourceLocked: _, ...c }) => (locked ? { ...c, sourceLocked: true } : c)),
+                      }),
+                    }))}
+                  />
+                  <Button kind="outlined" size="small" icon={Image} onClick={fromPicture}>
+                    {d.fromPicture}
+                  </Button>
+                </div>
+              </FormField>
+              {/* Named by the harmony chosen, else (a file with a variant) "Harmoni". */}
+              <FormField label={choice.harmony ? d.harmonies[choice.harmony] : d.harmony} hint={d.harmonyHint}>
+                <div className="space-y-4">
+                  <ChipSet label={d.harmony} scroll>
+                    {HARMONIES.map((h) => (
+                      <FilterChip key={h} selected={choice.harmony === h} onClick={() => setDynamic({ harmony: h, variant: undefined })}>
+                        {d.harmonies[h]}
+                      </FilterChip>
+                    ))}
+                  </ChipSet>
+                  <ColorWheel
+                    edge={wheel.edge}
+                    middle={wheel.middle}
+                    dots={dots.map((dot, i) => ({ ...dot, locked: !i && !!choice.sourceLocked }))}
+                    label={d.wheel}
+                    valueText={choice.source}
+                    disabled={choice.sourceLocked}
+                    onMove={(x, y) =>
+                      // A harmony from the wheel on, as the dots are its (a variant's palettes do not follow the chroma).
+                      update((c) => ({ ...c, source: wheelColor(x, y), harmony: c.harmony ?? HARMONIES[0], variant: undefined }))
+                    }
+                  />
+                </div>
+              </FormField>
+              <FormField label={d.contrast} hint={d.contrastHint}>
+                <SegmentedButton<Contrast>
+                  label={d.contrast}
+                  value={choice.contrast}
+                  options={(Object.keys(CONTRASTS) as Contrast[]).map((c) => ({ value: c, label: d.contrasts[c] }))}
+                  onChange={(contrast) => setDynamic({ contrast })}
+                />
+              </FormField>
+            </section>
+          }
+          side={
+            <div className="space-y-6">
+              {MODES.map((m) => (
+                <div key={m}>{preview(m)}</div>
+              ))}
+            </div>
+          }
+        />
+      </>
+    );
+  }
+
+  // A mode's colours: the preview and the fields (a function, not a component, so the fields keep their focus).
+  function modeColors() {
+    return (
+      <>
+        <p className="text-muted">{changing.length ? t.colors.pages.fallbackIntro(appNames) : t.colors.intro}</p>
+        {loaded.unreadable && file && <ProblemNote>{t.colors.unreadable}</ProblemNote>}
+        {/* On a wide computer screen the colours in the wide column, and the preview beside them, in view
+          while they are changed. */}
+        <FormColumns
+          cards={false}
+          sticky
+          first={preview(mode)}
+          main={
+            <>
+              <div className="grid gap-5 sm:grid-cols-2">
+                {colorFields.map((field) => {
+                  const id = `color-${mode}-${field.name}`;
+                  return (
+                    <div key={field.name}>
+                      <Label htmlFor={id} hint={field.hint}>
+                        {field.label}
+                      </Label>
+                      <ColorField
+                        id={id}
+                        label={field.label}
+                        value={colors[mode][field.name]}
+                        swatches={swatches}
+                        onChange={(v) => set(mode, field.name, v)}
+                      />
+                    </div>
+                  );
+                })}
+              </div>
+              <section className="space-y-2">
+                <Button kind="outlined" size="small" disabled={isDefault || saving} onClick={() => setColors(defaultColors)}>
+                  {t.colors.standard}
+                </Button>
+                <SupportingText>{t.colors.standardHint}</SupportingText>
+                <SupportingText>{t.colors.icons}</SupportingText>
+              </section>
+            </>
+          }
+        />
+      </>
+    );
+  }
+}
+
+/** A page's colours as the site was last built (packages/editor/scripts/page-colors.mjs): its address, its colours in both modes, and,
+ * when an app changed them, the app (its id) and the picture they came from. */
+type BuiltPage = { path: string; light: Record<string, string>; dark: Record<string, string>; app?: string; picture?: string };
+
+// The colours shown of a page, by their names: the accent colour, the light colour, the background and the text.
+const SHOWN = ['accent', 'tint', 'bg', 'ink'];
+
+/** "Sider": the apps that change the pages' colours, each to its settings, and each page's colours as the site was last
+ * built, those from a picture first. */
+function PageColors({ env, files, apps, mode }: { env: Env; files: RepoFile[]; apps: SiteApp[]; mode: Mode }) {
+  const p = t.colors.pages;
+  // undefined while they are fetched, null when the site has none (not built since, or not built at all).
+  const [pages, setPages] = useState<BuiltPage[] | null>();
+  useEffect(() => {
+    let current = true;
+    fetch('/editor/page-colors.json', { cache: 'no-store' })
+      .then((r) => (r.ok ? r.json() : null))
+      .then((json) => (Array.isArray(json?.pages) ? (json.pages as BuiltPage[]) : null))
+      .catch(() => null)
+      .then((found) => current && setPages(found));
+    return () => {
+      current = false;
+    };
+  }, []);
+  const settings = useMemo(() => appSettings(files, apps), [files, apps]);
+  const { relations } = env;
+  // A page's name, as the editor has it, else its address.
+  const nameAt = (path: string) =>
+    [...relations.fixed, ...relations.pages].find((o) => o.value === path)?.label ??
+    relations.blog.find((o) => `/${o.value}/` === path)?.label ??
+    relations.categories.find((o) => `/blog/kategori/${o.value}/` === path)?.label ??
+    path;
+  // An app's settings chosen in a list ("Kontrast: Standard · Variant: Som indholdet").
+  const chosen = (app: SiteApp) =>
+    (app.settings?.fields ?? [])
+      .flatMap((f) => {
+        const option = f.options?.find((o) => o.value === settings[app.id]?.[f.name]);
+        return option ? [`${f.label}: ${option.label}`] : [];
+      })
+      .join(' · ');
+  const fromApp = pages?.filter((page) => page.app) ?? [];
+  const own = pages?.filter((page) => !page.app) ?? [];
+  const row = (page: BuiltPage) => (
+    <ListItem
+      key={page.path}
+      leading={page.picture && <LeadingImage src={shownAt(splitPicture(page.picture).src)} />}
+      headline={nameAt(page.path)}
+      supporting={page.path}
+      truncate
+      trailing={<ColorSwatches colors={SHOWN.map((n) => page[mode][n])} label={p.swatches(t.colors[mode])} />}
+    />
+  );
+
+  return (
+    <>
+      <p className="text-muted">{p.intro}</p>
+      <Group title={p.apps}>
+        {apps.map((app) => (
+          <ListItem
+            key={app.id}
+            href={`#${settingsRoute(app) ?? `apps/${app.id}`}`}
+            icon={app.icon}
+            headline={app.label}
+            supporting={chosen(app)}
+            arrow
+          />
+        ))}
+      </Group>
+      {pages === undefined ? (
+        <EmptyNote busy>{p.loading}</EmptyNote>
+      ) : pages === null ? (
+        <EmptyNote>{p.missing}</EmptyNote>
+      ) : (
+        <>
+          {fromApp.length > 0 && <Group title={p.fromApp}>{fromApp.map(row)}</Group>}
+          {own.length > 0 && <Group title={p.own}>{own.map(row)}</Group>}
+        </>
+      )}
+    </>
+  );
+}