@vertesia/ui 1.2.0 → 1.4.0-dev.20260615.042549Z

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

@@ -1,8 +1,8 @@
-import { VertesiaClient, ZenoClient } from "@vertesia/client";
-import { MarkdownRenditionFormat, RenderMarkdownPayload } from "@vertesia/common";
-import { useCallback, useState } from "react";
-import { ToastFn } from "@vertesia/ui/core";
-import { i18nInstance, NAMESPACE } from '../../../../i18n/instance.js';
+import type { VertesiaClient, ZenoClient } from '@vertesia/client';
+import type { MarkdownRenditionFormat, RenderMarkdownPayload } from '@vertesia/common';
+import type { ToastFn } from '@vertesia/ui/core';
+import { i18nInstance, NAMESPACE } from '@vertesia/ui/i18n';
+import { useCallback, useState } from 'react';
 
 export interface UseDownloadFileOptions {
     client: VertesiaClient | ZenoClient;
@@ -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 {
@@ -44,29 +48,32 @@ export function useDownloadFile({ client, toast }: UseDownloadFileOptions): UseD
     /**
      * Download a file from a content source URI using the files API to get a signed URL.
      */
-    const downloadFromContentSource = useCallback(async (uri: string, filename?: string) => {
-        if (!uri) return;
-
-        setIsDownloading(true);
-        try {
-            const result = await client.files.getDownloadUrlWithOptions({
-                file: uri,
-                name: filename
-            });
-
-            // Trigger download
-            triggerDownload(result.url, filename);
-        } catch (err) {
-            toast({
-                status: "error",
-                title: t('store.downloadFailed'),
-                description: err instanceof Error ? err.message : t('store.failedToGetDownloadUrl'),
-                duration: 5000,
-            });
-        } finally {
-            setIsDownloading(false);
-        }
-    }, [client, toast]);
+    const downloadFromContentSource = useCallback(
+        async (uri: string, filename?: string) => {
+            if (!uri) return;
+
+            setIsDownloading(true);
+            try {
+                const result = await client.files.getDownloadUrlWithOptions({
+                    file: uri,
+                    name: filename,
+                });
+
+                // Trigger download
+                triggerDownload(result.url, filename);
+            } catch (err) {
+                toast({
+                    status: 'error',
+                    title: t('store.downloadFailed'),
+                    description: err instanceof Error ? err.message : t('store.failedToGetDownloadUrl'),
+                    duration: 5000,
+                });
+            } finally {
+                setIsDownloading(false);
+            }
+        },
+        [client, toast, t],
+    );
 
     /**
      * Download a file from a direct URL (already signed or public).
@@ -79,101 +86,109 @@ export function useDownloadFile({ client, toast }: UseDownloadFileOptions): UseD
     /**
      * Internal helper to handle the render result and trigger download.
      */
-    const handleRenderResult = useCallback(async (
-        payload: RenderMarkdownPayload,
-        filename: string
-    ) => {
-        // Get the store client (ZenoClient has rendering, VertesiaClient has store.rendering)
-        const storeClient = 'store' in client ? client.store : client;
-
-        const rendition = await storeClient.rendering.render(payload);
-
-        // Use download_url if available (direct signed URL), otherwise fall back to file_uri
-        if (rendition.download_url) {
-            triggerDownload(rendition.download_url, filename);
-        } else if (rendition.file_uri) {
-            const result = await client.files.getDownloadUrlWithOptions({
-                file: rendition.file_uri,
-                name: filename
-            });
-            triggerDownload(result.url, filename);
-        } else {
-            throw new Error("No download URL or file URI in response");
-        }
-    }, [client]);
+    const handleRenderResult = useCallback(
+        async (payload: RenderMarkdownPayload, filename: string) => {
+            // Get the store client (ZenoClient has rendering, VertesiaClient has store.rendering)
+            const storeClient = 'store' in client ? client.store : client;
+
+            const rendition = await storeClient.rendering.render(payload);
+
+            // Use download_url if available (direct signed URL), otherwise fall back to file_uri
+            if (rendition.download_url) {
+                triggerDownload(rendition.download_url, filename);
+            } else if (rendition.file_uri) {
+                const result = await client.files.getDownloadUrlWithOptions({
+                    file: rendition.file_uri,
+                    name: filename,
+                });
+                triggerDownload(result.url, filename);
+            } else {
+                throw new Error('No download URL or file URI in response');
+            }
+        },
+        [client],
+    );
 
     /**
      * Render a document by objectId and download the result.
      */
-    const renderDocument = useCallback(async (
-        objectId: string,
-        options: RenderAndDownloadOptions
-    ) => {
-        setIsDownloading(true);
-        try {
-            const filename = `${options.title || "document"}.${options.format}`;
-
-            await handleRenderResult({
-                object_id: objectId,
-                format: options.format,
-                title: options.title,
-                pandoc_options: options.pandocOptions,
-            }, filename);
-
-            toast({
-                status: "success",
-                title: t('store.documentExported'),
-                description: t('store.successfullyExportedTo', { format: options.format.toUpperCase() }),
-                duration: 2000,
-            });
-        } catch (err) {
-            toast({
-                status: "error",
-                title: t('store.exportFailed'),
-                description: err instanceof Error ? err.message : t('store.failedToExportDocument'),
-                duration: 5000,
-            });
-        } finally {
-            setIsDownloading(false);
-        }
-    }, [handleRenderResult, toast]);
+    const renderDocument = useCallback(
+        async (objectId: string, options: RenderAndDownloadOptions) => {
+            setIsDownloading(true);
+            try {
+                const filename = `${options.title || 'document'}.${options.format}`;
+
+                await handleRenderResult(
+                    {
+                        object_id: objectId,
+                        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({
+                    status: 'success',
+                    title: t('store.documentExported'),
+                    description: t('store.successfullyExportedTo', { format: options.format.toUpperCase() }),
+                    duration: 2000,
+                });
+            } catch (err) {
+                toast({
+                    status: 'error',
+                    title: t('store.exportFailed'),
+                    description: err instanceof Error ? err.message : t('store.failedToExportDocument'),
+                    duration: 5000,
+                });
+            } finally {
+                setIsDownloading(false);
+            }
+        },
+        [handleRenderResult, toast, t],
+    );
 
     /**
      * Render markdown content and download the result.
      */
-    const renderContent = useCallback(async (
-        content: string,
-        options: RenderAndDownloadOptions
-    ) => {
-        setIsDownloading(true);
-        try {
-            const filename = `${options.title || "export"}.${options.format}`;
-
-            await handleRenderResult({
-                content,
-                format: options.format,
-                title: options.title,
-                artifact_run_id: options.artifactRunId,
-                pandoc_options: options.pandocOptions,
-            }, filename);
-
-            toast({
-                status: "success",
-                title: t('store.contentExported'),
-                description: t('store.successfullyExportedTo', { format: options.format.toUpperCase() }),
-                duration: 2000,
-            });
-        } catch (err) {
-            toast({
-                status: "error",
-                title: t('store.exportFailed'),
-                description: err instanceof Error ? err.message : t('store.failedToExportContent'),
-                duration: 5000,
-            });
-        } finally {
-            setIsDownloading(false);
-        }
-    }, [handleRenderResult, toast]);
+    const renderContent = useCallback(
+        async (content: string, options: RenderAndDownloadOptions) => {
+            setIsDownloading(true);
+            try {
+                const filename = `${options.title || 'export'}.${options.format}`;
+
+                await handleRenderResult(
+                    {
+                        content,
+                        format: options.format,
+                        title: options.title,
+                        artifact_run_id: options.artifactRunId,
+                        pandoc_options: options.pandocOptions,
+                    },
+                    filename,
+                );
+
+                toast({
+                    status: 'success',
+                    title: t('store.contentExported'),
+                    description: t('store.successfullyExportedTo', { format: options.format.toUpperCase() }),
+                    duration: 2000,
+                });
+            } catch (err) {
+                toast({
+                    status: 'error',
+                    title: t('store.exportFailed'),
+                    description: err instanceof Error ? err.message : t('store.failedToExportContent'),
+                    duration: 5000,
+                });
+            } finally {
+                setIsDownloading(false);
+            }
+        },
+        [handleRenderResult, toast, t],
+    );
 
     return {
         downloadFromContentSource,
@@ -192,16 +207,16 @@ export function useDownloadFile({ client, toast }: UseDownloadFileOptions): UseD
 function triggerDownload(url: string, filename?: string): void {
     // Try to fetch and create blob for proper filename control
     fetch(url)
-        .then(response => {
+        .then((response) => {
             if (!response.ok) throw new Error(`HTTP ${response.status}`);
             return response.blob();
         })
-        .then(blob => {
+        .then((blob) => {
             const blobUrl = URL.createObjectURL(blob);
-            const a = document.createElement("a");
+            const a = document.createElement('a');
             a.href = blobUrl;
             a.download = filename || getFilenameFromUrl(url);
-            a.style.display = "none";
+            a.style.display = 'none';
             document.body.appendChild(a);
             a.click();
             setTimeout(() => {
@@ -211,12 +226,12 @@ function triggerDownload(url: string, filename?: string): void {
         })
         .catch(() => {
             // CORS or fetch failed - fall back to direct link download
-            const a = document.createElement("a");
+            const a = document.createElement('a');
             a.href = url;
             a.download = filename || getFilenameFromUrl(url);
-            a.target = "_blank";
-            a.rel = "noopener noreferrer";
-            a.style.display = "none";
+            a.target = '_blank';
+            a.rel = 'noopener noreferrer';
+            a.style.display = 'none';
             document.body.appendChild(a);
             a.click();
             setTimeout(() => {
@@ -231,9 +246,9 @@ function triggerDownload(url: string, filename?: string): void {
 function getFilenameFromUrl(url: string): string {
     try {
         const pathname = new URL(url).pathname;
-        const segments = pathname.split("/");
-        return segments[segments.length - 1] || "download";
+        const segments = pathname.split('/');
+        return segments[segments.length - 1] || 'download';
     } catch {
-        return "download";
+        return 'download';
     }
 }

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

@@ -1,10 +1,10 @@
-export * from "./components";
-export * from "./DocumentPreviewPanel";
-export * from "./DocumentSearchResults";
-export * from "./DocumentSelectionProvider";
-export * from "./DocumentTable";
-export * from "./ExportPropertiesModal";
-export * from "./layout";
-export * from "./search";
-export * from "./selection";
-export * from "./upload";
+export * from './components';
+export * from './DocumentPreviewPanel';
+export * from './DocumentSearchResults';
+export * from './DocumentSelectionProvider';
+export * from './DocumentTable';
+export * from './ExportPropertiesModal';
+export * from './layout';
+export * from './search';
+export * from './selection';
+export * from './upload';

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

@@ -1,22 +1,31 @@
-import React from 'react';
-
-import { ColumnLayout, ContentObjectItem } from '@vertesia/common';
+import type { ColumnLayout, ContentObjectItem } from '@vertesia/common';
+import type React from 'react';
 
 import renderers from './renderers';
 
 const defaultRenderer = renderers.string();
 
+function isRecord(value: unknown): value is Record<string, unknown> {
+    return typeof value === 'object' && value !== null;
+}
+
 function resolveField(object: ContentObjectItem, path: string[]) {
-    let p = object as any;
+    let p = object as unknown;
     if (!p) return undefined;
     if (!path.length) return p;
     const last = path.length - 1;
     for (let i = 0; i < last; i++) {
+        if (!isRecord(p)) {
+            return undefined;
+        }
         p = p[path[i]];
         if (!p) {
             return undefined;
         }
     }
+    if (!isRecord(p)) {
+        return undefined;
+    }
     return p[path[last]];
 }
 
@@ -34,18 +43,21 @@ export interface ExtendedColumnLayout extends Omit<ColumnLayout, 'field'> {
 }
 
 export class DocumentTableColumn {
-    renderer: (value: any, index: number) => React.ReactNode = defaultRenderer;
+    renderer: (value: unknown, index: number) => React.ReactNode = defaultRenderer;
     path: string[];
     fallbackPath?: string[];
     previewObject?: (objectId: string) => void;
-    constructor(public layout: ExtendedColumnLayout, previewObject?: (objectId: string) => void) {
+    constructor(
+        public layout: ExtendedColumnLayout,
+        previewObject?: (objectId: string) => void,
+    ) {
         this.path = splitPath(layout.field || '');
         this.fallbackPath = layout.fallback ? splitPath(layout.fallback) : undefined;
         this.previewObject = previewObject;
 
         // If there's a custom render function, use it
         if (layout.render) {
-            this.renderer = (_value: any, _index: number) => null; // Placeholder, we'll use render directly
+            this.renderer = (_value: unknown, _index: number) => null; // Placeholder, we'll use render directly
         } else {
             // Otherwise use the type-based renderer
             const type = layout.type || 'string';
@@ -78,21 +90,25 @@ export class DocumentTableColumn {
     render(object: ContentObjectItem, index: number) {
         // If there's a custom render function, wrap its result in a td
         if (this.layout.render) {
-            return <td key={index} className="whitespace-nowrap px-3 py-4 text-sm">{this.layout.render(object)}</td>;
+            return (
+                <td key={index} className="whitespace-nowrap px-3 py-4 text-sm">
+                    {this.layout.render(object)}
+                </td>
+            );
         }
-        
+
         const type = this.layout.type || 'string';
         const baseType = type.indexOf('?') > 0 ? type.substring(0, type.indexOf('?')) : type;
-        
+
         if ((baseType === 'objectId' || baseType === 'objectLink') && this.previewObject) {
             const i = type.indexOf('?');
             const params = i > 0 ? new URLSearchParams(type.substring(i + 1)) : undefined;
             const renderer = renderers[baseType](params, (_id: string) => {
-                this.previewObject!(object.id);
+                this.previewObject?.(object.id);
             });
             return renderer(object, index);
         }
-        
+
         // Otherwise use the type-based renderer with the resolved value
         return this.renderer(this.resolveValue(object), index);
     }

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

@@ -1,11 +1,11 @@
-import { ColumnLayout, ContentObjectItem } from "@vertesia/common";
-import { Table, TBody, THead } from "@vertesia/ui/core";
-import { useUITranslation } from '../../../../i18n/index.js';
-import { CheckIcon } from "lucide-react";
-import { ChangeEvent } from "react";
-import { DocumentIcon, DocumentIconSkeleton } from "../components/DocumentIcon";
-import { DocumentSelection } from "../DocumentSelectionProvider";
-import { DocumentTableColumn } from "./DocumentTableColumn";
+import type { ColumnLayout, ContentObjectItem } from '@vertesia/common';
+import { Table, TBody, THead } from '@vertesia/ui/core';
+import { useUITranslation } from '@vertesia/ui/i18n';
+import { CheckIcon } from 'lucide-react';
+import type { ChangeEvent } from 'react';
+import { DocumentIcon, DocumentIconSkeleton } from '../components/DocumentIcon';
+import type { DocumentSelection } from '../DocumentSelectionProvider';
+import type { DocumentTableColumn } from './DocumentTableColumn';
 
 interface ViewProps {
     objects: ContentObjectItem[];
@@ -15,65 +15,108 @@ interface ViewProps {
     highlightRow?: (item: ContentObjectItem) => boolean;
     previewObject?: (objectId: string) => void;
     selectedObject?: ContentObjectItem | null;
-    onSelectionChange: ((object: ContentObjectItem, ev: ChangeEvent<HTMLInputElement>) => void);
-    selection: DocumentSelection;
+    onSelectionChange: (object: ContentObjectItem, ev: ChangeEvent<HTMLInputElement>) => void;
+    selection?: DocumentSelection;
     toggleAll?: (ev: ChangeEvent<HTMLInputElement>) => void;
     columns: DocumentTableColumn[];
 }
 
-export function DocumentTableView({ objects, selection, isLoading, columns, onRowClick, highlightRow, selectedObject, toggleAll, onSelectionChange }: ViewProps) {
+export function DocumentTableView({
+    objects,
+    selection,
+    isLoading,
+    columns,
+    onRowClick,
+    highlightRow,
+    selectedObject,
+    toggleAll,
+    onSelectionChange,
+}: ViewProps) {
     const { t } = useUITranslation();
     return (
         <Table className="w-full">
             <THead>
                 <tr>
-                    {selection && <th><input type="checkbox" onChange={toggleAll} /></th>}
+                    {selection && (
+                        <th>
+                            <input type="checkbox" onChange={toggleAll} />
+                        </th>
+                    )}
                     {columns.map((col) => (
                         <th key={col.name}>{col.name}</th>
                     ))}
                 </tr>
             </THead>
             <TBody isLoading={isLoading} columns={columns.length + 1}>
-                {
-                    objects?.map((obj: ContentObjectItem) => {
-                        const isHighlighted = highlightRow?.(obj);
-                        return (
-                            <tr key={obj.id} className={`cursor-pointer hover:bg-muted group ${selectedObject?.id === obj.id ? 'bg-muted' : ''} ${isHighlighted ? 'bg-blue-50 dark:bg-blue-900/20' : ''}`} onClick={() => {
-                                onRowClick && onRowClick(obj)
-                            }}>
-                                {selection &&
-                                    <td onClick={ev => ev.stopPropagation()}>
-                                        <input checked={selection.isSelected(obj.id)} type="checkbox" className={`${!selection.isSelected(obj.id) ? 'hidden group-hover:block' : ''}`}
-                                            onChange={(ev: ChangeEvent<HTMLInputElement>) => onSelectionChange(obj, ev)} />
-                                    </td>
-                                }
-                                {columns.map((col, index) => col.render(obj, index))}
-                                <td className="w-8 text-center">
-                                    {isHighlighted && (
-                                        <CheckIcon className="size-4 text-blue-600 dark:text-blue-400 inline-block" />
-                                    )}
+                {objects?.map((obj: ContentObjectItem) => {
+                    const isHighlighted = highlightRow?.(obj);
+                    return (
+                        <tr
+                            key={obj.id}
+                            className={`cursor-pointer hover:bg-muted group ${selectedObject?.id === obj.id ? 'bg-muted' : ''} ${isHighlighted ? 'bg-blue-50 dark:bg-blue-900/20' : ''}`}
+                            onClick={() => {
+                                onRowClick?.(obj);
+                            }}
+                        >
+                            {selection && (
+                                // biome-ignore lint/a11y/useKeyWithClickEvents: stop-propagation wrapper to prevent inner checkbox clicks from triggering row activation; not a user-facing interaction.
+                                <td onClick={(ev) => ev.stopPropagation()}>
+                                    <input
+                                        checked={selection.isSelected(obj.id)}
+                                        type="checkbox"
+                                        className={`${!selection.isSelected(obj.id) ? 'hidden group-hover:block' : ''}`}
+                                        onChange={(ev: ChangeEvent<HTMLInputElement>) => onSelectionChange(obj, ev)}
+                                    />
                                 </td>
-                            </tr>
-                        )
-                    })
-                }
-                {objects.length === 0 && <tr><td colSpan={columns.length + (selection ? 1 : 0)} className="text-center">{t('store.noObjectsDragAndDrop')}</td></tr>}
+                            )}
+                            {columns.map((col, index) => col.render(obj, index))}
+                            <td className="w-8 text-center">
+                                {isHighlighted && (
+                                    <CheckIcon className="size-4 text-blue-600 dark:text-blue-400 inline-block" />
+                                )}
+                            </td>
+                        </tr>
+                    );
+                })}
+                {objects.length === 0 && (
+                    <tr>
+                        <td colSpan={columns.length + (selection ? 1 : 0)} className="text-center">
+                            {t('store.noObjectsDragAndDrop')}
+                        </td>
+                    </tr>
+                )}
             </TBody>
         </Table>
-    )
+    );
 }
 
-export function DocumentGridView({ objects, selection, isLoading, onSelectionChange, onRowClick, highlightRow, previewObject, selectedObject }: ViewProps) {
+export function DocumentGridView({
+    objects,
+    selection,
+    isLoading,
+    onSelectionChange,
+    onRowClick,
+    highlightRow,
+    previewObject,
+    selectedObject,
+}: ViewProps) {
     return (
         <>
             <DocumentIconSkeleton isLoading={isLoading} />
             <div className="w-full gap-2 grid xs:grid-cols-1 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-6 @xs:grid-cols-1 @sm:grid-cols-2 @md:grid-cols-3 @lg:grid-cols-4">
-                {
-                    objects.map((document) => (
-                        <DocumentIcon key={document.id} document={document} selection={selection} onSelectionChange={onSelectionChange} onRowClick={onRowClick} highlightRow={highlightRow} previewObject={previewObject} selectedObject={selectedObject} />
-                    ))
-                }
+                {objects.map((document) => (
+                    <DocumentIcon
+                        key={document.id}
+                        document={document}
+                        selection={selection}
+                        onSelectionChange={onSelectionChange}
+                        onRowClick={onRowClick}
+                        highlightRow={highlightRow}
+                        previewObject={previewObject}
+                        selectedObject={selectedObject}
+                    />
+                ))}
             </div>
         </>
-    )
+    );
 }

package/src/features/store/objects/layout/index.ts

@@ -1,2 +1,2 @@
-export * from "./DocumentTableColumn";
-export * from "./documentLayout";
+export * from './DocumentTableColumn';
+export * from './documentLayout';