@protobase/ui 0.19.3 → 0.19.5

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

@@ -1,3 +1,4 @@
+import { MapLayerSwitch } from "./map-layer-switch.js";
 import { mapLib } from "./maplibre.js";
 import { MapPin } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -5,9 +6,9 @@ import { Map as Map$1, Marker, NavigationControl } from "react-map-gl/maplibre";
 //#region src/app/map/record-map.tsx
 /**
 * 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.
+* with Ctrl or Cmd and the wheel, so scrolling the page past it does not move it. With `layers`, it switches to them.
 */
-const RecordMap = ({ style, position, zoom }) => /* @__PURE__ */ jsxs(Map$1, {
+const RecordMap = ({ style, layers, position, zoom }) => /* @__PURE__ */ jsxs(Map$1, {
 	mapLib,
 	mapStyle: style,
 	initialViewState: {
@@ -19,16 +20,20 @@ const RecordMap = ({ style, position, zoom }) => /* @__PURE__ */ jsxs(Map$1, {
 		width: "100%",
 		height: "100%"
 	},
-	children: [/* @__PURE__ */ jsx(NavigationControl, { showCompass: false }), /* @__PURE__ */ jsx(Marker, {
-		latitude: position.latitude,
-		longitude: position.longitude,
-		anchor: "bottom",
-		children: /* @__PURE__ */ jsx(MapPin, {
-			"aria-hidden": true,
-			className: "size-8 fill-primary text-primary-foreground drop-shadow",
-			strokeWidth: 1.5
+	children: [
+		/* @__PURE__ */ jsx(NavigationControl, { showCompass: false }),
+		/* @__PURE__ */ jsx(MapLayerSwitch, { layers }),
+		/* @__PURE__ */ jsx(Marker, {
+			latitude: position.latitude,
+			longitude: position.longitude,
+			anchor: "bottom",
+			children: /* @__PURE__ */ jsx(MapPin, {
+				"aria-hidden": true,
+				className: "size-8 fill-primary text-primary-foreground drop-shadow",
+				strokeWidth: 1.5
+			})
 		})
-	})]
+	]
 });
 //#endregion
 export { RecordMap };

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

@@ -1,7 +1,8 @@
 import { cn } from "../../lib/cn.js";
 import { groupPoints } from "../displays/map-groups.js";
+import { MapLayerSwitch } from "./map-layer-switch.js";
 import { mapLib } from "./maplibre.js";
-import { PositionAreas } from "./position-areas.js";
+import { PositionAreas, areaLayerId } from "./position-areas.js";
 import { themeColor } from "./theme-color.js";
 import { useEffect, useRef, useState } from "react";
 import { MapPin } from "lucide-react";
@@ -32,7 +33,7 @@ const corners = (bounds) => [[bounds.west, bounds.south], [bounds.east, bounds.n
 * 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, initial, points, buckets, fit, onFitted, onMove, selected, covered, onSelect, onClear, markerLabel, bucketLabel }) => {
+const RecordsMap = ({ style, layers, initial, points, buckets, fit, onFitted, onMove, selected, covered, onSelect, onClear, markerLabel, bucketLabel }) => {
 	const ref = useRef(null);
 	const [groups, setGroups] = useState([]);
 	const [colors, setColors] = useState();
@@ -117,6 +118,10 @@ const RecordsMap = ({ style, initial, points, buckets, fit, onFitted, onMove, se
 		onClick: onClear,
 		children: [
 			/* @__PURE__ */ jsx(NavigationControl, { showCompass: false }),
+			/* @__PURE__ */ jsx(MapLayerSwitch, {
+				layers,
+				below: areaLayerId
+			}),
 			colors && /* @__PURE__ */ jsx(PositionAreas, {
 				points,
 				selected,

package/dist/app/named-icon.js

@@ -1,4 +1,4 @@
-import { Bed, Bell, Bookmark, ExternalLink, FileText, Heart, RulerDimensionLine, Send, Wallet } from "lucide-react";
+import { Bath, Bed, Bell, Bookmark, Calendar, DoorOpen, ExternalLink, FileText, Heart, House, KeyRound, LandPlot, Leaf, RulerDimensionLine, Send, Tag, Wallet } from "lucide-react";
 //#region src/app/named-icon.ts
 /** The icons an action's, a field's or a sign-in prompt's `icon` may name. */
 const byName = {
@@ -7,6 +7,14 @@ const byName = {
 	send: Send,
 	ruler: RulerDimensionLine,
 	bed: Bed,
+	bath: Bath,
+	house: House,
+	"door-open": DoorOpen,
+	"land-plot": LandPlot,
+	leaf: Leaf,
+	tag: Tag,
+	key: KeyRound,
+	calendar: Calendar,
 	heart: Heart,
 	bell: Bell,
 	bookmark: Bookmark,

package/dist/app/record-page.js

@@ -10,6 +10,7 @@ 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 { filledFields } from "./filled-fields.js";
 import { Notice, useAdminMeta, usePermissions } from "./meta-gate.js";
 import { AppLink, useAppAddress } from "./use-app-address.js";
 import { ErrorBanner } from "./error-banner.js";
@@ -22,9 +23,11 @@ import { Section } from "../record-view/section.js";
 import { MetadataCard, RelatedRecords, SidebarCard } from "../record-view/record-sidebar.js";
 import { RecordHeader } from "../record-view/record-header.js";
 import { SpecTable } from "../record-view/spec-table.js";
+import { KeyFacts } from "../record-view/key-facts.js";
 import { toneFor } from "../live/columns-from-model.js";
 import { useDeleteFlow } from "./delete/use-delete-flow.js";
 import { useRestore } from "./delete/use-restore.js";
+import { namedIcon } from "./named-icon.js";
 import { ValueBadge } from "./value-badge.js";
 import { FieldValue } from "./pages/field-value.js";
 import { auditField } from "../live/audit-fields.js";
@@ -375,12 +378,18 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 										recordKey
 									}, `gallery:${index}`)];
 									if (item.kind !== "section") return [];
-									const fields = item.fields.filter((name) => model.fields[name] && visible(name));
+									const visibleFields = item.fields.filter((name) => model.fields[name] && visible(name));
+									const facts = shown === "read" && item.presentation === "facts";
+									const fields = facts ? filledFields(stored.record, visibleFields) : visibleFields;
 									if (fields.length === 0) return [];
 									return [/* @__PURE__ */ jsx(Section, {
 										title: item.title,
 										help: helpShown(item.helpWhen, view, editing) ? item.help : void 0,
-										children: shown === "read" ? /* @__PURE__ */ jsx(SpecTable, { rows: fields.map(readRow) }) : /* @__PURE__ */ jsx("div", {
+										children: facts ? /* @__PURE__ */ jsx(KeyFacts, { facts: fields.map((name) => ({
+											label: readRow(name).label,
+											value: readRow(name).value,
+											icon: namedIcon(hint(name)?.icon)
+										})) }) : shown === "read" ? /* @__PURE__ */ jsx(SpecTable, { rows: fields.map(readRow) }) : /* @__PURE__ */ jsx("div", {
 											className: "grid grid-cols-1 gap-x-6 gap-y-5 sm:grid-cols-2",
 											children: fields.map(fieldView)
 										})

package/dist/auth/sign-in-prompt.js

@@ -2,8 +2,8 @@ import { RouteLink } from "../primitives/route-link.js";
 import { useAuth } from "./auth-provider.js";
 import { Button, buttonClass } from "../primitives/button.js";
 import { useSignInAddress } from "./use-sign-in-address.js";
-import { namedIcon } from "../app/named-icon.js";
 import { ResponsiveDialog } from "../primitives/responsive-dialog.js";
+import { namedIcon } from "../app/named-icon.js";
 import { useId } from "react";
 import { Check, LogIn } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/dist/data/api-provider.js

@@ -1,5 +1,5 @@
 import { keys } from "./query-keys.js";
-import { createContext, useContext, useMemo, useRef, useState } from "react";
+import { createContext, useCallback, useContext, useMemo, useRef, useState } from "react";
 import { createClient } from "@protobase/client";
 import { jsx } from "react/jsx-runtime";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
@@ -21,6 +21,12 @@ const useResourceClient = (resource) => {
 	const own = useClient();
 	return useContext(ResourceClientContext)?.(resource) ?? own;
 };
+/** `useResourceClient` for any resource: the client of the API that serves each, for code that reaches several. */
+const useResourceClients = () => {
+	const own = useClient();
+	const resourceClient = useContext(ResourceClientContext);
+	return useCallback((resource) => resourceClient?.(resource) ?? own, [own, resourceClient]);
+};
 /** The client of a source's API, one per URL, with the signed-in user's token; for `MetaGate`. */
 const useSourceClients = () => {
 	const clientOf = useContext(SourceClientsContext);
@@ -104,4 +110,4 @@ const ApiProvider = ({ baseUrl, client: given, sources, fetch, queryClient: give
 	});
 };
 //#endregion
-export { ApiProvider, ClientProvider, useClient, useResourceClient, useSourceClients };
+export { ApiProvider, ClientProvider, useClient, useResourceClient, useResourceClients, useSourceClients };

package/dist/data/meta-data.d.ts

@@ -1,4 +1,4 @@
-import { PluginRef, ResourcePermissions, SourceRef } from "@protobase/client";
+import { MapLayerModel, PluginRef, ResourcePermissions, SourceRef } from "@protobase/client";
 import { BottomBarModel, ResourceModel, SignInViewModel, UserMenuModel, ViewModel } from "@protobase/schema";
 import { PageModel } from "@protobase/layout";
 //#region src/data/meta-data.d.ts
@@ -27,9 +27,10 @@ export type MetaData = {
     dsn: string;
     environment?: string;
   };
-  /** The map style the record page's maps are drawn with, when the app has one (see `MapSection`). */
+  /** The map style the app's maps are drawn with, and the layers they may switch to, when the app has one (see `MapSection`). */
   maps?: {
     style: string;
+    layers?: MapLayerModel[];
   };
   /** The hosts besides the app's own whose images are drawn with the page's referrer (see `FileImage`). */
   files?: {

package/dist/lib/save-file.js

@@ -0,0 +1,12 @@
+//#region src/lib/save-file.ts
+/** Hands the browser a file to save under `name`, made from `text`. */
+const saveFile = (text, name, type = "text/plain") => {
+	const url = URL.createObjectURL(new Blob([text], { type }));
+	Object.assign(document.createElement("a"), {
+		href: url,
+		download: name
+	}).click();
+	URL.revokeObjectURL(url);
+};
+//#endregion
+export { saveFile };

package/dist/lib/use-focus-trap.js

@@ -2,9 +2,11 @@ import { lockPageScroll } from "./page-scroll-lock.js";
 import { useEffect, useRef } from "react";
 //#region src/lib/use-focus-trap.ts
 const focusable = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
+const stack = [];
 /**
 * While `active`: moves focus into `container`, keeps Tab inside it, locks page scrolling (see `lockPageScroll`),
-* calls `onEscape` on Escape, and returns focus to the previously focused element afterwards.
+* calls `onEscape` on Escape, and returns focus to the previously focused element afterwards. A trap opened while
+* another is active takes Tab and Escape until it ends.
 */
 const useFocusTrap = (container, active, onEscape) => {
 	const escape = useRef(onEscape);
@@ -14,9 +16,12 @@ const useFocusTrap = (container, active, onEscape) => {
 		const root = container.current;
 		const previous = document.activeElement instanceof HTMLElement ? document.activeElement : null;
 		const unlock = lockPageScroll();
+		const token = {};
+		stack.push(token);
 		const items = () => [...root.querySelectorAll(focusable)];
 		(items()[0] ?? root).focus();
 		const onKey = (event) => {
+			if (stack.at(-1) !== token) return;
 			if (event.key === "Escape") return escape.current();
 			if (event.key !== "Tab") return;
 			const list = items();
@@ -37,6 +42,7 @@ const useFocusTrap = (container, active, onEscape) => {
 		document.addEventListener("keydown", onKey);
 		return () => {
 			document.removeEventListener("keydown", onKey);
+			stack.splice(stack.indexOf(token), 1);
 			unlock();
 			previous?.focus();
 		};

package/dist/package.js

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

package/dist/primitives/sheet-swipe.js

@@ -0,0 +1,5 @@
+//#region src/primitives/sheet-swipe.ts
+/** Whether a drag closes a sheet: mostly downwards, by 60 pixels or more. */
+const closesSheet = (dx, dy) => dy >= 60 && dy > Math.abs(dx);
+//#endregion
+export { closesSheet };

package/dist/primitives/sheet.js

@@ -1,13 +1,31 @@
 import { useFocusTrap } from "../lib/use-focus-trap.js";
+import { closesSheet } from "./sheet-swipe.js";
 import { useRef } from "react";
 import { X } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/primitives/sheet.tsx
-/** A panel that rises from the bottom of the screen, for the filter panel on phones. */
+/**
+* A panel that rises from the bottom of the screen, for the filter panel on mobile screens. It closes on Escape, the
+* close button, a press above it and a swipe down on its header. Its content scrolls inside it when taller than the
+* panel, which stops short of the top so the screen behind stays in sight.
+*/
 const Sheet = ({ title, open, onClose, children }) => {
 	const panel = useRef(null);
+	const start = useRef(void 0);
 	useFocusTrap(panel, open, onClose);
 	if (!open) return null;
+	const down = (event) => {
+		if (event.pointerType === "touch") start.current = {
+			x: event.clientX,
+			y: event.clientY
+		};
+	};
+	const up = (event) => {
+		if (!start.current) return;
+		const closes = closesSheet(event.clientX - start.current.x, event.clientY - start.current.y);
+		start.current = void 0;
+		if (closes) onClose();
+	};
 	return /* @__PURE__ */ jsxs("div", {
 		className: "fixed inset-0 z-[80]",
 		children: [/* @__PURE__ */ jsx("div", {
@@ -22,17 +40,27 @@ const Sheet = ({ title, open, onClose, children }) => {
 			tabIndex: -1,
 			className: "absolute inset-x-0 bottom-0 flex max-h-[85vh] flex-col rounded-t-xl border-t bg-background shadow-pop outline-none",
 			children: [/* @__PURE__ */ jsxs("header", {
-				className: "flex shrink-0 items-center justify-between border-b px-4",
-				children: [/* @__PURE__ */ jsx("h2", {
-					className: "text-[15px] font-semibold",
-					children: title
-				}), /* @__PURE__ */ jsx("button", {
-					type: "button",
-					"aria-label": "Close",
-					onClick: onClose,
-					className: "-mr-2 inline-flex size-11 items-center justify-center rounded-md text-muted-foreground hover:bg-muted",
-					children: /* @__PURE__ */ jsx(X, { className: "size-5" })
-				})]
+				className: "relative flex shrink-0 touch-none items-center justify-between border-b px-4",
+				onPointerDown: down,
+				onPointerUp: up,
+				onPointerCancel: () => start.current = void 0,
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "absolute left-1/2 top-1.5 h-1 w-9 -translate-x-1/2 rounded-full bg-border-strong",
+						"aria-hidden": true
+					}),
+					/* @__PURE__ */ jsx("h2", {
+						className: "text-[15px] font-semibold",
+						children: title
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": "Close",
+						onClick: onClose,
+						className: "-mr-2 inline-flex size-11 items-center justify-center rounded-md text-muted-foreground hover:bg-muted",
+						children: /* @__PURE__ */ jsx(X, { className: "size-5" })
+					})
+				]
 			}), /* @__PURE__ */ jsx("div", {
 				className: "min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 pb-6",
 				children

package/dist/record-view/key-facts.js

@@ -0,0 +1,29 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/record-view/key-facts.tsx
+/**
+* A record's key facts side by side, as the bedrooms, area and energy label of a listing on a real estate site: each
+* value under its icon, or under its label without one, wrapping onto more rows as needed, two to a row on a mobile
+* screen.
+*/
+const KeyFacts = ({ facts }) => /* @__PURE__ */ jsx("dl", {
+	className: "grid grid-cols-2 gap-x-4 gap-y-5 text-[13px] sm:flex sm:flex-wrap sm:gap-x-10",
+	children: facts.map(({ label, value, icon: Icon }) => /* @__PURE__ */ jsxs("div", {
+		title: label,
+		className: "flex min-w-0 flex-col gap-1.5",
+		children: [/* @__PURE__ */ jsx("dt", {
+			className: "text-muted-foreground",
+			children: Icon ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Icon, {
+				className: "size-5",
+				"aria-hidden": true
+			}), /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: label
+			})] }) : label
+		}), /* @__PURE__ */ jsx("dd", {
+			className: "min-w-0 break-words text-[15px] font-semibold text-foreground",
+			children: value
+		})]
+	}, label))
+});
+//#endregion
+export { KeyFacts };