@vertesia/ui 1.0.0-dev.20260128.144200 → 1.0.0-dev.20260225.024852Z

package/src/features/store/types/TableLayoutEditor.tsx

@@ -1,14 +1,15 @@
 import { useMemo, useRef, useState } from 'react';
 import { ColumnLayout, ContentObjectType } from '@vertesia/common';
-import { Button, useToast, useTheme } from '@vertesia/ui/core';
+import { Button, useToast, useTheme, Panel } from '@vertesia/ui/core';
 import { useUserSession } from '@vertesia/ui/session';
 import { MonacoEditor, EditorApi } from '@vertesia/ui/widgets';
 
 interface TableLayoutEditorProps {
     objectType: ContentObjectType;
     onLayoutUpdate: (value: ColumnLayout[] | undefined) => void;
+    readonly?: boolean;
 }
-export function TableLayoutEditor({ objectType, onLayoutUpdate }: TableLayoutEditorProps) {
+export function TableLayoutEditor({ objectType, onLayoutUpdate, readonly = false }: TableLayoutEditorProps) {
     const toast = useToast();
     const { theme } = useTheme();
 
@@ -78,22 +79,17 @@ export function TableLayoutEditor({ objectType, onLayoutUpdate }: TableLayoutEdi
 
 
     return (
-        <div className="mx-2 my-2 rounded-2xl border border-solid shadow-xs">
-            <div className="flex items-center rounded-t-md border-b gap-x-2 py-2 pl-4 pr-2">
-                <div className="text-base font-semibold ">Table Layout Editor</div>
-                <div className="ml-auto flex gap-x-2">
-                    <Button isLoading={isUpdating} variant="outline" size="sm" onClick={onSave}>Save Changes</Button>
-                </div>
-            </div>
-            <div className="px-4 py-2">
-                <MonacoEditor
-                    value={value}
-                    language="json"
-                    editorRef={editorRef}
-                    theme={theme === 'dark' ? 'vs-dark' : 'vs'}
-                />
-            </div>
-        </div>
+        <Panel title="Table Layout Editor" className="bg-background! h-[calc(100vh-197px)]" action={
+            !readonly ? <Button isLoading={isUpdating} variant="outline" size="sm" onClick={onSave}>Save Changes</Button> : undefined
+        }>
+            <MonacoEditor
+                value={value}
+                language="json"
+                editorRef={editorRef}
+                theme={theme === 'dark' ? 'vs-dark' : 'vs'}
+                options={{ readOnly: readonly }}
+            />
+        </Panel>
     )
 }
 

package/src/features/user/UserInfo.tsx

@@ -1,12 +1,13 @@
-import { useUserSession } from "@vertesia/ui/session";
 import { ApiKey, PrincipalType, User, UserGroup } from "@vertesia/common";
-import { Avatar, Table, Popover, PopoverContent, PopoverTrigger, useFetch } from "@vertesia/ui/core";
-import { ReactNode } from "react";
+import { Avatar, Popover, PopoverContent, PopoverTrigger, Table, useFetch } from "@vertesia/ui/core";
+import { useUserSession } from "@vertesia/ui/session";
 import { Users } from "lucide-react";
+import { ReactNode } from "react";
 
 //TODO use a real cache
 const USER_CACHE: Record<string, Promise<User>> = {};
 const GROUP_CACHE: Record<string, Promise<UserGroup>> = {};
+const APIKEY_CACHE: Record<string, Promise<ApiKey>> = {};
 
 /**
  * Fetch the user information given a user reference.
@@ -47,6 +48,25 @@ export function useFetchGroupInfo(groupId: string) {
     }, [groupId]);
 }
 
+/**
+ * Fetch the API key information given a key ID.
+ * @param keyId
+ */
+export function useFetchApiKeyInfo(keyId: string) {
+    const { client } = useUserSession();
+
+    return useFetch(() => {
+        let apikey: Promise<ApiKey> | undefined = APIKEY_CACHE[keyId];
+        if (!apikey) {
+            apikey = client.apikeys.retrieve(keyId).then(apikey => {
+                return apikey;
+            });
+            APIKEY_CACHE[keyId] = apikey;
+        }
+        return apikey;
+    }, [keyId]);
+}
+
 function AvatarPlaceholder() {
     return <div className='size-8' />
 }
@@ -87,6 +107,97 @@ function ServiceAccountAvatar({ accountId, showTitle = false, size = "md" }: Ser
     );
 }
 
+interface AgentAvatarProps extends InfoProps {
+    agentId: string;  // Format: accountId:projectId:timestamp
+    onBehalfOfType?: string;
+    onBehalfOfId?: string;
+    isScheduleAgent?: boolean;
+}
+function AgentAvatar({ agentId, onBehalfOfType, onBehalfOfId, showTitle = false, size = "md", isScheduleAgent = false }: AgentAvatarProps) {
+    // Fetch user info - must call hooks unconditionally per React rules
+    const shouldFetchUser = onBehalfOfType === 'user' && onBehalfOfId;
+    const shouldFetchApiKey = onBehalfOfType === 'apikey' && onBehalfOfId;
+
+    const userResult = useFetchUserInfo(onBehalfOfId || '');
+    const apiKeyResult = useFetchApiKeyInfo(onBehalfOfId || '');
+
+    // Only use the data if we should fetch it
+    const user = shouldFetchUser ? userResult.data : undefined;
+    const apiKey = shouldFetchApiKey ? apiKeyResult.data : undefined;
+
+    // Determine title and description
+    const title = user ? "Agent on behalf of" : apiKey ? "Agent on behalf of API key" : "Service Account";
+    const _title = isScheduleAgent ? `Schedule ${title}` : title;
+
+    const description = (
+        <div className="space-y-2">
+            {user && (
+                <>
+                    <div className="flex items-center gap-2">
+                        <Avatar src={user.picture} name={user.name} size="sm" />
+                        <div>
+                            <div className="font-medium">{user.name || user.email}</div>
+                            {user.email && user.name && <div className="text-xs text-muted-foreground">{user.email}</div>}
+                        </div>
+                    </div>
+                </>
+            )}
+            {apiKey && (
+                <>
+                    <div>
+                        <div className="font-medium">{apiKey.name}</div>
+                        <div className="text-xs text-muted-foreground">Key ID: {apiKey.id}</div>
+                    </div>
+                </>
+            )}
+            {!user && !apiKey && (
+                <>
+                    <div>This user is used by robots like workflow workers.</div>
+                    <div className="text-gray-800 dark:text-gray-500 text-sm">
+                        <span className="font-semibold">ID:</span> {agentId}
+                    </div>
+                </>
+            )}
+        </div>
+    );
+
+    return (
+        <UserPopoverPanel title={_title} description={description}>
+            <div className="flex items-center gap-2">
+                <div className="flex items-center -space-x-2">
+                    <Avatar
+                        src="/cloud.svg"
+                        color="bg-amber-500"
+                        className="px-[5px] text-white border-2 border-white dark:border-gray-800"
+                        size={size}
+                    />
+                    {user && (
+                        <Avatar
+                            src={user.picture}
+                            name={user.name}
+                            size={size}
+                            className="border-2 border-white dark:border-gray-800"
+                        />
+                    )}
+                    {apiKey && (
+                        <Avatar
+                            name="API"
+                            color="bg-gray-400"
+                            size={size}
+                            className="border-2 border-white dark:border-gray-800"
+                        />
+                    )}
+                </div>
+                {showTitle && (
+                    <div className="text-sm font-semibold truncate">
+                        {user ? `Agent (${user.name || user.email})` : apiKey ? `Agent (${apiKey.name})` : title}
+                    </div>
+                )}
+            </div>
+        </UserPopoverPanel>
+    );
+}
+
 interface ErrorInfoProps extends InfoProps {
     title?: string;
     error: Error | string;
@@ -115,20 +226,75 @@ export function UserInfo({ userRef, showTitle = false, size = "md" }: UserInfoPr
         return <UnknownAvatar title="Unknown User" message="User information is not available." showTitle={showTitle} size={size} />
     }
 
-    const [type, id] = userRef ? userRef.split(':') : ["unknown"];
+    const parts = userRef.split(':');
+    const type = parts[0];
+
     switch (type) {
         case PrincipalType.User:
-            return <UserAvatar userId={id} showTitle={showTitle} size={size} />
+            return <UserAvatar userId={parts[1]} showTitle={showTitle} size={size} />
+
         case PrincipalType.Group:
-            return <GroupAvatar userId={id} showTitle={showTitle} size={size} />
+            return <GroupAvatar userId={parts[1]} showTitle={showTitle} size={size} />
+
         case "system":
             return <SystemAvatar showTitle={showTitle} size={size} />
+
         case PrincipalType.ServiceAccount:
-            return <ServiceAccountAvatar accountId={id} showTitle={showTitle} size={size} />
-        case PrincipalType.Agent:
-            return <ServiceAccountAvatar accountId={id} showTitle={showTitle} size={size} />
+            return <ServiceAccountAvatar accountId={parts.slice(1).join(':')} showTitle={showTitle} size={size} />
+
+        case PrincipalType.Agent: {
+            // Parse agent format: agent:accountId:projectId:timestamp[:on_behalf_type:on_behalf_id]
+            // Handle legacy formats:
+            // - agent:agent:accountId:projectId:timestamp (old bug)
+            // - agent:accountId:projectId:timestamp (fixed, no on_behalf_of)
+            // - agent:accountId:projectId:timestamp:user:userId (new format)
+
+            let agentId: string;
+            let onBehalfOfType: string | undefined;
+            let onBehalfOfId: string | undefined;
+
+            // Check for old buggy format with double "agent"
+            if (parts[1] === 'agent') {
+                // Old format: agent:agent:accountId:projectId:timestamp
+                agentId = parts.slice(2, 5).join(':');
+                // Check if there's on_behalf_of info (unlikely but handle it)
+                onBehalfOfType = parts[5];
+                onBehalfOfId = parts[6];
+            } else {
+                // New format: agent:accountId:projectId:timestamp[:type:id]
+                agentId = parts.slice(1, 4).join(':');
+                onBehalfOfType = parts[4];
+                onBehalfOfId = parts[5];
+            }
+
+            return <AgentAvatar
+                agentId={agentId}
+                onBehalfOfType={onBehalfOfType}
+                onBehalfOfId={onBehalfOfId}
+                showTitle={showTitle}
+                size={size}
+            />
+        }
+
+        case PrincipalType.Schedule: {
+            // format: schedule:agentId:user:userId
+            const agentId = parts[1];
+            const onBehalfOfType = parts[2];
+            const onBehalfOfId = parts[3];
+
+            return <AgentAvatar
+                agentId={agentId}
+                onBehalfOfType={onBehalfOfType}
+                onBehalfOfId={onBehalfOfId}
+                showTitle={showTitle}
+                size={size}
+                isScheduleAgent={true}
+            />
+        }
+
         case PrincipalType.ApiKey:
-            return <ApiKeyAvatar keyId={id} size={size} showTitle={showTitle} />
+            return <ApiKeyAvatar keyId={parts[1]} size={size} showTitle={showTitle} />
+
         default:
             return <ErrorAvatar title="Unknown User" error={`Invalid user ref type: ${type}`} showTitle={showTitle} size={size} />
     }

package/src/features/utils/print.ts

@@ -105,7 +105,6 @@ const PRINT_STYLES = `
   .vprose blockquote,
   .vprose figure,
   .vprose img,
-  .recharts-wrapper,
   [class*="chart"],
   [class*="Chart"] {
     break-inside: avoid;

package/src/layout/AppLayout.tsx

@@ -1,7 +1,6 @@
-import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react'
-import { X } from 'lucide-react'
 import clsx from 'clsx'
-import { Fragment, useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
+import { SidePanel } from '@vertesia/ui/core'
 // import { FullHeightLayout } from './FullHeightLayout.js'
 import { Navbar } from './Navbar.js'
 import { Sidebar } from './Sidebar.js'
@@ -66,47 +65,20 @@ export function AppLayout({ sidebarClassName, className, title, children, logo,
 
                     <div className='flex h-full overflow-y-auto w-full'>
 
-                        <Transition show={sidebarOpen} as={Fragment}>
-                            <Dialog as="div" className="relative z-50 lg:hidden" onClose={setSidebarOpen}>
-                                {/* Backdrop layer for the semi-transparent */}
-                                <TransitionChild
-                                    as={Fragment}
-                                    enter="transition-opacity ease-linear duration-300"
-                                    enterFrom="opacity-0"
-                                    enterTo="opacity-100"
-                                    leave="transition-opacity ease-linear duration-300"
-                                    leaveFrom="opacity-100"
-                                    leaveTo="opacity-0"
-                                >
-                                    <div className="fixed inset-0 bg-gray-900/80" />
-                                </TransitionChild>
-
-                                <div className="fixed inset-0 flex">
-                                    <TransitionChild
-                                        as={Fragment}
-                                        enter="transition ease-in-out duration-300 transform"
-                                        enterFrom="-translate-x-full"
-                                        enterTo="translate-x-0"
-                                        leave="transition ease-in-out duration-300 transform"
-                                        leaveFrom="translate-x-0"
-                                        leaveTo="-translate-x-full"
-                                    >
-                                        <DialogPanel className="relative flex w-full max-w-xs flex-1">
-                                            {/* Sidebar component, swap this element with another sidebar if you like */}
-                                            <Sidebar logo={logo} className={sidebarClassName}>{sidebar}</Sidebar>
-
-                                            {/* close button */}
-                                            <div className="flex w-16 justify-center pt-5 items-start">
-                                                <button type="button" className="-m-2.5 p-2.5" onClick={() => setSidebarOpen(false)}>
-                                                    <span className="sr-only">Close sidebar</span>
-                                                    <X className="size-6 text-white" aria-hidden="true" />
-                                                </button>
-                                            </div>
-                                        </DialogPanel>
-                                    </TransitionChild>
-                                </div>
-                            </Dialog>
-                        </Transition>
+                        {/* Mobile sidebar */}
+                        <div className="lg:hidden">
+                            <SidePanel
+                                className='bg-sidebar'
+                                isOpen={sidebarOpen}
+                                onClose={() => setSidebarOpen(false)}
+                                side="left"
+                                panelWidth={288}
+                                resizable={false}
+                                backdrop={true}
+                            >
+                                <Sidebar logo={logo} className={sidebarClassName}>{sidebar}</Sidebar>
+                            </SidePanel>
+                        </div>
 
                         {/* Static sidebar for desktop */}
                         <div className={`hidden lg:block relative transition-all duration-300 ${desktopSidebarOpen ? 'w-72' : 'w-12'}`}>

package/src/layout/Sidebar.tsx

@@ -21,7 +21,7 @@ export function Sidebar({ children, logo, className }: SidebarProps) {
                     {logo}
                 </div>
             }
-            <div className="flex-1 min-h-0 overflow-hidden px-2">
+            <div className="flex-1 min-h-0 overflow-hidden px-0 lg:px-2">
                 <nav className="h-full flex flex-col">
                     <ul role="list" className="flex flex-col gap-y-2 overflow-y-auto h-full">
                         {children}
@@ -37,8 +37,9 @@ interface SidebarSectionProps {
     title?: React.ReactNode
     action?: React.ReactNode
     isFooter?: boolean
+    className?: string
 }
-export function SidebarSection({ children, title, action, isFooter = false }: SidebarSectionProps) {
+export function SidebarSection({ children, title, action, isFooter = false, className }: SidebarSectionProps) {
     const { isOpen } = useSidebarToggle();
 
     let header = isOpen ? <>
@@ -51,7 +52,7 @@ export function SidebarSection({ children, title, action, isFooter = false }: Si
             {title && <div className="text-xs font-medium h-8 flex items-center gap-x-2 px-2 text-sidebar-foreground/70">
                 {header}
             </div>}
-            <ul data-sidebar="menu" className="flex w-full min-w-0 flex-col gap-1">
+            <ul data-sidebar="menu" className={clsx("flex w-full min-w-0 flex-col gap-1", className)}>
                 {children}
             </ul>
         </li>
@@ -85,8 +86,9 @@ export interface SidebarItemProps {
     className?: string;
     id?: string; //HTML ID of the element
     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 }: SidebarItemProps) {
+export function SidebarItem({ external, className, tools, children, icon: Icon, href, current, onClick, replace }: SidebarItemProps) {
     const { toggleMobile } = useSidebarToggle();
     const _closeSideBar = () => {
         setTimeout(() => {
@@ -104,7 +106,7 @@ export function SidebarItem({ external, className, tools, children, icon: Icon,
     }
     return (
         <li>
-            <Nav onClick={_closeSideBar}>
+            <Nav onClick={_closeSideBar} replace={replace}>
                 <SidebarTooltip text={children as string}>
                     <a
                         href={href}

package/src/router/HistoryNavigator.ts

@@ -213,7 +213,15 @@ export class HistoryNavigator {
             this.fireLocationChange(new AfterLocationChangeEvent(type, to, state));
         }
         const _linkNavListener = (ev: MouseEvent) => {
-            const url = getElementHrefAsUrl(ev.target as HTMLElement)
+            const target = ev.target as HTMLElement;
+            // Skip anchors with download attribute or blob: URLs - they are file downloads, not navigation
+            if (target.tagName.toLowerCase() === 'a' && (
+                (target as HTMLAnchorElement).hasAttribute('download') ||
+                (target as HTMLAnchorElement).href?.startsWith('blob:')
+            )) {
+                return;
+            }
+            const url = getElementHrefAsUrl(target)
             if (url && url.origin === window.location.origin) {
                 ev.preventDefault();
                 const to = new URL(this.addStickyParams(url.href));

package/src/router/Nav.tsx

@@ -12,15 +12,20 @@ interface NavProps {
      * @returns
      */
     onClick?: (ev: SyntheticEvent) => void;
+    /**
+     * If true, use replaceState instead of pushState (no new browser history entry).
+     * Defaults to true for backward compatibility.
+     */
+    replace?: boolean;
 }
-export function Nav({ children, onClick }: NavProps) {
+export function Nav({ children, onClick, replace = true }: NavProps) {
     const navigate = useNavigate();
     const _onClick = (ev: SyntheticEvent) => {
         const link = (ev.target as HTMLElement).closest('a');
         if (link && link.href) {
             ev.stopPropagation();
             ev.preventDefault();
-            navigate(link.href, { replace: true });
+            navigate(link.href, { replace });
             onClick?.(ev);
         }
     }

package/src/session/UserSession.ts

@@ -12,6 +12,8 @@ import { TypeRegistry } from './TypeRegistry';
 import { LastSelectedAccountId_KEY, LastSelectedProjectId_KEY } from './constants';
 export { LastSelectedAccountId_KEY, LastSelectedProjectId_KEY };
 
+const CENTRAL_AUTH_REDIRECT = "https://internal-auth.vertesia.app/";
+
 
 class UserSession {
 
@@ -117,15 +119,41 @@ class UserSession {
 
     logout() {
         console.log('Logging out');
-        if (this.authToken) {
-            getFirebaseAuth().signOut();
+
+        // 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) {
+            // Redirect to central auth for logout
+            // Central auth will handle Firebase logout
+            console.log('Using central auth logout');
+            this.authError = undefined;
+            this.isLoading = false;
+            this.authToken = undefined;
+            this.typeRegistry = undefined;
+            this.setSession = undefined;
+            this.client.withAuthCallback(undefined);
+
+            const logoutUrl = new URL(CENTRAL_AUTH_REDIRECT);
+            const currentUrl = new URL(window.location.href);
+            currentUrl.hash = "";
+            logoutUrl.pathname = "/logout";
+            logoutUrl.searchParams.set("redirect_uri", currentUrl.toString());
+            location.replace(logoutUrl.toString());
+        } else {
+            // Use Firebase logout directly
+            console.log('Using Firebase logout');
+            if (this.authToken) {
+                getFirebaseAuth().signOut();
+            }
+            this.authError = undefined;
+            this.isLoading = false;
+            this.authToken = undefined;
+            this.typeRegistry = undefined;
+            this.setSession = undefined;
+            this.client.withAuthCallback(undefined);
         }
-        this.authError = undefined;
-        this.isLoading = false;
-        this.authToken = undefined;
-        this.typeRegistry = undefined;
-        this.setSession = undefined;
-        this.client.withAuthCallback(undefined);
     }
 
     async switchAccount(targetAccountId: string) {
@@ -151,7 +179,8 @@ class UserSession {
 
     async _loadTypes() {
         if (this.project) {
-            return this.store.types.list({}, { layout: true }).then(types => this.typeRegistry = new TypeRegistry(types)).catch(err => {
+            return this.store.types.catalog.list({ layout: true }).then(types => this.typeRegistry = new TypeRegistry(types)).catch(err => {
+                //return this.store.types.list({}, { layout: true }).then(types => this.typeRegistry = new TypeRegistry(types)).catch(err => {
                 console.error('Failed to fetch object types', err);
                 throw err;
             })

package/src/session/UserSessionProvider.tsx

@@ -1,15 +1,15 @@
+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 { getFirebaseAuth } from "./auth/firebase";
 import { useAuthState } from "./auth/useAuthState";
-import { Env } from "@vertesia/ui/env";
 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/";
 
-function shouldRedirectToCentralAuth() {
+export function shouldRedirectToCentralAuth() {
     // Authentication is not supported in Docker environment.
     // See https://github.com/vertesia/studio/wiki/Composable-UI-Hosting-Options
     if (Env.isDocker) {
@@ -129,6 +129,7 @@ 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", {

package/src/shell/apps/AppProjectSelector.tsx

@@ -1,5 +1,5 @@
 import { ProjectRef, RequireAtLeastOne } from "@vertesia/common";
-import { VSelectBox, useFetch } from "@vertesia/ui/core";
+import { SelectBox, useFetch } from "@vertesia/ui/core";
 import { LastSelectedAccountId_KEY, LastSelectedProjectId_KEY, useUserSession } from "@vertesia/ui/session";
 import { useState } from "react";
 
@@ -47,7 +47,7 @@ function SelectProject({ initialValue, projects, onChange, placeholder = "Select
     }
     let actualValue = !value && initialValue ? projects.find(p => p.id === initialValue) : value;
     return (
-        <VSelectBox
+        <SelectBox
             by="id"
             value={actualValue}
             options={projects}

package/src/shell/apps/StandaloneApp.tsx

@@ -1,5 +1,5 @@
 import { AppInstallationWithManifest, ProjectRef } from "@vertesia/common";
-import { Center, useFetch, VSelectBox } from "@vertesia/ui/core";
+import { Center, useFetch, SelectBox } from "@vertesia/ui/core";
 import { LastSelectedAccountId_KEY, LastSelectedProjectId_KEY, useUserSession } from "@vertesia/ui/session";
 import { LockIcon } from "lucide-react";
 import { ComponentType, ReactNode, useEffect, useMemo, useState } from "react";
@@ -131,7 +131,7 @@ function AccessDeniedMessage({ name }: AccessDeniedMessageProps) {
                     {orgOptions.length > 1 && (
                         <div>
                             <div className="text-sm text-gray-500 mb-2">Organization</div>
-                            <VSelectBox
+                            <SelectBox
                                 by="id"
                                 value={selectedOrg}
                                 options={orgOptions}
@@ -143,7 +143,7 @@ function AccessDeniedMessage({ name }: AccessDeniedMessageProps) {
                     )}
                     <div>
                         {orgOptions.length > 1 && <div className="text-sm text-gray-500 mb-2">Project</div>}
-                        <VSelectBox
+                        <SelectBox
                             by="id"
                             value={undefined}
                             options={filteredProjects}

package/src/shell/login/InviteAcceptModal.tsx

@@ -1,5 +1,5 @@
 import { TransientToken, UserInviteTokenData } from "@vertesia/common"
-import { Button, VModal, VModalBody, VModalTitle } from "@vertesia/ui/core"
+import { Button, Modal, ModalBody, ModalTitle } from "@vertesia/ui/core"
 import { useEffect, useState } from "react"
 import { useUserSession } from "@vertesia/ui/session"
 
@@ -78,16 +78,16 @@ export function InviteAcceptModal() {
 
     return (
         <div>
-            <VModal isOpen={showModal} onClose={closeModal}>
-                <VModalTitle>Review Invites</VModalTitle>
-                <VModalBody>
+            <Modal isOpen={showModal} onClose={closeModal}>
+                <ModalTitle>Review Invites</ModalTitle>
+                <ModalBody>
                     <div className="text-sm pb-4">
                         You have received the following invites to join other accounts.
                         Please review and accept or declined them.
                     </div>
                     {inviteList}
-                </VModalBody>
-            </VModal>
+                </ModalBody>
+            </Modal>
         </div>
     )
 

package/src/shell/login/SignInModal.tsx

@@ -19,7 +19,7 @@ export default function SignInModal({ isOpen, onClose }: SignInModalProps) {
                 <GitHubSignInButton />
                 <MicrosoftSignInButton />
             </ModalBody>
-            <ModalFooter justify="end">
+            <ModalFooter align="right">
                 <Button variant="ghost" onClick={onClose}>Cancel</Button>
             </ModalFooter>
         </Modal>

package/src/shell/login/SignupForm.tsx

@@ -1,5 +1,5 @@
 import { SignupData } from "@vertesia/common";
-import { Button, Input, VSelectBox, SelectStack } from "@vertesia/ui/core";
+import { Button, Input, SelectBox, SelectStack } from "@vertesia/ui/core";
 import { User } from "firebase/auth";
 import { useEffect, useState } from "react";
 import { getFirebaseAuth } from "@vertesia/ui/session";
@@ -130,7 +130,7 @@ export default function SignupForm({ onSignup, goBack }: SignupFormProps) {
             {isCompany &&
                 <>
                     <FormItem label="Company Size">
-                        <VSelectBox className="w-full border border-accent bg-muted"
+                        <SelectBox className="w-full border border-accent bg-muted"
                             value={companySize}
                             options={companySizeOptions}
                             onChange={setCompanySize}
@@ -147,7 +147,7 @@ export default function SignupForm({ onSignup, goBack }: SignupFormProps) {
                 </>
             }
             <FormItem label="Project Maturity">
-                <VSelectBox className="w-full border border-accent bg-muted"
+                <SelectBox className="w-full border border-accent bg-muted"
                     options={projectMaturityOptions}
                     value={projectMaturityOptions.find((option) => option.id === projectMaturity)}
                     optionLabel={(option) => option?.label}