@rebasepro/admin 0.10.0 → 0.10.1-canary.14e53ae

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rebasepro/admin",
   "type": "module",
-  "version": "0.10.0",
+  "version": "0.10.1-canary.14e53ae",
   "description": "Rebase CMS — content management views, forms, and routing",
   "funding": {
     "url": "https://github.com/sponsors/rebaseco"
@@ -83,13 +83,13 @@
     "react-dropzone": "^15.0.0",
     "react-use-measure": "^2.1.7",
     "zod": "^4.4.3",
-    "@rebasepro/common": "0.10.0",
-    "@rebasepro/app": "0.10.0",
-    "@rebasepro/forms": "0.10.0",
-    "@rebasepro/inference": "0.10.0",
-    "@rebasepro/types": "0.10.0",
-    "@rebasepro/ui": "0.10.0",
-    "@rebasepro/utils": "0.10.0"
+    "@rebasepro/common": "0.10.1-canary.14e53ae",
+    "@rebasepro/forms": "0.10.1-canary.14e53ae",
+    "@rebasepro/types": "0.10.1-canary.14e53ae",
+    "@rebasepro/app": "0.10.1-canary.14e53ae",
+    "@rebasepro/inference": "0.10.1-canary.14e53ae",
+    "@rebasepro/utils": "0.10.1-canary.14e53ae",
+    "@rebasepro/ui": "0.10.1-canary.14e53ae"
   },
   "peerDependencies": {
     "react": ">=19.0.0",

package/src/components/CollectionViewBinding/usePreviewSlots.ts

@@ -1,9 +1,9 @@
 import { useMemo } from "react";
 import type { CollectionConfig, Property, RelationProperty } from "@rebasepro/types";
 import type { Entity, PropertyConfig, EntityRelation } from "@rebasepro/types";
-import { getEntityImagePreviewPropertyKey } from "@rebasepro/common";
+import { getEntityImagePreviewPropertyKey, getTitlePropertyCandidates, looksLikeIdentifierValue } from "@rebasepro/common";
 import { getEntityFromCache } from "@rebasepro/app";
-import { getEntityTitlePropertyKey, getEntityPreviewKeys } from "../../util/previews";
+import { getEntityPreviewKeys } from "../../util/previews";
 import { getValueInPath } from "@rebasepro/utils";
 import type { AuthController } from "@rebasepro/types";
 import { ChipColorScheme, CHIP_COLORS } from "@rebasepro/ui";
@@ -90,6 +90,8 @@ export interface EntityPreviewSlots {
  */
 export interface CollectionSlotKeys {
     titleKey: string | undefined;
+    /** Every property that could act as the title, best first (see `getTitlePropertyCandidates`) */
+    titleKeyCandidates: string[];
     imageKey: string | undefined;
     subtitleKey: string | undefined;
     relationKeys: string[];
@@ -106,7 +108,8 @@ export function resolveCollectionSlotKeys(
     authController: AuthController,
     propertyConfigs: Record<string, PropertyConfig>
 ): CollectionSlotKeys {
-    const titleKey = getEntityTitlePropertyKey(collection, propertyConfigs);
+    const titleKeyCandidates = getTitlePropertyCandidates(collection);
+    const titleKey = titleKeyCandidates[0];
     const imageKey = getEntityImagePreviewPropertyKey(collection);
 
     // Status: first string-enum that isn't the title
@@ -201,6 +204,7 @@ export function resolveCollectionSlotKeys(
     const subtitleKey = sortedPreviewKeys.length > 0 ? sortedPreviewKeys[0] : undefined;
 
     return { titleKey,
+titleKeyCandidates,
 imageKey,
 subtitleKey,
 relationKeys,
@@ -242,6 +246,30 @@ function resolveImageSlot(
     };
 }
 
+// ── Title resolution (entity-level) ───────────────────────────────────
+
+/**
+ * Walk the collection's ranked title candidates and return the first one that
+ * holds something a person can read for this entity. Candidates are already
+ * ordered and free of identifier properties; this only rejects values —
+ * empties, and strings that turn out to be an id at runtime.
+ */
+function resolveEntityTitleKey(
+    entity: Entity<Record<string, unknown>>,
+    candidates: string[]
+): string | undefined {
+    for (const key of candidates) {
+        const value = getValueInPath(entity.values, key);
+        if (value === undefined || value === null || value === "") continue;
+        if (typeof value === "string") {
+            if (looksLikeIdentifierValue(value)) continue;
+            if (value === String(entity.id)) continue;
+        }
+        return key;
+    }
+    return candidates[0];
+}
+
 // ── Date formatting ───────────────────────────────────────────────────
 
 function formatDateValue(value: unknown): string {
@@ -299,24 +327,27 @@ export function resolveEntitySlots(
     collection: CollectionConfig<Record<string, unknown>>,
     slotKeys: CollectionSlotKeys
 ): EntityPreviewSlots {
-    const { titleKey, imageKey, subtitleKey, relationKeys, statusKey, dateKey } = slotKeys;
+    const { titleKey, titleKeyCandidates, imageKey, subtitleKey, relationKeys, statusKey, dateKey } = slotKeys;
 
     // Image
     const image = imageKey ? resolveImageSlot(collection, imageKey, entity) : undefined;
 
-    // Title
+    // Title — the best-ranked candidate that carries a readable value for THIS
+    // entity, so a row whose name is empty (or whose column happens to hold a
+    // UUID) falls through to the next candidate instead of showing an id.
+    const resolvedTitleKey = resolveEntityTitleKey(entity, titleKeyCandidates ?? (titleKey ? [titleKey] : []));
     let title: PreviewSlot | undefined;
-    if (titleKey) {
-        const prop = collection.properties[titleKey] as Property | undefined;
-        const val = getValueInPath(entity.values, titleKey);
+    if (resolvedTitleKey) {
+        const prop = collection.properties[resolvedTitleKey] as Property | undefined;
+        const val = getValueInPath(entity.values, resolvedTitleKey);
         if (prop) title = { property: prop,
-propertyKey: titleKey,
+propertyKey: resolvedTitleKey,
 value: val };
     }
 
     // Subtitle
     let subtitle: PreviewSlot | undefined;
-    if (subtitleKey) {
+    if (subtitleKey && subtitleKey !== resolvedTitleKey) {
         const prop = collection.properties[subtitleKey] as Property | undefined;
         const val = getValueInPath(entity.values, subtitleKey);
         if (prop && val !== undefined && val !== null && val !== "") {

package/src/components/DetailViewBinding.tsx

@@ -44,7 +44,8 @@ import { useUrlController } from "../hooks/navigation/contexts/UrlContext";
 import { useCollectionRegistryController } from "../hooks/navigation/contexts/CollectionRegistryContext";
 import { useNavigate } from "react-router-dom";
 import { getValueInPath } from "@rebasepro/utils";
-import { getEntityTitlePropertyKey, resolveTitleToString } from "../util/previews";
+import { getEntityTitlePropertyKeyForEntity, isUserSelectProperty, resolveTitleToString } from "../util/previews";
+import { getUserLabel, useResolvedUser } from "../hooks/useResolvedUsers";
 import { JsonPreviewBinding } from "../components/JsonPreviewBinding";
 
 const EntityHistoryView = lazy(() => import("../components/history").then(m => ({ default: m.EntityHistoryView })));
@@ -267,11 +268,17 @@ entityId }
     const FormViewBuilder = formViewConfig?.Builder ? resolveComponentRef<EntityCustomViewParams>(formViewConfig.Builder as ComponentRef<EntityCustomViewParams>) : null;
 
     // Title resolution
-    const titlePropertyKey = getEntityTitlePropertyKey(collection, customizationController.propertyConfigs);
+    const titlePropertyKey = getEntityTitlePropertyKeyForEntity(collection, usedEntity?.values, usedEntity?.id);
     const rawTitle = usedEntity?.values && titlePropertyKey ? getValueInPath(usedEntity.values, titlePropertyKey) : undefined;
-    const title = rawTitle !== undefined && rawTitle !== null
-        ? resolveTitleToString(rawTitle)
-        : (collection.singularName ?? collection.name);
+    // A user picker stores an id: resolve it to the person, like a relation.
+    const titleUser = useResolvedUser(isUserSelectProperty(collection, titlePropertyKey) && typeof rawTitle === "string"
+        ? rawTitle
+        : undefined);
+    const title = titleUser
+        ? getUserLabel(titleUser)
+        : (rawTitle !== undefined && rawTitle !== null
+            ? resolveTitleToString(rawTitle)
+            : (collection.singularName ?? collection.name));
 
     // Non-action custom views
     const nonActionCustomViews = useMemo(() =>

package/src/components/EntityPreviewBinding.tsx

@@ -25,7 +25,7 @@ import {
 import { useAnalyticsController } from "@rebasepro/app";
 import { IconForView } from "@rebasepro/app";
 import { getPropertyInPath } from "../util/property_utils";
-import { getEntityPreviewKeys, getEntityTitlePropertyKey } from "../util/previews";
+import { getEntityPreviewKeys, getEntityTitlePropertyKeyForEntity } from "../util/previews";
 import { getValueInPath } from "@rebasepro/utils";
 import { useCollectionRegistryController } from "../hooks/navigation/contexts/CollectionRegistryContext";
 import { useSidePanel } from "../hooks/useSidePanel";
@@ -98,7 +98,7 @@ export function EntityPreviewBindingData({
         );
     }
 
-    const titleProperty = includeTitle ? getEntityTitlePropertyKey(collection, customizationController.propertyConfigs) : undefined;
+    const titleProperty = includeTitle ? getEntityTitlePropertyKeyForEntity(collection, entity.values, entity.id) : undefined;
     const imagePropertyKey = includeImage ? getEntityImagePreviewPropertyKey(collection) : undefined;
     const imageProperty = imagePropertyKey ? collection.properties[imagePropertyKey] : undefined;
     const ofProp = imageProperty && "of" in imageProperty ? imageProperty.of : undefined;

package/src/components/SideDialogs.tsx

@@ -164,7 +164,7 @@ function SideDialogView({
                     scrollable={false}
                 >
                     {panel && (
-                        <div className="flex flex-col h-[75vh] min-h-[500px] min-w-[55vw] max-w-full overflow-hidden">
+                        <div className="flex flex-col h-[75vh] min-h-[500px] w-full min-w-0 max-w-full overflow-hidden">
                             <ErrorBoundary>
                                 {panel.component}
                             </ErrorBoundary>

package/src/form/EntityForm.tsx

@@ -26,7 +26,8 @@ import { EntityFormActions } from "./EntityFormActions";
 import type { EntityFormActionsProps } from "../types/components/EntityFormActionsProps";
 import { LocalChangesMenu } from "./components/LocalChangesMenu";
 
-import { getEntityTitlePropertyKey, resolveTitleToString } from "../util/previews";
+import { getEntityTitlePropertyKeyForEntity, isUserSelectProperty, resolveTitleToString } from "../util/previews";
+import { getUserLabel, useResolvedUser } from "../hooks/useResolvedUsers";
 import { getValueInPath, mergeDeep } from "@rebasepro/utils";
 import {
     getChanges,
@@ -313,11 +314,17 @@ export function EntityForm<M extends Record<string, unknown>>({
 
     const actionsDisabled = disabled || formex.isSubmitting || (status === "existing" && !formex.dirty) || Boolean(disabledProp);
 
-    const titlePropertyKey = getEntityTitlePropertyKey(collection, customizationController.propertyConfigs);
+    const titlePropertyKey = getEntityTitlePropertyKeyForEntity(collection, formex.values as Record<string, unknown> | undefined, entityId);
     const rawTitle = formex.values && titlePropertyKey ? getValueInPath(formex.values, titlePropertyKey) : undefined;
-    const title = rawTitle !== undefined && rawTitle !== null
-        ? resolveTitleToString(rawTitle)
-        : (collection.singularName ?? collection.name);
+    // A user picker stores an id: resolve it to the person, like a relation.
+    const titleUser = useResolvedUser(isUserSelectProperty(collection, titlePropertyKey) && typeof rawTitle === "string"
+        ? rawTitle
+        : undefined);
+    const title = titleUser
+        ? getUserLabel(titleUser)
+        : (rawTitle !== undefined && rawTitle !== null
+            ? resolveTitleToString(rawTitle)
+            : (collection.singularName ?? collection.name));
 
     const modified = formex.dirty;
 

package/src/hooks/index.ts

@@ -2,6 +2,7 @@ export * from "./useSidePanel";
 export * from "./useSelectionDialog";
 export * from "./useBuildSidePanel";
 export * from "./useResolvedNavigationFrom";
+export * from "./useResolvedUsers";
 export * from "./useHistory";
 export * from "./navigation/contexts";
 export * from "./navigation/useBuildCollectionRegistryController";

package/src/hooks/useResolvedUsers.ts

@@ -0,0 +1,143 @@
+import { useEffect, useState } from "react";
+import type { User } from "@rebasepro/types";
+import { useAuthController, useRebaseClient } from "@rebasepro/app";
+
+/**
+ * Resolves the auth users behind `userSelect` values.
+ *
+ * A collection view can ask for dozens of ids at once — one per row — so
+ * lookups are coalesced into a single `GET /api/users?ids=…` per tick and
+ * cached per base URL. Ids that resolve to nothing are remembered too, so a
+ * dangling reference is not retried on every render.
+ */
+
+interface UserCache {
+    users: Map<string, User | null>;
+    pending: Map<string, Promise<void>>;
+    queue: Set<string>;
+    flush?: ReturnType<typeof setTimeout>;
+}
+
+const caches = new Map<string, UserCache>();
+
+function getCache(baseUrl: string): UserCache {
+    let cache = caches.get(baseUrl);
+    if (!cache) {
+        cache = { users: new Map(),
+pending: new Map(),
+queue: new Set() };
+        caches.set(baseUrl, cache);
+    }
+    return cache;
+}
+
+async function fetchUsers(baseUrl: string, ids: string[], token: string | undefined): Promise<Map<string, User | null>> {
+    const resolved = new Map<string, User | null>();
+    for (const id of ids) resolved.set(id, null);
+
+    const params = new URLSearchParams({ ids: ids.join(",") });
+    const response = await fetch(`${baseUrl}/api/users?${params}`, {
+        headers: token ? { Authorization: `Bearer ${token}` } : {}
+    });
+    if (!response.ok) {
+        // A non-admin viewer gets a 403 here. Treat it as "unresolvable" rather
+        // than an error: callers fall back to showing the raw value.
+        return resolved;
+    }
+    const data = await response.json();
+    const rows: Record<string, unknown>[] = data.users ?? data.data ?? [];
+    for (const row of rows) {
+        const uid = (row.uid as string) ?? (row.id as string);
+        if (!uid) continue;
+        resolved.set(uid, {
+            uid,
+            email: (row.email as string) ?? "",
+            displayName: (row.displayName as string) ?? (row.display_name as string) ?? null,
+            photoURL: (row.photoURL as string) ?? (row.photo_url as string) ?? null,
+            providerId: "custom",
+            isAnonymous: false,
+            roles: (row.roles as string[]) ?? []
+        });
+    }
+    return resolved;
+}
+
+function requestUser(
+    baseUrl: string,
+    uid: string,
+    getAuthToken: (() => Promise<string | undefined>) | undefined
+): Promise<void> {
+    const cache = getCache(baseUrl);
+    const existing = cache.pending.get(uid);
+    if (existing) return existing;
+
+    cache.queue.add(uid);
+
+    const promise = new Promise<void>((resolve, reject) => {
+        if (cache.flush) clearTimeout(cache.flush);
+        cache.flush = setTimeout(async () => {
+            const ids = [...cache.queue];
+            cache.queue.clear();
+            cache.flush = undefined;
+            try {
+                const token = await getAuthToken?.();
+                const resolved = await fetchUsers(baseUrl, ids, token);
+                for (const id of ids) {
+                    cache.users.set(id, resolved.get(id) ?? null);
+                    cache.pending.delete(id);
+                }
+                resolve();
+            } catch (error) {
+                for (const id of ids) cache.pending.delete(id);
+                reject(error);
+            }
+        }, 0);
+    });
+
+    cache.pending.set(uid, promise);
+    return promise;
+}
+
+/**
+ * The auth user behind a `userSelect` value, or `null` while it is loading or
+ * when it cannot be resolved.
+ */
+export function useResolvedUser(uid: string | undefined): User | null {
+    const client = useRebaseClient<{ baseUrl?: string }>();
+    const { getAuthToken } = useAuthController();
+    const baseUrl = client?.baseUrl;
+
+    const [user, setUser] = useState<User | null>(() =>
+        (baseUrl && uid) ? getCache(baseUrl).users.get(uid) ?? null : null);
+
+    useEffect(() => {
+        if (!baseUrl || !uid) {
+            setUser(null);
+            return;
+        }
+        const cache = getCache(baseUrl);
+        if (cache.users.has(uid)) {
+            setUser(cache.users.get(uid) ?? null);
+            return;
+        }
+
+        let active = true;
+        requestUser(baseUrl, uid, getAuthToken)
+            .then(() => {
+                if (active) setUser(getCache(baseUrl).users.get(uid) ?? null);
+            })
+            .catch(() => {
+                if (active) setUser(null);
+            });
+        return () => {
+            active = false;
+        };
+    }, [baseUrl, uid, getAuthToken]);
+
+    return user;
+}
+
+/** Human-readable label for a resolved user. */
+export function getUserLabel(user: User): string {
+    return user.displayName || user.email || user.uid;
+}

package/src/index.ts

@@ -89,7 +89,8 @@ export {
     getDefaultPropertiesOrder,
     // Preview utilities (moved from @rebasepro/app — property-aware logic belongs in CMS)
     getEntityPreviewKeys,
-    getEntityTitlePropertyKey
+    getEntityTitlePropertyKey,
+    getEntityTitlePropertyKeyForEntity
 } from "./util";
 
 // Headless collection view adapters

package/src/preview/components/ReferencePreview.tsx

@@ -9,7 +9,7 @@ import { ErrorBoundary } from "@rebasepro/ui";
 import { ErrorView } from "@rebasepro/app";
 import { EntityPreviewBinding, EntityPreviewContainer } from "../../components/EntityPreviewBinding";
 import { useCollectionRegistryController } from "../../hooks/navigation/contexts/CollectionRegistryContext";
-import { getEntityTitlePropertyKey } from "../../util/previews";
+import { getEntityTitlePropertyKeyForEntity } from "../../util/previews";
 import { getValueInPath } from "@rebasepro/utils";
 
 export type ReferencePreviewProps = {
@@ -196,7 +196,7 @@ function ReferencePreviewExisting<M extends Record<string, unknown> = Record<str
     }
 
     if (textOnly) {
-        const titleProperty = getEntityTitlePropertyKey(collection, customizationController.propertyConfigs);
+        const titleProperty = getEntityTitlePropertyKeyForEntity(collection, usedEntity.values, usedEntity.id);
         const titleValue = titleProperty ? getValueInPath(usedEntity.values, titleProperty) : undefined;
         const displayValue = titleValue !== undefined && titleValue !== null ? String(titleValue) : String(reference.id);
         return <span className="truncate">{displayValue}</span>;

package/src/preview/components/RelationPreview.tsx

@@ -7,7 +7,7 @@ import { useCustomizationController, useFetch, ErrorView, useComponentOverride,
 import { Skeleton } from "@rebasepro/ui";
 import { EntityPreviewBinding, EntityPreviewContainer } from "../../components/EntityPreviewBinding";
 import { useCollectionRegistryController } from "../../hooks/navigation/contexts/CollectionRegistryContext";
-import { getEntityTitlePropertyKey } from "../../util/previews";
+import { getEntityTitlePropertyKeyForEntity } from "../../util/previews";
 import { getValueInPath } from "@rebasepro/utils";
 
 export type RelationPreviewProps = {
@@ -228,7 +228,7 @@ function RelationPreviewExisting<M extends Record<string, unknown> = Record<stri
     }
 
     if (textOnly) {
-        const titleProperty = getEntityTitlePropertyKey(collection, customizationController.propertyConfigs);
+        const titleProperty = getEntityTitlePropertyKeyForEntity(collection, usedEntity.values, usedEntity.id);
         const titleValue = titleProperty ? getValueInPath(usedEntity.values, titleProperty) : undefined;
         const displayValue = titleValue !== undefined && titleValue !== null ? String(titleValue) : String(relation.id);
         return <span className="truncate">{displayValue}</span>;

package/src/preview/components/UserPreview.tsx

@@ -3,19 +3,28 @@ import type { StringProperty } from "@rebasepro/types";
 import React from "react";
 import { EmptyValue } from "./EmptyValue";
 import { Typography } from "@rebasepro/ui";
+import { getUserLabel, useResolvedUser } from "../../hooks/useResolvedUsers";
 
 /**
  * Preview component for displaying a user reference value.
  *
- * Shows the raw user ID. Collection-based user management means
- * user records are fetched through the standard data layer.
+ * Resolves the stored auth user id to a name (or email) the same way a
+ * relation resolves its target, and falls back to the raw id only while the
+ * lookup is in flight or when the user cannot be resolved.
  *
  * @group Preview components
  */
 export function UserPreview({ value }: PropertyPreviewProps<StringProperty>) {
-    if (typeof value !== "string" || !value) {
+    const uid = typeof value === "string" && value ? value : undefined;
+    const user = useResolvedUser(uid);
+
+    if (!uid) {
         return <EmptyValue/>;
     }
 
-    return <Typography variant={"caption"} color={"secondary"}>{value}</Typography>;
+    return <Typography variant={"caption"}
+        color={"secondary"}
+        className={"truncate"}>
+        {user ? getUserLabel(user) : uid}
+    </Typography>;
 }

package/src/preview/property_previews/StringPropertyPreview.tsx

@@ -15,7 +15,8 @@ export function StringPropertyPreview({
     propertyKey,
     value,
     property,
-    size
+    size,
+    textOnly
 }: PropertyPreviewProps<StringProperty>): React.ReactElement {
 
     const strValue = value as string;
@@ -44,14 +45,19 @@ export function StringPropertyPreview({
         );
     } else {
         if (!strValue) return <></>;
-        const lines = strValue.split("\n");
-        return strValue && strValue.includes("\n")
-            ? <div className={cls("overflow-x-scroll overflow-hidden", size === "small" ? "text-sm" : "")}>
-                {lines.map((str: any, index: number) =>
-                    <React.Fragment key={`string_preview_${index}`}>
-                        <span>{str}</span>
-                        {index !== lines.length - 1 && <br/>}
-                    </React.Fragment>)}
+        // When used as a title/subtitle (textOnly), collapse newlines so the
+        // parent `truncate` can clamp it to a single line.
+        if (textOnly) {
+            const singleLine = strValue.replace(/\s*\n\s*/g, " ");
+            return size === "small"
+                ? <span className={"text-sm"}>{singleLine}</span>
+                : <>{singleLine}</>;
+        }
+        return strValue.includes("\n")
+            ? <div className={cls(
+                "whitespace-pre-line line-clamp-3 overflow-hidden",
+                size === "small" ? "text-sm" : "")}>
+                {strValue}
             </div>
             : (size === "small"
                 ? <span className={"text-sm"}>{strValue}</span>

package/src/util/previews.ts

@@ -1,6 +1,6 @@
 import type { CollectionConfig, Property, PropertyConfig } from "@rebasepro/types";
 import { AuthController } from "@rebasepro/types";
-import { isPropertyBuilder } from "@rebasepro/common";
+import { getTitlePropertyKey, getTitlePropertyKeyForValues, isPropertyBuilder } from "@rebasepro/common";
 import { isReferenceProperty, isRelationProperty } from "./property_utils";
 
 function isHiddenProperty(property: Property | undefined): boolean {
@@ -58,54 +58,43 @@ export function getEntityPreviewKeys(
     }
 }
 
+/**
+ * The property that fills the title slot for a collection.
+ *
+ * Ranking lives in `@rebasepro/common` so every surface (list rows, cards,
+ * board cards, detail header, relation chips) agrees on what an entity is
+ * called. Identifiers are excluded from the property *schema* — primary keys,
+ * foreign keys, UUID columns — not from the key name.
+ */
 export function getEntityTitlePropertyKey<M extends Record<string, unknown>>(collection: CollectionConfig<M>, propertyConfigs: Record<string, PropertyConfig>): string | undefined {
-    if (collection.titleProperty) {
-        return collection.titleProperty as string;
-    }
-
-    const hasExplicitOrder = !!(collection.propertiesOrder as string[] | undefined);
-    const orderToSearch = (collection.propertiesOrder as string[]) || Object.keys(collection.properties);
-
-    // If explicit propertiesOrder is set, allow the first non-ID relation or string to be the titleKey.
-    // Storage/image properties are excluded — they are rendered by the dedicated image slot,
-    // so using one here would duplicate the same image in both the image and title slots.
-    if (hasExplicitOrder) {
-        for (const key of orderToSearch) {
-            const property = collection.properties[key];
-            if (property && !isPropertyBuilder(property)) {
-                const prop = property as Property;
-                const isIdProp = prop && typeof prop === "object" && "isId" in prop && Boolean((prop as { isId?: boolean }).isId);
-                if (isIdProp || key === "id" || isHiddenProperty(prop)) {
-                    continue;
-                }
-                if (prop.type === "relation" || (prop.type === "string" && !isStorageProperty(prop))) {
-                    return key;
-                }
-            }
-        }
-    }
+    return getTitlePropertyKey(collection);
+}
 
-    let firstStringCandidate: string | undefined;
+/**
+ * Same as {@link getEntityTitlePropertyKey}, but skips candidates that carry
+ * no readable value for this particular entity (empty, or an opaque id).
+ */
+export function getEntityTitlePropertyKeyForEntity<M extends Record<string, unknown>>(
+    collection: CollectionConfig<M>,
+    values: Record<string, unknown> | undefined,
+    entityId?: string | number
+): string | undefined {
+    return getTitlePropertyKeyForValues(collection, values, entityId);
+}
 
-    for (const key of orderToSearch) {
-        const property = collection.properties[key];
-        if (property && !isPropertyBuilder(property)) {
-            const prop = property as Property;
-            if (isHiddenProperty(prop)) {
-                continue;
-            }
-            if (prop.type === "string" && !prop.ui?.multiline && !prop.ui?.markdown && !prop.storage && !prop.isId) {
-                if (!firstStringCandidate) {
-                    firstStringCandidate = key;
-                }
-                const lowerKey = key.toLowerCase();
-                if (["name", "title", "label", "displayname", "username"].includes(lowerKey)) {
-                    return key; // Immediate return if it's a strong title candidate
-                }
-            }
-        }
-    }
-    return firstStringCandidate;
+/**
+ * True when a property key points at a user picker, whose stored value is an
+ * auth user id that has to be resolved before it can be displayed.
+ */
+export function isUserSelectProperty<M extends Record<string, unknown>>(
+    collection: CollectionConfig<M>,
+    propertyKey: string | undefined
+): boolean {
+    if (!propertyKey) return false;
+    const property = collection.properties[propertyKey];
+    if (!property || isPropertyBuilder(property)) return false;
+    const prop = property as Property;
+    return prop.type === "string" && Boolean(prop.userSelect);
 }
 
 /**