@rebasepro/core 0.4.0 → 0.6.0

package/dist/util/icons.d.ts

@@ -12,9 +12,9 @@ export type IconViewProps = {
     group?: string;
     icon?: string | React.ReactNode;
 };
-export declare const IconForView: React.NamedExoticComponent<{
+export declare const IconForView: React.MemoExoticComponent<({ collectionOrView, className, color, size }: {
     collectionOrView?: IconViewProps;
     color?: IconColor;
     className?: string;
     size?: "smallest" | "small" | "medium" | "large" | number;
-}>;
+}) => React.ReactElement>;

package/dist/vitePlugin.js

@@ -62,7 +62,10 @@ function rebaseCollectionsPlugin(options) {
           return `${prefix}{ __rebaseLazy: true, load: () => import(${quote}${importPath}${quote}) }`;
         }
       );
-      return { code: transformed, map: null };
+      return {
+        code: transformed,
+        map: null
+      };
     }
   };
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rebasepro/core",
   "type": "module",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "Rebase core — framework-agnostic runtime for data-driven admin panels",
   "funding": {
     "url": "https://github.com/sponsors/rebaseco"
@@ -48,16 +48,15 @@
   "dependencies": {
     "compressorjs": "^1.3.0",
     "fast-equals": "6.0.0",
-    "fuse.js": "^7.3.0",
-    "i18next": "^23.16.8",
+    "fuse.js": "^7.4.2",
+    "i18next": "^26.3.1",
     "notistack": "^3.0.2",
-    "react-compiler-runtime": "1.0.0",
-    "react-i18next": "^14.1.3",
-    "@rebasepro/types": "0.4.0",
-    "@rebasepro/common": "0.4.0",
-    "@rebasepro/ui": "0.4.0",
-    "@rebasepro/formex": "0.4.0",
-    "@rebasepro/utils": "0.4.0"
+    "react-i18next": "^17.0.8",
+    "@rebasepro/common": "0.6.0",
+    "@rebasepro/formex": "0.6.0",
+    "@rebasepro/ui": "0.6.0",
+    "@rebasepro/types": "0.6.0",
+    "@rebasepro/utils": "0.6.0"
   },
   "peerDependencies": {
     "react": ">=19.0.0",
@@ -69,22 +68,22 @@
     "@jest/globals": "^30.4.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
-    "@types/jest": "^29.5.14",
-    "@types/node": "^20.19.41",
-    "@types/react": "^19.2.15",
+    "@types/jest": "^30.0.0",
+    "@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",
+    "@vitejs/plugin-react": "^6.0.2",
     "babel-plugin-react-compiler": "beta",
-    "cross-env": "^7.0.3",
-    "esbuild": "^0.25.12",
-    "jest": "^29.7.0",
+    "cross-env": "^10.1.0",
+    "esbuild": "^0.28.1",
+    "jest": "^30.4.2",
     "jest-environment-jsdom": "^30.4.1",
-    "react-router-dom": "^7.15.1",
-    "ts-jest": "^29.4.10",
-    "tsd": "^0.31.2",
-    "typescript": "^5.9.3",
-    "vite": "^7.3.3"
+    "react-router-dom": "^7.17.0",
+    "ts-jest": "^29.4.11",
+    "tsd": "^0.33.0",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.16"
   },
   "files": [
     "dist",

package/src/components/ErrorView.tsx

@@ -28,19 +28,29 @@ export function ErrorView({
     tooltip,
     onRetry
 }: ErrorViewProps): React.ReactElement {
-    const component = error instanceof Error ? error.message : error;
-    console.warn("ErrorView", JSON.stringify(error))
+    const message = error instanceof Error ? error.message : error;
+    // Extract error code from ApiError instances (e.g. PG error codes like "42P01")
+    const errorCode = error instanceof Error && "code" in error
+        ? (error as Error & { code?: string }).code
+        : undefined;
 
     const body = (
         <div
             className="flex flex-col m-2">
-            <div className="flex items-start">
-                <AlertTriangleIcon className="mx-2 mt-0.5"/>
-                <div className="pl-2">
+            <div className="flex items-center gap-2">
+                <AlertTriangleIcon className="shrink-0"/>
+                <div>
                     {title && <Typography
                         variant={"body2"}
                         className="font-medium text-text-primary">{title}</Typography>}
-                    <Typography variant={"body2"} className="text-text-secondary">{component}</Typography>
+                    <Typography variant={"body2"} className="text-text-secondary">{message}</Typography>
+                    {errorCode && (
+                        <span
+                            className="inline-block mt-1 px-1.5 py-0.5 text-[10px] font-mono rounded bg-surface-200 dark:bg-surface-700 text-text-secondary"
+                        >
+                            {errorCode}
+                        </span>
+                    )}
                     {onRetry && (
                         <div className="mt-3">
                             <Button

package/src/components/LoginView/LoginView.tsx

@@ -88,7 +88,6 @@ export interface LoginViewProps {
     notAllowedError?: string | Error;
 
 
-
     /**
      * Google client ID for Google OAuth.
      * Required when Google login is enabled via ID token flow.
@@ -208,7 +207,7 @@ export function LoginView({
             // Clear URL search params without page reload
             const cleanUrl = window.location.origin + window.location.pathname;
             window.history.replaceState({}, document.title, cleanUrl);
-            
+
             if (authController.oauthLogin) {
                 authController.oauthLogin(provider, {
                     code,
@@ -220,18 +219,7 @@ export function LoginView({
         }
     }, [authController]);
 
-    function buildErrorView() {
-        if (!authController.authProviderError) return null;
-        if (authController.user != null) return null;
-        const errorMsg = authController.authProviderError instanceof Error
-            ? authController.authProviderError.message
-            : String(authController.authProviderError);
-        return (
-            <div className="w-full">
-                <ErrorView error={errorMsg}/>
-            </div>
-        );
-    }
+
 
     let logoComponent;
     if (logo) {
@@ -297,12 +285,11 @@ export function LoginView({
                     </div>
                 )}
 
-                {mode !== "forgot" && buildErrorView()}
-
                 <div className={cls(
                     "w-full transition-opacity duration-150",
                     viewVisible ? "opacity-100" : "opacity-0"
                 )}>
+
                     {/* Bootstrap mode: show setup form directly */}
                     {isBootstrapMode && !authController.user && (
                         <LoginForm
@@ -673,6 +660,17 @@ function LoginForm({
                 </div>
             )}
 
+            {(() => {
+                const err = authController.authProviderError;
+                if (!err || authController.user) return null;
+                const msg: string = err instanceof Error ? err.message : String(err);
+                return (
+                    <div className="w-full mb-2">
+                        <ErrorView error={msg}/>
+                    </div>
+                );
+            })()}
+
             <Typography variant="h6" className="mb-0.5">
                 {title}
             </Typography>

package/src/components/SchemaDriftBanner.tsx

@@ -0,0 +1,102 @@
+import React, { createContext, useCallback, useContext, useMemo, useState } from "react";
+import { Alert, Typography } from "@rebasepro/ui";
+
+// ── Schema Drift Context ────────────────────────────────────────────────
+
+interface SchemaDriftContextValue {
+    /** Report a schema drift error (call from any data-loading hook). */
+    reportSchemaDrift: (message: string) => void;
+    /** The most recent schema drift message, or null. */
+    schemaDriftMessage: string | null;
+    /** Dismiss the banner for this session. */
+    dismiss: () => void;
+}
+
+const SchemaDriftContext = createContext<SchemaDriftContextValue>({
+    reportSchemaDrift: () => {},
+    schemaDriftMessage: null,
+    dismiss: () => {}
+});
+
+export function useSchemaDriftContext(): SchemaDriftContextValue {
+    return useContext(SchemaDriftContext);
+}
+
+/**
+ * Detects schema drift from an error object.
+ * Checks both the error code (from `RebaseApiError`) and the message
+ * for schema drift indicators.
+ */
+export function isSchemaDriftError(error: unknown): boolean {
+    if (!error || typeof error !== "object") return false;
+    // RebaseApiError from the SDK has a `code` property
+    if ("code" in error && (error as { code?: string }).code === "SCHEMA_DRIFT") {
+        return true;
+    }
+    // Fallback: check the message for the telltale phrase
+    if (error instanceof Error && error.message.includes("Schema drift:")) {
+        return true;
+    }
+    return false;
+}
+
+// ── Provider ─────────────────────────────────────────────────────────────
+
+export function SchemaDriftProvider({ children }: { children: React.ReactNode }) {
+    const [schemaDriftMessage, setSchemaDriftMessage] = useState<string | null>(null);
+    const [dismissed, setDismissed] = useState(false);
+
+    const reportSchemaDrift = useCallback((message: string) => {
+        setSchemaDriftMessage(prev => prev ?? message);
+    }, []);
+
+    const dismiss = useCallback(() => {
+        setDismissed(true);
+    }, []);
+
+    const value = useMemo<SchemaDriftContextValue>(() => ({
+        reportSchemaDrift,
+        schemaDriftMessage: dismissed ? null : schemaDriftMessage,
+        dismiss
+    }), [reportSchemaDrift, schemaDriftMessage, dismissed, dismiss]);
+
+    return (
+        <SchemaDriftContext.Provider value={value}>
+            {children}
+        </SchemaDriftContext.Provider>
+    );
+}
+
+// ── Banner Component ─────────────────────────────────────────────────────
+
+export interface SchemaDriftBannerProps {
+    className?: string;
+}
+
+/**
+ * Persistent banner shown when a schema drift error is detected.
+ */
+export function SchemaDriftBanner({ className }: SchemaDriftBannerProps) {
+    const { schemaDriftMessage, dismiss } = useSchemaDriftContext();
+
+    if (!schemaDriftMessage) return null;
+
+    return (
+        <Alert
+            color="warning"
+            size="small"
+            onDismiss={dismiss}
+            className={className}
+        >
+            <div className="flex flex-col gap-1">
+                <Typography variant="label" className="text-amber-800 dark:text-amber-200">
+                    Schema drift detected
+                </Typography>
+                <Typography variant="body2" className="text-amber-700 dark:text-amber-300">
+                    {schemaDriftMessage}{" "}
+                    Run <code className="bg-amber-200 dark:bg-amber-800 px-1 rounded text-xs">pnpm db:push</code> in your backend terminal to sync.
+                </Typography>
+            </div>
+        </Alert>
+    );
+}

package/src/components/common/useDataTableController.tsx

@@ -128,7 +128,7 @@ export function useDataTableController<M extends Record<string, any> = any, USER
 
         const { filterValues: urlFilterValues, sortBy: urlSortBy } = parseFilterAndSort(location.search);
         if (!fixedFilter) {
-            setFilterValues(urlFilterValues as FilterValues<Extract<keyof M, string> | (string & {})> | undefined);
+            setFilterValues((urlFilterValues ?? defaultFilter) as FilterValues<Extract<keyof M, string> | (string & {})> | undefined);
         }
         if (urlSortBy && fixedFilter && !checkFilterCombination(fixedFilter, urlSortBy)) {
             console.warn("URL sort is not compatible with the force filter.");
@@ -186,7 +186,7 @@ export function useDataTableController<M extends Record<string, any> = any, USER
     const [dataLoadingError, setDataLoadingError] = useState<Error | undefined>();
     const [noMoreToLoad, setNoMoreToLoad] = useState<boolean>(false);
 
-    const clearFilter = useCallback(() => setFilterValues(fixedFilter ?? undefined), [fixedFilter]);
+    const clearFilter = useCallback(() => setFilterValues(fixedFilter ?? defaultFilter ?? undefined), [fixedFilter, defaultFilter]);
 
     const updateFilterValues = useCallback((updatedFilter: FilterValues<Extract<keyof M, string> | (string & {})> | undefined) => {
         if (fixedFilter) {
@@ -235,7 +235,7 @@ export function useDataTableController<M extends Record<string, any> = any, USER
         const onError = (error: Error) => {
             console.error("ERROR", error);
             setDataLoading(false);
-            setRawData([]);
+            setRawData((prev) => prev && prev.length > 0 ? prev : []);
             setDataLoadingError(error);
         };
 

package/src/components/index.tsx

@@ -22,4 +22,4 @@ export * from "./LoginView";
 
 export * from "./RebaseAuth";
 
-export * from "./BootstrapAdminBanner";
+export * from "./SchemaDriftBanner";

package/src/contexts/ComponentOverrideContext.tsx

@@ -0,0 +1,81 @@
+import React, { createContext, useContext, useMemo } from "react";
+import type { ComponentOverrideMap } from "@rebasepro/types";
+
+/** Stable empty reference to avoid re-creating context values on every render. */
+const EMPTY_OVERRIDES: ComponentOverrideMap = {};
+
+/**
+ * Internal state for the component override resolution chain.
+ * Holds both global overrides (set on `<Rebase>`) and collection-scoped
+ * overrides (set on individual collections).
+ *
+ * Resolution priority: collection > global > default.
+ *
+ * @internal
+ */
+interface ComponentOverrideState {
+    globalOverrides: ComponentOverrideMap;
+    collectionOverrides: ComponentOverrideMap;
+}
+
+export const ComponentOverrideContext = createContext<ComponentOverrideState>({
+    globalOverrides: EMPTY_OVERRIDES,
+    collectionOverrides: EMPTY_OVERRIDES
+});
+
+/**
+ * Provider set at the `<Rebase>` root level to supply global component overrides.
+ *
+ * @internal — Used by the Rebase component. End users set overrides via
+ * the `components` prop on `<Rebase>`.
+ */
+export function GlobalComponentOverrideProvider({
+    overrides,
+    children
+}: {
+    overrides?: ComponentOverrideMap;
+    children: React.ReactNode;
+}) {
+    const value = useMemo<ComponentOverrideState>(() => ({
+        globalOverrides: overrides ?? EMPTY_OVERRIDES,
+        collectionOverrides: EMPTY_OVERRIDES
+    }), [overrides]);
+
+    return (
+        <ComponentOverrideContext.Provider value={value}>
+            {children}
+        </ComponentOverrideContext.Provider>
+    );
+}
+
+/**
+ * Provider set at the collection level to layer collection-scoped overrides
+ * on top of global overrides.
+ *
+ * When a collection defines `components`, this provider is mounted
+ * around the collection's view subtree. Components within the subtree
+ * will resolve overrides in order: collection → global → default.
+ *
+ * @internal — Used by EntityCollectionView when a collection has
+ * `components` defined.
+ */
+export function CollectionComponentOverrideProvider({
+    overrides,
+    children
+}: {
+    overrides?: ComponentOverrideMap;
+    children: React.ReactNode;
+}) {
+    const parent = useContext(ComponentOverrideContext);
+
+    const value = useMemo<ComponentOverrideState>(() => ({
+        globalOverrides: parent.globalOverrides,
+        collectionOverrides: overrides ?? EMPTY_OVERRIDES
+    }), [parent.globalOverrides, overrides]);
+
+    return (
+        <ComponentOverrideContext.Provider value={value}>
+            {children}
+        </ComponentOverrideContext.Provider>
+    );
+}

package/src/contexts/RebaseClientInstanceContext.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 /**
- * Context that exposes the full RebaseClient instance (from `@rebasepro/client`).
+ * Context that exposes the full RebaseClient instance.
  * Used by the JS Editor to give developer scripts access to `client.data`, `client.auth`, etc.
  */
 export const RebaseClientInstanceContext = React.createContext<any>(undefined);

package/src/contexts/index.ts

@@ -8,6 +8,6 @@ export * from "./AnalyticsContext";
 export * from "./StorageSourceContext";
 export * from "./UserConfigurationPersistenceContext";
 export * from "./DialogsProvider";
-export * from "./InternalUserManagementContext";
 export * from "./RebaseClientInstanceContext";
 export * from "./CustomizationControllerContext";
+export * from "./ComponentOverrideContext";

package/src/core/Rebase.tsx

@@ -1,10 +1,11 @@
 "use client";
 import type { RebaseProps } from "./RebaseProps";
 import type { CustomizationController, RebasePlugin, SlotContribution } from "@rebasepro/types";
+import type { ComponentOverrideMap } from "@rebasepro/types";
 
 import React, { useMemo } from "react";
 import { CenteredView, Typography } from "@rebasepro/ui";
-import { RebaseContext, User, UserManagementDelegate, CollectionRegistryController } from "@rebasepro/types";
+import { RebaseContext, User, CollectionRegistryController } from "@rebasepro/types";
 import { PluginProviderStack } from "./PluginProviderStack";
 import { PluginLifecycleManager } from "./PluginLifecycleManager";
 import { AuthControllerContext } from "../contexts";
@@ -18,6 +19,8 @@ import { DatabaseAdminContext } from "../contexts/DatabaseAdminContext";
 import { ModeControllerProvider, AdminModeControllerProvider, SnackbarProvider } from "../contexts";
 import { RebaseI18nProvider } from "../i18n/RebaseI18nProvider";
 import { RebaseRegistryProvider } from "../hooks/useRebaseRegistry";
+import { SchemaDriftProvider } from "../components/SchemaDriftBanner";
+import { GlobalComponentOverrideProvider } from "../contexts/ComponentOverrideContext";
 import { useBuildModeController } from "../hooks/useBuildModeController";
 import { useBuildAdminModeController } from "../hooks/useBuildAdminModeController";
 import { RebaseClientInstanceContext } from "../contexts/RebaseClientInstanceContext";
@@ -25,7 +28,7 @@ import { DialogsProvider } from "../contexts/DialogsProvider";
 import { buildRebaseData, CollectionRegistry } from "@rebasepro/common";
 import { CustomizationControllerContext } from "../contexts/CustomizationControllerContext";
 import { AnalyticsContext } from "../contexts/AnalyticsContext";
-import { InternalUserManagementContext } from "../contexts/InternalUserManagementContext";
+
 import { EffectiveRoleControllerContext } from "../contexts/EffectiveRoleController";
 import { useBuildEffectiveRoleController } from "../hooks/useBuildEffectiveRoleController";
 
@@ -60,12 +63,12 @@ export function Rebase<USER extends User>(props: RebaseProps<USER>) {
         propertyConfigs,
         entityViews,
         entityActions,
-        components,
         apiKey,
-        userManagement: _userManagement,
+
         effectiveRoleController,
         apiUrl,
-        translations
+        translations,
+        components: componentsProp
     } = props;
 
     const plugins = pluginsProp;
@@ -84,13 +87,6 @@ export function Rebase<USER extends User>(props: RebaseProps<USER>) {
         ...((plugins ?? []).flatMap((p) => p.slots ?? []))
     ], [directSlots, plugins]);
 
-    const userManagement = useMemo(() => plugins?.find((p) => p.userManagement)?.userManagement
-        ?? _userManagement
-        ?? {
-            loading: false,
-            users: [],
-            getUser: (uid: string) => null
-        } as UserManagementDelegate<USER>, [plugins, _userManagement]);
 
     // Auth fallback logic
     const clientAuthController = useAuthSubscription(authControllerProp ? undefined : client?.auth);
@@ -159,8 +155,8 @@ export function Rebase<USER extends User>(props: RebaseProps<USER>) {
         entityViews: entityViews ?? [],
         entityActions: entityActions ?? [],
         propertyConfigs: propertyConfigs ?? {},
-        components
-    }), [dateTimeFormat, locale, entityLinkBuilder, plugins, resolvedSlots, entityViews, entityActions, propertyConfigs, components]);
+        components: componentsProp
+    }), [dateTimeFormat, locale, entityLinkBuilder, plugins, resolvedSlots, entityViews, entityActions, propertyConfigs, componentsProp]);
 
     const analyticsController = useMemo(() => ({
         onAnalyticsEvent
@@ -184,6 +180,7 @@ export function Rebase<USER extends User>(props: RebaseProps<USER>) {
 
     const content = (
         <RebaseI18nProvider locale={locale} translations={translations}>
+        <GlobalComponentOverrideProvider overrides={componentsProp}>
         <SnackbarProvider>
         <ModeControllerProvider value={modeController}>
         <AdminModeControllerProvider value={adminModeController}>
@@ -200,18 +197,18 @@ export function Rebase<USER extends User>(props: RebaseProps<USER>) {
                                 value={resolvedDatabaseAdmin}>
                                 <AuthControllerContext.Provider
                                     value={authController}>
-                                    <InternalUserManagementContext.Provider value={userManagement}>
                                         <EffectiveRoleControllerContext.Provider value={activeEffectiveRoleController}>
                                             <DialogsProvider>
+                                                <SchemaDriftProvider>
                                                 <RebaseRegistryProvider>
                                                     <RebaseInternal
                                                         loading={loading}>
                                                         {children}
                                                     </RebaseInternal>
                                                 </RebaseRegistryProvider>
+                                                </SchemaDriftProvider>
                                             </DialogsProvider>
                                         </EffectiveRoleControllerContext.Provider>
-                                    </InternalUserManagementContext.Provider>
                                 </AuthControllerContext.Provider>
                             </DatabaseAdminContext.Provider>
                         </RebaseDataContext.Provider>
@@ -223,6 +220,7 @@ export function Rebase<USER extends User>(props: RebaseProps<USER>) {
         </AdminModeControllerProvider>
         </ModeControllerProvider>
         </SnackbarProvider>
+        </GlobalComponentOverrideProvider>
         </RebaseI18nProvider>
     );
 
@@ -262,13 +260,13 @@ function RebaseInternal({
         && !authController.authLoading
         && (Boolean(authController.user) || authController.loginSkipped);
 
-    if (authReady && plugins && plugins.length > 0) {
+    if (plugins && plugins.length > 0) {
         return (
             <PluginProviderStack
                 plugins={plugins}
                 scope="root"
                 scopeProps={{ context }}>
-                <PluginLifecycleManager plugins={plugins} context={context}/>
+                {authReady && <PluginLifecycleManager plugins={plugins} context={context}/>}
                 {childrenResult}
             </PluginProviderStack>
         );

package/src/core/RebaseProps.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Locale, User, AuthController, AnalyticsEvent, DataDriver, StorageSource, UserConfigurationPersistence, CollectionRegistryController, DatabaseAdmin, UrlController, NavigationStateController, RebaseData, RebaseClient, RebaseContext, UserManagementDelegate, EntityLinkBuilder, RebasePlugin, SlotContribution, PropertyConfig, EntityCustomView, EntityAction, RebaseTranslations } from "@rebasepro/types";
+import { Locale, User, AuthController, AnalyticsEvent, DataDriver, StorageSource, UserConfigurationPersistence, CollectionRegistryController, DatabaseAdmin, UrlController, NavigationStateController, RebaseData, RebaseClient, RebaseContext, EntityLinkBuilder, RebasePlugin, SlotContribution, PropertyConfig, EntityCustomView, EntityAction, RebaseTranslations, ComponentOverrideMap } from "@rebasepro/types";
 
 /** DeepPartial helper — allows partial overrides at any nesting level */
 type DeepPartial<T> = T extends object
@@ -111,19 +111,6 @@ export type RebaseProps<USER extends User> = {
      */
     entityLinkBuilder?: EntityLinkBuilder;
 
-    /**
-     * You can use this props to provide your own user management implementation.
-     * Note that this will not affect the UI, but it will be used to show user information
-     * in various places of the CMS, for example, to show who created or modified an entity,
-     * or to assign ownership of an entity.
-     *
-     * You can also use this data to be retrieved in your custom properties,
-     * for example, to show a list of users in a dropdown.
-     *
-     * If you are using the Rebase user management plugin, this
-     * prop will be implemented automatically.
-     */
-    userManagement?: UserManagementDelegate<USER>;
 
     /**
      * Plugins loaded in the CMS
@@ -150,17 +137,6 @@ export type RebaseProps<USER extends User> = {
      */
     entityActions?: EntityAction[];
 
-    components?: {
-
-        /**
-         * Component to render when a reference is missing
-         */
-        missingReference?: React.ComponentType<{
-            path: string,
-        }>;
-
-    };
-
     /**
      * Controller to simulate different roles when dev mode is active.
      */
@@ -173,5 +149,28 @@ export type RebaseProps<USER extends User> = {
         [locale: string]: DeepPartial<RebaseTranslations>;
     };
 
+    /**
+     * Override built-in UI components with custom implementations.
+     *
+     * Keys are component names from {@link OverridableComponentName}.
+     * Values specify the replacement component and an optional `wrap`
+     * flag for the wrapping pattern.
+     *
+     * @example
+     * ```tsx
+     * <Rebase
+     *     client={client}
+     *     components={{
+     *         "Shell.AppBar": { Component: MyCustomAppBar },
+     *         "Entity.FormActions": {
+     *             Component: MyFormActions,
+     *             wrap: true
+     *         }
+     *     }}
+     * >
+     * ```
+     */
+    components?: ComponentOverrideMap;
+
 };