@rebasepro/admin 0.4.0 → 0.6.0

package/src/form/field_bindings/VectorFieldBinding.tsx

@@ -41,8 +41,8 @@ export function VectorFieldBinding({
     };
 
     // Extract array value from the custom { __type: "Vector", value: number[] } wrapper
-    const arrayValue = isVectorObject(value) 
-        ? value.value 
+    const arrayValue = isVectorObject(value)
+        ? value.value
         : (Array.isArray(value) ? value : []);
 
     const [textValue, setTextValue] = useState(() => arrayValue.join(", "));
@@ -108,7 +108,7 @@ export function VectorFieldBinding({
                             <div className="flex items-center justify-between flex-wrap gap-2">
                                 <div className="flex items-center gap-2.5">
                                     {/* Status Dot */}
-                                    <div className={`w-2.5 h-2.5 rounded-full ${isPopulated ? 'bg-emerald-500 animate-pulse' : 'bg-surface-300 dark:bg-surface-600'}`} />
+                                    <div className={`w-2.5 h-2.5 rounded-full ${isPopulated ? "bg-emerald-500 animate-pulse" : "bg-surface-300 dark:bg-surface-600"}`} />
                                     <span className="text-sm font-semibold text-text-primary dark:text-text-primary-dark">
                                         {isPopulated ? `${arrayValue.length} Dimensions` : "Empty Vector"}
                                     </span>

package/src/form/validation.ts

@@ -229,7 +229,7 @@ function getZodNumberSchema({
             const n = Number(val);
             return isNaN(n) ? val : n; // pass through non-numeric to let refine catch it
         },
-        z.number({ invalid_type_error: "Must be a number" }).nullable()
+        z.number({ error: "Must be a number" }).nullable()
     );
 
     const isRequired = validation?.required || property.isId === true || property.isId === "manual";
@@ -446,17 +446,19 @@ function getZodArraySchema({
             });
             arraySchema = z.array(
                 z.any().superRefine(async (object, ctx) => {
-                    // Find the matching schema from zodProperties based on the path
-                    const parentPath = ctx.path.slice(0, -1).join(".");
-                    const index = ctx.path[ctx.path.length - 1];
-                    const key = parentPath ? `${parentPath}[${index}]` : `${name}[${index}]`;
-                    const zodProperty = getValueInPath(zodProperties, key) as ZodTypeAny | undefined;
-                    if (zodProperty) {
-                        const result = await zodProperty.safeParseAsync(object);
-                        if (!result.success) {
-                            result.error.issues.forEach((issue) => {
-                                ctx.addIssue(issue);
-                            });
+                    // In Zod v4, ctx.path is not available in superRefine.
+                    // Instead, iterate all zodProperties and validate against each.
+                    for (const [key, zodProperty] of Object.entries(zodProperties)) {
+                        if (zodProperty) {
+                            const result = await (zodProperty as ZodTypeAny).safeParseAsync(object);
+                            if (!result.success) {
+                                result.error.issues.forEach((issue) => {
+                                    ctx.addIssue({
+                                        code: "custom",
+                                        message: issue.message
+                                    });
+                                });
+                            }
                         }
                     }
                 })
@@ -537,21 +539,21 @@ function getZodVectorSchema({
         },
         z.array(z.number()).nullable().optional()
     );
-    
+
     if (property.dimensions) {
         schema = schema.refine(
             (val: unknown) => val === null || val === undefined || (Array.isArray(val) && val.length === property.dimensions),
             { message: `${property.name ?? "Vector"} must have exactly ${property.dimensions} dimensions` }
         );
     }
-    
+
     if (property.validation?.required) {
         schema = schema.refine(
             (val: unknown) => val !== null && val !== undefined && Array.isArray(val) && val.length > 0,
             { message: property.validation?.requiredMessage ?? "Required" }
         );
     }
-    
+
     return schema;
 }
 

package/src/hooks/navigation/useBuildNavigationStateController.tsx

@@ -5,7 +5,6 @@ import { AuthController, RebaseData, CollectionRegistryController, User } from "
 import type { EntityCollectionsBuilder, AppViewsBuilder, EffectiveRoleController } from "@rebasepro/types";
 import { CollectionRegistry } from "@rebasepro/common";
 
-import { UserManagementDelegate } from "@rebasepro/types";
 
 import { useResolvedCollections } from "./useResolvedCollections";
 import { useResolvedViews } from "./useResolvedViews";
@@ -25,7 +24,7 @@ export type BuildNavigationStateProps<EC extends EntityCollection, USER extends
     urlController: UrlController;
     adminMode?: "content" | "studio" | "settings";
     effectiveRoleController?: EffectiveRoleController;
-    userManagement?: UserManagementDelegate<USER>;
+
 };
 
 /**
@@ -55,8 +54,7 @@ export function useBuildNavigationStateController<EC extends EntityCollection, U
         collectionRegistryController,
         urlController,
         adminMode = "content",
-        effectiveRoleController,
-        userManagement
+        effectiveRoleController
     } = props;
 
     const {
@@ -70,8 +68,7 @@ export function useBuildNavigationStateController<EC extends EntityCollection, U
         data,
         plugins,
         disabled,
-        collectionRegistryController,
-        userManagement
+        collectionRegistryController
     });
 
     const {

package/src/hooks/navigation/useNavigationResolution.ts

@@ -1,36 +1,157 @@
-import type { AppView, AppViewsBuilder, EntityCollection, FirebaseCollection, RebasePlugin } from "@rebasepro/types";
-import { AuthController, DataDriver, User, RebaseData } from "@rebasepro/types";
-import type { EntityCollectionsBuilder } from "@rebasepro/types";
+import type {
+    AppView,
+    AppViewsBuilder,
+    AuthCollectionConfig,
+    EntityAction,
+    EntityCollection,
+    EntityCollectionsBuilder,
+    RebaseContext,
+    RebasePlugin,
+    UserCreationResult
+} from "@rebasepro/types";
+import { type AuthController, type User, type RebaseData } from "@rebasepro/types";
 import { canReadCollection } from "@rebasepro/common";
+import { resetPasswordAction } from "../../components/common/default_entity_actions";
+import { CreationResultDialog } from "../../components/admin/CreationResultDialog";
+import React from "react";
 
-export function filterOutNotAllowedCollections(resolvedCollections: EntityCollection[], authController: AuthController<User>): EntityCollection[] {
+/**
+ * Check whether a `RebaseCallContext` is actually the full frontend
+ * `RebaseContext` (which carries `dialogsController`).
+ */
+function isRebaseContext(ctx: unknown): ctx is RebaseContext {
+    return typeof ctx === "object" && ctx !== null && "dialogsController" in ctx;
+}
+
+export function filterOutNotAllowedCollections(resolvedCollections: EntityCollection[], authController: AuthController): EntityCollection[] {
     return resolvedCollections
         .filter((c) => canReadCollection(c, authController))
         .map((c) => {
-            if (!("subcollections" in c) || !c.subcollections) return c;
+            if (!c.childCollections) return c;
             return {
                 ...c,
-                subcollections: () => filterOutNotAllowedCollections((c as FirebaseCollection).subcollections?.() ?? [], authController)
-            } as FirebaseCollection;
+                childCollections: () => filterOutNotAllowedCollections(c.childCollections!() ?? [], authController)
+            };
         });
 }
 
-export function applyPluginModifyCollection(resolvedCollections: EntityCollection[], modifyCollection: (collection: EntityCollection) => EntityCollection) {
-    return resolvedCollections.map((collection: EntityCollection): EntityCollection => {
+export function applyPluginModifyCollection(resolvedCollections: EntityCollection[], modifyCollection: (collection: EntityCollection) => EntityCollection): EntityCollection[] {
+    return resolvedCollections.map((collection): EntityCollection => {
         const modifiedCollection = modifyCollection(collection);
-        if ("subcollections" in modifiedCollection && modifiedCollection.subcollections) {
+        if (modifiedCollection.childCollections) {
             return {
                 ...modifiedCollection,
-                subcollections: () => applyPluginModifyCollection((modifiedCollection as FirebaseCollection).subcollections?.() ?? [], modifyCollection)
-            } as FirebaseCollection;
+                childCollections: () => applyPluginModifyCollection(modifiedCollection.childCollections!() ?? [], modifyCollection)
+            };
         }
         return modifiedCollection;
     });
 }
 
-export async function resolveCollections<U extends User, EC extends EntityCollection>(
-    collections: undefined | EC[] | EntityCollectionsBuilder<EC>,
-    authController: AuthController<U>,
+/**
+ * Auto-inject auth-specific entity actions and callbacks for collections
+ * with `auth: true` or `auth: { enabled: true }`.
+ *
+ * Injections:
+ * 1. **resetPasswordAction** — adds the entity action unless explicitly disabled
+ * 2. **afterSave callback** — shows the `CreationResultDialog` when a new user
+ *    is created with `invitationSent` or `temporaryPassword` in the response
+ *
+ * Skips injection if the collection already has the action/callback present.
+ */
+function injectAuthCollectionConfig(collections: EntityCollection[]): EntityCollection[] {
+    return collections.map((collection) => {
+        const authProp = collection.auth;
+        if (!authProp) return collection;
+
+        const isAuth = authProp === true || (typeof authProp === "object" && authProp.enabled === true);
+        if (!isAuth) return collection;
+
+        const authConfig: AuthCollectionConfig | undefined = typeof authProp === "object" ? authProp : undefined;
+
+        let result = collection;
+
+        // ─── Entity Action injection (resetPassword) ─────────────────────
+        const resetPref = authConfig?.actions?.resetPassword;
+        let actionToInject: EntityAction | undefined;
+
+        if (resetPref === false) {
+            actionToInject = undefined;
+        } else if (typeof resetPref === "object") {
+            actionToInject = resetPref;
+        } else {
+            actionToInject = resetPasswordAction;
+        }
+
+        if (actionToInject) {
+            const injectedAction = actionToInject;
+            const existing = result.entityActions ?? [];
+            const alreadyHas = existing.some(
+                (a) => a.key != null && a.key === injectedAction.key
+            );
+            if (!alreadyHas) {
+                result = {
+                    ...result,
+                    entityActions: [...existing, injectedAction]
+                };
+            }
+        }
+
+        // ─── afterSave callback (creation result dialog) ─────────────────
+        const existingAfterSave = result.callbacks?.afterSave;
+        result = {
+            ...result,
+            callbacks: {
+                ...result.callbacks,
+                afterSave: async (props) => {
+                    await existingAfterSave?.(props);
+
+                    const { values, status, context } = props;
+                    if (status !== "new" && status !== "copy") return;
+
+                    const hasCreationInfo = values.invitationSent !== undefined || values.temporaryPassword !== undefined;
+                    if (!hasCreationInfo || !isRebaseContext(context) || !context.dialogsController) return;
+
+                    const { dialogsController } = context;
+
+                    const creationResult: UserCreationResult = {
+                        user: {
+                            uid: String(props.entityId),
+                            email: typeof values.email === "string" ? values.email : "",
+                            displayName: typeof values.displayName === "string" ? values.displayName : "",
+                            roles: Array.isArray(values.roles) ? values.roles as string[] : [],
+                            photoURL: typeof values.photoURL === "string"
+                                ? values.photoURL
+                                : typeof values.photoUrl === "string"
+                                    ? values.photoUrl
+                                    : null,
+                            providerId: "password",
+                            isAnonymous: false
+                        },
+                        invitationSent: !!values.invitationSent,
+                        temporaryPassword: typeof values.temporaryPassword === "string" ? values.temporaryPassword : undefined
+                    };
+
+                    const { closeDialog } = dialogsController.open({
+                        key: "user_creation_result",
+                        Component: () => (
+                            React.createElement(CreationResultDialog, {
+                                result: creationResult,
+                                onClose: () => closeDialog()
+                            })
+                        )
+                    });
+                }
+            }
+        };
+
+        return result;
+    });
+}
+
+export async function resolveCollections(
+    collections: undefined | EntityCollection[] | EntityCollectionsBuilder,
+    authController: AuthController,
     data: RebaseData,
     plugins: RebasePlugin[] | undefined
 ): Promise<EntityCollection[]> {
@@ -52,21 +173,24 @@ export async function resolveCollections<U extends User, EC extends EntityCollec
             }
 
             if (plugin.hooks?.injectCollections) {
-                resolvedCollections = plugin.hooks.injectCollections(resolvedCollections ?? []);
+                resolvedCollections = plugin.hooks.injectCollections(resolvedCollections);
             }
         }
     }
 
+    // Auto-inject auth entity actions and callbacks (resetPassword, creation dialog, etc.)
+    resolvedCollections = injectAuthCollectionConfig(resolvedCollections);
+
     resolvedCollections = filterOutNotAllowedCollections(resolvedCollections, authController);
     return resolvedCollections;
 }
 
-export async function resolveAppViews<U extends User>(
+export async function resolveAppViews(
     baseViews: AppView[] | AppViewsBuilder | undefined,
-    authController: AuthController<U>,
+    authController: AuthController,
     data: RebaseData,
     plugins?: RebasePlugin[]
-) {
+): Promise<AppView[]> {
     let resolvedViews: AppView[] = [];
     if (typeof baseViews === "function") {
         resolvedViews = await baseViews({

package/src/hooks/navigation/useResolvedCollections.ts

@@ -4,7 +4,7 @@ import { useCallback, useEffect, useRef, useState, useMemo } from "react";
 import { AuthController, CollectionRegistryController, RebaseData, User } from "@rebasepro/types";
 import type { EntityCollectionsBuilder } from "@rebasepro/types";
 import { CollectionRegistry } from "@rebasepro/common";
-import { UserManagementDelegate } from "@rebasepro/types";
+
 
 import { resolveCollections } from "./useNavigationResolution";
 import { areCollectionListsEqual } from "./utils";
@@ -16,7 +16,7 @@ export type UseResolvedCollectionsProps<EC extends EntityCollection, USER extend
     plugins?: RebasePlugin[];
     disabled?: boolean;
     collectionRegistryController: CollectionRegistryController<EC> & { collectionRegistryRef: React.MutableRefObject<CollectionRegistry> };
-    userManagement?: UserManagementDelegate<USER>;
+
 };
 
 export type UseResolvedCollectionsResult = {
@@ -47,8 +47,7 @@ export function useResolvedCollections<EC extends EntityCollection, USER extends
         data,
         plugins,
         disabled,
-        collectionRegistryController,
-        userManagement
+        collectionRegistryController
     } = props;
 
     const [loading, setLoading] = useState(true);
@@ -70,8 +69,7 @@ export function useResolvedCollections<EC extends EntityCollection, USER extends
     authControllerRef.current = authController;
     const pluginsRef = useRef(plugins);
     pluginsRef.current = plugins;
-    const userManagementRef = useRef(userManagement);
-    userManagementRef.current = userManagement;
+
 
     // Ref for resolved collections change detection
     const resolvedCollectionsRef = useRef<EntityCollection[]>([]);

package/src/hooks/useBreadcrumbsController.tsx

@@ -1,40 +1,8 @@
 import { useContext } from "react";
 import { BreadcrumbContext } from "../contexts/BreacrumbsContext";
+import { BreadcrumbEntry, BreadcrumbsController } from "@rebasepro/types";
 
-/**
- * @group Hooks and utilities
- */
-export interface BreadcrumbsController {
-    breadcrumbs: BreadcrumbEntry[];
-    set: (props: {
-        breadcrumbs: BreadcrumbEntry[];
-    }) => void;
-    /**
-     * Update the count for a specific breadcrumb by ID.
-     */
-    updateCount: (id: string, count: number | null | undefined) => void;
-}
-
-
-/**
- * @group Hooks and utilities
- */
-export interface BreadcrumbEntry {
-    title: string;
-    url: string;
-    /**
-     * Optional entity count for collection breadcrumbs.
-     * - undefined: not applicable (e.g., entity breadcrumb, custom view)
-     * - null: loading
-     * - number: loaded count
-     */
-    count?: number | null;
-    /**
-     * Unique identifier for this breadcrumb (e.g., collection path).
-     * Used to update count without replacing entire breadcrumb array.
-     */
-    id?: string;
-}
+export type { BreadcrumbEntry, BreadcrumbsController };
 
 
 /**

package/src/hooks/useBuildSideEntityController.tsx

@@ -11,11 +11,33 @@ import {
 } from "@rebasepro/common";
 import { resolvedSelectedEntityView } from "../util/resolutions";
 import { ADDITIONAL_TAB_WIDTH, CONTAINER_FULL_WIDTH, FORM_CONTAINER_WIDTH } from "@rebasepro/core";
-import { useCustomizationController, useLargeLayout } from "@rebasepro/core";
+import { useCustomizationController, useLargeLayout, useComponentOverride, CollectionComponentOverrideProvider } from "@rebasepro/core";
 import { JSON_TAB_VALUE, HISTORY_TAB_VALUE } from "../components/EntityEditView";
 import React from "react";
 import { EntitySidePanel } from "../components/EntitySidePanel";
 
+/**
+ * Thin wrapper that resolves the Entity.SidePanel component override.
+ * Because the JSX is created inside `propsToSidePanel` (a plain function,
+ * not a React component), we need this wrapper so the hook is called at the
+ * top level of a React component per the Rules of Hooks.
+ */
+function ResolvedEntitySidePanelInner(props: EntitySidePanelProps) {
+    const Resolved = useComponentOverride("Entity.SidePanel", EntitySidePanel);
+    return <Resolved {...props}/>;
+}
+
+function ResolvedEntitySidePanel(props: EntitySidePanelProps) {
+    if (props.collection?.components) {
+        return (
+            <CollectionComponentOverrideProvider overrides={props.collection.components}>
+                <ResolvedEntitySidePanelInner {...props}/>
+            </CollectionComponentOverrideProvider>
+        );
+    }
+    return <ResolvedEntitySidePanelInner {...props}/>;
+}
+
 const NEW_URL_HASH = "new_side";
 const SIDE_URL_HASH = "side";
 
@@ -188,7 +210,7 @@ width: newWidth };
         sideDialogsController.open(
             propsToSidePanel({
                 ...props,
-                selectedTab: props.selectedTab ?? defaultSelectedView,
+                selectedTab: props.selectedTab ?? defaultSelectedView
             },
                 urlController.buildUrlCollectionPath,
                 urlController.resolveDatabasePathsFrom,
@@ -317,7 +339,7 @@ const propsToSidePanel = (props: EntitySidePanelProps,
     const entityViewWidth = getEntityViewWidth(props, smallLayout, customizationController);
     return {
         key: `${props.path}/${props.entityId}`,
-        component: <EntitySidePanel {...resolvedPanelProps}/>,
+        component: <ResolvedEntitySidePanel {...resolvedPanelProps}/>,
         urlPath: urlPath,
         parentUrlPath: parentUrlPath,
         width: entityViewWidth,

package/src/preview/PropertyPreview.tsx

@@ -117,6 +117,7 @@ export const PropertyPreview = React.memo(function PropertyPreview<P extends Pro
                         size={props.size}
                         reference={new EntityReference({ id: value,
 path: stringProperty.reference.path })}
+                        textOnly={props.textOnly}
                     />;
                 } else {
                     content = <EmptyValue/>;
@@ -213,6 +214,7 @@ path: stringProperty.reference.path })}
                     includeEntityLink={property.includeEntityLink}
                     size={props.size}
                     reference={value as EntityReference}
+                    textOnly={props.textOnly}
                 />;
             } else {
                 content = buildWrongValueType(propertyKey, property.type, value);
@@ -229,7 +231,7 @@ path: stringProperty.reference.path })}
             content = (
                 <div className="flex flex-col w-full gap-0.5">
                     {(value as unknown[]).map((item: unknown, index: number) => {
-                        const entityRelation = normalizeToEntityRelation(item);
+                        const entityRelation = normalizeToEntityRelation(item, "relation");
                         if (!entityRelation) return null;
                         return (
                             <div className="w-full"
@@ -241,6 +243,7 @@ path: stringProperty.reference.path })}
                                     includeEntityLink={property.includeEntityLink}
                                     size={"small"}
                                     relation={entityRelation}
+                                    textOnly={props.textOnly}
                                 />
                             </div>
                         );
@@ -249,7 +252,7 @@ path: stringProperty.reference.path })}
             );
         } else {
             // Single-cardinality relation
-            const relationValue = normalizeToEntityRelation(value);
+            const relationValue = normalizeToEntityRelation(value, "relation");
             if (relationValue) {
                 content = <RelationPreview
                     disabled={!property.relation}
@@ -258,6 +261,7 @@ path: stringProperty.reference.path })}
                     includeEntityLink={property.includeEntityLink}
                     size={props.size}
                     relation={relationValue}
+                    textOnly={props.textOnly}
                 />;
             } else {
                 content = buildWrongValueType(propertyKey, property.type, value);

package/src/preview/components/ReferencePreview.tsx

@@ -3,12 +3,14 @@ import * as React from "react";
 
 import { Entity, EntityReference } from "@rebasepro/types";
 import type { PreviewSize } from "../../types/components/PropertyPreviewProps";
-import { useCustomizationController, useEntityFetch } from "@rebasepro/core";
+import { useCustomizationController, useEntityFetch, useComponentOverride, CollectionComponentOverrideProvider } from "@rebasepro/core";
 import { Skeleton } from "@rebasepro/ui";
 import { ErrorBoundary } from "@rebasepro/ui";
 import { ErrorView } from "@rebasepro/core";
 import { EntityPreview, EntityPreviewContainer } from "../../components/EntityPreview";
 import { useCollectionRegistryController } from "../../index";
+import { getEntityTitlePropertyKey } from "../../util/previews";
+import { getValueInPath } from "@rebasepro/utils";
 
 export type ReferencePreviewProps = {
     disabled?: boolean;
@@ -19,6 +21,7 @@ export type ReferencePreviewProps = {
     hover?: boolean;
     includeEntityLink?: boolean;
     includeId?: boolean;
+    textOnly?: boolean;
 };
 
 /**
@@ -28,6 +31,9 @@ export const ReferencePreview = function ReferencePreview(props: ReferencePrevie
     const reference = props.reference;
     if (!(typeof reference === "object" && "isEntityReference" in reference && reference.isEntityReference())) {
         console.warn("Reference preview received value of type", typeof reference);
+        if (props.textOnly) {
+            return <span>{String(reference)}</span>;
+        }
         return <EntityPreviewContainer
             onClick={props.onClick}
             size={props.size ?? "medium"}>
@@ -40,7 +46,9 @@ export const ReferencePreview = function ReferencePreview(props: ReferencePrevie
     </ErrorBoundary>;
 };
 
-function ReferencePreviewInternal({
+const DefaultMissingReference: React.FC<{ path: string }> = () => null;
+
+function ReferencePreviewInternalInner({
     disabled,
     reference,
     previewProperties,
@@ -48,18 +56,19 @@ function ReferencePreviewInternal({
     hover,
     onClick,
     includeEntityLink = true,
-    includeId = true
-}: ReferencePreviewProps) {
-
-    const customizationController = useCustomizationController();
-
-    const collectionRegistryController = useCollectionRegistryController();
+    includeId = true,
+    textOnly,
+    collection
+}: ReferencePreviewProps & { collection?: EntityCollection }) {
+    const ResolvedMissingReference = useComponentOverride("Entity.MissingReference", DefaultMissingReference);
 
-    const collection = collectionRegistryController.getCollection(reference.path);
     if (!collection) {
-        if (customizationController.components?.missingReference) {
-            return <customizationController.components.missingReference path={reference.path}/>;
+        if (ResolvedMissingReference !== DefaultMissingReference) {
+            return <ResolvedMissingReference path={reference.path}/>;
         } else {
+            if (textOnly) {
+                return <span>{reference.path}</span>;
+            }
             return <EntityPreviewContainer
                 onClick={onClick}
                 size={size ?? "medium"}>
@@ -78,9 +87,31 @@ function ReferencePreviewInternal({
         includeEntityLink={includeEntityLink}
         includeId={includeId}
         onClick={onClick}
+        textOnly={textOnly}
         hover={hover}/>
 }
 
+function ReferencePreviewInternal(props: ReferencePreviewProps) {
+    const collectionRegistryController = useCollectionRegistryController();
+    const collection = collectionRegistryController.getCollection(props.reference.path);
+
+    const content = (
+        <ReferencePreviewInternalInner
+            {...props}
+            collection={collection}
+        />
+    );
+
+    if (collection?.components) {
+        return (
+            <CollectionComponentOverrideProvider overrides={collection.components}>
+                {content}
+            </CollectionComponentOverrideProvider>
+        );
+    }
+    return content;
+}
+
 function ReferencePreviewExisting<M extends Record<string, unknown> = Record<string, unknown>>({
     reference,
     collection,
@@ -90,11 +121,15 @@ function ReferencePreviewExisting<M extends Record<string, unknown> = Record<str
     includeEntityLink,
     includeId,
     onClick,
-    hover
+    hover,
+    textOnly
 }: ReferencePreviewProps & {
     collection: EntityCollection<M>
 }) {
 
+    const ResolvedEntityPreview = useComponentOverride("Entity.Preview", EntityPreview);
+    const customizationController = useCustomizationController();
+
     const {
         entity,
         dataLoading,
@@ -121,6 +156,9 @@ function ReferencePreviewExisting<M extends Record<string, unknown> = Record<str
             tooltip={reference.path}/>;
     }
     if (body) {
+        if (textOnly) {
+            return <span>{reference.id}</span>;
+        }
 
         return (
             <EntityPreviewContainer onClick={disabled ? undefined : onClick}
@@ -132,6 +170,9 @@ function ReferencePreviewExisting<M extends Record<string, unknown> = Record<str
     }
 
     if (dataLoading && !usedEntity) {
+        if (textOnly) {
+            return <Skeleton className="inline-block w-20 h-4" />;
+        }
         return (
             <EntityPreviewContainer onClick={disabled ? undefined : onClick}
                 hover={disabled ? undefined : hover}
@@ -142,6 +183,9 @@ function ReferencePreviewExisting<M extends Record<string, unknown> = Record<str
     }
 
     if (!usedEntity) {
+        if (textOnly) {
+            return <span>{reference.id}</span>;
+        }
         return (
             <EntityPreviewContainer onClick={disabled ? undefined : onClick}
                 hover={disabled ? undefined : hover}
@@ -151,7 +195,14 @@ function ReferencePreviewExisting<M extends Record<string, unknown> = Record<str
         );
     }
 
-    return <EntityPreview size={size}
+    if (textOnly) {
+        const titleProperty = getEntityTitlePropertyKey(collection, customizationController.propertyConfigs);
+        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>;
+    }
+
+    return <ResolvedEntityPreview size={size}
         previewKeys={previewProperties}
         disabled={disabled}
         entity={usedEntity}