@rebasepro/admin 0.12.1-canary.gf5f1d39 → 0.13.0

package/src/hooks/useBuildSidePanel.tsx

@@ -4,11 +4,11 @@ import type { CustomizationController, SidePanelBindingProps, SideDialogPanelPro
 import { useCallback, useEffect, useRef, useMemo } from "react";
 import { CollectionRegistryController } from "@rebasepro/types";
 import { AuthController } from "@rebasepro/admin-types";
-import { useLocation } from "react-router-dom";
+import { useLocation } from "react-router";
 import { NavigationViewInternal } from "@rebasepro/app";
 import { getNavigationEntriesFromPath, removeInitialAndTrailingSlashes, removeTrailingSlash, resolveDefaultSelectedView } from "@rebasepro/app";
 import { resolvedSelectedEntityView } from "../util/resolutions";
-import { ADDITIONAL_TAB_WIDTH, CONTAINER_FULL_WIDTH, FORM_CONTAINER_WIDTH } from "@rebasepro/app";
+import { CONTAINER_FULL_WIDTH, SIDE_PANEL_DEFAULT_WIDTH } from "@rebasepro/app";
 import { useCustomizationController, useLargeLayout, useComponentOverride, CollectionScopeProvider } from "@rebasepro/app";
 import { JSON_TAB_VALUE, HISTORY_TAB_VALUE } from "../components/EditViewBinding";
 import React from "react";
@@ -39,71 +39,32 @@ function ResolvedSidePanelBinding(props: SidePanelBindingProps) {
 const NEW_URL_HASH = "new_side";
 const SIDE_URL_HASH = "side";
 
+/**
+ * How wide the side panel opens.
+ *
+ * One width for the whole panel, whatever tab is showing. It used to depend on
+ * the selected tab — the form got one width and a subcollection or custom view
+ * got `calc(55vw + 768px)` — so the panel physically resized under the cursor
+ * every time you switched tabs. And the "form" width was derived from how
+ * deeply nested the collection's *properties* were, which is not a thing anyone
+ * can predict from looking at the panel.
+ *
+ * Now: `width` prop, then the collection's `sideDialogWidth`, then a default
+ * sized for the content the panel actually has to hold — the form column plus
+ * its metadata rail — capped so it never eats the whole window.
+ */
 export function getEntityViewWidth(props: SidePanelBindingProps<any>, small: boolean, customizationController: CustomizationController): string {
     if (small) return CONTAINER_FULL_WIDTH;
 
-    const {
-        selectedSecondaryForm
-    } = resolvedSelectedEntityView(props.collection?.entityViews, customizationController, props.selectedTab);
-
-    const shouldUseSmallLayout = !props.selectedTab || props.selectedTab === "edit" || props.selectedTab === JSON_TAB_VALUE || props.selectedTab === HISTORY_TAB_VALUE || Boolean(selectedSecondaryForm);
-
-    let resolvedWidth: string | undefined;
     if (props.width) {
-        resolvedWidth = typeof props.width === "number" ? `${props.width}px` : props.width;
-    } else if (props.collection?.sideDialogWidth) {
-        resolvedWidth = typeof props.collection.sideDialogWidth === "number" ? `${props.collection.sideDialogWidth}px` : props.collection.sideDialogWidth;
+        return typeof props.width === "number" ? `${props.width}px` : props.width;
     }
-
-    if (!shouldUseSmallLayout) {
-        return `calc(${ADDITIONAL_TAB_WIDTH} + ${resolvedWidth ?? FORM_CONTAINER_WIDTH})`
-    } else {
-        if (resolvedWidth) {
-            return resolvedWidth
-        } else if (!props.collection) {
-            return FORM_CONTAINER_WIDTH;
-        } else {
-            return calculateCollectionDesiredWidth(props.collection);
-        }
-    }
-}
-
-const collectionViewWidthCache: { [key: string]: string } = {};
-
-function calculateCollectionDesiredWidth(collection: AdminCollection<any>): string {
-    if (collectionViewWidthCache[collection.slug]) {
-        return collectionViewWidthCache[collection.slug];
-    }
-
-    let result = FORM_CONTAINER_WIDTH
-    if (collection?.properties) {
-        const values = Object.values(collection.properties).map((p: Property) => getNestedPropertiesDepth(p));
-        const maxDepth = Math.max(...values);
-        if (maxDepth < 3) {
-            result = FORM_CONTAINER_WIDTH;
-        } else {
-            result = 768 + 32 * (maxDepth - 2) + "px";
-        }
-    }
-    collectionViewWidthCache[collection.slug] = result;
-    return result;
-}
-
-function getNestedPropertiesDepth(property: Property, accumulator = 0): number {
-    if (property.type === "map" && property.properties) {
-        const values = Object.values(property.properties).flatMap((childProperty) => getNestedPropertiesDepth(childProperty as Readonly<Property>, accumulator + 1));
-        return Math.max(...values);
-    } else if (property.type === "array" && property.oneOf) {
-        return accumulator + 3;
-    } else if (property.type === "array" && property.of) {
-        if (Array.isArray(property.of)) {
-            return Math.max(...property.of.map((p) => getNestedPropertiesDepth(p, accumulator + 1)));
-        } else {
-            return getNestedPropertiesDepth(property.of, accumulator + 1);
-        }
-    } else {
-        return accumulator + 1;
+    if (props.collection?.sideDialogWidth) {
+        return typeof props.collection.sideDialogWidth === "number"
+            ? `${props.collection.sideDialogWidth}px`
+            : props.collection.sideDialogWidth;
     }
+    return SIDE_PANEL_DEFAULT_WIDTH;
 }
 
 export const useBuildSidePanel = (collectionRegistryController: CollectionRegistryController,

package/src/hooks/useEntityDisplayTitle.tsx

@@ -0,0 +1,60 @@
+import type { AdminCollection } from "@rebasepro/admin-types";
+import type { EntityStatus } from "@rebasepro/types";
+import { getValueInPath } from "@rebasepro/utils";
+import { getEntityTitlePropertyKeyForEntity, isUserSelectProperty, resolveTitleToString } from "../util/previews";
+import { getUserLabel, useResolvedUser } from "./useResolvedUsers";
+
+export interface UseEntityDisplayTitleParams<M extends Record<string, unknown>> {
+    collection: AdminCollection<M>;
+    values?: Record<string, unknown>;
+    entityId?: string | number;
+    status: EntityStatus;
+}
+
+/**
+ * The human name for a record, for the identity bar and the breadcrumb.
+ *
+ * The guard on `status` is the point. The title resolver walks candidate
+ * properties and returns the first non-empty one, and on a brand new entity the
+ * only populated values are the property defaults — so creating a blog post
+ * opened a page headed **draft**, the default of its `status` enum. A record
+ * that does not exist yet has no name; it has an intent.
+ */
+export function useEntityDisplayTitle<M extends Record<string, unknown>>({
+    collection,
+    values,
+    entityId,
+    status
+}: UseEntityDisplayTitleParams<M>): string {
+
+    const isNew = status === "new";
+
+    const titlePropertyKey = getEntityTitlePropertyKeyForEntity(collection, values, entityId);
+    const rawTitle = !isNew && values && titlePropertyKey
+        ? getValueInPath(values, titlePropertyKey)
+        : undefined;
+
+    // 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 singular = collection.singularName ?? collection.name;
+
+    if (isNew) {
+        return `New ${singular.toLowerCase()}`;
+    }
+
+    if (titleUser) {
+        return getUserLabel(titleUser);
+    }
+
+    if (rawTitle !== undefined && rawTitle !== null) {
+        const resolved = resolveTitleToString(rawTitle);
+        if (resolved) return resolved;
+    }
+
+    return singular;
+}

package/src/hooks/useHistory.ts

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef, useState, useMemo } from "react";
-import { useApiConfig } from "@rebasepro/app";
+import { useApiBase, useApiConfig } from "@rebasepro/app";
 import type { EntityHistoryEntry } from "@rebasepro/types";
 
 /**
@@ -28,9 +28,17 @@ export function useHistory(params: {
     entityId: string | number | undefined;
     enabled?: boolean;
     pageSize?: number;
+    /**
+     * Bumped by the caller when the record is saved. A save is the one event
+     * that adds a revision, and nothing else here would notice it: without
+     * this the open panel keeps showing the list it fetched when it opened,
+     * so the revision you just created never appears.
+     */
+    refreshToken?: number;
 }): UseEntityHistoryResult {
-    const { slug, entityId, enabled = true, pageSize = 10 } = params;
+    const { slug, entityId, enabled = true, pageSize = 10, refreshToken } = params;
     const apiConfig = useApiConfig();
+    const apiBase = useApiBase();
 
     const [entries, setEntries] = useState<HistoryEntryData[]>([]);
     const [total, setTotal] = useState(0);
@@ -40,7 +48,11 @@ export function useHistory(params: {
     const [offset, setOffset] = useState(0);
     const [refreshTrigger, setRefreshTrigger] = useState(0);
 
-    // Track the current entity identity so we can detect stale responses
+    // Track the current entity identity so we can detect stale responses.
+    // `refreshToken` is part of the identity on purpose: a save makes the list
+    // we are holding a stale page of a longer list, which is the same problem
+    // as having moved to a different record.
+    const entityKey = `${slug}/${entityId}/${refreshToken ?? 0}`;
     const currentEntityRef = useRef<string | undefined>(undefined);
 
     const fetchEntries = useCallback(async (
@@ -59,13 +71,12 @@ export function useHistory(params: {
             };
             if (token) headers["Authorization"] = `Bearer ${token}`;
 
-            const url = `${apiConfig.apiUrl}/api/data/${slug}/${entityId}/history?limit=${pageSize}&offset=${currentOffset}`;
+            const url = `${apiBase}/data/${slug}/${entityId}/history?limit=${pageSize}&offset=${currentOffset}`;
             const response = await fetch(url, { headers,
 signal });
 
             // Check if the request was aborted or the entity changed while in-flight
             if (signal?.aborted) return;
-            const entityKey = `${slug}/${entityId}`;
             if (currentEntityRef.current !== entityKey) return;
 
             if (!response.ok) {
@@ -90,12 +101,11 @@ signal });
         } finally {
             setIsLoading(false);
         }
-    }, [apiConfig, slug, entityId, enabled, pageSize]);
+    }, [apiConfig, apiBase, slug, entityId, entityKey, enabled, pageSize]);
 
     // Single unified effect: reset state when entity changes, fetch when offset changes.
     // Uses AbortController to cancel stale requests on entity change or unmount.
     useEffect(() => {
-        const entityKey = `${slug}/${entityId}`;
         const isNewEntity = currentEntityRef.current !== entityKey;
 
         if (isNewEntity) {
@@ -117,7 +127,7 @@ signal });
         return () => {
             abortController.abort();
         };
-    }, [fetchEntries, offset, enabled, entityId, slug, refreshTrigger]);
+    }, [fetchEntries, offset, enabled, entityId, entityKey, refreshTrigger]);
 
     const loadMore = useCallback(() => {
         if (!isLoading && hasMore && offset + entries.length < total) {
@@ -136,7 +146,7 @@ signal });
         };
         if (token) headers["Authorization"] = `Bearer ${token}`;
 
-        const url = `${apiConfig.apiUrl}/api/data/${slug}/${entityId}/history/${historyId}/revert`;
+        const url = `${apiBase}/data/${slug}/${entityId}/history/${historyId}/revert`;
         const response = await fetch(url, { method: "POST",
 headers });
 
@@ -154,7 +164,7 @@ headers });
 
         // Return the reverted entity data so callers can update the form
         return result.data as Record<string, unknown>;
-    }, [apiConfig, slug, entityId]);
+    }, [apiConfig, apiBase, slug, entityId]);
 
     return useMemo(() => ({
         entries,

package/src/hooks/useRecordActions.tsx

@@ -0,0 +1,69 @@
+import type { EntityAction, AdminCollection } from "@rebasepro/admin-types";
+import type { Entity } from "@rebasepro/types";
+import { useMemo } from "react";
+import { useCustomizationController, usePermissions } from "@rebasepro/app";
+import { copyEntityAction, deleteEntityAction, unlinkEntityAction } from "../components/common/default_entity_actions";
+import { mergeEntityActions } from "../util/entity_actions";
+import { resolveEntityAction } from "../util/resolutions";
+import { useChildViewSource } from "./useChildViewSource";
+
+export interface UseRecordActionsParams<M extends Record<string, unknown>> {
+    collection: AdminCollection<M>;
+    path: string;
+    entity?: Entity<M>;
+}
+
+/**
+ * The actions you can perform *on* a record — copy, delete, and whatever the
+ * collection adds — resolved against the current user's permissions.
+ *
+ * Extracted from the form's footer so the identity bar can own them. They are
+ * not ways to leave the form, so they never belonged next to Save; putting them
+ * in the bar's overflow menu is what let the footer disappear instead of
+ * becoming a full-width strip holding two icon buttons.
+ */
+export function useRecordActions<M extends Record<string, unknown>>({
+    collection,
+    path,
+    entity
+}: UseRecordActionsParams<M>): EntityAction[] {
+
+    const { canCreate, canDelete } = usePermissions();
+    const customizationController = useCustomizationController();
+
+    // Rows shared through a junction: the delete action here removes the link,
+    // because that is what the server does for this path.
+    const childViewSource = useChildViewSource(path);
+    const isLinkedChildView = childViewSource?.kind === "relation" && childViewSource.mode === "linked";
+
+    return useMemo((): EntityAction[] => {
+        const customEntityActions = (collection.entityActions ?? [])
+            .map(action => resolveEntityAction(action, customizationController.entityActions))
+            .filter(Boolean) as EntityAction[];
+
+        const createEnabled = canCreate(collection, path);
+        const deleteEnabled = entity ? canDelete(collection, path, entity) : false;
+        const disableActions = collection.disableDefaultActions ?? [];
+
+        const actions: EntityAction[] = [];
+        if (createEnabled && !disableActions.includes("copy"))
+            actions.push(copyEntityAction);
+        if (deleteEnabled && !disableActions.includes("delete"))
+            actions.push(isLinkedChildView ? unlinkEntityAction : deleteEntityAction);
+
+        const merged = customEntityActions.length
+            ? mergeEntityActions(actions, customEntityActions)
+            : actions;
+
+        return merged.filter(a => a.includeInForm === undefined || a.includeInForm);
+    }, [
+        canCreate,
+        canDelete,
+        collection,
+        path,
+        customizationController.entityActions?.length,
+        entity,
+        collection.disableDefaultActions,
+        isLinkedChildView
+    ]);
+}

package/src/hooks/useResolvedUsers.ts

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import type { User } from "@rebasepro/types";
-import { useAuthController, useRebaseClient } from "@rebasepro/app";
+import { apiBaseOf, useAuthController, useRebaseClient } from "@rebasepro/app";
 
 /**
  * Resolves the auth users behind `userSelect` values.
@@ -31,12 +31,14 @@ queue: new Set() };
     return cache;
 }
 
-async function fetchUsers(baseUrl: string, ids: string[], token: string | undefined): Promise<Map<string, User | null>> {
+async function fetchUsers(apiBase: 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}`, {
+    // Same route as the selector — see the note there; `/api/users` is a 404,
+    // so every `userSelect` value rendered as a bare id.
+    const response = await fetch(`${apiBase}/admin/users?${params}`, {
         headers: token ? { Authorization: `Bearer ${token}` } : {}
     });
     if (!response.ok) {
@@ -103,9 +105,12 @@ function requestUser(
  * when it cannot be resolved.
  */
 export function useResolvedUser(uid: string | undefined): User | null {
-    const client = useRebaseClient<{ baseUrl?: string }>();
+    const client = useRebaseClient<{ baseUrl?: string, apiPath?: string }>();
     const { getAuthToken } = useAuthController();
-    const baseUrl = client?.baseUrl;
+    /* The API prefix, not the bare origin: it keys the cache and is what a
+       request is built from, and a backend with a non-default `basePath`
+       serves neither at `/api`. */
+    const baseUrl = apiBaseOf(client);
 
     const [user, setUser] = useState<User | null>(() =>
         (baseUrl && uid) ? getCache(baseUrl).users.get(uid) ?? null : null);

package/src/preview/PropertyPreview.tsx

@@ -25,6 +25,8 @@ import { BooleanPreview } from "./components/BooleanPreview";
 import { NumberPropertyPreview } from "./property_previews/NumberPropertyPreview";
 import { ErrorView } from "@rebasepro/app";
 import { RelationPreview } from "./components/RelationPreview";
+import { InlineEntityListPreview } from "./components/InlineEntityListPreview";
+import { useIsNestedEntityPreview } from "../components/EntityPreviewNesting";
 import { UserPreview } from "./components/UserPreview";
 
 /**
@@ -34,6 +36,7 @@ export const PropertyPreview = React.memo(function PropertyPreview<P extends Pro
 
     const authController = useAuthController();
     const customizationController = useCustomizationController();
+    const nested = useIsNestedEntityPreview();
 
     let content: React.ReactNode | any;
     const {
@@ -181,9 +184,15 @@ export const PropertyPreview = React.memo(function PropertyPreview<P extends Pro
             content = buildWrongValueType(propertyKey, property.type, value);
         }
     } else if (property.type === "date") {
-        if (value instanceof Date) {
+        // Not every caller comes through the data layer's Date coercion: the
+        // revision history renders raw API payloads, where a timestamp is still
+        // the string Postgres sent (`2026-06-19 17:20:33.032+02`). Requiring a
+        // `Date` instance turned every audit column in every history entry into
+        // a red "Unexpected value" box.
+        const date = asDate(value);
+        if (date) {
             content = <DatePreview
-                date={value}
+                date={date}
                 mode={property.mode}
             />;
         } else {
@@ -213,28 +222,34 @@ export const PropertyPreview = React.memo(function PropertyPreview<P extends Pro
             content = <EmptyValue/>;
         } else if (Array.isArray(value)) {
             // Many-cardinality relation: value is an array of EntityRelation (or plain objects)
-            content = (
-                <div className="flex flex-col w-full gap-0.5">
-                    {(value as unknown[]).map((item: unknown, index: number) => {
-                        const entityRelation = normalizeToEntityRelation(item, "relation");
-                        if (!entityRelation) return null;
-                        return (
+            const relations = (value as unknown[])
+                .map(item => normalizeToEntityRelation(item, "relation"))
+                .filter(Boolean) as EntityRelation[];
+            const renderRelation = (entityRelation: EntityRelation, index: number) => <RelationPreview
+                key={`preview_rel_${propertyKey}_${index}`}
+                disabled={!property.relation}
+                previewProperties={property.admin?.previewProperties}
+                includeId={property.admin?.includeId}
+                includeEntityLink={property.admin?.includeEntityLink}
+                size={"small"}
+                relation={entityRelation}
+                textOnly={props.textOnly}
+            />;
+
+            content = nested || props.textOnly
+                // See ArrayOfReferencesPreview: nested lists stay on one line.
+                ? <InlineEntityListPreview items={relations}
+                    renderItem={renderRelation}/>
+                : (
+                    <div className="flex flex-col w-full gap-0.5">
+                        {relations.map((entityRelation, index) => (
                             <div className="w-full"
-                                key={`preview_rel_${propertyKey}_${index}`}>
-                                <RelationPreview
-                                    disabled={!property.relation}
-                                    previewProperties={property.admin?.previewProperties}
-                                    includeId={property.admin?.includeId}
-                                    includeEntityLink={property.admin?.includeEntityLink}
-                                    size={"small"}
-                                    relation={entityRelation}
-                                    textOnly={props.textOnly}
-                                />
+                                key={`preview_rel_wrapper_${propertyKey}_${index}`}>
+                                {renderRelation(entityRelation, index)}
                             </div>
-                        );
-                    })}
-                </div>
-            );
+                        ))}
+                    </div>
+                );
         } else {
             // Single-cardinality relation
             const relationValue = normalizeToEntityRelation(value, "relation");
@@ -276,6 +291,17 @@ export const PropertyPreview = React.memo(function PropertyPreview<P extends Pro
         : content;
 }, equal);
 
+/**
+ * A `Date`, or a string/number that unambiguously names one. Returns null for
+ * anything else, so an actual type mismatch still reports as one.
+ */
+function asDate(value: unknown): Date | null {
+    if (value instanceof Date) return isNaN(value.getTime()) ? null : value;
+    if (typeof value !== "string" && typeof value !== "number") return null;
+    const parsed = new Date(value);
+    return isNaN(parsed.getTime()) ? null : parsed;
+}
+
 function buildWrongValueType(name: string | undefined, type: string, value: any) {
     console.warn(`Unexpected value for property ${name}, of type ${type}`, value);
     return (

package/src/preview/components/InlineEntityListPreview.tsx

@@ -0,0 +1,42 @@
+import * as React from "react";
+
+import { cls } from "@rebasepro/ui";
+
+/**
+ * How many links a nested list shows before collapsing the rest into a count.
+ */
+const MAX_INLINE_ITEMS = 3;
+
+export type InlineEntityListPreviewProps<T> = {
+    items: T[];
+    renderItem: (item: T, index: number) => React.ReactNode;
+    max?: number;
+    className?: string;
+};
+
+/**
+ * One wrapping line of inline entity links, with the overflow collapsed into a
+ * `+N`. Used for arrays of references or relations that are nested inside
+ * another preview, where stacking full-width cards turns a card into a wall.
+ *
+ * @group Preview components
+ */
+export function InlineEntityListPreview<T>({
+    items,
+    renderItem,
+    max = MAX_INLINE_ITEMS,
+    className
+}: InlineEntityListPreviewProps<T>) {
+
+    if (!items || items.length === 0) return null;
+
+    const shown = items.slice(0, max);
+    const overflow = items.length - shown.length;
+
+    return <span className={cls("inline-flex flex-wrap items-center gap-x-2 gap-y-0.5 min-w-0 max-w-full", className)}>
+        {shown.map((item, index) => renderItem(item, index))}
+        {overflow > 0 && <span className={"text-text-secondary dark:text-text-secondary-dark shrink-0"}>
+            +{overflow}
+        </span>}
+    </span>;
+}

package/src/preview/components/ReferencePreview.tsx

@@ -8,9 +8,13 @@ import { Skeleton } from "@rebasepro/ui";
 import { ErrorBoundary } from "@rebasepro/ui";
 import { ErrorView } from "@rebasepro/app";
 import { EntityPreviewBinding, EntityPreviewContainer } from "../../components/EntityPreviewBinding";
+import {
+    InlineEntityPreview,
+    InlineEntityPreviewMissing,
+    InlineEntityPreviewSkeleton
+} from "../../components/InlineEntityPreview";
+import { useIsNestedEntityPreview } from "../../components/EntityPreviewNesting";
 import { useCollectionRegistryController } from "../../hooks/navigation/contexts/CollectionRegistryContext";
-import { getEntityTitlePropertyKeyForEntity } from "../../util/previews";
-import { getValueInPath } from "@rebasepro/utils";
 import type { AdminCollection } from "@rebasepro/admin-types";
 
 export type ReferencePreviewProps = {
@@ -30,9 +34,10 @@ export type ReferencePreviewProps = {
  */
 export const ReferencePreview = function ReferencePreview(props: ReferencePreviewProps) {
     const reference = props.reference;
+    const nested = useIsNestedEntityPreview();
     if (!(typeof reference === "object" && "isEntityReference" in reference && reference.isEntityReference())) {
         console.warn("Reference preview received value of type", typeof reference);
-        if (props.textOnly) {
+        if (props.textOnly || nested) {
             return <span>{String(reference)}</span>;
         }
         return <EntityPreviewContainer
@@ -62,6 +67,7 @@ function ReferencePreviewInternalInner({
     collection
 }: ReferencePreviewProps & { collection?: AdminCollection }) {
     const ResolvedMissingReference = useComponentOverride("Entity.MissingReference", DefaultMissingReference);
+    const nested = useIsNestedEntityPreview();
 
     if (!collection) {
         if (ResolvedMissingReference !== DefaultMissingReference) {
@@ -70,6 +76,10 @@ function ReferencePreviewInternalInner({
             if (textOnly) {
                 return <span>{reference.path}</span>;
             }
+            if (nested) {
+                return <InlineEntityPreviewMissing label={String(reference.id)}
+                    tooltip={`Collection not found: ${reference.path}`}/>;
+            }
             return <EntityPreviewContainer
                 onClick={onClick}
                 size={size ?? "medium"}>
@@ -130,6 +140,11 @@ function ReferencePreviewExisting<M extends Record<string, unknown> = Record<str
 
     const ResolvedEntityPreview = useComponentOverride("EntityPreview", EntityPreviewBinding);
     const customizationController = useCustomizationController();
+    const nested = useIsNestedEntityPreview();
+
+    // Nested inside another preview, or filling a title slot: one line of text,
+    // not a second card. See {@link InlineEntityPreview}.
+    const inline = nested || Boolean(textOnly);
 
     const {
         entity,
@@ -157,8 +172,9 @@ function ReferencePreviewExisting<M extends Record<string, unknown> = Record<str
             tooltip={reference.path}/>;
     }
     if (body) {
-        if (textOnly) {
-            return <span>{reference.id}</span>;
+        if (inline) {
+            return <InlineEntityPreviewMissing label={String(reference.id)}
+                tooltip={reference.pathWithId}/>;
         }
 
         return (
@@ -171,8 +187,8 @@ function ReferencePreviewExisting<M extends Record<string, unknown> = Record<str
     }
 
     if (dataLoading && !usedEntity) {
-        if (textOnly) {
-            return <Skeleton className="inline-block w-20 h-4" />;
+        if (inline) {
+            return <InlineEntityPreviewSkeleton/>;
         }
         return (
             <EntityPreviewContainer onClick={disabled ? undefined : onClick}
@@ -184,8 +200,9 @@ function ReferencePreviewExisting<M extends Record<string, unknown> = Record<str
     }
 
     if (!usedEntity) {
-        if (textOnly) {
-            return <span>{reference.id}</span>;
+        if (inline) {
+            return <InlineEntityPreviewMissing label={String(reference.id)}
+                tooltip={"Entity not found"}/>;
         }
         return (
             <EntityPreviewContainer onClick={disabled ? undefined : onClick}
@@ -196,11 +213,14 @@ function ReferencePreviewExisting<M extends Record<string, unknown> = Record<str
         );
     }
 
-    if (textOnly) {
-        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>;
+    if (inline) {
+        return <InlineEntityPreview entity={usedEntity}
+            collection={collection}
+            disabled={disabled}
+            onClick={onClick}
+            // In a title slot the row itself is the click target; only a
+            // preview nested inside a card opens its own side panel.
+            includeEntityLink={!textOnly && includeEntityLink !== false}/>;
     }
 
     return <ResolvedEntityPreview size={size}