@vertesia/ui 0.79.0 → 0.79.1

package/src/features/store/objects/layout/knowledge.md

@@ -30,8 +30,8 @@ Complete list of supported types:
 1. **string** - Text display
 2. **number** - Numeric display
 3. **date** - Date/time display
-4. **objectLink** - Clickable object reference
-5. **typeLink** - Type reference display
+4. **objectId** - object id with preview button
+5. **objectName** - object name display
 
 ### Column Types and Renderers
 Built-in renderers with parameters:
@@ -48,14 +48,14 @@ Built-in renderers with parameters:
    - `currency`: Format as currency (e.g., USD)
    - `decimals`: Number of decimal places (default: 2)
 
-3. **objectLink**
-   - `title`: Property to use as title (default: "title")
-   - `underline`: Link underline style (default: "hover")
-
-4. **date**
+3. **date**
    - `localized`: Use localized format (e.g., "LLL")
    - `relative`: Use relative time ("fromNow"/"toNow")
 
+4. **objectId**
+   - `slice`: Take substring from index
+
+
 ### Parameter Syntax
 Parameters are added using URL query string syntax:
 ```typescript
@@ -92,12 +92,12 @@ Parameters are added using URL query string syntax:
     {
       "name": "ID",
       "field": "id",
-      "type": "string?slice=-7"
+      "type": "objectId?slice=-7"
     },
     {
       "name": "Name",
       "field": ".",
-      "type": "objectLink?title=name&underline=always"
+      "type": "objectName"
     },
     {
       "name": "Price",
@@ -126,7 +126,7 @@ Parameters are added using URL query string syntax:
     {
       "name": "Document",
       "field": ".",
-      "type": "objectLink"
+      "type": "objectName"
     },
     {
       "name": "Score",

package/src/features/store/objects/layout/renderers.tsx

@@ -1,13 +1,14 @@
-import { NavLink } from "@vertesia/ui/router";
 import dayjs from "dayjs";
 import LocalizedFormat from "dayjs/plugin/localizedFormat";
 import RelativeTime from "dayjs/plugin/relativeTime";
 import { shortId } from "../../../utils";
+import { Eye } from "lucide-react";
+import { Button } from "@vertesia/ui/core";
 dayjs.extend(RelativeTime);
 dayjs.extend(LocalizedFormat);
 
-const renderers: Record<string, (params?: URLSearchParams) => (value: any, index: number) => React.ReactNode> = {
-    string(params?: URLSearchParams) {
+const renderers: Record<string, (params?: URLSearchParams, onClick?: (id: string) => void) => (value: any, index: number) => React.ReactNode> = {
+    string(params?: URLSearchParams, _onClick?: (id: string) => void) {
         let transforms: ((value: string) => string)[] = [];
         if (params) {
             const slice = params.get("slice");
@@ -48,7 +49,7 @@ const renderers: Record<string, (params?: URLSearchParams) => (value: any, index
         };
     },
 
-    fileSize(_params?: URLSearchParams) {
+    fileSize(_params?: URLSearchParams, _onClick?: (id: string) => void) {
         return (value: any, index: number) => {
             let fileSize = "";
             if (value) {
@@ -69,7 +70,7 @@ const renderers: Record<string, (params?: URLSearchParams) => (value: any, index
         };
     },
 
-    number(params?: URLSearchParams) {
+    number(params?: URLSearchParams, _onClick?: (id: string) => void) {
         let currency: string | undefined;
         let decimals: string | undefined;
         if (params) {
@@ -88,34 +89,54 @@ const renderers: Record<string, (params?: URLSearchParams) => (value: any, index
             return <td key={index}>{v}</td>;
         };
     },
-    // value must be the object itself
-    objectLink(params?: URLSearchParams) {
+    objectId(params?: URLSearchParams, onClick?: (id: string) => void) {
+        let transforms: ((value: string) => string)[] = [];
+        let hasSlice = false;
+        if (params) {
+            const slice = params.get("slice");
+            if (slice) {
+                hasSlice = true;
+                transforms.push((value) => value.slice(parseInt(slice)));
+            }
+        }
+        return (value: any, index: number) => {
+            const displayValue = transforms.reduce((v, t) => t(v), value.id);
+            return (
+                <td key={index} className="flex justify-between items-center gap-2">
+                    {hasSlice ? '~' : ''}{displayValue}
+                    <Button
+                        variant="ghost"
+                        alt="Preview Object"
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            onClick?.(value.id);
+                        }}
+                    >
+                        <Eye className="size-4" />
+                    </Button>
+                </td>
+            );
+        };
+    },
+    objectName(params?: URLSearchParams, _onClick?: (id: string) => void) {
         let title = "title";
-        //let underline = "hover";
         if (params) {
             title = params.get("title") || "title";
-            //underline = params.get("underline") || "hover";
         }
         return (value: any, index: number) => {
             return (
                 <td key={index}>
-                    <NavLink
-                        topLevelNav
-                        className="underline text-indigo-800 dark:text-indigo-300"
-                        href={`/store/objects/${value.id}`}
-                    >
-                        {value.properties?.[title] || value.name || shortId(value.id)}
-                    </NavLink>
+                    {value.properties?.[title] || value.name || shortId(value.id)}
                 </td>
             );
         };
     },
-    typeLink(_params?: URLSearchParams) {
+    typeLink(_params?: URLSearchParams, _onClick?: (id: string) => void) {
         return (value: any, index: number) => {
             return <td key={index}>{value?.name || "n/a"}</td>;
         };
     },
-    date(params?: URLSearchParams) {
+    date(params?: URLSearchParams, _onClick?: (id: string) => void) {
         let method = "format";
         let arg: string | undefined = "LLL";
         if (params) {

package/src/features/store/objects/search/DocumentSearchContext.ts

@@ -55,9 +55,13 @@ export class DocumentSearch implements SearchInterface {
         this.search();
     }
 
+    setDefaultKeys(keys: any[]) {
+        void keys;
+    }
+
     clearFilters(autoSearch: boolean = true) {
         // Preserve search-related fields when clearing filters
-        const { parent, full_text, vector, weights, score_aggregation, dynamic_scaling, limit } = this.query;
+        const { parent, full_text, vector, weights, score_aggregation, dynamic_scaling, limit, all_revisions } = this.query;
         this.query = {
             parent,
             ...(full_text !== undefined && { full_text }),
@@ -65,6 +69,7 @@ export class DocumentSearch implements SearchInterface {
             ...(weights !== undefined && { weights }),
             ...(score_aggregation !== undefined && { score_aggregation }),
             ...(dynamic_scaling !== undefined && { dynamic_scaling }),
+            ...(all_revisions !== undefined && { all_revisions }),
             ...(limit !== undefined && { limit })
         };
 

package/src/features/store/objects/search/DocumentSearchProvider.tsx

@@ -42,7 +42,7 @@ export function DocumentSearchProvider({ children, limit, parent, typeId, facets
         search.query.parent = parent;
         search.query.name = name;
         return search;
-    }, [typeId, limit]);
+    }, [typeId, limit, collectionId]);
 
     return (
         <SearchContext.Provider value={search}>{children}</SearchContext.Provider>

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

@@ -6,7 +6,7 @@ import { useUserSession } from '@vertesia/ui/session';
 import { useDocumentSearch, useDocumentSelection } from '../../../store';
 import { AddToCollectionAction } from './actions/AddToCollectionAction';
 import { ChangeTypeAction } from './actions/ChangeTypeAction';
-import { DeleteObjectsAction } from './actions/DeleteObjectsAction';
+import { DeleteObjectsAction, DeleteObjectsFromCollectionsAction } from './actions/DeleteObjectsAction';
 import { ExportPropertiesAction } from './actions/ExportPropertiesAction';
 import { RemoveFromCollectionAction } from './actions/RemoveFromCollectionAction';
 import { StartWorkflowAction, StartWorkflowComponent } from './actions/StartWorkflowComponent';
@@ -22,6 +22,7 @@ export class ObjectsActionContext {
         AddToCollectionAction,
         DeleteObjectsAction,
         RemoveFromCollectionAction,
+        DeleteObjectsFromCollectionsAction
     ];
     wfRules: ObjectsActionSpec[] = [];
     callbacks: Record<string, ObjectsActionCallback> = {};
@@ -38,7 +39,7 @@ export class ObjectsActionContext {
             );
         } else {
             return this.allActions.filter(action =>
-                action.id !== 'removeFromCollection'
+                action.id !== 'removeFromCollection' && action.id !== 'deleteFromCollections'
             );
         }
     }

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

@@ -62,6 +62,8 @@ export function UploadObjectsButton({ collectionId }: { collectionId?: string })
     const selectFile = () => {
         const fileInput = document.createElement("input");
         fileInput.type = "file";
+        fileInput.multiple = true;
+        fileInput.accept = "*";
         fileInput?.click();
         fileInput.onchange = (event) => {
             const files = (event.target as HTMLInputElement).files;

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

@@ -85,8 +85,14 @@ function AddToCollectionForm({ onClose, objectIds }: AddToCollectionFormProps) {
         });
     }
 
-    const onCollectionChange = (collectionId: string | undefined) => {
-        setSelectedCollectionId(collectionId);
+    const onCollectionChange = (collectionId: string | string[] | undefined, _collection?: any) => {
+        if (typeof collectionId === "string" || typeof collectionId === "undefined") {
+            setSelectedCollectionId(collectionId);
+        } else if (Array.isArray(collectionId) && collectionId.length > 0) {
+            setSelectedCollectionId(collectionId[0]);
+        } else {
+            setSelectedCollectionId(undefined);
+        }
     };
 
     const tabs = [

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

@@ -28,12 +28,21 @@ export function DeleteObjectsActionComponent({ action, objectIds, children }: Ac
             return Promise.resolve(false);
         }
 
+        function limitFilesName(names: string, maxLength: number) {
+            if (names.length <= maxLength) return names;
+            const extIndex = names.lastIndexOf('.');
+            const ext = extIndex !== -1 ? names.substring(extIndex) : '';
+            const baseName = extIndex !== -1 ? names.substring(0, extIndex) : names;
+            const limitedBaseName = baseName.substring(0, maxLength - ext.length - 3);
+            return `${limitedBaseName}...${ext}`;
+        }
+
         return Promise.all(objectIds.map(id => client.store.objects.delete(id))).then((res) => {
             const plural = res.length > 1 ? 's' : '';
             toast({
                 status: 'success',
                 title: `${res.length} object${plural} deleted`,
-                description: `Objects ${res.map(d => d.id).join(", ")} have been deleted`,
+                description: `Objects ${(limitFilesName(res.map(d => d.id).join(", "), 100))} have been deleted`,
                 duration: 2000
             });
 
@@ -71,7 +80,18 @@ export const DeleteObjectsAction: ObjectsActionSpec = {
     name: 'Delete',
     description: 'Delete the selected objects',
     confirm: true,
-    confirmationText: 'Are you sure you want to delete the selected objects?',
+    confirmationText: 'Are you sure you want to delete all the selected objects? This action cannot be undone.',
+    component: DeleteObjectsActionComponent,
+    destructive: true
+}
+
+
+export const DeleteObjectsFromCollectionsAction: ObjectsActionSpec = {
+    id: 'deleteFromCollections',
+    name: 'Delete Objects',
+    description: 'Delete the selected objects',
+    confirm: true,
+    confirmationText: 'Are you sure you want to delete the selected objects?\nThis is not removable from collections.',
     component: DeleteObjectsActionComponent,
     destructive: true
 }

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

@@ -314,6 +314,7 @@ export function DocumentUploadModal({
 
         // Process files in batches of 50
         const BATCH_SIZE = 50;
+        const PROGRESS_UPDATE_INTERVAL = 5; // Update progress every 5 files
 
         // Helper function to process a batch of files
         const processBatch = async (files: FileWithMetadata[], action: "create" | "update") => {
@@ -337,7 +338,8 @@ export function DocumentUploadModal({
                     });
                 }
 
-                // Process the batch
+                // Process the batch with progress tracking
+                let filesProcessedInBatch = 0;
                 await Promise.all(
                     batch.map(async (fileInfo) => {
                         try {
@@ -446,16 +448,23 @@ export function DocumentUploadModal({
                             // Mark the overall success as false if any file fails
                             result.success = false;
                         }
+                        
+                        // Update progress every PROGRESS_UPDATE_INTERVAL files
+                        filesProcessedInBatch++;
+                        if (filesProcessedInBatch % PROGRESS_UPDATE_INTERVAL === 0 || filesProcessedInBatch === batch.length) {
+                            setFileStatuses((currentStatuses) => {
+                                const completedFiles = currentStatuses.filter(
+                                    (f) => f.status === "success" || f.status === "error",
+                                ).length;
+                                const totalFiles = currentStatuses.length;
+                                const progress = totalFiles > 0 ? Math.round((completedFiles / totalFiles) * 100) : 0;
+                                setOverallProgress(progress);
+                                return currentStatuses;
+                            });
+                        }
                     }),
                 );
 
-                // Calculate overall progress after each batch completion
-                const completedFiles = fileStatuses.filter(
-                    (f) => f.status === "success" || f.status === "error",
-                ).length;
-                const totalFiles = fileStatuses.length;
-                const progress = Math.round((completedFiles / totalFiles) * 100);
-                setOverallProgress(progress);
             }
         };
 
@@ -906,7 +915,7 @@ export function DocumentUploadModal({
     };
 
     return (
-        <VModal key={modalKey} isOpen={isOpen} onClose={handleClose} className="mx-auto">
+        <VModal key={modalKey} isOpen={isOpen} onClose={handleClose} className="mx-auto" disableCloseOnClickOutside>
             <VModalTitle description={_description}>{_title}</VModalTitle>
             {renderModalContent()}
             {renderModalFooter()}

package/src/features/store/objects/upload/useSmartFileUploadProcessing.ts

@@ -134,7 +134,10 @@ export function useSmartFileUploadProcessing() {
 
                 let res: ContentObjectItem[];
 
-                const payload: ComplexSearchPayload = {query: {match: query}, select: undefined}
+                const payload: ComplexSearchPayload = {
+                    query: { match: query },
+                    select: "id content.etag" // Only fetch fields needed for comparison
+                };
 
                 if (limitToCollectionId) {
                     res = (await client.store.collections.searchMembers(limitToCollectionId, payload)).results;
@@ -164,16 +167,16 @@ export function useSmartFileUploadProcessing() {
                     const namesInLocation = unskippedFiles
                         .filter((file) => file.location === location)
                         .map((file) => file.name);
-                    const query = {
-                        location: location ?? "",
+                    const query: Record<string, any> = {
                         "content.name": { $in: namesInLocation },
+                        location: location || "/"
                     };
                     if (limitToCollectionId) {
                         const res = client.store.collections.searchMembers(limitToCollectionId, {
                             query: {
                                 match: query,
                             },
-                            select: undefined,
+                            select: "id content.name location" // Only fetch fields needed for comparison
                         }).then((response) => response.results);
                         queries.push(res);
                     } else {
@@ -181,7 +184,7 @@ export function useSmartFileUploadProcessing() {
                             query: {
                                 match: query,
                             },
-                            select: undefined,
+                            select: "id content.name location" // Only fetch fields needed for comparison
                         });
                         queries.push(res);
                     }
@@ -193,10 +196,10 @@ export function useSmartFileUploadProcessing() {
                 //update fileWithMetadata
                 for (const doc of results) {
                     const file = filesWithMetadata.find(
-                        //name must be the same, and location must the same if present and if not, must be empty string
+                        //name must be the same, and location must match (default is "/")
                         (f) =>
                             f.name === doc.content.name &&
-                            (f.location ? f.location === doc.location : doc.location === ""),
+                            (f.location ? f.location === doc.location : doc.location === "/"),
                     );
                     if (file) {
                         file.existingId = doc.id;

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

@@ -48,7 +48,7 @@ export function CreateOrUpdateTypeModal({ title, isOpen, onClose, okLabel, initi
                     </div>
                     <div>
                         <label className="block text-sm font-medium text-muted">Description</label>
-                        <Textarea value={description} onChange={setDescription} />
+                        <Textarea value={description} onChange={e => setDescription(e.target.value)} />
                     </div>
                 </div>
             </ModalBody>

package/src/router/HistoryNavigator.ts

@@ -130,10 +130,41 @@ export class HistoryNavigator {
         if (beforeEvent._canceled) {
             return;
         }
-        window.history[options.replace ? 'replaceState' : 'pushState']({
+        
+        // Build navigation chain by preserving previous history
+        const currentState = window.history.state;
+        const currentTitle = document.title;
+        
+        // Create new history chain entry
+        const newChainEntry = {
+            title: currentTitle,
+            href: window.location.pathname + window.location.search + window.location.hash
+        };
+        
+        // Build the history chain - clear if using replace
+        let historyChain: Array<{title: string, href: string}> = [];
+        if (!options.replace && currentState?.historyChain) {
+            historyChain = [...currentState.historyChain];
+        }
+
+        // Only add to chain if not replacing
+        if (!options.replace) {
+            historyChain.push(newChainEntry);
+            
+            // Limit chain length to prevent memory issues (keep last 10 entries)
+            if (historyChain.length > 10) {
+                historyChain = historyChain.slice(-10);
+            }
+        }
+        
+        const stateToStore = {
             from: window.location.href,
+            historyChain: historyChain,
             data: options.state || undefined
-        }, '', to.href);
+        };
+        
+        window.history[options.replace ? 'replaceState' : 'pushState'](stateToStore, '', to.href);
+        
         this.fireLocationChange(new AfterLocationChangeEvent(type, to, options.state));
     }
 

package/src/router/Nav.tsx

@@ -20,7 +20,7 @@ export function Nav({ children, onClick }: NavProps) {
         if (link && link.href) {
             ev.stopPropagation();
             ev.preventDefault();
-            navigate(link.href);
+            navigate(link.href, { replace: true });
             onClick?.(ev);
         }
     }
@@ -40,14 +40,15 @@ interface NavLinkProps {
      * use the root router to navigate
      */
     topLevelNav?: boolean;
+    clearBreadcrumbs?: boolean;
 }
-export function NavLink({ children, href, className, topLevelNav }: NavLinkProps) {
+export function NavLink({ children, href, className, topLevelNav, clearBreadcrumbs = false }: NavLinkProps) {
     const { router } = useRouterContext();
     const _onClick = (ev: SyntheticEvent) => {
         ev.stopPropagation();
         ev.preventDefault();
         const actualRouter = topLevelNav ? router.getTopRouter() : router;
-        actualRouter.navigate(href);
+        actualRouter.navigate(href, { replace: clearBreadcrumbs  });
     }
     return (
         <a href={href} className={className} onClick={_onClick}>{children}</a>

package/src/widgets/form/Form.tsx

@@ -1,25 +1,22 @@
 
 import { Plus, Trash2 } from "lucide-react";
-import { Button } from "@vertesia/ui/core";
+import { Button, FormItem } from "@vertesia/ui/core";
 import clsx from "clsx";
 import type { JSONSchemaObject } from "@vertesia/common";
 import { ComponentType, ReactNode, SyntheticEvent, useState } from "react";
-import { FormContextProvider, InputComponentProps, useForm } from "./FormContext.js";
+import { FormContext, FormContextProvider, InputComponentProps, useForm } from "./FormContext.js";
 import { ManagedListProperty, ManagedObject, ManagedObjectBase, ManagedProperty, Node } from "./ManagedObject.js";
-import { FormLabel, FormHelper } from "./fields.js";
 import { Input } from "./inputs.js";
 
-
-
-
 interface FormProps {
     object: ManagedObject;
     components?: Record<string, ComponentType<InputComponentProps>>;
     children?: ReactNode | ReactNode[];
     onSubmit?: (data: JSONSchemaObject) => void;
     onChange?: (prop: Node) => void;
+    disabled?: boolean;
 }
-export function Form({ object, components, onSubmit, children, onChange }: FormProps) {
+export function Form({ object, components, onSubmit, children, onChange, disabled }: FormProps) {
     const _onSubmit = (evt: SyntheticEvent) => {
         evt.stopPropagation();
         evt.preventDefault();
@@ -27,10 +24,7 @@ export function Form({ object, components, onSubmit, children, onChange }: FormP
     }
     object.observer = onChange;
     return (
-        <FormContextProvider value={{
-            object,
-            components: components || {}
-        }}>
+        <FormContextProvider value={new FormContext(object, components || {}, disabled ?? false)}>
             <form className="w-full" onSubmit={_onSubmit}>
                 {children}
             </form>
@@ -58,24 +52,6 @@ export function GeneratedForm({ children, ...props }: FormProps) {
     )
 }
 
-
-// interface FieldSetProps {
-//     name: string;
-//     children?: ReactNode | ReactNode[];
-// }
-// export function FieldSet({ name, children }: FieldSetProps) {
-//     const ctx = useForm();
-//     const newCtx = {
-//         ...ctx,
-//         object: ctx.object.getProperty(name) as ManagedObjectProperty
-//     }
-//     return (
-//         <FormContextProvider value={newCtx}>
-//             {children}
-//         </FormContextProvider>
-//     )
-// }
-
 function renderProperty(prop: Node) {
     if (prop.isList) {
         return <ListField key={prop.name} object={prop as ManagedListProperty} />
@@ -105,7 +81,7 @@ export function ScalarField({ object, editor, inline = false }: ScalarFieldProps
     if (!editor) {
         editor = object.schema.editor;
     }
-    const { components } = useForm();
+    const { components, disabled } = useForm();
     const Component = (editor && components[editor]) || Input;
     const inputType = object.getInputType();
     if (inputType === 'checkbox') {
@@ -113,20 +89,16 @@ export function ScalarField({ object, editor, inline = false }: ScalarFieldProps
     }
 
     const handleOnChange = (event: any) => {
+        if (disabled) return;
         const { value } = event.target;
         object.value = object.schema.isNumber ? parseFloat(value) : value
     }
 
     return (
-        <div className="">
-            <div className={clsx('flex gap-2', inline ? 'flex-row items-center' : 'flex-col')}>
-                {!object.isListItem && <FormLabel required={object.schema.isRequired}>{object.title}</FormLabel>}
-                <Component object={object} type={inputType} onChange={handleOnChange} />
-            </div>
-            {
-                object.schema.description && <FormHelper>{object.schema.description}</FormHelper>
-            }
-        </div>
+        <FormItem label={object.title} required={object.schema.isRequired} description={object.schema.description}
+            className={clsx('flex', inline ? 'flex-row items-center' : 'flex-col')}>
+            {!object.isListItem && <Component object={object} type={inputType} onChange={handleOnChange} />}
+        </FormItem>
     )
 }
 
@@ -149,13 +121,16 @@ interface ListFieldProps {
 }
 function ListField({ object }: ListFieldProps) {
     const [value, setValue] = useState<any[]>(object.value || []);
+    const { disabled } = useForm();
 
     const addItem = () => {
+        if (disabled) return;
         object.add();
         setValue([...object.value]);
     };
 
     const deleteItem = (index: number) => {
+        if (disabled) return;
         object.remove(index);
         setValue([...object.value]);
     };
@@ -165,11 +140,11 @@ function ListField({ object }: ListFieldProps) {
             {!object.isListItem && <div className='text-gray-900 dark:text-gray-200 font-semibold'>{object.title}</div>}
             {
                 object.items.map((item, index) => {
-                    return <ListItem key={`${index}-${value[index] ?? ''}`} object={item} list={object} onDelete={() => deleteItem(index)} />;
+                    return <ListItem key={`${index}-${value[index] ?? ''}`} object={item} list={object} onDelete={() => deleteItem(index)} disabled={disabled} />;
                 })
             }
             <div>
-                <Button variant='secondary' onClick={addItem}><Plus className="size-6" /> Add</Button>
+                <Button variant='secondary' onClick={addItem} disabled={disabled}><Plus className="size-6" /> Add</Button>
             </div>
         </div>
     )
@@ -179,8 +154,9 @@ interface ListItemProps {
     list: ManagedListProperty;
     object: Node & { index: number };
     onDelete: () => void;
+    disabled?: boolean;
 }
-function ListItem({ list, object, onDelete }: ListItemProps) {
+function ListItem({ list, object, onDelete, disabled }: ListItemProps) {
     return (
         <div className='flex gap-2 w-full'>
             <div className="flex-1">
@@ -188,7 +164,7 @@ function ListItem({ list, object, onDelete }: ListItemProps) {
                     renderItemProperty(object, list.schema.arraySchema.editor)
                 }
             </div>
-            <Button variant='secondary' onClick={onDelete}><Trash2 className='size-4' /></Button>
+            <Button variant='secondary' onClick={onDelete} disabled={disabled}><Trash2 className='size-4' /></Button>
         </div>
     )
 }

package/src/widgets/form/FormContext.ts

@@ -15,10 +15,13 @@ export function useFieldSet() {
 export interface InputComponentProps {
     object: Node;
     type: string; // the editor/input type
+    onChange?: (event: any) => void;
+    disabled?: boolean;
 }
-class FormContext {
+export class FormContext {
     constructor(public object: ManagedObject,
-        public components: Record<string, ComponentType<InputComponentProps>> = {}) {
+        public components: Record<string, ComponentType<InputComponentProps>> = {},
+        public disabled: boolean = false) {
     }
 
 }