@firecms/core 3.3.0 → 3.4.0-canary.00f9be5

package/src/hooks/useBuildNavigationController.tsx

@@ -1,6 +1,8 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import equal from "react-fast-compare"
 import { useBlocker, useNavigate } from "react-router-dom";
+import { filterPausedPlugins, isProPaused } from "../core/pro_plugins";
+import { useLicenseStatus } from "./useLicenseStatus";
 
 import {
     AuthController,
@@ -22,11 +24,14 @@ import {
 } from "../types";
 import {
     applyPermissionsFunctionIfEmpty,
+    collectionSegmentsFrom,
+    fullPathToCollectionSegments,
     getCollectionByPathOrId,
     mergeDeep,
     removeFunctions,
     removeInitialAndTrailingSlashes,
     resolveCollectionPathIds,
+    resolveCollectionPathSegments,
     resolvePermissions
 } from "../util";
 import { getParentReferencesFromPath } from "../util/parent_references_from_path";
@@ -112,7 +117,7 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
         views: viewsProp,
         adminViews: adminViewsProp,
         viewsOrder,
-        plugins,
+        plugins: allPlugins,
         userConfigPersistence,
         dataSourceDelegate,
         disabled,
@@ -121,6 +126,27 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
 
     const navigate = useNavigate();
 
+    // While PRO is paused, PRO plugins contribute no collections, collection
+    // modifications, views or navigation entries. This hook runs above
+    // `FireCMS`, so the status arrives through the store `FireCMS` publishes to,
+    // and its arrival re-renders this hook, which resolves navigation again.
+    const licenseStatus = useLicenseStatus();
+    const proPaused = isProPaused(licenseStatus);
+    const plugins = useMemo(
+        () => filterPausedPlugins(allPlugins, licenseStatus),
+        [allPlugins, licenseStatus]
+    );
+
+    // Navigation resolves asynchronously, so a resolution started before the
+    // pause changed can finish after one started since. This ref holds the
+    // current pause so the older one is dropped instead of restoring what the
+    // paused plugins contributed. Declared before the effect that refreshes.
+    const proPausedRef = useRef(proPaused);
+    useEffect(() => {
+        proPausedRef.current = proPaused;
+    }, [proPaused]);
+    const resolvedProPausedRef = useRef<boolean | undefined>(undefined);
+
     const collectionsRef = useRef<EntityCollection[] | undefined>(undefined);
     const viewsRef = useRef<CMSView[] | undefined>(undefined);
     const adminViewsRef = useRef<CMSView[] | undefined>(undefined);
@@ -299,7 +325,7 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
             groups: uniqueGroups,
             onNavigationEntriesUpdate: onNavigationEntriesUpdateCallback!,
         };
-    }, [navigationGroupMappings, buildCMSUrlPath, buildUrlCollectionPath, pluginGroups]);
+    }, [navigationGroupMappings, buildCMSUrlPath, buildUrlCollectionPath, pluginGroups, plugins]);
 
     const onNavigationEntriesOrderUpdate = useCallback((entries: NavigationGroupMapping[]) => {
         if (!plugins) {
@@ -339,6 +365,8 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
 
         console.debug("Refreshing navigation");
 
+        const resolvingWhilePaused = proPaused;
+
         try {
 
             const [resolvedCollections = [], resolvedViews, resolvedAdminViews = []] = await Promise.all([
@@ -348,10 +376,21 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
             ]
             );
 
+            // Superseded: a newer resolution runs with the current pause.
+            if (resolvingWhilePaused !== proPausedRef.current)
+                return;
+
             const computedTopLevelNav = computeTopNavigation(resolvedCollections, resolvedViews, resolvedAdminViews, viewsOrder, undefined, onNavigationEntriesOrderUpdate);
 
-            let shouldUpdateTopLevelNav = false;
-            if (!areCollectionListsEqual(collectionsRef.current ?? [], resolvedCollections)) {
+            // When the pause changes, everything below is replaced, including
+            // what the comparisons ignore: they skip functions, and a plugin may
+            // have added only collection callbacks, or only regrouped entries.
+            const pauseChanged = resolvedProPausedRef.current !== undefined
+                && resolvedProPausedRef.current !== resolvingWhilePaused;
+            resolvedProPausedRef.current = resolvingWhilePaused;
+
+            let shouldUpdateTopLevelNav = pauseChanged;
+            if (pauseChanged || !areCollectionListsEqual(collectionsRef.current ?? [], resolvedCollections)) {
                 collectionsRef.current = resolvedCollections;
                 console.debug("Collections have changed", resolvedCollections);
                 shouldUpdateTopLevelNav = true;
@@ -360,7 +399,7 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
                 collectionsRef.current = resolvedCollections;
                 shouldUpdateTopLevelNav = true;
             }
-            if (!equal(viewsRef.current, resolvedViews)) {
+            if (pauseChanged || !equal(viewsRef.current, resolvedViews)) {
                 viewsRef.current = resolvedViews;
                 shouldUpdateTopLevelNav = true;
             }
@@ -397,6 +436,8 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
         viewsProp,
         adminViewsProp,
         computeTopNavigation,
+        plugins,
+        proPaused
     ]);
 
     useEffect(() => {
@@ -405,13 +446,14 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
 
     const getCollection = useCallback((
         idOrPath: string,
-        includeUserOverride = false
+        includeUserOverride = false,
+        pathSegments?: string[]
     ): EC | undefined => {
         const collections = collectionsRef.current;
         if (!collections)
             return undefined;
 
-        const baseCollection = getCollectionByPathOrId(removeInitialAndTrailingSlashes(idOrPath), collections);
+        const baseCollection = getCollectionByPathOrId(removeInitialAndTrailingSlashes(idOrPath), collections, pathSegments);
 
         const userOverride = includeUserOverride ? userConfigPersistence?.getCollectionConfig(idOrPath) : undefined;
         let overriddenCollection = baseCollection;
@@ -505,23 +547,33 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
         throw Error("Expected path starting with " + fullCollectionPath);
     }, [fullCollectionPath]);
 
-    const resolveIdsFrom = useCallback((path: string): string => {
+    const resolveIdsFrom = useCallback((path: string, pathSegments?: string[]): string => {
+        const collections = collectionsRef.current ?? [];
+        return resolveCollectionPathIds(path, collections, pathSegments);
+    }, []);
+
+    const resolveSegmentsFrom = useCallback((pathSegments: string[]): string[] => {
         const collections = collectionsRef.current ?? [];
-        return resolveCollectionPathIds(path, collections);
+        return resolveCollectionPathSegments(pathSegments, collections);
     }, []);
 
-    const getAllParentReferencesForPath = useCallback((path: string): EntityReference[] => {
+    const getAllParentReferencesForPath = useCallback((path: string, pathSegments?: string[]): EntityReference[] => {
         const collections = collectionsRef.current ?? [];
         return getParentReferencesFromPath({
             path,
+            pathSegments,
             collections
         });
     }, []);
 
-    const getParentCollectionIds = useCallback((path: string): string[] => {
+    const getParentCollectionIds = useCallback((path: string, pathSegments?: string[]): string[] => {
 
-        const strings = path.split("/");
-        const oddPathSegments = strings.filter((_, i) => i % 2 === 0);
+        // Positional filtering only picks out the collection segments while no entity id
+        // contains "/"; with one, every following segment shifts. Given the real boundaries
+        // the same rule applies correctly; without them this is the historical reading.
+        const oddPathSegments = pathSegments
+            ? collectionSegmentsFrom(pathSegments)
+            : fullPathToCollectionSegments(path);
         oddPathSegments.pop();
 
         const result: string[][] = [];
@@ -567,13 +619,16 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
         urlPathToDataPath,
         buildUrlCollectionPath,
         resolveIdsFrom,
+        resolveSegmentsFrom,
         topLevelNavigation,
         refreshNavigation,
         getParentReferencesFromPath: getAllParentReferencesForPath,
         getParentCollectionIds,
         convertIdsToPaths,
         navigate,
-        plugins
+        // All of them, paused or not: `FireCMS` sends every key to the license
+        // check and applies the same pause to what it renders.
+        plugins: allPlugins
     };
 }
 

package/src/hooks/useFireCMSContext.tsx

@@ -12,6 +12,7 @@ import { useCustomizationController } from "./useCustomizationController";
 import { useAnalyticsController } from "./useAnalyticsController";
 import React, { useEffect } from "react";
 import { useInternalUserManagementController } from "./useInternalUserManagementController";
+import { useLicenseStatus } from "./useLicenseStatus";
 
 /**
  * Hook to retrieve the {@link FireCMSContext}.
@@ -36,6 +37,7 @@ export const useFireCMSContext = <USER extends User = User, AuthControllerType e
     const customizationController = useCustomizationController();
     const analyticsController = useAnalyticsController();
     const userManagement = useInternalUserManagementController<USER>();
+    const licenseStatus = useLicenseStatus();
 
     const fireCMSContextRef = React.useRef<FireCMSContext<USER, AuthControllerType>>({
         authController,
@@ -49,7 +51,8 @@ export const useFireCMSContext = <USER extends User = User, AuthControllerType e
         dialogsController,
         customizationController,
         analyticsController,
-        userManagement
+        userManagement,
+        licenseStatus
     });
 
     useEffect(() => {
@@ -65,9 +68,10 @@ export const useFireCMSContext = <USER extends User = User, AuthControllerType e
             dialogsController,
             customizationController,
             analyticsController,
-            userManagement
+            userManagement,
+            licenseStatus
         };
-    }, [authController, dialogsController, navigation, sideDialogsController]);
+    }, [authController, dialogsController, navigation, sideDialogsController, licenseStatus]);
 
     return fireCMSContextRef.current;
 }

package/src/hooks/useLicenseStatus.tsx

@@ -0,0 +1,32 @@
+import { useContext, useSyncExternalStore } from "react";
+import { AccessResponse } from "../types";
+import {
+    getLicenseStatusSnapshot,
+    getServerLicenseStatusSnapshot,
+    LicenseStatusContext,
+    subscribeLicenseStatus
+} from "../contexts/LicenseStatusContext";
+
+/**
+ * The FireCMS license status of this project: whether PRO runs on a trial, is
+ * licensed, or is paused, plus the link to get a license.
+ *
+ * `null` until the license check answers, and when it is not sent at all
+ * (`telemetry={false}` without an `apiKey`). A response from an older server
+ * may lack `licenseState`; treat that as unknown. PRO features are paused when
+ * `blocked` is true; use `isProPaused(status)` for that check.
+ *
+ * Works inside `FireCMS` and also above it, e.g. in the component that calls
+ * `useBuildNavigationController`.
+ *
+ * @group Hooks and utilities
+ */
+export function useLicenseStatus(): AccessResponse | null {
+    const fromContext = useContext(LicenseStatusContext);
+    const published = useSyncExternalStore(
+        subscribeLicenseStatus,
+        getLicenseStatusSnapshot,
+        getServerLicenseStatusSnapshot
+    );
+    return fromContext !== undefined ? fromContext : published;
+}

package/src/hooks/useProjectLog.tsx

@@ -1,14 +1,10 @@
 import { useEffect, useRef, useState } from "react";
-import { AuthController, DataSourceDelegate, FireCMSPlugin } from "../types";
+import { AccessResponse, AuthController, DataSourceDelegate, FireCMSPlugin } from "../types";
+import { PRO_PLUGIN_KEYS } from "../core/pro_plugins";
 
 export const DEFAULT_SERVER_DEV = "https://api-kdoe6pj3qq-ey.a.run.app";
 export const DEFAULT_SERVER = "https://api.firecms.co";
 
-export type AccessResponse = {
-    blocked?: boolean;
-    message?: string;
-}
-
 async function makeRequest(authController: AuthController, dataSourceKey: string, pluginKeys: string[] | undefined, apiKey?: string): Promise<AccessResponse> {
     let idToken: string | null;
     try {
@@ -40,24 +36,46 @@ export interface UseProjectLogParams {
     apiKey?: string;
     authController: AuthController;
     dataSourceDelegate: DataSourceDelegate;
+    /**
+     * Every plugin the app mounts, before any are paused: the server decides
+     * from these keys whether the project needs a license.
+     */
     plugins?: FireCMSPlugin<any, any, any>[];
+    /**
+     * When false, no request is sent, unless the request is a license check:
+     * with an `apiKey`, or with a PRO plugin mounted, it is always sent.
+     */
+    telemetry?: boolean;
 }
 
 export function useProjectLog({
                                   authController,
                                   dataSourceDelegate,
                                   plugins,
-                                  apiKey
+                                  apiKey,
+                                  telemetry = true
                               }: UseProjectLogParams): AccessResponse | null {
     const [accessResponse, setAccessResponse] = useState<AccessResponse | null>(null);
     const accessedUserRef = useRef<string | null>(null);
     const dataSourceKey = dataSourceDelegate.key;
     const pluginKeys = plugins?.map(plugin => plugin.key);
+    // Opting out is for apps without PRO plugins. With one mounted, the
+    // request is what starts the trial and pauses PRO when it ends, so
+    // skipping it would unlock PRO for good.
+    const runsProPlugin = (pluginKeys ?? []).some(key => PRO_PLUGIN_KEYS.includes(key));
+    const enabled = Boolean(apiKey) || runsProPlugin || telemetry !== false;
     useEffect(() => {
+        if (!enabled) return;
         if (authController.user && authController.user.uid !== accessedUserRef.current && !authController.initialLoading) {
-            makeRequest(authController, dataSourceKey, pluginKeys, apiKey).then(setAccessResponse);
+            makeRequest(authController, dataSourceKey, pluginKeys, apiKey)
+                .then((response) => setAccessResponse(response && typeof response === "object" ? response : null))
+                .catch((error) => {
+                    // The check never gates the CMS, so a failed one only
+                    // leaves the license status unknown.
+                    console.debug("FireCMS license check failed", error);
+                });
             accessedUserRef.current = authController.user.uid;
         }
-    }, [authController, dataSourceKey, pluginKeys]);
+    }, [authController, dataSourceKey, pluginKeys, enabled]);
     return accessResponse;
 }

package/src/hooks/useResolvedNavigationFrom.tsx

@@ -80,12 +80,14 @@ export function resolveNavigationFrom<M extends Record<string, any>, USER extend
             if (entry.type === "collection") {
                 return Promise.resolve(entry);
             } else if (entry.type === "entity") {
-                const collection = navigation.getCollection(entry.path);
+                const collection = navigation.getCollection(entry.path, false, entry.pathSegments);
                 if (!collection) {
                     throw Error(`No collection defined in the navigation for the entity with path ${entry.path}`);
                 }
                 return dataSource.fetchEntity({
                     path: entry.path,
+                    // The navigation entry already knows the real segment boundaries.
+                    pathSegments: entry.pathSegments,
                     entityId: entry.entityId,
                     collection
                 })

package/src/hooks/useTranslation.ts

@@ -23,8 +23,10 @@ export function useTranslation() {
      * Also supports i18next interpolation variables, e.g.
      *   t("add_to_field", { fieldName: "Tags" })
      *   t("error_deleting", { message: err.message })
+     * Pass `count` as a number to pick a plural form (`key_one`, falling back
+     * to `key`); i18next ignores a string `count`.
      */
-    const typedT = (key: string, vars?: Record<string, string>): string =>
+    const typedT = (key: string, vars?: Record<string, string | number>): string =>
         t(key, vars) as string;
 
     return { t: typedT, i18n };

package/src/hooks/useValidateAuthenticator.tsx

@@ -74,6 +74,10 @@ export function useValidateAuthenticator<USER extends User = any>
 
         if (authenticator instanceof Function && delegateUser && !equal(checkedUserRef.current?.uid, delegateUser.uid)) {
             setAuthLoading(true);
+            // Reset the error of any previous authentication attempt. Otherwise, a
+            // rejected user would keep `canAccessMainView` to false for every user
+            // logging in afterwards, locking them out of the CMS until a page reload.
+            setNotAllowedError(false);
             try {
                 const allowed = await authenticator({
                     user: delegateUser,

package/src/i18n/FireCMSi18nProvider.tsx

@@ -1,17 +1,76 @@
-import React, { PropsWithChildren, useEffect, useRef } from "react";
+import React, { PropsWithChildren, useContext, useEffect, useMemo, useRef } from "react";
 import i18next, { i18n } from "i18next";
-import { I18nextProvider, initReactI18next } from "react-i18next";
+import { I18nContext, I18nextProvider, initReactI18next } from "react-i18next";
 import { en } from "../locales/en";
 import { es } from "../locales/es";
-import { de } from "../locales/de";
-import { fr } from "../locales/fr";
-import { it } from "../locales/it";
-import { hi } from "../locales/hi";
-import { pt } from "../locales/pt";
 import { FireCMSTranslations } from "../types/translations";
 
 const FIRECMS_NS = "firecms_core";
 
+/**
+ * Translations that are not part of the bundle every app downloads.
+ *
+ * All eight locales used to be imported statically, which put ~305KB of strings
+ * — every language, for every user — into `@firecms/core` and therefore onto the
+ * startup path of every FireCMS app. Only the active language is ever read.
+ *
+ * `en` and `es` stay static: `en` is the fallback language and the base every
+ * unknown locale is seeded from, and both are re-exported from the package root,
+ * so a consumer may be importing them by name.
+ *
+ * The specifiers are written out rather than built from a template so bundlers
+ * can see them and emit one chunk per locale.
+ */
+const localeLoaders: Record<string, () => Promise<FireCMSTranslations>> = {
+    de: () => import("../locales/de").then((m) => m.de),
+    fr: () => import("../locales/fr").then((m) => m.fr),
+    it: () => import("../locales/it").then((m) => m.it),
+    hi: () => import("../locales/hi").then((m) => m.hi),
+    pt: () => import("../locales/pt").then((m) => m.pt),
+    pl: () => import("../locales/pl").then((m) => m.pl)
+};
+
+/**
+ * Locale bundles available synchronously: the two static ones plus anything a
+ * previous provider already fetched. `buildResources` reads this, so a rebuild
+ * triggered by a changing `translations` prop cannot overwrite a lazily loaded
+ * language with the English base it would otherwise fall back to.
+ */
+const loadedLocales: Record<string, FireCMSTranslations> = {
+    en,
+    es
+};
+
+const inFlightLocales: Record<string, Promise<void>> = {};
+
+/**
+ * Fetch a locale bundle into `loadedLocales`.
+ *
+ * Returns undefined when the bundle is already in memory or there is nothing to
+ * fetch, so callers can stay synchronous in the common case.
+ */
+function loadLocale(locale?: string): Promise<void> | undefined {
+    if (!locale) return undefined;
+    const language = locale.split("-")[0];
+    if (loadedLocales[language]) return undefined;
+    const loader = localeLoaders[language];
+    if (!loader) return undefined;
+    if (!inFlightLocales[language]) {
+        inFlightLocales[language] = loader()
+            .then((bundle) => {
+                loadedLocales[language] = bundle;
+            })
+            .catch(() => {
+                // A locale that fails to load falls back to English, which is
+                // what an unknown locale has always done.
+            })
+            .finally(() => {
+                delete inFlightLocales[language];
+            });
+    }
+    return inFlightLocales[language];
+}
+
 export const FIRECMS_LOCALE_STORAGE_KEY = "firecms_locale";
 
 /** DeepPartial helper — allows partial overrides at any nesting level */
@@ -49,21 +108,44 @@ export function FireCMSi18nProvider({
     translations,
     children
 }: PropsWithChildren<FireCMSi18nProviderProps>) {
+
+    // A FireCMS i18next instance already in context means this provider is nested —
+    // e.g. FireCMSCloudApp mounts one inside the one the host app already mounted.
+    // A second instance built only from the defaults would shadow the parent's and
+    // silently drop every translation the host registered, leaving the host's own
+    // strings to render as raw keys.
+    //
+    // So the nested instance is *seeded* from the parent's resources rather than
+    // sharing them. Sharing one mutable instance was the obvious alternative and is
+    // wrong: bundles added by one provider outlive it, so opening one project's app
+    // and then switching to another left the first project's translations answering
+    // for keys the second never defined. Copying keeps each provider's strings to
+    // itself, which is also how this behaved before nesting was handled at all.
+    const parentI18n = useContext(I18nContext)?.i18n;
+    const parentInstance = parentI18n?.hasResourceBundle?.("en", FIRECMS_NS)
+        ? parentI18n
+        : undefined;
+
     const i18nRef = useRef<i18n | null>(null);
     const [ready, setReady] = React.useState(false);
 
     if (!i18nRef.current) {
         const instance = i18next.createInstance();
 
-        // Build the initial resources: English baseline + any consumer overrides
-        const resources = buildResources(translations);
+        // English baseline + this provider's overrides, with anything the parent
+        // already resolved layered in underneath the overrides.
+        const resources = buildResourcesWithParent(translations, parentInstance);
 
-        let initialLocale = locale;
+        let initialLocale = parentInstance?.language ?? locale;
         if (typeof window !== "undefined") {
             const stored = localStorage.getItem(FIRECMS_LOCALE_STORAGE_KEY);
             if (stored) initialLocale = stored;
         }
 
+        // Kicked off before init so the request is in flight while i18next sets
+        // itself up, rather than after it.
+        const pendingInitialLocale = loadLocale(initialLocale);
+
         instance
             .use(initReactI18next)
             .init({
@@ -76,19 +158,54 @@ export function FireCMSi18nProvider({
                     // React already escapes — don't double-escape
                     escapeValue: false,
                 },
+                react: {
+                    // Locale bundles now arrive after init, and a bundle landing
+                    // in the store raises an `added` event rather than
+                    // `languageChanged`. react-i18next binds only the latter by
+                    // default, so without this a language switched from the
+                    // toggle would fetch its strings, put them in the store, and
+                    // leave the UI sitting on the English fallback.
+                    bindI18nStore: "added"
+                },
             }, () => {
-                setReady(true);
+                if (!pendingInitialLocale) {
+                    setReady(true);
+                    return;
+                }
+                // Holding the first render until the active language has arrived
+                // keeps a non-English user from seeing English strings repaint.
+                // Only locales outside the static pair wait, and only on the
+                // first mount.
+                pendingInitialLocale.then(() => {
+                    applyLoadedLocale(instance, initialLocale, translations, parentInstance);
+                    setReady(true);
+                });
             });
 
         instance.on("languageChanged", (lng) => {
             if (typeof window !== "undefined") {
                 localStorage.setItem(FIRECMS_LOCALE_STORAGE_KEY, lng);
             }
+            // Switching to a language whose bundle has not been fetched yet
+            // renders the English fallback until it lands.
+            loadLocale(lng)?.then(() => applyLoadedLocale(instance, lng, translations, parentInstance));
         });
 
         i18nRef.current = instance;
     }
 
+    // Follow the parent's language, so a switch made outside this provider is not
+    // stranded on the other side of the boundary.
+    useEffect(() => {
+        if (!parentInstance || !i18nRef.current) return;
+        const instance = i18nRef.current;
+        const follow = (lng: string) => {
+            if (instance.language !== lng) instance.changeLanguage(lng);
+        };
+        parentInstance.on("languageChanged", follow);
+        return () => { parentInstance.off("languageChanged", follow); };
+    }, [parentInstance]);
+
     // When `locale` prop changes, switch language on the existing instance
     // ONLY if the user hasn't explicitly set a preference
     useEffect(() => {
@@ -100,10 +217,16 @@ export function FireCMSi18nProvider({
         }
     }, [locale]);
 
-    // When consumer translations prop changes, update the resource bundles
+    // When consumer translations prop changes, update the resource bundles.
+    //
+    // Built through the same layering as the initial instance, parent included.
+    // Rebuilding from the bare English baseline here would overwrite whatever the
+    // host registered — a nested provider without translations of its own would
+    // reset the host's overrides to the built-in strings. That was already true;
+    // it was simply invisible until `bindI18nStore` made a store write repaint.
     useEffect(() => {
         if (!i18nRef.current) return;
-        const resources = buildResources(translations);
+        const resources = buildResourcesWithParent(translations, parentInstance);
         for (const [lang, bundle] of Object.entries(resources)) {
             i18nRef.current.addResourceBundle(
                 lang,
@@ -113,7 +236,7 @@ export function FireCMSi18nProvider({
                 true   // overwrite existing keys
             );
         }
-    }, [translations]);
+    }, [translations, parentInstance]);
 
     if (!ready || !i18nRef.current) return null;
 
@@ -124,6 +247,64 @@ export function FireCMSi18nProvider({
     );
 }
 
+/**
+ * Push a lazily loaded locale bundle into a live i18next instance.
+ *
+ * Consumer overrides are re-applied on top, because the instance may already be
+ * holding a bundle that `buildResources` seeded from English for this language,
+ * and the real translations have to win over that seed while the overrides win
+ * over both.
+ */
+function applyLoadedLocale(
+    instance: i18n,
+    locale: string,
+    translations?: { [locale: string]: DeepPartial<FireCMSTranslations> },
+    parentInstance?: i18n
+) {
+    const language = locale.split("-")[0];
+    if (!loadedLocales[language]) return;
+    const bundle = buildResourcesWithParent(translations, parentInstance)[language]?.[FIRECMS_NS];
+    if (!bundle) return;
+    instance.addResourceBundle(
+        language,
+        FIRECMS_NS,
+        bundle,
+        true,  // deep merge
+        true   // overwrite the English seed
+    );
+}
+
+/**
+ * The full resource map for this provider: the locale bundles currently in
+ * memory, then anything the parent provider already resolved, then this
+ * provider's own overrides on top.
+ *
+ * Shared by every path that writes into the instance — initial construction, a
+ * changed `translations` prop, and a locale arriving late — so all three layer
+ * in the same order and none of them can undo another.
+ */
+function buildResourcesWithParent(
+    translations?: { [locale: string]: DeepPartial<FireCMSTranslations> },
+    parentInstance?: i18n
+): Record<string, Record<string, object>> {
+    const resources = buildResources(translations);
+    if (!parentInstance) return resources;
+
+    const inherited: Record<string, any> = parentInstance.services?.resourceStore?.data ?? {};
+    for (const [lang, namespaces] of Object.entries(inherited)) {
+        const bundle = (namespaces as any)?.[FIRECMS_NS];
+        if (!bundle) continue;
+        resources[lang] = {
+            [FIRECMS_NS]: {
+                ...(resources[lang]?.[FIRECMS_NS] ?? {}),
+                ...bundle,
+                ...(translations?.[lang] ?? {})
+            }
+        };
+    }
+    return resources;
+}
+
 /**
  * Build an i18next resources object from the English baseline plus any
  * consumer-provided overrides.
@@ -131,15 +312,10 @@ export function FireCMSi18nProvider({
 function buildResources(
     translations?: { [locale: string]: DeepPartial<FireCMSTranslations> }
 ): Record<string, Record<string, object>> {
-    const resources: Record<string, Record<string, object>> = {
-        en: { [FIRECMS_NS]: { ...en } },
-        es: { [FIRECMS_NS]: { ...es } },
-        de: { [FIRECMS_NS]: { ...de } },
-        fr: { [FIRECMS_NS]: { ...fr } },
-        it: { [FIRECMS_NS]: { ...it } },
-        hi: { [FIRECMS_NS]: { ...hi } },
-        pt: { [FIRECMS_NS]: { ...pt } },
-    };
+    const resources: Record<string, Record<string, object>> = {};
+    for (const [lang, bundle] of Object.entries(loadedLocales)) {
+        resources[lang] = { [FIRECMS_NS]: { ...bundle } };
+    }
 
     if (!translations) return resources;