@protobase/ui 0.12.21 → 0.13.0

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/displays/virtual-cards.js

@@ -0,0 +1,138 @@
+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 { anchoredTop, cardColumns, cardWidth, recordRange } from "./card-layout.js";
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/displays/virtual-cards.tsx
+/**
+* Cards in rows as wide as the list, scrolled like the table: only the rows in view are drawn, over a scroller that
+* holds any number of records, 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.
+*/
+const VirtualCards = ({ source, label, initialIndex, onScrollIndex, minHeight, children }) => {
+	const { total } = source;
+	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 rowHeight = itemHeight + 12;
+	const layout = {
+		columns,
+		rowHeight
+	};
+	const anchor = useRef({
+		layout,
+		top: 0
+	});
+	const changed = anchor.current.layout.columns !== columns || anchor.current.layout.rowHeight !== rowHeight;
+	const settle = (top) => changed ? anchoredTop(anchor.current.top, anchor.current.layout, layout) : top;
+	const scroll = useVirtualRows({
+		total: Math.ceil(total / columns),
+		rowHeight,
+		initialIndex: Math.floor(initialIndex / columns),
+		settle
+	});
+	useLayoutEffect(() => {
+		if (changed) scroll.scrollTo(scroll.top);
+		anchor.current = {
+			layout,
+			top: scroll.top
+		};
+		if (!changed) onScrollIndex(Math.floor(scroll.top / rowHeight) * columns);
+	});
+	const range = recordRange(scroll.first, scroll.last, columns, total);
+	const getRow = usePagedRows({
+		total,
+		rowAt: source.rowAt,
+		loadRows: source.loadRows,
+		latencyMs: 0
+	}, range.start, range.end);
+	const bodyRef = useRef(null);
+	useLayoutEffect(() => {
+		const body = bodyRef.current;
+		if (!body) return;
+		const observer = new ResizeObserver(() => setWidth(body.clientWidth));
+		observer.observe(body);
+		setWidth(body.clientWidth);
+		return () => observer.disconnect();
+	}, []);
+	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)
+		});
+	}));
+	useLayoutEffect(() => () => observer.disconnect(), [observer]);
+	const observe = useCallback((item) => {
+		if (!item) return;
+		observer.observe(item);
+		return () => observer.unobserve(item);
+	}, [observer]);
+	const firstShown = Math.min(total, Math.floor(scroll.top / rowHeight) * columns + 1);
+	const lastShown = Math.min(total, (Math.floor((scroll.top + Math.max(0, scroll.viewport - 1)) / rowHeight) + 1) * columns);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex min-h-0 flex-1 flex-col",
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: scroll.ref,
+			onScroll: scroll.onScroll,
+			className: "relative min-h-0 flex-1 overflow-y-auto overflow-x-hidden",
+			children: /* @__PURE__ */ jsx("div", {
+				style: { height: scroll.geometry.contentHeight || void 0 },
+				children: /* @__PURE__ */ jsx("div", {
+					ref: bodyRef,
+					className: "sticky top-0 overflow-clip",
+					style: { height: scroll.viewport },
+					children: /* @__PURE__ */ jsx("ul", {
+						className: "relative",
+						"aria-label": label,
+						children: scroll.rows.flatMap(({ index: rowIndex, offset }) => Array.from({ length: columns }, (_, column) => {
+							const index = rowIndex * columns + column;
+							if (index >= total) return [];
+							const row = getRow(index);
+							const place = {
+								top: offset,
+								left: column * (itemWidth + 12),
+								width: itemWidth,
+								minHeight: itemHeight
+							};
+							if (!row) return /* @__PURE__ */ jsx("li", {
+								"aria-hidden": true,
+								className: "absolute grid grid-cols-[minmax(0,1fr)]",
+								style: place,
+								children: /* @__PURE__ */ jsx(Skeleton, { className: "h-full rounded-lg" })
+							}, `skeleton-${index}`);
+							return /* @__PURE__ */ jsx("li", {
+								ref: observe,
+								"aria-posinset": index + 1,
+								"aria-setsize": total,
+								className: "absolute grid grid-cols-[minmax(0,1fr)]",
+								style: place,
+								children: children(row)
+							}, row.id);
+						}))
+					})
+				})
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "py-3 text-xs tabular-nums text-muted-foreground",
+			children: [
+				firstShown.toLocaleString("en-IE"),
+				"–",
+				lastShown.toLocaleString("en-IE"),
+				" of ",
+				total.toLocaleString("en-IE")
+			]
+		})]
+	});
+};
+//#endregion
+export { VirtualCards };

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

@@ -0,0 +1,52 @@
+import { humanize } from "../../live/naming.js";
+import { displayRow } from "../displays/list-displays.js";
+import { columnsFromModel } from "../../live/columns-from-model.js";
+import { withFieldTypeCells } from "../field-types/field-type-cells.js";
+import { scopeOf } from "../pages/use-layout-data.js";
+import { FieldValue } from "../pages/field-value.js";
+import { usePathValue } from "../pages/use-path-value.js";
+import { jsx } from "react/jsx-runtime";
+import { resolveFieldPath } from "@protobase/layout";
+//#region src/app/embedded-list/embedded-columns.tsx
+const isPath = (column) => column.includes(".");
+/** A value through relations (`unit_id.property_id`), fetched like the record page fetches it and cached. */
+const PathCell = ({ model, row, column }) => {
+	const value = usePathValue(scopeOf(model, displayRow(model, row).record), column);
+	if (value.state === "loading") return /* @__PURE__ */ jsx("span", {
+		className: "text-muted-foreground",
+		children: "…"
+	});
+	if (value.state === "missing") return /* @__PURE__ */ jsx("span", {
+		className: "text-muted-foreground",
+		children: "—"
+	});
+	return /* @__PURE__ */ jsx(FieldValue, {
+		model: value.model,
+		field: value.field,
+		value: value.value
+	});
+};
+/** A column through relations, headed by the label of the field it ends at. */
+const pathColumn = (model, column, { resources, views }) => {
+	const resolved = resolveFieldPath(resources, model.name, column);
+	const last = resolved.ok ? resolved.steps.at(-1) : void 0;
+	const name = last?.field.name ?? column;
+	return {
+		id: column,
+		header: views[last?.model.name ?? model.name]?.fields[name]?.label ?? humanize(name),
+		kind: "text",
+		width: 200,
+		render: (row) => /* @__PURE__ */ jsx(PathCell, {
+			model,
+			row,
+			column
+		})
+	};
+};
+/** The list page's columns for `names`: fields of `model` as its table draws them, and paths through relations. */
+const embeddedColumns = (model, view, names, meta) => {
+	const fields = new Map(withFieldTypeCells(columnsFromModel(model, view, [], names.filter((name) => !isPath(name))), model, view, meta.fieldTypes).map((spec) => [spec.id, spec]));
+	return names.flatMap((name) => isPath(name) ? [pathColumn(model, name, meta)] : fields.get(name) ?? []);
+};
+//#endregion
+export { embeddedColumns };

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

@@ -0,0 +1,26 @@
+import { guarded } from "../../lib/guarded.js";
+import { defaultDisplay, displayChoices } from "../displays/list-displays.js";
+import { changedList, listDefaults } from "../current-address.js";
+//#region src/app/embedded-list/embedded-display.ts
+const prefix = "protobase:embedded-display:";
+/** Where a viewer's pick of display is kept for one embedded list, named by the place it is shown. */
+const embeddedDisplayKey = (place) => `${prefix}${place}`;
+const readPickedDisplay = (storage, key) => guarded(() => storage.getItem(key) ?? void 0, void 0);
+const writePickedDisplay = (storage, key, display) => guarded(() => storage.setItem(key, display), void 0);
+/**
+* The display an embedded list shows: the viewer's pick while the view still has it, else what the list opens in for
+* the screen, with the display the page names in place of the view's default (below `sm`, a cards display when the
+* view has one).
+*/
+const embeddedDisplay = (view, xs, { picked, preferred }) => {
+	const names = displayChoices(view).map((choice) => choice.name);
+	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({
+	kind: "list",
+	resource: model.name
+}, list, listDefaults(model, view, xs));
+//#endregion
+export { embeddedDisplay, embeddedDisplayKey, readPickedDisplay, viewAllAddress, writePickedDisplay };

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

@@ -0,0 +1,155 @@
+import { useIsDesktop, useIsXs } from "../../lib/use-media-query.js";
+import { Skeleton } from "../../primitives/skeleton.js";
+import { recordKey } from "../../live/model-helpers.js";
+import { humanize } from "../../live/naming.js";
+import { useProjectUi } from "../pages/project-ui.js";
+import { displayRow, loadedFields, shownDisplay } from "../displays/list-displays.js";
+import { defaultOrderBy, parseSort, sortToOrderBy } from "../list-order.js";
+import { useAdminMeta } from "../meta-gate.js";
+import { AppLink, useAppAddress } from "../use-app-address.js";
+import { ErrorBanner } from "../error-banner.js";
+import { DataGrid } from "../../data-grid/data-grid.js";
+import { listColumnNames } from "../../live/columns-from-model.js";
+import { MapDisplay } from "../displays/map-display.js";
+import { CustomDisplay } from "../displays/custom-display.js";
+import { DisplaySwitch } from "../displays/display-controls.js";
+import { CardsDisplay } from "../displays/cards-display.js";
+import { embeddedColumns } from "./embedded-columns.js";
+import { viewAllAddress } from "./embedded-display.js";
+import { useEmbeddedRows } from "./use-embedded-rows.js";
+import { useMemo, useState } from "react";
+import { ArrowRight } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/embedded-list/embedded-list.tsx
+/** The switch between the table and the view's displays, for an embedded list's heading; nothing with only a table. */
+const EmbeddedDisplaySwitch = ({ view, value, onChange }) => /* @__PURE__ */ jsx(DisplaySwitch, {
+	view,
+	value,
+	onChange,
+	menu: !useIsDesktop()
+});
+const Loading = () => /* @__PURE__ */ jsx("div", {
+	className: "flex flex-col gap-2",
+	children: Array.from({ length: 3 }, (_, index) => /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }, index))
+});
+/**
+* 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 }) => {
+	const { resources, views } = useAdminMeta();
+	const { fields: fieldTypes } = useProjectUi();
+	const { go } = useAppAddress();
+	const xs = useIsXs();
+	const [orderBy, setOrderBy] = useState(sort || defaultOrderBy(model, view));
+	const names = columns ?? listColumnNames(model, view);
+	const specs = useMemo(() => embeddedColumns(model, view, names, {
+		resources,
+		views,
+		fieldTypes
+	}), [
+		model,
+		view,
+		names.join(","),
+		resources,
+		views,
+		fieldTypes
+	]);
+	const fields = useMemo(() => loadedFields(model, view, specs.map((spec) => spec.id)), [
+		model,
+		view,
+		specs
+	]);
+	const rows = useEmbeddedRows({
+		model,
+		filter,
+		orderBy,
+		limit,
+		fields
+	});
+	const loaded = rows.data;
+	const source = useMemo(() => loaded && {
+		total: loaded.length,
+		rowAt: (index) => loaded[index]
+	}, [loaded]);
+	const shown = shownDisplay(view, display);
+	if (rows.isPending) return /* @__PURE__ */ jsx(Loading, {});
+	if (rows.error) return /* @__PURE__ */ jsx(ErrorBanner, {
+		title: "Could not load",
+		error: rows.error
+	});
+	if (!source || source.total === 0) return /* @__PURE__ */ jsx("p", {
+		className: "text-[13px] text-muted-foreground",
+		children: empty ?? "Nothing here yet."
+	});
+	const list = {
+		resource: model.name,
+		rows: rows.data.map((row) => displayRow(model, row)),
+		total: rows.data.length,
+		loading: false,
+		error: null,
+		more: false,
+		loadMore: () => void 0
+	};
+	const openRecord = (row) => go({
+		kind: "record",
+		resource: model.name,
+		key: recordKey(model, row)
+	});
+	const singular = view?.names?.singular ?? humanize(model.name);
+	const plural = view?.names?.plural ?? humanize(model.name);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-3",
+		children: [!shown ? /* @__PURE__ */ jsx(DataGrid, {
+			fit: true,
+			columns: specs,
+			source,
+			latencyMs: 0,
+			sort: parseSort(orderBy),
+			onSortChange: (next) => setOrderBy(sortToOrderBy(next)),
+			onOpenRow: openRecord,
+			rowActions: [{
+				label: `Open ${singular.toLowerCase()}`,
+				onSelect: openRecord
+			}],
+			rowNumbers: false,
+			selectable: false
+		}) : shown.kind === "cards" ? /* @__PURE__ */ jsx(CardsDisplay, {
+			model,
+			view,
+			display: shown,
+			list,
+			row: xs,
+			footer: false
+		}) : shown.kind === "map" ? /* @__PURE__ */ jsx(MapDisplay, {
+			model,
+			view,
+			display: shown,
+			list,
+			footer: false
+		}) : /* @__PURE__ */ jsx(CustomDisplay, {
+			display: shown,
+			list
+		}), /* @__PURE__ */ jsxs(AppLink, {
+			to: viewAllAddress(model, view, xs, {
+				filter,
+				orderBy,
+				display
+			}),
+			className: "flex items-center gap-1 self-end text-[13px] font-medium text-primary-text hover:underline",
+			children: [
+				"View all ",
+				/* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: plural.toLowerCase()
+				}),
+				/* @__PURE__ */ jsx(ArrowRight, {
+					className: "size-3.5",
+					"aria-hidden": true
+				})
+			]
+		})]
+	});
+};
+//#endregion
+export { EmbeddedDisplaySwitch, EmbeddedList };

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

@@ -0,0 +1,23 @@
+import { useIsXs } from "../../lib/use-media-query.js";
+import { embeddedDisplay, embeddedDisplayKey, readPickedDisplay, writePickedDisplay } from "./embedded-display.js";
+import { useCallback, useState } from "react";
+//#region src/app/embedded-list/use-embedded-display.ts
+/**
+* The display an embedded list shows and the way to pick another, which is kept in local storage for the viewer under
+* `place`, the list's place in the app.
+*/
+const useEmbeddedDisplay = (view, place, preferred) => {
+	const xs = useIsXs();
+	const key = embeddedDisplayKey(place);
+	const [picked, setPicked] = useState(() => readPickedDisplay(localStorage, key));
+	const pick = useCallback((display) => {
+		setPicked(display);
+		writePickedDisplay(localStorage, key, display);
+	}, [key]);
+	return [embeddedDisplay(view, xs, {
+		picked,
+		preferred
+	}), pick];
+};
+//#endregion
+export { useEmbeddedDisplay };

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

@@ -0,0 +1,33 @@
+import { keys } from "../../data/query-keys.js";
+import { useClient } from "../../data/api-provider.js";
+import { recordId } from "../../live/model-helpers.js";
+import { withLabels } from "../../live/relation-labels.js";
+import { useAdminMeta } from "../meta-gate.js";
+import { keepPreviousData, useQuery, useQueryClient } from "@tanstack/react-query";
+//#region src/app/embedded-list/use-embedded-rows.ts
+/**
+* The first `limit` records in `orderBy` order, as the list page's table and displays get them: relations among
+* `fields` as `{ id, name }`. A filter through a join resource may hold hundreds of keys, so it goes in a JSON body.
+*/
+const useEmbeddedRows = ({ model, filter, orderBy, limit, fields }) => {
+	const client = useClient();
+	const queryClient = useQueryClient();
+	const { resources, views } = useAdminMeta();
+	return useQuery({
+		queryKey: [...keys.list(model.name, filter, orderBy, limit, "embedded"), fields.join(",")],
+		placeholderData: keepPreviousData,
+		queryFn: async () => {
+			const page = await client.search(model.name, {
+				filter: filter || void 0,
+				orderBy: orderBy || void 0,
+				pageSize: limit
+			});
+			return (await withLabels(queryClient, client, resources, views, model, fields, page.items)).map((row, index) => ({
+				...row,
+				id: recordId(model, page.items[index])
+			}));
+		}
+	});
+};
+//#endregion
+export { useEmbeddedRows };

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";