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

package/src/features/layout/GenericPageNavHeader.test.tsx

@@ -0,0 +1,36 @@
+import { screen } from '@testing-library/react';
+import type { ComponentProps } from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { renderWithProviders } from '../../__tests__/test-utils';
+import { GenericPageNavHeader } from './GenericPageNavHeader';
+
+vi.mock('@vertesia/ui/router', () => ({ useNavigate: () => vi.fn() }));
+
+describe('GenericPageNavHeader breadcrumbs', () => {
+    it.each(['Parent', null])('ignores non-array breadcrumbs: %s', (breadcrumbs) => {
+        renderWithProviders(
+            <GenericPageNavHeader
+                title="Page"
+                useDynamicBreadcrumbs={false}
+                breadcrumbs={breadcrumbs as unknown as ComponentProps<typeof GenericPageNavHeader>['breadcrumbs']}
+            />,
+        );
+        expect(screen.getByText('Page')).toBeDefined();
+        expect(screen.queryByText('Parent')).toBeNull();
+    });
+
+    it('preserves breadcrumb elements', () => {
+        renderWithProviders(
+            <GenericPageNavHeader
+                title="Page"
+                useDynamicBreadcrumbs={false}
+                breadcrumbs={[
+                    <a key="parent" href="/parent">
+                        Parent
+                    </a>,
+                ]}
+            />,
+        );
+        expect(screen.getByText('Parent')).toBeDefined();
+    });
+});

package/src/features/layout/GenericPageNavHeader.tsx

@@ -124,7 +124,7 @@ export function GenericPageNavHeader({
         }
 
         // Add current page breadcrumbs
-        if (breadcrumbs && breadcrumbs.length > 0) {
+        if (Array.isArray(breadcrumbs)) {
             breadcrumbs.forEach((breadcrumb) => {
                 // Preserve the entire React element as label
                 const label = breadcrumb.props?.children || breadcrumb;

package/src/features/magic-pdf/AnnotatedImageSlider.tsx

@@ -326,7 +326,7 @@ function ImageTypeButton({ type, currentType, onClick, icon, tooltip }: ImageTyp
             aria-pressed={isSelected}
             className={clsx(
                 'p-1 rounded cursor-pointer transition-colors',
-                isSelected ? 'text-primary bg-primary/10' : 'text-muted hover:text-foreground hover:bg-muted',
+                isSelected ? 'text-info bg-info' : 'text-muted hover:text-foreground hover:bg-muted',
             )}
             onClick={onClick}
         >

package/src/features/magic-pdf/GroundedExtractionView.tsx

@@ -659,7 +659,7 @@ function PageWithOverlay({
                             'absolute cursor-pointer border rounded-[1px] transition-colors',
                             citation.misaligned && 'border-dashed',
                             isSelected
-                                ? 'border-2 border-primary bg-primary/20 z-10'
+                                ? 'border-2 border-info bg-info z-10'
                                 : citation.verified
                                   ? 'border-success/70 hover:bg-success/20'
                                   : citation.reviewed
@@ -853,7 +853,7 @@ function ArrayTable({
                                                 className={cn(
                                                     'text-start rounded px-1 w-full',
                                                     isSelected
-                                                        ? 'bg-primary/15 ring-1 ring-primary'
+                                                        ? 'bg-info ring-1 ring-primary'
                                                         : citation
                                                           ? 'hover:bg-muted cursor-pointer'
                                                           : 'text-muted cursor-default',
@@ -909,7 +909,7 @@ function LeafRow({
             onClick={() => citation && onSelect(path)}
             className={cn(
                 'flex items-center gap-2 w-full text-start text-sm rounded px-1.5 py-0.5',
-                isSelected ? 'bg-primary/15 ring-1 ring-primary' : citation ? 'hover:bg-muted' : '',
+                isSelected ? 'bg-info ring-1 ring-primary' : citation ? 'hover:bg-muted' : '',
                 !citation && 'cursor-default',
             )}
         >

package/src/features/permissions/UserPermissionsProvider.tsx

@@ -104,7 +104,7 @@ export function UserPermissionProvider({ children, loadingIcon }: UserPermission
             <div className="flex min-h-dvh items-center justify-center bg-background px-6 text-foreground">
                 <div className="w-full max-w-md space-y-6 text-center">
                     <div aria-hidden="true" className="flex justify-center">
-                        {loadingIcon || (!failed && <Spinner size="2xl" className="text-primary" />)}
+                        {loadingIcon || (!failed && <Spinner size="2xl" className="text-info" />)}
                     </div>
                     <div
                         role={failed ? 'alert' : 'status'}

package/src/features/store/objects/DocumentPreviewPanel.tsx

@@ -132,7 +132,7 @@ export function DocumentPreviewPanel({ objectId, isOpen, onClose }: DocumentPrev
             {/* Header */}
             <div className="flex items-center justify-between px-4 py-3 border-b dark:border-border bg-gradient-to-r from-indigo-50 to-gray-50 dark:from-gray-800 dark:to-gray-900">
                 <div className="flex items-center">
-                    <FileText className="h-5 w-5 text-primary me-2" />
+                    <FileText className="h-5 w-5 text-info me-2" />
                     <h2 className="text-lg font-semibold text-foreground truncate">
                         {isLoading ? t('store.loadingDocument') : object?.name || t('store.documentPreview')}
                     </h2>
@@ -142,7 +142,7 @@ export function DocumentPreviewPanel({ objectId, isOpen, onClose }: DocumentPrev
                         variant="ghost"
                         size="sm"
                         onClick={handleViewFullDocument}
-                        className="flex items-center gap-1 text-primary hover:text-primary"
+                        className="flex items-center gap-1 text-info hover:text-info"
                     >
                         <Maximize2 className="h-4 w-4" />
                         <span>{t('store.fullView')}</span>
@@ -162,7 +162,7 @@ export function DocumentPreviewPanel({ objectId, isOpen, onClose }: DocumentPrev
             {isLoading ? (
                 <div className="flex-1 flex items-center justify-center">
                     <div className="text-center">
-                        <Spinner size="lg" className="text-primary mb-2" />
+                        <Spinner size="lg" className="text-info mb-2" />
                         <p className="text-muted">{t('store.loadingDocument')}</p>
                     </div>
                 </div>
@@ -175,7 +175,7 @@ export function DocumentPreviewPanel({ objectId, isOpen, onClose }: DocumentPrev
                                 variant="unstyled"
                                 className={`py-2 px-4 font-medium border-b-2 ${
                                     currentTab === 'preview'
-                                        ? 'border-primary text-primary'
+                                        ? 'border-primary text-info'
                                         : 'border-transparent text-muted hover:text-foreground'
                                 }`}
                                 onClick={() => setCurrentTab('preview')}
@@ -189,7 +189,7 @@ export function DocumentPreviewPanel({ objectId, isOpen, onClose }: DocumentPrev
                                 variant="unstyled"
                                 className={`py-2 px-4 font-medium border-b-2 ${
                                     currentTab === 'properties'
-                                        ? 'border-primary text-primary'
+                                        ? 'border-primary text-info'
                                         : 'border-transparent text-muted hover:text-foreground'
                                 }`}
                                 onClick={() => setCurrentTab('properties')}
@@ -209,12 +209,12 @@ export function DocumentPreviewPanel({ objectId, isOpen, onClose }: DocumentPrev
                                 {/* Text/Markdown Content */}
                                 {loadingText ? (
                                     <div className="flex items-center justify-center h-40">
-                                        <Spinner size="md" className="text-primary" />
+                                        <Spinner size="md" className="text-info" />
                                     </div>
                                 ) : text ? (
                                     <div className="shadow rounded-md p-4 border border-border bg-white dark:bg-muted">
                                         {seemsMarkdown ? (
-                                            <div className="prose prose-sm max-w-none prose-p:my-2 prose-pre:bg-muted prose-pre:my-2 prose-headings:text-primary dark:prose-invert">
+                                            <div className="prose prose-sm max-w-none prose-p:my-2 prose-pre:bg-muted prose-pre:my-2 prose-headings:text-info dark:prose-invert">
                                                 <MarkdownRenderer>{text}</MarkdownRenderer>
                                             </div>
                                         ) : (
@@ -238,7 +238,7 @@ export function DocumentPreviewPanel({ objectId, isOpen, onClose }: DocumentPrev
                                             </div>
                                         ) : (
                                             <div className="flex items-center justify-center h-40">
-                                                <Spinner size="md" className="text-primary" />
+                                                <Spinner size="md" className="text-info" />
                                             </div>
                                         )}
                                     </div>
@@ -247,7 +247,7 @@ export function DocumentPreviewPanel({ objectId, isOpen, onClose }: DocumentPrev
                                 {/* PDF Content Notice */}
                                 {isPdf && (
                                     <div className="flex flex-col items-center justify-center h-64 border border-border rounded-md p-4 bg-muted">
-                                        <FileText className="h-16 w-16 text-primary mb-4" />
+                                        <FileText className="h-16 w-16 text-info mb-4" />
                                         <p className="text-muted text-center mb-4">{t('store.pdfPreviewFullView')}</p>
                                         <Button
                                             onClick={handleViewFullDocument}
@@ -353,7 +353,7 @@ export function DocumentPreviewPanel({ objectId, isOpen, onClose }: DocumentPrev
                                 }
                             }}
                             variant="outline"
-                            className="text-primary border-primary hover:bg-info"
+                            className="text-info border-primary hover:bg-info"
                         >
                             <Download className="h-4 w-4 me-2" />
                             {t('pdf.download')}

package/src/features/store/objects/components/DocumentInput.tsx

@@ -87,7 +87,7 @@ export function DocumentInput({ object }: DocumentInputProps) {
                 <SelectDocumentModal value={actualValue} isOpen={isOn} onClose={onSelect} />
             </div>
             {doc && (
-                <div className="p-1 semibold text-sm text-muted dark:text-foreground">
+                <div className="p-1 font-semibold text-sm text-muted dark:text-foreground">
                     {typeof doc.properties?.title === 'string' ? doc.properties.title : doc.name}
                 </div>
             )}

package/src/features/store/objects/upload/DocumentUploadModal.tsx

@@ -678,7 +678,7 @@ export function DocumentUploadModal({
                                     <div className="grid grid-cols-3 gap-4">
                                         <div className="flex flex-col items-center">
                                             <div className="flex items-center gap-2">
-                                                <UploadIcon className="size-5 text-primary" />
+                                                <UploadIcon className="size-5 text-info" />
                                                 <span className="font-medium">{t('upload.new')}</span>
                                             </div>
                                             <div className="text-2xl font-semibold">{processingStats.toCreate}</div>

package/src/features/user/UserInfo.tsx

@@ -466,7 +466,7 @@ function GroupAvatar({ userId, showTitle = false, size = 'md' }: GroupAvatarProp
     return (
         <UserPopoverPanel title={group.name || t('user.unnamedGroup')} description={description}>
             <div className="flex flex-row items-center gap-2">
-                <Users className="size-6 text-primary" size={size} />
+                <Users className="size-6 text-info" size={size} />
                 {showTitle && <div className="text-sm font-semibold ps-2">{group.name || t('user.unnamedGroup')}</div>}
             </div>
         </UserPopoverPanel>

package/src/router/RouteComponent.test.tsx

@@ -1,5 +1,6 @@
 import { act, cleanup, render, screen, waitFor } from '@testing-library/react';
-import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { ErrorBoundary } from 'react-error-boundary';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { prefetchLazyRoutes, RouteComponent } from './RouteComponent';
 import { type LazyRouteModule, useNavigate } from './Router';
 import { RouterProvider } from './RouterProvider';
@@ -38,6 +39,44 @@ describe('RouteComponent lazy routes', () => {
         window.history.pushState({}, '', '/');
     });
 
+    it.each(['missing module', 'rejected import', 'synchronous failure'] as const)(
+        'reports a %s through the error boundary instead of remaining on the spinner',
+        async (failure) => {
+            const error = new Error('Module could not be loaded');
+            const onError = vi.fn();
+            const consoleError = vi.spyOn(console, 'error').mockImplementation(() => undefined);
+            const routes = [
+                {
+                    path: '/a',
+                    LazyComponent: () => {
+                        if (failure === 'synchronous failure') throw error;
+                        return failure === 'missing module'
+                            ? Promise.resolve(undefined as unknown as LazyRouteModule)
+                            : Promise.reject(error);
+                    },
+                },
+            ];
+            try {
+                render(
+                    <ErrorBoundary fallback={<div>Route unavailable</div>} onError={onError}>
+                        <RouterProvider routes={routes}>
+                            <RouteComponent spinner={<div>loading</div>} />
+                        </RouterProvider>
+                    </ErrorBoundary>,
+                );
+                await screen.findByText('Route unavailable');
+                expect(screen.queryByText('loading')).toBeNull();
+                expect(onError.mock.calls[0][0]).toEqual(
+                    failure === 'missing module'
+                        ? new Error('Lazy module for /a does not have a default export')
+                        : error,
+                );
+            } finally {
+                consoleError.mockRestore();
+            }
+        },
+    );
+
     it('stops showing the previous lazy route while the next one loads', async () => {
         const pageA = deferredModule('Page A');
         const pageB = deferredModule('Page B');
@@ -87,6 +126,31 @@ describe('RouteComponent lazy routes', () => {
         expect(screen.getByText('Page B')).toBeDefined();
     });
 
+    it('ignores a rejected import after navigating away', async () => {
+        let reject!: (error: Error) => void;
+        const promise = new Promise<LazyRouteModule>((_resolve, rejectPromise) => {
+            reject = rejectPromise;
+        });
+        const onError = vi.fn();
+        render(
+            <ErrorBoundary fallback={<div>Route unavailable</div>} onError={onError}>
+                <RouterProvider
+                    routes={[
+                        { path: '/a', LazyComponent: () => promise },
+                        { path: '/b', Component: () => <div>Page B</div> },
+                    ]}
+                >
+                    <CaptureNavigate />
+                    <RouteComponent />
+                </RouterProvider>
+            </ErrorBoundary>,
+        );
+        await act(async () => navigateFn('/b'));
+        await act(async () => reject(new Error('Previous route failed')));
+        expect(screen.getByText('Page B')).toBeDefined();
+        expect(onError).not.toHaveBeenCalled();
+    });
+
     it('renders a previously resolved lazy route synchronously on revisit', async () => {
         const pageA = deferredModule('Page A');
         const pageB = deferredModule('Page B');

package/src/router/RouteComponent.tsx

@@ -13,14 +13,13 @@ import {
 // 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;
-    });
+async function resolveLazyRoute(route: LazyComponentRoute): Promise<LazyRouteModule['default']> {
+    const module = await route.LazyComponent();
+    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;
 }
 
 /**
@@ -64,21 +63,25 @@ function LazyRouteComponent({ route, spinner }: LazyRouteComponentProps) {
     const [Component, setComponent] = useState<LazyRouteModule['default'] | null>(
         () => resolvedComponents.get(route.LazyComponent) ?? null,
     );
+    const [error, setError] = useState<unknown>();
     useEffect(() => {
         // 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);
-            }
-        });
+        void resolveLazyRoute(route).then(
+            (component) => {
+                if (!stale) setComponent(() => component);
+            },
+            (error: unknown) => {
+                // Render failures through the surrounding error boundary, including import failures.
+                if (!stale) setError(() => error);
+            },
+        );
         return () => {
             stale = true;
         };
     }, [route]);
 
+    if (error !== undefined) throw error;
     return Component ? <Component /> : spinner || null;
 }

package/src/session/UserSession.test.ts

@@ -1,17 +1,64 @@
 import type { VertesiaClient } from '@vertesia/client';
+import { type AuthTokenPayload, PrincipalType } from '@vertesia/common';
 import { describe, expect, it, vi } from 'vitest';
 import { UserSession } from './UserSession';
 
+const projectToken: AuthTokenPayload = {
+    sub: 'test-user',
+    name: 'Test User',
+    type: PrincipalType.User,
+    account: { id: 'test-account', name: 'Test Account' },
+    account_roles: [],
+    accounts: [],
+    project: { id: 'test-project', name: 'Test Project', account: 'test-account' },
+    apps: [],
+    iss: 'https://auth.example.com',
+    aud: 'test-client',
+    exp: 4102444800,
+};
+
+function encodeToken(payload: AuthTokenPayload): string {
+    return `${btoa(JSON.stringify({ alg: 'none' }))}.${btoa(JSON.stringify(payload))}.`;
+}
+
 function createSession(onboardingProgress: () => Promise<Record<string, boolean>>) {
     const client = {
         account: { onboardingProgress },
+        withAuthCallback: vi.fn(),
     } as unknown as VertesiaClient;
     const setSession = vi.fn<(session: UserSession) => void>();
     const session = new UserSession(client, setSession);
+    session.authToken = { ...projectToken };
     return { session, setSession };
 }
 
 describe('UserSession.fetchOnboardingStatus', () => {
+    it('skips onboarding before authentication without publishing a status', async () => {
+        const onboardingProgress = vi.fn(async () => ({ project_created: true }));
+        const { session, setSession } = createSession(onboardingProgress);
+        session.authToken = undefined;
+
+        await expect(session.fetchOnboardingStatus()).resolves.toBe(false);
+        expect(onboardingProgress).not.toHaveBeenCalled();
+        expect(session.onboardingComplete).toBeUndefined();
+        expect(setSession).not.toHaveBeenCalled();
+    });
+
+    it('defers onboarding during account-only login and loads it after project selection', async () => {
+        const onboardingProgress = vi.fn(async () => ({ project_created: true }));
+        const { session, setSession } = createSession(onboardingProgress);
+
+        await session.login(encodeToken({ ...projectToken, project: undefined }));
+        expect(onboardingProgress).not.toHaveBeenCalled();
+        expect(session.onboardingComplete).toBeUndefined();
+        expect(setSession).not.toHaveBeenCalled();
+
+        await session.login(encodeToken(projectToken));
+        expect(onboardingProgress).toHaveBeenCalledOnce();
+        expect(session.onboardingComplete).toBe(true);
+        expect(setSession).toHaveBeenCalledOnce();
+    });
+
     it('does not replace the session when an incomplete status is unchanged', async () => {
         const { session, setSession } = createSession(async () => ({ project_created: false }));
         session.onboardingComplete = false;
@@ -37,3 +84,21 @@ describe('UserSession.fetchOnboardingStatus', () => {
         expect(setSession.mock.calls[0]?.[0]?.onboardingComplete).toBe(false);
     });
 });
+
+describe('UserSession.signOut', () => {
+    it('keeps the receiver when used as a callback, including cloned sessions', () => {
+        const { session } = createSession(async () => ({}));
+        const clone = session.clone();
+        const logout = vi.spyOn(session, 'logout').mockImplementation(() => undefined);
+        const cloneLogout = vi.spyOn(clone, 'logout').mockImplementation(() => undefined);
+        const { signOut } = session;
+        const { signOut: signOutClone } = clone;
+
+        signOut();
+        expect(logout).toHaveBeenCalledOnce();
+        expect(cloneLogout).not.toHaveBeenCalled();
+        signOutClone();
+        expect(cloneLogout).toHaveBeenCalledOnce();
+        expect(logout).toHaveBeenCalledOnce();
+    });
+});

package/src/session/UserSession.ts

@@ -44,6 +44,7 @@ class UserSession {
         }
 
         this.logout = this.logout.bind(this);
+        this.signOut = this.signOut.bind(this);
     }
 
     get store() {
@@ -251,6 +252,9 @@ class UserSession {
     }
 
     async fetchOnboardingStatus(): Promise<boolean> {
+        if (!this.project?.id) {
+            return false;
+        }
         if (this.onboardingComplete) {
             console.log('Onboarding already completed');
             return false;

package/src/shell/SplashScreen.tsx

@@ -58,7 +58,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"

package/src/widgets/json-view/JSONCode.test.tsx

@@ -17,8 +17,8 @@ describe('JSONCode', () => {
         // number
         expect(html).toContain('<span class="text-attention">42</span>');
         // literals
-        expect(html).toContain('<span class="text-primary">true</span>');
-        expect(html).toContain('<span class="text-primary">null</span>');
+        expect(html).toContain('<span class="text-info">true</span>');
+        expect(html).toContain('<span class="text-info">null</span>');
     });
 
     it('treats a string with escaped quotes as a single token', () => {

package/src/widgets/json-view/JSONCode.tsx

@@ -54,7 +54,7 @@ export function renderJsonLine(line: string) {
             : stringValue
               ? 'text-success'
               : literal
-                ? 'text-primary'
+                ? 'text-info'
                 : numberValue
                   ? 'text-attention'
                   : undefined;

package/src/widgets/upload/DropZone.tsx

@@ -257,15 +257,13 @@ export function DropZone({ onDrop, message, buttonLabel, allowFolders = true, cl
         // biome-ignore lint/a11y/noStaticElementInteractions: drag/drop target; file selection is exposed via the buttons inside.
         <div
             className={`flex flex-col items-center justify-center py-12 border-2 rounded-lg transition-colors ${
-                isDragging ? 'border-primary bg-primary/10' : 'border-dashed border-border'
+                isDragging ? 'border-info bg-info' : 'border-dashed border-border'
             } ${className}`}
             onDragOver={handleDragOver}
             onDragLeave={handleDragLeave}
             onDrop={handleDrop}
         >
-            <UploadIcon
-                className={`h-12 w-12 mb-3 transition-colors ${isDragging ? 'text-primary' : 'text-muted/50'}`}
-            />
+            <UploadIcon className={`h-12 w-12 mb-3 transition-colors ${isDragging ? 'text-info' : 'text-muted/50'}`} />
             <p className="text-muted">{message}</p>
 
             <div className="flex gap-2 justify-center mt-2">