@protobase/ui 0.12.20 → 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/app-shell/app-shell.d.ts

@@ -2,4 +2,5 @@ import "./bottom-bar.js";
 import "./nav.js";
 import "./profile-menu.js";
 import "./global-search.js";
+import "./breadcrumb.js";
 import { ReactNode } from "react";

package/dist/app-shell/back-target.js

@@ -0,0 +1,12 @@
+//#region src/app-shell/back-target.ts
+/** Where the mobile back button goes: the crumb just before the current page, when it has a page of its own. */
+const backTarget = (parts) => {
+	const previous = parts.at(-2);
+	if (typeof previous !== "object" || !previous.href || previous.loading) return void 0;
+	return {
+		label: previous.label,
+		href: previous.href
+	};
+};
+//#endregion
+export { backTarget };

package/dist/app-shell/breadcrumb.d.ts

@@ -0,0 +1 @@
+import "react";

package/dist/app-shell/breadcrumb.js

@@ -3,6 +3,7 @@ import { Skeleton } from "../primitives/skeleton.js";
 import { ChevronRight } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app-shell/breadcrumb.tsx
+/** A plain left click, which the app follows itself; others open a new tab. */
 const inApp = (event) => event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey;
 /** The trail of where you are; the last crumb, the current page, shows on phones too. */
 const Breadcrumb = ({ parts, onNavigate }) => /* @__PURE__ */ jsx("nav", {
@@ -41,4 +42,4 @@ const Breadcrumb = ({ parts, onNavigate }) => /* @__PURE__ */ jsx("nav", {
 	})
 });
 //#endregion
-export { Breadcrumb };
+export { Breadcrumb, inApp };

package/dist/app-shell/index.d.ts

@@ -3,6 +3,7 @@ import "./nav.js";
 import "./profile-menu.js";
 import { SidebarMode, sidebarModes } from "./sidebar-mode.js";
 import "./global-search.js";
+import "./breadcrumb.js";
 import "./app-shell.js";
 import "./page-header.js";
 import "./sidebar.js";

package/dist/app-shell/top-bar.js

@@ -1,13 +1,15 @@
 import { cn } from "../lib/cn.js";
-import { Breadcrumb } from "./breadcrumb.js";
+import { backTarget } from "./back-target.js";
+import { Breadcrumb, inApp } from "./breadcrumb.js";
 import { GlobalSearch } from "./global-search.js";
 import { useEffect, useRef, useState } from "react";
-import { Menu, Search, X } from "lucide-react";
+import { ChevronLeft, Menu, Search, X } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app-shell/top-bar.tsx
 const iconButton = "inline-flex size-11 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-muted md:hidden";
 const TopBar = ({ breadcrumb, onNavigate, actions, onMenu, menuOpen, menuControls, search }) => {
 	const [searchOpen, setSearchOpen] = useState(false);
+	const back = backTarget(breadcrumb);
 	const desktopSearch = useRef(null);
 	useEffect(() => {
 		if (!search) return;
@@ -33,6 +35,17 @@ const TopBar = ({ breadcrumb, onNavigate, actions, onMenu, menuOpen, menuControl
 				className: cn(iconButton, "-ml-0.5"),
 				children: /* @__PURE__ */ jsx(Menu, { className: "size-5" })
 			}),
+			back && /* @__PURE__ */ jsx("a", {
+				href: back.href,
+				"aria-label": `Back to ${back.label}`,
+				onClick: (event) => {
+					if (!onNavigate || !inApp(event)) return;
+					event.preventDefault();
+					onNavigate(back.href);
+				},
+				className: cn(iconButton, !onMenu && "-ml-0.5"),
+				children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-5" })
+			}),
 			/* @__PURE__ */ jsx(Breadcrumb, {
 				parts: breadcrumb,
 				onNavigate

package/dist/package.js

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