@vertesia/ui 1.1.1-dev.20260505.163000Z → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertesia/ui",
-  "version": "1.1.1-dev.20260505.163000Z",
+  "version": "1.3.0",
   "description": "Vertesia UI components and and hooks",
   "type": "module",
   "main": "./lib/index.js",
@@ -86,10 +86,10 @@
     "vega": "^6.2.0",
     "vega-embed": "^7.1.0",
     "vega-lite": "^6.4.1",
-    "@vertesia/client": "1.1.1-dev.20260505.163000Z",
-    "@vertesia/common": "1.1.1-dev.20260505.163000Z",
-    "@vertesia/fusion-ux": "1.1.1-dev.20260505.163000Z",
-    "@vertesia/json": "1.1.1-dev.20260505.163000Z"
+    "@vertesia/client": "1.3.0",
+    "@vertesia/fusion-ux": "1.3.0",
+    "@vertesia/json": "1.3.0",
+    "@vertesia/common": "1.3.0"
   },
   "devDependencies": {
     "@eslint/compat": "^2.0.2",

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

@@ -36,10 +36,14 @@ export function BrowseCollectionView({ collection }: BrowseCollectionViewProps)
         }
     }
     const tableLayout = getTableLayout(collection, typeRegistry);
-    return collection.dynamic ? (
-        <DocumentSearchResults layout={tableLayout} />
-    ) : (
-        <DocumentSearchResultsWithDropZone onUploadDone={onUploadDone} layout={tableLayout} />
+    return (
+        <div className="flex flex-col h-full">
+            {collection.dynamic ? (
+                <DocumentSearchResults layout={tableLayout} />
+            ) : (
+                <DocumentSearchResultsWithDropZone onUploadDone={onUploadDone} layout={tableLayout} />
+            )}
+        </div>
     )
 }
 

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

@@ -1,5 +1,5 @@
-import { Collection, CreateCollectionPayload, getContentTypeRefId, JSONSchemaObject } from "@vertesia/common";
-import { Button, ErrorBox, FormItem, Input, Panel, Styles, Textarea, useFetch, useToast, useTheme } from "@vertesia/ui/core";
+import { Collection, CreateCollectionPayload, getContentTypeRefId, JSONSchemaObject, SecurityLevelLabels } from "@vertesia/common";
+import { Badge, Button, ErrorBox, FormItem, Input, Panel, SelectBox, Styles, Textarea, useFetch, useToast, useTheme } from "@vertesia/ui/core";
 import { SharedPropsEditor, SyncMemberHeadsToggle, UserInfo } from "@vertesia/ui/features";
 import { useUserSession } from "@vertesia/ui/session";
 import { MonacoEditor, EditorApi, GeneratedForm, ManagedObject, Node } from "@vertesia/ui/widgets";
@@ -16,6 +16,8 @@ interface UpdateData {
     tags: string[];
     type: string;
     allowed_types: string[];
+    sensitivity?: number;
+    compartments: string[];
 }
 
 interface EditCollectionViewProps {
@@ -38,7 +40,10 @@ export function EditCollectionView({ refetch, collection }: EditCollectionViewPr
         tags: collection.tags || [],
         type: collection.type ? getContentTypeRefId(collection.type) : "",
         allowed_types: collection.allowed_types || [],
+        sensitivity: collection.sensitivity,
+        compartments: collection.compartments || [],
     });
+    const [compartmentInput, setCompartmentInput] = useState('');
 
     const tableLayoutValue = useMemo(() => {
         return stringifyTableLayout(collection.table_layout);
@@ -65,6 +70,8 @@ export function EditCollectionView({ refetch, collection }: EditCollectionViewPr
             tags: metadata.tags,
             type: metadata.type,
             allowed_types: metadata.allowed_types,
+            sensitivity: metadata.sensitivity,
+            compartments: metadata.compartments,
         };
         let error: string | undefined;
         if (!payload.name) {
@@ -221,6 +228,50 @@ export function EditCollectionView({ refetch, collection }: EditCollectionViewPr
                         isClearable
                     />
                 </FormItem>
+                <FormItem label="Sensitivity" description="BLP sensitivity level — propagated to member documents (max across collections)">
+                    <SelectBox
+                        options={SecurityLevelLabels.map((label, index) => ({ label: `${index} — ${label}`, value: index }))}
+                        value={metadata.sensitivity !== undefined ? { label: `${metadata.sensitivity} — ${SecurityLevelLabels[metadata.sensitivity] ?? 'Unknown'}`, value: metadata.sensitivity } : undefined}
+                        onChange={(opt: { label: string; value: number }) => setField('sensitivity', opt.value)}
+                        optionLabel={(opt: { label: string }) => opt.label}
+                        by="value"
+                        placeholder="Not set"
+                    />
+                </FormItem>
+                <FormItem label="Compartments" description="Security compartments — propagated to member documents (union across collections)">
+                    <div className="flex gap-2">
+                        <Input
+                            value={compartmentInput}
+                            onChange={setCompartmentInput}
+                            placeholder="Add a compartment"
+                            onKeyDown={(e) => {
+                                if (e.key === 'Enter') {
+                                    e.preventDefault();
+                                    const val = compartmentInput.trim();
+                                    if (val && !metadata.compartments.includes(val)) {
+                                        setField('compartments', [...metadata.compartments, val]);
+                                        setCompartmentInput('');
+                                    }
+                                }
+                            }}
+                        />
+                        <Button type="button" variant="outline" onClick={() => {
+                            const val = compartmentInput.trim();
+                            if (val && !metadata.compartments.includes(val)) {
+                                setField('compartments', [...metadata.compartments, val]);
+                                setCompartmentInput('');
+                            }
+                        }}>Add</Button>
+                    </div>
+                    <div className="flex gap-1 flex-wrap mt-2">
+                        {metadata.compartments.map((c) => (
+                            <Badge key={c} variant="secondary" className="cursor-pointer"
+                                onClick={() => setField('compartments', metadata.compartments.filter(x => x !== c))}>
+                                {c} ×
+                            </Badge>
+                        ))}
+                    </div>
+                </FormItem>
             </Panel>
 
             {typeId && <PropertiesEditor typeId={typeId} collection={collection} />}

package/src/features/store/objects/components/ContentOverview.tsx

@@ -1,7 +1,7 @@
 import { memo, useEffect, useRef, useState, type RefObject } from "react";
 
 import { AUDIO_RENDITION_NAME, AudioMetadata, ContentNature, ContentObject, ContentObjectStatus, DocAnalyzerProgress, DocProcessorOutputFormat, DocumentMetadata, ImageRenditionFormat, MarkdownRenditionFormat, PDF_RENDITION_NAME, Permission, POSTER_RENDITION_NAME, VideoMetadata, WorkflowExecutionStatus } from "@vertesia/common";
-import { Button, Portal, ResizableHandle, ResizablePanel, ResizablePanelGroup, Spinner, useToast } from "@vertesia/ui/core";
+import { Button, Dropdown, MenuItem, Portal, ResizableHandle, ResizablePanel, ResizablePanelGroup, Spinner, useFetch, useToast } from "@vertesia/ui/core";
 import { NavLink } from "@vertesia/ui/router";
 import { useUserSession } from "@vertesia/ui/session";
 import { JSONDisplay, MarkdownRenderer, Progress, XMLViewer } from "@vertesia/ui/widgets";
@@ -541,14 +541,14 @@ function DataPanel({ object, loadText, handleCopyContent, refetch }: { object: C
                     <PdfProcessingPanel progress={pdfProgress} status={pdfStatus} outputFormat={pdfOutputFormat} />
                 </div>
             )}
-            {currentPanel === PanelView.Text && !showProcessingPanel && isLoadingText && (
+            {currentPanel === PanelView.Text && !showProcessingPanel && !isEditing && isLoadingText && (
                 <div className={getPanelVisibility(true)}>
                     <div className="flex justify-center items-center flex-1">
                         <Spinner size="lg" />
                     </div>
                 </div>
             )}
-            {currentPanel === PanelView.Text && !showProcessingPanel && !isLoadingText && (
+            {currentPanel === PanelView.Text && !showProcessingPanel && !isEditing && !isLoadingText && (
                 <div className={getPanelVisibility(true)}>
                     <TextPanel
                         object={object}
@@ -582,11 +582,16 @@ function TextActions({
     onToggleEdit,
     canEdit,
 }: TextActionsProps) {
-    const { client } = useUserSession();
+    const { client, project } = useUserSession();
     const toast = useToast();
     const { t } = useUITranslation();
     const content = object.content;
     const { renderDocument, isDownloading } = useDownloadFile({ client, toast });
+    const { data: fullProject } = useFetch(
+        () => project ? client.projects.retrieve(project.id) : Promise.resolve(undefined),
+        [project?.id]
+    );
+    const pdfTemplateObjectId = fullProject?.configuration?.pdf_template_object_id;
 
     const isMarkdown =
         content &&
@@ -596,7 +601,7 @@ function TextActions({
     // Get content processor type for file extension detection
     const contentProcessorType = getContentProcessorType(object);
 
-    const handleExportDocument = async (format: MarkdownRenditionFormat) => {
+    const handleExportDocument = async (format: MarkdownRenditionFormat, useDefaultTemplate?: boolean) => {
         // Prevent multiple concurrent exports
         if (isDownloading) return;
 
@@ -608,14 +613,20 @@ function TextActions({
             duration: 2000,
         });
 
+        // For branded exports, use the project-configured template if available
+        const templateObjectId = useDefaultTemplate !== false ? pdfTemplateObjectId : undefined;
+
         await renderDocument(object.id, {
             format,
             title: object.name || "document",
+            useDefaultTemplate,
+            templateObjectId,
         });
     };
 
     const handleExportDocx = () => handleExportDocument(MarkdownRenditionFormat.docx);
-    const handleExportPdf = () => handleExportDocument(MarkdownRenditionFormat.pdf);
+    const handleExportPdf = () => handleExportDocument(MarkdownRenditionFormat.pdf, false);
+    const handleExportBrandedPdf = () => handleExportDocument(MarkdownRenditionFormat.pdf);
 
     const handleDownloadText = (e: React.MouseEvent) => {
         e.preventDefault();
@@ -668,43 +679,50 @@ function TextActions({
                                     <SquarePen className="size-4" />
                                 </SecureButton>
                             )}
-                            <Button variant="ghost" size="sm" title="Download text" onClick={handleDownloadText}>
-                                <Download className="size-4" />
-                            </Button>
                         </>
                     )}
-                    {isMarkdown && text && (
-                        <>
-                            <Button
-                                variant="ghost"
-                                size="sm"
-                                onClick={handleExportDocx}
-                                disabled={isDownloading}
-                                className="flex items-center gap-2"
-                            >
-                                {isDownloading ? (
-                                    <Spinner size="sm" />
-                                ) : (
-                                    <Download className="size-4" />
-                                )}
-                                DOCX
-                            </Button>
-                            <Button
-                                variant="ghost"
-                                size="sm"
-                                onClick={handleExportPdf}
-                                disabled={isDownloading}
-                                className="flex items-center gap-2"
-                            >
-                                {isDownloading ? (
-                                    <Spinner size="sm" />
-                                ) : (
-                                    <Download className="size-4" />
-                                )}
-                                PDF
-                            </Button>
-                        </>
+                    {isDownloading ? (
+                        <Button variant="ghost" size="sm" disabled className="flex items-center gap-2" alt="download">
+                            <Spinner size="sm" />
+                        </Button>
+                    ) : (
+                        <Dropdown trigger={
+                            <Button variant="ghost" size="sm" disabled={!text} className="flex items-center gap-2" alt="download">
+                                <Download className="size-4" />
+                            </Button>}>
+                            {fullText && (
+                                <MenuItem onClick={handleDownloadText}>
+                                    <div className="flex items-center gap-2">
+                                        <Download className="size-4" />
+                                        Download Text
+                                    </div>
+                                </MenuItem>
+                            )}
+                            {isMarkdown && text && (
+                                <>
+                                    <MenuItem onClick={handleExportDocx}>
+                                        <div className="flex items-center gap-2">
+                                            <Download className="size-4" />
+                                            Export as DOCX
+                                        </div>
+                                    </MenuItem>
+                                    <MenuItem onClick={handleExportPdf}>
+                                        <div className="flex items-center gap-2">
+                                            <Download className="size-4" />
+                                            Export as PDF
+                                        </div>
+                                    </MenuItem>
+                                    <MenuItem onClick={handleExportBrandedPdf}>
+                                        <div className="flex items-center gap-2">
+                                            <Download className="size-4" />
+                                            Export as Branded PDF
+                                        </div>
+                                    </MenuItem>
+                                </>
+                            )}
+                        </Dropdown>
                     )}
+
                 </div>
             </div>
         </>

package/src/features/store/objects/components/TextEditorPanel.tsx

@@ -40,6 +40,8 @@ export function TextEditorPanel({ object, text, onClose, onSaved }: TextEditorPa
     const [showConfirmation, setShowConfirmation] = useState(false);
 
     const language = getMonacoLanguage(object.content?.type);
+    console.log('Determined language for Monaco Editor:', language);
+    console.log('TextEditorPanel rendered with object:', object, text);
 
     const handleEditorChange = useCallback(() => {
         if (!isDirty) setIsDirty(true);
@@ -112,7 +114,7 @@ export function TextEditorPanel({ object, text, onClose, onSaved }: TextEditorPa
                 <Button variant="ghost" size="sm" onClick={onClose} disabled={isSaving}>
                     {t('store.cancelEdit')}
                 </Button>
-                <Button variant="outline" size="sm" onClick={handleSave} disabled={!isDirty} isLoading={isSaving}>
+                <Button variant="secondary" size="sm" onClick={handleSave} disabled={!isDirty} isLoading={isSaving}>
                     {t('store.saveText')}
                 </Button>
             </div>

package/src/features/store/objects/components/useDownloadFile.ts

@@ -18,6 +18,10 @@ export interface RenderAndDownloadOptions {
     artifactRunId?: string;
     /** Additional Pandoc options */
     pandocOptions?: string[];
+    /** Use Vertesia default branded template (default: true for PDF) */
+    useDefaultTemplate?: boolean;
+    /** Object ID of a content object containing a custom LaTeX template to use instead of the default */
+    templateObjectId?: string;
 }
 
 export interface UseDownloadFileResult {
@@ -118,6 +122,8 @@ export function useDownloadFile({ client, toast }: UseDownloadFileOptions): UseD
                 format: options.format,
                 title: options.title,
                 pandoc_options: options.pandocOptions,
+                use_default_template: options.useDefaultTemplate,
+                template_path: options.templateObjectId ? `store:${options.templateObjectId}` : undefined,
             }, filename);
 
             toast({

package/src/i18n/locales/en.json

@@ -339,6 +339,9 @@
   "store.actions.noObjectsSelected": "No objects selected",
   "store.actions.pleaseSelectObjectsToDelete": "Please select objects to delete",
   "store.actions.pleaseSelectObjectsToRemove": "Please select objects to remove from collection",
+  "store.actions.removeFromCollection": "Remove from Collection",
+  "store.actions.removeFromCollectionDesc": "Remove the selected objects from this collection",
+  "store.actions.confirmRemoveFromCollection": "Are you sure you want to remove the selected objects from this collection?",
   "store.actions.selectCollection": "Select Collection",
   "store.actions.startWorkflow": "Start Workflow",
   "store.actions.startWorkflowByRule": "Start a Workflow by Rule",

package/src/widgets/json-view/JSONEditor.tsx

@@ -0,0 +1,89 @@
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { useTheme } from '@vertesia/ui/core';
+import { MonacoEditor, IEditorApi } from '../monacoEditor/MonacoEditor';
+
+export interface JSONEditorProps {
+    /** The JSON value to edit */
+    value: Record<string, any> | undefined | null;
+    /** Called when the user saves (value is the parsed JSON) */
+    onChange?: (value: Record<string, any>) => void;
+    /** Called on every valid edit (for controlled mode) */
+    onValidChange?: (value: Record<string, any>) => void;
+    /** If true, the editor is read-only */
+    readonly?: boolean;
+    /** Editor height (default: '200px') */
+    height?: string;
+    /** Placeholder text when value is empty */
+    placeholder?: string;
+    /** Additional CSS class */
+    className?: string;
+}
+
+/**
+ * Reusable JSON editor based on Monaco.
+ * Parses and validates JSON, reports errors.
+ */
+export function JSONEditor({
+    value,
+    onChange: _onChange,
+    onValidChange,
+    readonly = false,
+    height = '200px',
+    placeholder,
+    className,
+}: JSONEditorProps) {
+    const { theme } = useTheme();
+    const editorRef = useRef<IEditorApi>(undefined);
+    const [error, setError] = useState<string | null>(null);
+
+    const jsonString = useMemo(() => {
+        if (value === undefined || value === null) return placeholder ?? '{}';
+        try {
+            return JSON.stringify(value, null, 2);
+        } catch {
+            return '{}';
+        }
+    }, [value, placeholder]);
+
+    // Validate on change
+    const handleChange = useCallback(() => {
+        if (!editorRef.current || readonly) return;
+        const text = editorRef.current.getValue();
+        try {
+            const parsed = JSON.parse(text);
+            setError(null);
+            onValidChange?.(parsed);
+        } catch {
+            setError('Invalid JSON');
+        }
+    }, [readonly, onValidChange]);
+
+    return (
+        <div className={className}>
+            <div className="border rounded overflow-hidden" style={{ height }}>
+                <MonacoEditor
+                    defaultValue={jsonString}
+                    editorRef={editorRef}
+                    language="json"
+                    theme={theme === 'dark' ? 'vs-dark' : 'vs'}
+                    onChange={handleChange}
+                    options={readonly ? { readOnly: true, domReadOnly: true } : undefined}
+                />
+            </div>
+            {error && <p className="text-xs text-destructive mt-1">{error}</p>}
+        </div>
+    );
+}
+
+/**
+ * Get the current parsed value from a JSONEditor ref.
+ * Returns the parsed object or null if invalid.
+ */
+export function getJSONEditorValue(editorRef: React.RefObject<IEditorApi | undefined>): Record<string, any> | null {
+    if (!editorRef.current) return null;
+    try {
+        return JSON.parse(editorRef.current.getValue());
+    } catch {
+        return null;
+    }
+}

package/src/widgets/json-view/index.ts

@@ -1,5 +1,6 @@
 export type * from "./types.js";
 export * from "./JSONCode.js";
 export * from "./JSONDisplay.js";
+export * from "./JSONEditor.js";
 export * from "./JSONView.js";
 export * from "./JSONSwitcher.js";