@vertesia/ui 1.0.0-dev.20260227.112605Z → 1.0.0-dev.20260331.091034Z

package/src/layout/FullHeightLayout.tsx

@@ -72,3 +72,11 @@ FullHeightLayout.HR = function HDivider({ }: HDividerProps) {
         <div className="w-full h-1 border-b border-red-200"></div>
     );
 }
+
+FullHeightLayout.Tab = function Tab({ children }: { children: React.ReactNode }) {
+    return (
+        <div className="flex flex-col h-full">
+            {children}
+        </div>
+    );
+}

package/src/layout/Navbar.tsx

@@ -3,6 +3,7 @@ import { Menu, Search } from 'lucide-react'
 import { Button, HeroIcon } from '@vertesia/ui/core'
 import { useSidebarToggle } from './SidebarContext.js'
 import { TitleBar } from './TitleBar.js'
+import { useUITranslation } from '../i18n/index.js'
 
 interface NavbarProps {
     title?: string
@@ -38,10 +39,11 @@ interface SearchBoxProps {
     onSearch?: (query: string) => void
 }
 function SearchBox({ }: SearchBoxProps) {
+    const { t } = useUITranslation();
     return (
         <form className="relative flex flex-1" action="#" method="GET">
             <label htmlFor="search-field" className="sr-only">
-                Search
+                {t('layout.search')}
             </label>
             <Search
                 className="pointer-events-none absolute inset-y-0 left-0 h-full w-5 text-gray-400"
@@ -50,7 +52,7 @@ function SearchBox({ }: SearchBoxProps) {
             <input
                 id="search-field"
                 className="block h-full w-full border-0 py-0 pl-8 pr-0 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm"
-                placeholder="Search..."
+                placeholder={t('layout.searchPlaceholder')}
                 type="search"
                 name="search"
             />

package/src/layout/RegionTag.tsx

@@ -0,0 +1,25 @@
+import { cn } from '@vertesia/ui/core';
+import { Env } from '@vertesia/ui/env';
+
+const regionLabels: Record<string, string> = {
+    eu: 'EU',
+    jp: 'JP',
+};
+
+export function RegionTag({ className }: { className?: string }) {
+    const region = Env.region;
+    // Only show for non-US regions (US is default, no need to display)
+    if (!region || region === 'us') return null;
+
+    return (
+        <div
+            className={cn(
+                'text-[0.6rem] font-semibold px-1.5 rounded-3xl leading-4',
+                'bg-info text-white',
+                className,
+            )}
+        >
+            {regionLabels[region] ?? region.toUpperCase()}
+        </div>
+    );
+}

package/src/layout/Sidebar.tsx

@@ -78,6 +78,7 @@ export function SidebarTooltip({ children, text }: { children: React.ReactNode,
 
 export interface SidebarItemProps {
     href: string
+    to?: string
     icon?: React.ComponentType<React.HTMLAttributes<Element>>
     current?: boolean
     onClick?: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void
@@ -88,7 +89,7 @@ export interface SidebarItemProps {
     external?: boolean; //If true, the link will open in a new tab
     replace?: boolean; //If true, navigation replaces the current history entry instead of pushing
 }
-export function SidebarItem({ external, className, tools, children, icon: Icon, href, current, onClick, replace }: SidebarItemProps) {
+export function SidebarItem({ external, className, tools, children, icon: Icon, href, to, current, onClick, replace }: SidebarItemProps) {
     const { toggleMobile } = useSidebarToggle();
     const _closeSideBar = () => {
         setTimeout(() => {
@@ -106,7 +107,7 @@ export function SidebarItem({ external, className, tools, children, icon: Icon,
     }
     return (
         <li>
-            <Nav onClick={_closeSideBar} replace={replace}>
+            <Nav to={to} onClick={_closeSideBar} replace={replace}>
                 <SidebarTooltip text={children as string}>
                     <a
                         href={href}
@@ -138,4 +139,4 @@ export function SidebarItem({ external, className, tools, children, icon: Icon,
         </li>
 
     )
-}
+}

package/src/layout/index.ts

@@ -3,4 +3,5 @@ export * from "./AppLayout.js";
 export * from "./Navbar.js";
 export * from "./Sidebar.js";
 export * from "./SidebarContext.js";
-export * from "./TitleBar.js";
+export * from "./TitleBar.js";
+export * from "./RegionTag.js";

package/src/router/HistoryNavigator.ts

@@ -146,7 +146,7 @@ export class HistoryNavigator {
             data: options.state || undefined,
             title: options.title || document.title
         };
-        
+
         window.history['replaceState'](stateToStore, '', to.href);
         this.fireLocationChange(new AfterLocationChangeEvent('popState', to, options.state));
     }
@@ -157,19 +157,19 @@ export class HistoryNavigator {
         if (beforeEvent._canceled) {
             return;
         }
-        
+
         // Build navigation chain by preserving previous history
         const currentState = window.history.state;
         const currentTitle = options.title || document.title;
-        
+
         // Create new history chain entry
         const newChainEntry = {
             title: currentTitle,
             href: window.location.pathname + window.location.search + window.location.hash
         };
-        
+
         // Build the history chain - clear if using replace
-        let historyChain: Array<{title: string, href: string}> = [];
+        let historyChain: Array<{ title: string, href: string }> = [];
         if (!options.replace && currentState?.historyChain) {
             historyChain = [...currentState.historyChain];
         }
@@ -177,22 +177,22 @@ export class HistoryNavigator {
         // Only add to chain if not replacing
         if (!options.replace) {
             historyChain.push(newChainEntry);
-            
+
             // Limit chain length to prevent memory issues (keep last 10 entries)
             if (historyChain.length > 10) {
                 historyChain = historyChain.slice(-10);
             }
         }
-        
+
         const stateToStore = {
             from: window.location.href,
             historyChain: historyChain,
             data: options.state || undefined,
             title: options.title || document.title
         };
-        
+
         window.history[options.replace ? 'replaceState' : 'pushState'](stateToStore, '', to.href);
-        
+
         this.fireLocationChange(new AfterLocationChangeEvent(type, to, options.state));
     }
 
@@ -201,7 +201,7 @@ export class HistoryNavigator {
             return;
         }
         const _popStateListener = (ev: PopStateEvent) => {
-            let type: LocationChangeType = ev.state ? 'popState' : 'linkClick';
+            let type: LocationChangeType;
             const to = new URL(window.location.href);
             let state: any = undefined;
             if (ev.state) {

package/src/router/Nav.tsx

@@ -6,6 +6,10 @@ import { useNavigate, useRouterContext } from "./Router";
  */
 interface NavProps {
     children: React.ReactNode | React.ReactNode[];
+    /**
+     * Optional router navigation target. If omitted, the wrapped anchor href is used.
+     */
+    to?: string;
     /**
      * A click was intercepted
      * @param ev
@@ -18,14 +22,16 @@ interface NavProps {
      */
     replace?: boolean;
 }
-export function Nav({ children, onClick, replace = true }: NavProps) {
+export function Nav({ children, to, onClick, replace = true }: NavProps) {
     const navigate = useNavigate();
     const _onClick = (ev: SyntheticEvent) => {
         const link = (ev.target as HTMLElement).closest('a');
-        if (link && link.href) {
+        const rawHref = link?.getAttribute('href');
+        const target = to ?? rawHref;
+        if (link && target) {
             ev.stopPropagation();
             ev.preventDefault();
-            navigate(link.href, { replace });
+            navigate(target, { replace });
             onClick?.(ev);
         }
     }

package/src/router/NestedNavigationContext.tsx

@@ -22,6 +22,10 @@ export function NestedNavigationContext({ basePath, fixLinks = false, children }
         <ReactRouterContext.Provider value={{
             ...ctx,
             navigate: (to: string, options?: NavigateOptions) => {
+                if (options?.isBasePathNested === false) {
+                    // Navigate to an absolute path without adding this context's basePath
+                    return ctx.navigate(to, options);
+                }
                 const actualBasePath = options?.basePath ? joinPath(basePath, options.basePath) : basePath;
                 return ctx.navigate(to, { ...options, basePath: actualBasePath });
             }

package/src/router/NestedRouterProvider.tsx

@@ -54,7 +54,9 @@ export function NestedRouterProvider({ routes, index, children, fixLinks = false
             matchedRoutePath: '/' + nestedRouteMatch.matchedSegments.join('/'),
             remainingPath: nestedRouteMatch.remainingSegments ? '/' + nestedRouteMatch.remainingSegments.join('/') : undefined,
             navigate: (to: string, options?: NavigateOptions) => {
-                return nestedRouter!.navigate(to, options);
+                if (nestedRouter) {
+                    return nestedRouter.navigate(to, options);
+                }
             }
 
         }}>

package/src/router/Router.tsx

@@ -131,15 +131,18 @@ export class NestedRouter extends BaseRouter {
             const childBasePath = options?.basePath;
             // e.g. "/store" + "/objects/123" => "/store/objects/123"
             basePath = childBasePath ? joinPath(this.basePath, childBasePath) : this.basePath;
+            this.parent.navigate(path, {
+                ...options,
+                basePath,
+            });
         } else {
-            // e.g. "/store" + "/studio" => "/studio"
-            basePath = options?.basePath ?? this.basePath;
+            // isBasePathNested === false: navigate to an absolute path without adding this router's basePath
+            // Pass through to parent without adding our basePath prefix
+            this.parent.navigate(path, {
+                ...options,
+                basePath: options?.basePath,
+            });
         }
-
-        this.parent.navigate(path, {
-            ...options,
-            basePath,
-        });
     }
 }
 
@@ -174,6 +177,11 @@ export function useNavigate() {
     return navigate;
 }
 
+export function useRouterBasePath() {
+    const { matchedRoutePath, router } = useRouterContext();
+    return router instanceof NestedRouter ? router.basePath : matchedRoutePath;
+}
+
 type UseParamsReturn<T> = T extends string ? string : Record<string, string>;
 export function useParams<T>(arg?: T): UseParamsReturn<T> {
     const { params } = useRouterContext();
@@ -189,6 +197,14 @@ export function useLocation() {
     return location;
 }
 
+export function usePageTitle(title: string) {
+    useEffect(() => {
+        const prev = document.title;
+        document.title = title;
+        return () => { document.title = prev; };
+    }, [title]);
+}
+
 export function useNavigationPrompt(prompt: NavigationPrompt) {
     const { router } = useRouterContext();
     useEffect(() => {

package/src/session/UserSession.ts

@@ -6,6 +6,7 @@ import { AuthTokenPayload } from '@vertesia/common';
 import { Env } from '@vertesia/ui/env';
 
 import { getComposableToken } from './auth/composable';
+import { shouldRedirectToCentralAuth } from './auth/domainRouting';
 import { getFirebaseAuth } from './auth/firebase';
 
 import { LastSelectedAccountId_KEY, LastSelectedProjectId_KEY } from './constants';
@@ -114,11 +115,7 @@ class UserSession {
     logout() {
         console.log('Logging out');
 
-        // Check if we should use central auth for logout
-        const devDomains = [".composable.sh", ".vertesia.dev", "vertesia.app"];
-        const shouldUseCentralAuth = Env.isDocker || devDomains.some((domain) => window.location.hostname.endsWith(domain));
-
-        if (shouldUseCentralAuth) {
+        if (shouldRedirectToCentralAuth()) {
             // Redirect to central auth for logout
             // Central auth will handle Firebase logout
             console.log('Using central auth logout');
@@ -137,6 +134,7 @@ class UserSession {
         } else {
             // Use Firebase logout directly
             console.log('Using Firebase logout');
+            const wasLoggedIn = !!this.authToken;
             if (this.authToken) {
                 getFirebaseAuth().signOut();
             }
@@ -145,6 +143,13 @@ class UserSession {
             this.authToken = undefined;
             this.setSession = undefined;
             this.client.withAuthCallback(undefined);
+            // Navigate to root to avoid React rendering errors when
+            // unmounting deeply nested route components during logout.
+            // Only navigate if user was actually logged in to avoid
+            // infinite reload loop on fresh/incognito sessions.
+            if (wasLoggedIn) {
+                location.replace("/");
+            }
         }
     }
 
@@ -182,6 +187,30 @@ class UserSession {
         });
     }
 
+    async fetchProjects(accountId: string) {
+        return this.client.projects.list([accountId]).then(projects => {
+            if (!this.authToken) {
+                throw new Error('No token available');
+            }
+            this.authToken = {
+                ...this.authToken,
+                accounts: this.authToken.accounts?.map(account => {
+                    if (account.id === accountId) {
+                        return {
+                            ...account,
+                            projects: projects.filter(project => project.account === accountId)
+                        }
+                    }
+                    return account;
+                })
+            };
+            this.setSession?.(this.clone());
+        }).catch(err => {
+            console.error('Failed to fetch projects', err);
+            throw err;
+        });
+    }
+
     async fetchOnboardingStatus(): Promise<boolean> {
         if (this.onboardingComplete) {
             console.log('Onboarding already completed');

package/src/session/UserSessionProvider.tsx

@@ -2,22 +2,13 @@ import { Env } from "@vertesia/ui/env";
 import { onAuthStateChanged } from "firebase/auth";
 import { ReactNode, useEffect, useRef, useState } from "react";
 import { UserNotFoundError, getComposableToken } from "./auth/composable";
+import { shouldRedirectToCentralAuth } from "./auth/domainRouting";
 import { getFirebaseAuth } from "./auth/firebase";
 import { useAuthState } from "./auth/useAuthState";
 import { LastSelectedAccountId_KEY, LastSelectedProjectId_KEY, UserSession, UserSessionContext } from "./UserSession";
 
-const devDomains = [".composable.sh", ".vertesia.dev", "vertesia.app"];
 const CENTRAL_AUTH_REDIRECT = "https://internal-auth.vertesia.app/";
 
-export function shouldRedirectToCentralAuth() {
-    // Authentication is not supported in Docker environment.
-    // See https://github.com/vertesia/studio/wiki/Composable-UI-Hosting-Options
-    if (Env.isDocker) {
-        return true;
-    }
-    return devDomains.some((domain) => window.location.hostname.endsWith(domain));
-}
-
 interface UserSessionProviderProps {
     children: ReactNode | ReactNode[];
 }
@@ -67,6 +58,7 @@ export function UserSessionProvider({ children }: UserSessionProviderProps) {
         });
 
         if (token && state) {
+            session.setSession = setSession;
             const validationError = verifyState(state);
             if (validationError) {
                 console.error(`Auth: invalid state: ${validationError}`);
@@ -107,7 +99,7 @@ export function UserSessionProvider({ children }: UserSessionProviderProps) {
                 });
             return;
         } else {
-            //if on a dev domain and not logged in, redirect to central auth
+            // If the current host is not in the Firebase allowlist, central auth owns sign-in.
             if (!session.isLoggedIn()) {
                 console.log("Auth: not logged in & no token/state");
                 Env.logger.info("Not logged in & no token/state", {
@@ -118,7 +110,7 @@ export function UserSessionProvider({ children }: UserSessionProviderProps) {
                 });
                 if (shouldRedirectToCentralAuth()) {
                     console.log(
-                        "Auth: on dev domain, redirecting to central auth with selection",
+                        "Auth: host is not in Firebase auth allowlist, redirecting to central auth with selection",
                         selectedAccount,
                         selectedProject,
                     );
@@ -131,8 +123,8 @@ export function UserSessionProvider({ children }: UserSessionProviderProps) {
                     redirectToCentralAuth();
                     return; // Don't register onAuthStateChanged listener when redirecting
                 } else {
-                    console.log("Auth: not on dev domain");
-                    Env.logger.info("Not on dev domain", {
+                    console.log("Auth: host is in Firebase auth allowlist");
+                    Env.logger.info("Host is in Firebase auth allowlist", {
                         vertesia: {
                             account_id: selectedAccount,
                             project_id: selectedProject,

package/src/session/auth/composable.ts

@@ -224,7 +224,7 @@ export async function fetchComposableToken(getIdToken: () => Promise<string | nu
                 error: error,
             },
         });
-        throw new Error('Failed to get composable token');
+        throw new Error('Failed to get composable token', { cause: error });
     }
 }
 

package/src/session/auth/domainRouting.test.ts

@@ -0,0 +1,110 @@
+import { describe, expect, it } from "vitest";
+import { Env } from "@vertesia/ui/env";
+import { shouldRedirectToCentralAuth, shouldUseFirebaseAuth } from "./domainRouting";
+
+describe("domainRouting", () => {
+    it("uses Firebase auth for configured authorized domains", () => {
+        Env.init({
+            name: "test",
+            version: "1.0.0",
+            isLocalDev: false,
+            isDocker: false,
+            type: "test",
+            endpoints: {
+                studio: "https://api.example.com",
+                zeno: "https://api.example.com",
+                sts: "https://sts.example.com",
+            },
+            firebase: {
+                apiKey: "test",
+                authDomain: "example.firebaseapp.com",
+                authorizedDomains: [
+                    "cloud.vertesia.io",
+                    "preview.cloud.vertesia.io",
+                    "cloud.us1.vertesia.io",
+                    "preview.eu2.vertesia.io",
+                    "tenant-a.cloud.us1.vertesia.io",
+                ],
+                projectId: "test",
+            },
+        });
+
+        expect(shouldUseFirebaseAuth("cloud.vertesia.io")).toBe(true);
+        expect(shouldUseFirebaseAuth("preview.cloud.vertesia.io")).toBe(true);
+        expect(shouldUseFirebaseAuth("cloud.us1.vertesia.io")).toBe(true);
+        expect(shouldUseFirebaseAuth("preview.eu2.vertesia.io")).toBe(true);
+        expect(shouldUseFirebaseAuth("tenant-a.cloud.us1.vertesia.io")).toBe(true);
+    });
+
+    it("routes all other domains through central auth", () => {
+        Env.init({
+            name: "test",
+            version: "1.0.0",
+            isLocalDev: false,
+            isDocker: false,
+            type: "test",
+            endpoints: {
+                studio: "https://api.example.com",
+                zeno: "https://api.example.com",
+                sts: "https://sts.example.com",
+            },
+            firebase: {
+                apiKey: "test",
+                authDomain: "example.firebaseapp.com",
+                authorizedDomains: ["cloud.vertesia.io"],
+                projectId: "test",
+            },
+        });
+
+        expect(shouldUseFirebaseAuth("foo.preview.cloud.vertesia.io")).toBe(false);
+        expect(shouldUseFirebaseAuth("preview.vertesia.io")).toBe(false);
+        expect(shouldUseFirebaseAuth("studio.vertesia.app")).toBe(false);
+        expect(shouldRedirectToCentralAuth("localhost")).toBe(true);
+    });
+
+    it("normalizes configured domains before matching", () => {
+        Env.init({
+            name: "test",
+            version: "1.0.0",
+            isLocalDev: false,
+            isDocker: false,
+            type: "test",
+            endpoints: {
+                studio: "https://api.example.com",
+                zeno: "https://api.example.com",
+                sts: "https://sts.example.com",
+            },
+            firebase: {
+                apiKey: "test",
+                authDomain: "example.firebaseapp.com",
+                authorizedDomains: [" Cloud.Vertesia.io "],
+                projectId: "test",
+            },
+        });
+
+        expect(shouldUseFirebaseAuth("cloud.vertesia.io")).toBe(true);
+    });
+
+    it("redirects to central auth when no authorized domains are configured", () => {
+        Env.init({
+            name: "test",
+            version: "1.0.0",
+            isLocalDev: false,
+            isDocker: false,
+            type: "test",
+            endpoints: {
+                studio: "https://api.example.com",
+                zeno: "https://api.example.com",
+                sts: "https://sts.example.com",
+            },
+            firebase: {
+                apiKey: "test",
+                authDomain: "example.firebaseapp.com",
+                projectId: "test",
+            },
+        });
+
+        expect(shouldUseFirebaseAuth("cloud.vertesia.io")).toBe(false);
+        expect(shouldRedirectToCentralAuth("cloud.vertesia.io")).toBe(true);
+    });
+});

package/src/session/auth/domainRouting.ts

@@ -0,0 +1,22 @@
+import { Env } from "@vertesia/ui/env";
+
+const localhostDomains = new Set(["localhost", "127.0.0.1"]);
+
+function getAuthorizedDomains() {
+    const domains = Env.firebase?.authorizedDomains ?? [];
+    return new Set(domains.map((domain: string) => domain.trim().toLowerCase()).filter(Boolean));
+}
+
+export function shouldUseFirebaseAuth(hostname = window.location.hostname) {
+    const normalizedHostname = hostname.trim().toLowerCase();
+
+    if (localhostDomains.has(normalizedHostname)) {
+        return false;
+    }
+
+    return getAuthorizedDomains().has(normalizedHostname);
+}
+
+export function shouldRedirectToCentralAuth(hostname = window.location.hostname) {
+    return !shouldUseFirebaseAuth(hostname);
+}

package/src/session/auth/firebase.ts

@@ -19,7 +19,7 @@ export function getFirebaseApp(): FirebaseApp {
             _firebaseApp = initializeApp(Env.firebase);
         } catch (error) {
             console.error("Failed to initialize Firebase app:", error);
-            throw new Error("Firebase initialization failed - environment may not be properly initialized");
+            throw new Error("Firebase initialization failed - environment may not be properly initialized", { cause: error });
         }
     }
     return _firebaseApp;

package/src/session/auth/useCurrentTenant.ts

@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react';
 import { useUserSession } from "@vertesia/ui/session";
+import { i18nInstance, NAMESPACE } from '../../i18n/instance.js';
 
 interface TenantConfig {
     tenantKey: string;
@@ -11,6 +12,7 @@ interface TenantConfig {
 }
 
 export function useCurrentTenant() {
+    const t = i18nInstance.getFixedT(null, NAMESPACE);
     const { user } = useUserSession();
     const [currentTenant, setCurrentTenant] = useState<TenantConfig | null>(null);
     const [isLoading, setIsLoading] = useState(true);
@@ -55,7 +57,7 @@ export function useCurrentTenant() {
                 }
             } catch (error) {
                 console.error('Error loading current tenant:', error);
-                setError('Failed to load tenant configuration');
+                setError(t('errors.failedToLoadTenantConfig'));
                 setCurrentTenant(null);
             } finally {
                 setIsLoading(false);

package/src/shell/SplashScreen.tsx

@@ -1,5 +1,5 @@
-import { Transition } from "@headlessui/react";
-import { Fragment, ReactNode, useEffect, useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { ReactNode, useEffect, useState } from "react";
 import { useUserSession } from "@vertesia/ui/session";
 
 
@@ -12,35 +12,31 @@ export function SplashScreen({ icon: Icon }: SplashScreenProps) {
 
     useEffect(() => {
         if (!isLoading) {
-            setShow(false)
+            setShow(false);
         }
-        // setTimeout(() => {
-        //     setShow(false)
-        // }, 2000)
-    }, [isLoading])
+    }, [isLoading]);
 
-    // 300 500 700 1000
     return (
-        <Transition
-            appear={true}
-            show={show}
-            as={Fragment}
-            unmount
-            leave="transition ease-in duration-500"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-        >
-            <div style={{ zIndex: 999999, position: 'fixed', inset: 0 }} className='fixed inset-x-0 inset-y-0'>
-                <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 />}
+        <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>
-                </div>
-            </div>
-        </Transition>
-    )
+                </motion.div>
+            )}
+        </AnimatePresence>
+    );
 }
 
 function LoadingIcon() {