@protobase/ui 0.12.22 → 0.13.0

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

@@ -0,0 +1,19 @@
+/** How many cards fit across `width`, as a grid of `repeat(auto-fill, minmax(15rem, 1fr))` would place them. */
+const cardColumns = (width) => Math.max(1, Math.floor((width + 12) / 252));
+const cardWidth = (width, columns) => Math.max(0, (width - (columns - 1) * 12) / columns);
+/** The records the card rows `first` to `last` hold, as a first and last record index. */
+const recordRange = (first, last, columns, total) => ({
+	start: first * columns,
+	end: Math.max(0, Math.min(total, (last + 1) * columns) - 1)
+});
+/**
+* The scroll offset after a layout change that keeps the same records in view: the same place in the same row when
+* only the row height changed, else the row now holding the first record of the row that was at the top.
+*/
+const anchoredTop = (top, before, after) => {
+	const row = top / before.rowHeight;
+	if (before.columns === after.columns) return row * after.rowHeight;
+	return Math.floor(Math.floor(row) * before.columns / after.columns) * after.rowHeight;
+};
+//#endregion
+export { anchoredTop, cardColumns, cardWidth, recordRange };

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

@@ -1,12 +1,14 @@
+import { cn } from "../../lib/cn.js";
 import { Skeleton } from "../../primitives/skeleton.js";
 import { humanize } from "../../live/naming.js";
-import { DisplayFooter, DisplayState } from "./display-frame.js";
 import { RecordCard } from "./record-card.js";
+import { DisplayFooter, DisplayState } from "./display-frame.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";
-/** 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 scroller = "flex snap-x snap-mandatory gap-3 overflow-x-auto pb-1";
+/** A card per record (see `RecordCard`), in a grid or a row, with how many match and a button for more below. */
+const CardsDisplay = ({ model, view, display, list, row = false, footer = true }) => {
 	const plural = (view?.names?.plural ?? humanize(model.name)).toLowerCase();
 	return /* @__PURE__ */ jsxs(DisplayState, {
 		list,
@@ -16,15 +18,18 @@ const CardsDisplay = ({ model, view, display, list }) => {
 			children: Array.from({ length: 6 }, (_, index) => /* @__PURE__ */ jsx(Skeleton, { className: "h-24" }, index))
 		}),
 		children: [/* @__PURE__ */ jsx("ul", {
-			className: grid,
+			className: row ? scroller : grid,
 			"aria-label": view?.names?.plural ?? humanize(model.name),
-			children: list.rows.map((row) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(RecordCard, {
-				model,
-				view,
-				display,
-				row
-			}) }, row.key))
-		}), /* @__PURE__ */ jsx(DisplayFooter, { list })]
+			children: list.rows.map((record) => /* @__PURE__ */ jsx("li", {
+				className: cn(row && "w-64 shrink-0 snap-start"),
+				children: /* @__PURE__ */ jsx(RecordCard, {
+					model,
+					view,
+					display,
+					row: record
+				})
+			}, record.key))
+		}), footer && /* @__PURE__ */ jsx(DisplayFooter, { list })]
 	});
 };
 //#endregion

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

@@ -0,0 +1,50 @@
+import { Skeleton } from "../../primitives/skeleton.js";
+import { humanize } from "../../live/naming.js";
+import { displayRow } from "./list-displays.js";
+import { ErrorBanner } from "../error-banner.js";
+import { RecordCard } from "./record-card.js";
+import { VirtualCards } from "./virtual-cards.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/displays/list-cards.tsx
+const grid = "grid grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] gap-3";
+const pictureHeight = (width) => width * .75;
+const plainHeight = 44;
+/**
+* The list page's cards display: a card per record (see `RecordCard`), scrolled like the table, with which of the
+* matching records are in view below. An embedded list, which shows a few cards whole, draws them with `CardsDisplay`.
+*/
+const ListCards = ({ model, view, display, list }) => {
+	const plural = view?.names?.plural ?? humanize(model.name);
+	const pictured = display.card === void 0 && (display.image !== void 0 || display.photos !== void 0);
+	if (list.isLoading) return /* @__PURE__ */ jsx("div", {
+		className: `min-h-0 flex-1 overflow-hidden ${grid}`,
+		children: Array.from({ length: 6 }, (_, index) => /* @__PURE__ */ jsx(Skeleton, { className: "h-24" }, index))
+	});
+	if (list.error) return /* @__PURE__ */ jsx(ErrorBanner, {
+		title: "Could not load rows",
+		error: list.error
+	});
+	if (!list.source || list.source.total === 0) return /* @__PURE__ */ jsxs("p", {
+		className: "py-8 text-center text-[13px] text-muted-foreground",
+		children: [
+			"No ",
+			plural.toLowerCase(),
+			" match."
+		]
+	});
+	return /* @__PURE__ */ jsx(VirtualCards, {
+		source: list.source,
+		label: plural,
+		initialIndex: list.initialIndex,
+		onScrollIndex: list.onScrollIndex,
+		minHeight: (width) => (pictured ? pictureHeight(width) : 0) + plainHeight,
+		children: (row) => /* @__PURE__ */ jsx(RecordCard, {
+			model,
+			view,
+			display,
+			row: displayRow(model, row)
+		})
+	});
+};
+//#endregion
+export { ListCards };

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

@@ -6,10 +6,11 @@ import { encodeKey, tableDisplay } from "@protobase/schema";
 const displaysOf = (view) => view?.list?.displays ?? [];
 /**
 * The display a list opens in when its address names none. Below the `sm` breakpoint a list with a cards display opens
-* in one: the view's default when that is a cards display, else the first. Otherwise the view's default, or the table.
+* in one: `preferred` or the view's default when that is a cards display, else the first. Otherwise `preferred`, the
+* view's default, or the table.
 */
-const defaultDisplay = (view, xs) => {
-	const fallback = view?.list?.default ?? tableDisplay;
+const defaultDisplay = (view, xs, preferred) => {
+	const fallback = preferred ?? view?.list?.default ?? tableDisplay;
 	if (!xs) return fallback;
 	const cards = displaysOf(view).filter((display) => display.kind === "cards");
 	return cards.find((display) => display.name === fallback)?.name ?? cards[0]?.name ?? fallback;

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

@@ -3,8 +3,8 @@ 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 { DisplayFooter, DisplayState } from "./display-frame.js";
 import { keptSelection, mapPoints, stepSelection } from "./map-groups.js";
 import { Suspense, lazy, useLayoutEffect, useRef, useState } from "react";
 import { ChevronLeft, ChevronRight, X } from "lucide-react";
@@ -17,7 +17,7 @@ const arrow = "flex size-8 items-center justify-center rounded-full border borde
 * 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 MapDisplay = ({ model, view, display, list, footer = true }) => {
 	const style = useAdminMeta().maps?.style;
 	const [chosen, setChosen] = useState();
 	const cards = mapCards(view, display);
@@ -112,7 +112,7 @@ const MapDisplay = ({ model, view, display, list }) => {
 						})]
 					})
 				})]
-			}), /* @__PURE__ */ jsx(DisplayFooter, { list })]
+			}), footer && /* @__PURE__ */ jsx(DisplayFooter, { list })]
 		})
 	});
 };

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/list-page.js

@@ -26,11 +26,12 @@ import { useLiveRows } from "../live/use-live-rows.js";
 import { Sheet } from "../primitives/sheet.js";
 import { useDeleteFlow } from "./delete/use-delete-flow.js";
 import { useRestore } from "./delete/use-restore.js";
-import { CardsDisplay } from "./displays/cards-display.js";
+import { ListCards } from "./displays/list-cards.js";
 import { MapDisplay } from "./displays/map-display.js";
 import { CustomDisplay } from "./displays/custom-display.js";
 import { DisplaySwitch, SortMenu } from "./displays/display-controls.js";
 import { useDisplayRows } from "./displays/use-display-rows.js";
+import { useListScroll } from "./list-scroll.js";
 import { ListChart } from "./list-chart.js";
 import { ListSearch } from "./list-search.js";
 import { withFieldTypeCells } from "./field-types/field-type-cells.js";
@@ -98,7 +99,8 @@ const LoadedList = ({ model, address }) => {
 		orderBy
 	});
 	const display = shownDisplay(view, address.display);
-	const displayRows = useDisplayRows(model, rows.page, rows.key, display !== void 0);
+	const displayRows = useDisplayRows(model, rows.page, rows.key, display !== void 0 && display.kind !== "cards");
+	const scroll = useListScroll();
 	const titleField = recordTitleField(model, view);
 	const target = (row) => ({
 		key: row.id,
@@ -234,6 +236,8 @@ const LoadedList = ({ model, address }) => {
 		sort: parseSort(orderBy),
 		onSortChange: (sort) => set({ orderBy: sortToOrderBy(sort) }),
 		onOpenRow: openRecord,
+		initialScrollIndex: scroll.initialIndex,
+		onScrollIndex: scroll.remember,
 		rowActions: [{
 			label: `Open ${singular.toLowerCase()}`,
 			onSelect: openRecord
@@ -252,14 +256,19 @@ const LoadedList = ({ model, address }) => {
 		pinKey: auth.kind === "signed-in" ? pinnedStorageKey(auth.user.id, resource) : void 0,
 		className: "min-h-0 flex-1"
 	}) : /* @__PURE__ */ jsx("div", { className: "flex-1 rounded-lg border bg-surface" });
+	const cardsList = {
+		...rows,
+		initialIndex: scroll.initialIndex,
+		onScrollIndex: scroll.remember
+	};
 	const drawDisplay = () => {
 		if (!display) return table;
-		if (display.kind === "cards") return /* @__PURE__ */ jsx(CardsDisplay, {
+		if (display.kind === "cards") return /* @__PURE__ */ jsx(ListCards, {
 			model,
 			view,
 			display,
-			list: displayRows
-		});
+			list: cardsList
+		}, rows.key.join(" "));
 		if (display.kind === "map") return /* @__PURE__ */ jsx(MapDisplay, {
 			model,
 			view,