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

package/src/features/agent/chat/ModernAgentConversation.tsx

@@ -497,91 +497,85 @@ function StartWorkflowView({
     }
 
     return (
-        <div
-            className={`flex flex-col h-full bg-white dark:bg-gray-900 overflow-hidden border-0 relative ${isDragOver ? 'ring-2 ring-blue-400 ring-inset' : ''}`}
-            onDragEnter={handleDragEnter}
-            onDragOver={handleDragOver}
-            onDragLeave={handleDragLeave}
-            onDrop={handleDrop}
-        >
-            {/* Drag overlay for full-panel file drop */}
-            {isDragOver && (
-                <div className="absolute inset-0 flex items-center justify-center bg-blue-100/80 dark:bg-blue-900/40 z-50 pointer-events-none rounded-lg">
-                    <div className="text-blue-600 dark:text-blue-400 font-medium flex items-center gap-2 text-lg">
-                        <UploadIcon className="size-6" />
-                        Drop files to stage for upload
-                    </div>
-                </div>
-            )}
-
-            {/* Hidden file input */}
-            <input
-                ref={fileInputRef}
-                type="file"
-                multiple
-                accept={acceptedFileTypes}
-                onChange={handleFileInputChange}
-                className="hidden"
-            />
-
-            {/* Header */}
-            <div className="flex items-center justify-between py-2 px-3 border-b border-gray-100 dark:border-gray-800 bg-white dark:bg-gray-900">
-                <div className="flex items-center space-x-2">
-                    <div className="p-1">
-                        <Cpu className="size-3.5 text-muted" />
-                    </div>
-                    <span className="font-medium text-sm text-gray-700 dark:text-gray-300">
-                        {title}
-                    </span>
-                </div>
-
-                {/* Close button if needed */}
-                {onClose && !isModal && (
-                    <Button
-                        size="xs"
-                        variant="ghost"
-                        onClick={onClose}
-                        title="Close"
-                        className="text-slate-500 hover:text-slate-700"
-                    >
-                        <XIcon className="size-4" />
-                    </Button>
-                )}
-            </div>
-
-            {/* Empty conversation area with instructions */}
+        <div className="flex flex-col h-full bg-background items-center">
             <div
-                className={`flex-1 overflow-y-auto px-4 py-6 bg-white dark:bg-gray-900 flex flex-col ${
-                    fullWidth ? 'items-start justify-start' : 'items-center justify-center'
-                }`}
+                className={cn(
+                    "flex flex-col h-full w-full overflow-hidden border-0 relative",
+                    fullWidth ? "" : "max-w-4xl"
+                )}
+                onDragEnter={handleDragEnter}
+                onDragOver={handleDragOver}
+                onDragLeave={handleDragLeave}
+                onDrop={handleDrop}
             >
-                {initialMessage && (
-                    <div
-                        className={`px-4 py-3 mb-4 bg-blue-50/80 dark:bg-blue-900/30 border-l-2 border-blue-400 dark:border-blue-500 text-blue-700 dark:text-blue-300 ${
-                            fullWidth ? 'w-full' : 'max-w-md'
-                        }`}
-                    >
-                        {initialMessage}
+                {/* Drag overlay for full-panel file drop */}
+                {isDragOver && (
+                    <div className="absolute inset-0 flex items-center justify-center bg-info-background z-50 pointer-events-none rounded-lg">
+                        <div className="text-info font-medium flex items-center gap-2 text-lg">
+                            <UploadIcon className="size-6" />
+                            Drop files to stage for upload
+                        </div>
                     </div>
                 )}
 
-                <div
-                    className={`bg-white dark:bg-slate-800 p-4 border-l-2 border-blue-400 dark:border-blue-500 ${
-                        fullWidth ? 'w-full' : 'max-w-md'
-                    }`}
-                >
-                    <div className="text-base text-slate-600 dark:text-slate-300 font-medium">
-                        Enter a message to start a conversation
+                {/* Hidden file input */}
+                <input
+                    ref={fileInputRef}
+                    type="file"
+                    multiple
+                    accept={acceptedFileTypes}
+                    onChange={handleFileInputChange}
+                    className="hidden"
+                />
+
+                {/* Header */}
+                <div className="flex items-center justify-between py-2 px-3 border-b border-border bg-background">
+                    <div className="flex items-center space-x-2">
+                        <div className="p-1">
+                            <Cpu className="size-3.5 text-muted" />
+                        </div>
+                        <span className="font-medium text-sm text-foreground">
+                            {title}
+                        </span>
                     </div>
-                    <div className="mt-3 text-sm text-slate-500 dark:text-slate-400">
-                        Type your question below and press Enter or click {startButtonText}{" "}
-                        to begin
+
+                    {/* Close button if needed */}
+                    {onClose && !isModal && (
+                        <Button
+                            size="xs"
+                            variant="ghost"
+                            onClick={onClose}
+                            title="Close"
+                            className="text-muted hover:text-foreground"
+                        >
+                            <XIcon className="size-4" />
+                        </Button>
+                    )}
+                </div>
+
+                {/* Empty conversation area with instructions */}
+                <div className="flex-1 overflow-y-auto bg-background flex flex-col items-center justify-end">
+                    <div className="w-full px-4 py-6">
+                        {initialMessage && (
+                            <div className="px-4 py-3 mb-4 bg-info-background border-l-2 border-info text-info">
+                                {initialMessage}
+                            </div>
+                        )}
+
+                        <div className="bg-card p-4 border-l-2 border-info">
+                            <div className="text-base text-foreground font-medium">
+                                Enter a message to start a conversation
+                            </div>
+                            <div className="mt-3 text-sm text-muted">
+                                Type your question below and press Enter or click {startButtonText}{" "}
+                                to begin
+                            </div>
+                        </div>
                     </div>
                 </div>
-            </div>
 
-            {/* Input Area */}
-            <div className="py-3 px-3 border-t border-gray-100 dark:border-gray-800 bg-white dark:bg-gray-900">
+                {/* Input Area */}
+                <div className="py-3 px-3 border-t border-border bg-background">
                 {/* Staged files display */}
                 {stagedFiles.length > 0 && (
                     <div className="flex flex-wrap gap-2 mb-3">
@@ -619,23 +613,21 @@ function StartWorkflowView({
                 </div>
 
                 <div className="flex items-end gap-2">
-                    <div className="flex-1">
-                        <textarea
-                            ref={inputRef}
-                            value={inputValue}
-                            onChange={(e) => setInputValue(e.target.value)}
-                            onKeyDown={handleKeyDown}
-                            placeholder={placeholder}
-                            disabled={isSending}
-                            rows={2}
-                            className="w-full py-2.5 px-3 text-sm border border-gray-200 dark:border-gray-700 dark:bg-gray-800 dark:text-white focus:border-gray-300 dark:focus:border-gray-600 focus:outline-none focus:ring-1 focus:ring-gray-300 dark:focus:ring-gray-600 rounded-md resize-none overflow-hidden"
-                            style={{ minHeight: '60px', maxHeight: '200px' }}
-                        />
-                    </div>
+                    <textarea
+                        ref={inputRef}
+                        value={inputValue}
+                        onChange={(e) => setInputValue(e.target.value)}
+                        onKeyDown={handleKeyDown}
+                        placeholder={placeholder}
+                        disabled={isSending}
+                        rows={2}
+                        className="flex-1 py-2.5 px-3 text-sm border border-border bg-background text-foreground focus:border-ring focus:outline-none focus:ring-1 focus:ring-ring rounded-md resize-none overflow-hidden"
+                        style={{ minHeight: '60px', maxHeight: '200px' }}
+                    />
                     <Button
                         onClick={startWorkflowWithMessage}
                         disabled={!inputValue.trim() || isSending}
-                        className="px-3 py-2.5 bg-gray-800 dark:bg-gray-700 hover:bg-gray-700 dark:hover:bg-gray-600 text-white text-xs rounded-md transition-colors"
+                        className="px-3 py-2.5 text-xs rounded-md transition-colors"
                     >
                         {isSending ? (
                             <Spinner size="sm" className="mr-1.5" />
@@ -645,13 +637,14 @@ function StartWorkflowView({
                         {startButtonText}
                     </Button>
                 </div>
-                <div className="text-xs text-gray-400 dark:text-gray-500 mt-2 text-center">
+                <div className="text-xs text-muted mt-2 text-center">
                     {stagedFiles.length > 0
                         ? `${stagedFiles.length} file${stagedFiles.length > 1 ? 's' : ''} staged - will upload when conversation starts`
                         : 'Enter to send • Shift+Enter for new line'}
                 </div>
             </div>
         </div>
+        </div>
     );
 }
 

package/src/features/agent/chat/ModernAgentOutput/utils.ts

@@ -363,7 +363,13 @@ export function groupMessagesWithStreaming(
     for (const message of messages) {
         const activityGroupId = getActivityGroupId(message);
 
-        if (activityGroupId) {
+        // Certain message types have dedicated renderers (AskUserWidget for
+        // REQUEST_INPUT, BatchProgressPanel for BATCH_PROGRESS) and must stay
+        // standalone so MessageItem / AllMessagesMixed can route them correctly.
+        if (message.type === AgentMessageType.REQUEST_INPUT
+            || message.type === AgentMessageType.BATCH_PROGRESS) {
+            standaloneMessages.push(message);
+        } else if (activityGroupId) {
             if (!activityGroups.has(activityGroupId)) {
                 activityGroups.set(activityGroupId, {
                     messages: [],

package/src/features/facets/CollectionsFacetsNav.tsx

@@ -1,7 +1,7 @@
 import { Filter as BaseFilter, FilterProvider, FilterBtn, FilterBar, FilterClear, FilterGroup } from '@vertesia/ui/core';
 import { useState } from 'react';
+import { useTypeRegistry } from '../store/types/TypeRegistryProvider.js';
 import { SearchInterface } from './utils/SearchInterface';
-import { useUserSession } from '@vertesia/ui/session';
 
 interface CollectionsFacetsNavProps {
     facets: {
@@ -14,7 +14,7 @@ interface CollectionsFacetsNavProps {
 // Hook to create filter groups for collections
 export function useCollectionsFilterGroups(facets: CollectionsFacetsNavProps['facets']): FilterGroup[] {
     void facets;
-    const { typeRegistry } = useUserSession();
+    const { registry: typeRegistry } = useTypeRegistry();
 
     const customFilterGroups: FilterGroup[] = [];
 

package/src/features/facets/DocumentsFacetsNav.tsx

@@ -1,6 +1,6 @@
 import { Filter as BaseFilter, FilterProvider, FilterBtn, FilterBar, FilterClear, FilterGroup } from '@vertesia/ui/core';
-import { useUserSession } from '@vertesia/ui/session';
 import { useState } from 'react';
+import { useTypeRegistry } from '../store/types/TypeRegistryProvider.js';
 import { VStringFacet } from './utils/VStringFacet';
 import { VTypeFacet } from './utils/VTypeFacet';
 import { SearchInterface } from './utils/SearchInterface';
@@ -18,7 +18,7 @@ interface DocumentsFacetsNavProps {
 
 // Hook to create filter groups for documents
 export function useDocumentFilterGroups(facets: DocumentsFacetsNavProps['facets']): FilterGroup[] {
-    const { typeRegistry } = useUserSession();
+    const { registry: typeRegistry } = useTypeRegistry();
     const customFilterGroups: FilterGroup[] = [];
 
     customFilterGroups.push({

package/src/features/facets/utils/TypeFacet.tsx

@@ -1,7 +1,7 @@
-import { useUserSession } from "@vertesia/ui/session";
 import { FacetBucket } from "@vertesia/common";
 import { SelectBox } from "@vertesia/ui/core";
 import { useEffect, useState } from "react";
+import { useTypeRegistry } from "../../store/types/TypeRegistryProvider.js";
 
 interface TypeFacetBucket {
     name: string;
@@ -21,7 +21,7 @@ interface TypeFacetProps {
 }
 export function TypeFacet({ search, buckets, placeholder = "Filter by Type", className }: TypeFacetProps) {
     const [options, setOptions] = useState<TypeFacetBucket[]>([]);
-    const { typeRegistry } = useUserSession();
+    const { registry: typeRegistry } = useTypeRegistry();
     const filterValue = search.getFilterValue("type") as string;
     const onChange = (option: FacetBucket | undefined) => {
         search.setFilterValue("type", option?._id);

package/src/features/facets/utils/VTypeFacet.tsx

@@ -1,6 +1,6 @@
 import { FacetBucket } from "@vertesia/common";
 import { FilterGroup } from "@vertesia/ui/core";
-import { TypeRegistry } from "@vertesia/ui/session";
+import { TypeRegistry } from "../../store/types/TypeRegistry.js";
 
 interface VTypeFacetProps {
     buckets: FacetBucket[];

package/src/features/store/collections/BrowseCollectionView.tsx

@@ -1,6 +1,8 @@
 import { Collection, getContentTypeRefId } from "@vertesia/common";
 import { useToast } from "@vertesia/ui/core";
-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 { DocumentSearchResults, DocumentSearchResultsWithDropZone } from "../objects/DocumentSearchResults";
 
 
@@ -9,7 +11,8 @@ interface BrowseCollectionViewProps {
 }
 export function BrowseCollectionView({ collection }: BrowseCollectionViewProps) {
     const toast = useToast();
-    const { client, typeRegistry } = useUserSession();
+    const { client } = useUserSession();
+    const { registry: typeRegistry } = useTypeRegistry();
 
     const onUploadDone = async (objectIds: string[]) => {
         if (objectIds.length > 0) {

package/src/features/store/collections/CreateCollection.tsx

@@ -74,55 +74,57 @@ export function CreateCollectionForm({ onClose, redirect = true, onAddToCollecti
     };
 
     return (
-        <form onSubmit={(e) => e.preventDefault()}>
+        <>
             <ModalBody>
-                <FormItem label="Name" required>
-                    <Input type="text" value={payload.name || ""} onChange={(value) => setPayloadProp("name", value)} />
-                </FormItem>
-                <FormItem label="Description" className="mt-2">
-                    <Textarea
-                        value={payload.description || ""}
-                        onChange={(ev) => setPayloadProp("description", ev.target.value)}
-                    />
-                </FormItem>
-                <FormItem label="Dynamic Collection" className="mt-2" direction="row" description="Dynamically fetch content for the collection based on a query. If not enabled, then content must be added by users or agents.">
-                    <Switch value={payload.dynamic || false} onChange={(value) => setPayloadProp("dynamic", value)} />
-                </FormItem>
-                { !payload.dynamic &&
-                    <FormItem label="Allowed Content Types" className="mt-4" description="Optionally select which content types can be added to the collection. If not set, then all content types are allowed.">
+                <form onSubmit={(e) => e.preventDefault()}>
+                    <FormItem label="Name" required>
+                        <Input type="text" value={payload.name || ""} onChange={(value) => setPayloadProp("name", value)} />
+                    </FormItem>
+                    <FormItem label="Description" className="mt-2">
+                        <Textarea
+                            value={payload.description || ""}
+                            onChange={(ev) => setPayloadProp("description", ev.target.value)}
+                        />
+                    </FormItem>
+                    <FormItem label="Dynamic Collection" className="mt-2" direction="row" description="Dynamically fetch content for the collection based on a query. If not enabled, then content must be added by users or agents.">
+                        <Switch value={payload.dynamic || false} onChange={(value) => setPayloadProp("dynamic", value)} />
+                    </FormItem>
+                    {!payload.dynamic &&
+                        <FormItem label="Allowed Content Types" className="mt-4" description="Optionally select which content types can be added to the collection. If not set, then all content types are allowed.">
+                            <SelectContentType
+                                defaultValue={payload.allowed_types || null}
+                                onChange={(v) => {
+                                    if (Array.isArray(v)) {
+                                        setPayloadProp("allowed_types", v.map(type => type.id));
+                                    } else {
+                                        setPayloadProp("allowed_types", v ? [v.id] : []);
+                                    }
+                                }}
+                                isClearable multiple
+                            />
+                        </FormItem>
+                    }
+                    <FormItem label="Type" className="mt-2" description="Optionally select a content type to assign custom properties and data to the collection.">
                         <SelectContentType
-                            defaultValue={payload.allowed_types || null}
+                            defaultValue={payload.type || null}
                             onChange={(v) => {
                                 if (Array.isArray(v)) {
-                                    setPayloadProp("allowed_types", v.map(type => type.id));
+                                    setPayloadProp("type", v.length > 0 ? v[0].id : null);
                                 } else {
-                                    setPayloadProp("allowed_types", v ? [v.id] : []);
+                                    setPayloadProp("type", v?.id || null);
                                 }
                             }}
-                            isClearable multiple
+                            isClearable
                         />
                     </FormItem>
-                }
-                <FormItem label="Type" className="mt-2" description="Optionally select a content type to assign custom properties and data to the collection.">
-                    <SelectContentType
-                        defaultValue={payload.type || null}
-                        onChange={(v) => {
-                            if (Array.isArray(v)) {
-                                setPayloadProp("type", v.length > 0 ? v[0].id : null);
-                            } else {
-                                setPayloadProp("type", v?.id || null);
-                            }
-                        }}
-                        isClearable
-                    />
-                </FormItem>
+                </form>
             </ModalBody>
             <ModalFooter>
                 <Button isDisabled={isProcessing} onClick={onCreate}>
                     Create Collection
                 </Button>
             </ModalFooter>
-        </form >
+        </>
     );
 }
 

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';
@@ -9,7 +9,7 @@ const optionLabel = (t: ContentObjectTypeItem | null) => {
     return (
         <div>
             <div className="text-sm">{t.name}</div>
-            <div className="text-xs text-gray-500">{t.description}</div>
+            <div className="text-xs text-muted truncate">{t.description}</div>
         </div>
     );
 };
@@ -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";