@protobase/ui 0.15.4 → 0.16.0

package/dist/app/map/position-areas.js

@@ -0,0 +1,78 @@
+import { areaFeatures, fadeIn } from "./area-features.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Layer, Source } from "react-map-gl/maplibre";
+//#region src/app/map/position-areas.tsx
+const polygons = [
+	"==",
+	["get", "kind"],
+	"polygon"
+];
+const lines = [
+	"==",
+	["get", "kind"],
+	"line"
+];
+const chosen = (yes, no) => [
+	"case",
+	["get", "chosen"],
+	yes,
+	no
+];
+/**
+* The areas around the approximate positions among `points`, drawn under the markers in the markers' colour: a polygon
+* filled faintly within a dashed outline, a line such as a street as a wide stroke. Each fades in as the map zooms close
+* enough for it to be larger than a marker, and the chosen records' areas are drawn darker. Nothing without areas.
+*/
+const PositionAreas = ({ points, selected, colors }) => {
+	const data = areaFeatures(points, selected);
+	if (data.features.length === 0) return null;
+	const color = [
+		"case",
+		["get", "chosen"],
+		colors.chosen,
+		colors.area
+	];
+	return /* @__PURE__ */ jsxs(Source, {
+		id: "position-areas",
+		type: "geojson",
+		data,
+		children: [
+			/* @__PURE__ */ jsx(Layer, {
+				id: "position-area-fills",
+				type: "fill",
+				filter: polygons,
+				paint: {
+					"fill-color": color,
+					"fill-opacity": fadeIn(chosen(.15, .1))
+				}
+			}),
+			/* @__PURE__ */ jsx(Layer, {
+				id: "position-area-outlines",
+				type: "line",
+				filter: polygons,
+				paint: {
+					"line-color": color,
+					"line-width": 1.5,
+					"line-dasharray": [3, 2],
+					"line-opacity": fadeIn(.8)
+				}
+			}),
+			/* @__PURE__ */ jsx(Layer, {
+				id: "position-area-lines",
+				type: "line",
+				filter: lines,
+				layout: {
+					"line-cap": "round",
+					"line-join": "round"
+				},
+				paint: {
+					"line-color": color,
+					"line-width": 6,
+					"line-opacity": fadeIn(chosen(.6, .35))
+				}
+			})
+		]
+	});
+};
+//#endregion
+export { PositionAreas };

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

@@ -1,19 +1,14 @@
+import { mapLib } from "./maplibre.js";
 import { MapPin } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
-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 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);
 /**
 * 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$1, {
-	mapLib: maplibre,
+	mapLib,
 	mapStyle: style,
 	initialViewState: {
 		...position,

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

@@ -1,13 +1,14 @@
 //#region src/app/map/record-position.ts
-const degrees = (value) => {
+/** A number field's value: it comes as a number, or as text for a decimal or bigint; anything else, or an empty value, is none. */
+const numeric = (value) => {
 	if (typeof value === "number") return value;
 	if (typeof value !== "string" || value.trim() === "") return void 0;
 	return Number(value);
 };
 /** The record's position from its two fields, when both hold degrees on the globe; none otherwise, so no map is drawn. */
 const recordPosition = (record, fields) => {
-	const latitude = degrees(record[fields.latitude]);
-	const longitude = degrees(record[fields.longitude]);
+	const latitude = numeric(record[fields.latitude]);
+	const longitude = numeric(record[fields.longitude]);
 	if (latitude === void 0 || longitude === void 0) return void 0;
 	if (!(Math.abs(latitude) <= 90 && Math.abs(longitude) <= 180)) return void 0;
 	return {
@@ -16,4 +17,4 @@ const recordPosition = (record, fields) => {
 	};
 };
 //#endregion
-export { recordPosition };
+export { numeric, recordPosition };

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

@@ -1,9 +1,11 @@
 import { cn } from "../../lib/cn.js";
 import { groupPoints } from "../displays/map-groups.js";
+import { mapLib } from "./maplibre.js";
+import { PositionAreas } from "./position-areas.js";
+import { themeColor } from "./theme-color.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;
@@ -25,13 +27,15 @@ const compact = new Intl.NumberFormat("en-IE", {
 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, 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.
+* stands for, and a circle with the count of each bucket, which zooms in on its records when chosen. A marker whose
+* records' positions are all approximate is drawn hollow with a dashed edge, over the areas around them. 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, initial, points, buckets, fit, onFitted, onMove, selected, covered, onSelect, onClear, markerLabel, bucketLabel }) => {
 	const ref = useRef(null);
 	const [groups, setGroups] = useState([]);
+	const [colors, setColors] = useState();
 	const byKey = new globalThis.Map(points.map((point) => [point.key, point]));
 	const pointKeys = points.map((point) => point.key).join(",");
 	const fitKey = fit && JSON.stringify(fit);
@@ -87,7 +91,7 @@ const RecordsMap = ({ style, initial, points, buckets, fit, onFitted, onMove, se
 	}, [chosenAt, covered]);
 	return /* @__PURE__ */ jsxs(Map$1, {
 		ref,
-		mapLib: maplibre,
+		mapLib,
 		mapStyle: style,
 		initialViewState: initial ?? {
 			latitude: 0,
@@ -99,6 +103,11 @@ const RecordsMap = ({ style, initial, points, buckets, fit, onFitted, onMove, se
 			height: "100%"
 		},
 		onLoad: () => {
+			const container = ref.current.getMap().getContainer();
+			setColors({
+				area: themeColor(container, "--primary"),
+				chosen: themeColor(container, "--foreground")
+			});
 			regroup();
 			if (fit) fitNow();
 			else report();
@@ -108,6 +117,11 @@ const RecordsMap = ({ style, initial, points, buckets, fit, onFitted, onMove, se
 		onClick: onClear,
 		children: [
 			/* @__PURE__ */ jsx(NavigationControl, { showCompass: false }),
+			colors && /* @__PURE__ */ jsx(PositionAreas, {
+				points,
+				selected,
+				colors
+			}),
 			buckets.map((bucket) => /* @__PURE__ */ jsx(Marker, {
 				latitude: bucket.latitude,
 				longitude: bucket.longitude,
@@ -127,6 +141,7 @@ const RecordsMap = ({ style, initial, points, buckets, fit, onFitted, onMove, se
 				const at = byKey.get(group.at);
 				if (!at) return null;
 				const chosen = selected !== void 0 && group.keys.some((key) => selected.includes(key));
+				const approximate = group.keys.every((key) => byKey.get(key)?.approximate);
 				return /* @__PURE__ */ jsx(Marker, {
 					latitude: at.latitude,
 					longitude: at.longitude,
@@ -143,8 +158,10 @@ const RecordsMap = ({ style, initial, points, buckets, fit, onFitted, onMove, se
 						},
 						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
+							"data-approximate": approximate || void 0,
+							className: cn("size-8 drop-shadow", approximate ? chosen ? "fill-background text-foreground" : "fill-background text-primary" : chosen ? "fill-foreground text-background" : "fill-primary text-primary-foreground"),
+							strokeWidth: approximate ? 2 : 1.5,
+							strokeDasharray: approximate ? "3 2" : void 0
 						}), 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

package/dist/app/map/theme-color.js

@@ -0,0 +1,23 @@
+//#region src/app/map/theme-color.ts
+/**
+* The colour a theme token such as `--primary` holds where `element` is, as `rgba()`, which MapLibre's paint reads
+* whatever the theme writes it in: the browser resolves the token, and a pixel painted with it gives its channels.
+*/
+const themeColor = (element, token) => {
+	const probe = document.createElement("span");
+	probe.style.color = `var(${token})`;
+	element.append(probe);
+	const resolved = getComputedStyle(probe).color;
+	probe.remove();
+	const canvas = document.createElement("canvas");
+	canvas.width = 1;
+	canvas.height = 1;
+	const context = canvas.getContext("2d", { willReadFrequently: true });
+	if (!context) return resolved;
+	context.fillStyle = resolved;
+	context.fillRect(0, 0, 1, 1);
+	const [red, green, blue, alpha] = context.getImageData(0, 0, 1, 1).data;
+	return `rgba(${red}, ${green}, ${blue}, ${alpha / 255})`;
+};
+//#endregion
+export { themeColor };

package/dist/app/meta-gate.js

@@ -15,7 +15,7 @@ const useAdminMeta = () => {
 	return meta;
 };
 const Notice = ({ title, children }) => /* @__PURE__ */ jsx("div", {
-	className: "flex h-full min-h-48 items-center justify-center p-8",
+	className: "flex h-full min-h-48 flex-1 items-center justify-center p-8",
 	children: /* @__PURE__ */ jsxs("div", {
 		className: "max-w-md text-center",
 		children: [/* @__PURE__ */ jsx("h1", {

package/dist/app/nav-recent.js

@@ -1,7 +1,7 @@
 import { recordKey, recordTitle, recordTitleField } from "../live/model-helpers.js";
 import { defaultOrderBy } from "./list-order.js";
-import { defaultRecentLimit, encodeKey } from "@protobase/schema/internal";
 import { appPath, enumLabel } from "@protobase/schema";
+import { defaultRecentLimit, encodeKey } from "@protobase/schema/internal";
 //#region src/app/nav-recent.ts
 /** The list request behind a sidebar group: its filter, order (the list's sort when unset), size, and only the fields it shows. */
 const recentRequest = (model, view, recent) => ({

package/dist/app/pages/blocks/card-frame.js

@@ -2,7 +2,7 @@ import { cn } from "../../../lib/cn.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/pages/blocks/card-frame.tsx
 /** The card every block that shows a box uses: title, description and header actions over the body. */
-const CardFrame = ({ title, description, actions, className, children }) => /* @__PURE__ */ jsxs("section", {
+const CardFrame = ({ title, description, actions, className, bodyClassName, children }) => /* @__PURE__ */ jsxs("section", {
 	className: cn("flex min-w-0 flex-col rounded-lg border border-border bg-background", className),
 	"aria-label": title,
 	children: [(title || description || actions) && /* @__PURE__ */ jsxs("header", {
@@ -21,7 +21,7 @@ const CardFrame = ({ title, description, actions, className, children }) => /* @
 			children: actions
 		})]
 	}), /* @__PURE__ */ jsx("div", {
-		className: "min-w-0 flex-1 p-4 text-[13px]",
+		className: cn("min-w-0 flex-1 p-4 text-[13px]", bodyClassName),
 		children
 	})]
 });

package/dist/app/pages/blocks/grid.js

@@ -8,18 +8,26 @@ const columns = {
 	3: "md:grid-cols-2 xl:grid-cols-3",
 	4: "sm:grid-cols-2 xl:grid-cols-4"
 };
+const statColumns = {
+	1: "",
+	2: "grid-cols-2",
+	3: "grid-cols-2 xl:grid-cols-3",
+	4: "grid-cols-2 xl:grid-cols-4"
+};
 const spans = {
 	1: "",
 	2: "md:col-span-2",
 	3: "md:col-span-2 xl:col-span-3",
 	4: "sm:col-span-2 md:col-span-2 xl:col-span-4"
 };
-/** Columns that collapse to one on a phone; a child's `span` makes it wider. */
+const isStat = (child) => typeof child === "object" && !child.custom && child.type === "Stat";
+/** Columns that collapse to one on a phone, or two when it holds only `Stat`s; a child's `span` makes it wider. */
 const GridBlock = ({ node, children }) => {
 	const { columns: count = 2 } = propsOf(node);
 	const childNodes = node.children;
+	const stats = childNodes.length > 0 && childNodes.every(isStat);
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("grid grid-cols-1 gap-4", columns[count]),
+		className: cn("grid grid-cols-1 gap-4", stats ? statColumns[count] : columns[count]),
 		children: children.map((child, index) => {
 			const element = childNodes[index];
 			const span = typeof element === "object" ? element.props.span : void 0;

package/dist/app/pages/blocks/link.js

@@ -2,8 +2,8 @@ import { AppLink } from "../../use-app-address.js";
 import { useLayoutRecord } from "../record-scope.js";
 import { propsOf } from "./block-props.js";
 import { jsx } from "react/jsx-runtime";
-import { fillAddress } from "@protobase/schema/internal";
 import { appPath } from "@protobase/schema";
+import { fillAddress } from "@protobase/schema/internal";
 //#region src/app/pages/blocks/link.tsx
 const style = "font-medium text-primary-text hover:underline";
 /**

package/dist/app/pages/blocks/page-block.js

@@ -5,7 +5,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 const PageBlock = ({ node, children, slots }) => {
 	const { title, description } = propsOf(node);
 	return /* @__PURE__ */ jsx("div", {
-		className: "min-h-0 flex-1 overflow-y-auto",
+		className: "flex-1",
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "mx-auto flex max-w-[1200px] flex-col gap-6 px-4 pb-16 pt-6 md:px-10 md:py-8",
 			children: [/* @__PURE__ */ jsx(PageHeader, {

package/dist/app/pages/blocks/stat.js

@@ -23,7 +23,7 @@ const Count = ({ model, filter }) => {
 			resource: model.name,
 			filter
 		},
-		className: `${big} hover:text-primary-text`,
+		className: `${big} hover:text-primary-text after:absolute after:inset-0 after:content-['']`,
 		children: count.data.toLocaleString("en-IE")
 	});
 };
@@ -41,20 +41,24 @@ const RecordValue = ({ field, format }) => {
 		})
 	});
 };
-/** One number or value with a label: fixed, a count of matching records (linking to them), or a field of the record. */
+/**
+* One number or value with a label: fixed, a count of matching records (linking to them from anywhere on the card), or
+* a field of the record. A label that wraps pushes nothing out of line: the value sits at the card's bottom.
+*/
 const StatBlock = ({ node }) => {
 	const { label, value, resource, filter, field, format, description } = propsOf(node);
 	const { resources } = useAdminMeta();
 	const model = resource === void 0 ? void 0 : resources[resource];
 	return /* @__PURE__ */ jsxs(CardFrame, {
-		className: "h-full",
+		className: "relative h-full",
+		bodyClassName: "flex flex-col",
 		children: [
 			/* @__PURE__ */ jsx("p", {
-				className: "text-[13px] text-muted-foreground",
+				className: "text-[13px] text-muted-foreground break-words",
 				children: label
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: "mt-1",
+				className: "mt-auto pt-1",
 				children: [
 					value !== void 0 && /* @__PURE__ */ jsx("span", {
 						className: big,

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

@@ -77,7 +77,7 @@ const BuiltInValue = ({ model, field, value, format, relationLabel }) => {
 		children: text
 	});
 	return /* @__PURE__ */ jsx("span", {
-		className: cn(hints.format === "code" && "font-mono text-xs", (field.type === "decimal" || field.type === "integer") && "tabular-nums"),
+		className: cn(hints.format === "code" && "font-mono text-xs", (field.type === "decimal" || field.type === "integer") && "tabular-nums", hints.multiline && "whitespace-pre-line break-words"),
 		children: text
 	});
 };

package/dist/app/record-page.js

@@ -144,6 +144,7 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 			label: hint(name)?.label ?? humanize(name),
 			help: hint(name)?.help,
 			error: editor.errors[name],
+			wide: Boolean(hint(name)?.multiline),
 			conflict: conflict === void 0 ? void 0 : {
 				user: {
 					name: "Someone else",
@@ -181,7 +182,10 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 				value: stored.record[name],
 				hints: hint(name),
 				children: text
-			}) : /* @__PURE__ */ jsx("strong", { children: text });
+			}) : /* @__PURE__ */ jsx("strong", {
+				className: hint(name)?.multiline ? "whitespace-pre-line break-words" : void 0,
+				children: text
+			});
 			const shown = shownWidget(fieldTypes, field, hint(name));
 			return [{
 				label: hint(name)?.label ?? humanize(name),
@@ -234,11 +238,11 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 		})
 	] });
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex min-h-0 flex-1 flex-col",
+		className: "flex flex-1 flex-col",
 		children: [
 			remove.dialogs,
 			/* @__PURE__ */ jsx("div", {
-				className: "min-h-0 flex-1 overflow-y-auto",
+				className: "flex-1",
 				children: /* @__PURE__ */ jsxs("div", {
 					className: "mx-auto max-w-[1100px] px-4 pb-8 pt-6 md:px-10 md:py-8",
 					children: [
@@ -364,7 +368,7 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 				})
 			}),
 			(editor.dirty || canDelete || canUpdate) && /* @__PURE__ */ jsx("div", {
-				className: "flex shrink-0 items-center gap-2 border-t bg-background p-3 md:hidden",
+				className: "sticky bottom-[var(--pb-sticky-bottom,0px)] z-20 flex shrink-0 items-center gap-2 border-t bg-background p-3 md:hidden",
 				children: saveControls
 			})
 		]

package/dist/app/router.js

@@ -1,3 +1,4 @@
+import { RouteLink } from "../primitives/route-link.js";
 import { Button } from "../primitives/button.js";
 import { Dialog } from "../primitives/dialog.js";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
@@ -112,15 +113,13 @@ const Router = ({ basePath = "", initialUrl, children }) => {
 		})]
 	});
 };
-const Link = ({ to, onClick, ...rest }) => {
+/** A link to a path below the base path, as `appPath` writes it, that the router follows without reloading the page. */
+const Link = ({ to, replace, ...rest }) => {
 	const { navigate, basePath } = useRouter();
-	return /* @__PURE__ */ jsx("a", {
-		href: `${basePath}${to}`,
-		onClick: (event) => {
-			onClick?.(event);
-			if (event.defaultPrevented || event.metaKey || event.ctrlKey || event.button !== 0) return;
-			event.preventDefault();
-			navigate(to);
+	return /* @__PURE__ */ jsx(RouteLink, {
+		to: {
+			href: `${basePath}${to}`,
+			onFollow: () => navigate(to, { replace })
 		},
 		...rest
 	});

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

@@ -1,6 +1,6 @@
 import { recordKey } from "../../live/model-helpers.js";
-import { encodeKey } from "@protobase/schema/internal";
 import { createWhere } from "@protobase/schema";
+import { encodeKey } from "@protobase/schema/internal";
 //#region src/app/saved/saved-records.ts
 const where = createWhere();
 const relationValue = (value) => {

package/dist/app/search/search-model.js

@@ -1,7 +1,7 @@
 import { recordKey, recordTitleField } from "../../live/model-helpers.js";
 import { humanize } from "../../live/naming.js";
-import { encodeKey, matchedSearchField } from "@protobase/schema/internal";
 import { appPath, createWhere, enumLabel, printFilter } from "@protobase/schema";
+import { encodeKey, matchedSearchField } from "@protobase/schema/internal";
 //#region src/app/search/search-model.ts
 const where = createWhere();
 const searchTargets = (meta) => Object.values(meta.resources).flatMap((model) => {

package/dist/app/searches/use-save-search.js

@@ -20,7 +20,7 @@ const useSaveSearch = (search, filter, name) => {
 	const client = useClient();
 	const toast = useToast();
 	const refresh = useRefreshResource();
-	const { go } = useAppAddress();
+	const { href, open } = useAppAddress();
 	const { resource } = search;
 	const model = meta.resources[resource];
 	const of = meta.views[resource]?.searchesOf;
@@ -44,10 +44,11 @@ const useSaveSearch = (search, filter, name) => {
 				title: "Search saved",
 				action: {
 					label: `Open ${plural.toLowerCase()}`,
-					onClick: () => go({
+					href: href({
 						kind: "list",
 						resource
-					})
+					}),
+					onNavigate: open
 				}
 			});
 		},

package/dist/app/source-notice.js

@@ -14,7 +14,7 @@ const reason = (error) => {
 const SourceNotice = ({ status }) => {
 	const queryClient = useQueryClient();
 	if (status.state !== "error") return /* @__PURE__ */ jsxs("div", {
-		className: "flex h-full min-h-48 items-center justify-center gap-2 text-[13px] text-muted-foreground",
+		className: "flex h-full min-h-48 flex-1 items-center justify-center gap-2 text-[13px] text-muted-foreground",
 		children: [
 			/* @__PURE__ */ jsx(Spinner, {}),
 			" Loading from ",
@@ -22,7 +22,7 @@ const SourceNotice = ({ status }) => {
 		]
 	});
 	return /* @__PURE__ */ jsx("div", {
-		className: "flex h-full min-h-48 items-center justify-center p-8",
+		className: "flex h-full min-h-48 flex-1 items-center justify-center p-8",
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "max-w-md text-center",
 			children: [

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

@@ -27,7 +27,8 @@ const useRecordEditor = ({ model, stored, recordKey, mode, subject, draftKey, li
 	const [linesConflict, setLinesConflict] = useState(false);
 	const [conflicts, setConflicts] = useState({});
 	const [errors, setErrors] = useState({});
-	const fieldsDirty = Object.keys(draft).length > 0;
+	const changed = Object.entries(draft).filter(([name, entry]) => differs(model.fields[name], entry, stored.record[name]));
+	const fieldsDirty = changed.length > 0;
 	const dirty = fieldsDirty || Boolean(lines?.dirty);
 	useEffect(() => {
 		if (restored?.order) lines?.setOrder(restored.order);
@@ -52,7 +53,8 @@ const useRecordEditor = ({ model, stored, recordKey, mode, subject, draftKey, li
 	const value = (name) => name in draft ? draft[name] : ["boolean", "file"].includes(model.fields[name].type) ? stored.record[name] : toDraft(stored.record[name]);
 	const change = (name, next) => {
 		setErrors((current) => without(current, name));
-		setDraft((current) => differs(model.fields[name], next, stored.record[name]) ? {
+		const typed = typeof next === "string" ? next !== toDraft(stored.record[name]) : differs(model.fields[name], next, stored.record[name]);
+		setDraft((current) => typed ? {
 			...current,
 			[name]: next
 		} : without(current, name));
@@ -71,7 +73,7 @@ const useRecordEditor = ({ model, stored, recordKey, mode, subject, draftKey, li
 		setDraft(keep);
 		setConflicts(theirs);
 	};
-	const patchOf = () => Object.fromEntries(Object.entries(draft).map(([name, entry]) => [name, toPatchValue(model.fields[name], entry)]));
+	const patchOf = () => Object.fromEntries(changed.map(([name, entry]) => [name, toPatchValue(model.fields[name], entry)]));
 	const fieldErrors = (error) => isApiError(error) ? Object.fromEntries(error.errors.flatMap((entry) => entry.field ? [[entry.field, entry.message]] : [])) : {};
 	const saveRecordOnly = async () => {
 		try {

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

@@ -1,3 +1,4 @@
+import "../primitives/route-link.js";
 import "./bottom-bar.js";
 import "./nav.js";
 import "./profile-menu.js";

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

@@ -2,24 +2,26 @@ import { cn } from "../lib/cn.js";
 import { useIsDesktop } from "../lib/use-media-query.js";
 import { BottomBar } from "./bottom-bar.js";
 import { Drawer } from "./drawer.js";
-import { PageScrollContext, usePageInsets } from "./page-scroll.js";
+import { PageScrollContext, usePageGutter, usePageInsets } from "./page-scroll.js";
 import { Sidebar } from "./sidebar.js";
 import { TopBar } from "./top-bar.js";
 import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app-shell/app-shell.tsx
 const drawerId = "app-drawer";
-const AppShell = ({ sidebarMode, activeItem, breadcrumb, user, workspace, actions, rightPanel, forceExpanded, profileMenuOpen, navGroups, userMenu, bottomBar, onNavigate, onSignOut, onSignIn, organizations, roles, theme, search, className, children }) => {
+const AppShell = ({ sidebarMode, activeItem, breadcrumb, user, workspace, actions, rightPanel, forceExpanded, profileMenuOpen, navGroups, userMenu, bottomBar, onNavigate, onSignOut, signIn, organizations, roles, theme, search, pageScroll: scrollsByDefault = false, className, children }) => {
 	const desktop = useIsDesktop();
 	const [drawerOpen, setDrawerOpen] = useState(false);
 	useEffect(() => {
 		if (desktop) setDrawerOpen(false);
 	}, [desktop]);
 	const tabs = !desktop && bottomBar && bottomBar.length > 0 ? bottomBar : void 0;
-	const [pageScroll, setPageScroll] = useState(false);
+	const [chosen, setPageScroll] = useState();
+	const pageScroll = chosen ?? scrollsByDefault;
 	const topBarRef = useRef(null);
 	const bottomBarRef = useRef(null);
 	usePageInsets(pageScroll, topBarRef, bottomBarRef, Boolean(tabs));
+	usePageGutter(pageScroll);
 	const sidebar = (mode, sticky = false) => /* @__PURE__ */ jsx(Sidebar, {
 		mode,
 		sticky,
@@ -32,7 +34,7 @@ const AppShell = ({ sidebarMode, activeItem, breadcrumb, user, workspace, action
 		userMenu,
 		onNavigate,
 		onSignOut,
-		onSignIn,
+		signIn,
 		organizations,
 		roles,
 		theme

package/dist/app-shell/page-scroll.js

@@ -1,20 +1,37 @@
 import { createContext, useContext, useLayoutEffect } from "react";
 //#region src/app-shell/page-scroll.ts
-/** Turns the shell's page scrolling on or off; pages use `usePageScroll`. */
+/** Turns the shell's page scrolling on or off, or back to its `pageScroll` with `undefined`; pages use `usePageScroll`. */
 const PageScrollContext = createContext(() => {});
 /**
 * While the calling page is shown and `on`, the document scrolls instead of a box of the screen's height: the top and
 * bottom bars and the sidebar stick, and the page grows with its content, so the browser's own scrolling applies
 * throughout, scrolling to the top included, as tapping the status bar on an iPhone does. Sticky content in the page
-* stays clear of the bars with `--pb-sticky-top` and `--pb-sticky-bottom`.
+* stays clear of the bars with `--pb-sticky-top` and `--pb-sticky-bottom`. Not `on`, the page fills the box instead,
+* as a map does. Once the page is gone the shell's `pageScroll` applies again.
 */
 const usePageScroll = (on) => {
 	const set = useContext(PageScrollContext);
 	useLayoutEffect(() => {
 		set(on);
-		return () => set(false);
+		return () => set(void 0);
 	}, [set, on]);
 };
+/**
+* While the page scrolls, keeps room for its scrollbar whether or not the page overflows, where scrollbars take room
+* (Windows, Linux, or a Mac set to always show them). Otherwise a page whose height follows its width, such as the
+* cards, can be just too tall with the width without a scrollbar and short enough with the width beside one: the
+* scrollbar narrows the cards, they get shorter, the page fits, the scrollbar goes, they widen again, every frame.
+*/
+const usePageGutter = (on) => {
+	useLayoutEffect(() => {
+		if (!on) return;
+		const root = document.documentElement;
+		root.style.setProperty("scrollbar-gutter", "stable");
+		return () => {
+			root.style.removeProperty("scrollbar-gutter");
+		};
+	}, [on]);
+};
 const properties = [
 	"--pb-sticky-top",
 	"--pb-sticky-bottom",
@@ -53,4 +70,4 @@ const usePageInsets = (on, top, bottom, bottomShown) => {
 	]);
 };
 //#endregion
-export { PageScrollContext, usePageInsets, usePageScroll };
+export { PageScrollContext, usePageGutter, usePageInsets, usePageScroll };

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

@@ -1,2 +1,3 @@
+import "../primitives/route-link.js";
 import "./nav.js";
 import "./profile-menu.js";