@protobase/ui 0.13.0 → 0.13.4

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

package/dist/app/pages/field-value.js

@@ -2,14 +2,15 @@ import { cn } from "../../lib/cn.js";
 import { keys } from "../../data/query-keys.js";
 import { useClient } from "../../data/api-provider.js";
 import { fetchLabels } from "../../live/relation-labels.js";
-import { fileShown } from "../../live/file-values.js";
+import { fileShown, shownImage } from "../../live/file-values.js";
 import { displayValue } from "../../live/display-value.js";
 import { useAdminMeta } from "../meta-gate.js";
 import { AppLink } from "../use-app-address.js";
+import { FileImage } from "../../live/file-image.js";
 import { useShownWidget } from "../field-types/shown-widget.js";
 import { WidgetPart } from "../field-types/widget-part.js";
 import { ValueBadge } from "../value-badge.js";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 //#region src/app/pages/field-value.tsx
 const RelationValue = ({ field, value, known }) => {
@@ -50,13 +51,25 @@ const BuiltInValue = ({ model, field, value, format, relationLabel }) => {
 		known: relationLabel
 	});
 	const file = field.type === "file" ? fileShown(value) : void 0;
-	if (file && "url" in file && file.url) return /* @__PURE__ */ jsx("a", {
-		href: file.url,
-		target: "_blank",
-		rel: "noreferrer",
-		className: "font-medium text-primary-text hover:underline",
-		children: file.name
-	});
+	if (file && "url" in file && file.url) {
+		const image = shownImage(value, {
+			width: 40,
+			height: 40
+		});
+		return /* @__PURE__ */ jsxs("span", {
+			className: "inline-flex min-w-0 items-center gap-2",
+			children: [image && /* @__PURE__ */ jsx(FileImage, {
+				image,
+				className: "size-10 shrink-0 rounded border border-border object-cover"
+			}), /* @__PURE__ */ jsx("a", {
+				href: file.url,
+				target: "_blank",
+				rel: "noreferrer",
+				className: "truncate font-medium text-primary-text hover:underline",
+				children: file.name
+			})]
+		});
+	}
 	const text = displayValue(field, value, hints);
 	if (field.type === "enum" || hints.format === "badge") return /* @__PURE__ */ jsx(ValueBadge, {
 		value,

package/dist/app/use-record-editor.js

@@ -106,7 +106,8 @@ const useRecordEditor = ({ model, stored, recordKey, mode, subject, draftKey, li
 		await Promise.all([
 			queryClient.invalidateQueries({ queryKey: keys.record(model.name, recordKey) }),
 			queryClient.invalidateQueries({ queryKey: ["list"] }),
-			queryClient.invalidateQueries({ queryKey: ["page"] })
+			queryClient.invalidateQueries({ queryKey: ["page"] }),
+			queryClient.invalidateQueries({ queryKey: ["map"] })
 		]);
 		lines?.reset();
 	};

package/dist/data/api-provider.d.ts

@@ -28,6 +28,7 @@ export declare const useClient: () => {
     filter?: import("@protobase/client").FilterInput;
     buckets?: number;
   }) => Promise<import("@protobase/client").Histogram>;
+  map: <R extends import("@protobase/client").ResourceRef>(resource: R, params: import("@protobase/client").MapParams) => Promise<import("@protobase/client").MapResult<import("@protobase/client").RecordOf<R>>>;
   seek: <R extends import("@protobase/client").ResourceRef>(resource: R, params: import("@protobase/client").ListParams & {
     position: number;
   }) => Promise<import("@protobase/client").ListPage<import("@protobase/client").RecordOf<R>>>;
@@ -66,6 +67,7 @@ export declare const useResourceClient: (resource: string) => {
     filter?: import("@protobase/client").FilterInput;
     buckets?: number;
   }) => Promise<import("@protobase/client").Histogram>;
+  map: <R extends import("@protobase/client").ResourceRef>(resource: R, params: import("@protobase/client").MapParams) => Promise<import("@protobase/client").MapResult<import("@protobase/client").RecordOf<R>>>;
   seek: <R extends import("@protobase/client").ResourceRef>(resource: R, params: import("@protobase/client").ListParams & {
     position: number;
   }) => Promise<import("@protobase/client").ListPage<import("@protobase/client").RecordOf<R>>>;

package/dist/data/query-keys.js

@@ -66,6 +66,15 @@ const keys = {
 		buckets,
 		filter
 	],
+	/** The records or buckets a map shows; `filter` holds its bounding box. */
+	map: (resource, position, zoom, filter, orderBy) => [
+		"map",
+		resource,
+		position,
+		zoom,
+		filter,
+		orderBy
+	],
 	relatedLabel: (resource, id) => [
 		"related-label",
 		resource,

package/dist/data/use-update-record.js

@@ -18,6 +18,7 @@ const useUpdateRecord = (resource, key) => {
 			queryClient.setQueryData(keys.record(resource, encoded), stored);
 			queryClient.invalidateQueries({ queryKey: ["page", resource] });
 			queryClient.invalidateQueries({ queryKey: ["list", resource] });
+			queryClient.invalidateQueries({ queryKey: ["map", resource] });
 		}
 	});
 };

package/dist/data-grid/cells.js

@@ -4,7 +4,8 @@ import { Badge } from "../primitives/badge.js";
 import { formatMoney } from "../format/money.js";
 import { formatInt, formatPercent, formatSigned } from "../format/number.js";
 import { formatDate, formatDateTime } from "../format/date.js";
-import { fileShown, isPreviewable } from "../live/file-values.js";
+import { fileShown, shownImage } from "../live/file-values.js";
+import { FileImage } from "../live/file-image.js";
 import { userById } from "../mocks/users.js";
 import { valueColor } from "../live/value-color.js";
 import { Check, Paperclip } from "lucide-react";
@@ -75,12 +76,14 @@ const renderCell = (spec, value) => {
 				className: "truncate text-danger-text",
 				children: file.name
 			});
-			const url = "url" in file ? file.url : void 0;
+			const image = shownImage(value, {
+				width: 20,
+				height: 20
+			});
 			return /* @__PURE__ */ jsxs("span", {
 				className: "inline-flex min-w-0 items-center gap-2",
-				children: [url && isPreviewable(file.type) ? /* @__PURE__ */ jsx("img", {
-					src: url,
-					alt: "",
+				children: [image ? /* @__PURE__ */ jsx(FileImage, {
+					image,
 					className: "size-5 shrink-0 rounded-sm object-cover"
 				}) : /* @__PURE__ */ jsx(Paperclip, { className: "size-3.5 shrink-0 text-muted-foreground" }), /* @__PURE__ */ jsx("span", {
 					className: "truncate",

package/dist/live/file-image.js

@@ -0,0 +1,35 @@
+import { useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { thumbHashToDataURL } from "thumbhash";
+//#region src/live/file-image.tsx
+const placeholderImage = (hash) => {
+	let binary;
+	try {
+		binary = atob(hash);
+	} catch (error) {
+		if (error instanceof DOMException && error.name === "InvalidCharacterError") return void 0;
+		throw error;
+	}
+	return thumbHashToDataURL(Uint8Array.from(binary, (char) => char.charCodeAt(0)));
+};
+/** An image of a file, its placeholder drawn blurred behind it until it has loaded. */
+const FileImage = ({ image, className, loading }) => {
+	const [loaded, setLoaded] = useState();
+	const placeholder = useMemo(() => image.placeholder === void 0 ? void 0 : placeholderImage(image.placeholder), [image.placeholder]);
+	const waiting = placeholder !== void 0 && loaded !== image.url;
+	return /* @__PURE__ */ jsx("img", {
+		src: image.url,
+		alt: "",
+		loading,
+		decoding: "async",
+		onLoad: () => setLoaded(image.url),
+		className,
+		style: waiting ? {
+			backgroundImage: `url("${placeholder}")`,
+			backgroundSize: "cover",
+			backgroundPosition: "center"
+		} : void 0
+	});
+};
+//#endregion
+export { FileImage };

package/dist/live/file-values.js

@@ -34,6 +34,22 @@ const formatSize = (bytes) => {
 };
 /** Raster images the browser shows; SVG is never shown, since it can carry scripts. */
 const isPreviewable = (type) => type.startsWith("image/") && type !== "image/svg+xml";
+const density = 2;
+const unbounded = 1e5;
+const covers = (variant, box) => (variant.width !== void 0 || variant.height !== void 0) && (variant.width ?? unbounded) >= box.width * density && (variant.height ?? unbounded) >= box.height * density;
+const area = (variant) => (variant.width ?? unbounded) * (variant.height ?? unbounded);
+/**
+* The picture of a file for `box`: the link of its smallest variant large enough for it, else the file's own, with its
+* placeholder; `undefined` for a file that is no raster image with a link.
+*/
+const shownImage = (value, box) => {
+	const file = fileShown(value);
+	if (!file || "missing" in file || !file.url || !isPreviewable(file.type)) return void 0;
+	return {
+		url: ("variants" in file && file.variants ? Object.values(file.variants) : []).filter((variant) => covers(variant, box)).sort((a, b) => area(a) - area(b))[0]?.url ?? file.url,
+		..."placeholder" in file && file.placeholder !== void 0 && { placeholder: file.placeholder }
+	};
+};
 /** The file input's `accept`: the field's allowed types, or nothing when it takes any. */
 const acceptOf = (field) => {
 	const accept = field.file?.accept ?? [];
@@ -52,4 +68,4 @@ const fileDiffers = (draft, stored) => {
 	return uri(draft) !== uri(stored);
 };
 //#endregion
-export { acceptOf, fileDiffers, filePatchValue, fileShown, formatSize, isFileDraft, isPreviewable, isStoredFile };
+export { acceptOf, fileDiffers, filePatchValue, fileShown, formatSize, isFileDraft, isPreviewable, isStoredFile, shownImage };

package/dist/package.js

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "0.13.0";
+var version = "0.13.4";
 var protobase = { "pluginApi": 1 };
 //#endregion
 export { protobase, version };