@vertesia/ui 1.5.0 → 1.6.0-dev.20260918.061604Z

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>
     );
 }
 
@@ -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/SignInAuthPending.tsx

@@ -28,10 +28,10 @@ export default function SignInAuthPending({ provider, onCancel }: SignInAuthPend
             </div>
 
             <div className="w-full flex flex-col gap-2">
-                <SignInStepButton variant="loading">
+                <div className="flex justify-center">
                     <Spinner />
-                    <span>{t('auth.pending.authenticating')}</span>
-                </SignInStepButton>
+                </div>
+                <span>{t('auth.pending.authenticating')}</span>
                 {onCancel && (
                     <SignInStepButton variant="ghost" onClick={onCancel}>
                         {t('auth.pending.cancel')}

package/src/shell/login/SignInEmailStep.test.tsx

@@ -0,0 +1,32 @@
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { afterEach, expect, it, vi } from 'vitest';
+import SignInEmailStep from './SignInEmailStep';
+
+const resolveTenant = vi.hoisted(() => vi.fn());
+vi.mock('@vertesia/ui/session', () => ({ setFirebaseTenant: resolveTenant }));
+vi.mock('@vertesia/ui/i18n', () => ({ useUITranslation: () => ({ t: (key: string) => key }) }));
+afterEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+});
+
+it('keeps feedback visible and prevents duplicate requests while tenant discovery is pending', async () => {
+    let finish!: () => void;
+    resolveTenant.mockReturnValue(
+        new Promise<void>((resolve) => {
+            finish = resolve;
+        }),
+    );
+    const onProceed = vi.fn();
+    render(<SignInEmailStep initialEmail="person@example.com" onProceed={onProceed} />);
+    const button = screen.getByRole('button', { name: 'auth.continue' });
+    fireEvent.click(button);
+    expect(screen.queryByRole('button', { name: 'auth.continue' })).toBeNull();
+    expect(screen.getByRole('textbox')).toBeTruthy();
+    expect(screen.getByRole('status')).toBeTruthy();
+    expect(button.contains(screen.getByRole('status'))).toBe(false);
+    fireEvent.submit(screen.getByRole('textbox').closest('form')!);
+    expect(resolveTenant).toHaveBeenCalledTimes(1);
+    finish();
+    await waitFor(() => expect(onProceed).toHaveBeenCalledWith('person@example.com', undefined));
+});

package/src/shell/login/SignInEmailStep.tsx

@@ -67,16 +67,20 @@ export default function SignInEmailStep({ initialEmail, onProceed }: SignInEmail
                     error={submitError ? t('auth.email.invalidError') : undefined}
                 />
 
-                <SignInStepButton type="submit" disabled={loading}>
-                    {loading ? (
+                {loading ? (
+                    <div
+                        role="status"
+                        aria-label={t('auth.pending.authenticating')}
+                        className="h-[42px] flex items-center justify-center"
+                    >
                         <Spinner />
-                    ) : (
-                        <>
-                            <span>{t('auth.continue')}</span>
-                            <ArrowRight className="!size-3.5" />
-                        </>
-                    )}
-                </SignInStepButton>
+                    </div>
+                ) : (
+                    <SignInStepButton type="submit">
+                        <span>{t('auth.continue')}</span>
+                        <ArrowRight className="!size-3.5" />
+                    </SignInStepButton>
+                )}
             </form>
         </SignInStepLayout>
     );

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>
+    );
+}