@protobase/ui 0.12.22 → 0.13.3

package/dist/app/embedded-list/embedded-columns.js

@@ -0,0 +1,52 @@
+import { humanize } from "../../live/naming.js";
+import { displayRow } from "../displays/list-displays.js";
+import { columnsFromModel } from "../../live/columns-from-model.js";
+import { withFieldTypeCells } from "../field-types/field-type-cells.js";
+import { scopeOf } from "../pages/use-layout-data.js";
+import { FieldValue } from "../pages/field-value.js";
+import { usePathValue } from "../pages/use-path-value.js";
+import { jsx } from "react/jsx-runtime";
+import { resolveFieldPath } from "@protobase/layout";
+//#region src/app/embedded-list/embedded-columns.tsx
+const isPath = (column) => column.includes(".");
+/** A value through relations (`unit_id.property_id`), fetched like the record page fetches it and cached. */
+const PathCell = ({ model, row, column }) => {
+	const value = usePathValue(scopeOf(model, displayRow(model, row).record), column);
+	if (value.state === "loading") return /* @__PURE__ */ jsx("span", {
+		className: "text-muted-foreground",
+		children: "…"
+	});
+	if (value.state === "missing") return /* @__PURE__ */ jsx("span", {
+		className: "text-muted-foreground",
+		children: "—"
+	});
+	return /* @__PURE__ */ jsx(FieldValue, {
+		model: value.model,
+		field: value.field,
+		value: value.value
+	});
+};
+/** A column through relations, headed by the label of the field it ends at. */
+const pathColumn = (model, column, { resources, views }) => {
+	const resolved = resolveFieldPath(resources, model.name, column);
+	const last = resolved.ok ? resolved.steps.at(-1) : void 0;
+	const name = last?.field.name ?? column;
+	return {
+		id: column,
+		header: views[last?.model.name ?? model.name]?.fields[name]?.label ?? humanize(name),
+		kind: "text",
+		width: 200,
+		render: (row) => /* @__PURE__ */ jsx(PathCell, {
+			model,
+			row,
+			column
+		})
+	};
+};
+/** The list page's columns for `names`: fields of `model` as its table draws them, and paths through relations. */
+const embeddedColumns = (model, view, names, meta) => {
+	const fields = new Map(withFieldTypeCells(columnsFromModel(model, view, [], names.filter((name) => !isPath(name))), model, view, meta.fieldTypes).map((spec) => [spec.id, spec]));
+	return names.flatMap((name) => isPath(name) ? [pathColumn(model, name, meta)] : fields.get(name) ?? []);
+};
+//#endregion
+export { embeddedColumns };

package/dist/app/embedded-list/embedded-display.js

@@ -0,0 +1,26 @@
+import { guarded } from "../../lib/guarded.js";
+import { defaultDisplay, displayChoices } from "../displays/list-displays.js";
+import { changedList, listDefaults } from "../current-address.js";
+//#region src/app/embedded-list/embedded-display.ts
+const prefix = "protobase:embedded-display:";
+/** Where a viewer's pick of display is kept for one embedded list, named by the place it is shown. */
+const embeddedDisplayKey = (place) => `${prefix}${place}`;
+const readPickedDisplay = (storage, key) => guarded(() => storage.getItem(key) ?? void 0, void 0);
+const writePickedDisplay = (storage, key, display) => guarded(() => storage.setItem(key, display), void 0);
+/**
+* The display an embedded list shows: the viewer's pick while the view still has it, else what the list opens in for
+* the screen, with the display the page names in place of the view's default (below `sm`, a cards display when the
+* view has one).
+*/
+const embeddedDisplay = (view, xs, { picked, preferred }) => {
+	const names = displayChoices(view).map((choice) => choice.name);
+	if (picked !== void 0 && names.includes(picked)) return picked;
+	return defaultDisplay(view, xs, preferred !== void 0 && names.includes(preferred) ? preferred : void 0);
+};
+/** The resource's list with the embedded list's filter, order and display, leaving out what the list does by default. */
+const viewAllAddress = (model, view, xs, list) => changedList({
+	kind: "list",
+	resource: model.name
+}, list, listDefaults(model, view, xs));
+//#endregion
+export { embeddedDisplay, embeddedDisplayKey, readPickedDisplay, viewAllAddress, writePickedDisplay };

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

@@ -0,0 +1,157 @@
+import { useIsDesktop, useIsXs } from "../../lib/use-media-query.js";
+import { Skeleton } from "../../primitives/skeleton.js";
+import { recordKey } from "../../live/model-helpers.js";
+import { humanize } from "../../live/naming.js";
+import { useProjectUi } from "../pages/project-ui.js";
+import { displayRow, loadedFields, shownDisplay } from "../displays/list-displays.js";
+import { defaultOrderBy, parseSort, sortToOrderBy } from "../list-order.js";
+import { useAdminMeta } from "../meta-gate.js";
+import { AppLink, useAppAddress } from "../use-app-address.js";
+import { ErrorBanner } from "../error-banner.js";
+import { DataGrid } from "../../data-grid/data-grid.js";
+import { listColumnNames } from "../../live/columns-from-model.js";
+import { MapDisplay } from "../displays/map-display.js";
+import { CustomDisplay } from "../displays/custom-display.js";
+import { DisplaySwitch } from "../displays/display-controls.js";
+import { CardsDisplay } from "../displays/cards-display.js";
+import { embeddedColumns } from "./embedded-columns.js";
+import { viewAllAddress } from "./embedded-display.js";
+import { useEmbeddedRows } from "./use-embedded-rows.js";
+import { useMemo, useState } from "react";
+import { ArrowRight } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/embedded-list/embedded-list.tsx
+/** The switch between the table and the view's displays, for an embedded list's heading; nothing with only a table. */
+const EmbeddedDisplaySwitch = ({ view, value, onChange }) => /* @__PURE__ */ jsx(DisplaySwitch, {
+	view,
+	value,
+	onChange,
+	menu: !useIsDesktop()
+});
+const Loading = () => /* @__PURE__ */ jsx("div", {
+	className: "flex flex-col gap-2",
+	children: Array.from({ length: 3 }, (_, index) => /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }, index))
+});
+/**
+* The first `limit` records of a list, drawn by the list page's own table (sized to its rows) or display, and a link
+* to the whole list with the same filter, order and display. On a phone a cards display is one row that scrolls sideways.
+*/
+const EmbeddedList = ({ model, view, filter, sort, columns, limit, display, empty }) => {
+	const { resources, views } = useAdminMeta();
+	const { fields: fieldTypes } = useProjectUi();
+	const { go } = useAppAddress();
+	const xs = useIsXs();
+	const [orderBy, setOrderBy] = useState(sort || defaultOrderBy(model, view));
+	const names = columns ?? listColumnNames(model, view);
+	const specs = useMemo(() => embeddedColumns(model, view, names, {
+		resources,
+		views,
+		fieldTypes
+	}), [
+		model,
+		view,
+		names.join(","),
+		resources,
+		views,
+		fieldTypes
+	]);
+	const fields = useMemo(() => loadedFields(model, view, specs.map((spec) => spec.id)), [
+		model,
+		view,
+		specs
+	]);
+	const rows = useEmbeddedRows({
+		model,
+		filter,
+		orderBy,
+		limit,
+		fields
+	});
+	const loaded = rows.data;
+	const source = useMemo(() => loaded && {
+		total: loaded.length,
+		rowAt: (index) => loaded[index]
+	}, [loaded]);
+	const shown = shownDisplay(view, display);
+	if (rows.isPending) return /* @__PURE__ */ jsx(Loading, {});
+	if (rows.error) return /* @__PURE__ */ jsx(ErrorBanner, {
+		title: "Could not load",
+		error: rows.error
+	});
+	if (!source || source.total === 0) return /* @__PURE__ */ jsx("p", {
+		className: "text-[13px] text-muted-foreground",
+		children: empty ?? "Nothing here yet."
+	});
+	const list = {
+		resource: model.name,
+		rows: rows.data.map((row) => displayRow(model, row)),
+		total: rows.data.length,
+		loading: false,
+		error: null,
+		more: false,
+		loadMore: () => void 0
+	};
+	const openRecord = (row) => go({
+		kind: "record",
+		resource: model.name,
+		key: recordKey(model, row)
+	});
+	const singular = view?.names?.singular ?? humanize(model.name);
+	const plural = view?.names?.plural ?? humanize(model.name);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-3",
+		children: [!shown ? /* @__PURE__ */ jsx(DataGrid, {
+			fit: true,
+			columns: specs,
+			source,
+			latencyMs: 0,
+			sort: parseSort(orderBy),
+			onSortChange: (next) => setOrderBy(sortToOrderBy(next)),
+			onOpenRow: openRecord,
+			rowActions: [{
+				label: `Open ${singular.toLowerCase()}`,
+				onSelect: openRecord
+			}],
+			rowNumbers: false,
+			selectable: false
+		}) : shown.kind === "cards" ? /* @__PURE__ */ jsx(CardsDisplay, {
+			model,
+			view,
+			display: shown,
+			list,
+			row: xs,
+			footer: false
+		}) : shown.kind === "map" ? /* @__PURE__ */ jsx(MapDisplay, {
+			model,
+			view,
+			display: shown,
+			filter,
+			orderBy,
+			fields,
+			footer: false
+		}) : /* @__PURE__ */ jsx(CustomDisplay, {
+			display: shown,
+			list
+		}), /* @__PURE__ */ jsxs(AppLink, {
+			to: viewAllAddress(model, view, xs, {
+				filter,
+				orderBy,
+				display
+			}),
+			className: "flex items-center gap-1 self-end text-[13px] font-medium text-primary-text hover:underline",
+			children: [
+				"View all ",
+				/* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: plural.toLowerCase()
+				}),
+				/* @__PURE__ */ jsx(ArrowRight, {
+					className: "size-3.5",
+					"aria-hidden": true
+				})
+			]
+		})]
+	});
+};
+//#endregion
+export { EmbeddedDisplaySwitch, EmbeddedList };

package/dist/app/embedded-list/use-embedded-display.js

@@ -0,0 +1,23 @@
+import { useIsXs } from "../../lib/use-media-query.js";
+import { embeddedDisplay, embeddedDisplayKey, readPickedDisplay, writePickedDisplay } from "./embedded-display.js";
+import { useCallback, useState } from "react";
+//#region src/app/embedded-list/use-embedded-display.ts
+/**
+* The display an embedded list shows and the way to pick another, which is kept in local storage for the viewer under
+* `place`, the list's place in the app.
+*/
+const useEmbeddedDisplay = (view, place, preferred) => {
+	const xs = useIsXs();
+	const key = embeddedDisplayKey(place);
+	const [picked, setPicked] = useState(() => readPickedDisplay(localStorage, key));
+	const pick = useCallback((display) => {
+		setPicked(display);
+		writePickedDisplay(localStorage, key, display);
+	}, [key]);
+	return [embeddedDisplay(view, xs, {
+		picked,
+		preferred
+	}), pick];
+};
+//#endregion
+export { useEmbeddedDisplay };

package/dist/app/embedded-list/use-embedded-rows.js

@@ -0,0 +1,33 @@
+import { keys } from "../../data/query-keys.js";
+import { useClient } from "../../data/api-provider.js";
+import { recordId } from "../../live/model-helpers.js";
+import { withLabels } from "../../live/relation-labels.js";
+import { useAdminMeta } from "../meta-gate.js";
+import { keepPreviousData, useQuery, useQueryClient } from "@tanstack/react-query";
+//#region src/app/embedded-list/use-embedded-rows.ts
+/**
+* The first `limit` records in `orderBy` order, as the list page's table and displays get them: relations among
+* `fields` as `{ id, name }`. A filter through a join resource may hold hundreds of keys, so it goes in a JSON body.
+*/
+const useEmbeddedRows = ({ model, filter, orderBy, limit, fields }) => {
+	const client = useClient();
+	const queryClient = useQueryClient();
+	const { resources, views } = useAdminMeta();
+	return useQuery({
+		queryKey: [...keys.list(model.name, filter, orderBy, limit, "embedded"), fields.join(",")],
+		placeholderData: keepPreviousData,
+		queryFn: async () => {
+			const page = await client.search(model.name, {
+				filter: filter || void 0,
+				orderBy: orderBy || void 0,
+				pageSize: limit
+			});
+			return (await withLabels(queryClient, client, resources, views, model, fields, page.items)).map((row, index) => ({
+				...row,
+				id: recordId(model, page.items[index])
+			}));
+		}
+	});
+};
+//#endregion
+export { useEmbeddedRows };

package/dist/app/file-field.js

@@ -2,21 +2,27 @@ import { cn } from "../lib/cn.js";
 import { Button } from "../primitives/button.js";
 import { useClient } from "../data/api-provider.js";
 import { humanize } from "../live/naming.js";
-import { acceptOf, fileShown, formatSize, isPreviewable } from "../live/file-values.js";
+import { acceptOf, fileShown, formatSize, isPreviewable, shownImage } from "../live/file-values.js";
 import { ErrorBanner } from "./error-banner.js";
+import { FileImage } from "../live/file-image.js";
 import { useRef, useState } from "react";
 import { FileText, Paperclip, Upload } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMutation } from "@tanstack/react-query";
 //#region src/app/file-field.tsx
-const Thumbnail = ({ url, type }) => url && isPreviewable(type) ? /* @__PURE__ */ jsx("img", {
-	src: url,
-	alt: "",
-	className: "size-10 shrink-0 rounded border border-border object-cover"
-}) : /* @__PURE__ */ jsx("span", {
-	className: "flex size-10 shrink-0 items-center justify-center rounded border border-border bg-muted text-muted-foreground",
-	children: /* @__PURE__ */ jsx(FileText, { className: "size-4" })
-});
+const Thumbnail = ({ value }) => {
+	const image = shownImage(value, {
+		width: 40,
+		height: 40
+	});
+	return image ? /* @__PURE__ */ jsx(FileImage, {
+		image,
+		className: "size-10 shrink-0 rounded border border-border object-cover"
+	}) : /* @__PURE__ */ jsx("span", {
+		className: "flex size-10 shrink-0 items-center justify-center rounded border border-border bg-muted text-muted-foreground",
+		children: /* @__PURE__ */ jsx(FileText, { className: "size-4" })
+	});
+};
 /** The file as it is: thumbnail or icon, name (a link while it has a URL), type and size, and what the server corrected. */
 const FileSummary = ({ value }) => {
 	const shown = fileShown(value);
@@ -32,10 +38,7 @@ const FileSummary = ({ value }) => {
 	const corrected = "corrected" in shown ? shown.corrected : void 0;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex min-w-0 items-center gap-3 py-1",
-		children: [/* @__PURE__ */ jsx(Thumbnail, {
-			url,
-			type: shown.type
-		}), /* @__PURE__ */ jsxs("div", {
+		children: [/* @__PURE__ */ jsx(Thumbnail, { value }), /* @__PURE__ */ jsxs("div", {
 			className: "min-w-0 text-[13px]",
 			children: [url && !url.startsWith("blob:") ? /* @__PURE__ */ jsx("a", {
 				href: url,

package/dist/app/list-page.js

@@ -26,11 +26,12 @@ 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 { CardsDisplay } from "./displays/cards-display.js";
+import { ListCards } from "./displays/list-cards.js";
 import { MapDisplay } from "./displays/map-display.js";
 import { CustomDisplay } from "./displays/custom-display.js";
 import { DisplaySwitch, SortMenu } from "./displays/display-controls.js";
 import { useDisplayRows } from "./displays/use-display-rows.js";
+import { useListScroll } from "./list-scroll.js";
 import { ListChart } from "./list-chart.js";
 import { ListSearch } from "./list-search.js";
 import { withFieldTypeCells } from "./field-types/field-type-cells.js";
@@ -98,7 +99,8 @@ const LoadedList = ({ model, address }) => {
 		orderBy
 	});
 	const display = shownDisplay(view, address.display);
-	const displayRows = useDisplayRows(model, rows.page, rows.key, display !== void 0);
+	const displayRows = useDisplayRows(model, rows.page, rows.key, display?.kind === "custom");
+	const scroll = useListScroll();
 	const titleField = recordTitleField(model, view);
 	const target = (row) => ({
 		key: row.id,
@@ -234,6 +236,8 @@ const LoadedList = ({ model, address }) => {
 		sort: parseSort(orderBy),
 		onSortChange: (sort) => set({ orderBy: sortToOrderBy(sort) }),
 		onOpenRow: openRecord,
+		initialScrollIndex: scroll.initialIndex,
+		onScrollIndex: scroll.remember,
 		rowActions: [{
 			label: `Open ${singular.toLowerCase()}`,
 			onSelect: openRecord
@@ -252,19 +256,28 @@ const LoadedList = ({ model, address }) => {
 		pinKey: auth.kind === "signed-in" ? pinnedStorageKey(auth.user.id, resource) : void 0,
 		className: "min-h-0 flex-1"
 	}) : /* @__PURE__ */ jsx("div", { className: "flex-1 rounded-lg border bg-surface" });
+	const cardsList = {
+		...rows,
+		initialIndex: scroll.initialIndex,
+		onScrollIndex: scroll.remember
+	};
 	const drawDisplay = () => {
 		if (!display) return table;
-		if (display.kind === "cards") return /* @__PURE__ */ jsx(CardsDisplay, {
+		if (display.kind === "cards") return /* @__PURE__ */ jsx(ListCards, {
 			model,
 			view,
 			display,
-			list: displayRows
-		});
+			list: cardsList
+		}, rows.key.join(" "));
 		if (display.kind === "map") return /* @__PURE__ */ jsx(MapDisplay, {
 			model,
 			view,
 			display,
-			list: displayRows
+			filter: parsed.ok ? filterText : "",
+			orderBy,
+			fields: loaded,
+			at: address.map,
+			onMove: (map) => set({ map })
 		});
 		return /* @__PURE__ */ jsx(CustomDisplay, {
 			display,

package/dist/app/list-scroll.js

@@ -0,0 +1,25 @@
+import { useRouter } from "./router.js";
+import { useCallback } from "react";
+//#region src/app/list-scroll.ts
+/** The first record in view of the list each history entry last showed, for this tab; a page load starts empty. */
+const remembered = /* @__PURE__ */ new Map();
+/**
+* Where a list starts and how it remembers where it is, so going back to it shows the same records. Only the list the
+* history entry showed last comes back: after a change of sort or filter, which replaces the entry, the list starts at
+* the top again.
+*/
+const useListScroll = () => {
+	const { entry, path, params } = useRouter();
+	const url = `${path}?${params.toString()}`;
+	const last = remembered.get(entry);
+	const remember = useCallback((index) => void remembered.set(entry, {
+		url,
+		index
+	}), [entry, url]);
+	return {
+		initialIndex: last?.url === url ? last.index : 0,
+		remember
+	};
+};
+//#endregion
+export { useListScroll };

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

@@ -0,0 +1,53 @@
+import { createWhere, printFilter } from "@protobase/schema";
+//#region src/app/map/map-area.ts
+const where = createWhere();
+/** The whole world from as far out as a map goes: what a map asks for before it knows where its records are. */
+const worldArea = {
+	bounds: {
+		south: -90,
+		west: -180,
+		north: 90,
+		east: 180
+	},
+	zoom: 0
+};
+const maxZoom = 22;
+const down = (degrees) => Math.floor(degrees * 1e6) / 1e6;
+const up = (degrees) => Math.ceil(degrees * 1e6) / 1e6;
+const wrapped = (longitude) => ((longitude + 180) % 360 + 360) % 360 - 180;
+/**
+* The AIP-160 filter for the records inside `bounds`: between its latitudes, and between its longitudes on the globe.
+* A view across the antimeridian takes the longitudes on both sides of it, and one around the whole world takes them all.
+*/
+const boundsFilter = (fields, bounds) => {
+	const latitude = [where.gte(fields.latitude, down(Math.max(bounds.south, -90))), where.lte(fields.latitude, up(Math.min(bounds.north, 90)))];
+	if (bounds.east - bounds.west >= 360) return where.and(...latitude);
+	const west = where.gte(fields.longitude, down(wrapped(bounds.west)));
+	const east = where.lte(fields.longitude, up(wrapped(bounds.east)));
+	return wrapped(bounds.west) <= wrapped(bounds.east) ? where.and(...latitude, west, east) : where.and(...latitude, where.or(west, east));
+};
+/** The list's filter, its search included, narrowed to the records inside the map's bounds. */
+const areaFilter = (listFilter, fields, bounds) => {
+	const inside = printFilter(boundsFilter(fields, bounds));
+	return listFilter.trim() === "" ? inside : `(${listFilter}) AND ${inside}`;
+};
+/** The zoom the records are asked for at: the whole zoom level the map is at. */
+const requestZoom = (zoom) => Math.min(Math.max(Math.floor(zoom), 0), maxZoom);
+/** The bounds around the records and the buckets, or none without either. */
+const boundsAround = (points, buckets) => {
+	const corners = [...points.map((point) => ({
+		south: point.latitude,
+		west: point.longitude,
+		north: point.latitude,
+		east: point.longitude
+	})), ...buckets.map((bucket) => bucket.bounds)];
+	if (corners.length === 0) return void 0;
+	return {
+		south: Math.min(...corners.map((corner) => corner.south)),
+		west: Math.min(...corners.map((corner) => corner.west)),
+		north: Math.max(...corners.map((corner) => corner.north)),
+		east: Math.max(...corners.map((corner) => corner.east))
+	};
+};
+//#endregion
+export { areaFilter, boundsAround, boundsFilter, requestZoom, worldArea };

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

@@ -1,5 +1,5 @@
 import { cn } from "../../lib/cn.js";
-import { groupPoints, pointBounds } from "../displays/map-groups.js";
+import { groupPoints } from "../displays/map-groups.js";
 import { useEffect, useRef, useState } from "react";
 import { MapPin } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -12,18 +12,29 @@ const fitOptions = {
 	maxZoom: 15,
 	duration: 0
 };
+const bucketOptions = {
+	padding: 48,
+	maxZoom: 16,
+	duration: 300
+};
 const markerHeight = 32;
+const compact = new Intl.NumberFormat("en-IE", {
+	notation: "compact",
+	maximumFractionDigits: 1
+});
+const corners = (bounds) => [[bounds.west, bounds.south], [bounds.east, bounds.north]];
 /**
 * A map of `style` with a marker for each group of records that lie close together at the zoom, showing how many it
-* stands for. It fits the records when they change. Choosing a marker selects its records; choosing the map elsewhere
-* clears the selection. A chosen marker the covered bottom would hide moves up into the open part of the map.
+* stands for, and a circle with the count of each bucket, which zooms in on its records when chosen. Choosing a marker
+* selects its records; choosing the map elsewhere clears the selection. A chosen marker the covered bottom would hide
+* moves up into the open part of the map.
 */
-const RecordsMap = ({ style, points, selected, covered, onSelect, onClear, markerLabel }) => {
+const RecordsMap = ({ style, initial, points, buckets, fit, onFitted, onMove, selected, covered, onSelect, onClear, markerLabel, bucketLabel }) => {
 	const ref = useRef(null);
 	const [groups, setGroups] = useState([]);
 	const byKey = new globalThis.Map(points.map((point) => [point.key, point]));
 	const pointKeys = points.map((point) => point.key).join(",");
-	const bounds = pointBounds(points);
+	const fitKey = fit && JSON.stringify(fit);
 	const regroup = () => {
 		const map = ref.current?.getMap();
 		if (!map) return;
@@ -32,12 +43,34 @@ const RecordsMap = ({ style, points, selected, covered, onSelect, onClear, marke
 			...map.project([point.longitude, point.latitude])
 		})), groupRadius));
 	};
-	useEffect(() => {
+	const report = () => {
 		const map = ref.current?.getMap();
 		if (!map) return;
-		if (bounds) map.fitBounds(bounds, fitOptions);
-		regroup();
-	}, [pointKeys]);
+		const bounds = map.getBounds();
+		const center = map.getCenter();
+		onMove({
+			bounds: {
+				south: bounds.getSouth(),
+				west: bounds.getWest(),
+				north: bounds.getNorth(),
+				east: bounds.getEast()
+			},
+			zoom: map.getZoom()
+		}, {
+			latitude: center.lat,
+			longitude: center.lng,
+			zoom: map.getZoom()
+		});
+	};
+	const fitNow = () => {
+		const map = ref.current?.getMap();
+		if (!map || !fit) return;
+		map.fitBounds(corners(fit), fitOptions);
+		onFitted();
+		report();
+	};
+	useEffect(regroup, [pointKeys]);
+	useEffect(fitNow, [fitKey]);
 	const chosenAt = groups.find((group) => selected !== void 0 && group.keys.some((key) => selected.includes(key)))?.at;
 	useEffect(() => {
 		const map = ref.current?.getMap();
@@ -56,10 +89,7 @@ const RecordsMap = ({ style, points, selected, covered, onSelect, onClear, marke
 		ref,
 		mapLib: maplibre,
 		mapStyle: style,
-		initialViewState: bounds ? {
-			bounds,
-			fitBoundsOptions: fitOptions
-		} : {
+		initialViewState: initial ?? {
 			latitude: 0,
 			longitude: 0,
 			zoom: 1
@@ -68,38 +98,61 @@ const RecordsMap = ({ style, points, selected, covered, onSelect, onClear, marke
 			width: "100%",
 			height: "100%"
 		},
-		onLoad: regroup,
+		onLoad: () => {
+			regroup();
+			if (fit) fitNow();
+			else report();
+		},
 		onZoomEnd: regroup,
+		onMoveEnd: report,
 		onClick: onClear,
-		children: [/* @__PURE__ */ jsx(NavigationControl, { showCompass: false }), groups.map((group) => {
-			const at = byKey.get(group.at);
-			if (!at) return null;
-			const chosen = selected !== void 0 && group.keys.some((key) => selected.includes(key));
-			return /* @__PURE__ */ jsx(Marker, {
-				latitude: at.latitude,
-				longitude: at.longitude,
-				anchor: "bottom",
-				style: { zIndex: chosen ? 1 : 0 },
-				children: /* @__PURE__ */ jsxs("button", {
+		children: [
+			/* @__PURE__ */ jsx(NavigationControl, { showCompass: false }),
+			buckets.map((bucket) => /* @__PURE__ */ jsx(Marker, {
+				latitude: bucket.latitude,
+				longitude: bucket.longitude,
+				anchor: "center",
+				children: /* @__PURE__ */ jsx("button", {
 					type: "button",
-					"aria-label": markerLabel(group.keys),
-					"aria-pressed": chosen,
-					className: "relative block cursor-pointer",
+					"aria-label": bucketLabel(bucket.count),
+					className: "flex size-10 cursor-pointer items-center justify-center rounded-full border-2 border-background bg-primary text-xs font-semibold text-primary-foreground tabular-nums shadow",
 					onClick: (event) => {
 						event.stopPropagation();
-						onSelect(group.keys);
+						ref.current?.getMap().fitBounds(corners(bucket.bounds), bucketOptions);
 					},
-					children: [/* @__PURE__ */ jsx(MapPin, {
-						"aria-hidden": true,
-						className: cn("size-8 drop-shadow", chosen ? "fill-foreground text-background" : "fill-primary text-primary-foreground"),
-						strokeWidth: 1.5
-					}), group.keys.length > 1 && /* @__PURE__ */ jsx("span", {
-						className: "absolute -right-2 -top-1 min-w-5 rounded-full border border-background bg-foreground px-1 text-center text-[11px] font-medium leading-4 text-background tabular-nums",
-						children: group.keys.length
-					})]
+					children: compact.format(bucket.count)
 				})
-			}, group.at);
-		})]
+			}, `${bucket.latitude},${bucket.longitude}`)),
+			groups.map((group) => {
+				const at = byKey.get(group.at);
+				if (!at) return null;
+				const chosen = selected !== void 0 && group.keys.some((key) => selected.includes(key));
+				return /* @__PURE__ */ jsx(Marker, {
+					latitude: at.latitude,
+					longitude: at.longitude,
+					anchor: "bottom",
+					style: { zIndex: chosen ? 1 : 0 },
+					children: /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						"aria-label": markerLabel(group.keys),
+						"aria-pressed": chosen,
+						className: "relative block cursor-pointer",
+						onClick: (event) => {
+							event.stopPropagation();
+							onSelect(group.keys);
+						},
+						children: [/* @__PURE__ */ jsx(MapPin, {
+							"aria-hidden": true,
+							className: cn("size-8 drop-shadow", chosen ? "fill-foreground text-background" : "fill-primary text-primary-foreground"),
+							strokeWidth: 1.5
+						}), group.keys.length > 1 && /* @__PURE__ */ jsx("span", {
+							className: "absolute -right-2 -top-1 min-w-5 rounded-full border border-background bg-foreground px-1 text-center text-[11px] font-medium leading-4 text-background tabular-nums",
+							children: group.keys.length
+						})]
+					})
+				}, group.at);
+			})
+		]
 	});
 };
 //#endregion