@protobase/ui 0.12.21 → 0.12.22

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

@@ -1,84 +1,13 @@
-import { Badge } from "../../primitives/badge.js";
 import { Skeleton } from "../../primitives/skeleton.js";
 import { humanize } from "../../live/naming.js";
-import { useProjectUi } from "../pages/project-ui.js";
-import { cardFields, filledMeta } from "./list-displays.js";
-import { AppLink } from "../use-app-address.js";
-import { fileShown, isPreviewable } from "../../live/file-values.js";
-import { displayValue } from "../../live/display-value.js";
-import { shownWidget } from "../field-types/shown-widget.js";
-import { CustomBoundary } from "../pages/custom-boundary.js";
-import { WidgetPart } from "../field-types/widget-part.js";
-import { namedIcon } from "../named-icon.js";
-import { ValueBadge } from "../value-badge.js";
-import { CardCarousel } from "./card-carousel.js";
 import { DisplayFooter, DisplayState } from "./display-frame.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { RecordCard } from "./record-card.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/displays/cards-display.tsx
 const grid = "grid grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] gap-3";
-const CardImage = ({ value }) => {
-	const file = fileShown(value);
-	const url = file && "url" in file && typeof file.url === "string" && isPreviewable(file.type) ? file.url : void 0;
-	return /* @__PURE__ */ jsx("span", {
-		className: "-mx-3 -mt-3 mb-1.5 block aspect-[4/3] overflow-hidden rounded-t-lg border-b border-border bg-muted",
-		children: url && /* @__PURE__ */ jsx("img", {
-			src: url,
-			alt: "",
-			loading: "lazy",
-			className: "size-full object-cover"
-		})
-	});
-};
-const MetaValue = ({ icon, children }) => {
-	const Icon = namedIcon(icon);
-	return /* @__PURE__ */ jsxs("dd", {
-		className: "flex items-center gap-1 tabular-nums",
-		children: [Icon && /* @__PURE__ */ jsx(Icon, {
-			className: "size-3.5 shrink-0",
-			"aria-hidden": true
-		}), children]
-	});
-};
-/**
-* A card per record, opening its page: its image across the top, with arrows through its photos when the display names
-* them, the title over the subtitle, the badge beside it, small meta fields below, those with a value, and the labels of
-* its flags that are true; or, with a `card` component, what it draws of the row, the built-in content again when it is
-* missing or throws.
-*/
+/** A card per record (see `RecordCard`), in a grid, with how many match and a button for more below. */
 const CardsDisplay = ({ model, view, display, list }) => {
-	const { image, title, subtitle, badge, meta, flags } = cardFields(model, view, display);
-	const label = (name) => view?.fields[name]?.label ?? humanize(name);
-	const text = (row, name) => {
-		const field = model.fields[name];
-		if (!field) return "";
-		return row.labels[name] ?? displayValue(field, row.record[name], view?.fields[name]);
-	};
-	const { fields: fieldTypes, components } = useProjectUi();
-	const Card = display.card === void 0 ? void 0 : components?.[display.card];
-	const shownValue = (row, name) => {
-		const field = model.fields[name];
-		const shown = field && shownWidget(fieldTypes, field, view?.fields[name]);
-		return shown ? /* @__PURE__ */ jsx(WidgetPart, {
-			shown,
-			part: "display",
-			field,
-			value: row.record[name],
-			fallback: text(row, name)
-		}) : text(row, name);
-	};
-	const metaValue = (row, name) => {
-		const field = model.fields[name];
-		const hints = view?.fields[name];
-		const value = row.record[name];
-		if (!field || hints?.format !== "badge" || shownWidget(fieldTypes, field, hints) || value === null || value === void 0 || value === "") return shownValue(row, name);
-		return /* @__PURE__ */ jsx(ValueBadge, {
-			value,
-			hints,
-			children: text(row, name)
-		});
-	};
 	const plural = (view?.names?.plural ?? humanize(model.name)).toLowerCase();
-	const photos = Card ? void 0 : display.photos;
 	return /* @__PURE__ */ jsxs(DisplayState, {
 		list,
 		empty: `No ${plural} match.`,
@@ -89,72 +18,12 @@ const CardsDisplay = ({ model, view, display, list }) => {
 		children: [/* @__PURE__ */ jsx("ul", {
 			className: grid,
 			"aria-label": view?.names?.plural ?? humanize(model.name),
-			children: list.rows.map((row) => {
-				const status = badge === void 0 ? void 0 : row.record[badge];
-				const raised = flags.filter((name) => row.record[name] === true);
-				const cover = image === void 0 ? void 0 : row.record[image];
-				const builtIn = (photo) => /* @__PURE__ */ jsxs(Fragment, { children: [
-					(image !== void 0 || photos !== void 0) && /* @__PURE__ */ jsx(CardImage, { value: photo }),
-					/* @__PURE__ */ jsxs("span", {
-						className: "flex items-start justify-between gap-2",
-						children: [/* @__PURE__ */ jsx("span", {
-							className: "min-w-0 truncate font-medium",
-							children: shownValue(row, title)
-						}), badge !== void 0 && status !== null && status !== void 0 && /* @__PURE__ */ jsx(ValueBadge, {
-							value: status,
-							hints: view?.fields[badge],
-							children: text(row, badge)
-						})]
-					}),
-					subtitle !== void 0 && /* @__PURE__ */ jsx("span", {
-						className: "truncate text-muted-foreground",
-						children: shownValue(row, subtitle)
-					}),
-					meta.length > 0 && /* @__PURE__ */ jsx("dl", {
-						className: "mt-auto flex flex-wrap items-center gap-x-3 gap-y-0.5 pt-1 text-xs text-muted-foreground",
-						children: filledMeta(row, meta).map((name) => /* @__PURE__ */ jsxs("div", {
-							className: "flex gap-1",
-							children: [/* @__PURE__ */ jsx("dt", {
-								className: "sr-only",
-								children: label(name)
-							}), /* @__PURE__ */ jsx(MetaValue, {
-								icon: view?.fields[name]?.icon,
-								children: metaValue(row, name)
-							})]
-						}, name))
-					}),
-					raised.length > 0 && /* @__PURE__ */ jsx("ul", {
-						className: "flex flex-wrap gap-1",
-						"aria-label": "Features",
-						children: raised.map((name) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Badge, {
-							dot: false,
-							children: label(name)
-						}) }, name))
-					})
-				] });
-				const card = (photo) => /* @__PURE__ */ jsx(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, {
-						name: display.card,
-						fallback: builtIn(photo),
-						children: /* @__PURE__ */ jsx(Card, { row })
-					}) : builtIn(photo)
-				});
-				return /* @__PURE__ */ jsx("li", {
-					className: photos ? "group/card relative" : void 0,
-					children: photos ? /* @__PURE__ */ jsx(CardCarousel, {
-						photos,
-						recordKey: row.key,
-						cover,
-						children: card
-					}) : card(cover)
-				}, row.key);
-			})
+			children: list.rows.map((row) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(RecordCard, {
+				model,
+				view,
+				display,
+				row
+			}) }, row.key))
 		}), /* @__PURE__ */ jsx(DisplayFooter, { list })]
 	});
 };

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

@@ -4,7 +4,7 @@ import { displayChoices, sortFields } from "./list-displays.js";
 import { parseSort } from "../list-order.js";
 import { MenuSelect } from "../../primitives/menu-select.js";
 import { Segmented } from "../../primitives/segmented.js";
-import { Calendar, Columns3, LayoutGrid, List, SquareKanban, Table2 } from "lucide-react";
+import { Calendar, Columns3, LayoutGrid, List, Map, SquareKanban, Table2 } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/displays/display-controls.tsx
 /** The icons a display's `icon` may name; another name shows the label alone. */
@@ -14,7 +14,8 @@ const icons = {
 	kanban: SquareKanban,
 	board: Columns3,
 	list: List,
-	calendar: Calendar
+	calendar: Calendar,
+	map: Map
 };
 /**
 * The list page's switch between the table and the view's displays, as buttons or, on a phone, as a menu; nothing for a

package/dist/app/displays/list-displays.d.ts

@@ -1,4 +1,4 @@
-import { ResourceModel, ViewModel } from "@protobase/schema";
+import { FieldModel, ResourceModel, ViewModel } from "@protobase/schema";
 //#region src/app/displays/list-displays.d.ts
 /** A row as a list display gets it: its key, the record as the list API gives it, and names of the records its relations point at. */
 export type ListDisplayRow = {

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

@@ -1,5 +1,6 @@
 import { recordKey, recordTitleField } from "../../live/model-helpers.js";
 import { humanize } from "../../live/naming.js";
+import { displayValue } from "../../live/display-value.js";
 import { encodeKey, tableDisplay } from "@protobase/schema";
 //#region src/app/displays/list-displays.ts
 const displaysOf = (view) => view?.list?.displays ?? [];
@@ -19,6 +20,10 @@ const shownDisplay = (view, name) => {
 	const named = (wanted) => displaysOf(view).find((display) => display.name === wanted);
 	return named(name) ?? named(view?.list?.default);
 };
+const defaultIcons = {
+	cards: "cards",
+	map: "map"
+};
 const displayChoices = (view) => [{
 	name: tableDisplay,
 	label: "Table",
@@ -26,29 +31,57 @@ const displayChoices = (view) => [{
 }, ...displaysOf(view).map((display) => ({
 	name: display.name,
 	label: display.label ?? humanize(display.name),
-	icon: display.icon ?? (display.kind === "cards" ? "cards" : void 0)
+	icon: display.icon ?? defaultIcons[display.kind]
 }))];
 /** The fields a cards display shows, its title the view's title field when it names none. */
 const cardFields = (model, view, display) => ({
 	image: display.image,
 	title: display.title ?? recordTitleField(model, view),
 	subtitle: display.subtitle,
+	amount: display.amount ?? [],
 	badge: display.badge,
 	meta: display.meta ?? [],
+	footer: display.footer ?? [],
 	flags: display.flags ?? []
 });
 /** The meta fields a card shows for a row: those with a value, so a listing for rent only shows no purchase price. */
 const filledMeta = (row, meta) => meta.filter((name) => row.record[name] !== null && row.record[name] !== void 0 && row.record[name] !== "");
+/** The amount field a card shows for a row: the first with a value, so a listing for rent only shows its rent. */
+const filledAmount = (row, amount) => filledMeta(row, amount)[0];
+/** A card's amount split for drawing: the number with its prefix, such as `€1,450`, apart from its suffix, such as ` /month`. */
+const amountParts = (field, value, hints = {}) => {
+	const { suffix, ...unsuffixed } = hints;
+	if (!(field.type === "decimal" || field.type === "integer" || field.type === "bigint") || suffix === void 0 || hints.format === "percent") return { amount: displayValue(field, value, hints) };
+	return {
+		amount: displayValue(field, value, unsuffixed),
+		suffix
+	};
+};
+/** The cards display whose card a map shows for a record: the one it names, else the list's first, else the title alone. */
+const mapCards = (view, display) => {
+	const cards = displaysOf(view).filter((other) => other.kind === "cards");
+	return (display.cards === void 0 ? cards[0] : cards.find((other) => other.name === display.cards)) ?? {
+		kind: "cards",
+		name: display.name
+	};
+};
 /** Every field a display shows, the fields its rows are loaded and labelled for. */
 const shownFields = (model, view, display) => {
 	if (display.kind === "custom") return display.fields;
-	const { image, title, subtitle, badge, meta, flags } = cardFields(model, view, display);
+	if (display.kind === "map") return [
+		display.latitude,
+		display.longitude,
+		...shownFields(model, view, mapCards(view, display))
+	];
+	const { image, title, subtitle, amount, badge, meta, footer, flags } = cardFields(model, view, display);
 	return [
 		image,
 		title,
 		subtitle,
+		...amount,
 		badge,
 		...meta,
+		...footer,
 		...flags
 	].filter((name) => name !== void 0);
 };
@@ -75,4 +108,4 @@ const displayRow = (model, row) => {
 	};
 };
 //#endregion
-export { cardFields, defaultDisplay, displayChoices, displayRow, displaysOf, filledMeta, loadedFields, shownDisplay, shownFields, sortFields };
+export { amountParts, cardFields, defaultDisplay, displayChoices, displayRow, displaysOf, filledAmount, filledMeta, loadedFields, mapCards, shownDisplay, shownFields, sortFields };

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

@@ -0,0 +1,120 @@
+import { Skeleton } from "../../primitives/skeleton.js";
+import { humanize } from "../../live/naming.js";
+import { mapCards } from "./list-displays.js";
+import { useAdminMeta } from "../meta-gate.js";
+import { Problem } from "../pages/problem.js";
+import { DisplayFooter, DisplayState } from "./display-frame.js";
+import { RecordCard } from "./record-card.js";
+import { keptSelection, mapPoints, stepSelection } from "./map-groups.js";
+import { Suspense, lazy, useLayoutEffect, useRef, useState } from "react";
+import { ChevronLeft, ChevronRight, 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 })));
+const arrow = "flex size-8 items-center justify-center rounded-full border border-border bg-background hover:bg-surface focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30";
+/**
+* The list's loaded records on a map, drawn with the map style `/meta` names. 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. Below the map, how many of the matching records are on it and a button for more.
+*/
+const MapDisplay = ({ model, view, display, list }) => {
+	const style = useAdminMeta().maps?.style;
+	const [chosen, setChosen] = useState();
+	const cards = mapCards(view, display);
+	const plural = (view?.names?.plural ?? humanize(model.name)).toLowerCase();
+	const selection = keptSelection(chosen, list.rows);
+	const row = selection && list.rows.find((candidate) => candidate.key === selection.keys[selection.index]);
+	const singular = (view?.names?.singular ?? humanize(model.name)).toLowerCase();
+	const markerLabel = (keys) => keys.length === 1 ? `Show the ${singular}` : `Show ${keys.length} ${plural}`;
+	const overlay = useRef(null);
+	const [covered, setCovered] = useState(0);
+	useLayoutEffect(() => setCovered(overlay.current?.offsetHeight ?? 0), [row?.key]);
+	if (!style) return /* @__PURE__ */ jsx(Problem, { children: "The map display needs a map style: set PROTOBASE_MAP_STYLE_URL." });
+	return /* @__PURE__ */ jsx(DisplayState, {
+		list,
+		empty: `No ${plural} match.`,
+		loading: /* @__PURE__ */ jsx(Skeleton, { className: "h-96" }),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex h-full min-h-[36rem] flex-col sm:min-h-[28rem]",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "relative min-h-0 flex-1 overflow-hidden rounded-lg border border-border bg-muted",
+				children: [/* @__PURE__ */ jsx(Suspense, {
+					fallback: null,
+					children: /* @__PURE__ */ jsx(RecordsMap, {
+						style,
+						points: mapPoints(list.rows, display),
+						selected: selection?.keys,
+						covered: selection ? covered : 0,
+						onSelect: (keys) => setChosen({
+							keys,
+							index: 0
+						}),
+						onClear: () => setChosen(void 0),
+						markerLabel
+					})
+				}), selection && row && /* @__PURE__ */ jsx("div", {
+					ref: overlay,
+					className: "pointer-events-none absolute inset-x-3 bottom-3 z-10 flex justify-center",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "pointer-events-auto flex w-full max-w-[16rem] flex-col gap-2 sm:max-w-xs",
+						role: "group",
+						"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",
+										"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": "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, {
+								model,
+								view,
+								display: cards,
+								row
+							})
+						})]
+					})
+				})]
+			}), /* @__PURE__ */ jsx(DisplayFooter, { list })]
+		})
+	});
+};
+//#endregion
+export { MapDisplay };

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

@@ -0,0 +1,55 @@
+import { recordPosition } from "../map/record-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. */
+const mapPoints = (rows, fields) => rows.flatMap((row) => {
+	const position = recordPosition(row.record, fields);
+	return position ? [{
+		key: row.key,
+		...position
+	}] : [];
+});
+/** The south-west and north-east corners around the points, as `[longitude, latitude]`, or none without points. */
+const pointBounds = (points) => {
+	if (points.length === 0) return void 0;
+	const longitudes = points.map((point) => point.longitude);
+	const latitudes = points.map((point) => point.latitude);
+	return [[Math.min(...longitudes), Math.min(...latitudes)], [Math.max(...longitudes), Math.max(...latitudes)]];
+};
+/**
+* The markers for the points as the map draws them: in order, each point joins the first marker within `radius` pixels
+* of it, else starts its own. A marker is at its first point, so markers do not move as others join them.
+*/
+const groupPoints = (points, radius) => {
+	const groups = [];
+	for (const point of points) {
+		const near = groups.find((group) => Math.hypot(group.at.x - point.x, group.at.y - point.y) <= radius);
+		if (near) near.keys.push(point.key);
+		else groups.push({
+			at: point,
+			keys: [point.key]
+		});
+	}
+	return groups.map((group) => ({
+		keys: group.keys,
+		at: group.at.key
+	}));
+};
+/** The selection kept to the records the list still has, its card the same record when it is still there. */
+const keptSelection = (selection, rows) => {
+	if (!selection) return void 0;
+	const present = new Set(rows.map((row) => row.key));
+	const keys = selection.keys.filter((key) => present.has(key));
+	if (keys.length === 0) return void 0;
+	const index = keys.indexOf(selection.keys[selection.index]);
+	return {
+		keys,
+		index: Math.max(index, 0)
+	};
+};
+/** The selection moved by `step` records, round from the last to the first. */
+const stepSelection = (selection, step) => ({
+	keys: selection.keys,
+	index: ((selection.index + step) % selection.keys.length + selection.keys.length) % selection.keys.length
+});
+//#endregion
+export { groupPoints, keptSelection, mapPoints, pointBounds, stepSelection };

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

@@ -0,0 +1,171 @@
+import { Badge } from "../../primitives/badge.js";
+import { humanize } from "../../live/naming.js";
+import { useProjectUi } from "../pages/project-ui.js";
+import { fileShown, isPreviewable } from "../../live/file-values.js";
+import { displayValue } from "../../live/display-value.js";
+import { amountParts, cardFields, filledAmount, filledMeta } from "./list-displays.js";
+import { AppLink } from "../use-app-address.js";
+import { shownWidget } from "../field-types/shown-widget.js";
+import { CustomBoundary } from "../pages/custom-boundary.js";
+import { WidgetPart } from "../field-types/widget-part.js";
+import { namedIcon } from "../named-icon.js";
+import { ValueBadge } from "../value-badge.js";
+import { CardCarousel } from "./card-carousel.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/displays/record-card.tsx
+const CardImage = ({ value }) => {
+	const file = fileShown(value);
+	const url = file && "url" in file && typeof file.url === "string" && isPreviewable(file.type) ? file.url : void 0;
+	return /* @__PURE__ */ jsx("span", {
+		className: "-mx-3 -mt-3 mb-1.5 block aspect-[4/3] overflow-hidden rounded-t-lg border-b border-border bg-muted",
+		children: url && /* @__PURE__ */ jsx("img", {
+			src: url,
+			alt: "",
+			loading: "lazy",
+			className: "size-full object-cover"
+		})
+	});
+};
+const MetaValue = ({ icon, children }) => {
+	const Icon = namedIcon(icon);
+	return /* @__PURE__ */ jsxs("dd", {
+		className: "flex items-center gap-1 tabular-nums",
+		children: [Icon && /* @__PURE__ */ jsx(Icon, {
+			className: "size-3.5 shrink-0",
+			"aria-hidden": true
+		}), children]
+	});
+};
+/**
+* A record's card of a cards display, opening its page: its image across the top, with arrows through its photos when
+* the display names them, the title over the subtitle, the badge beside it, the first amount with a value in bold, small
+* meta fields below, those with a value, the labels of its flags that are true and the footer's fields with a 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.
+*/
+const RecordCard = ({ model, view, display, row }) => {
+	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) => {
+		const field = model.fields[name];
+		if (!field) return "";
+		return row.labels[name] ?? displayValue(field, row.record[name], view?.fields[name]);
+	};
+	const { fields: fieldTypes, components } = useProjectUi();
+	const Card = display.card === void 0 ? void 0 : components?.[display.card];
+	const shownValue = (name) => {
+		const field = model.fields[name];
+		const shown = field && shownWidget(fieldTypes, field, view?.fields[name]);
+		return shown ? /* @__PURE__ */ jsx(WidgetPart, {
+			shown,
+			part: "display",
+			field,
+			value: row.record[name],
+			fallback: text(name)
+		}) : text(name);
+	};
+	const metaValue = (name) => {
+		const field = model.fields[name];
+		const hints = view?.fields[name];
+		const value = row.record[name];
+		if (!field || hints?.format !== "badge" || shownWidget(fieldTypes, field, hints) || value === null || value === void 0 || value === "") return shownValue(name);
+		return /* @__PURE__ */ jsx(ValueBadge, {
+			value,
+			hints,
+			children: text(name)
+		});
+	};
+	const amountValue = (name) => {
+		const field = model.fields[name];
+		if (!field) return void 0;
+		if (row.labels[name] !== void 0 || shownWidget(fieldTypes, field, view?.fields[name])) return /* @__PURE__ */ jsx("strong", {
+			className: "font-semibold text-foreground",
+			children: shownValue(name)
+		});
+		const parts = amountParts(field, row.record[name], view?.fields[name]);
+		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("strong", {
+			className: "font-semibold text-foreground",
+			children: parts.amount
+		}), parts.suffix] });
+	};
+	const photos = Card ? void 0 : display.photos;
+	const status = badge === void 0 ? void 0 : row.record[badge];
+	const raised = flags.filter((name) => row.record[name] === true);
+	const cover = image === void 0 ? void 0 : row.record[image];
+	const shownAmount = filledAmount(row, amount);
+	const footing = filledMeta(row, footer);
+	const builtIn = (photo) => /* @__PURE__ */ jsxs(Fragment, { children: [
+		(image !== void 0 || photos !== void 0) && /* @__PURE__ */ jsx(CardImage, { value: photo }),
+		/* @__PURE__ */ jsxs("span", {
+			className: "flex items-start justify-between gap-2",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "min-w-0 truncate font-medium",
+				children: shownValue(title)
+			}), badge !== void 0 && status !== null && status !== void 0 && /* @__PURE__ */ jsx(ValueBadge, {
+				value: status,
+				hints: view?.fields[badge],
+				children: text(badge)
+			})]
+		}),
+		subtitle !== void 0 && /* @__PURE__ */ jsx("span", {
+			className: "truncate text-muted-foreground",
+			children: shownValue(subtitle)
+		}),
+		shownAmount !== void 0 && /* @__PURE__ */ jsx("span", {
+			className: "truncate tabular-nums text-muted-foreground",
+			children: amountValue(shownAmount)
+		}),
+		meta.length > 0 && /* @__PURE__ */ jsx("dl", {
+			className: "mt-auto flex flex-wrap items-center gap-x-3 gap-y-0.5 pt-1 text-xs text-muted-foreground",
+			children: filledMeta(row, meta).map((name) => /* @__PURE__ */ jsxs("div", {
+				className: "flex gap-1",
+				children: [/* @__PURE__ */ jsx("dt", {
+					className: "sr-only",
+					children: label(name)
+				}), /* @__PURE__ */ jsx(MetaValue, {
+					icon: view?.fields[name]?.icon,
+					children: metaValue(name)
+				})]
+			}, name))
+		}),
+		raised.length > 0 && /* @__PURE__ */ jsx("ul", {
+			className: "flex flex-wrap gap-1",
+			"aria-label": "Features",
+			children: raised.map((name) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Badge, {
+				dot: false,
+				children: label(name)
+			}) }, name))
+		}),
+		footing.length > 0 && /* @__PURE__ */ jsx("span", {
+			className: `truncate text-xs text-muted-foreground ${meta.length > 0 ? "" : "mt-auto"}`,
+			children: footing.map((name, index) => /* @__PURE__ */ jsxs("span", { children: [index > 0 && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				children: " • "
+			}), shownValue(name)] }, name))
+		})
+	] });
+	const card = (photo) => /* @__PURE__ */ jsx(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, {
+			name: display.card,
+			fallback: builtIn(photo),
+			children: /* @__PURE__ */ jsx(Card, { row })
+		}) : builtIn(photo)
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: photos ? "group/card relative h-full" : "h-full",
+		children: photos ? /* @__PURE__ */ jsx(CardCarousel, {
+			photos,
+			recordKey: row.key,
+			cover,
+			children: card
+		}) : card(cover)
+	});
+};
+//#endregion
+export { RecordCard };

package/dist/app/field-editor.js

@@ -1,9 +1,9 @@
 import { cn } from "../lib/cn.js";
 import { Input } from "../primitives/input.js";
 import { Switch } from "../primitives/switch.js";
+import { displayValue } from "../live/display-value.js";
 import { AppLink } from "./use-app-address.js";
 import { RelationPicker } from "./relation-picker.js";
-import { displayValue } from "../live/display-value.js";
 import { fromDraft, isEditable, toFieldDraft } from "../live/field-values.js";
 import { SensitiveField } from "./sensitive-field.js";
 import { FileField } from "./file-field.js";