@protobase/ui 0.13.0 → 0.13.3

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

@@ -94,6 +94,7 @@ const LoadedCreate = ({ resource, values }) => {
 			"page",
 			"list",
 			"first-page",
+			"map",
 			"facets",
 			"series"
 		]) queryClient.invalidateQueries({ queryKey: [prefix, resource] });

package/dist/app/current-address.d.ts

@@ -1,6 +1,6 @@
-import { AppAddress, FilterLayout, ResourceModel, ViewModel } from "@protobase/schema";
+import { AppAddress, FilterLayout, MapView, ResourceModel, ViewModel } from "@protobase/schema";
 //#region src/app/current-address.d.ts
-/** A list as the app shows it: every value there, the view's default where the address names none. */
+/** A list as the app shows it: every value there, the view's default where the address names none; `map` has none. */
 export type ListAddress = {
   kind: 'list';
   resource: string;
@@ -8,6 +8,7 @@ export type ListAddress = {
   filter: string;
   orderBy: string;
   filterLayout: FilterLayout;
+  map?: MapView;
 };
 /** The address the app shows, as logical values. A record's key is in the text form the record API takes. */
 export type CurrentAddress = ListAddress | {

package/dist/app/current-address.js

@@ -35,7 +35,8 @@ const changedList = (read, change, defaults) => {
 		...next.filter && { filter: next.filter },
 		...differs("display") && { display: next.display },
 		...differs("orderBy") && { orderBy: next.orderBy },
-		...differs("filterLayout") && { filterLayout: next.filterLayout }
+		...differs("filterLayout") && { filterLayout: next.filterLayout },
+		...next.map && { map: next.map }
 	};
 };
 //#endregion

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

@@ -25,7 +25,8 @@ const useDeleteFlow = ({ model, view, onDeleted, onReview, restore }) => {
 		for (const prefix of [
 			"page",
 			"list",
-			"first-page"
+			"first-page",
+			"map"
 		]) queryClient.invalidateQueries({ queryKey: [prefix, model.name] });
 		for (const prefix of [
 			"facets",

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

@@ -1,6 +1,7 @@
 import { cn } from "../../lib/cn.js";
 import { keys } from "../../data/query-keys.js";
 import { useClient } from "../../data/api-provider.js";
+import { useAdminMeta } from "../meta-gate.js";
 import { cardPhotoList, cardPhotosRequest, shownPhoto } from "./card-photos.js";
 import { useState } from "react";
 import { ChevronLeft, ChevronRight } from "lucide-react";
@@ -17,7 +18,9 @@ const CardCarousel = ({ photos, recordKey, cover, children }) => {
 	const client = useClient();
 	const [opened, setOpened] = useState(false);
 	const [step, setStep] = useState(0);
-	const request = cardPhotosRequest(photos, recordKey);
+	const target = useAdminMeta().resources[photos.resource];
+	const placeholder = target?.fields[photos.image]?.file?.placeholder;
+	const request = cardPhotosRequest(photos, recordKey, placeholder !== void 0 && target?.fields[placeholder] ? placeholder : void 0);
 	const loaded = useQuery({
 		queryKey: keys.list(photos.resource, request.filter, request.orderBy ?? "", request.pageSize, `card-photos:${photos.image}`),
 		enabled: opened,

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

@@ -2,11 +2,14 @@ import { isStoredFile } from "../../live/file-values.js";
 import { createWhere, printFilter } from "@protobase/schema";
 //#region src/app/displays/card-photos.ts
 const where = createWhere();
-/** The list request for a card's photos: the records pointing at the card's, in the display's order, with only their image. */
-const cardPhotosRequest = (photos, recordKey) => ({
+/**
+* The list request for a card's photos: the records pointing at the card's, in the display's order, with only their
+* image and its placeholder field, when it has one.
+*/
+const cardPhotosRequest = (photos, recordKey, placeholder) => ({
 	filter: printFilter(where.eq(photos.field, recordKey)),
 	...photos.sort !== void 0 && { orderBy: photos.sort },
-	fields: [photos.image],
+	fields: placeholder === void 0 ? [photos.image] : [photos.image, placeholder],
 	pageSize: 100
 });
 /** The files a card steps through: its own image first, then the loaded photos less that same file; empty values are left out. */

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

@@ -1,48 +1,77 @@
-import { Skeleton } from "../../primitives/skeleton.js";
+import { Button } from "../../primitives/button.js";
 import { humanize } from "../../live/naming.js";
 import { mapCards } from "./list-displays.js";
 import { useAdminMeta } from "../meta-gate.js";
+import { ErrorBanner } from "../error-banner.js";
 import { Problem } from "../pages/problem.js";
 import { RecordCard } from "./record-card.js";
-import { DisplayFooter, DisplayState } from "./display-frame.js";
+import { useDebounced } from "../../lib/use-debounced.js";
+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 { 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 settleMs = 250;
 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.
+* The matching records in the map's view, drawn with the map style `/meta` names: the records themselves when few are
+* 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.
 */
-const MapDisplay = ({ model, view, display, list, footer = true }) => {
+const MapDisplay = ({ model, view, display, filter, orderBy, fields, at, onMove, footer = true }) => {
 	const style = useAdminMeta().maps?.style;
 	const [chosen, setChosen] = useState();
+	const [area, setArea] = useState();
+	const settled = useDebounced(area, settleMs);
+	const [fitting, setFitting] = useState(at === void 0);
+	const records = useMapRecords({
+		model,
+		display,
+		fields,
+		filter,
+		orderBy,
+		area: fitting ? worldArea : settled
+	});
+	const loaded = records.isPlaceholderData ? void 0 : records.data;
+	const rows = records.data?.rows ?? [];
+	const buckets = records.data?.buckets ?? [];
+	const points = mapPoints(rows, display);
+	const fit = fitting && loaded ? boundsAround(mapPoints(loaded.rows, display), loaded.buckets) : void 0;
 	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 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 bucketLabel = (count) => `Zoom in on ${count.toLocaleString("en-IE")} ${count === 1 ? singular : 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, {
+	const empty = loaded?.total === 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex h-full min-h-[36rem] flex-1 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),
+						initial: at,
+						points,
+						buckets,
+						fit,
+						onFitted: () => setFitting(false),
+						onMove: (next, center) => {
+							setArea(next);
+							onMove?.(center);
+						},
 						selected: selection?.keys,
 						covered: selection ? covered : 0,
 						onSelect: (keys) => setChosen({
@@ -50,9 +79,30 @@ const MapDisplay = ({ model, view, display, list, footer = true }) => {
 							index: 0
 						}),
 						onClear: () => setChosen(void 0),
-						markerLabel
+						markerLabel,
+						bucketLabel
+					})
+				}),
+				records.error && /* @__PURE__ */ jsx("div", {
+					className: "absolute inset-x-3 top-3 z-10",
+					children: /* @__PURE__ */ jsx(ErrorBanner, {
+						title: "Could not load rows",
+						error: records.error
 					})
-				}), selection && row && /* @__PURE__ */ jsx("div", {
+				}),
+				empty && /* @__PURE__ */ jsx("div", {
+					className: "pointer-events-none absolute inset-x-3 top-3 z-10 flex justify-center",
+					children: /* @__PURE__ */ jsxs("p", {
+						className: "pointer-events-auto flex items-center gap-3 rounded-full border border-border bg-background px-4 py-1.5 text-[13px] text-muted-foreground shadow",
+						role: "status",
+						children: [fitting ? `No ${plural} match.` : `No ${plural} in this part of the map.`, !fitting && /* @__PURE__ */ jsx(Button, {
+							size: "sm",
+							onClick: () => setFitting(true),
+							children: "Show all"
+						})]
+					})
+				}),
+				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", {
@@ -111,10 +161,20 @@ const MapDisplay = ({ model, view, display, list, footer = true }) => {
 							})
 						})]
 					})
-				})]
-			}), footer && /* @__PURE__ */ jsx(DisplayFooter, { list })]
-		})
+				})
+			]
+		}), footer && /* @__PURE__ */ jsx("p", {
+			className: "py-3 text-xs text-muted-foreground",
+			children: inView(records.data, plural)
+		})]
 	});
 };
+/** How many of the matching records are in view, and how many the map shows when it cannot show them all. */
+const inView = (data, plural) => {
+	if (!data) return "\xA0";
+	const total = data.total.toLocaleString("en-IE");
+	if (data.buckets.length === 0 && data.rows.length < data.total) return `${data.rows.length.toLocaleString("en-IE")} of ${total} ${plural} in view`;
+	return `${total} ${plural} in view`;
+};
 //#endregion
 export { MapDisplay };

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

@@ -8,13 +8,6 @@ const mapPoints = (rows, fields) => rows.flatMap((row) => {
 		...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.
@@ -52,4 +45,4 @@ const stepSelection = (selection, step) => ({
 	index: ((selection.index + step) % selection.keys.length + selection.keys.length) % selection.keys.length
 });
 //#endregion
-export { groupPoints, keptSelection, mapPoints, pointBounds, stepSelection };
+export { groupPoints, keptSelection, mapPoints, stepSelection };

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

@@ -1,10 +1,11 @@
 import { Badge } from "../../primitives/badge.js";
 import { humanize } from "../../live/naming.js";
 import { useProjectUi } from "../pages/project-ui.js";
-import { fileShown, isPreviewable } from "../../live/file-values.js";
+import { shownImage } from "../../live/file-values.js";
 import { displayValue } from "../../live/display-value.js";
 import { amountParts, cardFields, filledAmount, filledMeta } from "./list-displays.js";
 import { AppLink } from "../use-app-address.js";
+import { FileImage } from "../../live/file-image.js";
 import { shownWidget } from "../field-types/shown-widget.js";
 import { CustomBoundary } from "../pages/custom-boundary.js";
 import { WidgetPart } from "../field-types/widget-part.js";
@@ -14,13 +15,14 @@ import { CardCarousel } from "./card-carousel.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/displays/record-card.tsx
 const CardImage = ({ value }) => {
-	const file = fileShown(value);
-	const url = file && "url" in file && typeof file.url === "string" && isPreviewable(file.type) ? file.url : void 0;
+	const image = shownImage(value, {
+		width: 320,
+		height: 240
+	});
 	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: "",
+		children: image && /* @__PURE__ */ jsx(FileImage, {
+			image,
 			loading: "lazy",
 			className: "size-full object-cover"
 		})

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

@@ -0,0 +1,44 @@
+import { keys } from "../../data/query-keys.js";
+import { useClient } from "../../data/api-provider.js";
+import { withLabels } from "../../live/relation-labels.js";
+import { displayRow } from "./list-displays.js";
+import { useAdminMeta } from "../meta-gate.js";
+import { areaFilter, requestZoom } from "../map/map-area.js";
+import { keepPreviousData, useQuery, useQueryClient } from "@tanstack/react-query";
+//#region src/app/displays/use-map-records.ts
+/**
+* The records in the map's area through the list API's `:map`, labelled for the card, or buckets of them when it holds
+* many. A new area or filter keeps the previous answer until its own arrives, and an answer for an area the map has
+* left is never shown.
+*/
+const useMapRecords = ({ model, display, fields, filter, orderBy, area }) => {
+	const client = useClient();
+	const queryClient = useQueryClient();
+	const { resources, views } = useAdminMeta();
+	const position = {
+		latitude: display.latitude,
+		longitude: display.longitude
+	};
+	const inside = area ? areaFilter(filter, position, area.bounds) : "";
+	const zoom = area ? requestZoom(area.zoom) : 0;
+	return useQuery({
+		queryKey: keys.map(model.name, `${position.latitude},${position.longitude}`, zoom, inside, orderBy),
+		enabled: area !== void 0,
+		placeholderData: keepPreviousData,
+		queryFn: async () => {
+			const result = await client.map(model.name, {
+				...position,
+				zoom,
+				filter: inside,
+				orderBy
+			});
+			return {
+				rows: (await withLabels(queryClient, client, resources, views, model, fields, result.items)).map((record) => displayRow(model, record)),
+				buckets: result.buckets,
+				total: result.totalSize
+			};
+		}
+	});
+};
+//#endregion
+export { useMapRecords };

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

@@ -125,7 +125,9 @@ const EmbeddedList = ({ model, view, filter, sort, columns, limit, display, empt
 			model,
 			view,
 			display: shown,
-			list,
+			filter,
+			orderBy,
+			fields,
 			footer: false
 		}) : /* @__PURE__ */ jsx(CustomDisplay, {
 			display: shown,

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

@@ -99,7 +99,7 @@ const LoadedList = ({ model, address }) => {
 		orderBy
 	});
 	const display = shownDisplay(view, address.display);
-	const displayRows = useDisplayRows(model, rows.page, rows.key, display !== void 0 && display.kind !== "cards");
+	const displayRows = useDisplayRows(model, rows.page, rows.key, display?.kind === "custom");
 	const scroll = useListScroll();
 	const titleField = recordTitleField(model, view);
 	const target = (row) => ({
@@ -273,7 +273,11 @@ const LoadedList = ({ model, address }) => {
 			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/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 };