@protobase/ui 0.12.21 → 0.12.22

package/dist/app/list-page.js

@@ -27,6 +27,7 @@ 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 { 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";
@@ -251,15 +252,26 @@ 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 shown = !display ? table : display.kind === "cards" ? /* @__PURE__ */ jsx(CardsDisplay, {
-		model,
-		view,
-		display,
-		list: displayRows
-	}) : /* @__PURE__ */ jsx(CustomDisplay, {
-		display,
-		list: displayRows
-	});
+	const drawDisplay = () => {
+		if (!display) return table;
+		if (display.kind === "cards") return /* @__PURE__ */ jsx(CardsDisplay, {
+			model,
+			view,
+			display,
+			list: displayRows
+		});
+		if (display.kind === "map") return /* @__PURE__ */ jsx(MapDisplay, {
+			model,
+			view,
+			display,
+			list: displayRows
+		});
+		return /* @__PURE__ */ jsx(CustomDisplay, {
+			display,
+			list: displayRows
+		});
+	};
+	const shown = drawDisplay();
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex min-h-0 flex-1 flex-col gap-3 px-5 py-4",
 		children: [

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

@@ -4,7 +4,7 @@ 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";
-import { Map, Marker, NavigationControl } from "react-map-gl/maplibre";
+import { Map as Map$1, Marker, NavigationControl } from "react-map-gl/maplibre";
 //#region src/app/map/record-map.tsx
 maplibre.setWorkerUrl(workerUrl);
 maplibre.addProtocol("pmtiles", new Protocol().tile);
@@ -12,7 +12,7 @@ maplibre.addProtocol("pmtiles", new Protocol().tile);
 * A map of `style` centred on `position` at `zoom`, with a pin on it. It pans and zooms with two fingers on a phone and
 * with Ctrl or Cmd and the wheel, so scrolling the page past it does not move it.
 */
-const RecordMap = ({ style, position, zoom }) => /* @__PURE__ */ jsxs(Map, {
+const RecordMap = ({ style, position, zoom }) => /* @__PURE__ */ jsxs(Map$1, {
 	mapLib: maplibre,
 	mapStyle: style,
 	initialViewState: {

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

@@ -0,0 +1,106 @@
+import { cn } from "../../lib/cn.js";
+import { groupPoints, pointBounds } from "../displays/map-groups.js";
+import { useEffect, useRef, useState } from "react";
+import { MapPin } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as maplibre from "maplibre-gl";
+import { Map as Map$1, Marker, NavigationControl } from "react-map-gl/maplibre";
+//#region src/app/map/records-map.tsx
+const groupRadius = 28;
+const fitOptions = {
+	padding: 48,
+	maxZoom: 15,
+	duration: 0
+};
+const markerHeight = 32;
+/**
+* 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.
+*/
+const RecordsMap = ({ style, points, selected, covered, onSelect, onClear, markerLabel }) => {
+	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 regroup = () => {
+		const map = ref.current?.getMap();
+		if (!map) return;
+		setGroups(groupPoints(points.map((point) => ({
+			key: point.key,
+			...map.project([point.longitude, point.latitude])
+		})), groupRadius));
+	};
+	useEffect(() => {
+		const map = ref.current?.getMap();
+		if (!map) return;
+		if (bounds) map.fitBounds(bounds, fitOptions);
+		regroup();
+	}, [pointKeys]);
+	const chosenAt = groups.find((group) => selected !== void 0 && group.keys.some((key) => selected.includes(key)))?.at;
+	useEffect(() => {
+		const map = ref.current?.getMap();
+		const at = chosenAt === void 0 ? void 0 : byKey.get(chosenAt);
+		if (!map || !at || covered === 0) return;
+		const { y } = map.project([at.longitude, at.latitude]);
+		const open = map.getContainer().clientHeight - covered;
+		if (y > markerHeight && y < open) return;
+		map.easeTo({
+			center: [at.longitude, at.latitude],
+			offset: [0, (markerHeight - covered) / 2],
+			duration: 300
+		});
+	}, [chosenAt, covered]);
+	return /* @__PURE__ */ jsxs(Map$1, {
+		ref,
+		mapLib: maplibre,
+		mapStyle: style,
+		initialViewState: bounds ? {
+			bounds,
+			fitBoundsOptions: fitOptions
+		} : {
+			latitude: 0,
+			longitude: 0,
+			zoom: 1
+		},
+		style: {
+			width: "100%",
+			height: "100%"
+		},
+		onLoad: regroup,
+		onZoomEnd: regroup,
+		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", {
+					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
+export { RecordsMap };

package/dist/app/named-icon.js

@@ -1,11 +1,12 @@
-import { FileText, RulerDimensionLine, Send, Wallet } from "lucide-react";
+import { Bed, FileText, RulerDimensionLine, Send, Wallet } from "lucide-react";
 //#region src/app/named-icon.ts
 /** The icons an action's or a field's `icon` may name. */
 const byName = {
 	wallet: Wallet,
 	"file-text": FileText,
 	send: Send,
-	ruler: RulerDimensionLine
+	ruler: RulerDimensionLine,
+	bed: Bed
 };
 /** The icon a name stands for, or nothing for a name the app does not know. */
 const namedIcon = (name) => name !== void 0 && Object.hasOwn(byName, name) ? byName[name] : void 0;

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

@@ -2,10 +2,10 @@ 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 { useAdminMeta } from "../meta-gate.js";
-import { AppLink } from "../use-app-address.js";
 import { fileShown } 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 { useShownWidget } from "../field-types/shown-widget.js";
 import { WidgetPart } from "../field-types/widget-part.js";
 import { ValueBadge } from "../value-badge.js";

package/dist/app/record-page.js

@@ -7,10 +7,10 @@ import { useRecord } from "../data/use-record.js";
 import { recordTitle } from "../live/model-helpers.js";
 import { humanize } from "../live/naming.js";
 import { useProjectUi } from "./pages/project-ui.js";
+import { displayValue } from "../live/display-value.js";
 import { Notice, useAdminMeta, usePermissions } from "./meta-gate.js";
 import { useNavigationGuard, useRouter } from "./router.js";
 import { useAppAddress } from "./use-app-address.js";
-import { displayValue } from "../live/display-value.js";
 import { ErrorBanner } from "./error-banner.js";
 import { shownWidget } from "./field-types/shown-widget.js";
 import { WidgetPart } from "./field-types/widget-part.js";

package/dist/package.js

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