@protobase/ui 0.15.5 → 0.16.1

package/dist/account/two-factor-setup.js

@@ -3,7 +3,7 @@ import { Input } from "../primitives/input.js";
 import { authMessage } from "../auth/auth-messages.js";
 import { Button } from "../primitives/button.js";
 import { BackupCodes } from "./backup-codes.js";
-import { CodeInput } from "../auth/code-input.js";
+import { OtpInput } from "../primitives/otp-input.js";
 import { TotpQr, totpKey } from "./totp-qr.js";
 import { useState } from "react";
 import { AuthError } from "@protobase/client";
@@ -49,8 +49,8 @@ const TwoFactorSetup = ({ offerEmailedCodes, needsPassword, onStartApp, onConfir
 			setup: await onStartApp(given)
 		});
 	});
-	const confirm = (setup) => attempt(async () => {
-		await onConfirmApp(code.trim());
+	const confirm = (setup, entered = code) => attempt(async () => {
+		await onConfirmApp(entered);
 		setStep({
 			kind: "backup-codes",
 			codes: setup.backupCodes
@@ -103,13 +103,14 @@ const TwoFactorSetup = ({ offerEmailedCodes, needsPassword, onStartApp, onConfir
 			}),
 			/* @__PURE__ */ jsxs("label", {
 				className: "flex flex-col gap-1.5 text-[13px] font-medium",
-				children: ["Code from the app", /* @__PURE__ */ jsx(CodeInput, {
+				children: ["Code from the app", /* @__PURE__ */ jsx(OtpInput, {
 					name: "code",
 					required: true,
 					autoFocus: true,
 					value: code,
 					invalid: Boolean(error),
-					onChange: (event) => setCode(event.target.value)
+					onChange: setCode,
+					onComplete: (complete) => !busy && void confirm(step.setup, complete)
 				})]
 			}),
 			errorLine,

package/dist/app/app.js

@@ -175,7 +175,7 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 		breadcrumb,
 		user: acting && userToShell(acting),
 		onSignOut: user && (() => void signOut()),
-		onSignIn: user ? void 0 : () => signIn.open(),
+		signIn: user ? void 0 : signIn.link(),
 		workspace: current?.organization?.name ?? workspace,
 		navGroups: groups,
 		bottomBar: bottomBarFromMeta(meta, basePath, place),

package/dist/app/create/create-page.js

@@ -117,6 +117,7 @@ const LoadedCreate = ({ resource, values }) => {
 				help: view?.fields[name]?.help,
 				required: isRequired(field),
 				error: errors[name],
+				wide: Boolean(view?.fields[name]?.multiline),
 				editor: /* @__PURE__ */ jsx(FieldEditor, {
 					field,
 					hints: view?.fields[name],

package/dist/app/create/create-record-form.js

@@ -56,6 +56,7 @@ const CreateRecordForm = ({ noun, collection, sections, saving, message, onSubmi
 							required: field.required,
 							help: field.help,
 							error: field.error,
+							wide: field.wide,
 							children: field.editor
 						}, field.name))
 					})

package/dist/app/current-address.d.ts

@@ -1,6 +1,9 @@
 import { AppAddress, FilterLayout, MapView, ResourceModel, ViewModel } from "@protobase/schema";
 //#region src/app/current-address.d.ts
-/** A list as the app shows it: every value there, the view's default where the address names none; `map` has none. */
+/**
+ * A list as the app shows it: every value there, the view's default where the address names none; `map` and
+ * `savedSearch`, the saved search it was opened from, have none.
+ */
 export type ListAddress = {
   kind: 'list';
   resource: string;
@@ -9,6 +12,7 @@ export type ListAddress = {
   orderBy: string;
   filterLayout: FilterLayout;
   map?: MapView;
+  savedSearch?: string;
 };
 /** The address the app shows, as logical values. A record's key is in the text form the record API takes. */
 export type CurrentAddress = ListAddress | {

package/dist/app/current-address.js

@@ -54,7 +54,8 @@ const changedList = (read, change, defaults) => {
 		...differs("display") && { display: next.display },
 		...differs("orderBy") && { orderBy: next.orderBy },
 		...differs("filterLayout") && { filterLayout: next.filterLayout },
-		...next.map && { map: next.map }
+		...next.map && { map: next.map },
+		...next.savedSearch && { savedSearch: next.savedSearch }
 	};
 };
 //#endregion

package/dist/app/displays/map-display.js

@@ -11,7 +11,7 @@ import { boundsAround, worldArea } from "../map/map-area.js";
 import { keptSelection, mapPoints, stepSelection } from "./map-groups.js";
 import { useMapRecords } from "./use-map-records.js";
 import { Suspense, lazy, useLayoutEffect, useRef, useState } from "react";
-import { ChevronLeft, ChevronRight, X } from "lucide-react";
+import { ChevronLeft, ChevronRight, CircleDashed, X } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/displays/map-display.tsx
 const RecordsMap = lazy(() => import("../map/records-map.js").then((module) => ({ default: module.RecordsMap })));
@@ -22,7 +22,7 @@ const arrow = "flex size-8 items-center justify-center rounded-full border borde
 * in view or the map is close, else a count for each part of it, which zooms in when chosen. The map asks again as it
 * pans and zooms. Without a view of its own it first fits every matching record. Choosing a marker shows the card of
 * its record at the map's bottom, with arrows through the records the marker stands for; closing it or choosing the map
-* elsewhere clears it.
+* elsewhere clears it. A marker and a card whose record's position is approximate say so.
 */
 const MapDisplay = ({ model, view, display, filter, orderBy, fields, at, onMove, footer = true, flush = false }) => {
 	const style = useAdminMeta().maps?.style;
@@ -48,7 +48,13 @@ const MapDisplay = ({ model, view, display, filter, orderBy, fields, at, onMove,
 	const singular = (view?.names?.singular ?? humanize(model.name)).toLowerCase();
 	const selection = keptSelection(chosen, rows);
 	const row = selection && rows.find((candidate) => candidate.key === selection.keys[selection.index]);
-	const markerLabel = (keys) => keys.length === 1 ? `Show the ${singular}` : `Show ${keys.length} ${plural}`;
+	const approximate = new Set(points.filter((point) => point.approximate).map((point) => point.key));
+	const markerLabel = (keys) => {
+		const near = keys.filter((key) => approximate.has(key)).length;
+		if (keys.length === 1) return near === 1 ? `Show the ${singular}, at an approximate position` : `Show the ${singular}`;
+		if (near === 0) return `Show ${keys.length} ${plural}`;
+		return near === keys.length ? `Show ${keys.length} ${plural}, at approximate positions` : `Show ${keys.length} ${plural}, ${near} at approximate positions`;
+	};
 	const bucketLabel = (count) => `Zoom in on ${count.toLocaleString("en-IE")} ${count === 1 ? singular : plural}`;
 	const overlay = useRef(null);
 	const [covered, setCovered] = useState(0);
@@ -112,46 +118,56 @@ const MapDisplay = ({ model, view, display, filter, orderBy, fields, at, onMove,
 						"aria-label": `Chosen ${singular}`,
 						children: [/* @__PURE__ */ jsxs("div", {
 							className: "flex items-center justify-end gap-1.5",
-							children: [selection.keys.length > 1 && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-								/* @__PURE__ */ jsx("button", {
-									type: "button",
-									"aria-label": "Previous",
-									className: arrow,
-									onClick: () => setChosen(stepSelection(selection, -1)),
-									children: /* @__PURE__ */ jsx(ChevronLeft, {
-										className: "size-4",
+							children: [
+								approximate.has(row.key) && /* @__PURE__ */ jsxs("span", {
+									className: "mr-auto flex items-center gap-1 rounded-full border border-border bg-background px-2 py-1 text-xs",
+									children: [/* @__PURE__ */ jsx(CircleDashed, {
+										className: "size-3.5",
 										"aria-hidden": true
-									})
-								}),
-								/* @__PURE__ */ jsxs("span", {
-									className: "rounded-full border border-border bg-background px-2 py-1 text-xs tabular-nums",
-									"aria-live": "polite",
-									children: [
-										selection.index + 1,
-										" / ",
-										selection.keys.length
-									]
+									}), "Approximate position"]
 								}),
+								selection.keys.length > 1 && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+									/* @__PURE__ */ jsx("button", {
+										type: "button",
+										"aria-label": "Previous",
+										className: arrow,
+										onClick: () => setChosen(stepSelection(selection, -1)),
+										children: /* @__PURE__ */ jsx(ChevronLeft, {
+											className: "size-4",
+											"aria-hidden": true
+										})
+									}),
+									/* @__PURE__ */ jsxs("span", {
+										className: "rounded-full border border-border bg-background px-2 py-1 text-xs tabular-nums",
+										"aria-live": "polite",
+										children: [
+											selection.index + 1,
+											" / ",
+											selection.keys.length
+										]
+									}),
+									/* @__PURE__ */ jsx("button", {
+										type: "button",
+										"aria-label": "Next",
+										className: arrow,
+										onClick: () => setChosen(stepSelection(selection, 1)),
+										children: /* @__PURE__ */ jsx(ChevronRight, {
+											className: "size-4",
+											"aria-hidden": true
+										})
+									})
+								] }),
 								/* @__PURE__ */ jsx("button", {
 									type: "button",
-									"aria-label": "Next",
+									"aria-label": "Close",
 									className: arrow,
-									onClick: () => setChosen(stepSelection(selection, 1)),
-									children: /* @__PURE__ */ jsx(ChevronRight, {
+									onClick: () => setChosen(void 0),
+									children: /* @__PURE__ */ jsx(X, {
 										className: "size-4",
 										"aria-hidden": true
 									})
 								})
-							] }), /* @__PURE__ */ jsx("button", {
-								type: "button",
-								"aria-label": "Close",
-								className: arrow,
-								onClick: () => setChosen(void 0),
-								children: /* @__PURE__ */ jsx(X, {
-									className: "size-4",
-									"aria-hidden": true
-								})
-							})]
+							]
 						}), /* @__PURE__ */ jsx("div", {
 							className: "shadow-lg",
 							children: /* @__PURE__ */ jsx(RecordCard, {

package/dist/app/displays/map-groups.js

@@ -1,12 +1,21 @@
 import { recordPosition } from "../map/record-position.js";
+import { isApproximate, positionArea } from "../map/approximate-position.js";
 //#region src/app/displays/map-groups.ts
-/** The rows with a position, in their order; a row without one is not on the map. */
+/** The rows with a position, in their order, approximate ones marked with their area; a row without one is not on the map. */
 const mapPoints = (rows, fields) => rows.flatMap((row) => {
 	const position = recordPosition(row.record, fields);
-	return position ? [{
+	if (!position) return [];
+	if (!isApproximate(row.record, fields)) return [{
 		key: row.key,
 		...position
-	}] : [];
+	}];
+	const area = positionArea(row.record, fields, position);
+	return [{
+		key: row.key,
+		...position,
+		approximate: true,
+		...area && { area }
+	}];
 });
 /**
 * The markers for the points as the map draws them: in order, each point joins the first marker within `radius` pixels

package/dist/app/displays/measured-heights.js

@@ -0,0 +1,23 @@
+//#region src/app/displays/measured-heights.ts
+/** How many card widths the list remembers a measured height for. */
+const remembered = 8;
+/**
+* `heights` with a card `height` tall measured at `width`, kept at the taller of it and the height measured there
+* before, and `heights` itself when that changes nothing. A width the list comes back to, as with and without a
+* scrollbar, keeps its height instead of falling back to a guess: a guess shorter than the cards shrinks the list, which
+* can take the scrollbar away, widen the cards back, and measure them taller again, every frame.
+*/
+const withMeasuredHeight = (heights, width, height) => {
+	const current = heights.get(width);
+	if (current !== void 0 && current >= height) return heights;
+	const next = new Map(heights);
+	next.delete(width);
+	next.set(width, height);
+	for (const oldest of next.keys()) {
+		if (next.size <= remembered) break;
+		next.delete(oldest);
+	}
+	return next;
+};
+//#endregion
+export { withMeasuredHeight };

package/dist/app/displays/record-card.js

@@ -32,7 +32,7 @@ const MetaValue = ({ icon, children }) => {
 * value, joined by bullets; or, with a `card` component, what it draws of the row, the built-in content again when it
 * is missing or throws. With a favorite button, a heart in the top right corner saves the record.
 */
-const RecordCard = ({ model, view, display, row, swipe = true }) => {
+const RecordCard = ({ model, view, display, row, swipe = true, mark }) => {
 	const { image, title, subtitle, amount, badge, meta, footer, flags } = cardFields(model, view, display);
 	const label = (name) => view?.fields[name]?.label ?? humanize(name);
 	const text = (name) => {
@@ -99,7 +99,7 @@ const RecordCard = ({ model, view, display, row, swipe = true }) => {
 			})]
 		}),
 		subtitle !== void 0 && /* @__PURE__ */ jsx("span", {
-			className: "truncate text-muted-foreground",
+			className: view?.fields[subtitle]?.multiline ? "line-clamp-3 whitespace-pre-line break-words text-muted-foreground" : "truncate text-muted-foreground",
 			children: shownValue(subtitle)
 		}),
 		shownAmount !== void 0 && /* @__PURE__ */ jsx("span", {
@@ -135,32 +135,44 @@ const RecordCard = ({ model, view, display, row, swipe = true }) => {
 			}), shownValue(name)] }, name))
 		})
 	] });
-	const card = (picture) => /* @__PURE__ */ jsx(AppLink, {
+	const card = (picture) => /* @__PURE__ */ jsxs(AppLink, {
 		to: {
 			kind: "record",
 			resource: model.name,
 			key: row.key
 		},
 		className: "flex h-full flex-col gap-1.5 rounded-lg border border-border bg-background p-3 text-[13px] hover:border-border-strong hover:bg-surface focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30",
-		children: Card ? /* @__PURE__ */ jsx(CustomBoundary, {
+		children: [mark && !pictured && /* @__PURE__ */ jsx(Badge, {
+			tone: "blue",
+			className: "self-start",
+			children: mark
+		}), Card ? /* @__PURE__ */ jsx(CustomBoundary, {
 			name: display.card,
 			fallback: builtIn(picture),
 			children: /* @__PURE__ */ jsx(Card, { row })
-		}) : builtIn(picture)
+		}) : builtIn(picture)]
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		className: photos ? "group/card relative h-full" : favorite ? "relative h-full" : "h-full",
-		children: [photos ? /* @__PURE__ */ jsx(CardCarousel, {
-			photos: row.photos ?? [],
-			cover,
-			swipe,
-			children: card
-		}) : card(/* @__PURE__ */ jsx(CardImage, { value: cover })), favorite && /* @__PURE__ */ jsx(FavoriteButton, {
-			favorite,
-			recordKey: row.key,
-			target: recordKey(model, row.record),
-			className: pictured ? void 0 : "right-1.5 top-1.5"
-		})]
+		className: photos ? "group/card relative h-full" : favorite || mark ? "relative h-full" : "h-full",
+		children: [
+			photos ? /* @__PURE__ */ jsx(CardCarousel, {
+				photos: row.photos ?? [],
+				cover,
+				swipe,
+				children: card
+			}, row.key) : card(/* @__PURE__ */ jsx(CardImage, { value: cover })),
+			mark && pictured && /* @__PURE__ */ jsx(Badge, {
+				tone: "blue",
+				className: "pointer-events-none absolute top-2 left-2 shadow-sm",
+				children: mark
+			}),
+			favorite && /* @__PURE__ */ jsx(FavoriteButton, {
+				favorite,
+				recordKey: row.key,
+				target: recordKey(model, row.record),
+				className: pictured ? void 0 : "right-1.5 top-1.5"
+			})
+		]
 	});
 };
 //#endregion

package/dist/app/displays/virtual-cards.js

@@ -1,7 +1,9 @@
 import { Skeleton } from "../../primitives/skeleton.js";
 import { usePagedRows } from "../../data-grid/use-paged-rows.js";
 import { useVirtualRows } from "../../data-grid/use-virtual-rows.js";
+import { createFlipGuard } from "../../lib/flip-guard.js";
 import { anchoredTop, cardColumns, cardWidth, recordRange } from "./card-layout.js";
+import { withMeasuredHeight } from "./measured-heights.js";
 import { useCallback, useLayoutEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/app/displays/virtual-cards.tsx
@@ -9,7 +11,7 @@ import { jsx } from "react/jsx-runtime";
 * Cards in rows as wide as the list, scrolled like the table by the page or the nearest scrolling ancestor: the list is
 * as tall as all its rows, only the rows in view are drawn, and the records are loaded in the table's pages, so a
 * change of width keeps the loaded pages and the first record in view. Every card in a width is as tall as the tallest
-* drawn so far.
+* drawn so far at that width.
 */
 const VirtualCards = ({ source, label, initialIndex, onScrollIndex, minHeight, children }) => {
 	const { total } = source;
@@ -17,11 +19,8 @@ const VirtualCards = ({ source, label, initialIndex, onScrollIndex, minHeight, c
 	const [width, setWidth] = useState(0);
 	const columns = cardColumns(width);
 	const itemWidth = cardWidth(width, columns);
-	const [measured, setMeasured] = useState({
-		width: 0,
-		height: 0
-	});
-	const itemHeight = Math.ceil(Math.max(minHeight(itemWidth), measured.width === itemWidth ? measured.height : 0));
+	const [measured, setMeasured] = useState(() => /* @__PURE__ */ new Map());
+	const itemHeight = Math.ceil(Math.max(minHeight(itemWidth), measured.get(itemWidth) ?? 0));
 	const rowHeight = itemHeight + 12;
 	const layout = {
 		columns,
@@ -33,7 +32,7 @@ const VirtualCards = ({ source, label, initialIndex, onScrollIndex, minHeight, c
 	});
 	const changed = anchor.current.top > 0 && (anchor.current.layout.columns !== columns || anchor.current.layout.rowHeight !== rowHeight);
 	const settle = (top) => changed ? anchoredTop(anchor.current.top, anchor.current.layout, layout) : top;
-	const ready = itemWidth > 0 && measured.width === itemWidth;
+	const ready = itemWidth > 0 && measured.has(itemWidth);
 	const scroll = useVirtualRows({
 		total: Math.ceil(total / columns),
 		rowHeight,
@@ -56,23 +55,22 @@ const VirtualCards = ({ source, label, initialIndex, onScrollIndex, minHeight, c
 		loadRows: source.loadRows,
 		latencyMs: 0
 	}, range.start, range.end);
+	const [guard] = useState(() => createFlipGuard());
 	useLayoutEffect(() => {
 		const body = scroll.ref.current;
 		if (!body) return;
-		const observer = new ResizeObserver(() => setWidth(body.clientWidth));
+		const update = () => setWidth(guard(body.clientWidth, performance.now()));
+		const observer = new ResizeObserver(update);
 		observer.observe(body);
-		setWidth(body.clientWidth);
+		update();
 		return () => observer.disconnect();
-	}, []);
+	}, [guard]);
 	const widthRef = useRef(itemWidth);
 	widthRef.current = itemWidth;
 	const [observer] = useState(() => new ResizeObserver((entries) => {
 		const tallest = Math.max(...entries.map((entry) => entry.borderBoxSize[0]?.blockSize ?? entry.contentRect.height));
 		const at = widthRef.current;
-		setMeasured((current) => current.width === at && current.height >= tallest ? current : {
-			width: at,
-			height: Math.max(tallest, current.width === at ? current.height : 0)
-		});
+		setMeasured((current) => withMeasuredHeight(current, at, tallest));
 	}));
 	useLayoutEffect(() => () => observer.disconnect(), [observer]);
 	const observe = useCallback((item) => {

package/dist/app/embedded-list/embedded-display.js

@@ -17,10 +17,14 @@ const embeddedDisplay = (view, xs, { picked, preferred }) => {
 	if (picked !== void 0 && names.includes(picked)) return picked;
 	return defaultDisplay(view, xs, preferred !== void 0 && names.includes(preferred) ? preferred : void 0);
 };
-/** The resource's list with the embedded list's filter, order and display, leaving out what the list does by default. */
-const viewAllAddress = (model, view, xs, list) => changedList({
+/**
+* The resource's list with the embedded list's filter, order and display, leaving out what the list does by default, and
+* the saved search whose results it shows, if any. `resource` names another list of the same records, such as the
+* favorites that list a user's saved listings.
+*/
+const viewAllAddress = (model, view, xs, { resource = model.name, ...list }) => changedList({
 	kind: "list",
-	resource: model.name
+	resource
 }, list, listDefaults(model, view, xs));
 //#endregion
 export { embeddedDisplay, embeddedDisplayKey, readPickedDisplay, viewAllAddress, writePickedDisplay };

package/dist/app/embedded-list/embedded-list.js

@@ -36,7 +36,7 @@ const Loading = () => /* @__PURE__ */ jsx("div", {
 * The first `limit` records of a list, drawn by the list page's own table (sized to its rows) or display, and a link
 * to the whole list with the same filter, order and display. On a phone a cards display is one row that scrolls sideways.
 */
-const EmbeddedList = ({ model, view, filter, sort, columns, limit, display, empty, row = false, viewAll }) => {
+const EmbeddedList = ({ model, view, filter, sort, columns, limit, display, empty, row = false, viewAll, link = true }) => {
 	const { resources, views } = useAdminMeta();
 	const { fields: fieldTypes } = useProjectUi();
 	const { go } = useAppAddress();
@@ -74,11 +74,12 @@ const EmbeddedList = ({ model, view, filter, sort, columns, limit, display, empt
 	}, [loaded]);
 	const shown = shownDisplay(view, display);
 	const plural = view?.names?.plural ?? humanize(model.name);
-	const allLink = /* @__PURE__ */ jsxs(AppLink, {
+	const allLink = link && /* @__PURE__ */ jsxs(AppLink, {
 		to: viewAllAddress(model, view, xs, viewAll ? {
 			filter: viewAll.filter,
 			orderBy: defaultOrderBy(model, view),
-			display
+			display,
+			savedSearch: viewAll.savedSearch
 		} : {
 			filter,
 			orderBy,
@@ -104,7 +105,7 @@ const EmbeddedList = ({ model, view, filter, sort, columns, limit, display, empt
 			className: "text-[13px] text-muted-foreground",
 			children: empty ?? "Nothing here yet."
 		});
-		return viewAll ? /* @__PURE__ */ jsxs("div", {
+		return viewAll && link ? /* @__PURE__ */ jsxs("div", {
 			className: "flex flex-col gap-3",
 			children: [nothing, allLink]
 		}) : nothing;

package/dist/app/field-editor.js

@@ -1,6 +1,7 @@
 import { cn } from "../lib/cn.js";
 import { Input } from "../primitives/input.js";
 import { Switch } from "../primitives/switch.js";
+import { Textarea } from "../primitives/textarea.js";
 import { displayValue } from "../live/display-value.js";
 import { AppLink } from "./use-app-address.js";
 import { RelationPicker } from "./relation-picker.js";
@@ -68,8 +69,9 @@ const BuiltInEditor = ({ field, hints, value, stored, relationLabel, relationTo,
 			}) : label
 		});
 	}
+	const multiline = Boolean(hints?.multiline) && field.type === "text";
 	if (!isEditable(field) || locked) return /* @__PURE__ */ jsx("div", {
-		className: cn("py-1.5 text-[13px] tabular-nums", field.type === "decimal" || field.type === "integer" ? "font-medium" : "text-muted-foreground"),
+		className: cn("py-1.5 text-[13px] tabular-nums", field.type === "decimal" || field.type === "integer" ? "font-medium" : "text-muted-foreground", multiline && "whitespace-pre-line break-words"),
 		children: displayValue(field, stored, hints)
 	});
 	if (field.type === "enum") return /* @__PURE__ */ jsxs("select", {
@@ -84,6 +86,12 @@ const BuiltInEditor = ({ field, hints, value, stored, relationLabel, relationTo,
 			children: enumLabel(option, hints?.valueLabels)
 		}, option))]
 	});
+	if (multiline) return /* @__PURE__ */ jsx(Textarea, {
+		invalid,
+		placeholder,
+		value: String(value),
+		onChange: (event) => onChange(event.target.value)
+	});
 	return /* @__PURE__ */ jsx(Input, {
 		invalid,
 		leading: hints?.prefix ? /* @__PURE__ */ jsx("span", {

package/dist/app/list-page.js

@@ -39,14 +39,14 @@ import { ListChart } from "./list-chart.js";
 import { ListSearch } from "./list-search.js";
 import { withFieldTypeCells } from "./field-types/field-type-cells.js";
 import { SavedList } from "./saved/saved-list.js";
-import { facetNames, filterChips, searchName } from "./searches/saved-search.js";
+import { facetNames, filterChips } from "./searches/saved-search.js";
 import { SaveSearchButton } from "./searches/save-search-button.js";
 import { SavedSearches } from "./searches/saved-searches.js";
 import { useMemo, useState } from "react";
 import { Plus, SlidersHorizontal } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { tableDisplay } from "@protobase/schema/internal";
 import { createWhere } from "@protobase/schema";
+import { tableDisplay } from "@protobase/schema/internal";
 //#region src/app/list-page.tsx
 const where = createWhere();
 const searchText = (extras) => extras.find((clause) => clause.kind === "search");
@@ -264,9 +264,11 @@ const LoadedList = ({ model, address, scope, heading }) => {
 		]
 	});
 	const saveSearch = view?.saveSearch && !scope && parsed.ok && filterText && /* @__PURE__ */ jsx(SaveSearchButton, {
+		model,
+		view,
 		search: view.saveSearch,
 		filter: filterText,
-		name: searchName(filterChips(model, view, filterText, facetNames(config)))
+		chips: filterChips(model, view, filterText, facetNames(config))
 	});
 	const displaySwitch = (menu) => /* @__PURE__ */ jsx(DisplaySwitch, {
 		view,

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

@@ -0,0 +1,76 @@
+import { numeric } from "./record-position.js";
+//#region src/app/map/approximate-position.ts
+const earthRadius = 6371008.8;
+const circleCorners = 64;
+/** Whether the record's position is approximate, as its field states; without one, or a value that says neither, it is not. */
+const isApproximate = (record, fields) => {
+	if (fields.approximate !== void 0) return record[fields.approximate] === true;
+	if (fields.exact !== void 0) return record[fields.exact] === false;
+	return false;
+};
+/** The polygon of `metres` around `center`, its corners as far from it along the globe. */
+const circleArea = (center, metres) => {
+	const distance = metres / earthRadius;
+	const latitude = center.latitude * Math.PI / 180;
+	const longitude = center.longitude * Math.PI / 180;
+	return {
+		type: "Polygon",
+		coordinates: [Array.from({ length: 65 }, (_, index) => {
+			const bearing = index % circleCorners / circleCorners * 2 * Math.PI;
+			const to = Math.asin(Math.sin(latitude) * Math.cos(distance) + Math.cos(latitude) * Math.sin(distance) * Math.cos(bearing));
+			return [(longitude + Math.atan2(Math.sin(bearing) * Math.sin(distance) * Math.cos(latitude), Math.cos(distance) - Math.sin(latitude) * Math.sin(to))) * 180 / Math.PI, to * 180 / Math.PI];
+		})]
+	};
+};
+const isPosition = (value) => Array.isArray(value) && value.length >= 2 && typeof value[0] === "number" && typeof value[1] === "number" && Math.abs(value[0]) <= 180 && Math.abs(value[1]) <= 90;
+const isLine = (value, least) => Array.isArray(value) && value.length >= least && value.every(isPosition);
+const isPolygon = (value) => Array.isArray(value) && value.length > 0 && value.every((ring) => isLine(ring, 4));
+const isLines = (value) => Array.isArray(value) && value.length > 0 && value.every((line) => isLine(line, 2));
+const parsed = (value) => {
+	if (typeof value !== "string") return value;
+	try {
+		return JSON.parse(value);
+	} catch (error) {
+		if (error instanceof SyntaxError) return void 0;
+		throw error;
+	}
+};
+/** The GeoJSON polygon or line a value holds, as a geometry or a feature of one; none for anything else, such as a point or text that is no GeoJSON. */
+const areaGeometry = (value) => {
+	const data = parsed(value);
+	if (typeof data !== "object" || data === null) return void 0;
+	const geometry = data.type === "Feature" ? data.geometry : data;
+	if (typeof geometry !== "object" || geometry === null) return void 0;
+	const { type, coordinates } = geometry;
+	if (type === "Polygon" && isPolygon(coordinates)) return {
+		type,
+		coordinates
+	};
+	if (type === "MultiPolygon" && Array.isArray(coordinates) && coordinates.length > 0 && coordinates.every(isPolygon)) return {
+		type,
+		coordinates
+	};
+	if (type === "LineString" && isLine(coordinates, 2)) return {
+		type,
+		coordinates
+	};
+	if (type === "MultiLineString" && isLines(coordinates)) return {
+		type,
+		coordinates
+	};
+};
+/**
+* What the map draws around the record's approximate position: the area its field holds, else a circle of the radius
+* its field holds, else one of the display's default radius. An exact position, or one whose record states none of
+* them on a display without a default, has none.
+*/
+const positionArea = (record, fields, position) => {
+	if (!isApproximate(record, fields)) return void 0;
+	const area = fields.area === void 0 ? void 0 : areaGeometry(record[fields.area]);
+	if (area) return area;
+	const radius = fields.radius === void 0 ? void 0 : numeric(record[fields.radius]);
+	if (radius !== void 0 && Number.isFinite(radius) && radius > 0) return circleArea(position, radius);
+	return fields.defaultRadius === void 0 ? void 0 : circleArea(position, fields.defaultRadius);
+};
+//#endregion
+export { areaGeometry, circleArea, isApproximate, positionArea };