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

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

@@ -1,37 +1,46 @@
-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 { NavLink } from "@vertesia/ui/router";
-import { useUserSession } from "@vertesia/ui/session";
-import { JSONDisplay, MarkdownRenderer, Progress, XMLViewer } from "@vertesia/ui/widgets";
-import { AlertTriangle, Copy, Download, FileSearch, SquarePen } from "lucide-react";
-import { useUITranslation } from '../../../../i18n/index.js';
-import { MagicPdfView } from "../../../magic-pdf";
-import { SimplePdfViewer } from "../../../pdf-viewer";
-import { SecureButton } from "../../../permissions/SecureButton.js";
-import { getWorkflowStatusColor, getWorkflowStatusName, isPreviewableAsPdf } from "../../../utils/index.js";
-import { PropertiesEditorModal } from "./PropertiesEditorModal";
-import { TextEditorPanel } from "./TextEditorPanel.js";
-import { useObjectText, useOfficePdfConversion, usePdfProcessingStatus } from "./useContentPanelHooks.js";
-import { useDownloadFile } from "./useDownloadFile.js";
-
-// Web-supported image formats for browser display
-const WEB_SUPPORTED_IMAGE_FORMATS = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/webp', 'image/svg+xml'];
-
-// Web-supported video formats for browser display
-const WEB_SUPPORTED_VIDEO_FORMATS = ['video/mp4', 'video/webm'];
-
-// Web-supported audio formats for browser display
-const WEB_SUPPORTED_AUDIO_FORMATS = [
-    'audio/mp4',    // M4A/AAC (official MIME type)
-    'audio/m4a',    // M4A (alternative MIME type)
-    'audio/x-m4a',  // M4A (legacy MIME type)
-    'audio/mpeg',   // MP3
-    'audio/ogg',    // Ogg Vorbis
-    'audio/wav',    // WAV
-    'audio/webm',   // WebM audio
-];
+import {
+    ContentNature,
+    type ContentObject,
+    ContentObjectStatus,
+    type DocAnalyzerProgress,
+    type DocProcessorOutputFormat,
+    type DocumentMetadata,
+    MarkdownRenditionFormat,
+    PDF_RENDITION_NAME,
+    Permission,
+    WorkflowExecutionStatus,
+} from '@vertesia/common';
+import {
+    Button,
+    Dropdown,
+    MenuItem,
+    Portal,
+    ResizableHandle,
+    ResizablePanel,
+    ResizablePanelGroup,
+    Spinner,
+    useFetch,
+    useToast,
+} from '@vertesia/ui/core';
+import { useUITranslation } from '@vertesia/ui/i18n';
+import { NavLink } from '@vertesia/ui/router';
+import { useUserSession } from '@vertesia/ui/session';
+import { JSONDisplay, Progress } from '@vertesia/ui/widgets';
+import { AlertTriangle, Copy, Download, FileSearch, SquarePen } from 'lucide-react';
+import { memo, type RefObject, useEffect, useMemo, useRef, useState } from 'react';
+import {
+    type UniversalDocumentConverter,
+    type UniversalDocumentSource,
+    UniversalDocumentViewer,
+} from '../../../document-viewer/UniversalDocumentViewer.js';
+import { MagicPdfView } from '../../../magic-pdf';
+import { AudioPanel, ImagePanel, VideoPanel } from '../../../media-viewer';
+import { SecureButton } from '../../../permissions/SecureButton.js';
+import { getWorkflowStatusColor, getWorkflowStatusName, isPreviewableAsPdf } from '../../../utils/index.js';
+import { PropertiesEditorModal } from './PropertiesEditorModal';
+import { TextEditorPanel } from './TextEditorPanel.js';
+import { useObjectText, useOfficePdfConversion, usePdfProcessingStatus } from './useContentPanelHooks.js';
+import { useDownloadFile } from './useDownloadFile.js';
 
 // ----- Type Definitions -----
 
@@ -39,7 +48,7 @@ interface TextActionsProps {
     object: ContentObject;
     text: string | undefined;
     fullText: string | undefined;
-    handleCopyContent: (content: string, type: "text" | "properties") => Promise<void>;
+    handleCopyContent: (content: string, type: 'text' | 'properties') => Promise<void>;
     textContainerRef: RefObject<HTMLDivElement | null>;
     isEditing?: boolean;
     onToggleEdit?: () => void;
@@ -54,11 +63,12 @@ interface TextPanelProps {
 }
 
 interface OfficePdfPreviewPanelProps {
+    object: ContentObject;
     pdfRendition?: { content?: { source?: string } };
     officePdfUrl?: string;
+    converters: UniversalDocumentConverter[];
     officePdfConverting: boolean;
     officePdfError?: string;
-    onConvert: () => void;
 }
 
 interface OfficePdfActionsProps {
@@ -81,8 +91,8 @@ interface MarkdownComponentProps {
  */
 const createMarkdownComponents = () => ({
     a: ({ node, ...props }: MarkdownComponentProps & { href?: string }) => {
-        const href = props.href || "";
-        if (href.includes("/store/objects/")) {
+        const href = props.href || '';
+        if (href.includes('/store/objects/')) {
             return (
                 <NavLink topLevelNav href={href} className="text-info">
                     {props.children}
@@ -91,33 +101,20 @@ const createMarkdownComponents = () => ({
         }
         return <a {...props} target="_blank" rel="noopener noreferrer" />;
     },
-    p: ({ node, ...props }: MarkdownComponentProps) => (
-        <p {...props} className="my-0" />
-    ),
-    pre: ({ node, ...props }: MarkdownComponentProps) => (
-        <pre {...props} className="my-2 p-2 rounded" />
-    ),
+    p: ({ node, ...props }: MarkdownComponentProps) => <p {...props} className="my-0" />,
+    pre: ({ node, ...props }: MarkdownComponentProps) => <pre {...props} className="my-2 p-2 rounded" />,
     code: ({ node, className, children, ...props }: MarkdownComponentProps & { className?: string }) => {
-        const match = /language-(\w+)/.exec(className || "");
+        const match = /language-(\w+)/.exec(className || '');
         const isInline = !match;
         return (
-            <code
-                {...props}
-                className={isInline ? "px-1.5 py-0.5 rounded" : "text-muted"}
-            >
+            <code {...props} className={isInline ? 'px-1.5 py-0.5 rounded' : 'text-muted'}>
                 {children}
             </code>
         );
     },
-    h1: ({ node, ...props }: MarkdownComponentProps) => (
-        <h1 {...props} className="font-bold text-2xl my-2" />
-    ),
-    h2: ({ node, ...props }: MarkdownComponentProps) => (
-        <h2 {...props} className="font-bold text-xl my-2" />
-    ),
-    h3: ({ node, ...props }: MarkdownComponentProps) => (
-        <h3 {...props} className="font-bold text-lg my-2" />
-    ),
+    h1: ({ node, ...props }: MarkdownComponentProps) => <h1 {...props} className="font-bold text-2xl my-2" />,
+    h2: ({ node, ...props }: MarkdownComponentProps) => <h2 {...props} className="font-bold text-xl my-2" />,
+    h3: ({ node, ...props }: MarkdownComponentProps) => <h3 {...props} className="font-bold text-lg my-2" />,
     li: ({ node, ...props }: MarkdownComponentProps) => <li {...props} />,
 });
 
@@ -141,14 +138,14 @@ function getContentProcessorType(object: ContentObject): string | undefined {
 function looksLikeMarkdown(text: string | undefined): boolean {
     if (!text) return false;
     return (
-        text.includes("\n# ") ||
-        text.includes("\n## ") ||
-        text.includes("\n### ") ||
-        text.includes("\n* ") ||
-        text.includes("\n- ") ||
-        text.includes("\n+ ") ||
-        text.includes("![") ||
-        text.includes("](")
+        text.includes('\n# ') ||
+        text.includes('\n## ') ||
+        text.includes('\n### ') ||
+        text.includes('\n* ') ||
+        text.includes('\n- ') ||
+        text.includes('\n+ ') ||
+        text.includes('![') ||
+        text.includes('](')
     );
 }
 
@@ -161,43 +158,39 @@ function getPanelVisibility(isVisible: boolean): string {
 }
 
 enum PanelView {
-    Text = "text",
-    Image = "image",
-    Video = "video",
-    Audio = "audio",
-    Pdf = "pdf",
-    Transcript = "transcript"
+    Text = 'text',
+    Image = 'image',
+    Video = 'video',
+    Audio = 'audio',
+    Pdf = 'pdf',
+    Transcript = 'transcript',
 }
 
 interface ContentOverviewProps {
     object: ContentObject;
     loadText?: boolean;
     refetch?: () => Promise<unknown>;
+    canEditProperties?: boolean;
 }
-export function ContentOverview({
-    object,
-    loadText,
-    refetch,
-}: ContentOverviewProps) {
+export function ContentOverview({ object, loadText, refetch, canEditProperties = true }: ContentOverviewProps) {
     const toast = useToast();
     const { t } = useUITranslation();
 
-    const handleCopyContent = async (
-        content: string,
-        type: "text" | "properties",
-    ) => {
+    const handleCopyContent = async (content: string, type: 'text' | 'properties') => {
         try {
             await navigator.clipboard.writeText(content);
             toast({
-                status: "success",
-                title: t('store.contentCopied', { type: type === "text" ? t('store.contentType') : t('store.properties') }),
+                status: 'success',
+                title: t('store.contentCopied', {
+                    type: type === 'text' ? t('store.contentType') : t('store.properties'),
+                }),
                 description: t('store.successfullyCopied', { type }),
                 duration: 2000,
             });
         } catch (err) {
             console.error(`Failed to copy ${type}:`, err);
             toast({
-                status: "error",
+                status: 'error',
                 title: t('store.copyFailed'),
                 description: t('store.failedToCopy', { type }),
                 duration: 5000,
@@ -206,23 +199,39 @@ export function ContentOverview({
     };
 
     return (
-        <>
-            <ResizablePanelGroup direction="horizontal" className='h-full'>
-                <ResizablePanel className="min-w-[100px]">
-                    <PropertiesPanel object={object} refetch={refetch ?? (() => Promise.resolve())} handleCopyContent={handleCopyContent} />
-                </ResizablePanel>
-                <ResizableHandle withHandle />
-
-                <ResizablePanel className="min-w-[100px]">
-                    <DataPanel object={object} loadText={loadText ?? false} handleCopyContent={handleCopyContent} refetch={refetch} />
-                </ResizablePanel>
-            </ResizablePanelGroup>
-
-        </>
+        <ResizablePanelGroup direction="horizontal" className="h-full">
+            <ResizablePanel defaultSize={67} className="min-w-[100px]">
+                <DataPanel
+                    object={object}
+                    loadText={loadText ?? false}
+                    handleCopyContent={handleCopyContent}
+                    refetch={refetch}
+                />
+            </ResizablePanel>
+            <ResizableHandle withHandle />
+            <ResizablePanel defaultSize={33} className="min-w-[100px]">
+                <PropertiesPanel
+                    object={object}
+                    refetch={refetch ?? (() => Promise.resolve())}
+                    handleCopyContent={handleCopyContent}
+                    canEditProperties={canEditProperties}
+                />
+            </ResizablePanel>
+        </ResizablePanelGroup>
     );
 }
 
-function PropertiesPanel({ object, refetch, handleCopyContent }: { object: ContentObject, refetch: () => Promise<unknown>, handleCopyContent: (content: string, type: "text" | "properties") => Promise<void> }) {
+function PropertiesPanel({
+    object,
+    refetch,
+    handleCopyContent,
+    canEditProperties,
+}: {
+    object: ContentObject;
+    refetch: () => Promise<unknown>;
+    handleCopyContent: (content: string, type: 'text' | 'properties') => Promise<void>;
+    canEditProperties: boolean;
+}) {
     const { t } = useUITranslation();
     const [viewCode, setViewCode] = useState(false);
     const [isPropertiesModalOpen, setPropertiesModalOpen] = useState(false);
@@ -241,7 +250,7 @@ function PropertiesPanel({ object, refetch, handleCopyContent }: { object: Conte
                 <div className="flex justify-between items-center px-2">
                     <div className="flex items-center gap-1 bg-muted mb-2 p-1 rounded">
                         <Button
-                            variant={`${viewCode ? "ghost" : "primary"}`}
+                            variant={`${viewCode ? 'ghost' : 'primary'}`}
                             size="sm"
                             alt={t('store.previewProperties')}
                             onClick={() => setViewCode(!viewCode)}
@@ -249,7 +258,7 @@ function PropertiesPanel({ object, refetch, handleCopyContent }: { object: Conte
                             Properties
                         </Button>
                         <Button
-                            variant={`${viewCode ? "primary" : "ghost"}`}
+                            variant={`${viewCode ? 'primary' : 'ghost'}`}
                             size="sm"
                             alt={t('store.viewInJsonFormat')}
                             onClick={() => setViewCode(!viewCode)}
@@ -264,37 +273,30 @@ function PropertiesPanel({ object, refetch, handleCopyContent }: { object: Conte
                                 size="sm"
                                 title="Copy properties"
                                 onClick={() =>
-                                    handleCopyContent(
-                                        JSON.stringify(
-                                            object.properties,
-                                            null,
-                                            2,
-                                        ),
-                                        "properties",
-                                    )
+                                    handleCopyContent(JSON.stringify(object.properties, null, 2), 'properties')
                                 }
                             >
                                 <Copy className="size-4" />
                             </Button>
                         )}
-                        <Button
-                            variant="ghost"
-                            size="sm"
-                            onClick={handleOpenPropertiesModal}
-                            title="Edit properties"
-                            className="flex items-center gap-2"
-                        >
-                            <SquarePen className="size-4" />
-                        </Button>
+                        {canEditProperties && (
+                            <SecureButton
+                                permission={Permission.content_write}
+                                variant="ghost"
+                                size="sm"
+                                onClick={handleOpenPropertiesModal}
+                                title="Edit properties"
+                                className="flex items-center gap-2"
+                            >
+                                <SquarePen className="size-4" />
+                            </SecureButton>
+                        )}
                     </div>
                 </div>
 
                 {object.properties ? (
                     <div className="flex-1 min-h-0 px-2">
-                        <JSONDisplay
-                            value={object.properties}
-                            viewCode={viewCode}
-                        />
+                        <JSONDisplay value={object.properties} viewCode={viewCode} />
                     </div>
                 ) : (
                     <div className="flex-1 min-h-0 px-2">
@@ -312,7 +314,18 @@ function PropertiesPanel({ object, refetch, handleCopyContent }: { object: Conte
     );
 }
 
-function DataPanel({ object, loadText, handleCopyContent, refetch }: { object: ContentObject, loadText: boolean, handleCopyContent: (content: string, type: "text" | "properties") => Promise<void>, refetch?: () => Promise<unknown> }) {
+function DataPanel({
+    object,
+    loadText,
+    handleCopyContent,
+    refetch,
+}: {
+    object: ContentObject;
+    loadText: boolean;
+    handleCopyContent: (content: string, type: 'text' | 'properties') => Promise<void>;
+    refetch?: () => Promise<unknown>;
+}) {
+    const { client } = useUserSession();
     const { t } = useUITranslation();
     const isImage = object?.metadata?.type === ContentNature.Image;
     const isVideo = object?.metadata?.type === ContentNature.Video;
@@ -324,7 +337,7 @@ function DataPanel({ object, loadText, handleCopyContent, refetch }: { object: C
 
     // Check if PDF rendition exists for Office documents
     const metadata = object.metadata as DocumentMetadata;
-    const pdfRendition = metadata?.renditions?.find(r => r.name === PDF_RENDITION_NAME);
+    const pdfRendition = metadata?.renditions?.find((r) => r.name === PDF_RENDITION_NAME);
 
     // Determine initial panel view
     const getInitialView = (): PanelView => {
@@ -351,7 +364,9 @@ function DataPanel({ object, loadText, handleCopyContent, refetch }: { object: C
         !isCreatedOrProcessing &&
         !object.is_locked &&
         object.user_permissions?.can_write !== false &&
-        (object.content.type.startsWith('text/') || object.content.type === 'application/json' || object.content.type === 'application/xml')
+        (object.content.type.startsWith('text/') ||
+            object.content.type === 'application/json' ||
+            object.content.type === 'application/xml')
     );
 
     // Use custom hooks for text loading, PDF processing, and Office conversion
@@ -364,9 +379,10 @@ function DataPanel({ object, loadText, handleCopyContent, refetch }: { object: C
     } = useObjectText(object.id, object.text, loadText);
 
     // Only poll while the active panel can actually surface processing progress.
-    const shouldPollProgress = (isPdf || isPreviewableAsPdfDoc)
-        && isCreatedOrProcessing
-        && (currentPanel === PanelView.Text || currentPanel === PanelView.Pdf);
+    const shouldPollProgress =
+        (isPdf || isPreviewableAsPdfDoc) &&
+        isCreatedOrProcessing &&
+        (currentPanel === PanelView.Text || currentPanel === PanelView.Pdf);
     const {
         progress: pdfProgress,
         status: pdfStatus,
@@ -379,9 +395,40 @@ function DataPanel({ object, loadText, handleCopyContent, refetch }: { object: C
         pdfUrl: officePdfUrl,
         isConverting: officePdfConverting,
         error: officePdfError,
-        triggerConversion: triggerOfficePdfConversion,
     } = useOfficePdfConversion(object.id, isPreviewableAsPdfDoc);
 
+    const officePdfConverters = useMemo<UniversalDocumentConverter[]>(
+        () => [
+            {
+                id: 'office-pdf-rendition',
+                target: 'pdf',
+                canConvert: ({ contentType, extension }) =>
+                    isPreviewableAsPdfDoc ||
+                    (contentType ? isPreviewableAsPdf(contentType) : false) ||
+                    ['doc', 'docx', 'ppt', 'pptx'].includes(extension),
+                convert: async () => {
+                    const response = await client.objects.getRendition(object.id, {
+                        format: MarkdownRenditionFormat.pdf,
+                        generate_if_missing: true,
+                        sign_url: true,
+                        block_on_generation: true,
+                    });
+
+                    if (response.status === 'found' && response.renditions?.length) {
+                        return {
+                            url: response.renditions[0],
+                            contentType: 'application/pdf',
+                            fileName: `${object.name || 'document'}.pdf`,
+                        };
+                    }
+
+                    return null;
+                },
+            },
+        ],
+        [client, isPreviewableAsPdfDoc, object.id, object.name],
+    );
+
     // Load text once processing completes without triggering a full object refetch
     // (which would flash the page-level loading spinner).
     useEffect(() => {
@@ -391,9 +438,14 @@ function DataPanel({ object, loadText, handleCopyContent, refetch }: { object: C
     }, [processingComplete, pdfStatus, reloadText]);
 
     // Show processing panel when workflow is running (for both PDFs and Office documents)
-    const showProcessingPanel = (isPdf || isPreviewableAsPdfDoc) && isCreatedOrProcessing && !processingComplete && pdfStatus === WorkflowExecutionStatus.RUNNING;
+    const showProcessingPanel =
+        (isPdf || isPreviewableAsPdfDoc) &&
+        isCreatedOrProcessing &&
+        !processingComplete &&
+        pdfStatus === WorkflowExecutionStatus.RUNNING;
     const showPdfPreviewPanel = currentPanel === PanelView.Pdf && !showProcessingPanel;
-    const showPdfProcessingPanel = showProcessingPanel && (currentPanel === PanelView.Text || currentPanel === PanelView.Pdf);
+    const showPdfProcessingPanel =
+        showProcessingPanel && (currentPanel === PanelView.Text || currentPanel === PanelView.Pdf);
     const keepPdfPreviewMounted = hasVisitedPdfPanel && !showProcessingPanel;
 
     const textContainerRef = useRef<HTMLDivElement | null>(null);
@@ -403,78 +455,75 @@ function DataPanel({ object, loadText, handleCopyContent, refetch }: { object: C
             <div className="flex justify-between items-center px-2 shrink-0">
                 <div className="flex items-center gap-2 mb-2">
                     <div className="flex items-center gap-1 bg-muted p-1 rounded">
-                        {isImage &&
+                        {isImage && (
                             <Button
-                                variant={currentPanel === PanelView.Image ? "primary" : "ghost"}
+                                variant={currentPanel === PanelView.Image ? 'primary' : 'ghost'}
                                 size="sm"
                                 alt={t('store.viewImage')}
                                 onClick={() => setCurrentPanel(PanelView.Image)}
                             >
                                 Image
                             </Button>
-                        }
-                        {isVideo &&
+                        )}
+                        {isVideo && (
                             <Button
-                                variant={currentPanel === PanelView.Video ? "primary" : "ghost"}
+                                variant={currentPanel === PanelView.Video ? 'primary' : 'ghost'}
                                 size="sm"
                                 alt={t('store.viewVideo')}
                                 onClick={() => setCurrentPanel(PanelView.Video)}
                             >
                                 Video
                             </Button>
-                        }
-                        {isAudio &&
+                        )}
+                        {isAudio && (
                             <Button
-                                variant={currentPanel === PanelView.Audio ? "primary" : "ghost"}
+                                variant={currentPanel === PanelView.Audio ? 'primary' : 'ghost'}
                                 size="sm"
                                 alt={t('store.viewAudio')}
                                 onClick={() => setCurrentPanel(PanelView.Audio)}
                             >
                                 Audio
                             </Button>
-                        }
-                        {hasTranscript &&
+                        )}
+                        {hasTranscript && (
                             <Button
-                                variant={currentPanel === PanelView.Transcript ? "primary" : "ghost"}
+                                variant={currentPanel === PanelView.Transcript ? 'primary' : 'ghost'}
                                 size="sm"
                                 alt={t('store.viewTranscript')}
                                 onClick={() => setCurrentPanel(PanelView.Transcript)}
                             >
                                 Transcript
                             </Button>
-                        }
+                        )}
                         <Button
-                            variant={currentPanel === PanelView.Text ? "primary" : "ghost"}
+                            variant={currentPanel === PanelView.Text ? 'primary' : 'ghost'}
                             size="sm"
                             alt={t('store.viewText')}
                             onClick={() => setCurrentPanel(PanelView.Text)}
                         >
                             Text
                         </Button>
-                        {isPdf &&
+                        {isPdf && (
                             <Button
-                                variant={currentPanel === PanelView.Pdf ? "primary" : "ghost"}
+                                variant={currentPanel === PanelView.Pdf ? 'primary' : 'ghost'}
                                 size="sm"
                                 alt={t('store.viewPdf')}
                                 onClick={() => setCurrentPanel(PanelView.Pdf)}
                             >
                                 PDF
                             </Button>
-                        }
+                        )}
                         {isPreviewableAsPdfDoc && (
                             <Button
-                                variant={currentPanel === PanelView.Pdf ? "primary" : "ghost"}
+                                variant={currentPanel === PanelView.Pdf ? 'primary' : 'ghost'}
                                 size="sm"
                                 alt={t('store.viewAsPdf')}
                                 onClick={() => {
                                     setCurrentPanel(PanelView.Pdf);
-                                    if (!pdfRendition && !officePdfUrl && !officePdfConverting) {
-                                        triggerOfficePdfConversion();
-                                    }
                                 }}
                                 disabled={officePdfConverting}
                             >
-                                {officePdfConverting ? <Spinner size="sm" /> : "PDF"}
+                                {officePdfConverting ? <Spinner size="sm" /> : 'PDF'}
                             </Button>
                         )}
                     </div>
@@ -493,11 +542,7 @@ function DataPanel({ object, loadText, handleCopyContent, refetch }: { object: C
                     />
                 )}
                 {currentPanel === PanelView.Pdf && isPreviewableAsPdfDoc && (pdfRendition || officePdfUrl) && (
-                    <OfficePdfActions
-                        object={object}
-                        pdfRendition={pdfRendition}
-                        officePdfUrl={officePdfUrl}
-                    />
+                    <OfficePdfActions object={object} pdfRendition={pdfRendition} officePdfUrl={officePdfUrl} />
                 )}
             </div>
             {currentPanel === PanelView.Image && (
@@ -528,11 +573,12 @@ function DataPanel({ object, loadText, handleCopyContent, refetch }: { object: C
             {isPreviewableAsPdfDoc && keepPdfPreviewMounted && (
                 <div className={getPanelVisibility(showPdfPreviewPanel)}>
                     <OfficePdfPreviewPanel
+                        object={object}
                         pdfRendition={pdfRendition}
                         officePdfUrl={officePdfUrl}
+                        converters={officePdfConverters}
                         officePdfConverting={officePdfConverting}
                         officePdfError={officePdfError}
-                        onConvert={triggerOfficePdfConversion}
                     />
                 </div>
             )}
@@ -541,14 +587,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}
@@ -566,7 +612,7 @@ function DataPanel({ object, loadText, handleCopyContent, refetch }: { object: C
                     onSaved={() => {
                         setIsEditing(false);
                         reloadText();
-                        refetch?.();
+                        void refetch?.();
                     }}
                 />
             )}
@@ -574,72 +620,73 @@ function DataPanel({ object, loadText, handleCopyContent, refetch }: { object: C
     );
 }
 
-function TextActions({
-    object,
-    text,
-    fullText,
-    handleCopyContent,
-    onToggleEdit,
-    canEdit,
-}: TextActionsProps) {
-    const { client } = useUserSession();
+function TextActions({ object, text, fullText, handleCopyContent, onToggleEdit, canEdit }: TextActionsProps) {
+    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 &&
-        content.type &&
-        content.type === "text/markdown";
+    const isMarkdown = content?.type && content.type === 'text/markdown';
 
     // 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;
 
         // Show immediate feedback
         toast({
-            status: "info",
+            status: 'info',
             title: `Preparing ${format.toUpperCase()}`,
             description: t('store.renderingDocument'),
             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",
+            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();
         e.stopPropagation();
         if (!fullText) return;
         // Determine file extension based on content processor type
-        let ext = "txt";
-        let mimeType = "text/plain";
-        if (contentProcessorType === "xml") {
-            ext = "xml";
-            mimeType = "text/xml";
-        } else if (contentProcessorType === "markdown" || isMarkdown) {
-            ext = "md";
-            mimeType = "text/markdown";
+        let ext = 'txt';
+        let mimeType = 'text/plain';
+        if (contentProcessorType === 'xml') {
+            ext = 'xml';
+            mimeType = 'text/xml';
+        } else if (contentProcessorType === 'markdown' || isMarkdown) {
+            ext = 'md';
+            mimeType = 'text/markdown';
         }
         const blob = new Blob([fullText], { type: mimeType });
         const url = URL.createObjectURL(blob);
-        const filename = `${object.name || "document"}.${ext}`;
+        const filename = `${object.name || 'document'}.${ext}`;
 
         // Use the download attribute with an anchor, but avoid triggering navigation
-        const link = document.createElement("a");
+        const link = document.createElement('a');
         link.href = url;
         link.download = filename;
-        link.style.display = "none";
+        link.style.display = 'none';
         // Temporarily remove from DOM event flow
         setTimeout(() => {
             link.click();
@@ -648,400 +695,148 @@ function TextActions({
     };
 
     return (
-        <>
-            <div className="h-[41px] text-lg font-semibold flex justify-between items-center px-2">
-                <div className="flex items-center gap-2">
-                    {fullText && (
-                        <>
-                            <Button variant="ghost" size="sm" title="Copy text" onClick={() => handleCopyContent(fullText, "text")}>
-                                <Copy className="size-4" />
-                            </Button>
-                            {canEdit && onToggleEdit && (
-                                <SecureButton
-                                    permission={Permission.content_write}
-                                    variant="ghost"
-                                    size="sm"
-                                    onClick={onToggleEdit}
-                                    title={t('store.editText')}
-                                    className="flex items-center gap-2"
-                                >
-                                    <SquarePen className="size-4" />
-                                </SecureButton>
-                            )}
-                            <Button variant="ghost" size="sm" title="Download text" onClick={handleDownloadText}>
-                                <Download className="size-4" />
-                            </Button>
-                        </>
-                    )}
-                    {isMarkdown && text && (
-                        <>
-                            <Button
+        <div className="h-[41px] text-lg font-semibold flex justify-between items-center px-2">
+            <div className="flex items-center gap-2">
+                {fullText && (
+                    <>
+                        <Button
+                            variant="ghost"
+                            size="sm"
+                            title="Copy text"
+                            onClick={() => handleCopyContent(fullText, 'text')}
+                        >
+                            <Copy className="size-4" />
+                        </Button>
+                        {canEdit && onToggleEdit && (
+                            <SecureButton
+                                permission={Permission.content_write}
                                 variant="ghost"
                                 size="sm"
-                                onClick={handleExportDocx}
-                                disabled={isDownloading}
+                                onClick={onToggleEdit}
+                                title={t('store.editText')}
                                 className="flex items-center gap-2"
                             >
-                                {isDownloading ? (
-                                    <Spinner size="sm" />
-                                ) : (
-                                    <Download className="size-4" />
-                                )}
-                                DOCX
-                            </Button>
+                                <SquarePen className="size-4" />
+                            </SecureButton>
+                        )}
+                    </>
+                )}
+                {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"
-                                onClick={handleExportPdf}
-                                disabled={isDownloading}
+                                disabled={!text}
                                 className="flex items-center gap-2"
+                                alt="download"
                             >
-                                {isDownloading ? (
-                                    <Spinner size="sm" />
-                                ) : (
-                                    <Download className="size-4" />
-                                )}
-                                PDF
+                                <Download className="size-4" />
                             </Button>
-                        </>
-                    )}
-                </div>
+                        }
+                    >
+                        {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>
     );
 }
 
-const TextPanel = memo(({
-    object,
-    text,
-    isTextCropped,
-    textContainerRef,
-}: TextPanelProps) => {
+const TextPanel = memo(({ object, text, isTextCropped, textContainerRef }: TextPanelProps) => {
     const { t } = useUITranslation();
-    const content = object.content;
     const isCreatedOrProcessing = isCreatedOrProcessingStatus(object?.status);
-
-    // Check content processor type for XML
     const contentProcessorType = getContentProcessorType(object);
-    const isXml = contentProcessorType === "xml";
+    const isXml = contentProcessorType === 'xml';
 
     // Check if content type is markdown or plain text
     const isMarkdownOrText =
-        content &&
-        content.type &&
-        (content.type === "text/markdown" || content.type === "text/plain");
+        object.content?.type && (object.content.type === 'text/markdown' || object.content.type === 'text/plain');
 
     // Render as markdown if it's markdown/text type OR if text looks like markdown (but not if XML)
     const shouldRenderAsMarkdown = !isXml && (isMarkdownOrText || looksLikeMarkdown(text));
+    const source: UniversalDocumentSource = {
+        id: object.id,
+        title: object.name,
+        fileName: object.content?.name || object.name,
+        contentType: isXml ? 'text/xml' : shouldRenderAsMarkdown ? 'text/markdown' : object.content?.type,
+        content: text,
+        sourcePath: object.content?.source,
+    };
 
-    return (
-        text ? (
-            <>
-                {isTextCropped && (
-                    <div className="px-2 py-2 bg-attention/10 border-l-4 border-attention mx-2 mb-2 rounded">
-                        <div className="flex items-center gap-2 text-attention">
-                            <AlertTriangle className="size-4" />
-                            <span className="text-sm font-semibold">{t('store.showingFirst128K')}</span>
-                        </div>
-                    </div>
-                )}
-                <div
-                    className={`max-w-7xl px-2 h-full overflow-auto`}
-                    ref={textContainerRef}
-                >
-                    {isXml ? (
-                        <div className="px-4 py-2">
-                            <XMLViewer xml={text} collapsible />
-                        </div>
-                    ) : shouldRenderAsMarkdown ? (
-                        <div className="vprose prose-sm p-1">
-                            <MarkdownRenderer components={createMarkdownComponents()}>
-                                {text}
-                            </MarkdownRenderer>
-                        </div>
-                    ) : (
-                        <pre className="text-wrap bg-muted text-muted p-2">
-                            {text}
-                        </pre>
-                    )}
-                </div>
-            </>
-        ) :
-            <div className="px-2">
-                <div>{isCreatedOrProcessing ? "Extracting content..." : "No content"}</div>
-            </div>
-    );
-});
-
-function ImagePanel({ object }: { object: ContentObject }) {
-    const { client } = useUserSession();
-    const [imageUrl, setImageUrl] = useState<string>();
-
-    const content = object.content;
-    const isImage = object.metadata && object.metadata.type === ContentNature.Image;
-
-    useEffect(() => {
-        if (isImage) {
-            // Reset image URL when object changes
-            setImageUrl(undefined);
-
-            const loadImage = async () => {
-                const isOriginalWebSupported = content?.type && WEB_SUPPORTED_IMAGE_FORMATS.includes(content.type);
-
-                try {
-                    const rendition = await client.objects.getRendition(object.id, {
-                        format: ImageRenditionFormat.jpeg,
-                        generate_if_missing: false,
-                        sign_url: true,
-                    });
-
-                    if (rendition.status === "found" && rendition.renditions?.length) {
-                        // Use rendition URL directly
-                        setImageUrl(rendition.renditions[0]);
-                    } else if (isOriginalWebSupported) {
-                        // Fall back to original file only if web-supported
-                        const downloadUrl = await client.files.getDownloadUrl(object.content.source!);
-                        setImageUrl(downloadUrl.url);
-                    }
-                } catch (error) {
-                    // Fall back to original file only if web-supported
-                    if (isOriginalWebSupported) {
-                        const downloadUrl = await client.files.getDownloadUrl(object.content.source!);
-                        setImageUrl(downloadUrl.url);
-                    }
-                }
-            };
-
-            loadImage();
-        }
-    }, [object.id, isImage, content?.type, content?.source, client]);
-
-    return (
-        <div className="mb-4 px-2">
-            {imageUrl ? (
-                <img
-                    src={imageUrl}
-                    alt={object.name}
-                    className="w-full object-contain"
-                />
-            ) : (
-                <Spinner size="md" />
-            )}
-        </div>
-    );
-}
-
-function VideoPanel({ object }: { object: ContentObject }) {
-    const { t } = useUITranslation();
-    const { client } = useUserSession();
-    const [videoUrl, setVideoUrl] = useState<string>();
-    const [posterUrl, setPosterUrl] = useState<string>();
-    const [isLoading, setIsLoading] = useState<boolean>(true);
-
-    const content = object.content;
-    const isVideo = object.metadata?.type === ContentNature.Video;
-
-    // Check if there are mp4 or webm renditions available in metadata
-    const metadata = object.metadata as VideoMetadata;
-    const renditions = metadata?.renditions || [];
-
-    // Find mp4 or webm rendition by mime type, preferring mp4
-    const webRendition = renditions.find(r => r.content.type === 'video/mp4') ||
-        renditions.find(r => r.content.type === 'video/webm');
-
-    // Check if original file is web-compatible
-    const isOriginalWebSupported = content?.type && WEB_SUPPORTED_VIDEO_FORMATS.includes(content.type);
-
-    // Get poster
-    const poster = renditions.find(r => r.name === POSTER_RENDITION_NAME);
-
-    // Reset state when object changes
-    useEffect(() => {
-        setVideoUrl(undefined);
-        setPosterUrl(undefined);
-        setIsLoading(true);
-    }, [object.id]);
-
-    useEffect(() => {
-        const loadPoster = async () => {
-            if (poster?.content?.source) {
-                try {
-                    const response = await client.files.getDownloadUrl(poster.content.source);
-                    setPosterUrl(response.url);
-                } catch (error) {
-                    console.error("Failed to load poster image", error);
-                }
-            }
-        };
-        loadPoster();
-    }, [poster, client]);
-
-    useEffect(() => {
-        if (isVideo && (webRendition?.content?.source || isOriginalWebSupported)) {
-            const loadVideoUrl = async () => {
-                try {
-                    let downloadUrl;
-                    if (webRendition?.content?.source) {
-                        // Use rendition if available
-                        downloadUrl = await client.files.getDownloadUrl(webRendition.content.source);
-                    } else if (isOriginalWebSupported && content?.source) {
-                        // Fall back to original file if web-supported
-                        downloadUrl = await client.files.getDownloadUrl(content.source);
-                    }
-                    if (downloadUrl) {
-                        setVideoUrl(downloadUrl.url);
-                    }
-                } catch (error) {
-                    console.error("Failed to get video URL", error);
-                } finally {
-                    setIsLoading(false);
-                }
-            };
-            loadVideoUrl();
-        } else {
-            setIsLoading(false);
-        }
-    }, [isVideo, webRendition, isOriginalWebSupported, content?.source, client]);
-
-    return (
-        <div className="mb-4 px-2 w-full h-full">
-            {!webRendition && !isOriginalWebSupported ? (
-                <div className="flex justify-center items-center h-[400px] text-muted">
-                    <div className="text-center">
-                        <p>{t('store.noVideoRendition')}</p>
-                        <p className="text-sm mt-2">{t('store.videoFormatRequired')}</p>
-                    </div>
-                </div>
-            ) : isLoading ? (
-                <div className="flex justify-center items-center h-[400px]">
-                    <Spinner size="md" />
-                </div>
-            ) : videoUrl ? (
-                <video
-                    src={videoUrl}
-                    poster={posterUrl}
-                    controls
-                    className={`w-full h-full object-contain`}
-                >
-                    Your browser does not support the video tag.
-                </video>
-            ) : (
-                <div className="flex justify-center items-center h-[400px] text-muted">
-                    Failed to load video
-                </div>
-            )}
-        </div>
-    );
-}
-
-function AudioPanel({ object }: { object: ContentObject }) {
-    const { t } = useUITranslation();
-    const { client } = useUserSession();
-    const [audioUrl, setAudioUrl] = useState<string>();
-    const [isLoading, setIsLoading] = useState<boolean>(true);
-
-    const content = object.content;
-    const isAudio = object.metadata?.type === ContentNature.Audio;
-
-    // Check if there are audio renditions available in metadata
-    const metadata = object.metadata as AudioMetadata;
-    const renditions = metadata?.renditions || [];
-
-    // Find audio rendition by name (AUDIO_RENDITION_NAME = "Audio")
-    const audioRendition = renditions.find(r => r.name === AUDIO_RENDITION_NAME);
-
-    // Check if original file is web-compatible
-    const isOriginalWebSupported = content?.type && WEB_SUPPORTED_AUDIO_FORMATS.includes(content.type);
-
-    // Reset state when object changes
-    useEffect(() => {
-        setAudioUrl(undefined);
-        setIsLoading(true);
-    }, [object.id]);
-
-    useEffect(() => {
-        if (isAudio && (audioRendition?.content?.source || isOriginalWebSupported)) {
-            const loadAudioUrl = async () => {
-                try {
-                    let downloadUrl;
-                    if (audioRendition?.content?.source) {
-                        // Use rendition if available
-                        downloadUrl = await client.files.getDownloadUrl(audioRendition.content.source);
-                    } else if (isOriginalWebSupported && content?.source) {
-                        // Fall back to original file if web-supported
-                        downloadUrl = await client.files.getDownloadUrl(content.source);
-                    }
-                    if (downloadUrl) {
-                        setAudioUrl(downloadUrl.url);
-                    }
-                } catch (error) {
-                    console.error("Failed to get audio URL", error);
-                } finally {
-                    setIsLoading(false);
-                }
-            };
-            loadAudioUrl();
-        } else {
-            setIsLoading(false);
-        }
-    }, [isAudio, audioRendition, isOriginalWebSupported, content?.source, client]);
-
-    return (
-        <div className="mb-4 px-2">
-            {!audioRendition && !isOriginalWebSupported ? (
-                <div className="flex justify-center items-center h-[200px] text-muted">
-                    <div className="text-center">
-                        <p>{t('store.noAudioRendition')}</p>
-                        <p className="text-sm mt-2">{t('store.audioFormatRequired')}</p>
+    return text ? (
+        <>
+            {isTextCropped && (
+                <div className="px-2 py-2 bg-attention/10 border-s-4 border-attention mx-2 mb-2 rounded">
+                    <div className="flex items-center gap-2 text-attention">
+                        <AlertTriangle className="size-4" />
+                        <span className="text-sm font-semibold">{t('store.showingFirst128K')}</span>
                     </div>
                 </div>
-            ) : isLoading ? (
-                <div className="flex justify-center items-center h-[200px]">
-                    <Spinner size="md" />
-                </div>
-            ) : audioUrl ? (
-                <div className="flex flex-col items-center gap-4">
-                    <audio
-                        src={audioUrl}
-                        controls
-                        className="w-full max-w-2xl"
-                    >
-                        Your browser does not support the audio tag.
-                    </audio>
-                    {metadata?.duration && (
-                        <div className="text-sm text-muted">
-                            Duration: {formatDuration(metadata.duration)}
-                        </div>
-                    )}
-                </div>
-            ) : (
-                <div className="flex justify-center items-center h-[200px] text-muted">
-                    Failed to load audio
-                </div>
             )}
+            <div className={`max-w-7xl px-2 h-full overflow-auto`} ref={textContainerRef}>
+                <UniversalDocumentViewer
+                    source={source}
+                    className="h-full"
+                    bodyClassName="overflow-auto"
+                    markdownComponents={createMarkdownComponents()}
+                />
+            </div>
+        </>
+    ) : (
+        <div className="px-2">
+            <div>{isCreatedOrProcessing ? 'Extracting content...' : 'No content'}</div>
         </div>
     );
-}
-
-function formatDuration(seconds: number): string {
-    const hours = Math.floor(seconds / 3600);
-    const minutes = Math.floor((seconds % 3600) / 60);
-    const secs = Math.floor(seconds % 60);
-
-    if (hours > 0) {
-        return `${hours}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
-    }
-    return `${minutes}:${secs.toString().padStart(2, '0')}`;
-}
+});
 
-function TranscriptPanel({ object, handleCopyContent }: { object: ContentObject, handleCopyContent: (content: string, type: "text" | "properties") => Promise<void> }) {
+function TranscriptPanel({
+    object,
+    handleCopyContent,
+}: {
+    object: ContentObject;
+    handleCopyContent: (content: string, type: 'text' | 'properties') => Promise<void>;
+}) {
     const { t } = useUITranslation();
     const transcript = object.transcript;
     const transcriptText = transcript?.text;
     const segments = transcript?.segments;
 
     // Build full text from segments if text is not available
-    const fullText = transcriptText || (segments ? segments.map(s => s.text).join(' ') : '');
+    const fullText = transcriptText || (segments ? segments.map((s) => s.text).join(' ') : '');
 
     const formatTimestamp = (seconds: number): string => {
         const hours = Math.floor(seconds / 3600);
@@ -1062,7 +857,7 @@ function TranscriptPanel({ object, handleCopyContent }: { object: ContentObject,
                         variant="ghost"
                         size="sm"
                         title="Copy transcript"
-                        onClick={() => handleCopyContent(fullText, "text")}
+                        onClick={() => handleCopyContent(fullText, 'text')}
                     >
                         <Copy className="size-4" />
                     </Button>
@@ -1072,6 +867,7 @@ function TranscriptPanel({ object, handleCopyContent }: { object: ContentObject,
                 {segments && segments.length > 0 ? (
                     <div className="space-y-2">
                         {segments.map((segment, idx) => (
+                            // biome-ignore lint/suspicious/noArrayIndexKey: list order is stable for this render
                             <div key={idx} className="flex gap-3 text-sm">
                                 <span className="text-muted font-mono text-xs shrink-0 pt-0.5">
                                     {formatTimestamp(segment.start)}
@@ -1082,9 +878,7 @@ function TranscriptPanel({ object, handleCopyContent }: { object: ContentObject,
                         ))}
                     </div>
                 ) : transcriptText ? (
-                    <pre className="text-wrap bg-muted text-muted p-2 whitespace-pre-wrap">
-                        {transcriptText}
-                    </pre>
+                    <pre className="text-wrap bg-muted text-muted p-2 whitespace-pre-wrap">{transcriptText}</pre>
                 ) : (
                     <div className="text-muted">{t('store.noTranscriptAvailable')}</div>
                 )}
@@ -1098,18 +892,13 @@ function PdfActions({ object }: { object: ContentObject }) {
 
     // Check if PDF has been processed (content_processor.type is xml or markdown)
     const contentProcessorType = getContentProcessorType(object);
-    const hasPdfAnalysis = contentProcessorType === "xml" || contentProcessorType === "markdown";
+    const hasPdfAnalysis = contentProcessorType === 'xml' || contentProcessorType === 'markdown';
 
     if (!hasPdfAnalysis) return null;
 
     return (
         <>
-            <Button
-                variant="ghost"
-                size="sm"
-                onClick={() => setPdfPreviewOpen(true)}
-                title="Side by side view"
-            >
+            <Button variant="ghost" size="sm" onClick={() => setPdfPreviewOpen(true)} title="Side by side view">
                 <FileSearch className="size-4" />
             </Button>
             {isPdfPreviewOpen && (
@@ -1121,11 +910,7 @@ function PdfActions({ object }: { object: ContentObject }) {
     );
 }
 
-function OfficePdfActions({
-    object,
-    pdfRendition,
-    officePdfUrl,
-}: OfficePdfActionsProps) {
+function OfficePdfActions({ object, pdfRendition, officePdfUrl }: OfficePdfActionsProps) {
     const { client } = useUserSession();
     const toast = useToast();
     const { t } = useUITranslation();
@@ -1141,7 +926,7 @@ function OfficePdfActions({
                 const response = await client.files.getDownloadUrl(
                     pdfRendition.content.source,
                     `${object.name || 'document'}.pdf`,
-                    'attachment'
+                    'attachment',
                 );
                 downloadUrl = response.url;
             }
@@ -1165,13 +950,7 @@ function OfficePdfActions({
 
     return (
         <div className="flex items-center gap-2">
-            <Button
-                variant="ghost"
-                size="sm"
-                onClick={handleDownloadPdf}
-                disabled={isDownloading}
-                title="Download PDF"
-            >
+            <Button variant="ghost" size="sm" onClick={handleDownloadPdf} disabled={isDownloading} title="Download PDF">
                 {isDownloading ? <Spinner size="sm" /> : <Download className="size-4" />}
             </Button>
         </div>
@@ -1179,12 +958,17 @@ function OfficePdfActions({
 }
 
 function PdfPreviewPanel({ object }: { object: ContentObject }) {
+    const source: UniversalDocumentSource = {
+        id: object.id,
+        title: object.name,
+        fileName: object.content?.name || object.name,
+        contentType: object.content?.type,
+        sourcePath: object.content?.source,
+    };
+
     return (
-        <div className='h-full'>
-            <SimplePdfViewer
-                object={object}
-                className="h-full"
-            />
+        <div className="h-full">
+            <UniversalDocumentViewer source={source} className="h-full" />
         </div>
     );
 }
@@ -1194,11 +978,12 @@ function PdfPreviewPanel({ object }: { object: ContentObject }) {
  * Handles the various states: converting, error, showing PDF.
  */
 function OfficePdfPreviewPanel({
+    object,
     pdfRendition,
     officePdfUrl,
+    converters,
     officePdfConverting,
     officePdfError,
-    onConvert,
 }: OfficePdfPreviewPanelProps) {
     const { t } = useUITranslation();
     if (officePdfConverting) {
@@ -1220,47 +1005,80 @@ function OfficePdfPreviewPanel({
     }
 
     if (pdfRendition?.content?.source) {
+        const source: UniversalDocumentSource = {
+            id: object.id,
+            title: object.name,
+            fileName: `${object.name || 'document'}.pdf`,
+            contentType: 'application/pdf',
+            sourcePath: pdfRendition.content.source,
+        };
+
         return (
-            <div className='h-full'>
-                <SimplePdfViewer source={pdfRendition.content.source} className="h-full" />
+            <div className="h-full">
+                <UniversalDocumentViewer source={source} className="h-full" />
             </div>
         );
     }
 
     if (officePdfUrl) {
+        const source: UniversalDocumentSource = {
+            id: object.id,
+            title: object.name,
+            fileName: `${object.name || 'document'}.pdf`,
+            contentType: 'application/pdf',
+            url: officePdfUrl,
+        };
+
         return (
-            <div className='h-full'>
-                <SimplePdfViewer url={officePdfUrl} className="h-full" />
+            <div className="h-full">
+                <UniversalDocumentViewer source={source} className="h-full" />
             </div>
         );
     }
 
+    const source: UniversalDocumentSource = {
+        id: object.id,
+        title: object.name,
+        fileName: object.content?.name || object.name,
+        contentType: object.content?.type,
+        sourcePath: object.content?.source,
+    };
+
     return (
-        <div className="flex flex-col justify-center items-center flex-1 gap-2">
-            <Button onClick={onConvert}>
-                Convert to PDF
-            </Button>
+        <div className="h-full">
+            <UniversalDocumentViewer source={source} converters={converters} className="h-full" />
         </div>
     );
 }
 
-function PdfProcessingPanel({ progress, status, outputFormat }: { progress?: DocAnalyzerProgress, status?: WorkflowExecutionStatus, outputFormat?: DocProcessorOutputFormat }) {
+function PdfProcessingPanel({
+    progress,
+    status,
+    outputFormat,
+}: {
+    progress?: DocAnalyzerProgress;
+    status?: WorkflowExecutionStatus;
+    outputFormat?: DocProcessorOutputFormat;
+}) {
     const { t } = useUITranslation();
     const statusColor = getWorkflowStatusColor(status);
     const statusName = getWorkflowStatusName(status);
 
     // Show detailed progress (tables, images, visuals) for XML processing
-    const isXmlProcessing = outputFormat === "xml";
+    const isXmlProcessing = outputFormat === 'xml';
 
     // Ensure percent is a valid number (handle undefined and NaN from division by zero)
-    const percent = progress?.percent != null && !isNaN(progress.percent) ? progress.percent : 0;
+    const percent = progress?.percent != null && !Number.isNaN(progress.percent) ? progress.percent : 0;
 
     return (
         <div className="px-4 py-4">
             {progress && (
                 <div className="space-y-2">
                     <div className="flex flex-col gap-1">
-                        <ProgressLine name={isXmlProcessing ? "Analyze Layouts" : "Analyze Page"} progress={progress.pages} />
+                        <ProgressLine
+                            name={isXmlProcessing ? 'Analyze Layouts' : 'Analyze Page'}
+                            progress={progress.pages}
+                        />
                         {isXmlProcessing && (
                             <>
                                 <ProgressLine name="Extract Tables" progress={progress.tables} />
@@ -1270,8 +1088,7 @@ function PdfProcessingPanel({ progress, status, outputFormat }: { progress?: Doc
                         )}
                     </div>
                     <div className="pt-2 text-sm text-muted">
-                        Progress: {percent}%
-                        <span className="px-2">&bull;</span>
+                        Progress: {percent}%<span className="px-2">&bull;</span>
                         <span className={statusColor}>{statusName}</span>
                         {progress.started_at && (
                             <>
@@ -1293,11 +1110,13 @@ function PdfProcessingPanel({ progress, status, outputFormat }: { progress?: Doc
     );
 }
 
-function ProgressLine({ name, progress }: { name: string, progress: { total: number; processed: number } }) {
+function ProgressLine({ name, progress }: { name: string; progress: { total: number; processed: number } }) {
     return (
         <div className="flex gap-2 text-sm">
             <span className="text-muted min-w-36">{name}:</span>
-            <span>{progress.processed} of {progress.total}</span>
+            <span>
+                {progress.processed} of {progress.total}
+            </span>
         </div>
     );
 }