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

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

@@ -9,7 +9,9 @@ import {
     SidePanel, Spinner, useIntersectionObserver, useToast
 } from '@vertesia/ui/core';
 import { useNavigate } from "@vertesia/ui/router";
-import { TypeRegistry, useUserSession } from '@vertesia/ui/session';
+import { useUserSession } from '@vertesia/ui/session';
+import { TypeRegistry } from '../types/TypeRegistry.js';
+import { useTypeRegistry } from '../types/TypeRegistryProvider.js';
 import { Download, ExternalLink, RefreshCw } from 'lucide-react';
 import { useEffect, useRef, useState } from "react";
 import { useDocumentFilterGroups, useDocumentFilterHandler } from "../../facets/DocumentsFacetsNav";
@@ -95,7 +97,7 @@ export function DocumentSearchResults({ layout, onUpload, allowFilter = true, al
     const searchContext = useDocumentSearch();
     const [isReady, setIsReady] = useState(false);
     const [selectedObject, setSelectedObject] = useState<ContentObjectItem | null>(null);
-    const { typeRegistry } = useUserSession();
+    const { registry: typeRegistry } = useTypeRegistry();
     const { search, isLoading, error, objects, hasMore } = useWatchDocumentSearchResult();
     const [actualLayout, setActualLayout] = useState<ColumnLayout[]>(
         typeRegistry ? layout || getTableLayout(typeRegistry, search.query.type) : defaultLayout,

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

@@ -1,6 +1,7 @@
 import { Collection, ContentObjectTypeItem, DynamicCollection } from "@vertesia/common";
 import { Button, MessageBox, Modal, ModalBody, ModalFooter, ModalTitle, SelectBox, Spinner, useToast, VTooltip } from "@vertesia/ui/core";
 import { useUserSession } from "@vertesia/ui/session";
+import { useTypeRegistry } from "../../types/TypeRegistryProvider.js";
 import { DropZone, UploadSummary } from '@vertesia/ui/widgets';
 import { AlertCircleIcon, CheckCircleIcon, FileIcon, FolderIcon, Info, UploadIcon, XCircleIcon } from "lucide-react";
 import { ReactNode, useEffect, useMemo, useState } from "react";
@@ -69,7 +70,8 @@ export function DocumentUploadModal({
     showTypeSelectionOnly = false,
     allowFolders = true,
 }: DocumentUploadModalProps) {
-    const { client, typeRegistry } = useUserSession();
+    const { client } = useUserSession();
+    const { registry: typeRegistry } = useTypeRegistry();
     const toast = useToast();
     const [files, setFiles] = useState<File[]>([]);
     const [processedFiles, setProcessedFiles] = useState<FileWithMetadata[]>([]);

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

@@ -5,6 +5,7 @@ import { useWatchSearchResult } from "./search/ObjectTypeSearchContext";
 
 import { EmptyCollection, ErrorBox, Input, SelectBox, useDebounce, useIntersectionObserver, useToast } from "@vertesia/ui/core";
 import { useUserSession } from "@vertesia/ui/session";
+import { useTypeRegistry } from "./TypeRegistryProvider.js";
 
 import { CreateOrUpdateTypeModal, CreateOrUpdateTypePayload } from "./CreateOrUpdateTypeModal";
 
@@ -14,8 +15,8 @@ interface ContentObjectTypesSearchProps {
     isDirty?: boolean;
 }
 export function ContentObjectTypesSearch({ isDirty = false }: ContentObjectTypesSearchProps) {
-    const session = useUserSession();
-    const { store } = session;
+    const { store } = useUserSession();
+    const { reload: reloadTypes } = useTypeRegistry();
 
     const toast = useToast();
 
@@ -80,7 +81,7 @@ export function ContentObjectTypesSearch({ isDirty = false }: ContentObjectTypes
                 title: "Type created",
                 duration: 2000
             });
-            session.reloadTypes();
+            reloadTypes();
             search.search().then(() => setIsReady(true));
         }).catch(err => {
             toast({

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

@@ -1,7 +1,7 @@
 import { ContentObjectTypeItem } from "@vertesia/common";
 import { SelectBox } from "@vertesia/ui/core";
-import { useUserSession } from "@vertesia/ui/session";
 import { useEffect, useState } from "react";
+import { useTypeRegistry } from "./TypeRegistryProvider.js";
 
 const optionLabel = (t: ContentObjectTypeItem | null) => {
     if (t === null) return 'None';
@@ -22,7 +22,7 @@ interface SelectContentTypeProps {
     multiple?: boolean;
 }
 export function SelectContentType({ className, defaultValue, onChange, isClearable, multiple}: SelectContentTypeProps) {
-    const session = useUserSession();
+    const { registry: typeRegistry } = useTypeRegistry();
     const [isMounted, setIsMounted] = useState(false);
     const [selectedType, setSelectedType] = useState<ContentObjectTypeItem | undefined>();
     const [selectedTypes, setSelectedTypes] = useState<ContentObjectTypeItem[]>([])
@@ -30,18 +30,18 @@ export function SelectContentType({ className, defaultValue, onChange, isClearab
     useEffect(() => {
         if (!isMounted) {
             setIsMounted(true);
-            if (session.typeRegistry && defaultValue) {
+            if (typeRegistry && defaultValue) {
                 if (multiple && Array.isArray(defaultValue)) {
-                    const types = session.typeRegistry.types.filter(t => defaultValue.includes(t.id));
+                    const types = typeRegistry.types.filter(t => defaultValue.includes(t.id));
                     setSelectedTypes(types);
                 }
-                const type = session.typeRegistry.types.find(t => t.id === defaultValue);
+                const type = typeRegistry.types.find(t => t.id === defaultValue);
                 if (type) {
                     setSelectedType(type);
                 }
             }
         }
-    }, [session.typeRegistry, defaultValue, multiple])
+    }, [typeRegistry, defaultValue, multiple])
 
     const _onChange = (option: ContentObjectTypeItem | null) => {
         setSelectedType(option || undefined);
@@ -57,7 +57,7 @@ export function SelectContentType({ className, defaultValue, onChange, isClearab
         return (
             <div className='flex flex-col gap-4 content-between'>
                 <SelectBox<ContentObjectTypeItem>
-                    options={session.typeRegistry?.types || []}
+                    options={typeRegistry?.types || []}
                     value={selectedTypes}
                     onChange={_onChangeMultiple}
                     placeholder="Choose Content Types..."
@@ -74,7 +74,7 @@ export function SelectContentType({ className, defaultValue, onChange, isClearab
     return (
         <div className='flex flex-col gap-4 content-between'>
             <SelectBox<ContentObjectTypeItem>
-                options={session.typeRegistry?.types || []}
+                options={typeRegistry?.types || []}
                 value={selectedType}
                 onChange={_onChange}
                 placeholder="Choose a Content Type..."

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

@@ -9,7 +9,7 @@ import {
     VTooltip,
 } from "@vertesia/ui/core";
 import { ContentObjectTypeItem } from "@vertesia/common";
-import { useUserSession } from "@vertesia/ui/session";
+import { useTypeRegistry } from "./TypeRegistryProvider.js";
 import { CheckCircleIcon, Info } from "lucide-react";
 
 /**
@@ -49,7 +49,7 @@ export function SelectContentTypeModal({
     initialSelectedType = null,
     allowNone = true,
 }: SelectContentTypeModalProps) {
-    const { typeRegistry } = useUserSession();
+    const { registry: typeRegistry } = useTypeRegistry();
     const [selectedType, setSelectedType] = useState<ContentObjectTypeItem | null>(initialSelectedType);
 
     // Get available types from the registry

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

@@ -0,0 +1,73 @@
+import { createContext, ReactNode, useCallback, useContext, useEffect, useRef, useState } from 'react';
+
+import { useUserSession } from '@vertesia/ui/session';
+import { TypeRegistry } from './TypeRegistry.js';
+
+interface TypeRegistryContextValue {
+    registry: TypeRegistry | undefined;
+    isLoading: boolean;
+    load: () => Promise<void>;
+    reload: () => Promise<void>;
+}
+
+const TypeRegistryContext = createContext<TypeRegistryContextValue>({
+    registry: undefined,
+    isLoading: false,
+    load: () => Promise.resolve(),
+    reload: () => Promise.resolve(),
+});
+
+interface TypeRegistryProviderProps {
+    children: ReactNode;
+}
+
+export function TypeRegistryProvider({ children }: TypeRegistryProviderProps) {
+    const { store, project } = useUserSession();
+    const [registry, setRegistry] = useState<TypeRegistry | undefined>();
+    const [isLoading, setIsLoading] = useState(false);
+    const fetchRef = useRef(false);
+
+    const load = useCallback(async () => {
+        if (!project || fetchRef.current) return;
+        fetchRef.current = true;
+        setIsLoading(true);
+        try {
+            const types = await store.types.catalog.list({ layout: true });
+            setRegistry(new TypeRegistry(types));
+        } catch (err) {
+            console.error('Failed to fetch types', err);
+        } finally {
+            setIsLoading(false);
+            fetchRef.current = false;
+        }
+    }, [store, project]);
+
+    const reload = useCallback(async () => {
+        fetchRef.current = false;
+        return load();
+    }, [load]);
+
+    // Reset when project changes
+    useEffect(() => {
+        setRegistry(undefined);
+        fetchRef.current = false;
+    }, [project]);
+
+    return (
+        <TypeRegistryContext.Provider value={{ registry, isLoading, load, reload }}>
+            {children}
+        </TypeRegistryContext.Provider>
+    );
+}
+
+export function useTypeRegistry() {
+    const ctx = useContext(TypeRegistryContext);
+
+    useEffect(() => {
+        if (!ctx.registry && !ctx.isLoading) {
+            ctx.load();
+        }
+    }, [ctx.registry, ctx.isLoading]);
+
+    return ctx;
+}

package/src/features/store/types/index.ts

@@ -6,3 +6,5 @@ export * from "./search";
 export * from "./SelectContentType";
 export * from "./SelectContentTypeModal";
 export * from "./TableLayoutEditor";
+export * from "./TypeRegistry";
+export * from "./TypeRegistryProvider";

package/src/session/UserSession.ts

@@ -7,7 +7,6 @@ import { Env } from '@vertesia/ui/env';
 
 import { getComposableToken } from './auth/composable';
 import { getFirebaseAuth } from './auth/firebase';
-import { TypeRegistry } from './TypeRegistry';
 
 import { LastSelectedAccountId_KEY, LastSelectedProjectId_KEY } from './constants';
 export { LastSelectedAccountId_KEY, LastSelectedProjectId_KEY };
@@ -21,7 +20,6 @@ class UserSession {
     client: VertesiaClient;
     authError?: Error;
     authToken?: AuthTokenPayload;
-    typeRegistry?: TypeRegistry;
     setSession?: (session: UserSession) => void;
     lastSelectedAccount?: string | null;
     lastSelectedProject?: string | null;
@@ -102,11 +100,7 @@ class UserSession {
         // notify the host app of the login
         Env.onLogin?.(this.authToken);
 
-        // Independent async calls
-        await Promise.all([
-            this._loadTypes(),
-            this.fetchOnboardingStatus(),
-        ]);
+        await this.fetchOnboardingStatus();
 
         return Promise.resolve();
 
@@ -131,7 +125,6 @@ class UserSession {
             this.authError = undefined;
             this.isLoading = false;
             this.authToken = undefined;
-            this.typeRegistry = undefined;
             this.setSession = undefined;
             this.client.withAuthCallback(undefined);
 
@@ -150,7 +143,6 @@ class UserSession {
             this.authError = undefined;
             this.isLoading = false;
             this.authToken = undefined;
-            this.typeRegistry = undefined;
             this.setSession = undefined;
             this.client.withAuthCallback(undefined);
         }
@@ -177,24 +169,6 @@ class UserSession {
         window.location.replace('/?a=' + this.account?.id + '&p=' + targetProjectId);
     }
 
-    async _loadTypes() {
-        if (this.project) {
-            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;
-            })
-        } else {
-            console.log('No project selected');
-        }
-    }
-
-    async reloadTypes() {
-        return this._loadTypes().then(() => {
-            this.setSession?.(this.clone());
-        });
-    }
-
     async fetchAccounts() {
         return this.client.accounts.list().then(accounts => {
             if (!this.authToken) {
@@ -237,7 +211,6 @@ class UserSession {
         session.setSession = this.setSession;
         session.lastSelectedAccount = this.lastSelectedAccount;
         session.switchAccount = this.switchAccount;
-        session.typeRegistry = this.typeRegistry;
         session.onboardingComplete = this.onboardingComplete;
         return session;
     }

package/src/session/index.ts

@@ -2,7 +2,6 @@ export * from "./auth/composable";
 export * from "./auth/useCurrentTenant";
 export * from "./auth/useAuthState";
 export * from "./auth/firebase";
-export * from "./TypeRegistry";
 export * from "./UserSession";
 export * from "./UserSessionProvider";
 export * from "./useUXTracking";

package/src/shell/SplashScreen.tsx

@@ -30,8 +30,8 @@ export function SplashScreen({ icon: Icon }: SplashScreenProps) {
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
         >
-            <div style={{ zIndex: 999999 }} className='fixed inset-x-0 inset-y-0'>
-                <div className="flex w-full h-full items-center justify-center">
+            <div style={{ zIndex: 999999, position: 'fixed', inset: 0 }} className='fixed inset-x-0 inset-y-0'>
+                <div style={{ display: 'flex', width: '100%', height: '100%', alignItems: 'center', justifyContent: 'center' }} className="flex w-full h-full items-center justify-center">
                     <div className="animate-[spin_4s_linear_infinite]">
                         <div className='animate-pulse rounded-full bg-transparent'>
                             {Icon || <LoadingIcon />}
@@ -50,6 +50,8 @@ function LoadingIcon() {
     // const stopColor2 = "#4F46E5";
     return (
         <svg
+            width="32"
+            height="32"
             className="w-8 h-8 text-indigo-600"
             viewBox="0 0 50 50"
             xmlns="http://www.w3.org/2000/svg"

package/src/shell/VertesiaShell.tsx

@@ -1,5 +1,5 @@
 import { ThemeProvider, ToastProvider } from "@vertesia/ui/core";
-import { UserPermissionProvider } from "@vertesia/ui/features";
+import { UserPermissionProvider, TypeRegistryProvider } from "@vertesia/ui/features";
 import { UserSessionProvider } from "@vertesia/ui/session";
 import { SplashScreen } from "./SplashScreen";
 import { SigninScreen } from "./login/SigninScreen";
@@ -16,13 +16,15 @@ export function VertesiaShell({ children, lightLogo, darkLogo, loadingIcon }: Ve
     return (
         <ToastProvider>
             <UserSessionProvider>
-                <ThemeProvider defaultTheme="system" storageKey="vite-ui-theme">
-                    <SplashScreen icon={loadingIcon} />
-                    <SigninScreen allowedPrefix="/shared/" lightLogo={lightLogo} darkLogo={darkLogo} />
-                    <UserPermissionProvider>
-                        {children}
-                    </UserPermissionProvider>
-                </ThemeProvider>
+                <TypeRegistryProvider>
+                    <ThemeProvider defaultTheme="system" storageKey="vite-ui-theme">
+                        <SplashScreen icon={loadingIcon} />
+                        <SigninScreen allowedPrefix="/shared/" lightLogo={lightLogo} darkLogo={darkLogo} />
+                        <UserPermissionProvider>
+                            {children}
+                        </UserPermissionProvider>
+                    </ThemeProvider>
+                </TypeRegistryProvider>
             </UserSessionProvider>
         </ToastProvider>
     )

package/lib/esm/session/TypeRegistry.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TypeRegistry.js","sourceRoot":"","sources":["../../../src/session/TypeRegistry.ts"],"names":[],"mappings":"AAEA,MAAM,OAAO,YAAY;IAEF;IADnB,GAAG,GAA0C,EAAE,CAAC;IAChD,YAAmB,KAA8B;QAA9B,UAAK,GAAL,KAAK,CAAyB;QAC7C,YAAY;QACZ,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAA;QAClD,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;YACvB,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;QAC7B,CAAC;IACL,CAAC;IAED,OAAO,CAAC,EAAU;QACd,OAAO,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;IACxB,CAAC;IAED,aAAa,CAAC,EAAU;QACpB,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;QAC1B,OAAO,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC;IAChD,CAAC;IAED,WAAW,CAAC,EAAU;QAClB,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;QAC1B,OAAO,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC;IACxC,CAAC;CAEJ"}

package/lib/types/session/TypeRegistry.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TypeRegistry.d.ts","sourceRoot":"","sources":["../../../src/session/TypeRegistry.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAEzD,qBAAa,YAAY;IAEF,KAAK,EAAE,qBAAqB,EAAE;IADjD,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,qBAAqB,CAAC,CAAM;gBAC7B,KAAK,EAAE,qBAAqB,EAAE;IAQjD,OAAO,CAAC,EAAE,EAAE,MAAM;IAIlB,aAAa,CAAC,EAAE,EAAE,MAAM;IAKxB,WAAW,CAAC,EAAE,EAAE,MAAM;CAKzB"}