@protobase/ui 0.12.21 → 0.13.0

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

@@ -0,0 +1,19 @@
+/** How many cards fit across `width`, as a grid of `repeat(auto-fill, minmax(15rem, 1fr))` would place them. */
+const cardColumns = (width) => Math.max(1, Math.floor((width + 12) / 252));
+const cardWidth = (width, columns) => Math.max(0, (width - (columns - 1) * 12) / columns);
+/** The records the card rows `first` to `last` hold, as a first and last record index. */
+const recordRange = (first, last, columns, total) => ({
+	start: first * columns,
+	end: Math.max(0, Math.min(total, (last + 1) * columns) - 1)
+});
+/**
+* The scroll offset after a layout change that keeps the same records in view: the same place in the same row when
+* only the row height changed, else the row now holding the first record of the row that was at the top.
+*/
+const anchoredTop = (top, before, after) => {
+	const row = top / before.rowHeight;
+	if (before.columns === after.columns) return row * after.rowHeight;
+	return Math.floor(Math.floor(row) * before.columns / after.columns) * after.rowHeight;
+};
+//#endregion
+export { anchoredTop, cardColumns, cardWidth, recordRange };

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

@@ -1,84 +1,15 @@
-import { Badge } from "../../primitives/badge.js";
+import { cn } from "../../lib/cn.js";
 import { Skeleton } from "../../primitives/skeleton.js";
 import { humanize } from "../../live/naming.js";
-import { useProjectUi } from "../pages/project-ui.js";
-import { cardFields, filledMeta } from "./list-displays.js";
-import { AppLink } from "../use-app-address.js";
-import { fileShown, isPreviewable } from "../../live/file-values.js";
-import { displayValue } from "../../live/display-value.js";
-import { shownWidget } from "../field-types/shown-widget.js";
-import { CustomBoundary } from "../pages/custom-boundary.js";
-import { WidgetPart } from "../field-types/widget-part.js";
-import { namedIcon } from "../named-icon.js";
-import { ValueBadge } from "../value-badge.js";
-import { CardCarousel } from "./card-carousel.js";
+import { RecordCard } from "./record-card.js";
 import { DisplayFooter, DisplayState } from "./display-frame.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/displays/cards-display.tsx
 const grid = "grid grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] gap-3";
-const CardImage = ({ value }) => {
-	const file = fileShown(value);
-	const url = file && "url" in file && typeof file.url === "string" && isPreviewable(file.type) ? file.url : void 0;
-	return /* @__PURE__ */ jsx("span", {
-		className: "-mx-3 -mt-3 mb-1.5 block aspect-[4/3] overflow-hidden rounded-t-lg border-b border-border bg-muted",
-		children: url && /* @__PURE__ */ jsx("img", {
-			src: url,
-			alt: "",
-			loading: "lazy",
-			className: "size-full object-cover"
-		})
-	});
-};
-const MetaValue = ({ icon, children }) => {
-	const Icon = namedIcon(icon);
-	return /* @__PURE__ */ jsxs("dd", {
-		className: "flex items-center gap-1 tabular-nums",
-		children: [Icon && /* @__PURE__ */ jsx(Icon, {
-			className: "size-3.5 shrink-0",
-			"aria-hidden": true
-		}), children]
-	});
-};
-/**
-* A card per record, opening its page: its image across the top, with arrows through its photos when the display names
-* them, the title over the subtitle, the badge beside it, small meta fields below, those with a value, and the labels of
-* its flags that are true; or, with a `card` component, what it draws of the row, the built-in content again when it is
-* missing or throws.
-*/
-const CardsDisplay = ({ model, view, display, list }) => {
-	const { image, title, subtitle, badge, meta, flags } = cardFields(model, view, display);
-	const label = (name) => view?.fields[name]?.label ?? humanize(name);
-	const text = (row, name) => {
-		const field = model.fields[name];
-		if (!field) return "";
-		return row.labels[name] ?? displayValue(field, row.record[name], view?.fields[name]);
-	};
-	const { fields: fieldTypes, components } = useProjectUi();
-	const Card = display.card === void 0 ? void 0 : components?.[display.card];
-	const shownValue = (row, name) => {
-		const field = model.fields[name];
-		const shown = field && shownWidget(fieldTypes, field, view?.fields[name]);
-		return shown ? /* @__PURE__ */ jsx(WidgetPart, {
-			shown,
-			part: "display",
-			field,
-			value: row.record[name],
-			fallback: text(row, name)
-		}) : text(row, name);
-	};
-	const metaValue = (row, name) => {
-		const field = model.fields[name];
-		const hints = view?.fields[name];
-		const value = row.record[name];
-		if (!field || hints?.format !== "badge" || shownWidget(fieldTypes, field, hints) || value === null || value === void 0 || value === "") return shownValue(row, name);
-		return /* @__PURE__ */ jsx(ValueBadge, {
-			value,
-			hints,
-			children: text(row, name)
-		});
-	};
+const scroller = "flex snap-x snap-mandatory gap-3 overflow-x-auto pb-1";
+/** A card per record (see `RecordCard`), in a grid or a row, with how many match and a button for more below. */
+const CardsDisplay = ({ model, view, display, list, row = false, footer = true }) => {
 	const plural = (view?.names?.plural ?? humanize(model.name)).toLowerCase();
-	const photos = Card ? void 0 : display.photos;
 	return /* @__PURE__ */ jsxs(DisplayState, {
 		list,
 		empty: `No ${plural} match.`,
@@ -87,75 +18,18 @@ const CardsDisplay = ({ model, view, display, list }) => {
 			children: Array.from({ length: 6 }, (_, index) => /* @__PURE__ */ jsx(Skeleton, { className: "h-24" }, index))
 		}),
 		children: [/* @__PURE__ */ jsx("ul", {
-			className: grid,
+			className: row ? scroller : grid,
 			"aria-label": view?.names?.plural ?? humanize(model.name),
-			children: list.rows.map((row) => {
-				const status = badge === void 0 ? void 0 : row.record[badge];
-				const raised = flags.filter((name) => row.record[name] === true);
-				const cover = image === void 0 ? void 0 : row.record[image];
-				const builtIn = (photo) => /* @__PURE__ */ jsxs(Fragment, { children: [
-					(image !== void 0 || photos !== void 0) && /* @__PURE__ */ jsx(CardImage, { value: photo }),
-					/* @__PURE__ */ jsxs("span", {
-						className: "flex items-start justify-between gap-2",
-						children: [/* @__PURE__ */ jsx("span", {
-							className: "min-w-0 truncate font-medium",
-							children: shownValue(row, title)
-						}), badge !== void 0 && status !== null && status !== void 0 && /* @__PURE__ */ jsx(ValueBadge, {
-							value: status,
-							hints: view?.fields[badge],
-							children: text(row, badge)
-						})]
-					}),
-					subtitle !== void 0 && /* @__PURE__ */ jsx("span", {
-						className: "truncate text-muted-foreground",
-						children: shownValue(row, subtitle)
-					}),
-					meta.length > 0 && /* @__PURE__ */ jsx("dl", {
-						className: "mt-auto flex flex-wrap items-center gap-x-3 gap-y-0.5 pt-1 text-xs text-muted-foreground",
-						children: filledMeta(row, meta).map((name) => /* @__PURE__ */ jsxs("div", {
-							className: "flex gap-1",
-							children: [/* @__PURE__ */ jsx("dt", {
-								className: "sr-only",
-								children: label(name)
-							}), /* @__PURE__ */ jsx(MetaValue, {
-								icon: view?.fields[name]?.icon,
-								children: metaValue(row, name)
-							})]
-						}, name))
-					}),
-					raised.length > 0 && /* @__PURE__ */ jsx("ul", {
-						className: "flex flex-wrap gap-1",
-						"aria-label": "Features",
-						children: raised.map((name) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Badge, {
-							dot: false,
-							children: label(name)
-						}) }, name))
-					})
-				] });
-				const card = (photo) => /* @__PURE__ */ jsx(AppLink, {
-					to: {
-						kind: "record",
-						resource: model.name,
-						key: row.key
-					},
-					className: "flex h-full flex-col gap-1.5 rounded-lg border border-border bg-background p-3 text-[13px] hover:border-border-strong hover:bg-surface focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30",
-					children: Card ? /* @__PURE__ */ jsx(CustomBoundary, {
-						name: display.card,
-						fallback: builtIn(photo),
-						children: /* @__PURE__ */ jsx(Card, { row })
-					}) : builtIn(photo)
-				});
-				return /* @__PURE__ */ jsx("li", {
-					className: photos ? "group/card relative" : void 0,
-					children: photos ? /* @__PURE__ */ jsx(CardCarousel, {
-						photos,
-						recordKey: row.key,
-						cover,
-						children: card
-					}) : card(cover)
-				}, row.key);
-			})
-		}), /* @__PURE__ */ jsx(DisplayFooter, { list })]
+			children: list.rows.map((record) => /* @__PURE__ */ jsx("li", {
+				className: cn(row && "w-64 shrink-0 snap-start"),
+				children: /* @__PURE__ */ jsx(RecordCard, {
+					model,
+					view,
+					display,
+					row: record
+				})
+			}, record.key))
+		}), footer && /* @__PURE__ */ jsx(DisplayFooter, { list })]
 	});
 };
 //#endregion

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

@@ -4,7 +4,7 @@ import { displayChoices, sortFields } from "./list-displays.js";
 import { parseSort } from "../list-order.js";
 import { MenuSelect } from "../../primitives/menu-select.js";
 import { Segmented } from "../../primitives/segmented.js";
-import { Calendar, Columns3, LayoutGrid, List, SquareKanban, Table2 } from "lucide-react";
+import { Calendar, Columns3, LayoutGrid, List, Map, SquareKanban, Table2 } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/displays/display-controls.tsx
 /** The icons a display's `icon` may name; another name shows the label alone. */
@@ -14,7 +14,8 @@ const icons = {
 	kanban: SquareKanban,
 	board: Columns3,
 	list: List,
-	calendar: Calendar
+	calendar: Calendar,
+	map: Map
 };
 /**
 * The list page's switch between the table and the view's displays, as buttons or, on a phone, as a menu; nothing for a

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

@@ -0,0 +1,50 @@
+import { Skeleton } from "../../primitives/skeleton.js";
+import { humanize } from "../../live/naming.js";
+import { displayRow } from "./list-displays.js";
+import { ErrorBanner } from "../error-banner.js";
+import { RecordCard } from "./record-card.js";
+import { VirtualCards } from "./virtual-cards.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/displays/list-cards.tsx
+const grid = "grid grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] gap-3";
+const pictureHeight = (width) => width * .75;
+const plainHeight = 44;
+/**
+* The list page's cards display: a card per record (see `RecordCard`), scrolled like the table, with which of the
+* matching records are in view below. An embedded list, which shows a few cards whole, draws them with `CardsDisplay`.
+*/
+const ListCards = ({ model, view, display, list }) => {
+	const plural = view?.names?.plural ?? humanize(model.name);
+	const pictured = display.card === void 0 && (display.image !== void 0 || display.photos !== void 0);
+	if (list.isLoading) return /* @__PURE__ */ jsx("div", {
+		className: `min-h-0 flex-1 overflow-hidden ${grid}`,
+		children: Array.from({ length: 6 }, (_, index) => /* @__PURE__ */ jsx(Skeleton, { className: "h-24" }, index))
+	});
+	if (list.error) return /* @__PURE__ */ jsx(ErrorBanner, {
+		title: "Could not load rows",
+		error: list.error
+	});
+	if (!list.source || list.source.total === 0) return /* @__PURE__ */ jsxs("p", {
+		className: "py-8 text-center text-[13px] text-muted-foreground",
+		children: [
+			"No ",
+			plural.toLowerCase(),
+			" match."
+		]
+	});
+	return /* @__PURE__ */ jsx(VirtualCards, {
+		source: list.source,
+		label: plural,
+		initialIndex: list.initialIndex,
+		onScrollIndex: list.onScrollIndex,
+		minHeight: (width) => (pictured ? pictureHeight(width) : 0) + plainHeight,
+		children: (row) => /* @__PURE__ */ jsx(RecordCard, {
+			model,
+			view,
+			display,
+			row: displayRow(model, row)
+		})
+	});
+};
+//#endregion
+export { ListCards };

package/dist/app/displays/list-displays.d.ts

@@ -1,4 +1,4 @@
-import { ResourceModel, ViewModel } from "@protobase/schema";
+import { FieldModel, ResourceModel, ViewModel } from "@protobase/schema";
 //#region src/app/displays/list-displays.d.ts
 /** A row as a list display gets it: its key, the record as the list API gives it, and names of the records its relations point at. */
 export type ListDisplayRow = {

package/dist/app/displays/list-displays.js

@@ -1,14 +1,16 @@
 import { recordKey, recordTitleField } from "../../live/model-helpers.js";
 import { humanize } from "../../live/naming.js";
+import { displayValue } from "../../live/display-value.js";
 import { encodeKey, tableDisplay } from "@protobase/schema";
 //#region src/app/displays/list-displays.ts
 const displaysOf = (view) => view?.list?.displays ?? [];
 /**
 * The display a list opens in when its address names none. Below the `sm` breakpoint a list with a cards display opens
-* in one: the view's default when that is a cards display, else the first. Otherwise the view's default, or the table.
+* in one: `preferred` or the view's default when that is a cards display, else the first. Otherwise `preferred`, the
+* view's default, or the table.
 */
-const defaultDisplay = (view, xs) => {
-	const fallback = view?.list?.default ?? tableDisplay;
+const defaultDisplay = (view, xs, preferred) => {
+	const fallback = preferred ?? view?.list?.default ?? tableDisplay;
 	if (!xs) return fallback;
 	const cards = displaysOf(view).filter((display) => display.kind === "cards");
 	return cards.find((display) => display.name === fallback)?.name ?? cards[0]?.name ?? fallback;
@@ -19,6 +21,10 @@ const shownDisplay = (view, name) => {
 	const named = (wanted) => displaysOf(view).find((display) => display.name === wanted);
 	return named(name) ?? named(view?.list?.default);
 };
+const defaultIcons = {
+	cards: "cards",
+	map: "map"
+};
 const displayChoices = (view) => [{
 	name: tableDisplay,
 	label: "Table",
@@ -26,29 +32,57 @@ const displayChoices = (view) => [{
 }, ...displaysOf(view).map((display) => ({
 	name: display.name,
 	label: display.label ?? humanize(display.name),
-	icon: display.icon ?? (display.kind === "cards" ? "cards" : void 0)
+	icon: display.icon ?? defaultIcons[display.kind]
 }))];
 /** The fields a cards display shows, its title the view's title field when it names none. */
 const cardFields = (model, view, display) => ({
 	image: display.image,
 	title: display.title ?? recordTitleField(model, view),
 	subtitle: display.subtitle,
+	amount: display.amount ?? [],
 	badge: display.badge,
 	meta: display.meta ?? [],
+	footer: display.footer ?? [],
 	flags: display.flags ?? []
 });
 /** The meta fields a card shows for a row: those with a value, so a listing for rent only shows no purchase price. */
 const filledMeta = (row, meta) => meta.filter((name) => row.record[name] !== null && row.record[name] !== void 0 && row.record[name] !== "");
+/** The amount field a card shows for a row: the first with a value, so a listing for rent only shows its rent. */
+const filledAmount = (row, amount) => filledMeta(row, amount)[0];
+/** A card's amount split for drawing: the number with its prefix, such as `€1,450`, apart from its suffix, such as ` /month`. */
+const amountParts = (field, value, hints = {}) => {
+	const { suffix, ...unsuffixed } = hints;
+	if (!(field.type === "decimal" || field.type === "integer" || field.type === "bigint") || suffix === void 0 || hints.format === "percent") return { amount: displayValue(field, value, hints) };
+	return {
+		amount: displayValue(field, value, unsuffixed),
+		suffix
+	};
+};
+/** The cards display whose card a map shows for a record: the one it names, else the list's first, else the title alone. */
+const mapCards = (view, display) => {
+	const cards = displaysOf(view).filter((other) => other.kind === "cards");
+	return (display.cards === void 0 ? cards[0] : cards.find((other) => other.name === display.cards)) ?? {
+		kind: "cards",
+		name: display.name
+	};
+};
 /** Every field a display shows, the fields its rows are loaded and labelled for. */
 const shownFields = (model, view, display) => {
 	if (display.kind === "custom") return display.fields;
-	const { image, title, subtitle, badge, meta, flags } = cardFields(model, view, display);
+	if (display.kind === "map") return [
+		display.latitude,
+		display.longitude,
+		...shownFields(model, view, mapCards(view, display))
+	];
+	const { image, title, subtitle, amount, badge, meta, footer, flags } = cardFields(model, view, display);
 	return [
 		image,
 		title,
 		subtitle,
+		...amount,
 		badge,
 		...meta,
+		...footer,
 		...flags
 	].filter((name) => name !== void 0);
 };
@@ -75,4 +109,4 @@ const displayRow = (model, row) => {
 	};
 };
 //#endregion
-export { cardFields, defaultDisplay, displayChoices, displayRow, displaysOf, filledMeta, loadedFields, shownDisplay, shownFields, sortFields };
+export { amountParts, cardFields, defaultDisplay, displayChoices, displayRow, displaysOf, filledAmount, filledMeta, loadedFields, mapCards, shownDisplay, shownFields, sortFields };

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

@@ -0,0 +1,120 @@
+import { Skeleton } from "../../primitives/skeleton.js";
+import { humanize } from "../../live/naming.js";
+import { mapCards } from "./list-displays.js";
+import { useAdminMeta } from "../meta-gate.js";
+import { Problem } from "../pages/problem.js";
+import { RecordCard } from "./record-card.js";
+import { DisplayFooter, DisplayState } from "./display-frame.js";
+import { keptSelection, mapPoints, stepSelection } from "./map-groups.js";
+import { Suspense, lazy, useLayoutEffect, useRef, useState } from "react";
+import { ChevronLeft, ChevronRight, 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 })));
+const arrow = "flex size-8 items-center justify-center rounded-full border border-border bg-background hover:bg-surface focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30";
+/**
+* The list's loaded records on a map, drawn with the map style `/meta` names. 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. Below the map, how many of the matching records are on it and a button for more.
+*/
+const MapDisplay = ({ model, view, display, list, footer = true }) => {
+	const style = useAdminMeta().maps?.style;
+	const [chosen, setChosen] = useState();
+	const cards = mapCards(view, display);
+	const plural = (view?.names?.plural ?? humanize(model.name)).toLowerCase();
+	const selection = keptSelection(chosen, list.rows);
+	const row = selection && list.rows.find((candidate) => candidate.key === selection.keys[selection.index]);
+	const singular = (view?.names?.singular ?? humanize(model.name)).toLowerCase();
+	const markerLabel = (keys) => keys.length === 1 ? `Show the ${singular}` : `Show ${keys.length} ${plural}`;
+	const overlay = useRef(null);
+	const [covered, setCovered] = useState(0);
+	useLayoutEffect(() => setCovered(overlay.current?.offsetHeight ?? 0), [row?.key]);
+	if (!style) return /* @__PURE__ */ jsx(Problem, { children: "The map display needs a map style: set PROTOBASE_MAP_STYLE_URL." });
+	return /* @__PURE__ */ jsx(DisplayState, {
+		list,
+		empty: `No ${plural} match.`,
+		loading: /* @__PURE__ */ jsx(Skeleton, { className: "h-96" }),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex h-full min-h-[36rem] flex-col sm:min-h-[28rem]",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "relative min-h-0 flex-1 overflow-hidden rounded-lg border border-border bg-muted",
+				children: [/* @__PURE__ */ jsx(Suspense, {
+					fallback: null,
+					children: /* @__PURE__ */ jsx(RecordsMap, {
+						style,
+						points: mapPoints(list.rows, display),
+						selected: selection?.keys,
+						covered: selection ? covered : 0,
+						onSelect: (keys) => setChosen({
+							keys,
+							index: 0
+						}),
+						onClear: () => setChosen(void 0),
+						markerLabel
+					})
+				}), selection && row && /* @__PURE__ */ jsx("div", {
+					ref: overlay,
+					className: "pointer-events-none absolute inset-x-3 bottom-3 z-10 flex justify-center",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "pointer-events-auto flex w-full max-w-[16rem] flex-col gap-2 sm:max-w-xs",
+						role: "group",
+						"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",
+										"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": "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, {
+								model,
+								view,
+								display: cards,
+								row
+							})
+						})]
+					})
+				})]
+			}), footer && /* @__PURE__ */ jsx(DisplayFooter, { list })]
+		})
+	});
+};
+//#endregion
+export { MapDisplay };

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

@@ -0,0 +1,55 @@
+import { recordPosition } from "../map/record-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. */
+const mapPoints = (rows, fields) => rows.flatMap((row) => {
+	const position = recordPosition(row.record, fields);
+	return position ? [{
+		key: row.key,
+		...position
+	}] : [];
+});
+/** The south-west and north-east corners around the points, as `[longitude, latitude]`, or none without points. */
+const pointBounds = (points) => {
+	if (points.length === 0) return void 0;
+	const longitudes = points.map((point) => point.longitude);
+	const latitudes = points.map((point) => point.latitude);
+	return [[Math.min(...longitudes), Math.min(...latitudes)], [Math.max(...longitudes), Math.max(...latitudes)]];
+};
+/**
+* The markers for the points as the map draws them: in order, each point joins the first marker within `radius` pixels
+* of it, else starts its own. A marker is at its first point, so markers do not move as others join them.
+*/
+const groupPoints = (points, radius) => {
+	const groups = [];
+	for (const point of points) {
+		const near = groups.find((group) => Math.hypot(group.at.x - point.x, group.at.y - point.y) <= radius);
+		if (near) near.keys.push(point.key);
+		else groups.push({
+			at: point,
+			keys: [point.key]
+		});
+	}
+	return groups.map((group) => ({
+		keys: group.keys,
+		at: group.at.key
+	}));
+};
+/** The selection kept to the records the list still has, its card the same record when it is still there. */
+const keptSelection = (selection, rows) => {
+	if (!selection) return void 0;
+	const present = new Set(rows.map((row) => row.key));
+	const keys = selection.keys.filter((key) => present.has(key));
+	if (keys.length === 0) return void 0;
+	const index = keys.indexOf(selection.keys[selection.index]);
+	return {
+		keys,
+		index: Math.max(index, 0)
+	};
+};
+/** The selection moved by `step` records, round from the last to the first. */
+const stepSelection = (selection, step) => ({
+	keys: selection.keys,
+	index: ((selection.index + step) % selection.keys.length + selection.keys.length) % selection.keys.length
+});
+//#endregion
+export { groupPoints, keptSelection, mapPoints, pointBounds, stepSelection };