@protobase/ui 0.19.3 → 0.19.5

package/dist/app/import/use-import-flow.js

@@ -0,0 +1,225 @@
+import { useResourceClients } from "../../data/api-provider.js";
+import { autoMapping, importableFields, matchFields } from "./mapping.js";
+import { checkImport, readHead, runImport } from "./run-import.js";
+import { localeFormats } from "./locale-formats.js";
+import { createLookups } from "./lookups.js";
+import { workerSheetSource } from "./sheet-source.js";
+import { useMemo, useRef, useState } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+//#region src/app/import/use-import-flow.ts
+const emptyProgress = {
+	created: 0,
+	updated: 0,
+	skipped: 0,
+	failed: 0,
+	notWritten: []
+};
+/** The state of an import, from choosing the file to its summary, and the moves between its steps. */
+const useImportFlow = ({ model, resources, views, sourceFor = workerSheetSource }) => {
+	const clientFor = useResourceClients();
+	const queryClient = useQueryClient();
+	const view = views[model.name];
+	const fields = useMemo(() => importableFields(model, resources), [model, resources]);
+	const [step, setStep] = useState({
+		kind: "file",
+		reading: false
+	});
+	const [error, setError] = useState();
+	const [file, setFile] = useState();
+	const [sheet, setSheet] = useState();
+	const [head, setHead] = useState();
+	const [mode, setMode] = useState("create");
+	const [columns, setColumns] = useState([]);
+	const [match, setMatch] = useState();
+	const [options, setOptions] = useState(() => localeFormats());
+	const cancelled = useRef(false);
+	const checking = useRef(void 0);
+	const fail = (next) => (cause) => {
+		setError(cause);
+		setStep(next);
+	};
+	/** Reads the chosen file's sheet names; a CSV, or a workbook of one sheet, goes on to its columns. */
+	const choose = (chosen) => {
+		setError(void 0);
+		setStep({
+			kind: "file",
+			reading: true
+		});
+		const source = sourceFor(chosen);
+		source.sheets().then((sheets) => {
+			setFile({
+				file: chosen,
+				source,
+				sheets
+			});
+			setSheet(sheets[0]);
+			if (sheets.length <= 1) return open(source, sheets[0]);
+			setStep({
+				kind: "file",
+				reading: false
+			});
+		}).catch(fail({
+			kind: "file",
+			reading: false
+		}));
+	};
+	const open = async (source, name) => {
+		setStep({
+			kind: "file",
+			reading: true
+		});
+		const read = await readHead(source, name);
+		setHead(read);
+		setColumns(autoMapping(read.headers, fields, view));
+		const key = matchFields(model)[0];
+		const keyColumn = key ? autoMapping(read.headers, [key], view)[0] : void 0;
+		setMatch(key && keyColumn ? {
+			field: key.name,
+			column: keyColumn.column
+		} : void 0);
+		setStep({ kind: "map" });
+	};
+	const openSheet = () => {
+		if (!file) return;
+		setError(void 0);
+		open(file.source, sheet).catch(fail({
+			kind: "file",
+			reading: false
+		}));
+	};
+	/** Maps the column to the field, or skips it without one; a field fills one column, so another that had it is skipped. */
+	const mapColumn = (column, field) => setColumns((current) => {
+		const others = current.filter((entry) => entry.column !== column && entry.field !== field);
+		return field ? [...others, {
+			column,
+			field
+		}].sort((a, b) => a.column - b.column) : others;
+	});
+	/** The field of the related record a relation column is found by. */
+	const matchColumnBy = (column, matchBy) => setColumns((current) => current.map((entry) => entry.column === column ? {
+		...entry,
+		matchBy
+	} : entry));
+	const plan = () => ({
+		mode,
+		columns,
+		match: mode === "create" ? void 0 : match,
+		options
+	});
+	const context = () => ({
+		model,
+		resources,
+		views,
+		lookups: createLookups(clientFor)
+	});
+	/** Reads the whole file and prepares each row as the import would, writing nothing. */
+	const check = () => {
+		if (!file) return;
+		setError(void 0);
+		const controller = new AbortController();
+		checking.current = controller;
+		setStep({
+			kind: "checking",
+			rows: 0
+		});
+		checkImport(file.source, sheet, plan(), context(), (rows) => setStep({
+			kind: "checking",
+			rows
+		}), controller.signal).then((result) => {
+			if (!controller.signal.aborted) setStep({
+				kind: "checked",
+				check: result
+			});
+		}).catch((cause) => {
+			if (!controller.signal.aborted) fail({ kind: "map" })(cause);
+		});
+	};
+	const back = () => {
+		checking.current?.abort();
+		setError(void 0);
+		setStep({ kind: "map" });
+	};
+	/** Writes the rows in batches; Cancel stops it between two. */
+	const start = (total) => {
+		if (!file) return;
+		setError(void 0);
+		cancelled.current = false;
+		setStep({
+			kind: "importing",
+			progress: emptyProgress,
+			total,
+			cancelling: false
+		});
+		let latest = emptyProgress;
+		const refresh = () => {
+			for (const prefix of [
+				"page",
+				"list",
+				"first-page",
+				"map",
+				"facets",
+				"series"
+			]) queryClient.invalidateQueries({ queryKey: [prefix, model.name] });
+		};
+		runImport(file.source, sheet, plan(), context(), {
+			client: clientFor(model.name),
+			onProgress: (progress) => {
+				latest = progress;
+				setStep({
+					kind: "importing",
+					progress,
+					total,
+					cancelling: cancelled.current
+				});
+			},
+			cancelled: () => cancelled.current
+		}).then((result) => setStep({
+			kind: "done",
+			result
+		})).catch((cause) => setStep({
+			kind: "done",
+			result: {
+				...latest,
+				cancelled: false
+			},
+			stopped: cause
+		})).finally(refresh);
+	};
+	const cancel = () => {
+		cancelled.current = true;
+		setStep((current) => current.kind === "importing" ? {
+			...current,
+			cancelling: true
+		} : current);
+	};
+	/** Stops a check that is still reading, when the dialog closes. */
+	const stop = () => checking.current?.abort();
+	return {
+		step,
+		error,
+		file: file?.file,
+		sheets: file?.sheets ?? [],
+		sheet,
+		setSheet,
+		head,
+		fields,
+		mode,
+		setMode,
+		columns,
+		mapColumn,
+		matchColumnBy,
+		match,
+		setMatch,
+		options,
+		setOptions,
+		choose,
+		openSheet,
+		check,
+		back,
+		start,
+		cancel,
+		stop
+	};
+};
+//#endregion
+export { useImportFlow };

package/dist/app/import/xlsx-reader.js

@@ -0,0 +1,43 @@
+import { createRowScanner, dateStyles, parseRow, sharedStrings, workbookSheets } from "./xlsx-xml.js";
+import { zipEntries, zipText, zipTextChunks } from "./zip-reader.js";
+//#region src/app/import/xlsx-reader.ts
+const part = (entries, name) => {
+	const entry = entries.get(name);
+	if (!entry) throw new Error(`The file is not an Excel workbook (.xlsx): it has no ${name}`);
+	return entry;
+};
+/**
+* An .xlsx workbook: the names of its sheets, and each sheet's rows read as its XML streams in. The shared strings and
+* the styles are read whole, since cells point into them; the sheets are not.
+*/
+const openWorkbook = async (blob) => {
+	const entries = await zipEntries(blob);
+	const { sheets, date1904 } = workbookSheets(await zipText(blob, part(entries, "xl/workbook.xml")), await zipText(blob, part(entries, "xl/_rels/workbook.xml.rels")));
+	let context;
+	const sheetContext = async () => {
+		context = {
+			strings: entries.has("xl/sharedStrings.xml") ? sharedStrings(await zipText(blob, entries.get("xl/sharedStrings.xml"))) : [],
+			dates: entries.has("xl/styles.xml") ? dateStyles(await zipText(blob, entries.get("xl/styles.xml"))) : /* @__PURE__ */ new Set(),
+			date1904
+		};
+		return context;
+	};
+	async function* rows(name) {
+		const sheet = sheets.find((candidate) => candidate.name === name);
+		if (!sheet) throw new Error(`The workbook has no sheet called ${name}`);
+		const shared = context ?? await sheetContext();
+		const scan = createRowScanner();
+		let line = 0;
+		for await (const text of zipTextChunks(blob, part(entries, sheet.path))) for (const xml of scan(text)) {
+			const row = parseRow(xml, shared, line);
+			line = row.line;
+			yield row;
+		}
+	}
+	return {
+		sheets: sheets.map((sheet) => sheet.name),
+		rows
+	};
+};
+//#endregion
+export { openWorkbook };

package/dist/app/import/xlsx-xml.js

@@ -0,0 +1,169 @@
+//#region src/app/import/xlsx-xml.ts
+const entities = {
+	amp: "&",
+	lt: "<",
+	gt: ">",
+	quot: "\"",
+	apos: "'"
+};
+/** The text with XML's entities and character references replaced by what they stand for. */
+const decodeXml = (text) => text.replace(/&(#x[0-9a-f]+|#\d+|amp|lt|gt|quot|apos);/gi, (whole, name) => {
+	if (name[0] !== "#") return entities[name.toLowerCase()] ?? whole;
+	return String.fromCodePoint(name[1] === "x" || name[1] === "X" ? parseInt(name.slice(2), 16) : Number(name.slice(1)));
+});
+/** An element's attributes, by name without their namespace prefix. */
+const attributes = (text) => {
+	const found = {};
+	for (const match of text.matchAll(/([\w:.-]+)\s*=\s*(?:"([^"]*)"|'([^']*)')/g)) {
+		const name = match[1].slice(match[1].indexOf(":") + 1);
+		found[name] = decodeXml(match[2] ?? match[3] ?? "");
+	}
+	return found;
+};
+const runsText = (xml) => xml.replace(/<rPh\b[\s\S]*?<\/rPh>/g, "").match(/<t\b[^>]*>[\s\S]*?<\/t>/g)?.map((run) => decodeXml(run.replace(/^<t\b[^>]*>|<\/t>$/g, ""))).join("") ?? "";
+/** The workbook's shared strings (xl/sharedStrings.xml), which text cells point at by index. */
+const sharedStrings = (xml) => [...xml.matchAll(/<si\b[^>]*?(?:\/>|>([\s\S]*?)<\/si>)/g)].map((match) => runsText(match[1] ?? ""));
+/**
+* The workbook's sheets in order, each with the path of its part in the archive, from xl/workbook.xml and its
+* relationships (xl/_rels/workbook.xml.rels); `date1904` when its dates count from 1904, as old Mac workbooks do.
+*/
+const workbookSheets = (workbookXml, relsXml) => {
+	const targets = new Map([...relsXml.matchAll(/<Relationship\b([^>]*)>/g)].map((match) => {
+		const { Id, Target } = attributes(match[1]);
+		return [Id, Target.startsWith("/") ? Target.slice(1) : `xl/${Target}`];
+	}));
+	const sheets = [...workbookXml.matchAll(/<sheet\b([^>]*)>/g)].map((match) => {
+		const { name, id } = attributes(match[1]);
+		const path = targets.get(id);
+		if (!name || !path) throw new Error("The workbook names a sheet it does not hold");
+		return {
+			name,
+			path
+		};
+	});
+	const pr = /<workbookPr\b([^>]*)>/.exec(workbookXml);
+	return {
+		sheets,
+		date1904: pr ? ["1", "true"].includes(attributes(pr[1]).date1904 ?? "") : false
+	};
+};
+const builtInDates = /* @__PURE__ */ new Set([
+	14,
+	15,
+	16,
+	17,
+	18,
+	19,
+	20,
+	21,
+	22,
+	27,
+	28,
+	29,
+	30,
+	31,
+	32,
+	33,
+	34,
+	35,
+	36,
+	45,
+	46,
+	47,
+	50,
+	51,
+	52,
+	53,
+	54,
+	55,
+	56,
+	57,
+	58
+]);
+/** Whether a number format shows a date or time: it has d, m, y, h or s outside quoted text, colours and escapes. */
+const isDateFormat = (code) => /[dmyhs]/i.test(code.replace(/"[^"]*"|\[[^\]]*\]|\\.|_.|\*./g, ""));
+/** The indexes of the cell styles (xl/styles.xml's cellXfs) whose number format is a date or time. */
+const dateStyles = (xml) => {
+	const custom = new Map([...xml.matchAll(/<numFmt\b([^>]*)>/g)].map((match) => {
+		const { numFmtId, formatCode } = attributes(match[1]);
+		return [Number(numFmtId), formatCode ?? ""];
+	}));
+	const cellXfs = /<cellXfs\b[^>]*>([\s\S]*?)<\/cellXfs>/.exec(xml)?.[1] ?? "";
+	const styles = /* @__PURE__ */ new Set();
+	[...cellXfs.matchAll(/<xf\b([^>]*)>/g)].forEach((match, index) => {
+		const id = Number(attributes(match[1]).numFmtId ?? 0);
+		if (builtInDates.has(id) || custom.has(id) && isDateFormat(custom.get(id))) styles.add(index);
+	});
+	return styles;
+};
+const pad = (value) => String(value).padStart(2, "0");
+/**
+* A date cell's wall-clock time from its serial number, the days since the workbook's epoch: a date when it has no time
+* of day (`2026-03-01`), else to the second (`2026-03-01T14:30:00`). Excel's 1900 calendar counts a 29 February 1900
+* that never was, so serials before it are a day ahead.
+*/
+const serialDate = (serial, date1904 = false) => {
+	const days = date1904 ? serial + 1462 : serial < 60 ? serial + 1 : serial;
+	const at = new Date(Date.UTC(1899, 11, 30) + Math.round(days * 86400) * 1e3);
+	const date = `${at.getUTCFullYear()}-${pad(at.getUTCMonth() + 1)}-${pad(at.getUTCDate())}`;
+	return at.getUTCHours() * 3600 + at.getUTCMinutes() * 60 + at.getUTCSeconds() === 0 ? date : `${date}T${pad(at.getUTCHours())}:${pad(at.getUTCMinutes())}:${pad(at.getUTCSeconds())}`;
+};
+/** The 0-based column of a cell reference: `A1` is 0, `AB7` is 27. */
+const columnIndex = (ref) => {
+	let index = 0;
+	for (const char of ref.toUpperCase()) {
+		const code = char.charCodeAt(0);
+		if (code < 65 || code > 90) break;
+		index = index * 26 + (code - 64);
+	}
+	return index - 1;
+};
+const cellValue = (attrs, body, context) => {
+	const type = attrs.t ?? "n";
+	if (type === "inlineStr") return runsText(body);
+	const raw = /<v\b[^>]*>([\s\S]*?)<\/v>/.exec(body)?.[1];
+	if (raw === void 0) return null;
+	const value = decodeXml(raw);
+	if (type === "s") return context.strings[Number(value)] ?? null;
+	if (type === "b") return value === "1";
+	if (type === "str" || type === "e") return value;
+	if (type === "d") return { date: value.replace(/Z$/, "") };
+	const number = Number(value);
+	return context.dates.has(Number(attrs.s ?? 0)) ? { date: serialDate(number, context.date1904) } : number;
+};
+/** One `<row>` element as a row of cells, each at its column; a row without a number follows `previous`. */
+const parseRow = (xml, context, previous) => {
+	const open = /^<row\b([^>]*)>/.exec(xml);
+	const line = Number(attributes(open?.[1] ?? "").r ?? previous + 1);
+	const cells = [];
+	for (const match of xml.matchAll(/<c\b([^>]*?)(?:\/>|>([\s\S]*?)<\/c>)/g)) {
+		const attrs = attributes(match[1]);
+		const column = attrs.r ? columnIndex(attrs.r) : cells.length;
+		while (cells.length < column) cells.push(null);
+		cells[column] = cellValue(attrs, match[2] ?? "", context);
+	}
+	return {
+		line,
+		cells
+	};
+};
+/**
+* A scanner fed a sheet's XML a chunk at a time, which returns the `<row>` elements each chunk completes, so a large
+* sheet is read without holding its text whole.
+*/
+const createRowScanner = () => {
+	let buffer = "";
+	return (chunk) => {
+		buffer += chunk;
+		const rows = [];
+		let end = 0;
+		for (const match of buffer.matchAll(/<row\b[^>]*?(?:\/>|>[\s\S]*?<\/row>)/g)) {
+			rows.push(match[0]);
+			end = match.index + match[0].length;
+		}
+		buffer = buffer.slice(end);
+		return rows;
+	};
+};
+//#endregion
+export { attributes, columnIndex, createRowScanner, dateStyles, decodeXml, isDateFormat, parseRow, serialDate, sharedStrings, workbookSheets };

package/dist/app/import/zip-reader.js

@@ -0,0 +1,72 @@
+//#region src/app/import/zip-reader.ts
+const endSignature = 101010256;
+const entrySignature = 33639248;
+const localSignature = 67324752;
+const endSearch = 65557;
+const bytesOf = async (blob, start, end) => new DataView(await blob.slice(start, end).arrayBuffer());
+const notZip = () => /* @__PURE__ */ new Error("The file is not an Excel workbook (.xlsx): it is no ZIP archive");
+const endRecordAt = (view) => {
+	for (let at = view.byteLength - 22; at >= 0; at--) if (view.getUint32(at, true) === endSignature) return at;
+	return -1;
+};
+/** The archive's entries by name, from its central directory. A ZIP64 archive (over 4 GB) is refused. */
+const zipEntries = async (blob) => {
+	const tailStart = Math.max(0, blob.size - endSearch);
+	const tail = await bytesOf(blob, tailStart, blob.size);
+	const end = endRecordAt(tail);
+	if (end < 0) throw notZip();
+	const count = tail.getUint16(end + 10, true);
+	const size = tail.getUint32(end + 12, true);
+	const start = tail.getUint32(end + 16, true);
+	if (count === 65535 || size === 4294967295 || start === 4294967295) throw new Error("The workbook is too large to read: it is a ZIP64 archive");
+	const directory = await bytesOf(blob, start, start + size);
+	const decoder = new TextDecoder();
+	const entries = /* @__PURE__ */ new Map();
+	let at = 0;
+	for (let index = 0; index < count; index++) {
+		if (directory.getUint32(at, true) !== entrySignature) throw notZip();
+		const nameLength = directory.getUint16(at + 28, true);
+		const extraLength = directory.getUint16(at + 30, true);
+		const commentLength = directory.getUint16(at + 32, true);
+		const name = decoder.decode(new Uint8Array(directory.buffer, directory.byteOffset + at + 46, nameLength));
+		entries.set(name, {
+			name,
+			method: directory.getUint16(at + 10, true),
+			size: directory.getUint32(at + 20, true),
+			offset: directory.getUint32(at + 42, true)
+		});
+		at += 46 + nameLength + extraLength + commentLength;
+	}
+	return entries;
+};
+/** The entry's content as a stream of bytes: stored as it is, or inflated (deflate). */
+const zipEntryStream = async (blob, entry) => {
+	const local = await bytesOf(blob, entry.offset, entry.offset + 30);
+	if (local.getUint32(0, true) !== localSignature) throw notZip();
+	const dataStart = entry.offset + 30 + local.getUint16(26, true) + local.getUint16(28, true);
+	const raw = blob.slice(dataStart, dataStart + entry.size).stream();
+	if (entry.method === 0) return raw;
+	if (entry.method === 8) return raw.pipeThrough(new DecompressionStream("deflate-raw"));
+	throw new Error(`The workbook's part ${entry.name} is compressed in a way that cannot be read (method ${entry.method})`);
+};
+/** The entry's content as text, decoded as UTF-8 a chunk at a time. */
+async function* zipTextChunks(blob, entry) {
+	const reader = (await zipEntryStream(blob, entry)).pipeThrough(new TextDecoderStream()).getReader();
+	try {
+		for (;;) {
+			const { done, value } = await reader.read();
+			if (done) return;
+			yield value;
+		}
+	} finally {
+		await reader.cancel();
+	}
+}
+/** The entry's whole content as text, for the small parts of a workbook. */
+const zipText = async (blob, entry) => {
+	const parts = [];
+	for await (const text of zipTextChunks(blob, entry)) parts.push(text);
+	return parts.join("");
+};
+//#endregion
+export { zipEntries, zipEntryStream, zipText, zipTextChunks };

package/dist/app/list-page.js

@@ -28,6 +28,7 @@ import { useLiveRows } from "../live/use-live-rows.js";
 import { Sheet } from "../primitives/sheet.js";
 import { useDeleteFlow } from "./delete/use-delete-flow.js";
 import { useRestore } from "./delete/use-restore.js";
+import { ImportButton } from "./import/import-button.js";
 import { SignInPrompt } from "../auth/sign-in-prompt.js";
 import { ListCards } from "./displays/list-cards.js";
 import { MapDisplay } from "./displays/map-display.js";
@@ -270,6 +271,7 @@ const LoadedList = ({ model, address, scope, heading }) => {
 		filter: filterText,
 		chips: filterChips(model, view, filterText, facetNames(config))
 	});
+	const importButton = !scope && /* @__PURE__ */ jsx(ImportButton, { model });
 	const displaySwitch = (menu) => /* @__PURE__ */ jsx(DisplaySwitch, {
 		view,
 		value: display?.name ?? tableDisplay,
@@ -349,8 +351,13 @@ const LoadedList = ({ model, address, scope, heading }) => {
 				actions: desktop ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
 					displaySwitch(false),
 					saveSearch,
+					importButton,
 					createButton
-				] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [saveSearch, createButton] })
+				] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					saveSearch,
+					importButton,
+					createButton
+				] })
 			}),
 			!parsed.ok && /* @__PURE__ */ jsx(ErrorBanner, {
 				title: "The filter in the address could not be read",

package/dist/app/map/map-layer-choice.js

@@ -0,0 +1,11 @@
+import { guarded } from "../../lib/guarded.js";
+//#region src/app/map/map-layer-choice.ts
+const mapLayerStorageKey = "protobase:map-layer";
+/** The layer the browser last chose, if the app still offers it: else the style's own map, which is the default. */
+const chosenMapLayer = (layers, id) => layers.find((layer) => layer.id === id);
+/** The id of the layer chosen in this browser, if any; unavailable storage reads as the default map. */
+const readMapLayer = (storage) => guarded(() => storage.getItem(mapLayerStorageKey), null);
+/** Remembers a layer by its id, and the default map by forgetting the choice, so the default costs no storage. */
+const writeMapLayer = (storage, id) => guarded(() => id === void 0 ? storage.removeItem(mapLayerStorageKey) : storage.setItem(mapLayerStorageKey, id), void 0);
+//#endregion
+export { chosenMapLayer, mapLayerStorageKey, readMapLayer, writeMapLayer };

package/dist/app/map/map-layer-switch.js

@@ -0,0 +1,55 @@
+import { Segmented } from "../../primitives/segmented.js";
+import { chosenMapLayer, readMapLayer, writeMapLayer } from "./map-layer-choice.js";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Layer, Source, useMap } from "react-map-gl/maplibre";
+//#region src/app/map/map-layer-switch.tsx
+const styleValue = "";
+/**
+* Inside a map, a switch in its top left corner between the style's map and each of `layers`, and the chosen layer's
+* tiles drawn over the style's, under `below` when the map has that layer, such as the areas around records. The
+* layer's credit joins the map's attribution while it shows. Outside its bounds the style's map shows through. The
+* choice is remembered in this browser, for every map. Nothing without layers.
+*/
+const MapLayerSwitch = ({ layers, below }) => {
+	const [chosenId, setChosenId] = useState(() => readMapLayer(localStorage));
+	const { current: map } = useMap();
+	if (!layers || layers.length === 0) return null;
+	const chosen = chosenMapLayer(layers, chosenId);
+	const choose = (value) => {
+		const id = value === styleValue ? void 0 : value;
+		writeMapLayer(localStorage, id);
+		setChosenId(id ?? null);
+	};
+	const beforeId = below && map?.getLayer(below) ? below : void 0;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [chosen && /* @__PURE__ */ jsx(Source, {
+		id: `map-layer-${chosen.id}`,
+		type: "raster",
+		tiles: [chosen.tiles],
+		tileSize: 256,
+		attribution: chosen.attribution,
+		maxzoom: chosen.maxzoom ?? 22,
+		...chosen.bounds && { bounds: chosen.bounds },
+		children: /* @__PURE__ */ jsx(Layer, {
+			id: `map-layer-${chosen.id}`,
+			type: "raster",
+			...beforeId && { beforeId }
+		})
+	}, chosen.id), /* @__PURE__ */ jsx("div", {
+		className: "absolute left-2.5 top-2.5 z-10 rounded-md shadow",
+		children: /* @__PURE__ */ jsx(Segmented, {
+			label: "Map layer",
+			value: chosen?.id ?? styleValue,
+			onChange: choose,
+			options: [{
+				value: styleValue,
+				label: "Map"
+			}, ...layers.map((layer) => ({
+				value: layer.id,
+				label: layer.label
+			}))]
+		})
+	})] });
+};
+//#endregion
+export { MapLayerSwitch };

package/dist/app/map/map-section.js

@@ -12,7 +12,8 @@ const defaultZoom = 15;
 * `/meta` names. Without a style, or for a record without a position, there is nothing to draw and no section.
 */
 const MapSection = ({ item, record }) => {
-	const style = useAdminMeta().maps?.style;
+	const maps = useAdminMeta().maps;
+	const style = maps?.style;
 	const position = recordPosition(record, item);
 	if (!style || !position) return null;
 	const map = /* @__PURE__ */ jsx("div", {
@@ -21,6 +22,7 @@ const MapSection = ({ item, record }) => {
 			fallback: null,
 			children: /* @__PURE__ */ jsx(RecordMap, {
 				style,
+				layers: maps?.layers,
 				position,
 				zoom: item.zoom ?? defaultZoom
 			}, `${position.latitude},${position.longitude}`)

package/dist/app/map/position-areas.js

@@ -2,6 +2,8 @@ import { areaFeatures, fadeIn } from "./area-features.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Layer, Source } from "react-map-gl/maplibre";
 //#region src/app/map/position-areas.tsx
+/** The areas' lowest layer, which a layer of tiles goes under. */
+const areaLayerId = "position-area-fills";
 const polygons = [
 	"==",
 	["get", "kind"],
@@ -38,7 +40,7 @@ const PositionAreas = ({ points, selected, colors }) => {
 		data,
 		children: [
 			/* @__PURE__ */ jsx(Layer, {
-				id: "position-area-fills",
+				id: areaLayerId,
 				type: "fill",
 				filter: polygons,
 				paint: {
@@ -75,4 +77,4 @@ const PositionAreas = ({ points, selected, colors }) => {
 	});
 };
 //#endregion
-export { PositionAreas };
+export { PositionAreas, areaLayerId };