@protobase/ui 0.54.4 → 0.54.6

package/dist/app/app.js

@@ -7,7 +7,6 @@ import { MetaGate, Notice, useAdminMeta } from "./meta-gate.js";
 import { pageTabs, shownPageTab } from "./pages/page-tabs.js";
 import { ToastProvider } from "../toasts/toast-provider.js";
 import { humanize } from "../live/naming.js";
-import { recordTitle } from "../live/model-helpers.js";
 import { text } from "./messages.js";
 import { Router, useRouter } from "./router.js";
 import { useAppAddress } from "./use-app-address.js";
@@ -15,6 +14,7 @@ import { ProjectUiContext, useProjectUi } from "./pages/project-ui.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";
@@ -106,7 +106,8 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 	const group = groups.find((entry) => entry.items.some((item) => item.id === place));
 	const model = resource ? meta.resources[resource] : void 0;
 	const record = useOpenedRecord(shown?.resource ?? "", shown?.key ?? "", Boolean(model && shown));
-	const title = model && shown && record.data ? recordTitle(model, view, record.data.record, shown.key) : void 0;
+	const titleOf = useRecordTitle();
+	const title = model && shown && record.data ? titleOf(model, view, record.data.record, shown.key) : void 0;
 	const titleLoading = Boolean(shown) && (record.isLoading || drawnFrom?.state === "loading");
 	const { shell } = useProjectUi();
 	const Actions = shell?.actions;
@@ -292,12 +293,12 @@ const Authenticated = ({ baseUrl, client, sources, workspace, sidebarMode, ui, a
 		onUnauthenticated: markSignedOut,
 		children: /* @__PURE__ */ jsx(MetaGate, { children: /* @__PURE__ */ jsxs(ToastProvider, { children: [!sidebarBanner && /* @__PURE__ */ jsx(NewVersionToast, {}), path === connectRoute ? /* @__PURE__ */ jsx(ConnectRoute, {}) : /* @__PURE__ */ jsx(PluginGate, {
 			ui,
-			children: /* @__PURE__ */ jsx(Routes, {
+			children: /* @__PURE__ */ jsx(RecordTitles, { children: /* @__PURE__ */ jsx(Routes, {
 				workspace,
 				sidebarMode,
 				assistant,
 				runtime
-			})
+			}) })
 		})] }) })
 	});
 };

package/dist/app/nav-recent.js

@@ -1,9 +1,10 @@
-import { recordKey, recordTitle, recordTitleField } from "../live/model-helpers.js";
+import { recordKey, recordTitleField } from "../live/model-helpers.js";
 import { defaultOrderBy } from "./list-order.js";
+import { titleFieldsOf } from "./titles/record-title-of.js";
 import { defaultRecentLimit, encodeKey } from "@protobase/schema/internal";
 import { appPath, enumLabel } from "@protobase/schema";
 //#region src/app/nav-recent.ts
-/** The list request behind a sidebar group: its filter, order (the list's sort when unset), size, and only the fields it shows. */
+/** The list request behind a sidebar group: its filter, order (the list's sort when unset), size, and only the fields it shows, those its derived title reads included. */
 const recentRequest = (model, view, recent) => ({
 	filter: recent.filter ?? "",
 	orderBy: recent.orderBy ?? defaultOrderBy(model, view),
@@ -11,6 +12,7 @@ const recentRequest = (model, view, recent) => ({
 	fields: [.../* @__PURE__ */ new Set([
 		...model.primaryKey,
 		recordTitleField(model, view),
+		...titleFieldsOf(model, view),
 		...recent.status === void 0 ? [] : [recent.status]
 	])]
 });
@@ -23,14 +25,14 @@ const recordStatus = (model, view, recent, row) => {
 		pulse: recent.pulse?.includes(value) ?? false
 	};
 };
-/** List rows as sidebar records: titled like the record page, dotted by their status when the group has one, active while open. */
-const recentRecords = (model, view, recent, rows, basePath, activeKey) => {
+/** List rows as sidebar records: titled like the record page by `titleOf`, dotted by their status when the group has one, active while open. */
+const recentRecords = (model, view, recent, rows, basePath, activeKey, titleOf) => {
 	return rows.map((row) => {
 		const key = encodeKey(recordKey(model, row));
 		const status = recordStatus(model, view, recent, row);
 		return {
 			id: key,
-			label: recordTitle(model, view, row, key),
+			label: titleOf(model, view, row, key),
 			href: appPath({
 				kind: "record",
 				resource: model.name,

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

@@ -1,4 +1,3 @@
-import { keys } from "../../data/query-keys.js";
 import { useClient } from "../../data/api-provider.js";
 import { cn } from "../../lib/cn.js";
 import { useAdminMeta } from "../meta-gate.js";
@@ -12,23 +11,22 @@ 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 { fetchLabels } from "../../live/relation-labels.js";
+import { relationTitle, relationTitleQuery } from "../titles/relation-title.js";
+import { useRecordTitle } from "../titles/record-titles.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 RelationValue = ({ field, value, known }) => {
-	const { resources, views } = useAdminMeta();
+const RelationLink = ({ target, id, known }) => {
+	const { views } = useAdminMeta();
 	const client = useClient();
 	const queryClient = useQueryClient();
-	const target = field.relation ? resources[field.relation.resource] : void 0;
-	const id = String(value);
+	const titleOf = useRecordTitle();
+	const view = views[target.name];
 	const label = useQuery({
-		queryKey: keys.relatedLabel(target?.name ?? "", id),
-		enabled: Boolean(target) && known === void 0,
-		queryFn: async () => (await fetchLabels(queryClient, client, target, [id], views[target.name])).get(id) ?? id
+		...relationTitleQuery(queryClient, client, target, view, id),
+		enabled: known === void 0
 	});
-	if (!target) return /* @__PURE__ */ jsx("span", { children: id });
 	return /* @__PURE__ */ jsx(AppLink, {
 		to: {
 			kind: "record",
@@ -36,7 +34,17 @@ const RelationValue = ({ field, value, known }) => {
 			key: id
 		},
 		className: "font-medium text-primary-text hover:underline",
-		children: known ?? label.data ?? id
+		children: known ?? relationTitle(label.data, titleOf, target, view, id) ?? id
+	});
+};
+const RelationValue = ({ field, value, known }) => {
+	const { resources } = useAdminMeta();
+	const target = field.relation ? resources[field.relation.resource] : void 0;
+	if (!target) return /* @__PURE__ */ jsx("span", { children: String(value) });
+	return /* @__PURE__ */ jsx(RelationLink, {
+		target,
+		id: String(value),
+		known
 	});
 };
 const BuiltInValue = ({ model, field, value, format, relationLabel }) => {

package/dist/app/pages/merge-ui.d.ts

@@ -2,7 +2,7 @@ import { ProjectUi } from "./project-ui.js";
 //#region src/app/pages/merge-ui.d.ts
 /**
  * One UI config from several, each after the ones it `extends`, the last being the app's own: components, action
- * handlers, field types, drop rules and board drops are all kept, and one name defined by two configs is an error naming both; every shell slot
+ * handlers, field types, drop rules, board drops and title rules are all kept, and one name defined by two configs is an error naming both; every shell slot
  * and `beforeSignIn` component is drawn, the extended configs' first, except the logo and the bell, the last config's to set one.
  */
 export declare const mergeUi: (...uis: ProjectUi[]) => ProjectUi;

package/dist/app/pages/merge-ui.js

@@ -35,7 +35,7 @@ const around = (wrappers) => {
 };
 /**
 * One UI config from several, each after the ones it `extends`, the last being the app's own: components, action
-* handlers, field types, drop rules and board drops are all kept, and one name defined by two configs is an error naming both; every shell slot
+* handlers, field types, drop rules, board drops and title rules are all kept, and one name defined by two configs is an error naming both; every shell slot
 * and `beforeSignIn` component is drawn, the extended configs' first, except the logo and the bell, the last config's to set one.
 */
 const mergeUi = (...uis) => {
@@ -45,6 +45,7 @@ const mergeUi = (...uis) => {
 	const fields = union("The field type", named, (ui) => ui.fields);
 	const dropRules = union("The drop rule", named, (ui) => ui.dropRules);
 	const boardDrops = union("The board drop", named, (ui) => ui.boardDrops);
+	const titles = union("The title rule", named, (ui) => ui.titles);
 	const actionSlot = slot(named.flatMap(({ ui }) => ui.shell?.actions ? [ui.shell.actions] : []));
 	const rightPanel = slot(named.flatMap(({ ui }) => ui.shell?.rightPanel ? [ui.shell.rightPanel] : []));
 	const logo = named.findLast(({ ui }) => ui.shell?.logo)?.ui.shell?.logo;
@@ -58,6 +59,7 @@ const mergeUi = (...uis) => {
 		...Object.keys(fields).length > 0 && { fields },
 		...Object.keys(dropRules).length > 0 && { dropRules },
 		...Object.keys(boardDrops).length > 0 && { boardDrops },
+		...Object.keys(titles).length > 0 && { titles },
 		...(actionSlot || rightPanel || logo || bell) && { shell: {
 			...actionSlot && { actions: actionSlot },
 			...rightPanel && { rightPanel },

package/dist/app/pages/project-ui.d.ts

@@ -2,6 +2,7 @@ import { ShellLogoProps } from "../../app-shell/logo.js";
 import { FieldWidget } from "../field-types/field-widget.js";
 import { BoardDrop } from "../displays/board-drop.js";
 import { DropRule } from "../hand-order/drop-rule.js";
+import { TitleRule } from "../titles/title-rule.js";
 import { ComponentType, ReactNode } from "react";
 import { Client } from "@protobase/client";
 import { AppAddress } from "@protobase/schema";
@@ -46,7 +47,7 @@ export type BeforeSignInProps = {
  * The project's own React code for composed pages: custom components by the name their layout declares
  * (`component('UsageChart')`) or a widget part names, handlers for named actions that have no built-in behaviour,
  * field types by the name a view's `.widget(name)` chooses, drop rules by the name a list's `drag.rule` gives, board
- * drops by the name a list's `drag.board` gives, and the shell's slots. `extends` lists UI configs merged in before it (see `mergeUi`), or whole `protobase.ui.tsx` modules
+ * drops by the name a list's `drag.board` gives, title rules by the name a view's `.titleFrom` gives, and the shell's slots. `extends` lists UI configs merged in before it (see `mergeUi`), or whole `protobase.ui.tsx` modules
  * (`import * as tasksUi from '...'`), their exported components included; `name` names it in their errors.
  */
 export type ProjectUi = {
@@ -60,6 +61,8 @@ export type ProjectUi = {
   dropRules?: Record<string, DropRule>;
   /** Which columns of a board take a card and what a drop there writes, by the name a view's `drag.board` gives (see `BoardDrop`). */
   boardDrops?: Record<string, BoardDrop>;
+  /** A record's title for the person reading it, by the name a view's `.titleFrom` gives (see `TitleRule`). */
+  titles?: Record<string, TitleRule>;
   /**
    * Rendered in the shell on every page: `actions` at the end of the top bar, `rightPanel` beside the page, `logo`
    * at the top of the sidebar in place of Protobase's (see `ShellLogoProps`), and `bell` in the top bar in place of the

package/dist/app/record-page.js

@@ -14,7 +14,6 @@ import { RecordHeader } from "../record-view/record-header.js";
 import { humanize } from "../live/naming.js";
 import { markdownExcerpt } from "../markdown/markdown-excerpt.js";
 import { isMarkdown } from "../markdown/markdown-hint.js";
-import { recordTitle } from "../live/model-helpers.js";
 import { contactFormat } from "../live/contact-links.js";
 import { toneFor } from "../live/columns-from-model.js";
 import { displayValue, valueTitle } from "../live/display-value.js";
@@ -36,6 +35,7 @@ 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";
@@ -152,7 +152,7 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 	const meta = useAdminMeta();
 	const { address, go } = useAppAddress();
 	const view = meta.views[model.name];
-	const title = recordTitle(model, view, stored.record, recordKey);
+	const title = useRecordTitle()(model, view, stored.record, recordKey);
 	const { state: auth } = useAuth();
 	const linesModel = useMemo(() => findLinesResource(meta.resources, model), [meta.resources, model]);
 	const linesData = useLines(linesModel, model, recordKey);
@@ -216,7 +216,7 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 	const pick = (name, next) => {
 		const target = pickTarget(name);
 		if (!target || !isChosen(next)) return editor.change(name, next);
-		queryClient.setQueryData(keys.relatedLabel(target.name, next.key), next.label);
+		queryClient.setQueryData(keys.relatedLabel(target.name, next.key), { label: next.label });
 		editor.change(name, keyValue(target, next.key));
 	};
 	const { fields: fieldTypes } = useProjectUi();

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

@@ -1,9 +1,10 @@
 import { useAdminMeta } from "../meta-gate.js";
 import { Skeleton } from "../../primitives/skeleton.js";
-import { recordKey, recordTitle } from "../../live/model-helpers.js";
+import { recordKey } from "../../live/model-helpers.js";
 import { AppLink } from "../use-app-address.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";
@@ -36,33 +37,36 @@ const CardField = ({ scope, path }) => {
 * A related record as a card: its title linking to its page, its `fields` under their labels and the buttons of its
 * view's `actions`, run on it as everywhere else.
 */
-const RelatedCard = ({ scope, view, fields, actions }) => /* @__PURE__ */ jsxs("li", {
-	className: "flex min-w-0 flex-col gap-3 rounded-lg border border-border bg-surface p-4",
-	children: [
-		/* @__PURE__ */ jsx(AppLink, {
-			to: {
-				kind: "record",
-				resource: scope.model.name,
-				key: recordKey(scope.model, scope.record)
-			},
-			className: "self-start font-medium text-primary-text hover:underline",
-			children: recordTitle(scope.model, view, scope.record, scope.key)
-		}),
-		fields.length > 0 && /* @__PURE__ */ jsx("dl", {
-			className: "flex flex-col gap-3",
-			children: fields.map((path) => /* @__PURE__ */ jsx(CardField, {
-				scope,
-				path
-			}, path))
-		}),
-		actions.length > 0 && /* @__PURE__ */ jsx(RecordScope, {
-			value: scope,
-			children: /* @__PURE__ */ jsx("div", {
-				className: "flex flex-wrap items-center gap-2",
-				children: actions.map((name) => /* @__PURE__ */ jsx(ActionButton, { name }, name))
+const RelatedCard = ({ scope, view, fields, actions }) => {
+	const titleOf = useRecordTitle();
+	return /* @__PURE__ */ jsxs("li", {
+		className: "flex min-w-0 flex-col gap-3 rounded-lg border border-border bg-surface p-4",
+		children: [
+			/* @__PURE__ */ jsx(AppLink, {
+				to: {
+					kind: "record",
+					resource: scope.model.name,
+					key: recordKey(scope.model, scope.record)
+				},
+				className: "self-start font-medium text-primary-text hover:underline",
+				children: titleOf(scope.model, view, scope.record, scope.key)
+			}),
+			fields.length > 0 && /* @__PURE__ */ jsx("dl", {
+				className: "flex flex-col gap-3",
+				children: fields.map((path) => /* @__PURE__ */ jsx(CardField, {
+					scope,
+					path
+				}, path))
+			}),
+			actions.length > 0 && /* @__PURE__ */ jsx(RecordScope, {
+				value: scope,
+				children: /* @__PURE__ */ jsx("div", {
+					className: "flex flex-wrap items-center gap-2",
+					children: actions.map((name) => /* @__PURE__ */ jsx(ActionButton, { name }, name))
+				})
 			})
-		})
-	]
-});
+		]
+	});
+};
 //#endregion
 export { RelatedCard };

package/dist/app/search/search-model.js

@@ -1,5 +1,6 @@
 import { humanize } from "../../live/naming.js";
 import { recordKey, recordTitleField } from "../../live/model-helpers.js";
+import { recordTitleOf, titleFieldsOf } from "../titles/record-title-of.js";
 import { text } from "./messages.js";
 import { encodeKey, matchedSearchField } from "@protobase/schema/internal";
 import { appPath, createWhere, enumLabel, printFilter } from "@protobase/schema";
@@ -24,21 +25,25 @@ const searchPlaceholder = (targets) => {
 };
 /** The list filter for the text: the server's partial-word `search(...)` over the resource's search fields. */
 const searchFilter = (text) => printFilter(where$1.search(text.trim()));
-/** The fields a result's bold line joins: the view's `searchResult.title`, else the record's title field. */
+const derivesTitle = (target) => !target.view?.searchResult?.title?.length && target.view?.titleFrom !== void 0;
+/** The fields a result's bold line joins: the view's `searchResult.title`, else the record's title field, none for a derived title. */
 const titleFields = (target) => {
 	const fields = target.view?.searchResult?.title;
-	return fields?.length ? fields : [recordTitleField(target.model, target.view)];
+	if (fields?.length) return fields;
+	return derivesTitle(target) ? [] : [recordTitleField(target.model, target.view)];
 };
 /** The second line's field, unless the search matched another: the view's `searchResult.subtitle`, else the first search field not in the title. */
 const subtitleField = (target) => {
 	const title = titleFields(target);
 	return target.view?.searchResult?.subtitle ?? target.model.search?.find((name) => !title.includes(name));
 };
-/** The fields a result needs: the key, the title, the subtitle and the search fields, which say what the text matched. */
+/** The fields a result needs: the key, the title or those its derived title reads, the subtitle and the search fields, which say what the text matched. */
 const searchFields = (target) => {
 	const subtitle = subtitleField(target);
+	const derived = derivesTitle(target) ? titleFieldsOf(target.model, target.view) : [];
 	const lineFields = [
 		...titleFields(target),
+		...derived,
 		...subtitle ? [subtitle] : [],
 		...target.model.search ?? []
 	];
@@ -53,9 +58,13 @@ const shown = (target, row, name) => {
 /**
 * A row as a result for `text`: its title fields joined by spaces (the key when they are empty) over a subtitle, which is
 * the search field explaining the match when neither the title nor the default subtitle does (a phone number searched
-* for), else the default subtitle. `basePath` is where the app is served, so the link opens it in a new tab too.
+* for), else the default subtitle. `basePath` is where the app is served, so the link opens it in a new tab too; `titleOf`
+* titles a view's derived title for the reader.
 */
-const toHit = (target, row, text, basePath = "") => {
+const toHit = (target, row, text, basePath = "", titleOf = recordTitleOf({}, {
+	user: void 0,
+	member: () => void 0
+})) => {
 	const key = encodeKey(recordKey(target.model, row));
 	const title = titleFields(target);
 	const fallback = subtitleField(target);
@@ -63,7 +72,7 @@ const toHit = (target, row, text, basePath = "") => {
 	const subtitle = field ? shown(target, row, field) : "";
 	return {
 		id: key,
-		title: title.map((name) => shown(target, row, name)).filter(Boolean).join(" ") || key,
+		title: derivesTitle(target) ? titleOf(target.model, target.view, row, key) : title.map((name) => shown(target, row, name)).filter(Boolean).join(" ") || key,
 		...subtitle && { subtitle },
 		href: appPath({
 			kind: "record",

package/dist/app/search/use-global-search.js

@@ -1,6 +1,7 @@
 import { useClient } from "../../data/api-provider.js";
 import { useAdminMeta } from "../meta-gate.js";
 import { useRouter } from "../router.js";
+import { useRecordTitle } from "../titles/record-titles.js";
 import { useDebounced } from "../../lib/use-debounced.js";
 import { navigationHits } from "./navigation-hits.js";
 import { searchFields, searchFilter, searchPlaceholder, searchTargets, toHit } from "./search-model.js";
@@ -17,6 +18,7 @@ const useGlobalSearch = () => {
 	const meta = useAdminMeta();
 	const client = useClient();
 	const { basePath } = useRouter();
+	const titleOf = useRecordTitle();
 	const targets = useMemo(() => searchTargets(meta), [meta]);
 	const [text, setText] = useState("");
 	const typed = text.trim();
@@ -53,7 +55,7 @@ const useGlobalSearch = () => {
 			hits: [],
 			failed: true
 		}];
-		const hits = (result.data?.items ?? []).map((row) => toHit(target, row, query, basePath));
+		const hits = (result.data?.items ?? []).map((row) => toHit(target, row, query, basePath, titleOf));
 		return hits.length > 0 ? [{
 			id: target.model.name,
 			label: target.label,

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

@@ -0,0 +1,17 @@
+import { recordTitle } from "../../live/model-helpers.js";
+//#region src/app/titles/record-title-of.ts
+/** The fields a record must be read with for its view to title it. */
+const titleFieldsOf = (model, view) => view?.titleFrom?.fields ?? [];
+/**
+* Titles records for this reader: a view's `titleFrom` by its rule, else its stored title as `recordTitle` does. The key
+* shows when the rule returns nothing, is not registered, or a field it reads is unreadable or was not read with the record.
+*/
+const recordTitleOf = (rules, reader) => (model, view, record, fallback) => {
+	const from = view?.titleFrom;
+	if (!from) return recordTitle(model, view, record, fallback);
+	const rule = rules[from.rule];
+	if (!rule || from.unreadable || from.fields.some((name) => record[name] === void 0)) return fallback;
+	return rule(record, reader) || fallback;
+};
+//#endregion
+export { recordTitleOf, titleFieldsOf };

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

@@ -0,0 +1,63 @@
+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 { recordTitleOf } from "./record-title-of.js";
+import { createContext, useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/app/titles/record-titles.tsx
+const noMember = () => void 0;
+const RecordTitleContext = createContext(recordTitleOf({}, {
+	user: void 0,
+	member: noMember
+}));
+/** How the framework titles a record for the person reading it: a view's derived title, else its stored one. */
+const useRecordTitle = () => useContext(RecordTitleContext);
+const WithoutMembers = ({ rules, user, children }) => {
+	const titleOf = useMemo(() => recordTitleOf(rules, {
+		user,
+		member: noMember
+	}), [rules, user]);
+	return /* @__PURE__ */ jsx(RecordTitleContext.Provider, {
+		value: titleOf,
+		children
+	});
+};
+const WithMembers = ({ rules, user, children }) => {
+	const { member } = useMembers();
+	const titleOf = useMemo(() => recordTitleOf(rules, {
+		user,
+		member
+	}), [
+		rules,
+		user,
+		member
+	]);
+	return /* @__PURE__ */ jsx(RecordTitleContext.Provider, {
+		value: titleOf,
+		children
+	});
+};
+/**
+* Titles records with the project UI's `titles` rules for the signed-in reader, who gets the organization's members
+* when the app has organizations and a view derives its titles; `useRecordTitle()` gives it to whatever titles a record.
+*/
+const RecordTitles = ({ children }) => {
+	const { views } = useAdminMeta();
+	const { titles } = useProjectUi();
+	const auth = useOptionalAuth();
+	const user = auth?.state.kind === "signed-in" ? auth.state.user : void 0;
+	const rules = titles ?? {};
+	if (Object.values(views).some((view) => view.titleFrom !== void 0) && user && auth?.organizations) return /* @__PURE__ */ jsx(WithMembers, {
+		rules,
+		user,
+		children
+	});
+	return /* @__PURE__ */ jsx(WithoutMembers, {
+		rules,
+		user,
+		children
+	});
+};
+//#endregion
+export { RecordTitles, useRecordTitle };

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

@@ -0,0 +1,35 @@
+import { keys } from "../../data/query-keys.js";
+import { fetchLabels } from "../../live/relation-labels.js";
+import { createWhere, printFilter } from "@protobase/schema";
+//#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.
+*/
+const relationTitleQuery = (queryClient, client, target, view, id) => {
+	const from = view?.titleFrom;
+	if (!from) return {
+		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 };
+		}
+	};
+};
+/** The name `relationTitleQuery` read, titled for the reader; the key for a record not found, undefined while it loads. */
+const relationTitle = (data, titleOf, target, view, id) => {
+	if (!data) return;
+	if ("label" in data) return data.label;
+	return data.row ? titleOf(target, view, data.row, id) : id;
+};
+//#endregion
+export { relationTitle, relationTitleQuery };

package/dist/app/titles/title-rule.d.ts

@@ -0,0 +1,14 @@
+import { AuthUser, OrganizationPerson } from "@protobase/client";
+//#region src/app/titles/title-rule.d.ts
+/** Who reads a record whose title is derived: the signed-in user, if any, and the organization's members by user id. */
+export type TitleReader = {
+  user: AuthUser | undefined;
+  /** The member with this user id, as `useMembers()` gives them; undefined while the members load or without organizations. */
+  member: (id: string) => OrganizationPerson | undefined;
+};
+/**
+ * A rule a view's `.titleFrom(name, ...)` names: the record's title for this reader, from the fields the view picked.
+ * Returning undefined or an empty string titles the record by its key, as while the members load.
+ */
+export type TitleRule = (record: Record<string, unknown>, reader: TitleReader) => string | undefined;
+//#endregion

package/dist/app/use-nav-recent.js

@@ -1,5 +1,6 @@
 import { keys } from "../data/query-keys.js";
 import { useClient } from "../data/api-provider.js";
+import { useRecordTitle } from "./titles/record-titles.js";
 import { userMenuResources } from "./user-menu-from-meta.js";
 import { recentRecords, recentRequest, recentRowDiffers } from "./nav-recent.js";
 import { useEffect, useMemo } from "react";
@@ -34,6 +35,7 @@ const useFollowRecords = (groups) => {
 */
 const useNavRecent = (meta, basePath, active) => {
 	const client = useClient();
+	const titleOf = useRecordTitle();
 	const groups = useMemo(() => {
 		const inMenu = userMenuResources(meta);
 		return Object.values(meta.views).flatMap((view) => {
@@ -59,7 +61,7 @@ const useNavRecent = (meta, basePath, active) => {
 		const activeKey = active.resource === model.name ? active.key : void 0;
 		return [model.name, {
 			state: "ready",
-			records: recentRecords(model, view, recent, result.data.items, basePath, activeKey)
+			records: recentRecords(model, view, recent, result.data.items, basePath, activeKey, titleOf)
 		}];
 	}));
 };

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

@@ -1,20 +1,17 @@
-import { keys } from "../data/query-keys.js";
 import { useClient } from "../data/api-provider.js";
-import { fetchLabels } from "../live/relation-labels.js";
+import { relationTitle, relationTitleQuery } from "./titles/relation-title.js";
+import { useRecordTitle } from "./titles/record-titles.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. The tenant is left out. */
+/** 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. */
 const useRelatedRecords = (model, resources, views, record) => {
 	const client = useClient();
 	const queryClient = useQueryClient();
+	const titleOf = useRecordTitle();
 	const relations = Object.values(model.fields).filter((field) => field.type === "relation" && field.relation && field.name !== model.tenant && record[field.name] != null && resources[field.relation.resource]?.primaryKey.length === 1);
 	const labels = useQueries({ queries: relations.map((field) => {
 		const target = resources[field.relation.resource];
-		const id = String(record[field.name]);
-		return {
-			queryKey: keys.relatedLabel(target.name, id),
-			queryFn: async () => (await fetchLabels(queryClient, client, target, [id], views[target.name])).get(id) ?? id
-		};
+		return relationTitleQuery(queryClient, client, target, views[target.name], String(record[field.name]));
 	}) });
 	const addresses = relations.map((field) => ({
 		kind: "record",
@@ -23,7 +20,10 @@ const useRelatedRecords = (model, resources, views, record) => {
 	}));
 	return {
 		addresses: Object.fromEntries(relations.map((field, index) => [field.name, addresses[index]])),
-		labels: Object.fromEntries(relations.map((field, index) => [field.name, labels[index]?.data]))
+		labels: Object.fromEntries(relations.map((field, index) => {
+			const target = resources[field.relation.resource];
+			return [field.name, relationTitle(labels[index]?.data, titleOf, target, views[target.name], String(record[field.name]))];
+		}))
 	};
 };
 //#endregion

package/dist/chat/chat-divider.d.ts

@@ -10,6 +10,9 @@ export type ChatDividerProps =
   tone: 'new';
   label?: string;
 };
-/** A line across a chat with a label in its middle, between the messages of two days or above the new ones. */
+/**
+ * A line across a chat with a label in its middle, between the messages of two days or above the new ones. Marked
+ * `data-chat-divider`, so a thread keeps the reader's place on the message below it, not on the divider.
+ */
 export declare const ChatDivider: ({ tone, label }: ChatDividerProps) => import("react").JSX.Element;
 //#endregion

package/dist/chat/chat-divider.js

@@ -2,7 +2,10 @@ import { cn } from "../lib/cn.js";
 import { text } from "./messages.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/chat/chat-divider.tsx
-/** A line across a chat with a label in its middle, between the messages of two days or above the new ones. */
+/**
+* A line across a chat with a label in its middle, between the messages of two days or above the new ones. Marked
+* `data-chat-divider`, so a thread keeps the reader's place on the message below it, not on the divider.
+*/
 const ChatDivider = ({ tone = "day", label }) => {
 	const shown = label ?? text("newMessages");
 	const line = cn("h-px flex-1", tone === "new" ? "bg-danger" : "bg-border");
@@ -10,6 +13,7 @@ const ChatDivider = ({ tone = "day", label }) => {
 		role: "separator",
 		"aria-label": shown,
 		"data-tone": tone,
+		"data-chat-divider": "",
 		className: "flex items-center gap-3 text-xs font-medium",
 		children: [
 			/* @__PURE__ */ jsx("span", { className: line }),