@protobase/ui 0.15.5 → 0.16.1

package/dist/app/map/area-features.js

@@ -0,0 +1,80 @@
+//#region src/app/map/area-features.ts
+const worldPixels = 512;
+const mercatorLimit = 85.051129;
+const fadeFrom = 16;
+const zooms = Array.from({ length: 23 }, (_, zoom) => zoom);
+const positionsOf = (geometry) => {
+	if (geometry.type === "LineString") return geometry.coordinates;
+	if (geometry.type === "MultiPolygon") return geometry.coordinates.flat(2);
+	return geometry.coordinates.flat();
+};
+const mercatorY = (latitude) => {
+	const radians = Math.max(-85.051129, Math.min(mercatorLimit, latitude)) * Math.PI / 180;
+	return .5 - Math.log(Math.tan(Math.PI / 4 + radians / 2)) / (2 * Math.PI);
+};
+/** How many pixels across the area is drawn at zoom 0, the larger of its width and height; twice as many each zoom level in. */
+const zoomZeroSpan = (geometry) => {
+	const positions = positionsOf(geometry);
+	const longitudes = positions.map(([longitude]) => longitude);
+	const ys = positions.map(([, latitude]) => mercatorY(latitude));
+	const width = (Math.max(...longitudes) - Math.min(...longitudes)) / 360 * worldPixels;
+	const height = (Math.max(...ys) - Math.min(...ys)) * worldPixels;
+	return Math.max(width, height);
+};
+/** The areas of the points that have one, those of the chosen records last so they are drawn on top. */
+const areaFeatures = (points, selected) => {
+	const features = points.flatMap((point) => {
+		if (!point.area) return [];
+		const kind = point.area.type === "LineString" || point.area.type === "MultiLineString" ? "line" : "polygon";
+		return [{
+			type: "Feature",
+			geometry: point.area,
+			properties: {
+				key: point.key,
+				kind,
+				span: zoomZeroSpan(point.area),
+				chosen: selected?.includes(point.key) ?? false
+			}
+		}];
+	});
+	return {
+		type: "FeatureCollection",
+		features: [...features.filter((feature) => !feature.properties.chosen), ...features.filter((feature) => feature.properties.chosen)]
+	};
+};
+/**
+* An opacity of `full` for an area drawn large enough to mean something at the zoom, fading in as it grows to that
+* size: at each whole zoom level its share of `full` follows from its span, and MapLibre blends between the levels.
+*/
+const fadeIn = (full) => [
+	"interpolate",
+	["linear"],
+	["zoom"],
+	...zooms.flatMap((zoom) => [zoom, [
+		"*",
+		full,
+		[
+			"min",
+			1,
+			[
+				"max",
+				0,
+				[
+					"/",
+					[
+						"-",
+						[
+							"*",
+							["get", "span"],
+							2 ** zoom
+						],
+						fadeFrom
+					],
+					32
+				]
+			]
+		]
+	]])
+];
+//#endregion
+export { areaFeatures, fadeIn, zoomZeroSpan };

package/dist/app/map/maplibre.js

@@ -0,0 +1,11 @@
+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";
+//#region src/app/map/maplibre.ts
+maplibre.setWorkerUrl(workerUrl);
+maplibre.addProtocol("pmtiles", new Protocol().tile);
+/** MapLibre, set up to run its worker and read PMTiles archives: what a map draws with. */
+const mapLib = maplibre;
+//#endregion
+export { mapLib };

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/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/record-row.js

@@ -0,0 +1,51 @@
+import { useAdminMeta } from "../../meta-gate.js";
+import { RecordRowBody } from "../../record-row/record-row-body.js";
+import { propsOf } from "./block-props.js";
+import { CardFrame } from "./card-frame.js";
+import { SavedRecordRow } from "../../record-row/saved-record-row.js";
+import { SavedSearchRows } from "../../searches/saved-search-rows.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/app/pages/blocks/record-row.tsx
+/**
+* What a filter finds: its chips, the count, its records as a sideways row of their list's cards, and "View all". Of a
+* resource whose view has `listOf`, the records the user's saved ones point at; of one with `searchesOf`, a row per
+* saved search of the user's.
+*/
+const RecordRowBlock = ({ node, slots }) => {
+	const { resource, filter = "", sort, limit, display, title, description, empty } = propsOf(node);
+	const { resources, views } = useAdminMeta();
+	const model = resources[resource];
+	if (!model) return null;
+	const view = views[model.name];
+	const body = () => {
+		if (view?.searchesOf) return /* @__PURE__ */ jsx(SavedSearchRows, {
+			model,
+			view,
+			empty
+		});
+		if (view?.listOf !== void 0) return /* @__PURE__ */ jsx(SavedRecordRow, {
+			model,
+			view,
+			limit,
+			display,
+			empty
+		});
+		return /* @__PURE__ */ jsx(RecordRowBody, {
+			model,
+			view,
+			filter,
+			sort,
+			limit,
+			display,
+			empty
+		});
+	};
+	return /* @__PURE__ */ jsx(CardFrame, {
+		title,
+		description,
+		actions: slots.actions,
+		children: body()
+	});
+};
+//#endregion
+export { RecordRowBlock };

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/pages/render-node.js

@@ -11,6 +11,7 @@ import { ModalFormBlock } from "./blocks/modal-form.js";
 import { PageBlock } from "./blocks/page-block.js";
 import { ProgressBlock } from "./blocks/progress.js";
 import { RecordCardBlock } from "./blocks/record-card.js";
+import { RecordRowBlock } from "./blocks/record-row.js";
 import { ShowBlock } from "./blocks/show.js";
 import { StatBlock } from "./blocks/stat.js";
 import { TableBlock } from "./blocks/table.js";
@@ -28,6 +29,7 @@ const blocks = {
 	Field: FieldBlock,
 	Table: TableBlock,
 	CardRow: CardRowBlock,
+	RecordRow: RecordRowBlock,
 	Progress: ProgressBlock,
 	ModalForm: ModalFormBlock,
 	Action: ActionBlock,

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),

package/dist/app/record-row/record-row-body.js

@@ -0,0 +1,114 @@
+import { useIsXs } from "../../lib/use-media-query.js";
+import { Skeleton } from "../../primitives/skeleton.js";
+import { humanize } from "../../live/naming.js";
+import { displaysOf, loadedFields } from "../displays/list-displays.js";
+import { defaultOrderBy } from "../list-order.js";
+import { useAdminMeta } from "../meta-gate.js";
+import { AppLink } from "../use-app-address.js";
+import { ErrorBanner } from "../error-banner.js";
+import { useLiveRows } from "../../live/use-live-rows.js";
+import { FilterChipList } from "../searches/filter-chip-list.js";
+import { viewAllAddress } from "../embedded-list/embedded-display.js";
+import { useFilterChips } from "../searches/use-filter-chips.js";
+import { RecordRow } from "./record-row.js";
+import { useMemo } from "react";
+import { ArrowRight } from "lucide-react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { createWhere, parseFilter, printFilter } from "@protobase/schema";
+//#region src/app/record-row/record-row-body.tsx
+const where = createWhere();
+const scoped = (filter, scope) => {
+	if (!scope) return filter;
+	const parsed = parseFilter(filter);
+	if (!parsed.ok) throw new Error(`The filter cannot be read: ${parsed.errors.map((error) => error.message).join("; ")}`);
+	return printFilter(parsed.ast ? where.and(parsed.ast, scope) : scope);
+};
+/** The display a row draws its cards with: the one named, else the view's first cards display, else a card of the title. */
+const rowDisplay = (view, name) => {
+	const cards = displaysOf(view).filter((display) => display.kind === "cards");
+	return cards.find((display) => display.name === name) ?? cards[0] ?? {
+		kind: "cards",
+		name: "cards"
+	};
+};
+const Loading = () => /* @__PURE__ */ jsx("div", {
+	className: "flex gap-3 overflow-hidden",
+	children: Array.from({ length: 3 }, (_, index) => /* @__PURE__ */ jsx(Skeleton, { className: "h-24 w-64 shrink-0" }, index))
+});
+/**
+* What a filter finds, in a card's body: its filters as chips, how many records match, the records in a row of their
+* list's cards that scrolls sideways (`RecordRow`), and "View all", which opens the list with the filter.
+*/
+const RecordRowBody = ({ model, view, filter, sort = "", display: named, limit, chips: showChips = true, empty, note, isNew, viewAll, scope, list }) => {
+	const { resources, views } = useAdminMeta();
+	const xs = useIsXs();
+	const display = rowDisplay(view, named);
+	const orderBy = sort || defaultOrderBy(model, view);
+	const columns = useMemo(() => loadedFields(model, view, []), [model, view]);
+	const loadFilter = useMemo(() => scoped(filter, scope), [filter, scope]);
+	const rows = useLiveRows({
+		resources,
+		views,
+		model,
+		columns,
+		filter: loadFilter,
+		orderBy
+	});
+	const chips = useFilterChips(model, filter);
+	const singular = (view?.names?.singular ?? humanize(model.name)).toLowerCase();
+	const plural = view?.names?.plural ?? humanize(model.name);
+	const total = rows.source?.total;
+	const source = useMemo(() => rows.source && {
+		...rows.source,
+		total: Math.min(rows.source.total, limit ?? Infinity)
+	}, [rows.source, limit]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex min-w-0 flex-col gap-3",
+		children: [
+			showChips && chips.length > 0 || total !== void 0 || note ? /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center justify-between gap-2",
+				children: [showChips && chips.length > 0 ? /* @__PURE__ */ jsx(FilterChipList, { chips }) : /* @__PURE__ */ jsx("span", {}), /* @__PURE__ */ jsxs("p", {
+					className: "flex flex-wrap gap-x-3 text-[13px] text-muted-foreground",
+					children: [note && /* @__PURE__ */ jsx("span", { children: note }), total !== void 0 && /* @__PURE__ */ jsx("span", {
+						className: "tabular-nums",
+						children: `${total.toLocaleString("en-GB")} ${total === 1 ? singular : plural.toLowerCase()}`
+					})]
+				})]
+			}) : null,
+			rows.isLoading ? /* @__PURE__ */ jsx(Loading, {}) : rows.error ? /* @__PURE__ */ jsx(ErrorBanner, {
+				title: "Could not load",
+				error: rows.error
+			}) : !source || source.total === 0 ? /* @__PURE__ */ jsx("p", {
+				className: "text-[13px] text-muted-foreground",
+				children: empty ?? `No ${plural.toLowerCase()} match.`
+			}) : /* @__PURE__ */ jsx(RecordRow, {
+				model,
+				view,
+				display,
+				source,
+				label: plural,
+				isNew
+			}),
+			/* @__PURE__ */ jsxs(AppLink, {
+				to: viewAllAddress(model, view, xs, {
+					filter,
+					orderBy,
+					display: display.name,
+					savedSearch: viewAll?.savedSearch,
+					resource: list
+				}),
+				onClick: viewAll?.onOpen,
+				className: "flex items-center gap-1 self-end text-[13px] font-medium text-primary-text hover:underline",
+				children: [viewAll?.label ?? /* @__PURE__ */ jsxs(Fragment$1, { children: ["View all ", /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: plural.toLowerCase()
+				})] }), /* @__PURE__ */ jsx(ArrowRight, {
+					className: "size-3.5",
+					"aria-hidden": true
+				})]
+			})
+		]
+	});
+};
+//#endregion
+export { RecordRowBody };