@rebasepro/admin 0.5.0 → 0.6.1

package/dist/types/components/PropertyPreviewProps.d.ts

@@ -44,4 +44,8 @@ export interface PropertyPreviewProps<P extends Property | Property, CustomProps
      * Only applies to image type properties.
      */
     fill?: boolean;
+    /**
+     * If true, relations/references will render as plain text strings rather than full cards.
+     */
+    textOnly?: boolean;
 }

package/dist/types/components/formex.d.ts

@@ -1,40 +1 @@
-import React, { FormEvent } from "react";
-export type FormexController<T extends object> = {
-    values: T;
-    initialValues: T;
-    setValues: (values: T) => void;
-    setFieldValue: (key: string, value: unknown, shouldValidate?: boolean) => void;
-    touched: Record<string, boolean>;
-    setFieldTouched: (key: string, touched: boolean, shouldValidate?: boolean) => void;
-    setTouched: (touched: Record<string, boolean>) => void;
-    dirty: boolean;
-    setDirty: (dirty: boolean) => void;
-    setSubmitCount: (submitCount: number) => void;
-    errors: Record<string, string>;
-    setFieldError: (key: string, error?: string) => void;
-    handleChange: (event: React.SyntheticEvent) => void;
-    handleBlur: (event: React.FocusEvent) => void;
-    handleSubmit: (event?: FormEvent<HTMLFormElement>) => void;
-    validate: () => void;
-    resetForm: (props?: FormexResetProps<T>) => void;
-    submitCount: number;
-    isSubmitting: boolean;
-    setSubmitting: (isSubmitting: boolean) => void;
-    isValidating: boolean;
-    /**
-     * The version of the form. This is incremented every time the form is reset
-     * or the form is submitted.
-     */
-    version: number;
-    debugId?: string;
-    undo: () => void;
-    redo: () => void;
-    canUndo: boolean;
-    canRedo: boolean;
-};
-export type FormexResetProps<T extends object> = {
-    values?: T;
-    submitCount?: number;
-    errors?: Record<string, string>;
-    touched?: Record<string, boolean>;
-};
+export type { FormexController, FormexResetProps } from "@rebasepro/formex";

package/dist/types/fields.d.ts

@@ -123,9 +123,17 @@ export interface FormContext<M extends Record<string, unknown> = Record<string,
      */
     setFieldValue: (key: string, value: unknown, shouldValidate?: boolean) => void;
     /**
-     * Save the entity.
+     * Quietly persist the entity to the database without any UI feedback
+     * (no validation, no snackbar, no form reset).
+     * Use this for programmatic/background saves from custom views.
      */
     save: (values: M) => void;
+    /**
+     * Submit the form — validates, saves, resets the form, and shows
+     * a success snackbar. This is what the Save button calls.
+     * Use this from custom views when you want the full "user saved" experience.
+     */
+    submit: () => void;
     /**
      * Collection of the entity being modified
      */

package/dist/util/navigation_utils.d.ts

@@ -4,7 +4,7 @@ export { removeInitialAndTrailingSlashes, removeInitialSlash, removeTrailingSlas
  * Navigate to an entity using either a side panel or full-screen mode.
  * This is an admin-specific UI concern and lives here (not in common).
  */
-export declare function navigateToEntity({ openEntityMode, collection, entityId, copy, path, selectedTab, defaultValues, sideEntityController, onClose, navigation }: {
+export declare function navigateToEntity({ openEntityMode, collection, entityId, copy, path, selectedTab, defaultValues, sideEntityController, onClose, navigation, replace }: {
     openEntityMode: "side_panel" | "full_screen" | "split" | "dialog";
     collection?: EntityCollection;
     entityId?: string | number;
@@ -23,4 +23,5 @@ export declare function navigateToEntity({ openEntityMode, collection, entityId,
     sideEntityController: SideEntityController;
     onClose?: () => void;
     navigation: UrlController;
+    replace?: boolean;
 }): void;

package/dist/util/previews.d.ts

@@ -2,3 +2,8 @@ import type { EntityCollection, PropertyConfig } from "@rebasepro/types";
 import { AuthController } from "@rebasepro/types";
 export declare function getEntityPreviewKeys(authController: AuthController, targetCollection: EntityCollection<any>, fields: Record<string, PropertyConfig>, previewProperties?: string[], limit?: number): string[];
 export declare function getEntityTitlePropertyKey<M extends Record<string, unknown>>(collection: EntityCollection<M>, propertyConfigs: Record<string, PropertyConfig>): string | undefined;
+/**
+ * Attempt to turn a title value (which might be a relation, reference, date, array, or other complex object)
+ * into a renderable, human-readable string.
+ */
+export declare function resolveTitleToString(title: any): string;

package/dist/util/property_utils.d.ts

@@ -4,7 +4,7 @@ import React from "react";
 import type { IconSize } from "@rebasepro/ui";
 export declare function isReferenceProperty(property: Property): boolean | null;
 export declare function isRelationProperty(property: Property): boolean | null;
-export declare function getIconForWidget(widget: PropertyConfig | undefined, size: IconSize | number): import("react/jsx-runtime").JSX.Element;
+export declare function getIconForWidget(widget: PropertyConfig | undefined, size: IconSize | number): React.JSX.Element;
 export declare function getIconForProperty(property: Property, size?: IconSize | number, fields?: Record<string, PropertyConfig>): React.ReactNode;
 /**
  * Get a property in a property tree from a path like

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rebasepro/admin",
   "type": "module",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "description": "Rebase CMS — content management views, forms, and routing",
   "funding": {
     "url": "https://github.com/sponsors/rebaseco"
@@ -56,13 +56,13 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@floating-ui/dom": "^1.7.6",
     "cmdk": "^1.1.1",
-    "date-fns": "^3.6.0",
+    "date-fns": "^4.4.0",
     "exceljs": "^4.4.0",
     "fast-equals": "6.0.0",
     "fractional-indexing": "3.2.0",
-    "fuse.js": "^7.3.0",
+    "fuse.js": "^7.4.2",
     "json5": "^2.2.3",
-    "markdown-it": "^14.1.1",
+    "markdown-it": "^14.2.0",
     "markdown-it-ins": "^4.0.0",
     "markdown-it-mark": "^4.0.0",
     "markdown-it-task-lists": "^2.1.1",
@@ -74,22 +74,22 @@
     "prosemirror-inputrules": "^1.5.1",
     "prosemirror-keymap": "^1.2.3",
     "prosemirror-markdown": "^1.13.4",
-    "prosemirror-model": "^1.25.7",
+    "prosemirror-model": "^1.25.8",
     "prosemirror-schema-list": "^1.5.1",
     "prosemirror-state": "^1.4.4",
     "prosemirror-tables": "^1.8.5",
     "prosemirror-transform": "^1.12.0",
-    "prosemirror-view": "^1.41.8",
-    "zod": "^3.25.76",
-    "react-dropzone": "^14.4.1",
+    "prosemirror-view": "^1.41.9",
+    "react-dropzone": "^15.0.0",
     "react-use-measure": "^2.1.7",
-    "@rebasepro/common": "0.5.0",
-    "@rebasepro/formex": "0.5.0",
-    "@rebasepro/core": "0.5.0",
-    "@rebasepro/schema-inference": "0.5.0",
-    "@rebasepro/utils": "0.5.0",
-    "@rebasepro/types": "0.5.0",
-    "@rebasepro/ui": "0.5.0"
+    "zod": "^4.4.3",
+    "@rebasepro/core": "0.6.1",
+    "@rebasepro/formex": "0.6.1",
+    "@rebasepro/schema-inference": "0.6.1",
+    "@rebasepro/common": "0.6.1",
+    "@rebasepro/types": "0.6.1",
+    "@rebasepro/utils": "0.6.1",
+    "@rebasepro/ui": "0.6.1"
   },
   "peerDependencies": {
     "react": ">=19.0.0",
@@ -100,19 +100,19 @@
   "devDependencies": {
     "@jest/globals": "^30.4.1",
     "@testing-library/react": "^16.3.2",
-    "@types/jest": "^29.5.14",
+    "@types/jest": "^30.0.0",
     "@types/markdown-it": "^14.1.2",
-    "@types/node": "^20.19.41",
-    "@types/react": "^19.2.15",
+    "@types/node": "^25.9.3",
+    "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@types/react-measure": "^2.0.12",
-    "@vitejs/plugin-react": "^4.7.0",
-    "jest": "^29.7.0",
-    "react-router": "^7.15.1",
-    "react-router-dom": "^7.15.1",
-    "ts-jest": "^29.4.10",
-    "typescript": "^5.9.3",
-    "vite": "^7.3.3"
+    "@vitejs/plugin-react": "^6.0.2",
+    "jest": "^30.4.2",
+    "react-router": "^7.17.0",
+    "react-router-dom": "^7.17.0",
+    "ts-jest": "^29.4.11",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.16"
   },
   "files": [
     "dist",
@@ -130,7 +130,7 @@
   },
   "jest": {
     "transform": {
-      "^.+\\.tsx?$": "ts-jest"
+      "^.+\\.[jt]sx?$": "ts-jest"
     },
     "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
     "moduleFileExtensions": [
@@ -145,6 +145,9 @@
     "testPathIgnorePatterns": [
       "/node_modules/"
     ],
+    "transformIgnorePatterns": [
+      "node_modules/(?!.*fractional-indexing)/"
+    ],
     "setupFilesAfterEnv": [
       "<rootDir>/test/setupTests.ts"
     ],

package/src/collection_editor/ConfigControllerProvider.tsx

@@ -27,7 +27,6 @@ export interface ConfigControllerProviderProps {
     collectionInference?: CollectionInference;
 
 
-
     extraView?: {
         View: React.ComponentType<{
             path: string
@@ -119,7 +118,6 @@ export const ConfigControllerProvider = React.memo(
         }>();
 
 
-
         const editCollection = useCallback(({
             id,
             path,
@@ -145,7 +143,8 @@ export const ConfigControllerProvider = React.memo(
             setCurrentDialog({
                 editedCollectionId: id,
                 path,
-                parentCollectionSlugs, parentEntityIds,
+                parentCollectionSlugs,
+parentEntityIds,
                 isNewCollection: false,
                 parentCollection,
                 redirect: false,
@@ -191,7 +190,8 @@ export const ConfigControllerProvider = React.memo(
                 namespace,
                 currentPropertiesOrder,
                 editedCollectionId,
-                parentCollectionSlugs, parentEntityIds,
+                parentCollectionSlugs,
+parentEntityIds,
 
                 existingEntities,
                 collection
@@ -217,7 +217,8 @@ export const ConfigControllerProvider = React.memo(
             sourceClick?: string
         }) => {
             console.debug("Create collection", {
-                parentCollectionSlugs, parentEntityIds,
+                parentCollectionSlugs,
+parentEntityIds,
                 parentCollection,
                 initialValues,
                 copyFrom,
@@ -225,7 +226,8 @@ export const ConfigControllerProvider = React.memo(
                 sourceClick
             });
             onAnalyticsEvent?.(copyFrom ? "duplicate_collection" : "create_collection", {
-                parentCollectionSlugs, parentEntityIds,
+                parentCollectionSlugs,
+parentEntityIds,
                 parentCollection,
                 initialValues,
                 redirect,
@@ -233,7 +235,8 @@ export const ConfigControllerProvider = React.memo(
             });
             setCurrentDialog({
                 isNewCollection: true,
-                parentCollectionSlugs, parentEntityIds,
+                parentCollectionSlugs,
+parentEntityIds,
                 parentCollection,
                 initialValues,
                 copyFrom,

package/src/collection_editor/ui/AddKanbanColumnAction.tsx

@@ -15,6 +15,7 @@ import {
     Dialog,
     DialogActions,
     DialogContent,
+    DialogTitle,
     IconButton,
     PlusIcon,
     TextField,
@@ -159,6 +160,7 @@ export function AddKanbanColumnAction({
             </div>
 
             <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+                <DialogTitle hidden>{t("studio_add_kanban_column_title")}</DialogTitle>
                 <DialogContent className="max-w-md">
                     <Typography variant="h6" className="mb-4">
                         {t("studio_add_kanban_column_title")}

package/src/collection_editor/ui/CollectionViewHeaderAction.tsx

@@ -36,7 +36,8 @@ export function CollectionViewHeaderAction({
                         propertyKey,
                         property,
                         editedCollectionId: collection.slug,
-                        parentCollectionSlugs, parentEntityIds,
+                        parentCollectionSlugs,
+parentEntityIds,
                         collection,
                         existingEntities: tableController.data ?? []
                     });

package/src/collection_editor/ui/EditorCollectionAction.tsx

@@ -36,7 +36,8 @@ export function EditorCollectionAction({
                 ? () => collectionEditorController?.editCollection({
                     id: collection.slug,
                     path,
-                    parentCollectionSlugs, parentEntityIds,
+                    parentCollectionSlugs,
+parentEntityIds,
                     parentCollection: parentCollection as EntityCollection,
                     existingEntities: tableController?.data ?? []
                 })

package/src/collection_editor/ui/EditorCollectionActionStart.tsx

@@ -40,7 +40,8 @@ export function EditorCollectionActionStart({
                     onClick={() => configController
                         ?.saveCollection({
                             id: collection.slug,
-                            parentCollectionSlugs, parentEntityIds,
+                            parentCollectionSlugs,
+parentEntityIds,
                             collectionData: mergeDeep(collection as EntityCollection,
                                 {
                                     defaultFilter: tableController.filterValues ?? null,

package/src/collection_editor/ui/EditorEntityAction.tsx

@@ -33,7 +33,8 @@ export function EditorEntityAction({
                 ? () => collectionEditorController?.editCollection({
                     id: collection.slug,
                     path,
-                    parentCollectionSlugs, parentEntityIds,
+                    parentCollectionSlugs,
+parentEntityIds,
                     parentCollection: parentCollection as EntityCollection
                 })
                 : undefined}>

package/src/collection_editor/ui/KanbanSetupAction.tsx

@@ -24,7 +24,8 @@ export function KanbanSetupAction({
     const handleConfigureClick = () => {
         collectionEditorController.editCollection({
             id: collection.slug,
-            parentCollectionSlugs, parentEntityIds,
+            parentCollectionSlugs,
+parentEntityIds,
             initialView: "display",
             expandKanban: true
         });

package/src/collection_editor/ui/MissingReferenceWidget.tsx

@@ -22,7 +22,8 @@ export function MissingReferenceWidget({ path: pathProp }: {
                 collectionEditor.createCollection({
                     initialValues: { path,
 name: prettifyIdentifier(path) },
-                    parentCollectionSlugs, parentEntityIds,
+                    parentCollectionSlugs,
+parentEntityIds,
                     redirect: false,
                     sourceClick: "missing_reference"
                 });

package/src/collection_editor/ui/PropertyAddColumnComponent.tsx

@@ -34,7 +34,8 @@ export function PropertyAddColumnComponent({
                 onClick={canEditCollection ? () => {
                     collectionEditorController.editProperty({
                         editedCollectionId: collection.slug,
-                        parentCollectionSlugs, parentEntityIds,
+                        parentCollectionSlugs,
+parentEntityIds,
                         currentPropertiesOrder: getDefaultPropertiesOrder(collection),
                         collection,
                         existingEntities: tableController.data

package/src/collection_editor/ui/collection_editor/CollectionDetailsForm.tsx

@@ -111,7 +111,6 @@ export function CollectionDetailsForm({
     const collectionIcon = <IconForView collectionOrView={values}/>;
 
 
-
     const isSubcollection = !!parentCollection;
 
     const showErrors = submitCount > 0;
@@ -177,7 +176,6 @@ export function CollectionDetailsForm({
                     </div>
 
 
-
                     <LayoutModeSwitch
                         className={"col-span-12"}
                         value={values.openEntityMode ?? "side_panel"}
@@ -296,7 +294,8 @@ export function CollectionDetailsForm({
                                         property={{
                                             type: "string",
                                             name: dialogPropertyName,
-                                            ui: { disabled: true, hideFromCollection: true }
+                                            ui: { disabled: true,
+hideFromCollection: true }
                                         }}
                                         propertyKey={dialogPropertyKey}
                                         existingProperty={false}

package/src/collection_editor/ui/collection_editor/CollectionEditorDialog.tsx

@@ -212,7 +212,6 @@ export function CollectionEditor(props: CollectionEditorDialogProps & {
     }, [props.editedCollectionId, props.parentCollectionSlugs, props.parentEntityIds, collectionRegistry.initialised, collectionRegistry.getRawCollection]);
 
 
-
     const initialCollection = collection
         ? {
             ...collection,

package/src/collection_editor/ui/collection_editor/CollectionPropertiesEditorForm.tsx

@@ -100,15 +100,19 @@ export function CollectionPropertiesEditorForm({
 
     const inferPropertiesFromData = doCollectionInference
         ? (): void => {
-            if (!doCollectionInference || configController?.readOnly)
+            const inferenceFn = doCollectionInference;
+            if (!inferenceFn || configController?.readOnly)
                 return;
 
             setInferringProperties(true);
 
             console.debug("CollectionEditor: inferring properties from data", values);
-            // @ts-ignore
-            doCollectionInference(values)
-                .then((newCollection) => {
+            const promise = inferenceFn(values);
+            if (!promise) {
+                setInferringProperties(false);
+                return;
+            }
+            promise.then((newCollection) => {
 
                     if (!newCollection) {
                         snackbarController.open({

package/src/collection_editor/ui/collection_editor/DisplaySettingsForm.tsx

@@ -196,7 +196,8 @@ export function DisplaySettingsForm({
                                             property={{
                                                 type: "string",
                                                 name: dialogPropertyName,
-                                                ui: { disabled: true, hideFromCollection: true }
+                                                ui: { disabled: true,
+hideFromCollection: true }
                                             }}
                                             propertyKey={dialogPropertyKey}
                                             existingProperty={false}

package/src/collection_editor/ui/collection_editor/PropertyEditView.tsx

@@ -51,7 +51,7 @@ import { isValidRegExp, mergeDeep } from "@rebasepro/utils";
 
 export type PropertyWithId = Property & {
     id?: string;
-    conditions?: import('@rebasepro/types').PropertyConditions;
+    conditions?: import("@rebasepro/types").PropertyConditions;
 };
 
 export type OnPropertyChangedParams = {

package/src/collection_editor/ui/collection_editor/properties/RelationPropertyField.tsx

@@ -71,8 +71,11 @@ export function RelationPropertyField({
 
     const updateThrough = useCallback(
         (patch: Record<string, unknown>) => {
-            const currentThrough = values.through ?? { table: "", sourceColumn: "", targetColumn: "" };
-            setFieldValue("through", { ...currentThrough, ...patch });
+            const currentThrough = values.through ?? { table: "",
+sourceColumn: "",
+targetColumn: "" };
+            setFieldValue("through", { ...currentThrough,
+...patch });
         },
         [values.through, setFieldValue]
     );

package/src/collection_editor/useLocalCollectionsConfigController.tsx

@@ -3,7 +3,7 @@ import { EntityCollection, Properties } from "@rebasepro/types";
 import { getSubcollections } from "@rebasepro/common";
 
 
-import React, { useMemo } from "react";
+import React, { useMemo, useRef } from "react";
 export function useLocalCollectionsConfigController(
     clientOrUrl: any,
     baseCollections: EntityCollection[] = [],
@@ -14,10 +14,15 @@ export function useLocalCollectionsConfigController(
 ): CollectionsConfigController {
 
     const parsedCollections = baseCollections;
+    
+    // Store latest options in a ref to prevent stale closures in the `request` function
+    // due to useMemo caching the saveCollection function.
+    const optionsRef = useRef(options);
+    optionsRef.current = options;
 
     const request = async (endpoint: string, payload: Record<string, unknown>) => {
         try {
-            let token = options?.getAuthToken ? await options.getAuthToken() : null;
+            let token = optionsRef.current?.getAuthToken ? await optionsRef.current.getAuthToken() : null;
             let baseUrl = typeof clientOrUrl === "string" ? clientOrUrl : "";
 
             if (typeof clientOrUrl === "object" && clientOrUrl !== null) {

package/src/collection_editor/validateCollectionJson.ts

@@ -1,4 +1,5 @@
-import { EntityCollection } from "@rebasepro/types";
+import { DataType, EntityCollection } from "@rebasepro/types";
+
 
 /**
  * Valid dataType values for properties
@@ -17,7 +18,6 @@ const VALID_DATA_TYPES = [
     "binary"
 ] as const;
 
-type DataType = typeof VALID_DATA_TYPES[number];
 
 /**
  * Validation error with path and message

package/src/components/ArrayContainer.tsx

@@ -402,13 +402,13 @@ export function ArrayContainer<T>({
         const newIds = [...internalIds];
         newIds.splice(index, 1);
         setInternalIds(newIds);
-        onValueChange(value.filter((_, i) => i !== index));
+        onValueChange((value ?? []).filter((_, i) => i !== index));
     };
 
     const copy = (index: number) => {
         if ((value ?? []).length >= max) return;
         const id = getRandomId();
-        const copyingItem = value[index];
+        const copyingItem = (value ?? [])[index];
         const newIds: number[] = [
             ...internalIds.slice(0, index + 1),
             id,
@@ -416,7 +416,7 @@ export function ArrayContainer<T>({
         ];
         if (onInternalIdAdded) onInternalIdAdded(id);
         setInternalIds(newIds);
-        onValueChange([...value.slice(0, index + 1), copyingItem, ...value.slice(index + 1)]);
+        onValueChange([...(value ?? []).slice(0, index + 1), copyingItem, ...(value ?? []).slice(index + 1)]);
     };
 
     const addInIndex = (index: number) => {
@@ -429,7 +429,7 @@ export function ArrayContainer<T>({
         ];
         if (onInternalIdAdded) onInternalIdAdded(id);
         setInternalIds(newIds);
-        onValueChange([...value.slice(0, index), newDefaultEntry, ...value.slice(index)]);
+        onValueChange([...(value ?? []).slice(0, index), newDefaultEntry, ...(value ?? []).slice(index)]);
     };
 
     const onDragEnd = (event: DragEndEvent) => {
@@ -444,7 +444,7 @@ export function ArrayContainer<T>({
         if (oldIndex === -1 || newIndex === -1) return;
         const newIds = arrayMove(internalIds, oldIndex, newIndex);
         setInternalIds(newIds);
-        onValueChange(arrayMove(value, oldIndex, newIndex));
+        onValueChange(arrayMove(value ?? [], oldIndex, newIndex));
     };
 
     return sortable ? (

package/src/components/CollectionPanel.tsx

@@ -3,6 +3,7 @@ import React, { useMemo } from "react";
 import { EntityCollectionView } from "./EntityCollectionView/EntityCollectionView";
 import { useCollectionRegistryController } from "../hooks/navigation/contexts/CollectionRegistryContext";
 import { Typography } from "@rebasepro/ui";
+import { useComponentOverride, CollectionComponentOverrideProvider } from "@rebasepro/core";
 
 /**
  * Props for the {@link CollectionPanel} component.
@@ -94,17 +95,44 @@ export type CollectionPanelProps = {
  *
  * @group Components
  */
-export function CollectionPanel({
+function CollectionPanelInner({
+    mergedCollection,
     path,
     title,
-    viewMode,
-    sort,
-    limit,
-    updateUrl = false,
-    openEntityMode,
-    className,
-    collectionOverrides
-}: CollectionPanelProps) {
+    updateUrl,
+    className
+}: CollectionPanelProps & { mergedCollection: EntityCollection }) {
+    const ResolvedCollectionView = useComponentOverride("Collection.View", EntityCollectionView);
+
+    return (
+        <div className={className}>
+            {title !== false && (
+                <Typography
+                    variant="subtitle2"
+                    className="font-bold mb-2 text-surface-700 dark:text-surface-300"
+                >
+                    {title ?? mergedCollection.name}
+                </Typography>
+            )}
+            <ResolvedCollectionView
+                {...mergedCollection}
+                path={path}
+                updateUrl={updateUrl}
+            />
+        </div>
+    );
+}
+
+export function CollectionPanel(props: CollectionPanelProps) {
+    const {
+        path,
+        viewMode,
+        sort,
+        limit,
+        openEntityMode,
+        className,
+        collectionOverrides
+    } = props;
     const collectionRegistry = useCollectionRegistryController();
     const registeredCollection = collectionRegistry.getCollection(path);
 
@@ -135,21 +163,19 @@ export function CollectionPanel({
         );
     }
 
-    return (
-        <div className={className}>
-            {title !== false && (
-                <Typography
-                    variant="subtitle2"
-                    className="font-bold mb-2 text-surface-700 dark:text-surface-300"
-                >
-                    {title ?? mergedCollection.name}
-                </Typography>
-            )}
-            <EntityCollectionView
-                {...mergedCollection}
-                path={path}
-                updateUrl={updateUrl}
-            />
-        </div>
+    const content = (
+        <CollectionPanelInner
+            {...props}
+            mergedCollection={mergedCollection}
+        />
     );
+
+    if (mergedCollection.components) {
+        return (
+            <CollectionComponentOverrideProvider overrides={mergedCollection.components}>
+                {content}
+            </CollectionComponentOverrideProvider>
+        );
+    }
+    return content;
 }