@protobase/ui 0.14.1 → 0.14.2

package/dist/app/current-address.js

@@ -2,6 +2,24 @@ import { defaultDisplay } from "./displays/list-displays.js";
 import { defaultOrderBy } from "./list-order.js";
 import { encodeKey } from "@protobase/schema/internal";
 //#region src/app/current-address.ts
+/**
+* The resource whose records a list shows, with its view: the list's own, or, when its view has `listOf`, the resource
+* that relation points at, if the caller can see it.
+*/
+const listedResource = (resources, views, resource) => {
+	const model = resources[resource];
+	const listOf = views[resource]?.listOf;
+	const target = listOf === void 0 ? void 0 : model?.fields[listOf]?.relation?.resource;
+	return target !== void 0 && resources[target] ? {
+		model: resources[target],
+		view: views[target],
+		listOf: true
+	} : {
+		model,
+		view: views[resource],
+		listOf: false
+	};
+};
 /** What a list shows when its address names nothing: its default display for the screen, the list's sort, the filters in a bar. */
 const listDefaults = (model, view, xs = false) => ({
 	display: defaultDisplay(view, xs),
@@ -40,4 +58,4 @@ const changedList = (read, change, defaults) => {
 	};
 };
 //#endregion
-export { changedList, currentAddress, listDefaults };
+export { changedList, currentAddress, listDefaults, listedResource };

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

@@ -1,46 +1,58 @@
 import { cn } from "../../lib/cn.js";
-import { keys } from "../../data/query-keys.js";
-import { useClient } from "../../data/api-provider.js";
-import { useAdminMeta } from "../meta-gate.js";
-import { cardPhotoList, cardPhotosRequest, shownPhoto } from "./card-photos.js";
-import { useState } from "react";
+import { CardImageFrame, CardPhoto } from "./card-image.js";
+import { cardPhotoList, scrolledPhoto, shownPhoto } from "./card-photos.js";
+import { useRef, useState } from "react";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { useQuery } from "@tanstack/react-query";
 //#region src/app/displays/card-carousel.tsx
-const arrow = "pointer-events-auto absolute top-1/2 flex size-7 -translate-y-1/2 items-center justify-center rounded-full bg-background/85 text-foreground shadow-sm opacity-0 transition-opacity group-hover/card:opacity-100 group-focus-within/card:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 [@media(hover:none)]:opacity-100";
+const arrow = "pointer-events-auto absolute top-1/2 flex size-7 -translate-y-1/2 items-center justify-center rounded-full bg-background/85 text-foreground shadow-sm opacity-0 transition-opacity group-has-[[data-card-photos]:hover]/card:opacity-100 group-hover/arrows:opacity-100 group-has-[:focus-visible]/arrows:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30";
+const touchArrow = "[@media(hover:none)]:opacity-100";
 /**
-* A card whose picture steps through its photos with arrows, the card's own image first. The photos load when an arrow
-* is first pressed, so the list loads as it does without them. The arrows sit over the card's link, beside it in the
-* document, so pressing one does not open the record; the card's list item must be `relative group/card`.
+* A card whose picture steps through its photos, the card's own image first: a track that snaps photo by photo, swiped
+* on a touch screen or moved by arrows, with dots marking the one in view. The photos come with the card's row, in the
+* same answer as the list, so the dots mark its own image from the start. The track sits inside the card's link, so a
+* tap opens the record and a swipe does not; the arrows sit over it, beside the link in the document, so pressing one
+* does not open the record either. The card's list item must be `relative group/card`.
 */
-const CardCarousel = ({ photos, recordKey, cover, children }) => {
-	const client = useClient();
-	const [opened, setOpened] = useState(false);
-	const [step, setStep] = useState(0);
-	const target = useAdminMeta().resources[photos.resource];
-	const placeholder = target?.fields[photos.image]?.file?.placeholder;
-	const request = cardPhotosRequest(photos, recordKey, placeholder !== void 0 && target?.fields[placeholder] ? placeholder : void 0);
-	const loaded = useQuery({
-		queryKey: keys.list(photos.resource, request.filter, request.orderBy ?? "", request.pageSize, `card-photos:${photos.image}`),
-		enabled: opened,
-		queryFn: async () => (await client.list(photos.resource, request)).items.map((item) => item[photos.image])
-	});
-	const list = cardPhotoList(cover, loaded.data ?? []);
-	const index = shownPhoto(step, list.length);
+const CardCarousel = ({ photos, cover, swipe = true, children }) => {
+	const track = useRef(null);
+	const aim = useRef(void 0);
+	const [index, setIndex] = useState(0);
+	const list = cardPhotoList(cover, photos);
+	const show = (position) => {
+		const scroller = track.current;
+		if (scroller) scroller.scrollTo({ left: position * scroller.clientWidth });
+	};
 	const press = (by) => {
-		setOpened(true);
-		setStep((current) => current + by);
+		aim.current = shownPhoto((aim.current ?? index) + by, list.length);
+		show(aim.current);
+	};
+	const touch = () => {
+		aim.current = void 0;
 	};
-	const single = loaded.data !== void 0 && list.length < 2;
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [children(list[index]), !single && /* @__PURE__ */ jsxs("div", {
-		className: "pointer-events-none absolute inset-x-px top-px aspect-[4/3]",
-		"aria-busy": loaded.isFetching,
+	const scrolled = (scroller) => {
+		setIndex(scrolledPhoto(scroller.scrollLeft, scroller.clientWidth, list.length));
+		if (aim.current !== void 0 && Math.abs(scroller.scrollLeft - aim.current * scroller.clientWidth) < 1) aim.current = void 0;
+	};
+	const picture = /* @__PURE__ */ jsx(CardImageFrame, { children: /* @__PURE__ */ jsx("span", {
+		ref: track,
+		tabIndex: -1,
+		"data-card-photos": true,
+		onPointerDown: touch,
+		onScroll: (event) => scrolled(event.currentTarget),
+		className: cn("flex size-full snap-x snap-mandatory outline-none [scrollbar-width:none] motion-safe:scroll-smooth [&::-webkit-scrollbar]:hidden", swipe ? "overflow-x-auto overscroll-x-contain" : "overflow-x-hidden"),
+		children: list.map((photo, position) => /* @__PURE__ */ jsx("span", {
+			className: "block size-full shrink-0 snap-start snap-always",
+			children: /* @__PURE__ */ jsx(CardPhoto, { value: photo })
+		}, position))
+	}) });
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [children(picture), list.length > 1 && /* @__PURE__ */ jsxs("div", {
+		className: "group/arrows pointer-events-none absolute inset-x-px top-px aspect-[4/3]",
 		children: [
 			/* @__PURE__ */ jsx("button", {
 				type: "button",
 				"aria-label": "Previous photo",
-				className: cn(arrow, "left-2"),
+				className: cn(arrow, !swipe && touchArrow, "left-2"),
 				onClick: () => press(-1),
 				children: /* @__PURE__ */ jsx(ChevronLeft, {
 					className: "size-4",
@@ -50,27 +62,23 @@ const CardCarousel = ({ photos, recordKey, cover, children }) => {
 			/* @__PURE__ */ jsx("button", {
 				type: "button",
 				"aria-label": "Next photo",
-				className: cn(arrow, "right-2"),
+				className: cn(arrow, !swipe && touchArrow, "right-2"),
 				onClick: () => press(1),
 				children: /* @__PURE__ */ jsx(ChevronRight, {
 					className: "size-4",
 					"aria-hidden": true
 				})
 			}),
-			loaded.error && /* @__PURE__ */ jsx("span", {
-				className: "absolute inset-x-2 top-2 rounded bg-background/85 px-1.5 py-0.5 text-center text-xs text-danger-text",
-				children: "Could not load the photos"
-			}),
-			loaded.data !== void 0 && /* @__PURE__ */ jsxs("span", {
+			/* @__PURE__ */ jsxs("span", {
 				className: "absolute inset-x-0 bottom-2 flex justify-center",
 				"aria-live": "polite",
 				children: [/* @__PURE__ */ jsx("span", {
 					className: "sr-only",
 					children: `Photo ${index + 1} of ${list.length}`
 				}), /* @__PURE__ */ jsx("span", {
-					className: "flex items-center gap-1 rounded-full bg-background/70 px-1.5 py-1 text-[11px] tabular-nums leading-none",
+					className: "flex items-center gap-1 rounded-full bg-background/70 px-1.5 py-1 leading-none",
 					"aria-hidden": true,
-					children: list.length > 10 ? `${index + 1} / ${list.length}` : list.map((_, dot) => /* @__PURE__ */ jsx("span", { className: cn("size-1.5 rounded-full", dot === index ? "bg-foreground" : "bg-foreground/35") }, dot))
+					children: list.map((_, dot) => /* @__PURE__ */ jsx("span", { className: cn("size-1.5 rounded-full", dot === index ? "bg-foreground" : "bg-foreground/35") }, dot))
 				})]
 			})
 		]

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

@@ -0,0 +1,25 @@
+import { shownImage } from "../../live/file-values.js";
+import { FileImage } from "../../live/file-image.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/app/displays/card-image.tsx
+/** A raster image filling its frame; nothing for any other value. */
+const CardPhoto = ({ value }) => {
+	const image = shownImage(value, {
+		width: 320,
+		height: 240
+	});
+	return image ? /* @__PURE__ */ jsx(FileImage, {
+		image,
+		loading: "lazy",
+		className: "size-full object-cover"
+	}) : null;
+};
+/** The frame across a card's top, from the edge of the card in, holding its picture. */
+const CardImageFrame = ({ children }) => /* @__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
+});
+/** A picture across the card's top: a raster image only, an empty frame otherwise. */
+const CardImage = ({ value }) => /* @__PURE__ */ jsx(CardImageFrame, { children: /* @__PURE__ */ jsx(CardPhoto, { value }) });
+//#endregion
+export { CardImage, CardImageFrame, CardPhoto };

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

@@ -1,24 +1,20 @@
 import { isStoredFile } from "../../live/file-values.js";
-import { createWhere, printFilter } from "@protobase/schema";
+import { cardPhotoLimit } from "@protobase/schema/internal";
 //#region src/app/displays/card-photos.ts
-const where = createWhere();
+/** The most photos a card steps through, its own image among them, each marked by a dot. */
+const maxCardDots = cardPhotoLimit;
 /**
-* The list request for a card's photos: the records pointing at the card's, in the display's order, with only their
-* image and its placeholder field, when it has one.
+* The files a card steps through: its own image first, then its photos less that same file, at most `maxCardDots`;
+* empty values are left out.
 */
-const cardPhotosRequest = (photos, recordKey, placeholder) => ({
-	filter: printFilter(where.eq(photos.field, recordKey)),
-	...photos.sort !== void 0 && { orderBy: photos.sort },
-	fields: placeholder === void 0 ? [photos.image] : [photos.image, placeholder],
-	pageSize: 100
-});
-/** The files a card steps through: its own image first, then the loaded photos less that same file; empty values are left out. */
-const cardPhotoList = (cover, loaded) => {
+const cardPhotoList = (cover, photos) => {
 	const coverUri = isStoredFile(cover) ? cover.uri : void 0;
-	const rest = loaded.filter((photo) => isStoredFile(photo) && photo.uri !== coverUri);
-	return coverUri === void 0 ? rest : [cover, ...rest];
+	const rest = photos.filter((photo) => isStoredFile(photo) && photo.uri !== coverUri);
+	return (coverUri === void 0 ? rest : [cover, ...rest]).slice(0, maxCardDots);
 };
 /** The position shown after `step` presses forward, or back when negative, wrapping around both ends. */
 const shownPhoto = (step, count) => count === 0 ? 0 : (step % count + count) % count;
+/** The position a track of `count` photos, each `width` wide, shows when scrolled to `left`: the one mostly in view. */
+const scrolledPhoto = (left, width, count) => width <= 0 || count === 0 ? 0 : Math.min(count - 1, Math.max(0, Math.round(left / width)));
 //#endregion
-export { cardPhotoList, cardPhotosRequest, shownPhoto };
+export { cardPhotoList, maxCardDots, scrolledPhoto, shownPhoto };

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

@@ -26,7 +26,8 @@ const CardsDisplay = ({ model, view, display, list, row = false, footer = true }
 					model,
 					view,
 					display,
-					row: record
+					row: record,
+					swipe: !row
 				})
 			}, record.key))
 		}), footer && /* @__PURE__ */ jsx(DisplayFooter, { list })]

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

@@ -7,6 +7,8 @@ export type ListDisplayRow = {
   record: Record<string, unknown>;
   /** The name of the record a relation field points at, for the relations the list shows. */
   labels: Record<string, string>;
+  /** The files of its first photos, when the list loaded the photos its cards display names. */
+  photos?: unknown[];
 };
 /** What a card component of a cards display (`d.cards(..., { card })`) gets: the record it draws, of the display's fields. */
 export type RecordCardProps = {

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

@@ -1,6 +1,7 @@
 import { recordKey, recordTitleField } from "../../live/model-helpers.js";
 import { humanize } from "../../live/naming.js";
 import { displayValue } from "../../live/display-value.js";
+import { photosKey } from "../../live/row-photos.js";
 import { encodeKey, tableDisplay } from "@protobase/schema/internal";
 //#region src/app/displays/list-displays.ts
 const displaysOf = (view) => view?.list?.displays ?? [];
@@ -91,12 +92,16 @@ const loadedFields = (model, view, columns) => [.../* @__PURE__ */ new Set([...c
 /** The sortable fields a display shows, for the sort menu that stands in for column headers. */
 const sortFields = (model, view, display) => [...new Set(shownFields(model, view, display))].filter((name) => model.fields[name]?.sortable);
 const isLabelled = (value) => typeof value === "object" && value !== null && "id" in value && "name" in value;
-/** A loaded row, its relations as `{ id, name }`, split into the record as the API gives it and the relations' names. */
+/**
+* A loaded row, its relations as `{ id, name }`, split into the record as the API gives it, the relations' names and
+* the photos it was loaded with.
+*/
 const displayRow = (model, row) => {
 	const record = {};
 	const labels = {};
+	const photos = Array.isArray(row["$photos"]) ? row[photosKey] : void 0;
 	for (const [name, value] of Object.entries(row)) {
-		if (name === "id" && !Object.hasOwn(model.fields, "id")) continue;
+		if ((name === "id" || name === "$photos") && !Object.hasOwn(model.fields, name)) continue;
 		if (model.fields[name]?.type === "relation" && isLabelled(value)) {
 			record[name] = value.id;
 			labels[name] = value.name;
@@ -105,7 +110,8 @@ const displayRow = (model, row) => {
 	return {
 		key: encodeKey(recordKey(model, record)),
 		record,
-		labels
+		labels,
+		...photos && { photos }
 	};
 };
 //#endregion

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

@@ -1,3 +1,4 @@
+import { cn } from "../../lib/cn.js";
 import { Button } from "../../primitives/button.js";
 import { humanize } from "../../live/naming.js";
 import { mapCards } from "./list-displays.js";
@@ -23,7 +24,7 @@ const arrow = "flex size-8 items-center justify-center rounded-full border borde
 * 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.
 */
-const MapDisplay = ({ model, view, display, filter, orderBy, fields, at, onMove, footer = true }) => {
+const MapDisplay = ({ model, view, display, filter, orderBy, fields, at, onMove, footer = true, flush = false }) => {
 	const style = useAdminMeta().maps?.style;
 	const [chosen, setChosen] = useState();
 	const [area, setArea] = useState();
@@ -55,9 +56,9 @@ const MapDisplay = ({ model, view, display, filter, orderBy, fields, at, onMove,
 	if (!style) return /* @__PURE__ */ jsx(Problem, { children: "The map display needs a map style: set PROTOBASE_MAP_STYLE_URL." });
 	const empty = loaded?.total === 0;
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex h-full min-h-[36rem] flex-1 flex-col sm:min-h-[28rem]",
+		className: cn("flex h-full min-h-[36rem] flex-1 flex-col sm:min-h-[28rem]", flush && "max-md:-mx-5 max-md:-mb-4 max-md:min-h-0"),
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: "relative min-h-0 flex-1 overflow-hidden rounded-lg border border-border bg-muted",
+			className: cn("relative min-h-0 flex-1 overflow-hidden rounded-lg border border-border bg-muted", flush && "max-md:rounded-none max-md:border-0"),
 			children: [
 				/* @__PURE__ */ jsx(Suspense, {
 					fallback: null,
@@ -164,7 +165,7 @@ const MapDisplay = ({ model, view, display, filter, orderBy, fields, at, onMove,
 				})
 			]
 		}), footer && /* @__PURE__ */ jsx("p", {
-			className: "py-3 text-xs text-muted-foreground",
+			className: "hidden py-3 text-xs text-muted-foreground md:block",
 			children: inView(records.data, plural)
 		})]
 	});

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

@@ -1,33 +1,20 @@
 import { Badge } from "../../primitives/badge.js";
+import { recordKey } from "../../live/model-helpers.js";
 import { humanize } from "../../live/naming.js";
 import { useProjectUi } from "../pages/project-ui.js";
-import { shownImage } 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 { FileImage } from "../../live/file-image.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 { FavoriteButton } from "../saved/favorite-button.js";
 import { ValueBadge } from "../value-badge.js";
+import { CardImage } from "./card-image.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 image = shownImage(value, {
-		width: 320,
-		height: 240
-	});
-	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: image && /* @__PURE__ */ jsx(FileImage, {
-			image,
-			loading: "lazy",
-			className: "size-full object-cover"
-		})
-	});
-};
 const MetaValue = ({ icon, children }) => {
 	const Icon = namedIcon(icon);
 	return /* @__PURE__ */ jsxs("dd", {
@@ -39,13 +26,13 @@ const MetaValue = ({ icon, 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.
+* A record's card of a cards display, opening its page: its image across the top, swiped or stepped 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. With a favorite button, a heart in the top right corner saves the record.
 */
-const RecordCard = ({ model, view, display, row }) => {
+const RecordCard = ({ model, view, display, row, swipe = true }) => {
 	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) => {
@@ -96,10 +83,12 @@ const RecordCard = ({ model, view, display, row }) => {
 	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 }),
+	const pictured = image !== void 0 || photos !== void 0;
+	const favorite = display.favorite;
+	const builtIn = (picture) => /* @__PURE__ */ jsxs(Fragment, { children: [
+		pictured && picture,
 		/* @__PURE__ */ jsxs("span", {
-			className: "flex items-start justify-between gap-2",
+			className: `flex items-start justify-between gap-2 ${favorite && !pictured ? "pr-8" : ""}`,
 			children: [/* @__PURE__ */ jsx("span", {
 				className: "min-w-0 truncate font-medium",
 				children: shownValue(title)
@@ -146,7 +135,7 @@ const RecordCard = ({ model, view, display, row }) => {
 			}), shownValue(name)] }, name))
 		})
 	] });
-	const card = (photo) => /* @__PURE__ */ jsx(AppLink, {
+	const card = (picture) => /* @__PURE__ */ jsx(AppLink, {
 		to: {
 			kind: "record",
 			resource: model.name,
@@ -155,18 +144,23 @@ const RecordCard = ({ model, view, display, row }) => {
 		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),
+			fallback: builtIn(picture),
 			children: /* @__PURE__ */ jsx(Card, { row })
-		}) : builtIn(photo)
+		}) : builtIn(picture)
 	});
-	return /* @__PURE__ */ jsx("div", {
-		className: photos ? "group/card relative h-full" : "h-full",
-		children: photos ? /* @__PURE__ */ jsx(CardCarousel, {
-			photos,
-			recordKey: row.key,
+	return /* @__PURE__ */ jsxs("div", {
+		className: photos ? "group/card relative h-full" : favorite ? "relative h-full" : "h-full",
+		children: [photos ? /* @__PURE__ */ jsx(CardCarousel, {
+			photos: row.photos ?? [],
 			cover,
+			swipe,
 			children: card
-		}) : card(cover)
+		}) : card(/* @__PURE__ */ jsx(CardImage, { value: cover })), favorite && /* @__PURE__ */ jsx(FavoriteButton, {
+			favorite,
+			recordKey: row.key,
+			target: recordKey(model, row.record),
+			className: pictured ? void 0 : "right-1.5 top-1.5"
+		})]
 	});
 };
 //#endregion

package/dist/app/displays/use-map-records.js

@@ -1,19 +1,19 @@
 import { keys } from "../../data/query-keys.js";
 import { useClient } from "../../data/api-provider.js";
-import { withLabels } from "../../live/relation-labels.js";
+import { listLabels, withLabels } from "../../live/relation-labels.js";
+import { listPhotos, withPhotos } from "../../live/row-photos.js";
 import { displayRow } from "./list-displays.js";
 import { useAdminMeta } from "../meta-gate.js";
 import { areaFilter, requestZoom } from "../map/map-area.js";
-import { keepPreviousData, useQuery, useQueryClient } from "@tanstack/react-query";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
 //#region src/app/displays/use-map-records.ts
 /**
-* The records in the map's area through the list API's `:map`, labelled for the card, or buckets of them when it holds
+* The records in the map's area through the list API's `:map`, labelled for the card and with its photos, or buckets of them when it holds
 * many. A new area or filter keeps the previous answer until its own arrives, and an answer for an area the map has
 * left is never shown.
 */
 const useMapRecords = ({ model, display, fields, filter, orderBy, area }) => {
 	const client = useClient();
-	const queryClient = useQueryClient();
 	const { resources, views } = useAdminMeta();
 	const position = {
 		latitude: display.latitude,
@@ -30,10 +30,12 @@ const useMapRecords = ({ model, display, fields, filter, orderBy, area }) => {
 				...position,
 				zoom,
 				filter: inside,
-				orderBy
+				orderBy,
+				labels: listLabels(resources, views, model, fields),
+				photos: listPhotos(views[model.name])
 			});
 			return {
-				rows: (await withLabels(queryClient, client, resources, views, model, fields, result.items)).map((record) => displayRow(model, record)),
+				rows: withLabels(resources, model, fields, withPhotos(model, result.items, result.photos), result.labels).map((record) => displayRow(model, record)),
 				buckets: result.buckets,
 				total: result.totalSize
 			};

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

@@ -1,8 +1,8 @@
 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 { withFieldTypeCells } from "../field-types/field-type-cells.js";
 import { FieldValue } from "../pages/field-value.js";
 import { usePathValue } from "../pages/use-path-value.js";
 import { jsx } from "react/jsx-runtime";

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

@@ -1,28 +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 { listLabels, withLabels } from "../../live/relation-labels.js";
+import { listPhotos, withPhotos } from "../../live/row-photos.js";
 import { useAdminMeta } from "../meta-gate.js";
-import { keepPreviousData, useQuery, useQueryClient } from "@tanstack/react-query";
+import { keepPreviousData, useQuery } 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.
+* `fields` as `{ id, name }`, named in the same call, with the photos of its cards. 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 labels = listLabels(resources, views, model, fields);
+			const photos = listPhotos(views[model.name]);
 			const page = await client.search(model.name, {
 				filter: filter || void 0,
 				orderBy: orderBy || void 0,
-				pageSize: limit
+				pageSize: limit,
+				labels,
+				photos
 			});
-			return (await withLabels(queryClient, client, resources, views, model, fields, page.items)).map((row, index) => ({
+			return withLabels(resources, model, fields, withPhotos(model, page.items, page.photos), page.labels).map((row, index) => ({
 				...row,
 				id: recordId(model, page.items[index])
 			}));