@firecms/core 3.2.0 → 3.3.0-canary.102f274

package/src/locales/es.ts

@@ -445,6 +445,8 @@ export const es: FireCMSTranslations = {
     cms_users: "Usuarios del CMS",
     roles_menu: "Roles",
     project_settings: "Ajustes del proyecto",
+    firestore_manager: "Gestor de Firestore",
+    manage_your_firestore_data: "Gestiona tus datos de Firestore",
 
     // ─── FireCMS Cloud Login ──────────────────────────────────────
     build_admin_panel_in_minutes: "Crea tu panel de administración de Firebase en minutos",
@@ -690,6 +692,17 @@ export const es: FireCMSTranslations = {
     settings_appcheck_updated: "AppCheck actualizado",
     settings_appcheck_error: "Error al actualizar AppCheck",
 
+    // --- Permission Error View ---
+    missing_firestore_security_rules: "Faltan Reglas de Seguridad de Firestore",
+    firecms_cloud_requires_security_rule: "FireCMS Cloud requiere una regla de seguridad específica en tu Firestore para conceder acceso a los usuarios autenticados. La colección",
+    cannot_be_accessed_without_it: "no puede ser accedida sin ella.",
+    required_security_rule: "Regla de seguridad requerida",
+    fix_automatically: "Corregir automáticamente",
+    open_firebase_rules: "Abrir Reglas de Firebase",
+    security_rules_updated_successfully: "¡Reglas de seguridad actualizadas con éxito! Por favor recarga la página para cargar tus datos.",
+    sec_rules_fixing: "Corrigiendo...",
+    sec_rules_fixed: "¡Corregido!",
+
     // ─── Text Search Dialog ─────────────────────────────────────
     text_search_dialog_title: "Activar búsqueda de texto",
     text_search_local_not_recommended: "La búsqueda de texto local no es recomendable para colecciones grandes.",
@@ -699,5 +712,19 @@ export const es: FireCMSTranslations = {
     text_search_own_implementation: "Has implementado tu propio controlador de búsqueda de texto. Puedes activar la búsqueda de texto para tu colección.",
     text_search_enable_for_collection: "Activar para esta colección",
     text_search_enable_for_project: "Activar para el proyecto",
-    text_search_enabled_snackbar: "Búsqueda de texto local activada"
+    text_search_enabled_snackbar: "Búsqueda de texto local activada",
+
+    // ─── GCP Marketplace ─────────────────────────────────────────
+    marketplace_managed_by_gcp: "Gestionado a través de GCP Marketplace",
+    marketplace_billing_note: "Tu suscripción se gestiona a través de Google Cloud Marketplace. Los cambios de plan, la facturación y la cancelación se realizan en la consola de GCP.",
+    marketplace_manage_in_gcp_console: "Gestionar en la consola de GCP",
+    marketplace_plan_changes_note: "Para cambiar tu plan o cancelar, visita tus pedidos de GCP Marketplace.",
+    marketplace_welcome_title: "¡Bienvenido desde GCP Marketplace!",
+    marketplace_welcome_subtitle: "Tu suscripción de Google Cloud Marketplace está activa. Selecciona un proyecto existente o crea uno nuevo para vincularlo.",
+    marketplace_select_or_create_project: "Seleccionar o crear un proyecto",
+    marketplace_link_project: "Vincular proyecto",
+    marketplace_linking: "Vinculando proyecto…",
+    marketplace_link_success: "¡Proyecto vinculado con éxito! Redirigiendo…",
+    marketplace_link_error: "Error al vincular el proyecto. Por favor, inténtalo de nuevo.",
+    marketplace_no_account_id: "No se encontró un ID de cuenta de GCP Marketplace. Por favor, comienza desde GCP Marketplace.",
 };

package/src/locales/fr.ts

@@ -437,6 +437,8 @@ export const fr: FireCMSTranslations = {
     cms_users: "Utilisateurs du CMS",
     roles_menu: "Rôles",
     project_settings: "Paramètres du projet",
+    firestore_manager: "Gestionnaire Firestore",
+    manage_your_firestore_data: "Gérez vos données Firestore",
 
     // ─── FireCMS Cloud Login ──────────────────────────────────────
     build_admin_panel_in_minutes: "Créez votre panneau d'administration Firebase en quelques minutes",
@@ -678,6 +680,17 @@ export const fr: FireCMSTranslations = {
     settings_appcheck_updated: "AppCheck mis à jour",
     settings_appcheck_error: "Erreur lors de la mise à jour d'AppCheck",
 
+    // --- Permission Error View ---
+    missing_firestore_security_rules: "Règles de sécurité Firestore manquantes",
+    firecms_cloud_requires_security_rule: "FireCMS Cloud nécessite une règle de sécurité spécifique dans votre Firestore pour accorder l'accès aux utilisateurs authentifiés. La collection",
+    cannot_be_accessed_without_it: "ne peut pas être consultée sans elle.",
+    required_security_rule: "Règle de sécurité requise",
+    fix_automatically: "Corriger automatiquement",
+    open_firebase_rules: "Ouvrir les règles Firebase",
+    security_rules_updated_successfully: "Règles de sécurité mises à jour avec succès! Veuillez rafraîchir la page pour charger vos données.",
+    sec_rules_fixing: "Correction...",
+    sec_rules_fixed: "Corrigé!",
+
     // ─── Text Search Dialog ─────────────────────────────────────
     text_search_dialog_title: "Activer la recherche de texte",
     text_search_local_not_recommended: "La recherche de texte locale n'est pas recommandée pour les grandes collections.",
@@ -687,5 +700,19 @@ export const fr: FireCMSTranslations = {
     text_search_own_implementation: "Vous avez implémenté votre propre contrôleur de recherche de texte. Vous pouvez activer la recherche de texte pour votre collection.",
     text_search_enable_for_collection: "Activer pour cette collection",
     text_search_enable_for_project: "Activer pour le projet",
-    text_search_enabled_snackbar: "Recherche de texte locale activée"
+    text_search_enabled_snackbar: "Recherche de texte locale activée",
+
+    // ─── GCP Marketplace ─────────────────────────────────────────
+    marketplace_managed_by_gcp: "Géré via GCP Marketplace",
+    marketplace_billing_note: "Votre abonnement est géré via Google Cloud Marketplace. Les modifications de plan, la facturation et l'annulation sont gérées dans la console GCP.",
+    marketplace_manage_in_gcp_console: "Gérer dans la console GCP",
+    marketplace_plan_changes_note: "Pour modifier votre plan ou annuler, visitez vos commandes GCP Marketplace.",
+    marketplace_welcome_title: "Bienvenue depuis GCP Marketplace !",
+    marketplace_welcome_subtitle: "Votre abonnement Google Cloud Marketplace est actif. Sélectionnez un projet existant ou créez-en un nouveau pour le lier.",
+    marketplace_select_or_create_project: "Sélectionner ou créer un projet",
+    marketplace_link_project: "Lier le projet",
+    marketplace_linking: "Liaison du projet en cours…",
+    marketplace_link_success: "Projet lié avec succès ! Redirection…",
+    marketplace_link_error: "Erreur lors de la liaison du projet. Veuillez réessayer.",
+    marketplace_no_account_id: "Aucun identifiant de compte GCP Marketplace trouvé. Veuillez commencer depuis GCP Marketplace.",
 };

package/src/locales/hi.ts

@@ -437,6 +437,8 @@ export const hi: FireCMSTranslations = {
     cms_users: "CMS उपयोगकर्ता",
     roles_menu: "भूमिकाएँ",
     project_settings: "परियोजना सेटिंग",
+    firestore_manager: "Firestore मैनेजर",
+    manage_your_firestore_data: "अपने Firestore डेटा का प्रबंधन करें",
 
     // ─── FireCMS Cloud Login ──────────────────────────────────────
     build_admin_panel_in_minutes: "मिनटों में अपना Firebase एडमिन पैनल बनाएं",
@@ -678,6 +680,17 @@ export const hi: FireCMSTranslations = {
     settings_appcheck_updated: "AppCheck अपडेट किया गया",
     settings_appcheck_error: "AppCheck अपडेट करने में त्रुटि",
 
+    // --- Permission Error View ---
+    missing_firestore_security_rules: "Firestore सुरक्षा नियम गायब हैं",
+    firecms_cloud_requires_security_rule: "FireCMS Cloud को आपके Firestore में प्रमाणित उपयोगकर्ताओं को एक्सेस देने के लिए एक विशिष्ट सुरक्षा नियम की आवश्यकता है। संग्रह",
+    cannot_be_accessed_without_it: "पर इसके बिना नहीं पहुंचा जा सकता।",
+    required_security_rule: "आवश्यक सुरक्षा नियम",
+    fix_automatically: "स्वचालित रूप से ठीक करें",
+    open_firebase_rules: "Firebase नियम खोलें",
+    security_rules_updated_successfully: "सुरक्षा नियम सफलतापूर्वक अपडेट किए गए! कृपया अपना डेटा लोड करने के लिए पेज को रीफ्रेश करें।",
+    sec_rules_fixing: "ठीक किया जा रहा है...",
+    sec_rules_fixed: "ठीक हो गया!",
+
     // ─── Text Search Dialog ─────────────────────────────────────
     text_search_dialog_title: "पाठ खोज सक्षम करें",
     text_search_local_not_recommended: "बड़ी संग्रहों के लिए स्थानीय पाठ खोज की अनुशंसा नहीं की जाती है।",
@@ -687,5 +700,19 @@ export const hi: FireCMSTranslations = {
     text_search_own_implementation: "आपने अपना स्वयं का पाठ खोज नियंत्रक लागू किया है। आप अपने संग्रह के लिए पाठ खोज सक्षम कर सकते हैं।",
     text_search_enable_for_collection: "इस संग्रह के लिए सक्षम करें",
     text_search_enable_for_project: "प्रोजेक्ट के लिए सक्षम करें",
-    text_search_enabled_snackbar: "स्थानीय पाठ खोज सक्षम की गई"
+    text_search_enabled_snackbar: "स्थानीय पाठ खोज सक्षम की गई",
+
+    // ─── GCP Marketplace ─────────────────────────────────────────
+    marketplace_managed_by_gcp: "GCP Marketplace के माध्यम से प्रबंधित",
+    marketplace_billing_note: "आपकी सदस्यता Google Cloud Marketplace के माध्यम से प्रबंधित है। योजना परिवर्तन, बिलिंग और रद्दीकरण GCP कंसोल में संभाले जाते हैं।",
+    marketplace_manage_in_gcp_console: "GCP कंसोल में प्रबंधित करें",
+    marketplace_plan_changes_note: "अपनी योजना बदलने या रद्द करने के लिए, अपने GCP Marketplace ऑर्डर पर जाएं।",
+    marketplace_welcome_title: "GCP Marketplace से स्वागत है!",
+    marketplace_welcome_subtitle: "आपकी Google Cloud Marketplace सदस्यता सक्रिय है। इसे लिंक करने के लिए एक मौजूदा प्रोजेक्ट चुनें या एक नया बनाएं।",
+    marketplace_select_or_create_project: "प्रोजेक्ट चुनें या बनाएं",
+    marketplace_link_project: "प्रोजेक्ट लिंक करें",
+    marketplace_linking: "प्रोजेक्ट लिंक हो रहा है…",
+    marketplace_link_success: "प्रोजेक्ट सफलतापूर्वक लिंक हो गया! रीडायरेक्ट हो रहा है…",
+    marketplace_link_error: "प्रोजेक्ट लिंक करने में त्रुटि। कृपया पुनः प्रयास करें।",
+    marketplace_no_account_id: "कोई GCP Marketplace खाता ID नहीं मिली। कृपया GCP Marketplace से शुरू करें।",
 };

package/src/locales/it.ts

@@ -437,6 +437,8 @@ export const it: FireCMSTranslations = {
     cms_users: "Utenti CMS",
     roles_menu: "Ruoli",
     project_settings: "Impostazioni del progetto",
+    firestore_manager: "Gestore Firestore",
+    manage_your_firestore_data: "Gestisci i tuoi dati Firestore",
 
     // ─── FireCMS Cloud Login ──────────────────────────────────────
     build_admin_panel_in_minutes: "Crea il tuo pannello di amministrazione Firebase in pochi minuti",
@@ -678,6 +680,17 @@ export const it: FireCMSTranslations = {
     settings_appcheck_updated: "AppCheck aggiornato",
     settings_appcheck_error: "Errore nell'aggiornamento di AppCheck",
 
+    // --- Permission Error View ---
+    missing_firestore_security_rules: "Regole di sicurezza Firestore mancanti",
+    firecms_cloud_requires_security_rule: "FireCMS Cloud richiede una regola di sicurezza specifica nel tuo Firestore per concedere l'accesso agli utenti autenticati. La collezione",
+    cannot_be_accessed_without_it: "non può essere visitata senza di essa.",
+    required_security_rule: "Regola di sicurezza richiesta",
+    fix_automatically: "Correggi automaticamente",
+    open_firebase_rules: "Apri le regole Firebase",
+    security_rules_updated_successfully: "Regole di sicurezza aggiornate con successo! Per favore aggiorna la pagina per caricare i tuoi dati.",
+    sec_rules_fixing: "Correzione...",
+    sec_rules_fixed: "Corretto!",
+
     // ─── Text Search Dialog ─────────────────────────────────────
     text_search_dialog_title: "Abilita ricerca testuale",
     text_search_local_not_recommended: "La ricerca testuale locale non è consigliata per collezioni di grandi dimensioni.",
@@ -687,5 +700,19 @@ export const it: FireCMSTranslations = {
     text_search_own_implementation: "Hai implementato il tuo controller di ricerca testuale. Puoi abilitare la ricerca testuale per la tua collezione.",
     text_search_enable_for_collection: "Abilita per questa collezione",
     text_search_enable_for_project: "Abilita per il progetto",
-    text_search_enabled_snackbar: "Ricerca testuale locale abilitata"
+    text_search_enabled_snackbar: "Ricerca testuale locale abilitata",
+
+    // ─── GCP Marketplace ─────────────────────────────────────────
+    marketplace_managed_by_gcp: "Gestito tramite GCP Marketplace",
+    marketplace_billing_note: "Il tuo abbonamento è gestito tramite Google Cloud Marketplace. Le modifiche al piano, la fatturazione e la cancellazione vengono gestite nella console GCP.",
+    marketplace_manage_in_gcp_console: "Gestisci nella console GCP",
+    marketplace_plan_changes_note: "Per modificare il piano o annullare, visita i tuoi ordini GCP Marketplace.",
+    marketplace_welcome_title: "Benvenuto da GCP Marketplace!",
+    marketplace_welcome_subtitle: "Il tuo abbonamento Google Cloud Marketplace è attivo. Seleziona un progetto esistente o creane uno nuovo per collegarlo.",
+    marketplace_select_or_create_project: "Seleziona o crea un progetto",
+    marketplace_link_project: "Collega progetto",
+    marketplace_linking: "Collegamento del progetto in corso…",
+    marketplace_link_success: "Progetto collegato con successo! Reindirizzamento…",
+    marketplace_link_error: "Errore durante il collegamento del progetto. Riprova.",
+    marketplace_no_account_id: "Nessun ID account GCP Marketplace trovato. Inizia dal GCP Marketplace.",
 };

package/src/locales/pt.ts

@@ -442,6 +442,8 @@ export const pt: FireCMSTranslations = {
     cms_users: "Utilizadores do CMS",
     roles_menu: "Funções",
     project_settings: "Definições do projeto",
+    firestore_manager: "Gerenciador do Firestore",
+    manage_your_firestore_data: "Gerencie os seus dados do Firestore",
 
     // ─── FireCMS Cloud Login ──────────────────────────────────────
     build_admin_panel_in_minutes: "Construa o Seu Painel de Administração Firebase em Minutos",
@@ -687,6 +689,17 @@ export const pt: FireCMSTranslations = {
     settings_appcheck_updated: "AppCheck atualizado",
     settings_appcheck_error: "Erro ao atualizar o AppCheck",
 
+    // --- Permission Error View ---
+    missing_firestore_security_rules: "Regras de Segurança do Firestore Ausentes",
+    firecms_cloud_requires_security_rule: "O FireCMS Cloud requer uma regra de segurança específica no seu Firestore para conceder acesso a usuários autenticados. A coleção",
+    cannot_be_accessed_without_it: "não pode ser acessada sem ela.",
+    required_security_rule: "Regra de segurança obrigatória",
+    fix_automatically: "Corrigir automaticamente",
+    open_firebase_rules: "Abrir Regras do Firebase",
+    security_rules_updated_successfully: "Regras de segurança atualizadas com sucesso! Por favor atualize a página para carregar seus dados.",
+    sec_rules_fixing: "Corrigindo...",
+    sec_rules_fixed: "Corrigido!",
+
     // ─── Text Search Dialog ─────────────────────────────────────
     text_search_dialog_title: "Ativar pesquisa de texto",
     text_search_local_not_recommended: "A pesquisa de texto local não é recomendada para coleções grandes.",
@@ -696,5 +709,19 @@ export const pt: FireCMSTranslations = {
     text_search_own_implementation: "Implementou o seu próprio controlador de pesquisa de texto. Pode ativar a pesquisa de texto para a sua coleção.",
     text_search_enable_for_collection: "Ativar para esta coleção",
     text_search_enable_for_project: "Ativar para o projeto",
-    text_search_enabled_snackbar: "Pesquisa de texto local ativada"
+    text_search_enabled_snackbar: "Pesquisa de texto local ativada",
+
+    // ─── GCP Marketplace ─────────────────────────────────────────
+    marketplace_managed_by_gcp: "Gerenciado via GCP Marketplace",
+    marketplace_billing_note: "Sua assinatura é gerenciada pelo Google Cloud Marketplace. Alterações de plano, faturamento e cancelamento são feitos no console do GCP.",
+    marketplace_manage_in_gcp_console: "Gerenciar no console do GCP",
+    marketplace_plan_changes_note: "Para alterar seu plano ou cancelar, visite seus pedidos do GCP Marketplace.",
+    marketplace_welcome_title: "Bem-vindo do GCP Marketplace!",
+    marketplace_welcome_subtitle: "Sua assinatura do Google Cloud Marketplace está ativa. Selecione um projeto existente ou crie um novo para vinculá-lo.",
+    marketplace_select_or_create_project: "Selecionar ou criar um projeto",
+    marketplace_link_project: "Vincular projeto",
+    marketplace_linking: "Vinculando projeto…",
+    marketplace_link_success: "Projeto vinculado com sucesso! Redirecionando…",
+    marketplace_link_error: "Erro ao vincular o projeto. Por favor, tente novamente.",
+    marketplace_no_account_id: "Nenhum ID de conta do GCP Marketplace encontrado. Por favor, comece pelo GCP Marketplace.",
 };

package/src/preview/PropertyPreview.tsx

@@ -11,6 +11,7 @@ import {
 } from "../types";
 
 import { resolveProperty } from "../util";
+import { jsonStringifyReplacer } from "../util/objects";
 
 import { PropertyPreviewProps } from "./PropertyPreviewProps";
 import { useAuthController, useCustomizationController } from "../hooks";
@@ -79,7 +80,9 @@ export const PropertyPreview = React.memo(function PropertyPreview<T extends CMS
     } else if (property.dataType === "string") {
         const stringProperty = property as ResolvedStringProperty;
         if (typeof value === "string") {
-            if (stringProperty.storage) {
+            if (stringProperty.markdown) {
+                content = <Markdown source={value} size={"small"} />;
+            } else if (stringProperty.storage) {
                 const filePath = stringProperty.storage.previewUrl ? stringProperty.storage.previewUrl(value) : value;
                 content = <StorageThumbnail
                     interactive={interactive}
@@ -100,8 +103,6 @@ export const PropertyPreview = React.memo(function PropertyPreview<T extends CMS
                             interactive={interactive}
                             fill={fill}
                             previewType={stringProperty.url} />;
-            } else if (stringProperty.markdown) {
-                content = <Markdown source={value} size={"small"} />;
             } else if (stringProperty.userSelect) {
                 content = <UserPreview
                     value={value}
@@ -234,7 +235,7 @@ export const PropertyPreview = React.memo(function PropertyPreview<T extends CMS
             content = buildWrongValueType(propertyKey, property.dataType, value);
         }
     } else {
-        content = JSON.stringify(value);
+        content = JSON.stringify(value, jsonStringifyReplacer);
     }
 
     return content === undefined || content === null || (Array.isArray(content) && content.length === 0)
@@ -246,6 +247,6 @@ function buildWrongValueType(name: string | undefined, dataType: string, value:
     console.warn(`Unexpected value for property ${name}, of type ${dataType}`, value);
     return (
         <ErrorView title={"Unexpected value"}
-            error={`${JSON.stringify(value)}`} />
+            error={`${JSON.stringify(value, jsonStringifyReplacer)}`} />
     );
 }

package/src/preview/components/ReferencePreview.tsx

@@ -6,6 +6,7 @@ import { PreviewSize } from "../PropertyPreviewProps";
 import { Skeleton } from "@firecms/ui";
 import { ErrorBoundary, ErrorView } from "../../components";
 import { EntityPreview, EntityPreviewContainer } from "../../components/EntityPreview";
+import { jsonStringifyReplacer } from "../../util/objects";
 
 export type ReferencePreviewProps = {
     disabled?: boolean;
@@ -29,7 +30,7 @@ export const ReferencePreview = function ReferencePreview(props: ReferencePrevie
             onClick={props.onClick}
             size={props.size ?? "medium"}>
             <ErrorView error={"Unexpected value. Click to edit"}
-                       tooltip={JSON.stringify(reference)}/>
+                       tooltip={JSON.stringify(reference, jsonStringifyReplacer)}/>
         </EntityPreviewContainer>;
     }
     return <ErrorBoundary>

package/src/preview/property_previews/MapPropertyPreview.tsx

@@ -6,6 +6,7 @@ import { PropertyPreview } from "../PropertyPreview";
 import { cls, defaultBorderMixin, Typography } from "@firecms/ui";
 import { ErrorBoundary } from "../../components";
 import { EmptyValue } from "../components/EmptyValue";
+import { DatePreview } from "../components/DatePreview";
 
 /**
  * @group Preview components
@@ -111,37 +112,58 @@ export function KeyValuePreview({ value }: { value: any }) {
     return <div
         className="flex flex-col gap-1 w-full">
         {
-            Object.entries(value).map(([key, childValue]: [string, any]) => (
-                <div
-                    key={`map_preview_table_${key}}`}
-                    className={cls(defaultBorderMixin, "last:border-b-0 border-b")}>
+            Object.entries(value).map(([key, childValue]: [string, any]) => {
+                const isTimestampObj = childValue && typeof childValue === "object" && (
+                    childValue instanceof Date ||
+                    ("_seconds" in childValue && "_nanoseconds" in childValue && typeof childValue._seconds === "number" && typeof childValue._nanoseconds === "number") ||
+                    ("seconds" in childValue && "nanoseconds" in childValue && typeof childValue.seconds === "number" && typeof childValue.nanoseconds === "number")
+                );
+
+                const isScalar = childValue && (typeof childValue !== "object" || isTimestampObj);
+
+                return (
                     <div
-                        className={"flex flex-row pt-0.5 pb-0.5 gap-2"}>
-                        <div
-                            key={`table-cell-title-${key}-${key}`}
-                            className="min-w-[140px] w-[25%] py-1">
-                            <Typography variant={"caption"}
-                                        className={"font-semibold break-words"}
-                                        color={"secondary"}>
-                                {key}
-                            </Typography>
-                        </div>
+                        key={`map_preview_table_${key}}`}
+                        className={cls(defaultBorderMixin, "last:border-b-0 border-b")}>
                         <div
-                            className="flex-grow max-w-[75%]">
-                            {childValue && typeof childValue !== "object" && <Typography>
-                                <ErrorBoundary>
-                                    {childValue.toString()}
-                                </ErrorBoundary>
-                            </Typography>}
+                            className={"flex flex-row pt-0.5 pb-0.5 gap-2"}>
+                            <div
+                                key={`table-cell-title-${key}-${key}`}
+                                className="min-w-[140px] w-[25%] py-1">
+                                <Typography variant={"caption"}
+                                            className={"font-semibold break-words"}
+                                            color={"secondary"}>
+                                    {key}
+                                </Typography>
+                            </div>
+                            <div
+                                className="flex-grow max-w-[75%]">
+                                {isScalar && (isTimestampObj ? (
+                                    <ErrorBoundary>
+                                        <DatePreview date={
+                                            childValue instanceof Date ? childValue :
+                                            typeof childValue.toDate === "function" ? childValue.toDate() :
+                                            "_seconds" in childValue ? new Date(childValue._seconds * 1000 + childValue._nanoseconds / 1000000) :
+                                            new Date(childValue.seconds * 1000 + childValue.nanoseconds / 1000000)
+                                        } />
+                                    </ErrorBoundary>
+                                ) : (
+                                    <Typography>
+                                        <ErrorBoundary>
+                                            {childValue.toString()}
+                                        </ErrorBoundary>
+                                    </Typography>
+                                ))}
+                            </div>
                         </div>
+                        {typeof childValue === "object" && !isTimestampObj &&
+                            <div className={cls(defaultBorderMixin, "border-l pl-4")}>
+                                <KeyValuePreview value={childValue}/>
+                            </div>
+                        }
                     </div>
-                    {typeof childValue === "object" &&
-                        <div className={cls(defaultBorderMixin, "border-l pl-4")}>
-                            <KeyValuePreview value={childValue}/>
-                        </div>
-                    }
-                </div>
-            ))
+                );
+            })
         }
     </div>;
 }

package/src/routes/FireCMSRoute.tsx

@@ -1,7 +1,6 @@
 import { Blocker, useBlocker, useLocation } from "react-router";
-import { EntityEditView } from "../core/EntityEditView";
+import React, { useEffect, useRef, useState } from "react";
 import { useNavigationController } from "../hooks";
-import { useEffect, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import {
     getNavigationEntriesFromPath,
@@ -11,7 +10,11 @@ import {
 } from "../util/navigation_from_path";
 import { useBreadcrumbsController } from "../hooks/useBreadcrumbsController";
 import { toArray } from "../util/arrays";
-import { EntityCollectionView, NotFoundPage } from "../components";
+import { NotFoundPage } from "../components";
+import { lazyEager } from "../util/lazy_eager";
+
+const EntityEditView = lazyEager<typeof import("../core/EntityEditView")["EntityEditView"]>(() => import("../core/EntityEditView"), "EntityEditView");
+const EntityCollectionView = lazyEager<typeof import("../components/EntityCollectionView/EntityCollectionView")["EntityCollectionView"]>(() => import("../components/EntityCollectionView/EntityCollectionView"), "EntityCollectionView");
 import { UnsavedChangesDialog } from "../components/UnsavedChangesDialog";
 import { EntityCollection } from "../types";
 
@@ -88,15 +91,17 @@ export function FireCMSRoute() {
             collection = navigation.getCollection(navigationEntries[0].path);
         if (!collection)
             return null;
-        return <EntityCollectionView
-            key={`collection_view_${collection.id ?? collection.path}`}
-            isSubCollection={false}
-            parentCollectionIds={[]}
-            fullPath={collection.path}
-            fullIdPath={collection.id}
-            updateUrl={true}
-            {...collection}
-            Actions={toArray(collection.Actions)} />
+        return <React.Suspense fallback={null}>
+            <EntityCollectionView
+                key={`collection_view_${collection.id ?? collection.path}`}
+                isSubCollection={false}
+                parentCollectionIds={[]}
+                fullPath={collection.path}
+                fullIdPath={collection.id}
+                updateUrl={true}
+                {...collection}
+                Actions={toArray(collection.Actions)} />
+        </React.Suspense>;
     }
 
     if (isSidePanel) {
@@ -109,15 +114,17 @@ export function FireCMSRoute() {
                 collection = navigation.getCollection(firstEntry.path);
             if (!collection)
                 return null;
-            return <EntityCollectionView
-                key={`collection_view_${collection.id ?? collection.path}`}
-                fullIdPath={collection.id}
-                isSubCollection={false}
-                parentCollectionIds={[]}
-                fullPath={collection.path}
-                updateUrl={true}
-                {...collection}
-                Actions={toArray(collection.Actions)} />;
+            return <React.Suspense fallback={null}>
+                <EntityCollectionView
+                    key={`collection_view_${collection.id ?? collection.path}`}
+                    fullIdPath={collection.id}
+                    isSubCollection={false}
+                    parentCollectionIds={[]}
+                    fullPath={collection.path}
+                    updateUrl={true}
+                    {...collection}
+                    Actions={toArray(collection.Actions)} />
+            </React.Suspense>;
         }
     }
 
@@ -215,39 +222,41 @@ function EntityFullScreenRoute({
     const fullIdPath = isNew ? lastCollectionEntry!.path : lastEntityEntry!.path;
     const collectionPath = navigation.resolveIdsFrom(fullIdPath);
     return <>
-        <EntityEditView
-            key={collection.id + "_" + (isNew ? "new" : (isCopy ? entityId + "_copy" : entityId))}
-            entityId={isNew ? undefined : entityId}
-            fullIdPath={fullIdPath}
-            collection={collection}
-            layout={"full_screen"}
-            path={collectionPath}
-            copy={isCopy}
-            selectedTab={selectedTab ?? undefined}
-            onValuesModified={(modified) => blocked.current = modified}
-            onSaved={(params) => {
-                const newSelectedTab = params.selectedTab;
-                const newEntityId = params.entityId;
-                if (newSelectedTab) {
-                    navigate(`${basePath}/${newEntityId}/${newSelectedTab}`, { replace: true });
-                } else {
-                    navigate(`${basePath}/${newEntityId}`, { replace: true });
-                }
-            }}
-            onTabChange={(params) => {
-                setSelectedTab(params.selectedTab);
-                if (isNew) {
-                    return;
-                }
-                const newSelectedTab = params.selectedTab;
-                if (newSelectedTab) {
-                    navigate(`${basePath}/${entityId}/${newSelectedTab}`, { replace: true });
-                } else {
-                    navigate(`${basePath}/${entityId}`, { replace: true });
-                }
-            }}
-            parentCollectionIds={parentCollectionIds}
-        />
+        <React.Suspense fallback={null}>
+            <EntityEditView
+                key={collection.id + "_" + (isNew ? "new" : (isCopy ? entityId + "_copy" : entityId))}
+                entityId={isNew ? undefined : entityId}
+                fullIdPath={fullIdPath}
+                collection={collection}
+                layout={"full_screen"}
+                path={collectionPath}
+                copy={isCopy}
+                selectedTab={selectedTab ?? undefined}
+                onValuesModified={(modified) => blocked.current = modified}
+                onSaved={(params) => {
+                    const newSelectedTab = params.selectedTab;
+                    const newEntityId = params.entityId;
+                    if (newSelectedTab) {
+                        navigate(`${basePath}/${newEntityId}/${newSelectedTab}`, { replace: true });
+                    } else {
+                        navigate(`${basePath}/${newEntityId}`, { replace: true });
+                    }
+                }}
+                onTabChange={(params) => {
+                    setSelectedTab(params.selectedTab);
+                    if (isNew) {
+                        return;
+                    }
+                    const newSelectedTab = params.selectedTab;
+                    if (newSelectedTab) {
+                        navigate(`${basePath}/${entityId}/${newSelectedTab}`, { replace: true });
+                    } else {
+                        navigate(`${basePath}/${entityId}`, { replace: true });
+                    }
+                }}
+                parentCollectionIds={parentCollectionIds}
+            />
+        </React.Suspense>
 
         <UnsavedChangesDialog
             open={blocker?.state === "blocked"}

package/src/types/collections.ts

@@ -163,6 +163,31 @@ export interface EntityCollection<M extends Record<string, any> = any, USER exte
      */
     subcollections?: EntityCollection<any, any>[];
 
+    /**
+     * You can group subcollections and custom views into dropdown menus
+     * in the entity view tabs. Views listed in a group will be removed
+     * from the top-level tabs and shown under a single dropdown instead.
+     *
+     * @example
+     * ```tsx
+     * const productsCollection = buildCollection({
+     *     id: "products",
+     *     path: "products",
+     *     name: "Products",
+     *     properties: { ... },
+     *     subcollections: [localesCollection, reviewsCollection],
+     *     entityViews: [sampleView],
+     *     viewGroups: [
+     *         {
+     *             name: "Related data",
+     *             views: ["locales", "reviews", "sample_view"]
+     *         }
+     *     ]
+     * });
+     * ```
+     */
+    viewGroups?: ViewGroup[];
+
     /**
      * This interface defines all the callbacks that can be used when an entity
      * is being created, updated or deleted.
@@ -413,6 +438,21 @@ export interface KanbanConfig<M extends Record<string, any> = any> {
     columnProperty: Extract<keyof M, string>;
 }
 
+/**
+ * You can group subcollections and custom views into dropdown menus in the entity view tabs.
+ * @group Collections
+ */
+export interface ViewGroup {
+    /**
+     * Name of the group
+     */
+    name: string;
+    /**
+     * Array of subcollection paths/ids or custom view keys
+     */
+    views: string[];
+}
+
 /**
  * View mode for displaying a collection.
  * @group Collections