@rebasepro/app 0.14.1 → 0.14.2-canary.g27a129e

package/dist/core/RebaseProps.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { User, DataDriver, DataSourceDefinition, StorageSource, StorageSourceDefinition, DatabaseAdmin, RebaseClient } from "@rebasepro/types";
-import { Locale, AuthController, AnalyticsEvent, UserConfigurationPersistence, RebaseContext, EntityLinkBuilder, RebasePlugin, SlotContribution, PropertyConfig, EntityCustomView, EntityAction, RebaseTranslations, ComponentOverrideMap } from "@rebasepro/admin-types";
+import { Locale, AuthController, AnalyticsEvent, UserConfigurationPersistence, RebaseContext, EntityLinkBuilder, RebasePlugin, SlotContribution, PropertyConfig, EntityCustomView, CollectionCustomView, EntityAction, RebaseTranslations, ComponentOverrideMap } from "@rebasepro/admin-types";
 /**
  * A data source registered on `<Rebase>`. Extends the shared
  * {@link DataSourceDefinition} with the frontend {@link DataDriver} used for
@@ -258,6 +258,11 @@ export type RebaseProps<USER extends User, DB = unknown> = {
      * Entity Views
      */
     entityViews?: EntityCustomView[];
+    /**
+     * Custom collection view modes, available to every collection by `key`.
+     * A collection opts into one by naming that key in `admin.customViews`.
+     */
+    collectionViews?: CollectionCustomView[];
     /**
      * Entity Actions
      */

package/dist/index.es.js

@@ -1,7 +1,7 @@
-import React, { createContext, lazy, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { Alert, AlertCircleIcon, AlertTriangleIcon, AppWindow, ArrowDownIcon, ArrowLeftIcon, ArrowRightLeftIcon, ArrowUpDownIcon, ArrowUpIcon, Avatar, BooleanSwitch, Button, CalendarIcon, Card, CenteredView, CheckCircle2Icon, CheckIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronsLeftIcon, ChevronsRightIcon, Chip, CircleDotIcon, CircleUserIcon, CircularProgress, ColumnsIcon, Container, Dialog, DialogActions, DialogContent, DialogTitle, DollarSignIcon, ErrorBoundary, FileIcon, FileTextIcon, FilterChip, FilterIcon, FolderIcon, FolderKanbanIcon, IconButton, KanbanIcon, KanbanView, LanguagesIcon, LayoutGridIcon, ListIcon, ListPlusIcon, ListTodoIcon, LoadingButton, LogOutIcon, LucideIconByName, MailIcon, Menu, MenuItem, MessageCircleIcon, MoonIcon, MultiSelect, MultiSelectItem, PanelLeftIcon, Paper, PenLineIcon, PencilIcon, PhoneIcon, PinIcon, PlusIcon, Popover, RefreshCwIcon, SearchBar, Select, SelectItem, Separator, SettingsIcon, Skeleton, StickyNoteIcon, SunIcon, SunMoonIcon, Tab, Table, TableBody, TableCell, TableHeader, TableRow, Tabs, TagIcon, TextField, ToggleButtonGroup, Tooltip, Trash2Icon, TrendingUpIcon, TypeIcon, Typography, UserIcon, UserPlus, UsersIcon, VideoIcon, Wand2Icon, WrenchIcon, XIcon, cls, colorClassesMapping, coolIconKeys, defaultBorderMixin, getColorSchemeForKey, getColorSchemeForSeed, iconKeys, iconSize } from "@rebasepro/ui";
+import React, { createContext, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Alert, AlertCircleIcon, AlertTriangleIcon, AppWindow, ArrowDownIcon, ArrowLeftIcon, ArrowRightLeftIcon, ArrowUpDownIcon, ArrowUpIcon, Avatar, BooleanSwitch, Button, CalendarIcon, Card, CenteredView, CheckCircle2Icon, CheckIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronsLeftIcon, ChevronsRightIcon, Chip, CircleDotIcon, CircleUserIcon, CircularProgress, ColumnsIcon, Container, Dialog, DialogActions, DialogContent, DialogTitle, DollarSignIcon, ErrorBoundary, FileIcon, FileTextIcon, FilterChip, FilterIcon, FolderIcon, FolderKanbanIcon, IconButton, KanbanIcon, KanbanView, LanguagesIcon, LayoutGridIcon, ListIcon, ListPlusIcon, ListTodoIcon, LoadingButton, LogOutIcon, LucideIconByName, MailIcon, Menu, MenuItem, MessageCircleIcon, MoonIcon, MultiSelect, MultiSelectItem, PanelLeftIcon, Paper, PenLineIcon, PencilIcon, PhoneIcon, PinIcon, PlusIcon, Popover, RefreshCwIcon, SearchBar, Select, SelectItem, Separator, SettingsIcon, Skeleton, StickyNoteIcon, SunIcon, SunMoonIcon, Tab, Table, TableBody, TableCell, TableHeader, TableRow, Tabs, TagIcon, TextField, ToggleButtonGroup, Tooltip, Trash2Icon, TrendingUpIcon, TypeIcon, Typography, UserIcon, UserPlus, UsersIcon, VideoIcon, Wand2Icon, WrenchIcon, XIcon, cls, colorClassesMapping, coolIconKeys, defaultBorderMixin, getColorSchemeForKey, getColorSchemeForSeed, iconKeys, iconSize, lazyChunk } from "@rebasepro/ui";
 import { ALL_WHERE_FILTER_OPS, DEFAULT_DATA_SOURCE_KEY, DEFAULT_FILTERABLE_RELATION_KINDS, DEFAULT_STORAGE_SOURCE_KEY, EntityReference, EntityRelation, GeoPoint, RebaseApiError, Vector, getDataSourceCapabilities, isLazyComponentRef, isRelationalCollectionConfig } from "@rebasepro/types";
-import { UNRENDERED_SLOTS, resolveAdminCollection } from "@rebasepro/admin-types";
+import { RENAMED_SLOTS, UNRENDERED_SLOTS, resolveAdminCollection } from "@rebasepro/admin-types";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { SnackbarProvider as SnackbarProvider$1, useSnackbar } from "notistack";
 import { buildRebaseData, canCreateEntity, canDeleteEntity, canEditEntity, canReadCollection, evaluateCondition, getChildViewDeclaringProperties, getChildViewRelationPropertyKeys, getEntityChildViews, getLabelOrConfigFrom, getPrimaryKeys, getSubcollections, isPropertyBuilder, normalizeOrderBy, resolveStorageFilenameString, resolveStoragePathString, resolveStorageSource, serializeOrderBy, stripCollectionPath, wrapAsEntityData, wrapAsSdkData } from "@rebasepro/common";
@@ -2299,7 +2299,7 @@ function useResolvedComponent(ref) {
 function getOrCreateLazy(key, loader) {
 	const cached = lazyCache.get(key);
 	if (cached) return cached;
-	const LazyComponent = lazy(loader);
+	const LazyComponent = lazyChunk(loader);
 	lazyCache.set(key, LazyComponent);
 	return LazyComponent;
 }
@@ -7794,6 +7794,7 @@ function UIReferenceView() {
 								"h4",
 								"h5",
 								"h6",
+								"lead",
 								"subtitle1",
 								"subtitle2",
 								"body1",
@@ -7828,6 +7829,72 @@ function UIReferenceView() {
 									"\""
 								]
 							}, c))
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: cls("mt-8 pt-6 border-t", defaultBorderMixin),
+							children: [
+								/* @__PURE__ */ jsx(Typography, {
+									variant: "subtitle2",
+									className: "block mb-1",
+									children: "Data tiers"
+								}),
+								/* @__PURE__ */ jsxs(Typography, {
+									variant: "body2",
+									color: "secondary",
+									className: "block mb-5 max-w-[65ch]",
+									children: [
+										"For values that are looked up rather than read: a field name, a measurement, a headline figure. ",
+										/* @__PURE__ */ jsx("code", {
+											className: "font-mono text-xs",
+											children: "mono"
+										}),
+										" and",
+										" ",
+										/* @__PURE__ */ jsx("code", {
+											className: "font-mono text-xs",
+											children: "stat"
+										}),
+										" both carry",
+										" ",
+										/* @__PURE__ */ jsx("code", {
+											className: "font-mono text-xs",
+											children: "tabular-nums"
+										}),
+										", so a column of them keeps its decimal points aligned and a live counter does not jitter as its digits change width."
+									]
+								}),
+								/* @__PURE__ */ jsx("div", {
+									className: "flex flex-wrap items-start gap-x-12 gap-y-5",
+									children: [
+										["Region", "europe-west1"],
+										["Took", "32.2s"],
+										["Last run", "16/08/2026, 05:30:32"]
+									].map(([label, value]) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Typography, {
+										variant: "micro",
+										component: "div",
+										color: "secondary",
+										className: "block",
+										children: label
+									}), /* @__PURE__ */ jsx(Typography, {
+										variant: "mono",
+										component: "div",
+										className: "block mt-1 text-sm",
+										children: value
+									})] }, label))
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									className: "mt-6",
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "text-xs text-surface-400 font-mono",
+										children: "stat"
+									}), /* @__PURE__ */ jsx(Typography, {
+										variant: "stat",
+										component: "div",
+										className: "block mt-1",
+										children: "1,284"
+									})]
+								})
+							]
 						})
 					]
 				}),
@@ -9527,6 +9594,21 @@ function warnAboutHalfConfiguredOAuth(provider, clientId, backendProviders) {
 	console.warn(clientId ? `[Rebase] ${provider} login is hidden: the login view has a client id, but the backend reports no "${provider}" provider. Set ${envVar} (and ${provider.toUpperCase()}_CLIENT_SECRET) on the server and restart it.` : `[Rebase] ${provider} login is hidden: the backend has a "${provider}" provider, but the login view was given no client id. Pass it to the login view (e.g. VITE_${envVar}) and restart the frontend so the new env var is picked up.`);
 }
 /**
+* Whether a provider's error code means "the visitor backed out" rather than
+* "the sign-in failed". Closing the popup is an answer, not a fault, and
+* showing it in red reads as a broken login.
+*/
+function isUserCancellation(code) {
+	if (!code) return false;
+	return [
+		"access_denied",
+		"popup_closed",
+		"popup_closed_by_user",
+		"user_cancel",
+		"immediate_failed"
+	].includes(code);
+}
+/**
 * Generic login view component that works with any AuthControllerExtended.
 * Feature-detects capabilities to show/hide login methods.
 * @group Core
@@ -9537,6 +9619,7 @@ function LoginView({ logo, authController, noUserComponent, disableSignupScreen
 	const [mode, setMode] = useState("buttons");
 	const [fadeIn, setFadeIn] = useState(false);
 	const [viewVisible, setViewVisible] = useState(true);
+	const [providerError, setProviderError] = useState(null);
 	const [newsletterOptIn, setNewsletterOptIn] = useState(false);
 	const authControllerRef = useRef(authController);
 	authControllerRef.current = authController;
@@ -9554,6 +9637,7 @@ function LoginView({ logo, authController, noUserComponent, disableSignupScreen
 		onNewsletterOptIn(email);
 	}, [newsletterOptIn, onNewsletterOptIn]);
 	const switchMode = (newMode) => {
+		setProviderError(null);
 		setViewVisible(false);
 		setTimeout(() => {
 			setMode(newMode);
@@ -9593,10 +9677,12 @@ function LoginView({ logo, authController, noUserComponent, disableSignupScreen
 		window.history.replaceState({}, document.title, cleanUrl);
 		if (result.status === "error") {
 			console.error(`OAuth sign-in failed: ${result.error}`);
+			if (!isUserCancellation(result.error)) setProviderError(`Sign-in failed: ${result.error}`);
 			return;
 		}
 		if (result.status === "mismatch") {
 			console.error("Ignoring an OAuth code that does not match a sign-in this browser started.");
+			setProviderError("This sign-in could not be verified as one you started in this browser. Please try again.");
 			return;
 		}
 		if (authController.oauthLogin) authController.oauthLogin(result.provider, {
@@ -9618,6 +9704,8 @@ function LoginView({ logo, authController, noUserComponent, disableSignupScreen
 		alt: "Logo"
 	});
 	else logoComponent = /* @__PURE__ */ jsx(RebaseLogo, {});
+	const controllerError = authController.authProviderError && !authController.user ? authController.authProviderError instanceof Error ? authController.authProviderError.message : String(authController.authProviderError) : null;
+	const buttonsErrorMessage = providerError ?? controllerError;
 	let notAllowedMessage;
 	if (notAllowedError) if (typeof notAllowedError === "string") notAllowedMessage = notAllowedError;
 	else if (notAllowedError instanceof Error) notAllowedMessage = notAllowedError.message;
@@ -9689,6 +9777,7 @@ function LoginView({ logo, authController, noUserComponent, disableSignupScreen
 						mode === "buttons" && /* @__PURE__ */ jsxs("div", {
 							className: "w-full flex flex-col gap-3 mt-2",
 							children: [
+								buttonsErrorMessage && /* @__PURE__ */ jsx(ErrorView, { error: buttonsErrorMessage }),
 								(title || subtitle) && /* @__PURE__ */ jsxs("div", {
 									className: "text-center mb-2",
 									children: [title && /* @__PURE__ */ jsx(Typography, {
@@ -9729,7 +9818,8 @@ function LoginView({ logo, authController, noUserComponent, disableSignupScreen
 									disabled,
 									googleClientId,
 									authController,
-									onSignedIn: () => subscribeIfOptedIn(authControllerRef.current.user?.email)
+									onSignedIn: () => subscribeIfOptedIn(authControllerRef.current.user?.email),
+									onError: setProviderError
 								}),
 								hasGitHubLogin && githubClientId && /* @__PURE__ */ jsx(GitHubLoginButton, {
 									disabled,
@@ -9838,10 +9928,12 @@ var GoogleIcon = () => /* @__PURE__ */ jsxs("svg", {
 		})
 	]
 });
-function GoogleLoginButton({ disabled, googleClientId, authController, onSignedIn }) {
+function GoogleLoginButton({ disabled, googleClientId, authController, onSignedIn, onError }) {
 	const codeClientRef = useRef(null);
 	const onSignedInRef = useRef(onSignedIn);
 	onSignedInRef.current = onSignedIn;
+	const onErrorRef = useRef(onError);
+	onErrorRef.current = onError;
 	useEffect(() => {
 		if (!authController.googleLogin) return;
 		const google = window.google;
@@ -9853,8 +9945,10 @@ function GoogleLoginButton({ disabled, googleClientId, authController, onSignedI
 			callback: async (response) => {
 				if (response.error || !response.code) {
 					console.error("Google login error:", response.error);
+					if (!isUserCancellation(response.error)) onErrorRef.current?.(response.error ? `Google sign-in failed: ${response.error}` : "Google sign-in failed. Please try again.");
 					return;
 				}
+				onErrorRef.current?.(null);
 				try {
 					await authController.googleLogin({
 						code: response.code,
@@ -9870,8 +9964,10 @@ function GoogleLoginButton({ disabled, googleClientId, authController, onSignedI
 	const handleClick = () => {
 		if (!codeClientRef.current) {
 			console.error("Google Sign-In not loaded");
+			onErrorRef.current?.("Google Sign-In could not be loaded. Check your connection or any script blockers, then try again.");
 			return;
 		}
+		onErrorRef.current?.(null);
 		codeClientRef.current.requestCode();
 	};
 	return /* @__PURE__ */ jsx(LoginButton, {
@@ -16469,13 +16565,23 @@ function buildResources(translations) {
 * @group Core
 */
 function Rebase(props) {
-	const { children, entityLinkBuilder, userConfigPersistence, dateTimeFormat, locale, client, authController: authControllerProp, storageSource: storageSourceProp, dataSources: dataSourcesProp, storageSources: storageSourcesProp, databaseAdmin, plugins: pluginsProp, slots: directSlots = [], onAnalyticsEvent, propertyConfigs, entityViews, entityActions, effectiveRoleController, apiUrl, translations, components: componentsProp } = props;
+	const { children, entityLinkBuilder, userConfigPersistence, dateTimeFormat, locale, client, authController: authControllerProp, storageSource: storageSourceProp, dataSources: dataSourcesProp, storageSources: storageSourcesProp, databaseAdmin, plugins: pluginsProp, slots: directSlots = [], onAnalyticsEvent, propertyConfigs, entityViews, collectionViews, entityActions, effectiveRoleController, apiUrl, translations, components: componentsProp } = props;
 	const plugins = pluginsProp;
 	if (plugins) {
 		const keys = plugins.map((p) => p.key);
 		if (new Set(keys).size !== keys.length) console.error("Duplicate plugin keys detected:", keys.filter((k, i) => keys.indexOf(k) !== i));
 	}
-	const resolvedSlots = useMemo(() => [...directSlots, ...(plugins ?? []).flatMap((p) => p.slots ?? [])], [directSlots, plugins]);
+	const resolvedSlots = useMemo(() => [...directSlots, ...(plugins ?? []).flatMap((p) => p.slots ?? [])].map((contribution) => {
+		const current = RENAMED_SLOTS[contribution.slot];
+		return current ? {
+			...contribution,
+			slot: current
+		} : contribution;
+	}), [directSlots, plugins]);
+	useEffect(() => {
+		const registered = [...directSlots, ...(plugins ?? []).flatMap((p) => p.slots ?? [])];
+		for (const legacy of new Set(registered.map((s) => s.slot).filter((slot) => slot in RENAMED_SLOTS))) console.warn(`[Rebase] The "${legacy}" slot has been renamed to "${RENAMED_SLOTS[legacy]}". The contribution was redirected and still renders, but the old name will be removed in a future major version.`);
+	}, [directSlots, plugins]);
 	useEffect(() => {
 		const dead = new Set(UNRENDERED_SLOTS);
 		const registered = new Set(resolvedSlots.map((s) => s.slot).filter((slot) => dead.has(slot)));
@@ -16632,6 +16738,7 @@ function Rebase(props) {
 		plugins,
 		resolvedSlots,
 		entityViews: entityViews ?? [],
+		collectionViews: collectionViews ?? [],
 		entityActions: entityActions ?? [],
 		propertyConfigs: propertyConfigs ?? {},
 		components: componentsProp
@@ -16642,6 +16749,7 @@ function Rebase(props) {
 		plugins,
 		resolvedSlots,
 		entityViews,
+		collectionViews,
 		entityActions,
 		propertyConfigs,
 		componentsProp