@rebasepro/app 0.14.1 → 0.14.2-canary.g27a129e

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rebasepro/app",
   "type": "module",
-  "version": "0.14.1",
+  "version": "0.14.2-canary.g27a129e",
   "description": "Rebase core — framework-agnostic runtime for data-driven admin panels",
   "funding": {
     "url": "https://github.com/sponsors/rebaseco"
@@ -52,12 +52,12 @@
     "magic-string": "^0.30.0",
     "notistack": "^3.0.2",
     "react-i18next": "^17.0.11",
-    "@rebasepro/admin-types": "0.14.1",
-    "@rebasepro/types": "0.14.1",
-    "@rebasepro/forms": "0.14.1",
-    "@rebasepro/common": "0.14.1",
-    "@rebasepro/utils": "0.14.1",
-    "@rebasepro/ui": "0.14.1"
+    "@rebasepro/admin-types": "0.14.2-canary.g27a129e",
+    "@rebasepro/common": "0.14.2-canary.g27a129e",
+    "@rebasepro/forms": "0.14.2-canary.g27a129e",
+    "@rebasepro/ui": "0.14.2-canary.g27a129e",
+    "@rebasepro/types": "0.14.2-canary.g27a129e",
+    "@rebasepro/utils": "0.14.2-canary.g27a129e"
   },
   "peerDependencies": {
     "react": ">=19.2.7",

package/src/components/Debug/UIReferenceView.tsx

@@ -599,7 +599,7 @@ selected: true }, { name: "Tags" }].map(c => (
                         All variants from <code className="font-mono text-xs">Typography</code>. Colors: primary (default), secondary, disabled, error.
                     </Typography>
                     <div className="flex flex-col gap-3">
-                        {(["h1", "h2", "h3", "h4", "h5", "h6", "subtitle1", "subtitle2", "body1", "body2", "caption", "label", "button"] as const).map(v => (
+                        {(["h1", "h2", "h3", "h4", "h5", "h6", "lead", "subtitle1", "subtitle2", "body1", "body2", "caption", "label", "button"] as const).map(v => (
                             <div key={v} className={cls("flex items-baseline gap-4 border-b pb-3 last:border-0", defaultBorderMixin)}>
                                 <span className="w-24 shrink-0 text-xs text-surface-400 font-mono">{v}</span>
                                 {/* `component="p"` keeps the variant's styling but not its
@@ -618,6 +618,45 @@ selected: true }, { name: "Tags" }].map(c => (
                             <Typography key={c} color={c}>color=&quot;{c}&quot;</Typography>
                         ))}
                     </div>
+
+                    {/* The data tiers are shown with real content rather than the
+                        pangram above: `micro` is always one or two words naming the
+                        value beneath it, and `mono` is always a measurement. A
+                        specimen reading "The quick brown fox" would demonstrate the
+                        size and misrepresent the purpose. */}
+                    <div className={cls("mt-8 pt-6 border-t", defaultBorderMixin)}>
+                        <Typography variant="subtitle2" className="block mb-1">Data tiers</Typography>
+                        <Typography variant="body2" color="secondary" className="block mb-5 max-w-[65ch]">
+                            For values that are looked up rather than read: a field name, a measurement,
+                            a headline figure. <code className="font-mono text-xs">mono</code> and{" "}
+                            <code className="font-mono text-xs">stat</code> both carry{" "}
+                            <code className="font-mono text-xs">tabular-nums</code>, so a column of them
+                            keeps its decimal points aligned and a live counter does not jitter as its
+                            digits change width.
+                        </Typography>
+
+                        <div className="flex flex-wrap items-start gap-x-12 gap-y-5">
+                            {([
+                                ["Region", "europe-west1"],
+                                ["Took", "32.2s"],
+                                ["Last run", "16/08/2026, 05:30:32"]
+                            ] as const).map(([label, value]) => (
+                                <div key={label}>
+                                    <Typography variant="micro" component="div" color="secondary" className="block">
+                                        {label}
+                                    </Typography>
+                                    <Typography variant="mono" component="div" className="block mt-1 text-sm">
+                                        {value}
+                                    </Typography>
+                                </div>
+                            ))}
+                        </div>
+
+                        <div className="mt-6">
+                            <span className="text-xs text-surface-400 font-mono">stat</span>
+                            <Typography variant="stat" component="div" className="block mt-1">1,284</Typography>
+                        </div>
+                    </div>
                 </SectionBlock>
 
                 {/* ═══════════════════════════════════════════════

package/src/components/LoginView/LoginView.tsx

@@ -199,6 +199,22 @@ function warnAboutHalfConfiguredOAuth(
     );
 }
 
+/**
+ * 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: string | undefined): boolean {
+    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.
@@ -232,6 +248,12 @@ export function LoginView({
     const [mode, setMode] = useState<AuthMode>("buttons");
     const [fadeIn, setFadeIn] = useState(false);
     const [viewVisible, setViewVisible] = useState(true);
+    // Failures that never reach the auth controller: a provider that answers the
+    // popup with an error, a redirect whose `state` does not match, a Google
+    // script that never loaded. The controller records everything it is *given*
+    // in `authProviderError`, so it cannot speak for the half of the flow that
+    // happens before the code reaches it.
+    const [providerError, setProviderError] = useState<string | null>(null);
     // Lives here, not in LoginForm: the box is ticked on the provider screen
     // and read after a sign-in that happens one or two screens later, so it has
     // to outlive both. The form also unmounts on every login↔register switch.
@@ -259,6 +281,9 @@ export function LoginView({
     }, [newsletterOptIn, onNewsletterOptIn]);
 
     const switchMode = (newMode: AuthMode) => {
+        // A message about the last Google attempt has nothing to say about the
+        // email form the visitor just opened.
+        setProviderError(null);
         setViewVisible(false);
         setTimeout(() => {
             setMode(newMode);
@@ -321,14 +346,21 @@ export function LoginView({
 
         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) {
+            // The rejection is recorded in `authProviderError`, which the screen
+            // renders — the catch is here so a shown error does not also surface
+            // as an unhandled rejection.
             authController.oauthLogin(result.provider, {
                 code: result.code,
                 redirectUri: result.redirectUri,
@@ -354,6 +386,16 @@ export function LoginView({
         logoComponent = <RebaseLogo/>;
     }
 
+    // The controller's own record of the last rejected sign-in, ignored once a
+    // user is present — a stale failure must not sit over a screen that has
+    // since succeeded. `LoginForm` renders the same value for the email path.
+    const controllerError = authController.authProviderError && !authController.user
+        ? (authController.authProviderError instanceof Error
+            ? authController.authProviderError.message
+            : String(authController.authProviderError))
+        : null;
+    const buttonsErrorMessage = providerError ?? controllerError;
+
     let notAllowedMessage: string | undefined;
     if (notAllowedError) {
         if (typeof notAllowedError === "string") {
@@ -430,6 +472,15 @@ export function LoginView({
                             {/* Provider buttons screen */}
                             {mode === "buttons" && (
                                 <div className="w-full flex flex-col gap-3 mt-2">
+                                    {/* Every provider button fails here, and this
+                                        screen used to render nothing for it: a
+                                        refused Google sign-in closed the popup
+                                        and returned the visitor to an unchanged
+                                        login screen, with the reason only in the
+                                        browser console. */}
+                                    {buttonsErrorMessage && (
+                                        <ErrorView error={buttonsErrorMessage}/>
+                                    )}
                                     {(title || subtitle) && (
                                         <div className="text-center mb-2">
                                             {title && (
@@ -497,6 +548,7 @@ export function LoginView({
                                             googleClientId={googleClientId}
                                             authController={authController}
                                             onSignedIn={() => subscribeIfOptedIn(authControllerRef.current.user?.email)}
+                                            onError={setProviderError}
                                         />
                                     )}
                                     {hasGitHubLogin && githubClientId && (
@@ -621,13 +673,20 @@ function GoogleLoginButton({
     disabled,
     googleClientId,
     authController,
-    onSignedIn
+    onSignedIn,
+    onError
 }: {
     disabled?: boolean,
     googleClientId: string,
     authController: AuthControllerExtended,
     /** Called once the controller has accepted the provider's code. */
-    onSignedIn?: () => void
+    onSignedIn?: () => void,
+    /**
+     * Reports a failure the auth controller never saw — Google answering the
+     * popup with an error, or its script never having loaded. A rejected
+     * `googleLogin` is not reported here: the controller already records it.
+     */
+    onError?: (message: string | null) => void
 }) {
     const codeClientRef = useRef<{ requestCode(): void } | null>(null);
     // The code client is built once and its callback closes over this render's
@@ -635,6 +694,8 @@ function GoogleLoginButton({
     // rather than the one that existed when Google's script happened to load.
     const onSignedInRef = useRef(onSignedIn);
     onSignedInRef.current = onSignedIn;
+    const onErrorRef = useRef(onError);
+    onErrorRef.current = onError;
 
     useEffect(() => {
         if (!authController.googleLogin) return;
@@ -649,8 +710,16 @@ function GoogleLoginButton({
             callback: async (response: { code?: string; error?: string }) => {
                 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 {
                     // Send the authorization code to the backend.
                     // redirectUri "postmessage" is required when using popup ux_mode.
@@ -672,8 +741,10 @@ function GoogleLoginButton({
     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();
     };
 

package/src/core/Rebase.tsx

@@ -6,7 +6,7 @@ import type { ComponentOverrideMap } from "@rebasepro/admin-types";
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import { CenteredView, Typography } from "@rebasepro/ui";
 import { User, CollectionRegistryController, DataDriver, DataSourceDefinition, RebaseData, DEFAULT_DATA_SOURCE_KEY, StorageSource, StorageSourceDefinition, DEFAULT_STORAGE_SOURCE_KEY } from "@rebasepro/types";
-import { RebaseContext, UNRENDERED_SLOTS } from "@rebasepro/admin-types";
+import { RebaseContext, RENAMED_SLOTS, UNRENDERED_SLOTS } from "@rebasepro/admin-types";
 import { PluginProviderStack } from "./PluginProviderStack";
 import { PluginLifecycleManager } from "./PluginLifecycleManager";
 import { AuthControllerContext, CollectionResolverRegistrationContext, CollectionResolver } from "../contexts";
@@ -66,6 +66,7 @@ export function Rebase<USER extends User, DB = unknown>(props: RebaseProps<USER,
         onAnalyticsEvent,
         propertyConfigs,
         entityViews,
+        collectionViews,
         entityActions,
 
         effectiveRoleController,
@@ -84,11 +85,32 @@ export function Rebase<USER extends User, DB = unknown>(props: RebaseProps<USER,
         }
     }
 
-    // Merge direct slots with plugin slots
+    // Merge direct slots with plugin slots, rewriting any retired slot name to
+    // the one it was renamed to. `useSlot` matches on string equality, so a
+    // contribution left on the old name would register cleanly and render
+    // nothing — the same silent nothing `UNRENDERED_SLOTS` warns about below.
     const resolvedSlots: SlotContribution[] = useMemo(() => [
         ...directSlots,
         ...((plugins ?? []).flatMap((p) => p.slots ?? []))
-    ], [directSlots, plugins]);
+    ].map((contribution) => {
+        const current = RENAMED_SLOTS[contribution.slot];
+        return current ? { ...contribution, slot: current } : contribution;
+    }), [directSlots, plugins]);
+
+    // Warn once per retired name actually in use. This reads the *pre-rewrite*
+    // names off the inputs rather than `resolvedSlots`, which no longer has
+    // them — the rewrite above is what makes the plugin keep working, and this
+    // is what tells its author to stop relying on it.
+    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]);
 
     // Seven of the twenty-nine declared slots are rendered nowhere. They have
     // props interfaces and rows in the public slot reference, so registering
@@ -349,10 +371,11 @@ export function Rebase<USER extends User, DB = unknown>(props: RebaseProps<USER,
         plugins,
         resolvedSlots,
         entityViews: entityViews ?? [],
+        collectionViews: collectionViews ?? [],
         entityActions: entityActions ?? [],
         propertyConfigs: propertyConfigs ?? {},
         components: componentsProp
-    }), [dateTimeFormat, locale, entityLinkBuilder, plugins, resolvedSlots, entityViews, entityActions, propertyConfigs, componentsProp]);
+    }), [dateTimeFormat, locale, entityLinkBuilder, plugins, resolvedSlots, entityViews, collectionViews, entityActions, propertyConfigs, componentsProp]);
 
     const analyticsController = useMemo(() => ({
         onAnalyticsEvent

package/src/core/RebaseProps.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { User, DataDriver, DataSourceDefinition, StorageSource, StorageSourceDefinition, CollectionRegistryController, DatabaseAdmin, RebaseClient } from "@rebasepro/types";
-import { Locale, AuthController, AnalyticsEvent, UserConfigurationPersistence, UrlController, NavigationStateController, RebaseContext, EntityLinkBuilder, RebasePlugin, SlotContribution, PropertyConfig, EntityCustomView, EntityAction, RebaseTranslations, ComponentOverrideMap } from "@rebasepro/admin-types";
+import { Locale, AuthController, AnalyticsEvent, UserConfigurationPersistence, UrlController, NavigationStateController, RebaseContext, EntityLinkBuilder, RebasePlugin, SlotContribution, PropertyConfig, EntityCustomView, CollectionCustomView, EntityAction, RebaseTranslations, ComponentOverrideMap } from "@rebasepro/admin-types";
 
 /**
  * A data source registered on `<Rebase>`. Extends the shared
@@ -283,6 +283,12 @@ export type RebaseProps<USER extends User, DB = unknown> = {
      */
     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/src/hooks/useResolvedComponent.tsx

@@ -1,4 +1,5 @@
-import React, { lazy, useMemo } from "react";
+import React, { useMemo } from "react";
+import { lazyChunk } from "@rebasepro/ui";
 import type { ComponentRef, LazyComponentRef } from "@rebasepro/types";
 import { isLazyComponentRef } from "@rebasepro/types";
 
@@ -70,7 +71,9 @@ function getOrCreateLazy<P>(
     if (cached) return cached as React.ComponentType<P>;
 
     // SAFETY: React.lazy returns LazyExoticComponent which is structurally compatible with ComponentType<P>
-    const LazyComponent = lazy(loader) as React.ComponentType<P>;
+    // `lazyChunk`, not `lazy`: a custom view is a chunk like any other, and a
+    // tab left open across a deploy cannot fetch it either.
+    const LazyComponent = lazyChunk(loader) as React.ComponentType<P>;
     lazyCache.set(key, LazyComponent);
     return LazyComponent;
 }