@rebasepro/app 0.9.1-canary.fd3754b → 0.10.0

package/dist/util/previews.d.ts

@@ -1,4 +1,13 @@
 import type { CollectionConfig, PropertyConfig } from "@rebasepro/types";
 import { AuthController } from "@rebasepro/types";
 export declare function getEntityPreviewKeys(authController: AuthController, targetCollection: CollectionConfig<any>, fields: Record<string, PropertyConfig>, previewProperties?: string[], limit?: number): string[];
+/**
+ * The `include` params that eager-load a collection's relations in the same
+ * request as its rows, so previews never fetch once per relation cell.
+ *
+ * Only the REST transport reads `include`; the realtime transport embeds
+ * relation data unconditionally and ignores it. Passing it either way keeps a
+ * realtime-less deployment rendering the same cells as a realtime one.
+ */
+export declare function getRelationIncludeParams(collection: CollectionConfig<any>): string[] | undefined;
 export declare function getEntityTitlePropertyKey<M extends Record<string, any>>(collection: CollectionConfig<M>, propertyConfigs: Record<string, PropertyConfig>): string | undefined;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rebasepro/app",
   "type": "module",
-  "version": "0.9.1-canary.fd3754b",
+  "version": "0.10.0",
   "description": "Rebase core — framework-agnostic runtime for data-driven admin panels",
   "funding": {
     "url": "https://github.com/sponsors/rebaseco"
@@ -13,12 +13,12 @@
     "url": "https://github.com/rebasepro/rebase.git",
     "directory": "packages/app"
   },
-  "main": "./dist/index.umd.js",
+  "main": "./dist/index.es.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
   "source": "src/index.ts",
   "engines": {
-    "node": ">=14"
+    "node": ">=20"
   },
   "keywords": [
     "rebase",
@@ -34,14 +34,12 @@
     ".": {
       "types": "./dist/index.d.ts",
       "development": "./dist/index.es.js",
-      "import": "./dist/index.es.js",
-      "require": "./dist/index.umd.js"
+      "import": "./dist/index.es.js"
     },
     "./vitePlugin": {
       "types": "./dist/vitePlugin.d.ts",
       "development": "./dist/vitePlugin.js",
-      "import": "./dist/vitePlugin.js",
-      "require": "./dist/vitePlugin.js"
+      "import": "./dist/vitePlugin.js"
     },
     "./package.json": "./package.json"
   },
@@ -54,11 +52,11 @@
     "magic-string": "^0.30.0",
     "notistack": "^3.0.2",
     "react-i18next": "^17.0.8",
-    "@rebasepro/forms": "0.9.1-canary.fd3754b",
-    "@rebasepro/common": "0.9.1-canary.fd3754b",
-    "@rebasepro/types": "0.9.1-canary.fd3754b",
-    "@rebasepro/ui": "0.9.1-canary.fd3754b",
-    "@rebasepro/utils": "0.9.1-canary.fd3754b"
+    "@rebasepro/common": "0.10.0",
+    "@rebasepro/types": "0.10.0",
+    "@rebasepro/forms": "0.10.0",
+    "@rebasepro/ui": "0.10.0",
+    "@rebasepro/utils": "0.10.0"
   },
   "peerDependencies": {
     "react": ">=19.0.0",
@@ -69,6 +67,7 @@
   },
   "devDependencies": {
     "@jest/globals": "^30.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^30.0.0",
@@ -118,25 +117,19 @@
     "testEnvironment": "jsdom",
     "testPathIgnorePatterns": [
       "/node_modules/",
-      "/src/components/",
-      "objects.test.ts",
-      "navigation.test.ts",
-      "resolutions.test.ts"
+      "/src/components/"
     ],
     "setupFilesAfterEnv": [
       "<rootDir>/test/setupTests.ts"
     ],
     "moduleNameMapper": {
       "\\.(css|less)$": "<rootDir>/test/__mocks__/styleMock.js",
-      "^@rebasepro/ui$": "<rootDir>/../ui/src/index.ts",
-      "^@rebasepro/common$": "<rootDir>/../common/src/index.ts",
-      "^@rebasepro/types$": "<rootDir>/../types/src/index.ts",
-      "^@rebasepro/forms$": "<rootDir>/../forms/src/index.ts"
+      "^@rebasepro/([a-z0-9-]+)$": "<rootDir>/../$1/src/index.ts"
     }
   },
   "scripts": {
     "watch": "vite build --watch",
-    "build": "vite build && tsc --emitDeclarationOnly -p tsconfig.prod.json && pnpm exec esbuild src/vitePlugin.ts --platform=node --format=esm --outfile=dist/vitePlugin.js",
+    "build": "vite build && tsc --emitDeclarationOnly -p tsconfig.prod.json && pnpm exec esbuild src/vitePlugin.ts --platform=node --format=esm --outfile=dist/vitePlugin.js && node ../../scripts/assert-build-output.mjs",
     "test:lint": "eslint \"src/**\" --quiet",
     "test": "jest --passWithNoTests",
     "clean": "rm -rf dist && find ./src -name '*.js' -type f | xargs rm -f",

package/src/auth/index.ts

@@ -1,11 +1,12 @@
 /**
- * @rebasepro/app
+ * Authentication controller for Rebase frontends.
  *
- * React authentication controller for Rebase frontends.
- * Provides the `useRebaseAuthController` hook and API utilities
- * for communicating with a Rebase backend's JWT auth endpoints.
+ * Provides the `useRebaseAuthController` hook and API utilities for
+ * communicating with a Rebase backend's JWT auth endpoints.
  *
- * For the generic LoginView and RebaseAuth components, see @rebasepro/app.
+ * The generic LoginView and RebaseAuth components that render on top of this
+ * controller are in `../components`. Both are re-exported from the package
+ * root, which is where applications should import them from.
  */
 
 // Types

package/src/components/LoginView/LoginView.tsx

@@ -628,15 +628,20 @@ function LoginForm({
         };
     }, [onClose]);
 
+    // Both controller methods record the failure in `authProviderError` — which
+    // this form renders above — and then rethrow for programmatic callers. This
+    // is not one of those: without a catch here every rejected sign-in becomes an
+    // unhandled rejection, reported as a crash by anything listening for one,
+    // while the user has already been shown the error.
     function handleEnterPassword() {
         if (email && password && authController.emailPasswordLogin) {
-            authController.emailPasswordLogin(email, password);
+            void Promise.resolve(authController.emailPasswordLogin(email, password)).catch(() => undefined);
         }
     }
 
     function handleRegistration() {
         if (email && password && authController.register) {
-            authController.register(email, password, displayName);
+            void Promise.resolve(authController.register(email, password, displayName)).catch(() => undefined);
         }
     }
 

package/src/components/UnsavedChangesDialog.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from "@rebasepro/ui";
-import { useTranslation } from "../hooks";
+import { useTranslation } from "../hooks/useTranslation";
 
 export interface UnsavedChangesDialogProps {
     open: boolean;

package/src/components/common/useDataTableController.tsx

@@ -5,6 +5,7 @@ import { useLocation } from "react-router-dom";
 import { useData, useRebaseContext } from "../../hooks";
 import { useDataOrder } from "../../hooks/data/useDataOrder";
 import { populateFetchCache } from "../../hooks/data/useFetch";
+import { getRelationIncludeParams } from "../../util/previews";
 import { Entity, EntityReference, EntityRelation, EntityTableController, FilterValues, RebaseContext, SelectedCellProps, User, WhereFilterOp, FindResponse } from "@rebasepro/types";
 import { ScrollRestorationController } from "./useScrollRestoration";
 
@@ -254,19 +255,24 @@ export function useDataTableController<M extends Record<string, any> = any, USER
 
         let unsubscribe: (() => void) | undefined;
 
+        // Eagerly include relations to avoid N+1 fetches.
+        const includeParams = getRelationIncludeParams(collection);
+
         if (accessor.listen) {
             unsubscribe = accessor.listen({
                 where: whereParams,
                 limit: itemCount,
                 orderBy: orderByParams,
-                searchString
+                searchString,
+                include: includeParams
             }, (res) => onEntitiesUpdate(res.data as Entity<M>[]), onError);
         } else {
             accessor.find({
                 where: whereParams,
                 limit: itemCount,
                 orderBy: orderByParams,
-                searchString
+                searchString,
+                include: includeParams
             })
                 .then((res) => onEntitiesUpdate(res.data as Entity<M>[]))
                 .catch(onError);

package/src/contexts/AdminModeController.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { AdminModeController } from "../hooks";
+import type { AdminModeController } from "../hooks/useAdminModeController";
 
 const DEFAULT_ADMIN_MODE_STATE: AdminModeController = {
     mode: "content",

package/src/contexts/CollectionResolverContext.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+/**
+ * Look up a collection's config by slug.
+ */
+export type CollectionResolver = (slug: string) => { properties?: Record<string, unknown> } | undefined;
+
+/**
+ * Lets the layer that owns the collections hand a resolver *up* to the data
+ * layer, which needs a collection's primary keys to give its rows an address.
+ *
+ * The inversion is forced by the composition: `<Rebase client>` builds the data
+ * layer, and `<RebaseAdmin collections>` sits inside it — so the collections are
+ * not in scope where the data is created, and `Rebase` cannot take them as a
+ * prop without giving every headless BaaS app a collections argument it has no
+ * use for.
+ *
+ * Registration is a ref write, so it is safe to call during render — and it has
+ * to be. The views that fetch rows are *below* the registrar, and child effects
+ * run before parent effects, so registering in an effect would bind after the
+ * first page of rows had already been converted.
+ */
+export const CollectionResolverRegistrationContext =
+    React.createContext<(resolver: CollectionResolver | undefined) => void>(() => undefined);

package/src/contexts/ModeController.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ModeController } from "../hooks";
+import type { ModeController } from "../hooks/useModeController";
 
 const DEFAULT_MODE_STATE: ModeController = {
     mode: "light",

package/src/contexts/index.ts

@@ -15,3 +15,4 @@ export * from "./RebaseClientInstanceContext";
 export * from "./CustomizationControllerContext";
 export * from "./ComponentOverrideContext";
 export * from "./CollectionScopeContext";
+export * from "./CollectionResolverContext";

package/src/core/Rebase.tsx

@@ -8,7 +8,7 @@ import { CenteredView, Typography } from "@rebasepro/ui";
 import { RebaseContext, User, CollectionRegistryController, DataDriver, DataSourceDefinition, RebaseData, DEFAULT_DATA_SOURCE_KEY, StorageSource, StorageSourceDefinition, DEFAULT_STORAGE_SOURCE_KEY } from "@rebasepro/types";
 import { PluginProviderStack } from "./PluginProviderStack";
 import { PluginLifecycleManager } from "./PluginLifecycleManager";
-import { AuthControllerContext } from "../contexts";
+import { AuthControllerContext, CollectionResolverRegistrationContext, CollectionResolver } from "../contexts";
 import { useCustomizationController, useRebaseContext, useAuthSubscription } from "../hooks";
 import { ApiConfigProvider, useApiConfig } from "../hooks/ApiConfigContext";
 import { ErrorView } from "../components";
@@ -98,6 +98,18 @@ export function Rebase<USER extends User>(props: RebaseProps<USER>) {
         return dataSourcesProp ?? [];
     }, [dataSourcesProp]);
 
+    // Rows arrive as columns only; their address is derived from the
+    // collection's primary keys. The collections live below us (in RebaseAdmin),
+    // so they register a resolver here and we read it lazily, per row. Headless
+    // apps register nothing and are unaffected.
+    const collectionResolverRef = useRef<CollectionResolver | undefined>(undefined);
+    const registerCollectionResolver = React.useCallback((resolver: CollectionResolver | undefined) => {
+        collectionResolverRef.current = resolver;
+    }, []);
+    const entityDataOptions = useMemo(() => ({
+        resolveCollection: (slug: string) => collectionResolverRef.current?.(slug)
+    }), []);
+
     // Build the data-source context: the declared registry plus a RebaseData
     // per direct/custom source (those carrying a client-side driver). Server-
     // mediated sources have no entry — they ride the default client.
@@ -131,12 +143,12 @@ export function Rebase<USER extends User>(props: RebaseProps<USER>) {
                 ...definition,
                 transport: ds.transport ?? (driver ? "direct" : "server")
             };
-            if (driver) sources[ds.key] = buildRebaseData(driver);
+            if (driver) sources[ds.key] = buildRebaseData(driver, entityDataOptions);
         }
         const value: DataSourcesContextValue = { registry, sources };
         dataSourcesRef.current = { sig, value };
         return value;
-    }, [normalizedDataSources]);
+    }, [normalizedDataSources, entityDataOptions]);
 
     // Default data source — serves every collection not routed to a
     // registered direct/custom source. Resolution:
@@ -148,7 +160,7 @@ export function Rebase<USER extends User>(props: RebaseProps<USER>) {
         if (registeredDefault) return registeredDefault;
         // CMS boundary: the SDK client returns flat rows; wrap them into the
         // Entity view-model the admin (`useData()`) renders.
-        if (client?.data) return wrapAsEntityData(client.data);
+        if (client?.data) return wrapAsEntityData(client.data, entityDataOptions);
         const built = Object.values(dataSourcesValue.sources);
         if (built.length === 1) return built[0];
         if (built.length > 1) {
@@ -158,7 +170,7 @@ export function Rebase<USER extends User>(props: RebaseProps<USER>) {
             );
         }
         throw new Error("Rebase requires either `client` or a `dataSources` entry with a driver to be provided");
-    }, [client, dataSourcesValue]);
+    }, [client, dataSourcesValue, entityDataOptions]);
 
     // Storage fallback logic
     const resolvedStorage = storageSourceProp ?? client?.storage;
@@ -276,6 +288,7 @@ export function Rebase<USER extends User>(props: RebaseProps<USER>) {
                 executeSql: wsAdmin.executeSql!.bind(wsAdmin),
                 fetchAvailableDatabases: wsAdmin.fetchAvailableDatabases?.bind(wsAdmin),
                 fetchAvailableRoles: wsAdmin.fetchAvailableRoles?.bind(wsAdmin),
+                fetchApplicationRoles: wsAdmin.fetchApplicationRoles?.bind(wsAdmin),
                 fetchCurrentDatabase: wsAdmin.fetchCurrentDatabase?.bind(wsAdmin),
                 fetchUnmappedTables: wsAdmin.fetchUnmappedTables?.bind(wsAdmin),
                 fetchTableMetadata: wsAdmin.fetchTableMetadata?.bind(wsAdmin),
@@ -349,6 +362,8 @@ export function Rebase<USER extends User>(props: RebaseProps<USER>) {
                         value={storageSourcesValue}>
                     <StorageSourceContext.Provider
                         value={resolvedStorage!}>
+                        <CollectionResolverRegistrationContext.Provider
+                            value={registerCollectionResolver}>
                         <DataSourcesContext.Provider
                             value={dataSourcesValue}>
                         <RebaseDataContext.Provider
@@ -373,6 +388,7 @@ export function Rebase<USER extends User>(props: RebaseProps<USER>) {
                             </DatabaseAdminContext.Provider>
                         </RebaseDataContext.Provider>
                         </DataSourcesContext.Provider>
+                        </CollectionResolverRegistrationContext.Provider>
                     </StorageSourceContext.Provider>
                     </StorageSourcesContext.Provider>
                 </UserConfigurationPersistenceContext.Provider>

package/src/hooks/data/useCollection.tsx

@@ -3,6 +3,7 @@ import { useEffect, useState, useMemo } from "react";
 import { Entity, FilterValues, User } from "@rebasepro/types";
 import { useData } from "./useData";
 import { isSchemaDriftError, useSchemaDriftContext } from "../../components/SchemaDriftBanner";
+import { getRelationIncludeParams } from "../../util/previews";
 /**
  * @group Hooks and utilities
  */
@@ -131,10 +132,7 @@ export function useCollection<M extends Record<string, any>, USER extends User>(
         const accessor = dataClient.collection(path);
 
         // Eagerly include relations to avoid N+1 fetches.
-        const hasRelations = collection.properties && Object.values(collection.properties).some(
-            (p) => p.type === "relation" || p.type === "reference"
-        );
-        const includeParams = hasRelations ? ["*"] : undefined;
+        const includeParams = getRelationIncludeParams(collection);
 
         if (accessor.listen) {
             return accessor.listen({

package/src/hooks/data/useRelationSelector.tsx

@@ -2,6 +2,7 @@ import type { CollectionConfig } from "@rebasepro/types";
 import { useCallback, useEffect, useRef, useState, useMemo } from "react";
 import { useData } from "./useData";
 import { Entity, EntityRelation, FilterValues } from "@rebasepro/types";
+import { getRelationIncludeParams } from "../../util/previews";
 export interface RelationItem {
     id: string | number;
     label: string;
@@ -133,6 +134,10 @@ export function useRelationSelector<M extends Record<string, any> = any>(
         }
     }, []);
 
+    // Eagerly include relations to avoid N+1 fetches. Referentially stable, so
+    // it can be a dependency below without re-triggering the fetch.
+    const includeParams = getRelationIncludeParams(collection);
+
     const fetchData = useCallback(() => {
         cleanupSubscription();
         setError(undefined);
@@ -163,7 +168,8 @@ export function useRelationSelector<M extends Record<string, any> = any>(
                 where: whereParams,
                 limit: limit,
                 orderBy: undefined,
-                searchString: currentSearch
+                searchString: currentSearch,
+                include: includeParams
             }, (res) => onEntitiesUpdate({ data: res.data as Entity<M>[],
 meta: res.meta }), onErrorUpdate);
         } else {
@@ -172,7 +178,8 @@ meta: res.meta }), onErrorUpdate);
                 limit: limit,
                 offset: 0,
                 orderBy: undefined,
-                searchString: currentSearch
+                searchString: currentSearch,
+                include: includeParams
             })
                 .then((res) => onEntitiesUpdate({ data: res.data as Entity<M>[],
 meta: res.meta }))
@@ -181,7 +188,7 @@ meta: res.meta }))
         }
 
         unsubscribeRef.current = unsubscribe || null;
-    }, [dataClient, path, fixedFilter, limit, currentSearch, entityToRelationItem, cleanupSubscription, setLoading]);
+    }, [dataClient, path, fixedFilter, limit, currentSearch, entityToRelationItem, cleanupSubscription, setLoading, includeParams]);
 
     // Search function with debouncing
     const search = useCallback((searchString: string) => {

package/src/hooks/useBuildAdminModeController.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useMemo, useState } from "react";
-import { AdminModeController } from "./index";
+import type { AdminModeController } from "./useAdminModeController";
 
 /**
  * Use this hook to build an admin mode controller that determines

package/src/hooks/useBuildModeController.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState, useMemo } from "react";
 
-import { ModeController } from "./index";
+import type { ModeController } from "./useModeController";
 
 /**
  * Use this hook to build a color mode controller that determines

package/src/hooks/useNavigationBlocker.tsx

@@ -0,0 +1,108 @@
+import React, { createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Blocker, BlockerFunction, useBlocker } from "react-router-dom";
+
+const IDLE_BLOCKER: Blocker = {
+    state: "unblocked",
+    proceed: undefined,
+    reset: undefined,
+    location: undefined
+};
+
+type NavigationBlockerContextValue = {
+    register: (id: string, predicate: BlockerFunction) => void;
+    unregister: (id: string) => void;
+    blocker: Blocker;
+    /** Id of the registration that caused the current block, if any. */
+    blockedBy: string | null;
+};
+
+const NavigationBlockerContext = createContext<NavigationBlockerContextValue | null>(null);
+
+/**
+ * Owns the single React Router blocker for the whole app.
+ *
+ * React Router only honours **one** blocker at a time: `shouldBlockNavigation`
+ * picks the last-registered blocker function and silently ignores every other
+ * one (it only logs a dev warning). Because blockers register in a `useEffect`,
+ * the winner is whichever surface mounted most recently — so an unsaved-changes
+ * guard could be disabled by an unrelated component mounting after it.
+ *
+ * This provider registers the only `useBlocker` in the tree and multiplexes it,
+ * so every surface that needs to guard navigation gets a say regardless of
+ * mount order. Surfaces register through {@link useNavigationBlocker}.
+ */
+export function NavigationBlockerProvider({ children }: { children: React.ReactNode }) {
+
+    const predicates = useRef(new Map<string, BlockerFunction>());
+
+    // State, not a ref: the owning registration only renders its dialog once
+    // this has propagated, so it has to go through React.
+    const [blockedBy, setBlockedBy] = useState<string | null>(null);
+
+    const shouldBlock = useCallback<BlockerFunction>((args) => {
+        for (const [id, predicate] of predicates.current) {
+            if (predicate(args)) {
+                setBlockedBy(id);
+                return true;
+            }
+        }
+        setBlockedBy(null);
+        return false;
+    }, []);
+
+    const blocker = useBlocker(shouldBlock);
+
+    const register = useCallback((id: string, predicate: BlockerFunction) => {
+        predicates.current.set(id, predicate);
+    }, []);
+
+    const unregister = useCallback((id: string) => {
+        predicates.current.delete(id);
+        setBlockedBy((current) => (current === id ? null : current));
+    }, []);
+
+    const value = useMemo<NavigationBlockerContextValue>(() => ({
+        register,
+        unregister,
+        blocker,
+        blockedBy
+    }), [register, unregister, blocker, blockedBy]);
+
+    return (
+        <NavigationBlockerContext.Provider value={value}>
+            {children}
+        </NavigationBlockerContext.Provider>
+    );
+}
+
+/**
+ * Guard navigation with `predicate`, sharing the app-wide blocker.
+ *
+ * Returns a {@link Blocker} that is only ever in the `blocked` state when *this*
+ * registration is what blocked the navigation — so several guards can coexist
+ * without each of them popping a dialog.
+ *
+ * Returns an idle blocker when no {@link NavigationBlockerProvider} is mounted
+ * above, rather than competing for React Router's single blocker slot.
+ */
+export function useNavigationBlocker(predicate: BlockerFunction): Blocker {
+
+    const context = useContext(NavigationBlockerContext);
+    const id = useId();
+
+    // Keep the latest predicate without re-registering on every render.
+    const predicateRef = useRef(predicate);
+    predicateRef.current = predicate;
+
+    const register = context?.register;
+    const unregister = context?.unregister;
+
+    useEffect(() => {
+        if (!register || !unregister) return;
+        register(id, (args) => predicateRef.current(args));
+        return () => unregister(id);
+    }, [register, unregister, id]);
+
+    if (!context) return IDLE_BLOCKER;
+    return context.blockedBy === id ? context.blocker : IDLE_BLOCKER;
+}

package/src/hooks/useUnsavedChangesDialog.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState, useMemo } from "react";
-import { useBlocker } from "react-router-dom";
 import { UnsavedChangesDialogProps } from "../components/UnsavedChangesDialog";
+import { useNavigationBlocker } from "./useNavigationBlocker";
 
 /**
  * A single, unified hook to prevent navigation when there are unsaved changes.
@@ -18,9 +18,12 @@ export function useUnsavedChangesDialog(
 } {
     const [manualDialogOpen, setManualDialogOpen] = useState(false);
 
-    const blocker = useBlocker(
-        ({ currentLocation, nextLocation }) =>
-            when && currentLocation.pathname !== nextLocation.pathname
+    const blocker = useNavigationBlocker(
+        useCallback(
+            ({ currentLocation, nextLocation }) =>
+                when && currentLocation.pathname !== nextLocation.pathname,
+            [when]
+        )
     );
 
     useEffect(() => {

package/src/index.ts

@@ -12,6 +12,7 @@ export * from "./contexts";
 export { CONTAINER_FULL_WIDTH, ADDITIONAL_TAB_WIDTH, FORM_CONTAINER_WIDTH } from "./internal/common";
 export { useRestoreScroll } from "./internal/useRestoreScroll";
 export { useUnsavedChangesDialog } from "./hooks/useUnsavedChangesDialog";
+export { NavigationBlockerProvider, useNavigationBlocker } from "./hooks/useNavigationBlocker";
 export type { UnsavedChangesDialogProps } from "./components/UnsavedChangesDialog";
 export { UnsavedChangesDialog } from "./components/UnsavedChangesDialog";
 export * from "./i18n/RebaseI18nProvider";

package/src/util/previews.ts

@@ -74,6 +74,26 @@ export function getEntityPreviewKeys(
     }
 }
 
+// Returned as-is rather than rebuilt per call, so the result is referentially
+// stable and safe to use as a hook dependency.
+const INCLUDE_ALL_RELATIONS: string[] = ["*"];
+
+/**
+ * The `include` params that eager-load a collection's relations in the same
+ * request as its rows, so previews never fetch once per relation cell.
+ *
+ * Only the REST transport reads `include`; the realtime transport embeds
+ * relation data unconditionally and ignores it. Passing it either way keeps a
+ * realtime-less deployment rendering the same cells as a realtime one.
+ */
+export function getRelationIncludeParams(collection: CollectionConfig<any>): string[] | undefined {
+    if (!collection.properties) return undefined;
+    const hasRelations = Object.values(collection.properties).some(property =>
+        property && !isPropertyBuilder(property) &&
+        (isRelationProperty(property as Property) || isReferenceProperty(property as Property)));
+    return hasRelations ? INCLUDE_ALL_RELATIONS : undefined;
+}
+
 export function getEntityTitlePropertyKey<M extends Record<string, any>>(collection: CollectionConfig<M>, propertyConfigs: Record<string, PropertyConfig>): string | undefined {
     if (collection.titleProperty) {
         return collection.titleProperty as string;