@vertesia/ui 1.5.0-dev.20260807.073259Z → 1.5.0-dev.20260901.005903Z

package/src/i18n/rtl.test.ts

@@ -1,6 +1,9 @@
+import { readdirSync, readFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
 import i18next from 'i18next';
 import { describe, expect, it } from 'vitest';
-import { i18nInstance, NAMESPACE } from './instance.js';
+import { AVAILABLE_LOCALES, NAMESPACE } from './instance.js';
 import { isRTL, RTL_LANGUAGES, resolveLanguage, SUPPORTED_LANGUAGES } from './rtl.js';
 
 describe('isRTL', () => {
@@ -67,10 +70,10 @@ describe('RTL_LANGUAGES set', () => {
 });
 
 describe('SUPPORTED_LANGUAGES divergence guard', () => {
-    it('matches exactly the locales registered in i18nInstance.options.resources', () => {
-        const registered = Object.keys(i18nInstance.options.resources ?? {}).sort();
+    it('matches exactly the locales the i18n instance can serve', () => {
+        const available = [...AVAILABLE_LOCALES].sort();
         const supported = [...SUPPORTED_LANGUAGES].sort();
-        expect(registered).toEqual(supported);
+        expect(available).toEqual(supported);
     });
 });
 
@@ -95,8 +98,10 @@ describe('empty translation fallback', () => {
         expect(t('test.emptyTranslationFallback')).toBe('English fallback');
     });
 
+    // Reads the locale files rather than `i18nInstance.options.resources`: only the `en` fallback is
+    // bundled there now, the rest are fetched on demand.
     it('does not ship parser-created empty locale entries', () => {
-        const resources = i18nInstance.options.resources ?? {};
+        const localesDir = join(dirname(fileURLToPath(import.meta.url)), 'locales');
         const emptyEntries: string[] = [];
 
         const collectEmptyEntries = (value: unknown, path: string[]) => {
@@ -121,8 +126,12 @@ describe('empty translation fallback', () => {
             }
         };
 
-        for (const [locale, resource] of Object.entries(resources)) {
-            collectEmptyEntries(resource, [locale]);
+        const localeFiles = readdirSync(localesDir).filter((name) => name.endsWith('.json'));
+        expect(localeFiles.length).toBe(SUPPORTED_LANGUAGES.length);
+
+        for (const file of localeFiles) {
+            const resource: unknown = JSON.parse(readFileSync(join(localesDir, file), 'utf-8'));
+            collectEmptyEntries(resource, [file.replace(/\.json$/, '')]);
         }
 
         expect(emptyEntries).toEqual([]);

package/src/rich-text/VertesiaRichTextEditor.test.tsx

@@ -1,7 +1,12 @@
 /** @vitest-environment jsdom */
 
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
-import { MarkdownRichTextEditor, type MarkdownRichTextEditorProps, setEditorMarkdown } from '@vertesia/rich-text';
+import {
+    DOCUMENT_EDITOR_CHANGE_DEBOUNCE_MS,
+    MarkdownRichTextEditor,
+    type MarkdownRichTextEditorProps,
+    setEditorMarkdown,
+} from '@vertesia/rich-text';
 import { describe, expect, it, vi } from 'vitest';
 import { I18nProvider } from '../i18n/index.js';
 import {
@@ -174,6 +179,33 @@ describe('VertesiaMarkdownRichTextEditor', () => {
         expect(await screen.findByRole('heading', { name: 'Setext heading' })).not.toBeNull();
         expect(screen.getByRole('textbox', { name: 'Markdown document editor' })).not.toBeNull();
         expect(screen.queryByRole('heading', { name: 'Some Markdown formatting may change' })).toBeNull();
+        // The document editor debounces serialization, so wait past that window: otherwise this
+        // assertion passes merely because a spurious change has not been flushed yet.
+        await new Promise((resolve) => setTimeout(resolve, DOCUMENT_EDITOR_CHANGE_DEBOUNCE_MS * 2));
+        expect(onChange).not.toHaveBeenCalled();
+    });
+
+    it('does not report a change when the document is locked or unlocked', async () => {
+        const onChange = vi.fn();
+        const renderEditable = (editable: boolean) => (
+            <I18nProvider lng="en">
+                <VertesiaMarkdownDocumentEditor
+                    value={'Setext heading\n=============='}
+                    onChange={onChange}
+                    editable={editable}
+                />
+            </I18nProvider>
+        );
+        const view = render(renderEditable(true));
+
+        expect(await screen.findByRole('heading', { name: 'Setext heading' })).not.toBeNull();
+        // Both directions matter: either toggle emits an editor update on its own.
+        view.rerender(renderEditable(false));
+        await new Promise((resolve) => setTimeout(resolve, DOCUMENT_EDITOR_CHANGE_DEBOUNCE_MS * 2));
+        expect(onChange).not.toHaveBeenCalled();
+
+        view.rerender(renderEditable(true));
+        await new Promise((resolve) => setTimeout(resolve, DOCUMENT_EDITOR_CHANGE_DEBOUNCE_MS * 2));
         expect(onChange).not.toHaveBeenCalled();
     });
 

package/src/router/RouteComponent.test.tsx

@@ -0,0 +1,139 @@
+import { act, cleanup, render, screen, waitFor } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { prefetchLazyRoutes, RouteComponent } from './RouteComponent';
+import { type LazyRouteModule, useNavigate } from './Router';
+import { RouterProvider } from './RouterProvider';
+
+/**
+ * Lazy routes resolve their module asynchronously, which opens two windows for showing the wrong
+ * page: reusing the state of the previous lazy route while the next import is in flight, and a
+ * slower earlier import landing after a newer navigation already resolved. Both were real —
+ * RouteComponent now remounts per path and drops stale module resolutions.
+ */
+
+function deferredModule(text: string) {
+    let resolve!: (module: LazyRouteModule) => void;
+    const promise = new Promise<LazyRouteModule>((r) => {
+        resolve = r;
+    });
+    return {
+        promise,
+        resolve: () => resolve({ default: () => <div>{text}</div> }),
+    };
+}
+
+let navigateFn: ReturnType<typeof useNavigate>;
+function CaptureNavigate() {
+    navigateFn = useNavigate();
+    return null;
+}
+
+describe('RouteComponent lazy routes', () => {
+    beforeEach(() => {
+        window.history.pushState({}, '', '/a');
+    });
+
+    afterEach(() => {
+        cleanup();
+        window.history.pushState({}, '', '/');
+    });
+
+    it('stops showing the previous lazy route while the next one loads', async () => {
+        const pageA = deferredModule('Page A');
+        const pageB = deferredModule('Page B');
+        const routes = [
+            { path: '/a', LazyComponent: () => pageA.promise },
+            { path: '/b', LazyComponent: () => pageB.promise },
+        ];
+        render(
+            <RouterProvider routes={routes}>
+                <CaptureNavigate />
+                <RouteComponent spinner={<div>loading</div>} />
+            </RouterProvider>,
+        );
+        await act(async () => pageA.resolve());
+        await waitFor(() => expect(screen.getByText('Page A')).toBeDefined());
+
+        await act(async () => navigateFn('/b'));
+        // The old page must not linger while B's import is still pending.
+        expect(screen.queryByText('Page A')).toBeNull();
+        expect(screen.getByText('loading')).toBeDefined();
+
+        await act(async () => pageB.resolve());
+        await waitFor(() => expect(screen.getByText('Page B')).toBeDefined());
+    });
+
+    it('ignores a slow import that resolves after a newer navigation', async () => {
+        const pageA = deferredModule('Page A');
+        const pageB = deferredModule('Page B');
+        const routes = [
+            { path: '/a', LazyComponent: () => pageA.promise },
+            { path: '/b', LazyComponent: () => pageB.promise },
+        ];
+        render(
+            <RouterProvider routes={routes}>
+                <CaptureNavigate />
+                <RouteComponent />
+            </RouterProvider>,
+        );
+        // Navigate away from /a before its import resolves.
+        await act(async () => navigateFn('/b'));
+        await act(async () => pageB.resolve());
+        await waitFor(() => expect(screen.getByText('Page B')).toBeDefined());
+
+        // A's import resolving late must not replace the current page.
+        await act(async () => pageA.resolve());
+        expect(screen.queryByText('Page A')).toBeNull();
+        expect(screen.getByText('Page B')).toBeDefined();
+    });
+
+    it('renders a previously resolved lazy route synchronously on revisit', async () => {
+        const pageA = deferredModule('Page A');
+        const pageB = deferredModule('Page B');
+        const routes = [
+            { path: '/a', LazyComponent: () => pageA.promise },
+            { path: '/b', LazyComponent: () => pageB.promise },
+        ];
+        render(
+            <RouterProvider routes={routes}>
+                <CaptureNavigate />
+                <RouteComponent spinner={<div>loading</div>} />
+            </RouterProvider>,
+        );
+        await act(async () => pageA.resolve());
+        await waitFor(() => expect(screen.getByText('Page A')).toBeDefined());
+        await act(async () => navigateFn('/b'));
+        await act(async () => pageB.resolve());
+        await waitFor(() => expect(screen.getByText('Page B')).toBeDefined());
+
+        // Back to /a: its module is cached, so not even one spinner frame may show.
+        act(() => navigateFn('/a'));
+        expect(screen.getByText('Page A')).toBeDefined();
+        expect(screen.queryByText('loading')).toBeNull();
+    });
+
+    it('prefetched lazy routes render without a spinner on first navigation', async () => {
+        const pageA = deferredModule('Page A');
+        const pageB = deferredModule('Page B');
+        const routes = [
+            { path: '/a', LazyComponent: () => pageA.promise },
+            { path: '/b', LazyComponent: () => pageB.promise },
+            { path: '/c', Component: () => <div>Page C</div> },
+        ];
+        pageA.resolve();
+        pageB.resolve();
+        await prefetchLazyRoutes(routes);
+
+        render(
+            <RouterProvider routes={routes}>
+                <CaptureNavigate />
+                <RouteComponent spinner={<div>loading</div>} />
+            </RouterProvider>,
+        );
+        // Even the initial mount renders from the prefetch cache.
+        expect(screen.getByText('Page A')).toBeDefined();
+        act(() => navigateFn('/b'));
+        expect(screen.getByText('Page B')).toBeDefined();
+        expect(screen.queryByText('loading')).toBeNull();
+    });
+});

package/src/router/RouteComponent.tsx

@@ -1,5 +1,41 @@
 import { useEffect, useState } from 'react';
-import { type ComponentRoute, type LazyComponentRoute, type LazyRouteModule, useRouterContext } from './Router';
+import {
+    type ComponentRoute,
+    type LazyComponentRoute,
+    type LazyRouteModule,
+    type Route,
+    useRouterContext,
+} from './Router';
+
+// Resolved lazy modules, keyed by the route's LazyComponent function (a stable identity: route
+// tables are declared once). A revisited lazy route renders synchronously from this cache instead
+// of unmounting to the spinner for the async import() round-trip — without it, every navigation
+// between two lazy routes blanks the page for at least a frame, even when the module is loaded.
+const resolvedComponents = new Map<LazyComponentRoute['LazyComponent'], LazyRouteModule['default']>();
+
+function resolveLazyRoute(route: LazyComponentRoute): Promise<LazyRouteModule['default']> {
+    return route.LazyComponent().then((module) => {
+        if (!module.default) {
+            throw new Error(`Lazy module for ${route.path} does not have a default export`);
+        }
+        resolvedComponents.set(route.LazyComponent, module.default);
+        return module.default;
+    });
+}
+
+/**
+ * Start loading the given routes' lazy modules ahead of navigation (non-lazy routes are ignored).
+ * Call it during idle time after first paint: the first navigation to a prefetched route then
+ * renders synchronously instead of flashing the spinner while its chunk downloads. Failures are
+ * swallowed — navigation retries the import and reports the error the normal way.
+ */
+export function prefetchLazyRoutes(routes: Route[]): Promise<unknown> {
+    return Promise.allSettled(
+        routes
+            .filter((route): route is LazyComponentRoute => !!(route as LazyComponentRoute).LazyComponent)
+            .map((route) => resolveLazyRoute(route)),
+    );
+}
 
 interface RouteComponentProps {
     spinner?: React.ReactNode;
@@ -12,7 +48,9 @@ export function RouteComponent({ spinner }: RouteComponentProps) {
         const Component = (route as ComponentRoute).Component;
         return <Component {...ctx.params} />;
     } else if ((route as LazyComponentRoute).LazyComponent) {
-        return <LazyRouteComponent route={route as LazyComponentRoute} spinner={spinner} />;
+        // Keyed per path so navigating between two lazy routes remounts: a reused instance would
+        // keep rendering the previous route's component while the next import resolves.
+        return <LazyRouteComponent key={route.path} route={route as LazyComponentRoute} spinner={spinner} />;
     } else {
         throw new Error(`Invalid route for ${route.path}. Either Component or LazyCOmponent must be specified.`);
     }
@@ -23,16 +61,23 @@ interface LazyRouteComponentProps {
     spinner?: React.ReactNode;
 }
 function LazyRouteComponent({ route, spinner }: LazyRouteComponentProps) {
-    const [Component, setComponent] = useState<LazyRouteModule['default'] | null>(null);
+    const [Component, setComponent] = useState<LazyRouteModule['default'] | null>(
+        () => resolvedComponents.get(route.LazyComponent) ?? null,
+    );
     useEffect(() => {
-        void route.LazyComponent().then((module) => {
-            if (!module.default) {
-                throw new Error(`Lazy module for ${route.path} does not have a default export`);
+        // A slow import must not land after this instance moved on (unmount, or a route object
+        // swap without a path change): the stale module would overwrite the current one.
+        let stale = false;
+        void resolveLazyRoute(route).then((component) => {
+            if (!stale) {
+                // we need to wrap the component type in an arrow function
+                // otherwise the setState function will execute the function as a state update function
+                setComponent(() => component);
             }
-            // we need to wrap the component type in an arrow function
-            // otherwise the setState function will execute the function as a state update function
-            setComponent(() => module.default);
         });
+        return () => {
+            stale = true;
+        };
     }, [route]);
 
     return Component ? <Component /> : spinner || null;

package/src/session/UserSessionProvider.tsx

@@ -12,7 +12,7 @@ import {
     resolveAuthSelection,
     UserNotFoundError,
 } from './auth/composable';
-import { authReturnUrl, shouldRedirectToCentralAuth } from './auth/domainRouting';
+import { authReturnUrl, centralAuthRedirectUrl, shouldRedirectToCentralAuth } from './auth/domainRouting';
 import { getFirebaseAuth } from './auth/firebase';
 import { useAuthState } from './auth/useAuthState';
 import { UserSession, UserSessionContext } from './UserSession';
@@ -110,31 +110,29 @@ export function UserSessionProvider({ children, loadOnboardingStatus = true }: U
         return true;
     };
 
-    const redirectToCentralAuth = (projectId?: string, accountId?: string) => {
-        const url = new URL(`${CENTRAL_AUTH_REDIRECT}?sts=${Env.endpoints.sts ?? 'https://sts.vertesia.io'}`);
-        const currentUrl = authReturnUrl();
-        if (projectId) currentUrl.searchParams.set('p', projectId);
-        if (accountId) currentUrl.searchParams.set('a', accountId);
-        url.searchParams.set('redirect_uri', currentUrl.toString());
-        url.searchParams.set('state', generateState());
+    const redirectToCentralAuth = (selection: { accountId?: string; projectId?: string }) => {
+        const url = centralAuthRedirectUrl({
+            centralAuthUrl: CENTRAL_AUTH_REDIRECT,
+            stsEndpoint: Env.endpoints.sts ?? 'https://sts.vertesia.io',
+            returnUrl: authReturnUrl(),
+            state: generateState(),
+            ...selection,
+        });
         location.replace(url.toString());
     };
 
     authFlowRef.current = () => {
         // Make this effect idempotent - only run auth flow once
         if (hasInitiatedAuthRef.current) {
-            console.log('Auth: skipping duplicate auth flow initiation');
+            Env.logger.debug('Skipping duplicate auth flow initiation');
             return;
         }
         hasInitiatedAuthRef.current = true;
 
-        console.log('Auth: starting auth flow');
-        Env.logger.info('Starting auth flow');
+        Env.logger.debug('Starting auth flow');
         const currentUrl = new URL(window.location.href);
         const { accountId: selectedAccount, projectId: selectedProject } = resolveAuthSelection(currentUrl);
-        console.log('Auth: selected account', selectedAccount);
-        console.log('Auth: selected project', selectedProject);
-        Env.logger.info('Selected account and project', {
+        Env.logger.debug('Selected account and project', {
             vertesia: {
                 account_id: selectedAccount,
                 project_id: selectedProject,
@@ -174,7 +172,7 @@ export function UserSessionProvider({ children, loadOnboardingStatus = true }: U
                         state: state,
                     },
                 });
-                redirectToCentralAuth();
+                redirectToCentralAuth({ accountId: selectedAccount, projectId: selectedProject });
             } else {
                 clearState();
             }
@@ -194,7 +192,7 @@ export function UserSessionProvider({ children, loadOnboardingStatus = true }: U
                             error: err,
                         },
                     });
-                    redirectToCentralAuth();
+                    redirectToCentralAuth({ accountId: selectedAccount, projectId: selectedProject });
                 });
             return;
         }
@@ -207,31 +205,24 @@ export function UserSessionProvider({ children, loadOnboardingStatus = true }: U
 
             // 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', {
+                Env.logger.debug('Not logged in & no token/state', {
                     vertesia: {
                         account_id: selectedAccount,
                         project_id: selectedProject,
                     },
                 });
                 if (shouldRedirectToCentralAuth()) {
-                    console.log(
-                        'Auth: host is not in Firebase auth allowlist, redirecting to central auth with selection',
-                        selectedAccount,
-                        selectedProject,
-                    );
-                    Env.logger.info('Redirecting to central auth with selection', {
+                    Env.logger.debug('Redirecting to central auth with selection', {
                         vertesia: {
                             account_id: selectedAccount,
                             project_id: selectedProject,
                         },
                     });
-                    redirectToCentralAuth();
+                    redirectToCentralAuth({ accountId: selectedAccount, projectId: selectedProject });
                     return; // Don't register onAuthStateChanged listener when redirecting
                 }
 
-                console.log('Auth: host is in Firebase auth allowlist');
-                Env.logger.info('Host is in Firebase auth allowlist', {
+                Env.logger.debug('Host is in Firebase auth allowlist', {
                     vertesia: {
                         account_id: selectedAccount,
                         project_id: selectedProject,
@@ -241,8 +232,7 @@ export function UserSessionProvider({ children, loadOnboardingStatus = true }: U
 
             unsubscribe = onAuthStateChanged(getFirebaseAuth(), async (firebaseUser) => {
                 if (firebaseUser) {
-                    console.log('Auth: successful login with firebase');
-                    Env.logger.info('Successful login with firebase', {
+                    Env.logger.debug('Successful login with firebase', {
                         vertesia: {
                             account_id: selectedAccount,
                             project_id: selectedProject,
@@ -274,8 +264,7 @@ export function UserSessionProvider({ children, loadOnboardingStatus = true }: U
                         });
                 } else {
                     // anonymous user
-                    console.log('Auth: using anonymous user');
-                    Env.logger.info('Using anonymous user', {
+                    Env.logger.debug('Using anonymous user', {
                         vertesia: {
                             account_id: selectedAccount,
                             project_id: selectedProject,

package/src/session/auth/composable.scope.test.ts

@@ -1,7 +1,7 @@
 // @vitest-environment jsdom
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
-const logger = { info: vi.fn(), warn: vi.fn(), error: vi.fn() };
+const logger = { debug: vi.fn(), info: vi.fn(), warn: vi.fn(), error: vi.fn() };
 
 vi.mock('@vertesia/ui/env', () => ({
     Env: {

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

@@ -5,7 +5,7 @@ function makeJwt(payload: Record<string, unknown>) {
     return `${encode({ alg: 'ES256', typ: 'JWT' })}.${encode(payload)}.signature`;
 }
 
-async function importComposableAuth() {
+async function importComposableAuth(authTokenProvider?: () => Promise<string | undefined>) {
     vi.resetModules();
     const [{ Env }, composableAuth] = await Promise.all([import('@vertesia/ui/env'), import('./composable')]);
     Env.init({
@@ -19,6 +19,7 @@ async function importComposableAuth() {
             zeno: 'https://zeno-server-dev-feat-appgen.api.dev1.vertesia.io',
             sts: 'https://sts.dev1.vertesia.io',
         },
+        authTokenProvider,
     });
     return composableAuth;
 }
@@ -53,6 +54,65 @@ describe('getComposableToken', () => {
         expect(fetchMock).not.toHaveBeenCalled();
     });
 
+    it('reacquires a fresh injected token instead of reusing an expired cached credential', async () => {
+        const expiredToken = makeJwt({
+            iss: 'https://sts.dev1.vertesia.io',
+            exp: Math.floor(Date.now() / 1000) - 60,
+            account: { id: 'account-id', name: 'Account' },
+            project: { id: 'project-id', name: 'Project', account: 'account-id' },
+            project_roles: ['developer'],
+        });
+        const freshToken = makeJwt({
+            iss: 'https://sts.dev1.vertesia.io',
+            exp: Math.floor(Date.now() / 1000) + 3600,
+            account: { id: 'account-id', name: 'Account' },
+            project: { id: 'project-id', name: 'Project', account: 'account-id' },
+            project_roles: ['developer'],
+        });
+        const authTokenProvider = vi.fn(() => Promise.resolve(freshToken));
+        const fetchMock = vi.fn();
+        vi.stubGlobal('fetch', fetchMock);
+
+        const { getComposableToken } = await importComposableAuth(authTokenProvider);
+        const result = await getComposableToken('account-id', 'project-id', expiredToken, false, true);
+
+        expect(result.rawToken).toBe(freshToken);
+        expect(authTokenProvider).toHaveBeenCalledOnce();
+        expect(fetchMock).not.toHaveBeenCalled();
+    });
+
+    it('falls back to the cached credential when the injected provider is unavailable', async () => {
+        const expiringToken = makeJwt({
+            iss: 'https://sts.dev1.vertesia.io',
+            exp: Math.floor(Date.now() / 1000) + 60,
+            account: { id: 'account-id', name: 'Account' },
+            project: { id: 'project-id', name: 'Project', account: 'account-id' },
+            project_roles: ['developer'],
+        });
+        const refreshedToken = makeJwt({
+            iss: 'https://sts.dev1.vertesia.io',
+            exp: Math.floor(Date.now() / 1000) + 3600,
+            account: { id: 'account-id', name: 'Account' },
+            project: { id: 'project-id', name: 'Project', account: 'account-id' },
+            project_roles: ['developer'],
+        });
+        const authTokenProvider = vi.fn(() => Promise.resolve(undefined));
+        const fetchMock = vi.fn().mockResolvedValue({
+            ok: true,
+            status: 200,
+            json: () => Promise.resolve({ token: refreshedToken }),
+        });
+        vi.stubGlobal('fetch', fetchMock);
+
+        const { getComposableToken } = await importComposableAuth(authTokenProvider);
+        const result = await getComposableToken('account-id', 'project-id', expiringToken, false, true);
+
+        expect(result.rawToken).toBe(refreshedToken);
+        expect(authTokenProvider).toHaveBeenCalledOnce();
+        expect(fetchMock).toHaveBeenCalledOnce();
+        expect(fetchMock.mock.calls[0]?.[1]?.headers).toMatchObject({ Authorization: `Bearer ${expiringToken}` });
+    });
+
     it('exchanges a bare STS-issued Vertesia token so roles can be hydrated', async () => {
         const sourceToken = makeJwt({
             iss: 'https://sts.dev1.vertesia.io',