@protobase/ui 0.55.0 → 0.55.2

package/dist/app/app.js

@@ -11,11 +11,11 @@ import { text } from "./messages.js";
 import { Router, useRouter } from "./router.js";
 import { useAppAddress } from "./use-app-address.js";
 import { ProjectUiContext, useProjectUi } from "./pages/project-ui.js";
+import { RecordTitles, useRecordTitle } from "./titles/record-titles.js";
 import { isAdmin, userToShell } from "../auth/user-to-shell.js";
 import { startErrorReporting } from "./error-reporting.js";
 import { slotted } from "../locale/slotted.js";
 import { CustomBoundary } from "./pages/custom-boundary.js";
-import { RecordTitles, useRecordTitle } from "./titles/record-titles.js";
 import { useSidebarNoticeShown } from "../app-shell/sidebar-notice.js";
 import { AppShell } from "../app-shell/app-shell.js";
 import { useSignInAddress } from "../auth/use-sign-in-address.js";

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

@@ -1,3 +1,4 @@
+import { useAdminMeta } from "../meta-gate.js";
 import { Badge } from "../../primitives/badge.js";
 import { humanize } from "../../live/naming.js";
 import { markdownExcerpt } from "../../markdown/markdown-excerpt.js";
@@ -15,6 +16,7 @@ import { Markdown } from "../../markdown/markdown.js";
 import { ValueBadge } from "../value-badge.js";
 import { useSeedRecord } from "../record-preview.js";
 import { namedIcon } from "../named-icon.js";
+import { RelationTitleText } from "../titles/relation-title-text.js";
 import { FavoriteButton } from "../saved/favorite-button.js";
 import { CardDots, CardDotsRoom } from "../related-dots/card-dots.js";
 import { cardDotsLines } from "../related-dots/card-dots-lines.js";
@@ -42,10 +44,16 @@ const MetaValue = ({ icon, children }) => {
 const RecordCard = ({ model, view, display, row, swipe = true, mark }) => {
 	const { image, title, subtitle, amount, badge, meta, footer, flags } = cardFields(model, view, display);
 	const label = (name) => view?.fields[name]?.label ?? humanize(name);
+	const { resources, views } = useAdminMeta();
 	const text$1 = (name) => {
 		const field = model.fields[name];
 		if (!field) return "";
 		const value = row.record[name];
+		const target = field.type === "relation" && field.relation ? resources[field.relation.resource] : void 0;
+		if (target && views[target.name]?.titleFrom && value != null) return /* @__PURE__ */ jsx(RelationTitleText, {
+			target,
+			id: String(value)
+		});
 		if (row.labels[name] === void 0 && isMarkdown(field, view?.fields[name]) && typeof value === "string" && value !== "") return markdownExcerpt(value);
 		return row.labels[name] ?? displayValue(field, value, view?.fields[name]);
 	};

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

@@ -46,7 +46,7 @@ const VirtualCards = ({ source, label, initialIndex, onScrollIndex, minHeight, c
 		if (changed) scroll.scrollTo(scroll.top);
 		anchor.current = {
 			layout,
-			top: scroll.top
+			top: scroll.started() ? scroll.top : 0
 		};
 	});
 	const range = recordRange(scroll.first, scroll.last, columns, total);

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

@@ -5,6 +5,7 @@ import { scopeOf } from "../pages/use-layout-data.js";
 import { FieldValue } from "../pages/field-value.js";
 import { usePathValue } from "../pages/use-path-value.js";
 import { withFieldTypeCells } from "../field-types/field-type-cells.js";
+import { withRelationTitleCells } from "../titles/relation-title-cells.js";
 import { jsx } from "react/jsx-runtime";
 import { resolveFieldPath } from "@protobase/layout";
 //#region src/app/embedded-list/embedded-columns.tsx
@@ -45,7 +46,7 @@ const pathColumn = (model, column, { resources, views }) => {
 };
 /** 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]));
+	const fields = new Map(withRelationTitleCells(withFieldTypeCells(columnsFromModel(model, view, [], names.filter((name) => !isPath(name))), model, view, meta.fieldTypes), model, meta.resources, meta.views).map((spec) => [spec.id, spec]));
 	return names.flatMap((name) => isPath(name) ? [pathColumn(model, name, meta)] : fields.get(name) ?? []);
 };
 //#endregion

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

@@ -4,16 +4,19 @@ import { useAdminMeta } from "../meta-gate.js";
 import { recordId } from "../../live/model-helpers.js";
 import { listPhotos, withPhotos } from "../../live/row-photos.js";
 import { listLabels, withLabels } from "../../live/relation-labels.js";
-import { keepPreviousData, useQuery } from "@tanstack/react-query";
+import { seedTitleRows } from "../../live/title-rows.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 }`, named in the same call, with the photos of its cards, and how many records match in all,
-* counted in the same call: `estimated` when more than the server counts exactly match. A filter through a join
+* counted in the same call: `estimated` when more than the server counts exactly match; the fields the derived titles
+* of the records its relations point at read, in one more call per resource. 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(",")],
@@ -29,6 +32,7 @@ const useEmbeddedRows = ({ model, filter, orderBy, limit, fields }) => {
 				labels,
 				photos
 			});
+			await seedTitleRows(queryClient, client, resources, views, model, fields, page.items);
 			const rows = withLabels(resources, model, fields, withPhotos(model, page.items, page.photos), page.labels).map((row, index) => ({
 				...row,
 				id: recordId(model, page.items[index])

package/dist/app/list-page.js

@@ -14,6 +14,7 @@ import { text } from "./messages.js";
 import { AppLink, useAppAddress } from "./use-app-address.js";
 import { ErrorBanner } from "./error-banner.js";
 import { useProjectUi } from "./pages/project-ui.js";
+import { useRecordTitle } from "./titles/record-titles.js";
 import { can, rowAllows } from "./permissions.js";
 import { usePageScroll } from "../app-shell/page-scroll.js";
 import { PageHeader } from "../app-shell/page-header.js";
@@ -40,6 +41,7 @@ import { CustomDisplay } from "./displays/custom-display.js";
 import { MapDisplay } from "./displays/map-display.js";
 import { DisplaySwitch, SortMenu } from "./displays/display-controls.js";
 import { withFieldTypeCells } from "./field-types/field-type-cells.js";
+import { withRelationTitleCells } from "./titles/relation-title-cells.js";
 import { useFilterConfig } from "../live/use-filter-config.js";
 import { useDeleteFlow } from "./delete/use-delete-flow.js";
 import { useRestore } from "./delete/use-restore.js";
@@ -127,7 +129,7 @@ const LoadedList = ({ model, address, scope, heading }) => {
 	const view = viewOfList(meta.views[resource], address.list);
 	const fields = useMemo(() => widgetFields(view, model), [view, model]);
 	const { fields: fieldTypes } = useProjectUi();
-	const columns = useMemo(() => withRelatedDotsColumns(withFieldTypeCells(columnsFromModel(model, view), model, view, fieldTypes), model, view, meta.resources, meta.views), [
+	const columns = useMemo(() => withRelatedDotsColumns(withRelationTitleCells(withFieldTypeCells(columnsFromModel(model, view), model, view, fieldTypes), model, meta.resources, meta.views), model, view, meta.resources, meta.views), [
 		model,
 		view,
 		fieldTypes,
@@ -143,13 +145,15 @@ const LoadedList = ({ model, address, scope, heading }) => {
 	const xs = useIsXs();
 	const [sheetOpen, setSheetOpen] = useState(false);
 	const scoped = scope ? [...extras, scope] : extras;
+	const titleOf = useRecordTitle();
 	const config = useFilterConfig({
 		model,
 		resources: meta.resources,
 		views: meta.views,
 		view,
 		state,
-		extras: scoped
+		extras: scoped,
+		titleOf
 	});
 	const loadFilter = scope ? stateToText(fields, state, scoped) : parsed.ok ? filterText : "";
 	const loaded = useMemo(() => loadedFields(model, view, columns.map((column) => column.id)), [

package/dist/app/pages/field-value.js

@@ -1,4 +1,3 @@
-import { useClient } from "../../data/api-provider.js";
 import { cn } from "../../lib/cn.js";
 import { useAdminMeta } from "../meta-gate.js";
 import { fileShown, shownImage } from "../../live/file-values.js";
@@ -11,22 +10,12 @@ import { useShownWidget } from "../field-types/shown-widget.js";
 import { WidgetPart } from "../field-types/widget-part.js";
 import { Markdown } from "../../markdown/markdown.js";
 import { ContactLink } from "../../live/contact-link.js";
-import { relationTitle, relationTitleQuery } from "../titles/relation-title.js";
-import { useRecordTitle } from "../titles/record-titles.js";
+import { useRelationTitle } from "../titles/use-relation-title.js";
 import { ValueBadge } from "../value-badge.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
 //#region src/app/pages/field-value.tsx
 const RelationLink = ({ target, id, known }) => {
-	const { views } = useAdminMeta();
-	const client = useClient();
-	const queryClient = useQueryClient();
-	const titleOf = useRecordTitle();
-	const view = views[target.name];
-	const label = useQuery({
-		...relationTitleQuery(queryClient, client, target, view, id),
-		enabled: known === void 0
-	});
+	const title = useRelationTitle(target, id, known === void 0);
 	return /* @__PURE__ */ jsx(AppLink, {
 		to: {
 			kind: "record",
@@ -34,7 +23,7 @@ const RelationLink = ({ target, id, known }) => {
 			key: id
 		},
 		className: "font-medium text-primary-text hover:underline",
-		children: known ?? relationTitle(label.data, titleOf, target, view, id) ?? id
+		children: known ?? title ?? id
 	});
 };
 const RelationValue = ({ field, value, known }) => {

package/dist/app/record-page.js

@@ -30,12 +30,12 @@ import { fieldHelp, helpShown, recordShown, whenShown } from "./record-mode/reco
 import { isChosen, keyValue } from "./create/create-values.js";
 import { ErrorBanner } from "./error-banner.js";
 import { useProjectUi } from "./pages/project-ui.js";
+import { useRecordTitle } from "./titles/record-titles.js";
 import { shownWidget } from "./field-types/shown-widget.js";
 import { WidgetPart } from "./field-types/widget-part.js";
 import { ContactLink } from "../live/contact-link.js";
 import { FieldEditor } from "./field-editor.js";
 import { can, fieldAccess } from "./permissions.js";
-import { useRecordTitle } from "./titles/record-titles.js";
 import { ValueBadge } from "./value-badge.js";
 import { FieldValue } from "./pages/field-value.js";
 import { fieldMessage } from "./field-errors.js";

package/dist/app/related-cards/related-card.js

@@ -2,9 +2,9 @@ import { useAdminMeta } from "../meta-gate.js";
 import { Skeleton } from "../../primitives/skeleton.js";
 import { recordKey } from "../../live/model-helpers.js";
 import { AppLink } from "../use-app-address.js";
+import { useRecordTitle } from "../titles/record-titles.js";
 import { RecordScope } from "../pages/record-scope.js";
 import { ActionButton } from "../pages/blocks/action.js";
-import { useRecordTitle } from "../titles/record-titles.js";
 import { FieldValue } from "../pages/field-value.js";
 import { usePathValue } from "../pages/use-path-value.js";
 import { fieldLabel } from "../pages/blocks/field.js";

package/dist/app/relation-picker.js

@@ -4,6 +4,7 @@ import { text } from "./messages.js";
 import { useList } from "../data/use-list.js";
 import { PickerCombobox, usePickerSearch } from "./picker/picker-combobox.js";
 import { relationOptionsQuery, titleMatches } from "./relation-options.js";
+import { useRecordTitle } from "./titles/record-titles.js";
 import { useCallback, useEffect, useState } from "react";
 import { ApiError } from "@protobase/client";
 import { jsx } from "react/jsx-runtime";
@@ -17,24 +18,31 @@ const RelationPicker = ({ target, view, value, label, chosen = [value], several
 	const keyField = target.primaryKey[0];
 	const labelField = labelFieldOf(target, view);
 	const [refused, setRefused] = useState(false);
-	const query = relationOptionsQuery(target, labelField, search.text, refused);
+	const titleOf = useRecordTitle();
+	const query = relationOptionsQuery(target, labelField, search.text, refused || view?.titleFrom !== void 0 && !target.search?.length);
+	const fields = [.../* @__PURE__ */ new Set([
+		keyField,
+		labelField,
+		...view?.titleFrom?.fields ?? []
+	])];
+	const nameOf = (item) => view?.titleFrom ? titleOf(target, view, item, String(item[keyField])) : String(item[labelField]);
 	const rows = useList(target.name, {
 		filter: query.filter,
-		fields: [keyField, labelField],
+		fields,
 		enabled: search.open
 	});
 	const expensive = query.filter !== void 0 && rows.error instanceof ApiError && rows.error.slug === "expensive-query";
 	useEffect(() => {
 		if (expensive) setRefused(true);
 	}, [expensive]);
-	const items = query.local ? rows.items.filter((item) => titleMatches(item[labelField], search.text)) : rows.items;
+	const items = query.local ? rows.items.filter((item) => titleMatches(nameOf(item), search.text)) : rows.items;
 	const { fetchNextPage } = rows;
 	const loadMore = useCallback(() => fetchNextPage({ cancelRefetch: false }), [fetchNextPage]);
 	return /* @__PURE__ */ jsx(PickerCombobox, {
 		search,
 		options: items.map((item) => ({
 			key: String(item[keyField]),
-			label: String(item[labelField])
+			label: nameOf(item)
 		})),
 		chosen,
 		several,

package/dist/app/titles/record-titles.js

@@ -1,7 +1,7 @@
 import { useOptionalAuth } from "../../auth/auth-provider.js";
 import { useAdminMeta } from "../meta-gate.js";
-import { useProjectUi } from "../pages/project-ui.js";
 import { useMembers } from "../../people/use-members.js";
+import { useProjectUi } from "../pages/project-ui.js";
 import { recordTitleOf } from "./record-title-of.js";
 import { createContext, useContext, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/app/titles/relation-title-cells.js

@@ -0,0 +1,28 @@
+import { useRelationTitle } from "./use-relation-title.js";
+import { TruncatedText } from "../../data-grid/truncated-text.js";
+import { renderCell } from "../../data-grid/cells.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/app/titles/relation-title-cells.tsx
+const relationKey = (value) => String(typeof value === "object" && value !== null && "id" in value ? value.id : value);
+const RelationTitleCell = ({ target, id }) => /* @__PURE__ */ jsx(TruncatedText, {
+	text: useRelationTitle(target, id) ?? id,
+	className: "font-medium text-primary-text hover:underline"
+});
+/**
+* The list's columns, where a relation points at a resource whose view derives its titles, drawn with the record's
+* title for the reader, its key while the title loads. A column a field type draws stays as it is.
+*/
+const withRelationTitleCells = (columns, model, resources, views) => columns.map((spec) => {
+	const field = model.fields[spec.id];
+	const target = field?.type === "relation" && field.relation ? resources[field.relation.resource] : void 0;
+	if (spec.render || !target || !views[target.name]?.titleFrom) return spec;
+	return {
+		...spec,
+		render: (row) => row[spec.id] == null ? renderCell(spec, null) : /* @__PURE__ */ jsx(RelationTitleCell, {
+			target,
+			id: relationKey(row[spec.id])
+		})
+	};
+});
+//#endregion
+export { withRelationTitleCells };

package/dist/app/titles/relation-title-text.js

@@ -0,0 +1,7 @@
+import { useRelationTitle } from "./use-relation-title.js";
+import { Fragment, jsx } from "react/jsx-runtime";
+//#region src/app/titles/relation-title-text.tsx
+/** The name of the record `id` of `target` a relation points at, for the reader; its key while the name loads. */
+const RelationTitleText = ({ target, id }) => /* @__PURE__ */ jsx(Fragment, { children: useRelationTitle(target, id) ?? id });
+//#endregion
+export { RelationTitleText };

package/dist/app/titles/relation-title.js

@@ -1,8 +1,7 @@
 import { keys } from "../../data/query-keys.js";
 import { fetchLabels } from "../../live/relation-labels.js";
-import { createWhere, printFilter } from "@protobase/schema";
+import { readTitleRows, titleRowKey } from "../../live/title-rows.js";
 //#region src/app/titles/relation-title.ts
-const where$1 = createWhere();
 /**
 * The query naming the record `id` of a single-key resource that a relation points at: its label field, cached as other
 * labels are, or the fields its view's derived title reads, which `relationTitle` titles for the reader.
@@ -13,16 +12,9 @@ const relationTitleQuery = (queryClient, client, target, view, id) => {
 		queryKey: keys.relatedLabel(target.name, id),
 		queryFn: async () => ({ label: (await fetchLabels(queryClient, client, target, [id], view)).get(id) ?? id })
 	};
-	const keyField = target.primaryKey[0];
 	return {
-		queryKey: keys.titleRow(target.name, id, from.fields.join(",")),
-		queryFn: async () => {
-			return { row: (await client.list(target.name, {
-				filter: printFilter(where$1.in(keyField, [id])),
-				fields: [keyField, ...from.fields],
-				pageSize: 1
-			})).items[0] ?? null };
-		}
+		queryKey: titleRowKey(target, id, from.fields),
+		queryFn: async () => ({ row: (await readTitleRows(client, target, from.fields, [id])).get(id) ?? null })
 	};
 };
 /** The name `relationTitleQuery` read, titled for the reader; the key for a record not found, undefined while it loads. */

package/dist/app/titles/use-relation-title.js

@@ -0,0 +1,25 @@
+import { useClient } from "../../data/api-provider.js";
+import { useAdminMeta } from "../meta-gate.js";
+import { useRecordTitle } from "./record-titles.js";
+import { relationTitle, relationTitleQuery } from "./relation-title.js";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+//#region src/app/titles/use-relation-title.ts
+/**
+* The name of the record `id` of `target` a relation points at, for the reader: its label, or its view's derived title.
+* Undefined while it loads or when not `enabled`; a list seeds the names of its page's records, which it reads first.
+*/
+const useRelationTitle = (target, id, enabled = true) => {
+	const { views } = useAdminMeta();
+	const client = useClient();
+	const queryClient = useQueryClient();
+	const titleOf = useRecordTitle();
+	const view = views[target.name];
+	const read = useQuery({
+		...relationTitleQuery(queryClient, client, target, view, id),
+		staleTime: 3e5,
+		enabled
+	});
+	return relationTitle(read.data, titleOf, target, view, id);
+};
+//#endregion
+export { useRelationTitle };

package/dist/app/use-related-records.js

@@ -1,6 +1,6 @@
 import { useClient } from "../data/api-provider.js";
-import { relationTitle, relationTitleQuery } from "./titles/relation-title.js";
 import { useRecordTitle } from "./titles/record-titles.js";
+import { relationTitle, relationTitleQuery } from "./titles/relation-title.js";
 import { useQueries, useQueryClient } from "@tanstack/react-query";
 //#region src/app/use-related-records.ts
 /** Per relation the record holds, the address and name of the record it points at, derived for the reader where its view does. The tenant is left out. */

package/dist/data-grid/use-virtual-rows.js

@@ -18,7 +18,8 @@ const viewRows = (view, total, rowHeight) => {
 * scrolling ancestor, or the page. Only the rows in view, and `overscan` more on each side, are drawn: `ref` goes on the
 * list's element, `geometry.contentHeight` tall, and each drawn row sits at `offset` from its top. Nothing listens for
 * wheel or touch: the list follows the scroll position, and draws again only when other rows come into view.
-* `first` and `last` are the indexes of the drawn rows, overscan included.
+* `first` and `last` are the indexes of the drawn rows, overscan included; `started` says whether the list has started
+* at `initialIndex`, read after the list's layout effects.
 */
 const useVirtualRows = ({ total, rowHeight, initialIndex, inset = 0, settle, ready = true, onScroll }) => {
 	const ref = useRef(null);
@@ -117,6 +118,7 @@ const useVirtualRows = ({ total, rowHeight, initialIndex, inset = 0, settle, rea
 		scroller.current.scrollTop += scrollFromTop(geometry, top) - current.position;
 		measure();
 	}, [read, measure]);
+	const started = useCallback(() => !start.current.pending, []);
 	const drawn = viewRows(view, total, rowHeight);
 	const top = settle ? settle(drawn.top) : drawn.top;
 	const { first, last } = settle ? rowsInView(total, top, rowHeight, view.height, overscan) : drawn;
@@ -132,7 +134,8 @@ const useVirtualRows = ({ total, rowHeight, initialIndex, inset = 0, settle, rea
 		rows,
 		first,
 		last,
-		scrollTo
+		scrollTo,
+		started
 	};
 };
 //#endregion

package/dist/index.js

@@ -12,9 +12,9 @@ import { AppLink, useAppAddress } from "./app/use-app-address.js";
 import { Segmented } from "./primitives/segmented.js";
 import { Textarea } from "./primitives/textarea.js";
 import { useList } from "./data/use-list.js";
-import { OtpInput } from "./primitives/otp-input.js";
-import { definePlugin, defineUi } from "./app/pages/project-ui.js";
 import { useMembers } from "./people/use-members.js";
+import { definePlugin, defineUi } from "./app/pages/project-ui.js";
+import { OtpInput } from "./primitives/otp-input.js";
 import { Markdown } from "./markdown/markdown.js";
 import { ActionInputError } from "./app/pages/action-inputs/input-errors.js";
 import { useLayoutRecord } from "./app/pages/record-scope.js";

package/dist/live/grid-loader.js

@@ -2,13 +2,15 @@ import { keys } from "../data/query-keys.js";
 import { recordId } from "./model-helpers.js";
 import { listPhotos, withPhotos } from "./row-photos.js";
 import { listLabels, withLabels } from "./relation-labels.js";
+import { seedTitleRows } from "./title-rows.js";
 import { loadRelatedColumn } from "./related-column-rows.js";
 //#region src/live/grid-loader.ts
 const exactBelow = 5e3;
 /**
 * Loads fixed-size pages by number. The page after a cached or loading one follows that page's `next_page_token`; a
 * jump to a page whose predecessor is neither asks `:seek` for the page at that row position, so the pages of one jump
-* are read on from a single seek. Every page is cached by TanStack Query, with the records of its related columns.
+* are read on from a single seek. Every page is cached by TanStack Query, with the records of its related columns; the
+* fields the derived titles of the records its relations point at read are cached per record (see `seedTitleRows`).
 */
 const createGridLoader = ({ queryClient, client, resources, views, model, columns, filter, orderBy, related = [] }) => {
 	const relatedNames = related.map((load) => load.column.name).join(",");
@@ -63,13 +65,13 @@ const createGridLoader = ({ queryClient, client, resources, views, model, column
 		};
 		const ids = result.items.map((record) => recordId(model, record));
 		const labelled = withLabels(resources, model, columns, withPhotos(model, result.items, result.photos), result.labels);
-		const shown = await Promise.all(related.map((load) => loadRelatedColumn({
+		const [shown] = await Promise.all([Promise.all(related.map((load) => loadRelatedColumn({
 			client,
 			resources,
 			views,
 			load,
 			owners: ids
-		})));
+		}))), seedTitleRows(queryClient, client, resources, views, model, columns, result.items)]);
 		return {
 			rows: labelled.map((record, index) => ({
 				...record,

package/dist/live/relation-labels.js

@@ -30,8 +30,11 @@ const relationColumns = (resources, model, columns) => columns.flatMap((name) =>
 		target
 	}] : [];
 });
-/** What a list call asks `labels` for: each relation among `columns` to a single-key resource, by the field that names its records. */
-const listLabels = (resources, views, model, columns) => Object.fromEntries(relationColumns(resources, model, columns).filter(({ target }) => target.primaryKey.length === 1).map(({ name, target }) => [name, labelFieldOf(target, views[target.name])]));
+/**
+* What a list call asks `labels` for: each relation among `columns` to a single-key resource, by the field that names its
+* records. A resource whose view derives its titles per reader is named by the browser instead, so none is asked for it.
+*/
+const listLabels = (resources, views, model, columns) => Object.fromEntries(relationColumns(resources, model, columns).filter(({ target }) => target.primaryKey.length === 1 && !views[target.name]?.titleFrom).map(({ name, target }) => [name, labelFieldOf(target, views[target.name])]));
 /** Replaces each relation value among `columns` with `{ id, name }`, named by the list call's `labels`, else by its key. */
 const withLabels = (resources, model, columns, rows, labels = {}) => {
 	const relations = relationColumns(resources, model, columns);

package/dist/live/title-rows.js

@@ -0,0 +1,47 @@
+import { keys } from "../data/query-keys.js";
+import { createWhere, printFilter } from "@protobase/schema";
+//#region src/live/title-rows.ts
+const where$1 = createWhere();
+/** The fields a derived title reads, when a single-key `target`'s view derives its titles from fields the reader may read. */
+const derivedTitleFields = (target, view) => {
+	const from = view?.titleFrom;
+	if (!from || from.unreadable || target.primaryKey.length !== 1) return;
+	return from.fields;
+};
+/** Where the fields a record's derived title reads are cached, `{ row }` with `row` null for a record not found. */
+const titleRowKey = (target, id, fields) => keys.titleRow(target.name, id, fields.join(","));
+/** The key and `fields` of the records `ids` of `target`, in one list call, by key. */
+const readTitleRows = async (client, target, fields, ids) => {
+	const keyField = target.primaryKey[0];
+	const unique = [...new Set(ids)];
+	if (unique.length === 0) return /* @__PURE__ */ new Map();
+	const page = await client.list(target.name, {
+		filter: printFilter(where$1.in(keyField, unique)),
+		fields: [keyField, ...fields],
+		pageSize: unique.length
+	});
+	return new Map(page.items.map((item) => [String(item[keyField]), item]));
+};
+/**
+* Reads, for one page of `rows`, the fields the derived titles of the records their relations among `columns` point at
+* read: one list call per target resource, each record cached under its `titleRowKey`, so the cells titling them for
+* the reader ask nothing more.
+*/
+const seedTitleRows = async (queryClient, client, resources, views, model, columns, rows) => {
+	const ids = /* @__PURE__ */ new Map();
+	for (const name of columns) {
+		const field = model.fields[name];
+		const target = field?.type === "relation" && field.relation ? resources[field.relation.resource] : void 0;
+		if (!target || !derivedTitleFields(target, views[target.name])) continue;
+		const values = rows.flatMap((row) => row[name] == null ? [] : [String(row[name])]);
+		ids.set(target.name, [...ids.get(target.name) ?? [], ...values]);
+	}
+	await Promise.all([...ids].map(async ([name, wanted]) => {
+		const target = resources[name];
+		const fields = derivedTitleFields(target, views[name]);
+		const found = await readTitleRows(client, target, fields, wanted);
+		for (const id of new Set(wanted)) queryClient.setQueryData(titleRowKey(target, id, fields), { row: found.get(id) ?? null });
+	}));
+};
+//#endregion
+export { derivedTitleFields, readTitleRows, seedTitleRows, titleRowKey };

package/dist/live/use-filter-config.js

@@ -3,6 +3,7 @@ import { useClient } from "../data/api-provider.js";
 import { humanize } from "./naming.js";
 import { labelFieldOf } from "./model-helpers.js";
 import { fetchLabels } from "./relation-labels.js";
+import { derivedTitleFields, readTitleRows } from "./title-rows.js";
 import { setRange } from "../filter-panel/filter-state.js";
 import { stateToText } from "./filter-string.js";
 import { rangeFormat, rangeHistogram, widgetFields } from "./view-fields.js";
@@ -16,7 +17,7 @@ const histogramBuckets = 24;
 * The panel's config for a view: facet counts come from `:facets` and each range's bounds from `:histogram`, each
 * computed with every other active filter applied but not its own, so choosing one value does not hide the rest.
 */
-const useFilterConfig = ({ model, resources, views, view, state, extras }) => {
+const useFilterConfig = ({ model, resources, views, view, state, extras, titleOf }) => {
 	const client = useClient();
 	const queryClient = useQueryClient();
 	const skeleton = widgetFields(view, model);
@@ -25,6 +26,7 @@ const useFilterConfig = ({ model, resources, views, view, state, extras }) => {
 		const field = model.fields[name];
 		return field?.type === "relation" && field.relation ? resources[field.relation.resource] : void 0;
 	};
+	const derives = (target) => Boolean(target && views[target.name]?.titleFrom);
 	const counted = skeleton.facets.flatMap((group) => (group.flags ? group.options.map((option) => option.value) : [group.id]).map((field) => ({
 		group: group.id,
 		field
@@ -38,7 +40,7 @@ const useFilterConfig = ({ model, resources, views, view, state, extras }) => {
 			}
 		}, extras);
 		const target = targetOf(field);
-		const label = target?.primaryKey.length === 1 ? labelFieldOf(target, views[target.name]) : void 0;
+		const label = target?.primaryKey.length === 1 && !derives(target) ? labelFieldOf(target, views[target.name]) : void 0;
 		return {
 			queryKey: keys.facets(model.name, field, filter),
 			queryFn: () => client.facets(model.name, field, {
@@ -49,19 +51,34 @@ const useFilterConfig = ({ model, resources, views, view, state, extras }) => {
 		};
 	}) });
 	const counts = (group, field) => facetQueries[counted.findIndex((entry) => entry.group === group && entry.field === field)]?.data;
+	const countedKeys = (group) => (counts(group, group) ?? []).flatMap((facet) => facet.value === null ? [] : [String(facet.value)]);
 	const labelQueries = useQueries({ queries: skeleton.facets.map((group) => {
 		const target = targetOf(group.id);
-		const ids = labelKeys((counts(group.id, group.id) ?? []).flatMap((facet) => facet.value === null ? [] : [String(facet.value)]), state.facets[group.id] ?? []);
+		const ids = labelKeys(countedKeys(group.id), state.facets[group.id] ?? []);
 		return {
 			queryKey: keys.labels(`facet:${model.name}.${group.id}`, ids.join(",")),
-			enabled: Boolean(target) && ids.length > 0,
+			enabled: Boolean(target) && !derives(target) && ids.length > 0,
 			queryFn: async () => [...await fetchLabels(queryClient, client, target, ids, views[target.name])]
 		};
 	}) });
+	const titleQueries = useQueries({ queries: skeleton.facets.map((group) => {
+		const target = targetOf(group.id);
+		const fields = target && derives(target) ? derivedTitleFields(target, views[target.name]) : void 0;
+		const ids = [.../* @__PURE__ */ new Set([...countedKeys(group.id), ...state.facets[group.id] ?? []])];
+		return {
+			queryKey: keys.labels(`facet-title:${model.name}.${group.id}`, ids.join(",")),
+			enabled: fields !== void 0 && ids.length > 0,
+			queryFn: async () => [...await readTitleRows(client, target, fields, ids)]
+		};
+	}) });
+	const titled = (group, index) => {
+		const target = targetOf(group);
+		return (titleQueries[index]?.data ?? []).map(([id, row]) => [id, titleOf(target, views[target.name], row, id)]);
+	};
 	const searches = useReferenceSearch(skeleton.facets.map((group) => ({
 		id: group.id,
 		target: group.combobox ? targetOf(group.id) : void 0
-	})), views);
+	})), views, titleOf);
 	const ranges = skeleton.ranges ?? [];
 	const histogramQueries = useQueries({ queries: ranges.map((range) => {
 		const filter = stateToText(skeleton, setRange(state, range.id, void 0), extras);
@@ -88,7 +105,11 @@ const useFilterConfig = ({ model, resources, views, view, state, extras }) => {
 		}
 		const field = model.fields[group.id];
 		const named = (counts(group.id, group.id) ?? []).flatMap((facet) => facet.label === void 0 ? [] : [[String(facet.value), facet.label]]);
-		const names = new Map([...named, ...labelQueries[index]?.data ?? []]);
+		const names = new Map([
+			...named,
+			...labelQueries[index]?.data ?? [],
+			...titled(group.id, index)
+		]);
 		const values = (counts(group.id, group.id) ?? []).flatMap((facet) => facet.value === null ? [] : [{
 			value: String(facet.value),
 			label: field?.type === "enum" ? enumLabel(String(facet.value), view?.fields[group.id]?.valueLabels) : names.get(String(facet.value)) ?? String(facet.value),