@vertesia/ui 1.5.0-dev.20260910.052912Z → 1.6.0-dev.20260912.110338Z

package/src/shell/SplashScreen.tsx

@@ -1,51 +1,45 @@
 import { useUserSession } from '@vertesia/ui/session';
-import { AnimatePresence, motion } from 'framer-motion';
-import { type ReactNode, useEffect, useState } from 'react';
+import type { ComponentType, ReactNode } from 'react';
+
+export interface AuthLoadingScreenProps {
+    loadingIcon?: ReactNode;
+}
 
 interface SplashScreenProps {
+    Presentation?: ComponentType<AuthLoadingScreenProps>;
+    Screen?: ComponentType<AuthLoadingScreenProps>;
     icon?: ReactNode;
 }
-export function SplashScreen({ icon: Icon }: SplashScreenProps) {
+export function SplashScreen({ icon: Icon, Screen, Presentation = DefaultAuthLoadingScreen }: SplashScreenProps) {
     const { isLoading, authToken } = useUserSession();
-    const [show, setShow] = useState(true);
+    // Hand off synchronously: an exiting splash must never cover the next view.
+    if (authToken || !isLoading) return null;
 
-    useEffect(() => {
-        if (!isLoading) {
-            setShow(false);
-        }
-    }, [isLoading]);
-
-    // The permission gate owns the loading UI once a token is available.
-    // Skip the exit animation too, so two loading indicators never overlap.
-    if (authToken) return null;
+    // Custom screens own the entire page, including their animation and positioning.
+    const LoadingScreen = Screen ?? Presentation;
+    return <LoadingScreen loadingIcon={Icon} />;
+}
 
+/** Presentation shared by the default shell and configured branding. */
+export function DefaultAuthLoadingScreen({
+    loadingIcon,
+    loadingLabel = 'Loading',
+}: AuthLoadingScreenProps & { loadingLabel?: string }) {
     return (
-        <AnimatePresence>
-            {show && (
-                <motion.div
-                    style={{ zIndex: 999999, position: 'fixed', inset: 0 }}
-                    className="fixed inset-x-0 inset-y-0"
-                    initial={{ opacity: 1 }}
-                    exit={{ opacity: 0 }}
-                    transition={{ ease: 'easeIn', duration: 0.5 }}
-                >
-                    <div
-                        style={{
-                            display: 'flex',
-                            width: '100%',
-                            height: '100%',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                        }}
-                        className="flex w-full h-full items-center justify-center"
-                    >
-                        <div className="animate-[spin_4s_linear_infinite]">
-                            <div className="animate-pulse rounded-full bg-transparent">{Icon || <LoadingIcon />}</div>
-                        </div>
-                    </div>
-                </motion.div>
-            )}
-        </AnimatePresence>
+        <div style={{ position: 'fixed', inset: 0, zIndex: 999999 }} role="status" aria-label={loadingLabel}>
+            <div
+                style={{
+                    display: 'flex',
+                    width: '100%',
+                    height: '100%',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}
+                className="flex w-full h-full items-center justify-center"
+            >
+                <LoadingAnimation loadingIcon={loadingIcon} />
+            </div>
+        </div>
     );
 }
 
@@ -58,7 +52,7 @@ function LoadingIcon() {
         <svg
             width="32"
             height="32"
-            className="w-8 h-8 text-primary"
+            className="w-8 h-8 text-info"
             viewBox="0 0 50 50"
             xmlns="http://www.w3.org/2000/svg"
             role="img"
@@ -83,3 +77,14 @@ function LoadingIcon() {
         </svg>
     );
 }
+
+/** Shared logo motion for full-screen and in-content loading states. */
+export function LoadingAnimation({ loadingIcon }: AuthLoadingScreenProps) {
+    return (
+        <div className="animate-[var(--vertesia-loading-animation,spin_4s_linear_infinite)] motion-reduce:animate-none">
+            <div className="animate-[var(--vertesia-loading-pulse-animation,pulse_2s_cubic-bezier(0.4,0,0.6,1)_infinite)] motion-reduce:animate-none rounded-full bg-transparent">
+                {loadingIcon || <LoadingIcon />}
+            </div>
+        </div>
+    );
+}

package/src/shell/VertesiaShell.tsx

@@ -1,13 +1,24 @@
 import { ThemeProvider, ToastProvider } from '@vertesia/ui/core';
-import { TypeRegistryProvider, UserPermissionProvider } from '@vertesia/ui/features';
+import { type PermissionLoadingScreenProps, TypeRegistryProvider, UserPermissionProvider } from '@vertesia/ui/features';
 import { LanguageBoundI18nProvider, LanguageProvider, type SupportedLanguage } from '@vertesia/ui/i18n';
 import { DevSessionProvider, UserSessionProvider } from '@vertesia/ui/session';
-import type { ReactNode } from 'react';
+import type { ComponentType, ReactNode } from 'react';
+import type { AppBranding } from '../boot/branding.js';
 import { IframeAppContextSync } from './apps/IframeAppContextSync.js';
-import { SigninScreen } from './login/SigninScreen';
-import { SplashScreen } from './SplashScreen';
+import { AppBrandingProvider, BrandedAuthLoadingScreen, brandedAuthScreens } from './BrandedAuthScreens';
+import { type SignInScreenViewProps, SigninScreen } from './login/SigninScreen';
+import { type AuthLoadingScreenProps, SplashScreen } from './SplashScreen';
 
-interface VertesiaShellProps {
+/** Optional full-page presentations. Session and permission gating remain owned by the shell. */
+export interface AuthScreens {
+    SignIn?: ComponentType<SignInScreenViewProps>;
+    Loading?: ComponentType<AuthLoadingScreenProps>;
+    Permissions?: ComponentType<PermissionLoadingScreenProps>;
+}
+
+export interface VertesiaShellProps {
+    authScreens?: AuthScreens;
+    branding?: AppBranding;
     children: React.ReactNode;
     lightLogo?: string;
     darkLogo?: string;
@@ -30,26 +41,38 @@ export function VertesiaShell({
     suppressSignInErrorPrefixes,
     authToken,
     defaultLanguage,
+    authScreens,
+    branding,
 }: VertesiaShellProps) {
-    const content = (
+    const screens = { ...(branding ? brandedAuthScreens : {}), ...authScreens };
+    const brandedContent = (
         <TypeRegistryProvider>
             <ThemeProvider defaultTheme="system" storageKey="vite-ui-theme">
                 <LanguageProvider defaultLanguage={defaultLanguage}>
                     <LanguageBoundI18nProvider>
-                        <IframeAppContextSync />
-                        {!authToken && (
-                            <>
-                                <SplashScreen icon={loadingIcon} />
-                                <SigninScreen
-                                    allowedPrefix="/shared/"
-                                    darkLogo={darkLogo}
-                                    lightLogo={lightLogo}
-                                    preservePath={preserveSignInPath}
-                                    suppressAuthErrorPrefix={suppressSignInErrorPrefixes}
-                                />
-                            </>
-                        )}
-                        <UserPermissionProvider loadingIcon={loadingIcon}>{children}</UserPermissionProvider>
+                        <AppBrandingBoundary branding={branding}>
+                            <IframeAppContextSync />
+                            {!authToken && (
+                                <>
+                                    <SplashScreen
+                                        icon={loadingIcon}
+                                        Screen={authScreens?.Loading}
+                                        Presentation={branding ? BrandedAuthLoadingScreen : undefined}
+                                    />
+                                    <SigninScreen
+                                        View={screens.SignIn}
+                                        allowedPrefix="/shared/"
+                                        darkLogo={darkLogo}
+                                        lightLogo={lightLogo}
+                                        preservePath={preserveSignInPath}
+                                        suppressAuthErrorPrefix={suppressSignInErrorPrefixes}
+                                    />
+                                </>
+                            )}
+                            <UserPermissionProvider loadingIcon={loadingIcon} LoadingScreen={screens.Permissions}>
+                                {children}
+                            </UserPermissionProvider>
+                        </AppBrandingBoundary>
                     </LanguageBoundI18nProvider>
                 </LanguageProvider>
             </ThemeProvider>
@@ -59,10 +82,14 @@ export function VertesiaShell({
     return (
         <ToastProvider>
             {authToken ? (
-                <DevSessionProvider token={authToken}>{content}</DevSessionProvider>
+                <DevSessionProvider token={authToken}>{brandedContent}</DevSessionProvider>
             ) : (
-                <UserSessionProvider loadOnboardingStatus={loadOnboardingStatus}>{content}</UserSessionProvider>
+                <UserSessionProvider loadOnboardingStatus={loadOnboardingStatus}>{brandedContent}</UserSessionProvider>
             )}
         </ToastProvider>
     );
 }
+
+function AppBrandingBoundary({ branding, children }: { branding?: AppBranding; children: ReactNode }) {
+    return branding ? <AppBrandingProvider branding={branding}>{children}</AppBrandingProvider> : children;
+}

package/src/shell/apps/StandaloneApp.tsx

@@ -109,7 +109,11 @@ function AccessDeniedMessage({ name }: AccessDeniedMessageProps) {
     const onProjectChange = (selected: ProjectRef) => {
         localStorage.setItem(LastSelectedAccountId_KEY, selected.account);
         localStorage.setItem(`${LastSelectedProjectId_KEY}-${selected.account}`, selected.id);
-        window.location.reload();
+        // An explicit selection must override configured workspace defaults on the next load.
+        const url = new URL(window.location.href);
+        url.searchParams.set('a', selected.account);
+        url.searchParams.set('p', selected.id);
+        window.location.assign(url.toString());
     };
 
     const filteredProjects = selectedAccountId ? projectsByOrg[selectedAccountId] || [] : [];

package/src/shell/index.tsx

@@ -1,7 +1,13 @@
+export * from './AuthScreenPreview';
 export * from './apps/index';
+export * from './BrandedAuthScreens';
 export * from './login/InviteAcceptModal';
+export * from './login/SignInFlow';
+export * from './login/SignInPageShell';
 export * from './login/SigninScreen';
+export * from './login/signInUtils';
 export * from './login/TerminalLogin';
 export * from './login/UserSessionMenu';
+export type { AuthLoadingScreenProps } from './SplashScreen';
 export * from './utils';
 export * from './VertesiaShell';

package/src/shell/login/SignInFlow.tsx

@@ -0,0 +1,213 @@
+/**
+ * The sign-in state machine, extracted from SigninScreen so more than one host can drive it.
+ *
+ * Two hosts run it today: the Studio shell, which layers its own error-recovery modes on top
+ * (`SigninScreen`), and the Central Auth broker, which has no Vertesia session and renders only the
+ * modes below. The interesting behaviour is not the markup — it is the ordering: remembered
+ * identity first, then email, then tenant resolution deciding which providers are even offered.
+ * Re-implementing that per host is how the two pages drift apart.
+ *
+ * The hook takes no session dependency of its own: `signOut` and `trackEvent` come in as options
+ * because a host without a `UserSessionProvider` cannot call those hooks.
+ */
+import { useCallback, useEffect, useState } from 'react';
+import SignInAuthPending from './SignInAuthPending';
+import SignInEmailStep, { type TenantInfo } from './SignInEmailStep';
+import SignInProvidersStep from './SignInProvidersStep';
+import SignInReturningStep from './SignInReturningStep';
+import SignInTenantStep from './SignInTenantStep';
+import {
+    clearLastSuccessfulLogin,
+    clearPendingSignin,
+    finalizeSuccessfulLogin,
+    type LastSuccessfulLogin,
+    type ProviderId,
+    readLastSuccessfulLogin,
+    resetSignInState,
+    signOutOfFirebase,
+} from './signInUtils';
+
+/** The modes every host shares. Hosts may add their own; see the `M` parameter below. */
+export type SignInCoreMode = 'email' | 'providers' | 'tenant' | 'returning' | 'pending';
+
+export interface SignInFlowOptions {
+    /**
+     * Host sign-out, run when the user abandons the remembered identity. Defaults to a plain
+     * Firebase sign-out; a host with a Vertesia session passes its own so the session goes too.
+     */
+    signOut?: () => void | Promise<void>;
+    /** Analytics sink. Only `enterprise_signin` is emitted, and only for a tenant-resolved sign-in. */
+    trackEvent?: (eventName: string, eventProperties?: Record<string, unknown>) => void;
+    /**
+     * The authenticated user, once there is one. Supplying it lets the flow stamp the display name
+     * onto the remembered-login record; a host that unmounts the flow on login should call
+     * {@link finalizeSuccessfulLogin} itself instead.
+     */
+    user?: { name?: string | null } | null;
+}
+
+/**
+ * Flow state plus the handlers the steps are wired to.
+ *
+ * `M` is the host's own extra modes: `SigninScreen` passes its error-recovery union so `mode` and
+ * `setMode` stay exhaustively typed there, while a host with no extra modes gets `SignInCoreMode`.
+ */
+export interface SignInFlowController<M extends string = never> {
+    mode: SignInCoreMode | M;
+    setMode: (mode: SignInCoreMode | M) => void;
+    email: string;
+    setEmail: (email: string) => void;
+    tenant: TenantInfo | undefined;
+    setTenant: (tenant: TenantInfo | undefined) => void;
+    storedSession: LastSuccessfulLogin | null;
+    setStoredSession: (session: LastSuccessfulLogin | null) => void;
+    pendingProvider: ProviderId | null;
+    /** Email accepted: go to the tenant step when one resolved, otherwise the provider list. */
+    onProceedFromEmail: (email: string, tenant?: TenantInfo) => void;
+    /** Back to the email step, dropping the resolved tenant. */
+    onBack: () => void;
+    /** "Not you?" — forget the remembered identity and sign out. */
+    onNotYou: () => void;
+    /** A provider was picked; show the pending screen while the IdP redirect happens. */
+    onProviderClicked: (provider: ProviderId) => void;
+    /** Full reset: clear the persisted records and the Firebase session, back to the email step. */
+    startOver: () => void;
+}
+
+export function useSignInFlow<M extends string = never>(options: SignInFlowOptions = {}): SignInFlowController<M> {
+    const { signOut, trackEvent, user } = options;
+
+    const [storedSession, setStoredSession] = useState<LastSuccessfulLogin | null>(() => readLastSuccessfulLogin());
+    const [mode, setMode] = useState<SignInCoreMode | M>(() => (readLastSuccessfulLogin() ? 'returning' : 'email'));
+    const [email, setEmail] = useState('');
+    const [tenant, setTenant] = useState<TenantInfo | undefined>(undefined);
+    const [pendingProvider, setPendingProvider] = useState<ProviderId | null>(null);
+
+    // On successful login, finalize the last-successful-login entry with the user's name.
+    useEffect(() => {
+        if (!user) return;
+        finalizeSuccessfulLogin(user.name ?? undefined);
+    }, [user]);
+
+    const onProceedFromEmail = useCallback((e: string, t: TenantInfo | undefined) => {
+        setEmail(e);
+        setTenant(t);
+        setMode(t ? 'tenant' : 'providers');
+    }, []);
+
+    const onBack = useCallback(() => {
+        setMode('email');
+        setTenant(undefined);
+    }, []);
+
+    const onNotYou = useCallback(() => {
+        clearLastSuccessfulLogin();
+        clearPendingSignin();
+        setStoredSession(null);
+        setEmail('');
+        setTenant(undefined);
+        setMode('email');
+        // Without a host sign-out, drop the Firebase session anyway: leaving it behind means the
+        // next auth-state change re-authenticates the identity the user just said isn't theirs.
+        void (signOut ? signOut() : signOutOfFirebase());
+    }, [signOut]);
+
+    const onProviderClicked = useCallback(
+        (provider: ProviderId) => {
+            // Tenant context comes from a resolved tenant or stored tenantName, not the provider.
+            const hasTenant = !!tenant || !!storedSession?.tenantName;
+            // Only the pre-existing enterprise_signin event; non-tenant sign-ins emit nothing.
+            if (hasTenant) trackEvent?.('enterprise_signin', { provider });
+            setPendingProvider(provider);
+            setMode('pending');
+            // The redirect itself happens in the calling step's startSignIn(); this just shows the pending screen.
+        },
+        [trackEvent, storedSession?.tenantName, tenant],
+    );
+
+    const startOver = useCallback(() => {
+        setStoredSession(null); // drop the in-memory mirror too — resetSignInState only clears storage
+        setEmail('');
+        setTenant(undefined);
+        setMode('email');
+        void resetSignInState();
+    }, []);
+
+    return {
+        mode,
+        setMode,
+        email,
+        setEmail,
+        tenant,
+        setTenant,
+        storedSession,
+        setStoredSession,
+        pendingProvider,
+        onProceedFromEmail,
+        onBack,
+        onNotYou,
+        onProviderClicked,
+        startOver,
+    };
+}
+
+/**
+ * The part of the controller the shared steps read.
+ *
+ * Deliberately excludes the setters: their parameter types mention the host's extra modes, and a
+ * contravariant position would stop `SignInFlowController<never>` from being passed here.
+ */
+export type SignInStepsController = Omit<
+    SignInFlowController<string>,
+    'setMode' | 'setEmail' | 'setTenant' | 'setStoredSession' | 'startOver'
+>;
+
+interface SignInFlowStepsProps {
+    flow: SignInStepsController;
+    /** Path to return to after the IdP round-trip. Defaults to the current pathname. */
+    redirectTo?: string;
+}
+
+/**
+ * Renders the step for the current core mode. A host mode this doesn't know falls through to the
+ * email step, which is where the original screen sent an unrecognized state too.
+ */
+export function SignInFlowSteps({ flow, redirectTo }: SignInFlowStepsProps) {
+    const { mode, email, tenant, storedSession, pendingProvider } = flow;
+
+    if (mode === 'pending' && pendingProvider) {
+        return <SignInAuthPending provider={pendingProvider} />;
+    }
+    if (mode === 'tenant' && tenant) {
+        return (
+            <SignInTenantStep
+                email={email}
+                tenant={tenant}
+                onBack={flow.onBack}
+                onProviderClicked={() => flow.onProviderClicked((tenant.provider ?? 'oidc') as ProviderId)}
+                redirectTo={redirectTo}
+            />
+        );
+    }
+    if (mode === 'providers') {
+        return (
+            <SignInProvidersStep
+                email={email}
+                onBack={flow.onBack}
+                onProviderClicked={flow.onProviderClicked}
+                redirectTo={redirectTo}
+            />
+        );
+    }
+    if (mode === 'returning' && storedSession) {
+        return (
+            <SignInReturningStep
+                session={storedSession}
+                onNotYou={flow.onNotYou}
+                onProviderClicked={flow.onProviderClicked}
+                redirectTo={redirectTo}
+            />
+        );
+    }
+    return <SignInEmailStep initialEmail={email} onProceed={flow.onProceedFromEmail} />;
+}

package/src/shell/login/SignInPageShell.tsx

@@ -0,0 +1,62 @@
+/**
+ * The chrome around a sign-in step: product logo, the step itself, an optional notice, and the
+ * legal footer. Hosts supply their own outer container — the Studio shell overlays the app, the
+ * Central Auth broker owns the whole document — so this component deliberately does not position
+ * itself.
+ */
+import { useUITranslation } from '@vertesia/ui/i18n';
+import { RegionTag } from '@vertesia/ui/layout';
+import type { ReactNode } from 'react';
+
+interface SignInPageShellProps {
+    logoAlt?: string;
+    footer?: string;
+    lightLogo?: string;
+    darkLogo?: string;
+    /** Rendered between the step and the footer — e.g. a generic authentication error. */
+    notice?: ReactNode;
+    children: ReactNode;
+}
+
+export function SignInPageShell({
+    lightLogo,
+    darkLogo,
+    notice,
+    children,
+    logoAlt = 'Vertesia',
+    footer,
+}: SignInPageShellProps) {
+    const { t } = useUITranslation();
+    return (
+        <div className="min-h-full flex flex-col items-center justify-center py-12 px-4">
+            <div className="flex flex-col items-center w-full">
+                {(lightLogo || darkLogo) && (
+                    <div className="mb-7">
+                        {lightLogo && <img src={lightLogo} alt={logoAlt} className="h-10 block dark:hidden" />}
+                        {darkLogo && <img src={darkLogo} alt={logoAlt} className="h-10 hidden dark:block" />}
+                    </div>
+                )}
+
+                {children}
+
+                {notice}
+
+                {footer ? (
+                    <p className="mt-10 text-xs text-muted">{footer}</p>
+                ) : (
+                    <div className="flex items-center gap-5 mt-10 text-xs text-muted">
+                        <a href="https://vertesiahq.com/privacy" className="hover:text-foreground transition">
+                            {t('auth.privacyPolicy')}
+                        </a>
+                        <span className="text-border">·</span>
+                        <a href="https://vertesiahq.com/terms" className="hover:text-foreground transition">
+                            {t('auth.termsOfService')}
+                        </a>
+                        <span className="text-border">·</span>
+                        <RegionTag className="cursor-default" />
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}

package/src/shell/login/SignInPrimitives.tsx

@@ -55,10 +55,11 @@ const SIGNIN_STEP_BUTTON_BASE = 'cursor-pointer inline-flex items-center justify
 const SIGNIN_STEP_BUTTON_VARIANTS = {
     // Filled CTA; greys out when disabled.
     primary:
-        'h-[42px] gap-2.5 rounded-md bg-foreground text-background hover:opacity-90 ' +
+        'h-[42px] gap-2.5 rounded-md bg-[var(--auth-button,var(--foreground))] text-[color:var(--auth-button-text,var(--background))] hover:opacity-90 ' +
         'disabled:opacity-50 disabled:cursor-not-allowed',
     // Non-interactive primary kept at full opacity (spinner reads as active).
-    loading: 'h-[42px] gap-2.5 rounded-md bg-foreground text-background opacity-90',
+    loading:
+        'h-[42px] gap-2.5 rounded-md bg-[var(--auth-button,var(--foreground))] text-[color:var(--auth-button-text,var(--background))] opacity-90',
     // Flat text link.
     ghost: 'h-9 text-muted hover:text-foreground',
 } as const;
@@ -135,7 +136,7 @@ interface SignInInitialsBadgeProps {
 export function SignInInitialsBadge({ initials, shape = 'circle' }: SignInInitialsBadgeProps) {
     return (
         <span
-            className={`bg-info text-info-foreground grid place-items-center font-semibold shrink-0 ${INITIALS_BADGE_SHAPES[shape]}`}
+            className={`bg-info text-info grid place-items-center font-semibold shrink-0 ${INITIALS_BADGE_SHAPES[shape]}`}
         >
             {initials}
         </span>
@@ -145,7 +146,7 @@ export function SignInInitialsBadge({ initials, shape = 'circle' }: SignInInitia
 /** Rounded tile framing a provider/status icon. */
 export function SignInIconBadge({ children }: { children: ReactNode }) {
     return (
-        <div className="inline-grid place-items-center size-14 rounded-xl bg-info-background border border-info/15 mb-3.5">
+        <div className="inline-grid place-items-center size-14 rounded-xl bg-info border border-info/15 mb-3.5">
             {children}
         </div>
     );
@@ -177,7 +178,7 @@ const ACCOUNT_CARD_VARIANTS = {
         topRow: 'flex items-center gap-2.5 px-3 py-2.5',
         title: 'text-[13.5px] font-semibold text-foreground leading-tight',
         subtitle: 'text-[11.5px] text-muted leading-tight mt-0.5',
-        bottomRow: 'flex items-center gap-2.5 px-3 py-1.5 border-t border-border bg-muted-background',
+        bottomRow: 'flex items-center gap-2.5 px-3 py-1.5 border-t border-border bg-muted',
         mailBox: 'size-[30px] grid place-items-center shrink-0',
         mailIcon: 'size-4 text-muted',
         email: 'text-sm text-foreground/80 flex-1 truncate',
@@ -187,7 +188,7 @@ const ACCOUNT_CARD_VARIANTS = {
         topRow: 'flex items-center gap-3 px-3.5 py-2.5',
         title: 'text-sm font-semibold text-foreground truncate',
         subtitle: 'text-xs text-foreground/80 truncate',
-        bottomRow: 'flex items-center gap-3 px-3.5 py-1 border-t border-border bg-muted-background',
+        bottomRow: 'flex items-center gap-3 px-3.5 py-1 border-t border-border bg-muted',
         mailBox: 'w-9 h-6 grid place-items-center shrink-0',
         mailIcon: 'size-3.5 text-muted',
         email: 'text-xs text-foreground/80 flex-1 truncate',
@@ -253,7 +254,7 @@ interface SignInAccountRowProps {
 /** Single-row identity card: badge + title/subtitle + a trailing action link. */
 export function SignInAccountRow({ badge, title, subtitle, actionLabel, onAction }: SignInAccountRowProps) {
     return (
-        <div className="flex items-center gap-3 px-3.5 py-2.5 rounded-md border border-border bg-muted-background">
+        <div className="flex items-center gap-3 px-3.5 py-2.5 rounded-md border border-border bg-muted">
             {badge}
             <SignInIdentityLines
                 title={title}
@@ -275,7 +276,7 @@ interface SignInEmailRowProps {
 /** Standalone bordered pill: mail icon + email + a trailing action link. */
 export function SignInEmailRow({ email, actionLabel, onAction }: SignInEmailRowProps) {
     return (
-        <div className="flex items-center gap-2 px-3 py-2 rounded-md border border-border bg-muted-background">
+        <div className="flex items-center gap-2 px-3 py-2 rounded-md border border-border bg-muted">
             <Mail className="size-4 text-muted shrink-0" />
             <span className="text-sm text-foreground/80 flex-1 truncate">{email}</span>
             <SignInInlineLinkButton onClick={onAction}>{actionLabel}</SignInInlineLinkButton>
@@ -307,7 +308,7 @@ export function SignInProviderButton({ provider, label, onClick, variant = 'outl
                 variant="unstyled"
                 size="none"
                 onClick={onClick}
-                className="cursor-pointer group h-[42px] w-full inline-flex items-center gap-3 ps-3.5 pe-3 rounded-md border border-border bg-background text-sm font-medium text-foreground transition hover:bg-muted-background"
+                className="cursor-pointer group h-[42px] w-full inline-flex items-center gap-3 ps-3.5 pe-3 rounded-md border border-border bg-background text-sm font-medium text-foreground transition hover:bg-muted"
             >
                 <Icon className="!size-[18px] shrink-0" />
                 <span className="flex-1 text-start">{label}</span>
@@ -317,7 +318,9 @@ export function SignInProviderButton({ provider, label, onClick, variant = 'outl
     }
 
     const variantClass =
-        variant === 'filled' ? '!bg-foreground text-background hover:!bg-foreground/90' : 'hover:shadow-sm';
+        variant === 'filled'
+            ? '!bg-[var(--auth-button,var(--foreground))] text-[color:var(--auth-button-text,var(--background))] hover:!bg-[var(--auth-button,var(--foreground))]/90'
+            : 'hover:shadow-sm';
     return (
         <Button
             variant="outline"
@@ -342,7 +345,7 @@ interface SignInCalloutProps {
 /** Destructive notice: icon + bold title over a muted meta line. */
 export function SignInCallout({ icon: Icon, title, meta }: SignInCalloutProps) {
     return (
-        <div className="flex items-center gap-2.5 px-3 py-2.5 rounded-md bg-destructive-background border border-destructive/20">
+        <div className="flex items-center gap-2.5 px-3 py-2.5 rounded-md bg-destructive border border-destructive/20">
             <Icon className="size-5 text-destructive shrink-0" />
             <div className="flex-1 min-w-0 text-sm">
                 <div className="font-semibold text-destructive">{title}</div>

package/src/shell/login/SignInRestrictedEnvStep.tsx

@@ -22,7 +22,6 @@ const AUTO_REDIRECT_SECONDS = 15;
  * docs/restrict-access-to-non-production-envs.md.
  */
 export default function SignInRestrictedEnvStep({ onUseDifferentEmail }: SignInRestrictedEnvStepProps) {
-    const { t } = useUITranslation();
     // Region-aware: send the user to their own region's production site, never another region's (an
     // EU user must not be redirected to the US site). Falls back to the canonical site when unknown.
     const productionUrl = getProductionAppUrl(Env.region);
@@ -52,6 +51,24 @@ export default function SignInRestrictedEnvStep({ onUseDifferentEmail }: SignInR
         };
     }, [productionUrl]);
 
+    return (
+        <SignInRestrictedEnvView
+            secondsLeft={secondsLeft}
+            onUseDifferentEmail={onUseDifferentEmail}
+            onRedirect={() => {
+                window.location.href = productionUrl;
+            }}
+        />
+    );
+}
+
+/** Shared presentation; the host owns session cleanup and automatic redirects. */
+export function SignInRestrictedEnvView({
+    secondsLeft = AUTO_REDIRECT_SECONDS,
+    onUseDifferentEmail,
+    onRedirect,
+}: SignInRestrictedEnvStepProps & { secondsLeft?: number; onRedirect: () => void }) {
+    const { t } = useUITranslation();
     return (
         <SignInStepLayout>
             <SignInStepHeader
@@ -67,12 +84,7 @@ export default function SignInRestrictedEnvStep({ onUseDifferentEmail }: SignInR
                     title={t('auth.restricted.calloutTitle')}
                     meta={t('auth.restricted.calloutMeta')}
                 />
-                <SignInStepButton
-                    className="w-full"
-                    onClick={() => {
-                        window.location.href = productionUrl;
-                    }}
-                >
+                <SignInStepButton className="w-full" onClick={onRedirect}>
                     {t('auth.restricted.redirect')}
                 </SignInStepButton>
                 <SignInStepButton variant="ghost" onClick={onUseDifferentEmail}>