@rebasepro/core 0.5.0 → 0.6.1

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
@@ -421,7 +408,7 @@ export function LoginView({
                     )}
                 </div>
 
-                {additionalComponent && (
+                {additionalComponent && mode === "buttons" && (
                     <div className="w-full">
                         {additionalComponent}
                     </div>
@@ -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

@@ -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;
+
 };
 

package/src/hooks/data/useCollectionFetch.tsx

@@ -2,6 +2,7 @@ import type { EntityCollection } from "@rebasepro/types";
 import { useEffect, useState, useMemo } from "react";
 import { Entity, FilterValues, User } from "@rebasepro/types";
 import { useData } from "./useData";
+import { isSchemaDriftError, useSchemaDriftContext } from "../../components/SchemaDriftBanner";
 /**
  * @group Hooks and utilities
  */
@@ -83,6 +84,7 @@ export function useCollectionFetch<M extends Record<string, any>, USER extends U
         searchString
     }: CollectionFetchProps<M>): CollectionFetchResult<M> {
     const dataClient = useData();
+    const { reportSchemaDrift } = useSchemaDriftContext();
 
     const sortByProperty = sortBy ? sortBy[0] : undefined;
     const currentSort = sortBy ? sortBy[1] : undefined;
@@ -137,6 +139,10 @@ export function useCollectionFetch<M extends Record<string, any>, USER extends U
             setData([]);
             setDataLoadingError(error);
             setTotalCount(undefined);
+            // Report schema drift to the global banner context
+            if (isSchemaDriftError(error)) {
+                reportSchemaDrift(error.message);
+            }
         };
 
         const accessor = dataClient.collection(path);
@@ -156,7 +162,8 @@ export function useCollectionFetch<M extends Record<string, any>, USER extends U
                 orderBy: orderByParams,
                 searchString,
                 include: includeParams
-            }, (res) => onEntitiesUpdate({ data: res.data as Entity<M>[], meta: res.meta }), onError);
+            }, (res) => onEntitiesUpdate({ data: res.data as Entity<M>[],
+meta: res.meta }), onError);
         } else {
             accessor.find({
                 where: whereParams,
@@ -167,7 +174,8 @@ export function useCollectionFetch<M extends Record<string, any>, USER extends U
                 searchString,
                 include: includeParams
             })
-                .then((res) => onEntitiesUpdate({ data: res.data as Entity<M>[], meta: res.meta }))
+                .then((res) => onEntitiesUpdate({ data: res.data as Entity<M>[],
+meta: res.meta }))
                 .catch(onError);
             return () => {
             };

package/src/hooks/data/useRelationSelector.tsx

@@ -181,7 +181,8 @@ export function useRelationSelector<M extends Record<string, any> = any>(
                 limit: limit,
                 orderBy: undefined,
                 searchString: currentSearch
-            }, (res) => onEntitiesUpdate({ data: res.data as Entity<M>[], meta: res.meta }), onErrorUpdate);
+            }, (res) => onEntitiesUpdate({ data: res.data as Entity<M>[],
+meta: res.meta }), onErrorUpdate);
         } else {
             accessor.find({
                 where: whereParams,
@@ -190,7 +191,8 @@ export function useRelationSelector<M extends Record<string, any> = any>(
                 orderBy: undefined,
                 searchString: currentSearch
             })
-                .then((res) => onEntitiesUpdate({ data: res.data as Entity<M>[], meta: res.meta }))
+                .then((res) => onEntitiesUpdate({ data: res.data as Entity<M>[],
+meta: res.meta }))
                 .catch(onErrorUpdate);
             unsubscribe = () => {};
         }

package/src/hooks/index.tsx

@@ -2,7 +2,6 @@ export * from "./data/useData";
 export * from "./data/useCollectionFetch";
 export * from "./data/useEntityFetch";
 export * from "./data/useRelationSelector";
-export * from "./data/useUserSelector";
 export * from "./data/save";
 export * from "./data/delete";
 
@@ -24,8 +23,6 @@ export * from "./useClipboard";
 export * from "./useLargeLayout";
 export * from "./useCollapsedGroups";
 
-export * from "./useInternalUserManagementController";
-
 export * from "./useBrowserTitleAndIcon";
 export * from "./useSlot";
 export * from "./useCustomizationController";
@@ -45,3 +42,4 @@ export * from "./useRebaseClient";
 export * from "./useAnalyticsController";
 export * from "./useUserConfigurationPersistence";
 export * from "./useResolvedComponent";
+export * from "./useComponentOverride";

package/src/hooks/useCollapsedGroups.ts

@@ -79,7 +79,8 @@ export function useCollapsedGroups(
             const currentlyCollapsed = name in prev
                 ? prev[name]
                 : (defaults?.[name] ?? false);
-            return { ...prev, [name]: !currentlyCollapsed };
+            return { ...prev,
+[name]: !currentlyCollapsed };
         });
     }, [defaults]);
 

package/src/hooks/useComponentOverride.tsx

@@ -0,0 +1,59 @@
+import React, { useContext, useMemo } from "react";
+import type { OverridableComponentName } from "@rebasepro/types";
+import { ComponentOverrideContext } from "../contexts/ComponentOverrideContext";
+
+/**
+ * Resolves a potentially overridden component.
+ *
+ * Resolution order:
+ * 1. Collection-scoped override (highest priority)
+ * 2. Global override
+ * 3. Default component (fallback)
+ *
+ * Supports two override modes:
+ * - **Eject** (default): The override component fully replaces the default.
+ * - **Wrap** (`wrap: true`): The override component wraps the default.
+ *   The default is passed as `OriginalComponent` in props.
+ *
+ * @param name - The overridable component name (e.g. `"Entity.Form"`)
+ * @param DefaultComponent - The built-in default component
+ * @returns The resolved component — either the default, a full replacement, or a wrapper
+ *
+ * @example
+ * ```tsx
+ * import { useComponentOverride } from "@rebasepro/core";
+ *
+ * function EntityFormWrapper(props: EntityFormProps) {
+ *     const ResolvedForm = useComponentOverride("Entity.Form", DefaultEntityForm);
+ *     return <ResolvedForm {...props} />;
+ * }
+ * ```
+ *
+ * @group Hooks
+ */
+export function useComponentOverride<P>(
+    name: OverridableComponentName,
+    DefaultComponent: React.ComponentType<P>
+): React.ComponentType<P> {
+    const { globalOverrides, collectionOverrides } = useContext(ComponentOverrideContext);
+
+    return useMemo(() => {
+        // Collection-level overrides have highest priority
+        const override = collectionOverrides[name] ?? globalOverrides[name];
+
+        if (!override) return DefaultComponent;
+
+        if (override.wrap) {
+            // Wrapping mode: inject OriginalComponent as a prop
+            const UserComponent = override.Component;
+            const Wrapper = (props: P) => (
+                <UserComponent {...(props as Record<string, unknown>)} OriginalComponent={DefaultComponent} />
+            );
+            Wrapper.displayName = `Wrapped(${name})`;
+            return Wrapper as React.ComponentType<P>;
+        }
+
+        // Eject mode: full replacement
+        return override.Component as React.ComponentType<P>;
+    }, [collectionOverrides, globalOverrides, name, DefaultComponent]);
+}