@protobase/ui 0.15.4 → 0.16.0

package/dist/account/two-factor-setup.js

@@ -3,7 +3,7 @@ import { Input } from "../primitives/input.js";
 import { authMessage } from "../auth/auth-messages.js";
 import { Button } from "../primitives/button.js";
 import { BackupCodes } from "./backup-codes.js";
-import { CodeInput } from "../auth/code-input.js";
+import { OtpInput } from "../primitives/otp-input.js";
 import { TotpQr, totpKey } from "./totp-qr.js";
 import { useState } from "react";
 import { AuthError } from "@protobase/client";
@@ -49,8 +49,8 @@ const TwoFactorSetup = ({ offerEmailedCodes, needsPassword, onStartApp, onConfir
 			setup: await onStartApp(given)
 		});
 	});
-	const confirm = (setup) => attempt(async () => {
-		await onConfirmApp(code.trim());
+	const confirm = (setup, entered = code) => attempt(async () => {
+		await onConfirmApp(entered);
 		setStep({
 			kind: "backup-codes",
 			codes: setup.backupCodes
@@ -103,13 +103,14 @@ const TwoFactorSetup = ({ offerEmailedCodes, needsPassword, onStartApp, onConfir
 			}),
 			/* @__PURE__ */ jsxs("label", {
 				className: "flex flex-col gap-1.5 text-[13px] font-medium",
-				children: ["Code from the app", /* @__PURE__ */ jsx(CodeInput, {
+				children: ["Code from the app", /* @__PURE__ */ jsx(OtpInput, {
 					name: "code",
 					required: true,
 					autoFocus: true,
 					value: code,
 					invalid: Boolean(error),
-					onChange: (event) => setCode(event.target.value)
+					onChange: setCode,
+					onComplete: (complete) => !busy && void confirm(step.setup, complete)
 				})]
 			}),
 			errorLine,

package/dist/app/app.js

@@ -169,12 +169,13 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 		recordKey: address.key
 	}, `${address.resource}/${address.key}`) : /* @__PURE__ */ jsx(ListPage, { address }, address.resource);
 	const appShell = /* @__PURE__ */ jsx(AppShell, {
+		pageScroll: true,
 		sidebarMode: sidebarMode ?? "text-small",
 		activeItem: place ?? "",
 		breadcrumb,
 		user: acting && userToShell(acting),
 		onSignOut: user && (() => void signOut()),
-		onSignIn: user ? void 0 : () => signIn.open(),
+		signIn: user ? void 0 : signIn.link(),
 		workspace: current?.organization?.name ?? workspace,
 		navGroups: groups,
 		bottomBar: bottomBarFromMeta(meta, basePath, place),

package/dist/app/create/create-page.js

@@ -117,6 +117,7 @@ const LoadedCreate = ({ resource, values }) => {
 				help: view?.fields[name]?.help,
 				required: isRequired(field),
 				error: errors[name],
+				wide: Boolean(view?.fields[name]?.multiline),
 				editor: /* @__PURE__ */ jsx(FieldEditor, {
 					field,
 					hints: view?.fields[name],

package/dist/app/create/create-record-form.js

@@ -6,7 +6,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/create/create-record-form.tsx
 /** The presentation of "New <thing>": the view's sections, each field with its editor, and Create or Cancel. */
 const CreateRecordForm = ({ noun, collection, sections, saving, message, onSubmit, onCancel }) => /* @__PURE__ */ jsx("form", {
-	className: "min-h-0 flex-1 overflow-y-auto",
+	className: "flex-1",
 	onSubmit: (event) => {
 		event.preventDefault();
 		onSubmit();
@@ -56,6 +56,7 @@ const CreateRecordForm = ({ noun, collection, sections, saving, message, onSubmi
 							required: field.required,
 							help: field.help,
 							error: field.error,
+							wide: field.wide,
 							children: field.editor
 						}, field.name))
 					})

package/dist/app/displays/custom-display.js

@@ -20,7 +20,7 @@ const CustomDisplay = ({ display, list }) => {
 	return /* @__PURE__ */ jsx(ListDisplayProvider, {
 		value: list,
 		children: /* @__PURE__ */ jsx("div", {
-			className: "min-h-0 flex-1 overflow-y-auto",
+			className: "min-w-0 flex-1 overflow-x-auto",
 			children: /* @__PURE__ */ jsx(CustomBoundary, {
 				name: display.component,
 				children: /* @__PURE__ */ jsx(Component, { ...unmarkFieldRefs(display.props ?? {}) })

package/dist/app/displays/map-display.js

@@ -11,7 +11,7 @@ import { boundsAround, worldArea } from "../map/map-area.js";
 import { keptSelection, mapPoints, stepSelection } from "./map-groups.js";
 import { useMapRecords } from "./use-map-records.js";
 import { Suspense, lazy, useLayoutEffect, useRef, useState } from "react";
-import { ChevronLeft, ChevronRight, X } from "lucide-react";
+import { ChevronLeft, ChevronRight, CircleDashed, X } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/displays/map-display.tsx
 const RecordsMap = lazy(() => import("../map/records-map.js").then((module) => ({ default: module.RecordsMap })));
@@ -22,7 +22,7 @@ const arrow = "flex size-8 items-center justify-center rounded-full border borde
 * in view or the map is close, else a count for each part of it, which zooms in when chosen. The map asks again as it
 * pans and zooms. Without a view of its own it first fits every matching record. Choosing a marker shows the card of
 * its record at the map's bottom, with arrows through the records the marker stands for; closing it or choosing the map
-* elsewhere clears it.
+* elsewhere clears it. A marker and a card whose record's position is approximate say so.
 */
 const MapDisplay = ({ model, view, display, filter, orderBy, fields, at, onMove, footer = true, flush = false }) => {
 	const style = useAdminMeta().maps?.style;
@@ -48,7 +48,13 @@ const MapDisplay = ({ model, view, display, filter, orderBy, fields, at, onMove,
 	const singular = (view?.names?.singular ?? humanize(model.name)).toLowerCase();
 	const selection = keptSelection(chosen, rows);
 	const row = selection && rows.find((candidate) => candidate.key === selection.keys[selection.index]);
-	const markerLabel = (keys) => keys.length === 1 ? `Show the ${singular}` : `Show ${keys.length} ${plural}`;
+	const approximate = new Set(points.filter((point) => point.approximate).map((point) => point.key));
+	const markerLabel = (keys) => {
+		const near = keys.filter((key) => approximate.has(key)).length;
+		if (keys.length === 1) return near === 1 ? `Show the ${singular}, at an approximate position` : `Show the ${singular}`;
+		if (near === 0) return `Show ${keys.length} ${plural}`;
+		return near === keys.length ? `Show ${keys.length} ${plural}, at approximate positions` : `Show ${keys.length} ${plural}, ${near} at approximate positions`;
+	};
 	const bucketLabel = (count) => `Zoom in on ${count.toLocaleString("en-IE")} ${count === 1 ? singular : plural}`;
 	const overlay = useRef(null);
 	const [covered, setCovered] = useState(0);
@@ -112,46 +118,56 @@ const MapDisplay = ({ model, view, display, filter, orderBy, fields, at, onMove,
 						"aria-label": `Chosen ${singular}`,
 						children: [/* @__PURE__ */ jsxs("div", {
 							className: "flex items-center justify-end gap-1.5",
-							children: [selection.keys.length > 1 && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-								/* @__PURE__ */ jsx("button", {
-									type: "button",
-									"aria-label": "Previous",
-									className: arrow,
-									onClick: () => setChosen(stepSelection(selection, -1)),
-									children: /* @__PURE__ */ jsx(ChevronLeft, {
-										className: "size-4",
+							children: [
+								approximate.has(row.key) && /* @__PURE__ */ jsxs("span", {
+									className: "mr-auto flex items-center gap-1 rounded-full border border-border bg-background px-2 py-1 text-xs",
+									children: [/* @__PURE__ */ jsx(CircleDashed, {
+										className: "size-3.5",
 										"aria-hidden": true
-									})
-								}),
-								/* @__PURE__ */ jsxs("span", {
-									className: "rounded-full border border-border bg-background px-2 py-1 text-xs tabular-nums",
-									"aria-live": "polite",
-									children: [
-										selection.index + 1,
-										" / ",
-										selection.keys.length
-									]
+									}), "Approximate position"]
 								}),
+								selection.keys.length > 1 && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+									/* @__PURE__ */ jsx("button", {
+										type: "button",
+										"aria-label": "Previous",
+										className: arrow,
+										onClick: () => setChosen(stepSelection(selection, -1)),
+										children: /* @__PURE__ */ jsx(ChevronLeft, {
+											className: "size-4",
+											"aria-hidden": true
+										})
+									}),
+									/* @__PURE__ */ jsxs("span", {
+										className: "rounded-full border border-border bg-background px-2 py-1 text-xs tabular-nums",
+										"aria-live": "polite",
+										children: [
+											selection.index + 1,
+											" / ",
+											selection.keys.length
+										]
+									}),
+									/* @__PURE__ */ jsx("button", {
+										type: "button",
+										"aria-label": "Next",
+										className: arrow,
+										onClick: () => setChosen(stepSelection(selection, 1)),
+										children: /* @__PURE__ */ jsx(ChevronRight, {
+											className: "size-4",
+											"aria-hidden": true
+										})
+									})
+								] }),
 								/* @__PURE__ */ jsx("button", {
 									type: "button",
-									"aria-label": "Next",
+									"aria-label": "Close",
 									className: arrow,
-									onClick: () => setChosen(stepSelection(selection, 1)),
-									children: /* @__PURE__ */ jsx(ChevronRight, {
+									onClick: () => setChosen(void 0),
+									children: /* @__PURE__ */ jsx(X, {
 										className: "size-4",
 										"aria-hidden": true
 									})
 								})
-							] }), /* @__PURE__ */ jsx("button", {
-								type: "button",
-								"aria-label": "Close",
-								className: arrow,
-								onClick: () => setChosen(void 0),
-								children: /* @__PURE__ */ jsx(X, {
-									className: "size-4",
-									"aria-hidden": true
-								})
-							})]
+							]
 						}), /* @__PURE__ */ jsx("div", {
 							className: "shadow-lg",
 							children: /* @__PURE__ */ jsx(RecordCard, {

package/dist/app/displays/map-groups.js

@@ -1,12 +1,21 @@
 import { recordPosition } from "../map/record-position.js";
+import { isApproximate, positionArea } from "../map/approximate-position.js";
 //#region src/app/displays/map-groups.ts
-/** The rows with a position, in their order; a row without one is not on the map. */
+/** The rows with a position, in their order, approximate ones marked with their area; a row without one is not on the map. */
 const mapPoints = (rows, fields) => rows.flatMap((row) => {
 	const position = recordPosition(row.record, fields);
-	return position ? [{
+	if (!position) return [];
+	if (!isApproximate(row.record, fields)) return [{
 		key: row.key,
 		...position
-	}] : [];
+	}];
+	const area = positionArea(row.record, fields, position);
+	return [{
+		key: row.key,
+		...position,
+		approximate: true,
+		...area && { area }
+	}];
 });
 /**
 * The markers for the points as the map draws them: in order, each point joins the first marker within `radius` pixels

package/dist/app/displays/measured-heights.js

@@ -0,0 +1,23 @@
+//#region src/app/displays/measured-heights.ts
+/** How many card widths the list remembers a measured height for. */
+const remembered = 8;
+/**
+* `heights` with a card `height` tall measured at `width`, kept at the taller of it and the height measured there
+* before, and `heights` itself when that changes nothing. A width the list comes back to, as with and without a
+* scrollbar, keeps its height instead of falling back to a guess: a guess shorter than the cards shrinks the list, which
+* can take the scrollbar away, widen the cards back, and measure them taller again, every frame.
+*/
+const withMeasuredHeight = (heights, width, height) => {
+	const current = heights.get(width);
+	if (current !== void 0 && current >= height) return heights;
+	const next = new Map(heights);
+	next.delete(width);
+	next.set(width, height);
+	for (const oldest of next.keys()) {
+		if (next.size <= remembered) break;
+		next.delete(oldest);
+	}
+	return next;
+};
+//#endregion
+export { withMeasuredHeight };

package/dist/app/displays/record-card.js

@@ -99,7 +99,7 @@ const RecordCard = ({ model, view, display, row, swipe = true }) => {
 			})]
 		}),
 		subtitle !== void 0 && /* @__PURE__ */ jsx("span", {
-			className: "truncate text-muted-foreground",
+			className: view?.fields[subtitle]?.multiline ? "line-clamp-3 whitespace-pre-line break-words text-muted-foreground" : "truncate text-muted-foreground",
 			children: shownValue(subtitle)
 		}),
 		shownAmount !== void 0 && /* @__PURE__ */ jsx("span", {
@@ -155,7 +155,7 @@ const RecordCard = ({ model, view, display, row, swipe = true }) => {
 			cover,
 			swipe,
 			children: card
-		}) : card(/* @__PURE__ */ jsx(CardImage, { value: cover })), favorite && /* @__PURE__ */ jsx(FavoriteButton, {
+		}, row.key) : card(/* @__PURE__ */ jsx(CardImage, { value: cover })), favorite && /* @__PURE__ */ jsx(FavoriteButton, {
 			favorite,
 			recordKey: row.key,
 			target: recordKey(model, row.record),

package/dist/app/displays/virtual-cards.js

@@ -1,7 +1,9 @@
 import { Skeleton } from "../../primitives/skeleton.js";
 import { usePagedRows } from "../../data-grid/use-paged-rows.js";
 import { useVirtualRows } from "../../data-grid/use-virtual-rows.js";
+import { createFlipGuard } from "../../lib/flip-guard.js";
 import { anchoredTop, cardColumns, cardWidth, recordRange } from "./card-layout.js";
+import { withMeasuredHeight } from "./measured-heights.js";
 import { useCallback, useLayoutEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/app/displays/virtual-cards.tsx
@@ -9,7 +11,7 @@ import { jsx } from "react/jsx-runtime";
 * Cards in rows as wide as the list, scrolled like the table by the page or the nearest scrolling ancestor: the list is
 * as tall as all its rows, only the rows in view are drawn, and the records are loaded in the table's pages, so a
 * change of width keeps the loaded pages and the first record in view. Every card in a width is as tall as the tallest
-* drawn so far.
+* drawn so far at that width.
 */
 const VirtualCards = ({ source, label, initialIndex, onScrollIndex, minHeight, children }) => {
 	const { total } = source;
@@ -17,11 +19,8 @@ const VirtualCards = ({ source, label, initialIndex, onScrollIndex, minHeight, c
 	const [width, setWidth] = useState(0);
 	const columns = cardColumns(width);
 	const itemWidth = cardWidth(width, columns);
-	const [measured, setMeasured] = useState({
-		width: 0,
-		height: 0
-	});
-	const itemHeight = Math.ceil(Math.max(minHeight(itemWidth), measured.width === itemWidth ? measured.height : 0));
+	const [measured, setMeasured] = useState(() => /* @__PURE__ */ new Map());
+	const itemHeight = Math.ceil(Math.max(minHeight(itemWidth), measured.get(itemWidth) ?? 0));
 	const rowHeight = itemHeight + 12;
 	const layout = {
 		columns,
@@ -33,7 +32,7 @@ const VirtualCards = ({ source, label, initialIndex, onScrollIndex, minHeight, c
 	});
 	const changed = anchor.current.top > 0 && (anchor.current.layout.columns !== columns || anchor.current.layout.rowHeight !== rowHeight);
 	const settle = (top) => changed ? anchoredTop(anchor.current.top, anchor.current.layout, layout) : top;
-	const ready = itemWidth > 0 && measured.width === itemWidth;
+	const ready = itemWidth > 0 && measured.has(itemWidth);
 	const scroll = useVirtualRows({
 		total: Math.ceil(total / columns),
 		rowHeight,
@@ -56,23 +55,22 @@ const VirtualCards = ({ source, label, initialIndex, onScrollIndex, minHeight, c
 		loadRows: source.loadRows,
 		latencyMs: 0
 	}, range.start, range.end);
+	const [guard] = useState(() => createFlipGuard());
 	useLayoutEffect(() => {
 		const body = scroll.ref.current;
 		if (!body) return;
-		const observer = new ResizeObserver(() => setWidth(body.clientWidth));
+		const update = () => setWidth(guard(body.clientWidth, performance.now()));
+		const observer = new ResizeObserver(update);
 		observer.observe(body);
-		setWidth(body.clientWidth);
+		update();
 		return () => observer.disconnect();
-	}, []);
+	}, [guard]);
 	const widthRef = useRef(itemWidth);
 	widthRef.current = itemWidth;
 	const [observer] = useState(() => new ResizeObserver((entries) => {
 		const tallest = Math.max(...entries.map((entry) => entry.borderBoxSize[0]?.blockSize ?? entry.contentRect.height));
 		const at = widthRef.current;
-		setMeasured((current) => current.width === at && current.height >= tallest ? current : {
-			width: at,
-			height: Math.max(tallest, current.width === at ? current.height : 0)
-		});
+		setMeasured((current) => withMeasuredHeight(current, at, tallest));
 	}));
 	useLayoutEffect(() => () => observer.disconnect(), [observer]);
 	const observe = useCallback((item) => {

package/dist/app/field-editor.js

@@ -1,6 +1,7 @@
 import { cn } from "../lib/cn.js";
 import { Input } from "../primitives/input.js";
 import { Switch } from "../primitives/switch.js";
+import { Textarea } from "../primitives/textarea.js";
 import { displayValue } from "../live/display-value.js";
 import { AppLink } from "./use-app-address.js";
 import { RelationPicker } from "./relation-picker.js";
@@ -68,8 +69,9 @@ const BuiltInEditor = ({ field, hints, value, stored, relationLabel, relationTo,
 			}) : label
 		});
 	}
+	const multiline = Boolean(hints?.multiline) && field.type === "text";
 	if (!isEditable(field) || locked) return /* @__PURE__ */ jsx("div", {
-		className: cn("py-1.5 text-[13px] tabular-nums", field.type === "decimal" || field.type === "integer" ? "font-medium" : "text-muted-foreground"),
+		className: cn("py-1.5 text-[13px] tabular-nums", field.type === "decimal" || field.type === "integer" ? "font-medium" : "text-muted-foreground", multiline && "whitespace-pre-line break-words"),
 		children: displayValue(field, stored, hints)
 	});
 	if (field.type === "enum") return /* @__PURE__ */ jsxs("select", {
@@ -84,6 +86,12 @@ const BuiltInEditor = ({ field, hints, value, stored, relationLabel, relationTo,
 			children: enumLabel(option, hints?.valueLabels)
 		}, option))]
 	});
+	if (multiline) return /* @__PURE__ */ jsx(Textarea, {
+		invalid,
+		placeholder,
+		value: String(value),
+		onChange: (event) => onChange(event.target.value)
+	});
 	return /* @__PURE__ */ jsx(Input, {
 		invalid,
 		leading: hints?.prefix ? /* @__PURE__ */ jsx("span", {

package/dist/app/index.html

@@ -16,8 +16,8 @@
     </script>
   </head>
   <body>
-    <!-- The page reaches under the iPhone home indicator, which the bottom bar keeps clear of; the sides keep clear of the notch. -->
-    <div id="root" class="h-screen" style="padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right)"></div>
+    <!-- As tall as the screen shows, browser toolbars aside, so a page that fills it, such as a map, keeps the bottom bar in view. The page reaches under the iPhone home indicator, which the bottom bar keeps clear of; the sides keep clear of the notch. -->
+    <div id="root" class="h-dvh" style="padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right)"></div>
     <script type="module" src="./main"></script>
   </body>
 </html>

package/dist/app/list-page.js

@@ -45,8 +45,8 @@ import { SavedSearches } from "./searches/saved-searches.js";
 import { useMemo, useState } from "react";
 import { Plus, SlidersHorizontal } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { tableDisplay } from "@protobase/schema/internal";
 import { createWhere } from "@protobase/schema";
+import { tableDisplay } from "@protobase/schema/internal";
 //#region src/app/list-page.tsx
 const where = createWhere();
 const searchText = (extras) => extras.find((clause) => clause.kind === "search");
@@ -141,7 +141,7 @@ const LoadedList = ({ model, address, scope, heading }) => {
 		orderBy
 	});
 	const display = shownDisplay(view, address.display);
-	const pageScroll = !display || display.kind === "cards";
+	const pageScroll = display?.kind !== "map";
 	usePageScroll(pageScroll);
 	const displayRows = useDisplayRows(model, rows.page, rows.key, display?.kind === "custom");
 	const scroll = useListScroll();

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

@@ -0,0 +1,76 @@
+import { numeric } from "./record-position.js";
+//#region src/app/map/approximate-position.ts
+const earthRadius = 6371008.8;
+const circleCorners = 64;
+/** Whether the record's position is approximate, as its field states; without one, or a value that says neither, it is not. */
+const isApproximate = (record, fields) => {
+	if (fields.approximate !== void 0) return record[fields.approximate] === true;
+	if (fields.exact !== void 0) return record[fields.exact] === false;
+	return false;
+};
+/** The polygon of `metres` around `center`, its corners as far from it along the globe. */
+const circleArea = (center, metres) => {
+	const distance = metres / earthRadius;
+	const latitude = center.latitude * Math.PI / 180;
+	const longitude = center.longitude * Math.PI / 180;
+	return {
+		type: "Polygon",
+		coordinates: [Array.from({ length: 65 }, (_, index) => {
+			const bearing = index % circleCorners / circleCorners * 2 * Math.PI;
+			const to = Math.asin(Math.sin(latitude) * Math.cos(distance) + Math.cos(latitude) * Math.sin(distance) * Math.cos(bearing));
+			return [(longitude + Math.atan2(Math.sin(bearing) * Math.sin(distance) * Math.cos(latitude), Math.cos(distance) - Math.sin(latitude) * Math.sin(to))) * 180 / Math.PI, to * 180 / Math.PI];
+		})]
+	};
+};
+const isPosition = (value) => Array.isArray(value) && value.length >= 2 && typeof value[0] === "number" && typeof value[1] === "number" && Math.abs(value[0]) <= 180 && Math.abs(value[1]) <= 90;
+const isLine = (value, least) => Array.isArray(value) && value.length >= least && value.every(isPosition);
+const isPolygon = (value) => Array.isArray(value) && value.length > 0 && value.every((ring) => isLine(ring, 4));
+const isLines = (value) => Array.isArray(value) && value.length > 0 && value.every((line) => isLine(line, 2));
+const parsed = (value) => {
+	if (typeof value !== "string") return value;
+	try {
+		return JSON.parse(value);
+	} catch (error) {
+		if (error instanceof SyntaxError) return void 0;
+		throw error;
+	}
+};
+/** The GeoJSON polygon or line a value holds, as a geometry or a feature of one; none for anything else, such as a point or text that is no GeoJSON. */
+const areaGeometry = (value) => {
+	const data = parsed(value);
+	if (typeof data !== "object" || data === null) return void 0;
+	const geometry = data.type === "Feature" ? data.geometry : data;
+	if (typeof geometry !== "object" || geometry === null) return void 0;
+	const { type, coordinates } = geometry;
+	if (type === "Polygon" && isPolygon(coordinates)) return {
+		type,
+		coordinates
+	};
+	if (type === "MultiPolygon" && Array.isArray(coordinates) && coordinates.length > 0 && coordinates.every(isPolygon)) return {
+		type,
+		coordinates
+	};
+	if (type === "LineString" && isLine(coordinates, 2)) return {
+		type,
+		coordinates
+	};
+	if (type === "MultiLineString" && isLines(coordinates)) return {
+		type,
+		coordinates
+	};
+};
+/**
+* What the map draws around the record's approximate position: the area its field holds, else a circle of the radius
+* its field holds, else one of the display's default radius. An exact position, or one whose record states none of
+* them on a display without a default, has none.
+*/
+const positionArea = (record, fields, position) => {
+	if (!isApproximate(record, fields)) return void 0;
+	const area = fields.area === void 0 ? void 0 : areaGeometry(record[fields.area]);
+	if (area) return area;
+	const radius = fields.radius === void 0 ? void 0 : numeric(record[fields.radius]);
+	if (radius !== void 0 && Number.isFinite(radius) && radius > 0) return circleArea(position, radius);
+	return fields.defaultRadius === void 0 ? void 0 : circleArea(position, fields.defaultRadius);
+};
+//#endregion
+export { areaGeometry, circleArea, isApproximate, positionArea };

package/dist/app/map/area-features.js

@@ -0,0 +1,80 @@
+//#region src/app/map/area-features.ts
+const worldPixels = 512;
+const mercatorLimit = 85.051129;
+const fadeFrom = 16;
+const zooms = Array.from({ length: 23 }, (_, zoom) => zoom);
+const positionsOf = (geometry) => {
+	if (geometry.type === "LineString") return geometry.coordinates;
+	if (geometry.type === "MultiPolygon") return geometry.coordinates.flat(2);
+	return geometry.coordinates.flat();
+};
+const mercatorY = (latitude) => {
+	const radians = Math.max(-85.051129, Math.min(mercatorLimit, latitude)) * Math.PI / 180;
+	return .5 - Math.log(Math.tan(Math.PI / 4 + radians / 2)) / (2 * Math.PI);
+};
+/** How many pixels across the area is drawn at zoom 0, the larger of its width and height; twice as many each zoom level in. */
+const zoomZeroSpan = (geometry) => {
+	const positions = positionsOf(geometry);
+	const longitudes = positions.map(([longitude]) => longitude);
+	const ys = positions.map(([, latitude]) => mercatorY(latitude));
+	const width = (Math.max(...longitudes) - Math.min(...longitudes)) / 360 * worldPixels;
+	const height = (Math.max(...ys) - Math.min(...ys)) * worldPixels;
+	return Math.max(width, height);
+};
+/** The areas of the points that have one, those of the chosen records last so they are drawn on top. */
+const areaFeatures = (points, selected) => {
+	const features = points.flatMap((point) => {
+		if (!point.area) return [];
+		const kind = point.area.type === "LineString" || point.area.type === "MultiLineString" ? "line" : "polygon";
+		return [{
+			type: "Feature",
+			geometry: point.area,
+			properties: {
+				key: point.key,
+				kind,
+				span: zoomZeroSpan(point.area),
+				chosen: selected?.includes(point.key) ?? false
+			}
+		}];
+	});
+	return {
+		type: "FeatureCollection",
+		features: [...features.filter((feature) => !feature.properties.chosen), ...features.filter((feature) => feature.properties.chosen)]
+	};
+};
+/**
+* An opacity of `full` for an area drawn large enough to mean something at the zoom, fading in as it grows to that
+* size: at each whole zoom level its share of `full` follows from its span, and MapLibre blends between the levels.
+*/
+const fadeIn = (full) => [
+	"interpolate",
+	["linear"],
+	["zoom"],
+	...zooms.flatMap((zoom) => [zoom, [
+		"*",
+		full,
+		[
+			"min",
+			1,
+			[
+				"max",
+				0,
+				[
+					"/",
+					[
+						"-",
+						[
+							"*",
+							["get", "span"],
+							2 ** zoom
+						],
+						fadeFrom
+					],
+					32
+				]
+			]
+		]
+	]])
+];
+//#endregion
+export { areaFeatures, fadeIn, zoomZeroSpan };

package/dist/app/map/maplibre.js

@@ -0,0 +1,11 @@
+import * as maplibre from "maplibre-gl";
+import workerUrl from "maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url";
+import "maplibre-gl/dist/maplibre-gl.css";
+import { Protocol } from "pmtiles";
+//#region src/app/map/maplibre.ts
+maplibre.setWorkerUrl(workerUrl);
+maplibre.addProtocol("pmtiles", new Protocol().tile);
+/** MapLibre, set up to run its worker and read PMTiles archives: what a map draws with. */
+const mapLib = maplibre;
+//#endregion
+export { mapLib };