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

package/src/features/store/objects/selection/SelectionActions.tsx

@@ -56,9 +56,6 @@ function ActionsWrapper({ }: ActionsWrapperProps) {
 export function UploadObjectsButton({ collectionId, allowFolders = true }: { collectionId?: string, allowFolders?: boolean }) {
     const [files, setFiles] = useState<File[]>([]);
     const [isOpen, setIsOpen] = useState(false);
-    const selection = useDocumentSelection();
-
-    const hasSelection = selection?.hasSelection();
 
     const onClose = () => {
         setIsOpen(false);
@@ -66,7 +63,6 @@ export function UploadObjectsButton({ collectionId, allowFolders = true }: { col
     }
 
     return (
-        !hasSelection &&
         <>
             <Button onClick={() => setIsOpen(true)}>Upload</Button>
             <DocumentUploadModal

package/src/features/store/objects/selection/actions/AddToCollectionAction.tsx

@@ -1,4 +1,4 @@
-import { Button, DialogDescription, Heading, Portal, useToast, VModal, VModalBody, VModalFooter, VModalTitle, VTabs, VTabsBar, VTabsPanel } from "@vertesia/ui/core";
+import { Button, DialogDescription, Heading, Portal, useToast, Modal, ModalBody, ModalFooter, ModalTitle, Tabs, TabsBar, TabsPanel } from "@vertesia/ui/core";
 import { useUserSession } from "@vertesia/ui/session";
 import { useCallback, useState } from "react";
 import { CreateCollectionForm, SelectCollection } from "../../../collections";
@@ -41,17 +41,17 @@ interface SelectCollectionModalProps {
 }
 function SelectCollectionModal({ isOpen, onClose, objectIds }: SelectCollectionModalProps) {
     return (
-        <VModal isOpen={isOpen} onClose={onClose} className="max-w-lg w-full min-w-0 overflow-hidden">
-            <VModalTitle className="flex flex-col min-w-0 overflow-hidden">
+        <Modal isOpen={isOpen} onClose={onClose} className="max-w-lg w-full min-w-0 overflow-hidden">
+            <ModalTitle className="flex flex-col min-w-0 overflow-hidden">
                 Add to a Collection
-            </VModalTitle>
+            </ModalTitle>
             <DialogDescription className="min-w-0 overflow-hidden">
                 Add the selected objects to an existing collection or create a new one.
             </DialogDescription>
             <div className="min-w-0 max-w-full overflow-hidden">
                 <AddToCollectionForm onClose={onClose} objectIds={objectIds} />
             </div>
-        </VModal>
+        </Modal>
     )
 }
 
@@ -102,19 +102,19 @@ function AddToCollectionForm({ onClose, objectIds }: AddToCollectionFormProps) {
             content: (
                 <div className="p-4 min-w-0 max-w-full overflow-hidden">
                     <Heading level={5}>Choose from existing collections</Heading>
-                    <VModalBody className="min-w-0 max-w-full overflow-hidden">
+                    <ModalBody className="min-w-0 max-w-full overflow-hidden">
                         <div className="mb-4 min-w-0 max-w-full overflow-hidden">
                             <SelectCollection onChange={onCollectionChange} value={selectedCollectionId} />
                         </div>
-                    </VModalBody>
-                    <VModalFooter>
+                    </ModalBody>
+                    <ModalFooter>
                         <Button
                             isDisabled={!selectedCollectionId}
                             onClick={() => selectedCollectionId && onAddToCollection({ collectionId: selectedCollectionId })}
                         >
                             Add to Collection
                         </Button>
-                    </VModalFooter>
+                    </ModalFooter>
                 </div>
             )
         },
@@ -129,9 +129,9 @@ function AddToCollectionForm({ onClose, objectIds }: AddToCollectionFormProps) {
     ];
 
     return (
-        <VTabs defaultValue="select" tabs={tabs} fullWidth>
-            <VTabsBar />
-            <VTabsPanel />
-        </VTabs>
+        <Tabs defaultValue="select" tabs={tabs} fullWidth>
+            <TabsBar />
+            <TabsPanel />
+        </Tabs>
     )
 }

package/src/features/store/objects/selection/actions/ChangeTypeAction.tsx

@@ -56,12 +56,8 @@ export function ChangeTypeActionComponent({ action, objectIds, children }: Actio
                 title="Change Content Type"
                 confirmLabel="Change Type"
             >
-                <div className="text-sm flex flex-col gap-x-2">
-                    <p>Choose a new Content Type for the selected object{objectIds.length > 1 ? 's' : ' '}
-                        or let the system choose or generate a type based on the content.</p>
-                    <p className="pt-2 text-xs">Note: This action will raise the <code>change_type</code> event and will trigger the standard intake workflows
-                        which may reset the object properties.</p>
-                </div>
+                <p className="pt-2 text-xs">Note: This action will raise the <code>change_type</code> event and will trigger the standard intake workflows
+                    which may reset the object properties.</p>
             </SelectContentTypeModal>
         </div>
     )

package/src/features/store/objects/selection/actions/ExportPropertiesAction.tsx

@@ -102,9 +102,7 @@ export function ExportPropertiesComponent({ action, objectIds }: ActionComponent
     }
 
     return (
-        <div>
-            <ExportPropertiesModal isExporting={isExporting} isOpen={isOpen} onClose={onExportType} />
-        </div>
+        <ExportPropertiesModal isExporting={isExporting} isOpen={isOpen} onClose={onExportType} />
     )
 }
 

package/src/features/store/objects/selection/actions/StartWorkflowComponent.tsx

@@ -1,5 +1,5 @@
 import { useUserSession } from "@vertesia/ui/session";
-import { Button, VModal, VModalBody, VModalFooter, VModalTitle, SelectList, useToast } from "@vertesia/ui/core";
+import { Button, Modal, ModalBody, ModalFooter, ModalTitle, SelectList, useToast } from "@vertesia/ui/core";
 import { useCallback, useState } from "react";
 import { useObjectsActionCallback, useObjectsActionContext } from "../ObjectsActionContext";
 import { ActionComponentTypeProps, ObjectsActionSpec } from "../ObjectsActionSpec";
@@ -60,10 +60,10 @@ interface StartWorkflowModalProps {
 }
 function StartWorkflowModal({ isOpen, onClose }: StartWorkflowModalProps) {
     return (
-        <VModal onClose={() => onClose(undefined)} isOpen={isOpen} className="">
-            <VModalTitle>Start a Workflow by Rule</VModalTitle>
+        <Modal onClose={() => onClose(undefined)} isOpen={isOpen} className="">
+            <ModalTitle>Start a Workflow by Rule</ModalTitle>
             <StartWorkflowBody onClose={onClose} />
-        </VModal>
+        </Modal>
     );
 }
 
@@ -98,7 +98,7 @@ function StartWorkflowBody({ onClose }: StartWorkflowBodyProps) {
 
     return (
         <div>
-            <VModalBody>
+            <ModalBody>
                 <div className="pb-2">Choose a workflow rule to start:</div>
                 <div className="max-h-[420px] overflow-y-scroll border-border border rounded-md">
                     <SelectList
@@ -108,15 +108,15 @@ function StartWorkflowBody({ onClose }: StartWorkflowBodyProps) {
                         value={selected}
                     />
                 </div>
-            </VModalBody>
-            <VModalFooter>
+            </ModalBody>
+            <ModalFooter>
                 <Button variant="secondary" onClick={() => onClose()}>
                     Cancel
                 </Button>
                 <Button onClick={onStart} isDisabled={!selected}>
                     Start
                 </Button>
-            </VModalFooter>
+            </ModalFooter>
         </div>
     );
 }

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/objects/upload/useSmartFileUploadProcessing.ts

@@ -1,4 +1,4 @@
-import { ComplexSearchPayload, ContentObjectItem } from "@vertesia/common";
+import { ComplexSearchPayload, ContentObjectItem, FindPayload } from "@vertesia/common";
 import { useToast } from "@vertesia/ui/core";
 import { useUserSession } from "@vertesia/ui/session";
 import { Md5 } from "ts-md5";
@@ -128,25 +128,31 @@ export function useSmartFileUploadProcessing() {
             const filesWithMetadata = await prepareFilesWithMetadata(files, selectedFolder);
 
             const identifyExistingHash = async () => {
+                const hashes = filesWithMetadata.map((file) => file.hash).filter(Boolean);
+                if (hashes.length === 0) return;
+
                 const query = {
-                    "content.etag": { $in: filesWithMetadata.map((file) => file.hash) },
+                    "content.etag": { $in: hashes },
                 };
 
                 let res: ContentObjectItem[];
 
-                const payload: ComplexSearchPayload = {
-                    query: { match: query },
-                    select: "id content.etag" // Only fetch fields needed for comparison
-                };
-
                 if (limitToCollectionId) {
+                    const payload: ComplexSearchPayload = {
+                        query: { match: query },
+                        select: "id content.etag"
+                    };
                     res = (await client.store.collections.searchMembers(limitToCollectionId, payload)).results;
                 } else {
-                    res = (await client.store.objects.search(payload)).results;
+                    const payload: FindPayload = {
+                        query,
+                        select: "id content.etag"
+                    };
+                    res = await client.store.objects.find(payload);
                 }
 
                 for (const doc of res) {
-                    const file = filesWithMetadata.find((f) => f.hash === doc.content.etag);
+                    const file = filesWithMetadata.find((f) => f.hash === doc.content?.etag);
                     if (file) {
                         file.existingId = doc.id;
                         file.action = FileUploadAction.SKIP;
@@ -196,7 +202,7 @@ export function useSmartFileUploadProcessing() {
                     const file = filesWithMetadata.find(
                         //name must be the same, and location must match (default is "/")
                         (f) =>
-                            f.name === doc.content.name &&
+                            f.name === doc.content?.name &&
                             (f.location ? f.location === doc.location : doc.location === "/"),
                     );
                     if (file) {

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

@@ -2,15 +2,16 @@ 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";
 
 interface ObjectSchemaEditorProps {
     objectType: ContentObjectType;
     onSchemaUpdate: (jsonSchema: any) => void;
+    readonly?: boolean;
 }
-export function ObjectSchemaEditor({ objectType, onSchemaUpdate }: ObjectSchemaEditorProps) {
+export function ObjectSchemaEditor({ objectType, onSchemaUpdate, readonly = false }: ObjectSchemaEditorProps) {
     const { store } = useUserSession();
     const toast = useToast();
     const { theme } = useTheme();
@@ -82,35 +83,37 @@ 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} />
-                }
-            </div>
+    const title = (
+        <div className='flex gap-2 items-center'><div className="text-base font-semibold">Schema Editor</div>
+            {!readonly && <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={!readonly ? <Button isLoading={isUpdating} variant="outline" size="sm" onClick={onSave}>Save Changes</Button> : undefined}
+        >
+            {
+                displayJson
+                    ? <MonacoEditor
+                        value={value}
+                        language="json"
+                        editorRef={editorRef}
+                        theme={theme === 'dark' ? 'vs-dark' : 'vs'}
+                        options={{ readOnly: readonly }}
+                    />
+                    : <SchemaEditor schema={schema} readonly={readonly} />
+            }
+
+
+        </ 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/SelectContentTypeModal.tsx

@@ -6,10 +6,11 @@ import {
     ModalFooter,
     ModalTitle,
     SelectBox,
+    VTooltip,
 } from "@vertesia/ui/core";
 import { ContentObjectTypeItem } from "@vertesia/common";
 import { useUserSession } from "@vertesia/ui/session";
-import { CheckCircleIcon } from "lucide-react";
+import { CheckCircleIcon, Info } from "lucide-react";
 
 /**
  * Props for the SelectTypeModal component
@@ -46,7 +47,6 @@ export function SelectContentTypeModal({
     title = "Select Content Type",
     children,
     initialSelectedType = null,
-    confirmLabel = "Select Type",
     allowNone = true,
 }: SelectContentTypeModalProps) {
     const { typeRegistry } = useUserSession();
@@ -63,6 +63,7 @@ export function SelectContentTypeModal({
     // Handle type selection and confirmation
     const handleConfirm = () => {
         onClose(selectedType?.id ?? null);
+        setSelectedType(null);
     };
 
     return (
@@ -72,7 +73,7 @@ export function SelectContentTypeModal({
             className="w-full max-w-xl mx-auto"
         >
             <ModalTitle>{title}</ModalTitle>
-            <ModalBody className="p-6">
+            <ModalBody>
                 {children}
 
                 {/* Type selection */}
@@ -100,41 +101,27 @@ export function SelectContentTypeModal({
                             filterBy="name"
                         />
                     )}
-
-                    {allowNone && (
-                        <div className="mt-2 text-sm text-blue-600 flex items-center">
-                            <CheckCircleIcon className="h-4 w-4 mr-1" />
-                            <span><strong>Type selection is optional.</strong> Leave empty to let Vertesia choose the appropriate type</span>
-                        </div>
-                    )}
                 </div>
 
-                {selectedType ? (
-                    <div className="text-sm text-gray-500 bg-gray-50 p-3 rounded-md mb-4">
-                        <div className="font-medium">{selectedType.name}</div>
-                        {selectedType.description && (
-                            <div className="mt-1">{selectedType.description}</div>
-                        )}
-                    </div>
-                ) : allowNone && (
-                    <div className="text-sm text-blue-600 bg-blue-50 p-3 rounded-md mb-4">
-                        <div className="font-medium">Automatic Type Detection</div>
-                        <div className="mt-1">
-                            Vertesia will analyze each file&apos;s content and automatically select the most appropriate type.
-                            <br />
-                            <span className="mt-1 block font-medium">This is recommended for most uploads.</span>
-                        </div>
+                {!selectedType && (
+                    <div className="flex items-center text-attention">
+                        <CheckCircleIcon className="size-4 mr-1" />
+                        Automatic Type Detection
+                        <VTooltip
+                            description="Vertesia will analyze the content and select the most appropriate type. This is recommended for most uploads and ensures optimal processing."
+                            placement="top" size="xs"
+                        >
+                            <Info className="size-3 ml-2" />
+                        </VTooltip>
                     </div>
                 )}
             </ModalBody>
             <ModalFooter>
-                <Button variant="ghost" onClick={handleClose}>
+                <Button variant="ghost" onClick={handleClose} alt="Cancel">
                     Cancel
                 </Button>
-                <Button
-                    onClick={handleConfirm}
-                >
-                    {selectedType ? `${confirmLabel}: ${selectedType.name}` : allowNone ? "Let Vertesia Choose" : confirmLabel}
+                <Button onClick={handleConfirm} alt="Confirm selection">
+                    Confirm
                 </Button>
             </ModalFooter>
         </Modal>