@morphemecms/cms 0.1.0 → 0.2.0-next-20261104150211

package/src/iconPacks.ts

@@ -1,89 +1,89 @@
-// The site's icon packs, for the editor ("Indstillinger" › "Udseende" › "Ikonpakker", IconPacks in Library.tsx): the
-// system's own (packages/editor/icons/<pack>/: Material Symbols, Phosphor and Lucide) and those the themes installed bring
-// (src/themes/<theme>/icon-packs/<pack>/), each by its manifest (pack.json) with a few of its icons to show; and the one
-// the site and this editor are built with (packages/editor/site/iconPacks.mjs: the one chosen, src/data/icons.json, else the theme's,
-// else the standard theme's). The packs' icons are read as files: the editor draws them as they are, beside the icons it
-// draws itself, which are the pack in use's (themePlugin in packages/editor/site/theme.mjs).
-import { packInUse, packTheme, themePackId } from '../site/iconPacks.mjs';
-import { STANDARD_THEME } from './store';
-import { theme, themes } from './themes';
-
-export type IconPack = {
-  /** Its id: a system pack's folder (`lucide`), a theme's `<theme>/<folder>` (packages/editor/site/iconPacks.mjs). */
-  id: string;
-  name: string;
-  /** Who made it. */
-  author: string;
-  /** Its licence, as an SPDX id (`Apache-2.0`), in its folder as LICENSE. */
-  license: string;
-  version?: string;
-  url?: string;
-  /** The theme it came with; none for the system's own. */
-  theme?: string;
-  /** The sets it has icons from besides its own (Material Design Icons' logos), each with its licence in the folder. */
-  includes?: { name: string; author: string; license: string; licenseFile: string; icons: string[] }[];
-  /** A few of its icons' files, to show what it looks like (SAMPLES). */
-  samples: string[];
-};
-
-/** The icons each pack shows of itself, by the names the site draws them by. */
-const SAMPLES = ['house', 'magnifying-glass', 'calendar-blank', 'envelope-simple', 'heart'];
-
-type Manifest = Omit<IconPack, 'id' | 'theme' | 'samples'>;
-const manifests = import.meta.glob<Manifest>(['@icons/*/pack.json', '/src/themes/*/icon-packs/*/pack.json'], {
-  eager: true,
-  import: 'default',
-});
-const files = import.meta.glob<string>(
-  [
-    '@icons/*/{house,magnifying-glass,calendar-blank,envelope-simple,heart}.svg',
-    '/src/themes/*/icon-packs/*/{house,magnifying-glass,calendar-blank,envelope-simple,heart}.svg',
-  ],
-  { eager: true, query: '?raw', import: 'default' },
-);
-const chosen = import.meta.glob<{ pack?: string }>('/src/data/icons.json', { eager: true, import: 'default' })['/src/data/icons.json'];
-
-/** A pack's id from the path of a file in it: a theme's (src/themes/<theme>/icon-packs/<pack>/) or the system's (the
- * CMS's icons/<pack>/, @icons). */
-const idOf = (path: string) => {
-  const own = path.match(/\/themes\/([^/]+)\/icon-packs\/([^/]+)\//);
-  return own ? themePackId(own[1], own[2]) : path.split('/').at(-2)!;
-};
-const folderOf = (path: string) => path.slice(0, path.lastIndexOf('/') + 1);
-
-/** The icon packs installed, by name. */
-export const iconPacks: IconPack[] = Object.entries(manifests)
-  .map(([path, m]) => {
-    const id = idOf(path);
-    const folder = folderOf(path);
-    const pack: IconPack = {
-      id,
-      name: m.name,
-      author: m.author,
-      license: m.license,
-      samples: SAMPLES.map((name) => files[`${folder}${name}.svg`]).filter(Boolean),
-    };
-    if (m.version) pack.version = m.version;
-    if (m.url) pack.url = m.url;
-    if (m.includes?.length) pack.includes = m.includes;
-    const from = packTheme(id);
-    if (from) pack.theme = from;
-    return pack;
-  })
-  .sort((a, b) => a.name.localeCompare(b.name));
-
-const installed = iconPacks.map((p) => p.id);
-const standard = themes.find((x) => x.id === STANDARD_THEME);
-
-/** The pack a theme uses while none is chosen, by its id. */
-export const packOfTheme = (id: string): string =>
-  packInUse({ chosen: undefined, theme: id, icons: themes.find((x) => x.id === id)?.icons, standardIcons: standard?.icons, installed });
-
-/** The pack the site and this editor are built with, by its id. */
-export const iconPack: string = packInUse({
-  chosen: chosen?.pack,
-  theme: theme.id,
-  icons: theme.icons,
-  standardIcons: standard?.icons,
-  installed,
-});
+// The site's icon packs, for the editor ("Indstillinger" › "Udseende" › "Ikonpakker", IconPacks in Library.tsx): the
+// system's own (packages/editor/icons/<pack>/: Material Symbols, Phosphor and Lucide) and those the themes installed bring
+// (src/themes/<theme>/icon-packs/<pack>/), each by its manifest (pack.json) with a few of its icons to show; and the one
+// the site and this editor are built with (packages/editor/site/iconPacks.mjs: the one chosen, src/data/icons.json, else the theme's,
+// else the standard theme's). The packs' icons are read as files: the editor draws them as they are, beside the icons it
+// draws itself, which are the pack in use's (themePlugin in packages/editor/site/theme.mjs).
+import { packInUse, packTheme, themePackId } from '../site/iconPacks.mjs';
+import { STANDARD_THEME } from './store';
+import { theme, themes } from './themes';
+
+export type IconPack = {
+  /** Its id: a system pack's folder (`lucide`), a theme's `<theme>/<folder>` (packages/editor/site/iconPacks.mjs). */
+  id: string;
+  name: string;
+  /** Who made it. */
+  author: string;
+  /** Its licence, as an SPDX id (`Apache-2.0`), in its folder as LICENSE. */
+  license: string;
+  version?: string;
+  url?: string;
+  /** The theme it came with; none for the system's own. */
+  theme?: string;
+  /** The sets it has icons from besides its own (Material Design Icons' logos), each with its licence in the folder. */
+  includes?: { name: string; author: string; license: string; licenseFile: string; icons: string[] }[];
+  /** A few of its icons' files, to show what it looks like (SAMPLES). */
+  samples: string[];
+};
+
+/** The icons each pack shows of itself, by the names the site draws them by. */
+const SAMPLES = ['house', 'magnifying-glass', 'calendar-blank', 'envelope-simple', 'heart'];
+
+type Manifest = Omit<IconPack, 'id' | 'theme' | 'samples'>;
+const manifests = import.meta.glob<Manifest>(['@icons/*/pack.json', '/src/themes/*/icon-packs/*/pack.json'], {
+  eager: true,
+  import: 'default',
+});
+const files = import.meta.glob<string>(
+  [
+    '@icons/*/{house,magnifying-glass,calendar-blank,envelope-simple,heart}.svg',
+    '/src/themes/*/icon-packs/*/{house,magnifying-glass,calendar-blank,envelope-simple,heart}.svg',
+  ],
+  { eager: true, query: '?raw', import: 'default' },
+);
+const chosen = import.meta.glob<{ pack?: string }>('/src/data/icons.json', { eager: true, import: 'default' })['/src/data/icons.json'];
+
+/** A pack's id from the path of a file in it: a theme's (src/themes/<theme>/icon-packs/<pack>/) or the system's (the
+ * CMS's icons/<pack>/, @icons). */
+const idOf = (path: string) => {
+  const own = path.match(/\/themes\/([^/]+)\/icon-packs\/([^/]+)\//);
+  return own ? themePackId(own[1], own[2]) : path.split('/').at(-2)!;
+};
+const folderOf = (path: string) => path.slice(0, path.lastIndexOf('/') + 1);
+
+/** The icon packs installed, by name. */
+export const iconPacks: IconPack[] = Object.entries(manifests)
+  .map(([path, m]) => {
+    const id = idOf(path);
+    const folder = folderOf(path);
+    const pack: IconPack = {
+      id,
+      name: m.name,
+      author: m.author,
+      license: m.license,
+      samples: SAMPLES.map((name) => files[`${folder}${name}.svg`]).filter(Boolean),
+    };
+    if (m.version) pack.version = m.version;
+    if (m.url) pack.url = m.url;
+    if (m.includes?.length) pack.includes = m.includes;
+    const from = packTheme(id);
+    if (from) pack.theme = from;
+    return pack;
+  })
+  .sort((a, b) => a.name.localeCompare(b.name));
+
+const installed = iconPacks.map((p) => p.id);
+const standard = themes.find((x) => x.id === STANDARD_THEME);
+
+/** The pack a theme uses while none is chosen, by its id. */
+export const packOfTheme = (id: string): string =>
+  packInUse({ chosen: undefined, theme: id, icons: themes.find((x) => x.id === id)?.icons, standardIcons: standard?.icons, installed });
+
+/** The pack the site and this editor are built with, by its id. */
+export const iconPack: string = packInUse({
+  chosen: chosen?.pack,
+  theme: theme.id,
+  icons: theme.icons,
+  standardIcons: standard?.icons,
+  installed,
+});

package/src/images.ts

@@ -1,163 +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>;
+// 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>;