@vertesia/ui 0.81.1 → 1.0.0-dev.20260203.130115Z

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

@@ -1,5 +1,5 @@
 import { Collection, ContentObjectTypeItem, DynamicCollection } from "@vertesia/common";
-import { Button, MessageBox, VModal, VModalBody, VModalFooter, VModalTitle, VSelectBox, Spinner, useToast, VTooltip } from "@vertesia/ui/core";
+import { Button, MessageBox, Modal, ModalBody, ModalFooter, ModalTitle, SelectBox, Spinner, useToast, VTooltip } from "@vertesia/ui/core";
 import { useUserSession } from "@vertesia/ui/session";
 import { DropZone, UploadSummary } from '@vertesia/ui/widgets';
 import { AlertCircleIcon, CheckCircleIcon, FileIcon, FolderIcon, Info, UploadIcon, XCircleIcon } from "lucide-react";
@@ -567,7 +567,7 @@ export function DocumentUploadModal({
                         <Info className="size-3 ml-2" />
                     </VTooltip>
                 </label>
-                <VSelectBox
+                <SelectBox
                     options={types}
                     value={selectedType}
                     optionLabel={(type) => (type ? type.name : "Select a content type")}
@@ -601,7 +601,7 @@ export function DocumentUploadModal({
         // When showing only type selection, skip directly to the type selection UI
         if (showTypeSelectionOnly) {
             return (
-                <VModalBody>
+                <ModalBody>
                     {children}
 
                     {/* Collection and folder information if available */}
@@ -609,14 +609,14 @@ export function DocumentUploadModal({
 
                     {/* Type selection */}
                     {typeSelection()}
-                </VModalBody>
+                </ModalBody>
             );
         }
 
         // Step 1: File selection #todo: update styles
         if (files.length === 0 && !hideFileSelection) {
             return (
-                <VModalBody className="flex flex-col items-center justify-center p-8">
+                <ModalBody className="flex flex-col items-center justify-center p-8">
                     {/* Collection and folder information if available */}
                     {renderLocationInfo()}
 
@@ -628,14 +628,14 @@ export function DocumentUploadModal({
                         allowFolders={allowFolders}
                     />
                     {children}
-                </VModalBody>
+                </ModalBody>
             );
         }
 
         // Step 2: File processing and type selection
         if (!isUploading && !uploadComplete) {
             return (
-                <VModalBody>
+                <ModalBody>
                     {!processingDone ? (
                         // File processing in progress
                         <div className="flex flex-col items-center justify-center py-4">
@@ -707,14 +707,14 @@ export function DocumentUploadModal({
 
                         </>
                     )}
-                </VModalBody>
+                </ModalBody>
             );
         }
 
         // Step 3: Upload in progress #todo: update styles
         if (isUploading) {
             return (
-                <VModalBody>
+                <ModalBody>
                     {/* Collection and folder information if available */}
                     {renderLocationInfo()}
 
@@ -762,13 +762,13 @@ export function DocumentUploadModal({
                             </div>
                         ))}
                     </div>
-                </VModalBody>
+                </ModalBody>
             );
         }
 
         // Step 4: Upload complete, show results
         return (
-            <VModalBody>
+            <ModalBody>
                 <div className="mb-4">
                     {/* Collection and folder information if available */}
                     {renderLocationInfo()}
@@ -800,7 +800,7 @@ export function DocumentUploadModal({
                         collection={collectionData?.name}
                     />
                 </div>
-            </VModalBody>
+            </ModalBody>
         );
     };
 
@@ -808,7 +808,7 @@ export function DocumentUploadModal({
         // Type-selection-only mode
         if (showTypeSelectionOnly) {
             return (
-                <VModalFooter>
+                <ModalFooter>
                     <Button variant="ghost" onClick={handleClose}>
                         Cancel
                     </Button>
@@ -837,18 +837,18 @@ export function DocumentUploadModal({
                     >
                         {selectedType ? `Use ${selectedType.name}` : "Use Automatic Type Detection"}
                     </Button>
-                </VModalFooter>
+                </ModalFooter>
             );
         }
 
         // File selection step - only show cancel
         if (files.length === 0 && !hideFileSelection) {
             return (
-                <VModalFooter>
+                <ModalFooter>
                     <Button variant="ghost" onClick={handleClose}>
                         Cancel
                     </Button>
-                </VModalFooter>
+                </ModalFooter>
             );
         }
 
@@ -858,7 +858,7 @@ export function DocumentUploadModal({
             const canUpload = processingDone;
 
             return (
-                <VModalFooter>
+                <ModalFooter>
                     <Button variant="ghost" onClick={handleClose}>
                         Cancel
                     </Button>
@@ -870,24 +870,24 @@ export function DocumentUploadModal({
                             ? "Upload"
                             : "Continue"}
                     </Button>
-                </VModalFooter>
+                </ModalFooter>
             );
         }
 
         // Upload in progress - can't cancel
         if (isUploading) {
             return (
-                <VModalFooter>
+                <ModalFooter>
                     <Button variant="ghost" disabled>
                         Uploading...
                     </Button>
-                </VModalFooter>
+                </ModalFooter>
             );
         }
 
         // Upload complete - close or upload more
         return (
-            <VModalFooter>
+            <ModalFooter>
                 <Button
                     variant="ghost"
                     onClick={() => {
@@ -913,15 +913,15 @@ export function DocumentUploadModal({
                 }}>
                     Close
                 </Button>
-            </VModalFooter>
+            </ModalFooter>
         );
     };
 
     return (
-        <VModal key={modalKey} isOpen={isOpen} onClose={handleClose} className="mx-auto" disableCloseOnClickOutside>
-            <VModalTitle description={_description}>{_title}</VModalTitle>
+        <Modal key={modalKey} isOpen={isOpen} onClose={handleClose} className="mx-auto" disableCloseOnClickOutside>
+            <ModalTitle description={_description}>{_title}</ModalTitle>
             {renderModalContent()}
             {renderModalFooter()}
-        </VModal>
+        </Modal>
     );
 }

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

@@ -2,7 +2,7 @@ import { useMemo, useRef, useState } from 'react';
 
 import { useUserSession } from '@vertesia/ui/session';
 import { MonacoEditor, EditorApi, SchemaEditor, useSchema } from '@vertesia/ui/widgets';
-import { Button, useToast, useTheme } from '@vertesia/ui/core';
+import { Button, useToast, useTheme, Panel } from '@vertesia/ui/core';
 import { ContentObjectType } from '@vertesia/common';
 import { Ajv } from "ajv";
 
@@ -82,35 +82,36 @@ export function ObjectSchemaEditor({ objectType, onSchemaUpdate }: ObjectSchemaE
         return true;
     };
 
-    return (
-        <div className="mx-2 my-2 rounded-2xl border border-solid shadow-md border-spacing-2">
-            <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">Schema Editor</div>
-                <div>
-                    <Button variant="outline" size="sm" onClick={handleOnSave}>
-                        {
-                            displayJson ? "Edit Schema" : "Edit Json"
-                        }
-                    </Button>
-                </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">
-                {
-                    displayJson
-                        ? <MonacoEditor
-                            value={value}
-                            language="json"
-                            editorRef={editorRef}
-                            theme={theme === 'dark' ? 'vs-dark' : 'vs'}
-                        />
-                        : <SchemaEditor schema={schema} />
-                }
+    const title = (
+        <div className='flex gap-2 items-center'><div className="text-base font-semibold">Schema Editor</div>
+            <div>
+                <Button variant="outline" size="sm" onClick={handleOnSave}>
+                    {
+                        displayJson ? "Edit Schema" : "Edit Json"
+                    }
+                </Button>
             </div>
         </div>
     );
+
+    return (
+        <Panel title={title} className="bg-background! h-[calc(100vh-197px)]"
+            action={<Button isLoading={isUpdating} variant="outline" size="sm" onClick={onSave}>Save Changes</Button>}
+        >
+            {
+                displayJson
+                    ? <MonacoEditor
+                        value={value}
+                        language="json"
+                        editorRef={editorRef}
+                        theme={theme === 'dark' ? 'vs-dark' : 'vs'}
+                    />
+                    : <SchemaEditor schema={schema} />
+            }
+
+
+        </ Panel>
+    );
 }
 
 function jsonToContent(json: any | undefined | null) {

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

@@ -1,5 +1,5 @@
 import { ContentObjectTypeItem } from "@vertesia/common";
-import { VSelectBox } from "@vertesia/ui/core";
+import { SelectBox } from "@vertesia/ui/core";
 import { useUserSession } from "@vertesia/ui/session";
 import { useEffect, useState } from "react";
 
@@ -56,7 +56,7 @@ export function SelectContentType({ className, defaultValue, onChange, isClearab
     if (multiple) {
         return (
             <div className='flex flex-col gap-4 content-between'>
-                <VSelectBox<ContentObjectTypeItem>
+                <SelectBox<ContentObjectTypeItem>
                     options={session.typeRegistry?.types || []}
                     value={selectedTypes}
                     onChange={_onChangeMultiple}
@@ -73,7 +73,7 @@ export function SelectContentType({ className, defaultValue, onChange, isClearab
 
     return (
         <div className='flex flex-col gap-4 content-between'>
-            <VSelectBox<ContentObjectTypeItem>
+            <SelectBox<ContentObjectTypeItem>
                 options={session.typeRegistry?.types || []}
                 value={selectedType}
                 onChange={_onChange}

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

@@ -1,6 +1,6 @@
 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';
 
@@ -78,22 +78,16 @@ 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={
+            <Button isLoading={isUpdating} variant="outline" size="sm" onClick={onSave}>Save Changes</Button>
+        }>
+            <MonacoEditor
+                value={value}
+                language="json"
+                editorRef={editorRef}
+                theme={theme === 'dark' ? 'vs-dark' : 'vs'}
+            />
+        </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,95 @@ function ServiceAccountAvatar({ accountId, showTitle = false, size = "md" }: Ser
     );
 }
 
+interface AgentAvatarProps extends InfoProps {
+    agentId: string;  // Format: accountId:projectId:timestamp
+    onBehalfOfType?: string;
+    onBehalfOfId?: string;
+}
+function AgentAvatar({ agentId, onBehalfOfType, onBehalfOfId, showTitle = false, size = "md" }: 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 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})` : "Agent"}
+                    </div>
+                )}
+            </div>
+        </UserPopoverPanel>
+    );
+}
+
 interface ErrorInfoProps extends InfoProps {
     title?: string;
     error: Error | string;
@@ -115,20 +224,59 @@ 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.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/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/FullHeightLayout.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import React from 'react';
 
 interface FlexibleHeightLayoutProps {
-    children: (React.ReactElement | undefined | null) | (React.ReactElement | undefined | null)[];
+    children: React.ReactNode;
     className?: string;
 }
 export function FullHeightLayout({ className, children }: FlexibleHeightLayoutProps) {

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>

package/src/session/index.ts

@@ -1,5 +1,6 @@
 export * from "./auth/composable";
 export * from "./auth/useCurrentTenant";
+export * from "./auth/useAuthState";
 export * from "./auth/firebase";
 export * from "./TypeRegistry";
 export * from "./UserSession";