@protobase/ui 0.54.5 → 0.55.0

package/dist/app/app.js

@@ -7,14 +7,15 @@ 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";
 import { ProjectUiContext, useProjectUi } from "./pages/project-ui.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";
@@ -25,7 +26,6 @@ import { ConnectRoute } from "../connect/connect-route.js";
 import { SignInPolicyPage } from "../account/sign-in-policy-page.js";
 import { PluginSourceProvider } from "../plugins/plugin-source.js";
 import { AuthGate } from "../auth/auth-gate.js";
-import { isAdmin, userToShell } from "../auth/user-to-shell.js";
 import { AuthLocale } from "../auth/auth-locale.js";
 import { useLiveUpdates } from "../data/use-live-updates.js";
 import { useOpenedRecord } from "../data/use-record.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/create/create-values.js

@@ -1,19 +1,19 @@
-import { isEditable, toPatchValue } from "../../live/field-values.js";
+import { isEditable, toDraft, toPatchValue } from "../../live/field-values.js";
 import { whenShown } from "../record-mode/record-mode.js";
 import { text } from "./messages.js";
 import { layoutItems } from "@protobase/schema/internal";
 import { isRecordCondition } from "@protobase/schema";
 //#region src/app/create/create-values.ts
 const isChosen = (value) => typeof value === "object" && value !== null && "key" in value;
-/** Fields the user can set on a new record: not read-only, not the tenant, and not structured data. */
-const isCreatable = (model, field) => field.name !== model.tenant && !field.readOnly && (field.type === "relation" || isEditable(field));
+/** Fields the user can set on a new record: not read-only, not the tenant, and no JSON but through a field type (`isEditable`). */
+const isCreatable = (model, field, hints) => field.name !== model.tenant && !field.readOnly && (field.type === "relation" || isEditable(field, hints));
 /**
 * The view's sections limited to creatable fields, plus a section for any creatable field the layout leaves out. The
 * create form is a form, so sections and fields meant only for reading the record stay out of their sections, and a
 * creatable field among them lands in that last section. A write-only field is on the form only where a section names it.
 */
 const createSections = (model, view) => {
-	const creatable = Object.values(model.fields).filter((field) => isCreatable(model, field)).map((field) => field.name);
+	const creatable = Object.values(model.fields).filter((field) => isCreatable(model, field, view?.fields[field.name])).map((field) => field.name);
 	const placed = /* @__PURE__ */ new Set();
 	const sections = layoutItems(view?.layout ?? []).flatMap((item) => {
 		if (item.kind !== "section" || isRecordCondition(item.when) || !whenShown(item.when, true)) return [];
@@ -83,7 +83,7 @@ const initialDraft = (model, sections, given = {}) => Object.fromEntries(section
 	const fallback = field.default;
 	if (numberDefault(field) !== void 0) return [];
 	if (!fallback || !("value" in fallback) || fallback.value === null || fallback.value === void 0) return [];
-	return [[name, typeof fallback.value === "boolean" ? fallback.value : String(fallback.value)]];
+	return [[name, typeof fallback.value === "boolean" ? fallback.value : toDraft(fallback.value)]];
 })));
 const hasDatabaseDefault = (field) => Boolean(field.default && "db" in field.default);
 //#endregion

package/dist/app/field-editor.js

@@ -156,7 +156,7 @@ const ChosenEditor = (props) => {
 	const shown = useShownWidget(field, hints);
 	const builtIn = /* @__PURE__ */ jsx(BuiltInEditor, { ...props });
 	if (!shown) return builtIn;
-	if (locked || !isEditable(field)) return /* @__PURE__ */ jsx(WidgetPart, {
+	if (locked || !isEditable(field, hints)) return /* @__PURE__ */ jsx(WidgetPart, {
 		shown,
 		part: "display",
 		field,

package/dist/app/field-types/built-in-fields.js

@@ -0,0 +1,6 @@
+import { membersField } from "./members/members-field.js";
+//#region src/app/field-types/built-in-fields.ts
+/** The field types Protobase brings, which a view chooses by name like a plugin's; a plugin's of the same name wins. */
+const builtInFields = { members: membersField };
+//#endregion
+export { builtInFields };

package/dist/app/field-types/members/member-chip.js

@@ -0,0 +1,20 @@
+import { Avatar } from "../../../primitives/avatar.js";
+import { hueOf, initialsOf } from "../../../auth/user-to-shell.js";
+import { text } from "./messages.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/field-types/members/member-chip.tsx
+/** A member by avatar and name, as chat messages and comments draw their authors; a name of `undefined` is someone unknown. */
+const MemberChip = ({ id, name }) => /* @__PURE__ */ jsxs("span", {
+	className: "inline-flex min-w-0 items-center gap-1.5",
+	children: [/* @__PURE__ */ jsx(Avatar, {
+		initials: name && initialsOf(name) || "?",
+		hue: hueOf(id),
+		size: "xs",
+		className: "ring-0"
+	}), /* @__PURE__ */ jsx("span", {
+		className: name === void 0 ? "truncate text-muted-foreground" : "truncate",
+		children: name ?? text("unknownMember")
+	})]
+});
+//#endregion
+export { MemberChip };

package/dist/app/field-types/members/member-ids.js

@@ -0,0 +1,13 @@
+import { titleMatches } from "../../relation-options.js";
+//#region src/app/field-types/members/member-ids.ts
+/** The user ids a `members` field holds: the strings of its array, nothing for a value that is none. */
+const memberIdsOf = (value) => Array.isArray(value) ? value.filter((id) => typeof id === "string") : [];
+/** The ids with `id` added, or taken off when they hold it already. */
+const toggledId = (ids, id) => ids.includes(id) ? ids.filter((held) => held !== id) : [...ids, id];
+/** The members whose name holds every word of `search`, as the picker's options keyed by user id. */
+const memberOptions = (people, search) => people.filter((person) => titleMatches(person.name, search)).map((person) => ({
+	key: person.id,
+	label: person.name
+}));
+//#endregion
+export { memberIdsOf, memberOptions, toggledId };

package/dist/app/field-types/members/members-display.js

@@ -0,0 +1,44 @@
+import { cn } from "../../../lib/cn.js";
+import { Skeleton } from "../../../primitives/skeleton.js";
+import { text } from "./messages.js";
+import { MemberChip } from "./member-chip.js";
+import { memberIdsOf } from "./member-ids.js";
+import { useMembersField } from "./use-members-field.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/app/field-types/members/members-display.tsx
+const Members = ({ value, line }) => {
+	const members = useMembersField();
+	const ids = memberIdsOf(value);
+	if (ids.length === 0) return /* @__PURE__ */ jsx("span", {
+		className: "text-muted-foreground",
+		children: "—"
+	});
+	if (members.needsOrganizations) return /* @__PURE__ */ jsx("span", {
+		className: "text-muted-foreground",
+		children: text("needsOrganizations")
+	});
+	if (members.failed) return /* @__PURE__ */ jsx("span", {
+		className: "text-muted-foreground",
+		children: text("couldNotLoadMembers")
+	});
+	if (members.isLoading) return /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" });
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("flex min-w-0 items-center gap-x-3 gap-y-1", line ? "overflow-hidden" : "flex-wrap"),
+		children: ids.map((id) => /* @__PURE__ */ jsx(MemberChip, {
+			id,
+			name: members.member(id)?.name
+		}, id))
+	});
+};
+/** The members a field holds by avatar and name, on record pages, cards and page blocks; one no longer a member as unknown. */
+const MembersDisplay = (props) => /* @__PURE__ */ jsx(Members, {
+	...props,
+	line: false
+});
+/** The members a field holds on one line, in a list's table. */
+const MembersCell = (props) => /* @__PURE__ */ jsx(Members, {
+	...props,
+	line: true
+});
+//#endregion
+export { MembersCell, MembersDisplay };

package/dist/app/field-types/members/members-editor.js

@@ -0,0 +1,44 @@
+import { PickerCombobox, usePickerSearch } from "../../picker/picker-combobox.js";
+import { text } from "./messages.js";
+import { memberIdsOf, memberOptions, toggledId } from "./member-ids.js";
+import { useMembersField } from "./use-members-field.js";
+import { Token } from "../../../primitives/token.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/field-types/members/members-editor.tsx
+/**
+* Picks the organization's members into the field's array of user ids, as `RecordPicker multiple` picks records: type
+* to narrow them by name, each choice a token that takes it off again, and choosing a chosen member takes them off.
+*/
+const MembersEditor = ({ value, invalid, onChange }) => {
+	const search = usePickerSearch();
+	const members = useMembersField();
+	const ids = memberIdsOf(value);
+	if (members.needsOrganizations) return /* @__PURE__ */ jsx("p", {
+		className: "py-1.5 text-muted-foreground",
+		children: text("needsOrganizations")
+	});
+	const labelOf = (id) => members.member(id)?.name ?? text("unknownMember");
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-2",
+		children: [/* @__PURE__ */ jsx(PickerCombobox, {
+			search,
+			options: memberOptions(members.data ?? [], search.text),
+			chosen: ids,
+			several: true,
+			closedText: "",
+			placeholder: text("searchMembers"),
+			invalid,
+			loading: members.isLoading,
+			failed: members.failed,
+			onChoose: (option) => onChange(toggledId(ids, option.key))
+		}), ids.length > 0 && /* @__PURE__ */ jsx("div", {
+			className: "flex flex-wrap gap-1",
+			children: ids.map((id) => /* @__PURE__ */ jsx(Token, {
+				label: labelOf(id),
+				onRemove: () => onChange(ids.filter((held) => held !== id))
+			}, id))
+		})]
+	});
+};
+//#endregion
+export { MembersEditor };

package/dist/app/field-types/members/members-field.js

@@ -0,0 +1,16 @@
+import { MembersCell, MembersDisplay } from "./members-display.js";
+import { MembersEditor } from "./members-editor.js";
+import { builtInFieldTypes } from "@protobase/schema/internal";
+//#region src/app/field-types/members/members-field.ts
+/**
+* The built-in `members` field type, for a JSON array of the user ids of members of the organization the session works
+* in: `r.member_ids.widget('members')`. See the field types reference.
+*/
+const membersField = {
+	of: [...builtInFieldTypes.members],
+	display: MembersDisplay,
+	editor: MembersEditor,
+	cell: MembersCell
+};
+//#endregion
+export { membersField };

package/dist/app/field-types/members/messages.js

@@ -0,0 +1,18 @@
+import { defineMessages } from "../../../locale/messages.js";
+//#region src/app/field-types/members/messages.ts
+const text = defineMessages({
+	en: {
+		needsOrganizations: "Choosing members needs organizations: turn them on in the auth config.",
+		couldNotLoadMembers: "Could not load the members.",
+		unknownMember: "Unknown member",
+		searchMembers: "Search members"
+	},
+	nl: {
+		needsOrganizations: "Leden kiezen vraagt om organisaties: zet ze aan in de auth-configuratie.",
+		couldNotLoadMembers: "De leden konden niet worden geladen.",
+		unknownMember: "Onbekend lid",
+		searchMembers: "Leden zoeken"
+	}
+});
+//#endregion
+export { text };

package/dist/app/field-types/members/use-members-field.js

@@ -0,0 +1,18 @@
+import { useOptionalAuth } from "../../../auth/auth-provider.js";
+import { useMembers } from "../../../people/use-members.js";
+//#region src/app/field-types/members/use-members-field.ts
+/**
+* The organization's members for a `members` field, and what keeps it from showing them: `needsOrganizations` in an
+* app without them, where `useMembers` would fail, and `failed` when they could not be read.
+*/
+const useMembersField = () => {
+	const auth = useOptionalAuth();
+	const members = useMembers();
+	return {
+		...members,
+		needsOrganizations: !auth?.organizations,
+		failed: members.isError
+	};
+};
+//#endregion
+export { useMembersField };

package/dist/app/field-types/shown-widget.js

@@ -1,15 +1,20 @@
 import { useProjectUi } from "../pages/project-ui.js";
+import { builtInFields } from "./built-in-fields.js";
 //#region src/app/field-types/shown-widget.ts
+const named = (fields, name) => {
+	if (fields && Object.hasOwn(fields, name)) return fields[name];
+	if (Object.hasOwn(builtInFields, name)) return builtInFields[name];
+};
 /**
-* The field type the view's `hints` choose for `field`, when one of `fields` has that name and shows the field's
-* storage type; otherwise undefined, and the field shows as it would without one. A sensitive field never comes with
-* its value, so it keeps its own.
+* The field type the view's `hints` choose for `field`, when one of `fields` or a built-in one (`builtInFields`) has
+* that name and shows the field's storage type; otherwise undefined, and the field shows as it would without one. A
+* sensitive field never comes with its value, so it keeps its own.
 */
 const shownWidget = (fields, field, hints) => {
 	const chosen = hints?.widget;
-	if (!chosen || field.sensitive || !fields || !Object.hasOwn(fields, chosen.name)) return void 0;
-	const widget = fields[chosen.name];
-	return widget.of.includes(field.type) ? {
+	if (!chosen || field.sensitive) return void 0;
+	const widget = named(fields, chosen.name);
+	return widget?.of.includes(field.type) ? {
 		name: chosen.name,
 		widget,
 		props: chosen.props ?? {}

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/picker/picker-combobox.js

@@ -0,0 +1,140 @@
+import { cn } from "../../lib/cn.js";
+import { Input } from "../../primitives/input.js";
+import { text } from "../messages.js";
+import { useEffect, useId, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/picker/picker-combobox.tsx
+const usePickerSearch = () => {
+	const [text, setText] = useState("");
+	const [open, setOpen] = useState(false);
+	return {
+		text,
+		setText,
+		open,
+		setOpen
+	};
+};
+/** Loads the next page while `sentinel` is in view of the list; it re-arms after each page, in case it still is. */
+const useLoadMoreInView = (list, sentinel, loaded, loadMore) => {
+	useEffect(() => {
+		if (!list || !sentinel || !loadMore) return;
+		const observer = new IntersectionObserver((entries) => entries.some((entry) => entry.isIntersecting) && loadMore(), { root: list });
+		observer.observe(sentinel);
+		return () => observer.disconnect();
+	}, [
+		list,
+		sentinel,
+		loaded,
+		loadMore
+	]);
+};
+/**
+* A box to type in that lists the options its owner reads for the text: choose with the mouse or with the arrow keys
+* and Enter; Escape closes the list. The pickers of records and of members draw their lists with it.
+*/
+const PickerCombobox = ({ search, options, chosen, several, closedText, placeholder, invalid, paging, loading, failed, onChoose }) => {
+	const { text: text$1, setText, open, setOpen } = search;
+	const [active, setActive] = useState(-1);
+	const [list, setList] = useState(null);
+	const [sentinel, setSentinel] = useState(null);
+	const listId = useId();
+	const more = paging?.more ?? false;
+	useLoadMoreInView(list, sentinel, paging?.loaded ?? 0, paging?.loadMore);
+	const optionId = (index) => `${listId}-${index}`;
+	const input = useRef(null);
+	useEffect(() => {
+		if (!open && document.activeElement === input.current) input.current?.select();
+	}, [open]);
+	useEffect(() => {
+		if (open && active >= 0) document.getElementById(optionId(active))?.scrollIntoView({ block: "nearest" });
+	});
+	const close = () => {
+		setText("");
+		setActive(-1);
+		setOpen(false);
+	};
+	const choose = (option) => {
+		onChoose(option);
+		if (!several) return close();
+		setText("");
+		setActive(-1);
+	};
+	const onKeyDown = (event) => {
+		if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+			event.preventDefault();
+			if (!open) return setOpen(true);
+			const step = event.key === "ArrowDown" ? 1 : -1;
+			setActive((current) => Math.min(Math.max(current + step, 0), options.length - 1));
+			return;
+		}
+		if (event.key === "Enter" && open && options[active]) {
+			event.preventDefault();
+			choose(options[active]);
+			return;
+		}
+		if (event.key === "Escape" && open) {
+			event.preventDefault();
+			event.stopPropagation();
+			close();
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative",
+		children: [/* @__PURE__ */ jsx(Input, {
+			ref: input,
+			role: "combobox",
+			"aria-autocomplete": "list",
+			"aria-expanded": open,
+			"aria-controls": listId,
+			"aria-activedescendant": open && options[active] ? optionId(active) : void 0,
+			invalid,
+			placeholder,
+			value: open ? text$1 : closedText,
+			onFocus: () => setOpen(true),
+			onBlur: close,
+			onKeyDown,
+			onChange: (event) => {
+				setText(event.target.value);
+				setActive(event.target.value.trim() ? 0 : -1);
+				setOpen(true);
+			}
+		}), open && /* @__PURE__ */ jsxs("ul", {
+			ref: setList,
+			id: listId,
+			role: "listbox",
+			"aria-multiselectable": several || void 0,
+			className: "absolute z-30 mt-1 max-h-60 w-full overflow-y-auto rounded-md border bg-background py-1 shadow-pop",
+			onMouseDown: (event) => event.preventDefault(),
+			children: [
+				options.map((option, index) => /* @__PURE__ */ jsx("li", {
+					id: optionId(index),
+					role: "option",
+					"aria-selected": index === active,
+					className: cn("cursor-pointer truncate px-3 py-1.5", index === active && "bg-muted", chosen.includes(option.key) && "font-medium"),
+					onMouseMove: () => index !== active && setActive(index),
+					onClick: () => choose(option),
+					children: option.label
+				}, option.key)),
+				more && /* @__PURE__ */ jsx("li", {
+					ref: setSentinel,
+					"aria-hidden": true,
+					className: "h-px"
+				}),
+				failed && /* @__PURE__ */ jsx("li", {
+					className: "px-3 py-1.5 text-muted-foreground",
+					children: text("couldNotLoadOptions")
+				}),
+				!more && !loading && !failed && options.length === 0 && /* @__PURE__ */ jsx("li", {
+					className: "px-3 py-1.5 text-muted-foreground",
+					children: text("noMatches")
+				}),
+				loading && /* @__PURE__ */ jsx("li", {
+					className: "px-3 py-1.5 text-muted-foreground",
+					children: text("loading")
+				})
+			]
+		})]
+	});
+};
+//#endregion
+export { PickerCombobox, usePickerSearch };

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();