@vertesia/ui 0.60.0 → 0.61.0

package/src/features/layout/GenericPageNavHeader.tsx

@@ -0,0 +1,48 @@
+import clsx from 'clsx';
+import { ReactElement, ReactNode } from 'react';
+
+import { ChevronRight, Info } from 'lucide-react';
+import { VTooltip } from '@vertesia/ui/core';
+
+interface GenericPageNavHeaderProps {
+    title: string | ReactElement;
+    description?: string | ReactElement;
+    actions?: ReactNode | ReactNode[];
+    breadcrumbs?: ReactElement[]
+    isCompact?: boolean
+    children?: ReactNode
+    className?: string
+}
+
+export function GenericPageNavHeader({ className, children, title, description, actions, breadcrumbs, isCompact = false }: GenericPageNavHeaderProps) {
+    return (
+        <div className={clsx(isCompact ? 'pb-0' : 'pb-2', 'p-4 flex flex-col', className)}>
+            <div className='flex items-start gap-4'>
+                <div className="w-full flex place-content-between h-auto min-h-8 flex-col items-start">
+                    <nav className="flex-1 flex justify-start text-xs">
+                        {breadcrumbs?.map((breadcrumb, index) => {
+                            return (
+                                <div className="flex items-center text-muted" key={index}>
+                                    {breadcrumb}
+                                    {index < breadcrumbs.length - 1 && <ChevronRight className="w-3.5 h-3.5" />}
+                                </div>
+                            )
+                        })}
+                    </nav>
+                    <div className='flex gap-2 items-center'>
+                        <h1 className="text-xl font-semibold break-all">{title}</h1>
+                        {
+                            description &&
+                            <VTooltip
+                                description={description}>
+                                <Info className="size-4 text-muted" />
+                            </VTooltip>
+                        }
+                    </div>
+                </div>
+                <div className="flex gap-x-4 shrink-0">{actions}</div>
+            </div>
+            {children && <div className="w-full flex items-center">{children}</div>}
+        </div>
+    )
+}

package/src/features/layout/NotFoundView.tsx

@@ -0,0 +1,11 @@
+
+interface NotFoundViewProps {
+}
+export function NotFoundView({ }: NotFoundViewProps) {
+    return (
+        <div className="text-center pt-32">
+            <h1 className="text-3xl font-bold text-red-500">404</h1>
+            <p className="text-2xl">Page Not Found</p>
+        </div>
+    )
+}

package/src/features/layout/index.ts

@@ -0,0 +1,2 @@
+export * from "./GenericPageNavHeader";
+export * from "./NotFoundView";

package/src/features/magic-pdf/DownloadPopover.tsx

@@ -0,0 +1,32 @@
+import { ContentObject } from "@vertesia/common";
+import { useUserSession } from "@vertesia/ui/session";
+import { Popover } from "@vertesia/ui/widgets";
+import { CloudDownload } from "lucide-react";
+import { getResourceUrl } from "./PdfPageProvider";
+
+interface DownloadPopoverProps {
+    object: ContentObject;
+}
+export function DownloadPopover({ object }: DownloadPopoverProps) {
+    const { client } = useUserSession()
+    const onDownload = (name: string) => {
+        getResourceUrl(client, object.id, name).then(url => window.open(url, '_blank'));
+    }
+    return (
+        <div className="absolute bottom-[58px] right-[20px] w-[36px] h-[36px] cursor-pointer text-indigo-400 border-indigo-400 hover:border-indigo-500 hover:text-indigo-500 border-2 rounded-full shadow-xs flex items-center justify-center">
+            <Popover strategy='absolute' placement='top-end' zIndex={100} offset={20}>
+                <Popover.Trigger click>
+                    <CloudDownload className='size-6' />
+
+                </Popover.Trigger>
+                <Popover.Content>
+                    <div className="rounded-md shadow-md border border-gray-100 bg-white dark:bg-slate-50 dark:border-slate-100 min-w-[200px] flex flex-col divide-y">
+                        <button className="p-2 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-100" onClick={() => onDownload("annotated.pdf")}>annotated.pdf</button>
+                        <button className="p-2 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-100" onClick={() => onDownload("document.xml")}>document.xml</button>
+                        <button className="p-2 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-100" onClick={() => onDownload("analyzed-pages.json")}>analyzed-pages.json</button>
+                    </div>
+                </Popover.Content>
+            </Popover>
+        </div>
+    )
+}

package/src/features/magic-pdf/MagicPdfView.tsx

@@ -0,0 +1,102 @@
+import { ContentObject } from "@vertesia/common";
+import { ErrorBox, useFetch } from "@vertesia/ui/core";
+import { useUserSession } from "@vertesia/ui/session";
+import { X } from "lucide-react";
+import { useRef, useState } from "react";
+import { DownloadPopover } from "./DownloadPopover";
+import { PageSlider } from "./PageSlider";
+import { PdfPageProvider } from "./PdfPageProvider";
+import { TextPageView } from "./TextPageView";
+import { ViewType } from "./types";
+import { useResizeEW } from "./useResizeOnDrag";
+
+
+interface MagicPdfViewProps {
+    objectId: string;
+    onClose?: () => void;
+}
+export function MagicPdfView({ objectId, onClose }: MagicPdfViewProps) {
+    const { client } = useUserSession();
+
+    const { data: object, error } = useFetch(() => client.store.objects.retrieve(objectId, "+text"), [objectId]);
+
+    if (error) {
+        return <ErrorBox title='Fetching document failed'>{error.message}</ErrorBox>
+    }
+
+    return object ? (
+        <div className='fixed inset-0 bg-white dark:bg-slate-700 z-50 flex items-center justify-center'>
+            <PdfPageProvider object={object}>
+                <MagicPdfViewImpl object={object} onClose={onClose} />
+            </PdfPageProvider >
+        </div>
+    ) : "Loading..."
+
+}
+
+interface _MagicPdfViewProps {
+    object: ContentObject;
+    onClose?: () => void;
+}
+function MagicPdfViewImpl({ object, onClose }: _MagicPdfViewProps) {
+    const [viewType, setViewType] = useState<ViewType>("xml");
+    const [pageNumber, setPageNumber] = useState(1);
+    const handler = useRef<HTMLDivElement>(null);
+    const left = useRef<HTMLDivElement>(null);
+    const right = useRef<HTMLDivElement>(null);
+
+    useResizeEW({
+        handler, left, right
+    });
+    return (
+        <>
+            <div ref={left} className={`absolute top-0 left-0 bottom-0 w-[50%] bg-gray-100 dark:bg-slate-800 flex items-stretch justify-stretch py-2`}>
+                <PageSlider className="flex-1" currentPage={pageNumber} onChange={setPageNumber} />
+                <div ref={handler} className='w-[2px] p-[2px] m-0 bg-slate-300 cursor-ew-resize'></div>
+            </div>
+            <div ref={right} className={`absolute top-0 left-[50%] right-0 bottom-0 flex items-stretch justify-stretch overflow-auto p-2`}>
+                <TextPageView pageNumber={pageNumber} viewType={viewType} />
+            </div>
+            <DownloadPopover object={object} />
+            <ContentSwitcher type={viewType} onSwitch={setViewType} />
+            {!!onClose &&
+                <div className="absolute top-6 right-7 w-9 h-9 cursor-pointer text-red-400 border-red-400 hover:border-red-500 hover:text-red-500 border-2 rounded-full shadow-xs flex items-center justify-center"
+                    onClick={onClose}>
+                    <X className='size-6' />
+                </div>
+            }
+        </>
+    )
+}
+
+
+
+interface ContentSwitcherProps {
+    type?: ViewType;
+    onSwitch: (type: ViewType) => void;
+}
+function ContentSwitcher({ type = "xml", onSwitch }: ContentSwitcherProps) {
+    const _onSwitch = () => {
+        if (type === "xml") {
+            onSwitch("json");
+        } else if (type === "json") {
+            onSwitch("xml");
+        }
+    }
+    return (
+        <div className="absolute bottom-[16px] right-[20px] w-[36px] h-[36px] cursor-pointer text-indigo-400 border-indigo-400 hover:border-indigo-500 hover:text-indigo-500 border-2 rounded-full shadow-xs flex items-center justify-center"
+            onClick={_onSwitch}>
+            {type === "xml" && JSON}
+            {type === "json" && XML}
+        </div>
+    )
+
+}
+
+const JSON = <svg width="16px" height="16px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M6 2.984V2h-.09c-.313 0-.616.062-.909.185a2.33 2.33 0 0 0-.775.53 2.23 2.23 0 0 0-.493.753v.001a3.542 3.542 0 0 0-.198.83v.002a6.08 6.08 0 0 0-.024.863c.012.29.018.58.018.869 0 .203-.04.393-.117.572v.001a1.504 1.504 0 0 1-.765.787 1.376 1.376 0 0 1-.558.115H2v.984h.09c.195 0 .38.04.556.121l.001.001c.178.078.329.184.455.318l.002.002c.13.13.233.285.307.465l.001.002c.078.18.117.368.117.566 0 .29-.006.58-.018.869-.012.296-.004.585.024.87v.001c.033.283.099.558.197.824v.001c.106.273.271.524.494.753.223.23.482.407.775.53.293.123.596.185.91.185H6v-.984h-.09c-.2 0-.387-.038-.563-.115a1.613 1.613 0 0 1-.457-.32 1.659 1.659 0 0 1-.309-.467c-.074-.18-.11-.37-.11-.573 0-.228.003-.453.011-.672.008-.228.008-.45 0-.665a4.639 4.639 0 0 0-.055-.64 2.682 2.682 0 0 0-.168-.609A2.284 2.284 0 0 0 3.522 8a2.284 2.284 0 0 0 .738-.955c.08-.192.135-.393.168-.602.033-.21.051-.423.055-.64.008-.22.008-.442 0-.666-.008-.224-.012-.45-.012-.678a1.47 1.47 0 0 1 .877-1.354 1.33 1.33 0 0 1 .563-.121H6zm4 10.032V14h.09c.313 0 .616-.062.909-.185.293-.123.552-.3.775-.53.223-.23.388-.48.493-.753v-.001c.1-.266.165-.543.198-.83v-.002c.028-.28.036-.567.024-.863-.012-.29-.018-.58-.018-.869 0-.203.04-.393.117-.572v-.001a1.502 1.502 0 0 1 .765-.787 1.38 1.38 0 0 1 .558-.115H14v-.984h-.09c-.196 0-.381-.04-.557-.121l-.001-.001a1.376 1.376 0 0 1-.455-.318l-.002-.002a1.415 1.415 0 0 1-.307-.465v-.002a1.405 1.405 0 0 1-.118-.566c0-.29.006-.58.018-.869a6.174 6.174 0 0 0-.024-.87v-.001a3.537 3.537 0 0 0-.197-.824v-.001a2.23 2.23 0 0 0-.494-.753 2.331 2.331 0 0 0-.775-.53 2.325 2.325 0 0 0-.91-.185H10v.984h.09c.2 0 .387.038.562.115.174.082.326.188.457.32.127.134.23.29.309.467.074.18.11.37.11.573 0 .228-.003.452-.011.672-.008.228-.008.45 0 .665.004.222.022.435.055.64.033.214.089.416.168.609a2.285 2.285 0 0 0 .738.955 2.285 2.285 0 0 0-.738.955 2.689 2.689 0 0 0-.168.602c-.033.21-.051.423-.055.64a9.15 9.15 0 0 0 0 .666c.008.224.012.45.012.678a1.471 1.471 0 0 1-.877 1.354 1.33 1.33 0 0 1-.563.121H10z" />
+</svg>
+
+const XML = <svg width="16px" height="16px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+    <path d="M4.708 5.578L2.061 8.224l2.647 2.646-.708.708-3-3V7.87l3-3 .708.708zm7-.708L11 5.578l2.647 2.646L11 10.87l.708.708 3-3V7.87l-3-3zM4.908 13l.894.448 5-10L9.908 3l-5 10z" />
+</svg>

package/src/features/magic-pdf/PageSlider.tsx

@@ -0,0 +1,112 @@
+import { Center } from "@vertesia/ui/core";
+import clsx from "clsx";
+import { AtSignIcon, ChevronsDown, ChevronsUp, ImageIcon, InfoIcon } from "lucide-react";
+import { useRef, useState } from "react";
+import { usePdfPagesInfo } from "./PdfPageProvider";
+
+enum ImageType {
+    default,
+    instrumented,
+    annotated,
+}
+
+interface PageSliderProps {
+    currentPage: number;
+    onChange: (pageNumber: number) => void;
+    className?: string;
+}
+export function PageSlider({ className, currentPage, onChange }: PageSliderProps) {
+    const [imageType, setImageType] = useState<ImageType>(ImageType.default);
+    const ref = useRef<HTMLDivElement>(null);
+    const { urls, annotatedUrls, instrumentedUrls } = usePdfPagesInfo();
+    const goPrev = () => {
+        if (currentPage > 1) {
+            onChange(currentPage - 1);
+            if (ref.current) {
+                ref.current.querySelector(`div[data-index="${currentPage - 1}"]`)?.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'end',
+                    inline: 'center'
+                });
+            }
+        }
+    }
+    const goNext = () => {
+        if (currentPage < urls.length) {
+            onChange(currentPage + 1);
+            if (ref.current) {
+                ref.current.querySelector(`div[data-index="${currentPage + 1}"]`)?.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'end',
+                    inline: 'center'
+                });
+            }
+        }
+
+    }
+
+    const actualUrls = imageType === ImageType.instrumented ? instrumentedUrls :
+        (imageType === ImageType.annotated ? annotatedUrls : urls);
+
+    return (
+        <div ref={ref} className={clsx('flex flex-col items-stretch gap-y-2', className)}>
+            <div className="flex h-5 items-center justify-center relative">
+                <button className={BTN_CLASS}
+                    onClick={goPrev}>
+                    <ChevronsUp className='w-5 h-5' />
+                </button>
+                <div className="absolute right-3 flex gap-x-1">
+                    <button className={getRadioButtonClass(ImageType.default, imageType)}
+                        onClick={() => setImageType(ImageType.default)}
+                    ><ImageIcon className="w-5 h-5 mt-1" /></button>
+                    <button className={getRadioButtonClass(ImageType.instrumented, imageType)}
+                        onClick={() => setImageType(ImageType.instrumented)}
+                    ><InfoIcon className="w-5 h-5 mt-1" /></button>
+                    <button className={getRadioButtonClass(ImageType.annotated, imageType)}
+                        onClick={() => setImageType(ImageType.annotated)}
+                    ><AtSignIcon className="w-5 h-5 mt-1" /></button>
+                </div>
+            </div>
+            <div className='flex flex-col items-center gap-2 flex-1 overflow-y-auto px-2'>
+                {actualUrls.map((url, index) => <PageThumbnail key={index} url={url}
+                    currentPage={currentPage} pageNumber={index + 1}
+                    onSelect={() => onChange(index + 1)} />)}
+            </div>
+            <div className="flex h-5 items-center justify-center relative">
+                <button className={BTN_CLASS}
+                    onClick={goNext}>
+                    <ChevronsDown className='size-5' />
+                </button>
+            </div>
+        </div>
+    )
+}
+
+interface PageThumbnailProps {
+    url: string,
+    pageNumber: number;
+    currentPage: number;
+    onSelect: () => void;
+}
+function PageThumbnail({ url, pageNumber, currentPage, onSelect }: PageThumbnailProps) {
+    return (
+        <div className="p-2 hover:bg-gray-200 dark:hover:bg-slate-600 rounded-md" data-index={pageNumber - 1}>
+            <div className={clsx('relative border-[2px] cursor-pointer', pageNumber === currentPage ? "border-blue-500 dark:border-pink-400" : "border-gray-300")}
+                onClick={onSelect}>
+                <img src={url} alt={`Page ${pageNumber}`} />
+            </div >
+            <Center className="text-sm text-gray-500 dark:text-gray-400 pt-1 font-semibold align">{pageNumber}</Center>
+        </div>
+    )
+}
+
+
+const BTN_CLASS = "cursor-pointer text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-500 hover:font-semibold";
+
+function getRadioButtonClass(type: ImageType, currentType: ImageType) {
+    if (type === currentType) {
+        return '${BTN_CLASS} text-pink-600';
+    } else {
+        return `${BTN_CLASS}`;
+    }
+}

package/src/features/magic-pdf/PdfPageProvider.tsx

@@ -0,0 +1,229 @@
+import { useUserSession } from "@vertesia/ui/session";
+import { VertesiaClient } from "@vertesia/client";
+import {
+    ContentObject,
+    DocumentMetadata,
+    GetFileUrlResponse,
+} from "@vertesia/common";
+import React, { createContext, useEffect, useState } from "react";
+
+const DEFAULT_PAGE_COUNT = 10;
+const ADVANCED_PROCESSING_PREFIX = "magic-pdf";
+
+interface PdfPagesInfo {
+    count: number;
+    urls: string[];
+    annotatedUrls: string[];
+    instrumentedUrls: string[];
+    layoutProvider: PageLayoutProvider;
+    xml: string;
+    xmlPages: string[];
+}
+
+class PageLayoutProvider {
+    layoutUrls: string[] = [];
+    cache: string[];
+    constructor(public totalPages: number) {
+        this.cache = new Array<string>(totalPages);
+    }
+    async loadUrls(vertesia: VertesiaClient, objectId: string) {
+        const layoutPromises: Promise<GetFileUrlResponse>[] = [];
+        for (let i = 0; i < this.totalPages; i++) {
+            layoutPromises.push(getLayoutUrlForPage(vertesia, objectId, i + 1));
+        }
+        const layoutUrls = await Promise.all(layoutPromises);
+        this.layoutUrls = layoutUrls.map((r) => r.url);
+    }
+    async getPageLayout(page: number) {
+        const index = page - 1;
+        let content = this.cache[index];
+        if (content === undefined) {
+            const url = this.layoutUrls[index];
+            content = await fetch(url, { method: "GET" }).then((r) => {
+                if (r.ok) {
+                    return r.text();
+                } else {
+                    throw new Error(
+                        "Failed to fetch json layout: " + r.statusText,
+                    );
+                }
+            });
+            this.cache[index] = content;
+        }
+        return content;
+    }
+}
+
+const PdfPageContext = createContext<PdfPagesInfo | undefined>(undefined);
+
+interface PdfPageProviderProps {
+    object: ContentObject;
+    children: React.ReactNode;
+}
+export function PdfPageProvider({ children, object }: PdfPageProviderProps) {
+    const { client } = useUserSession();
+    const [info, setInfo] = useState<PdfPagesInfo>();
+    useEffect(() => {
+        const page_count =
+            (object.metadata as DocumentMetadata).page_count ||
+            DEFAULT_PAGE_COUNT;
+        getPdfPagesInfo(client, object, page_count).then(setInfo);
+    }, [object.id]);
+
+    return (
+        info && (
+            <PdfPageContext.Provider value={info}>
+                {children}
+            </PdfPageContext.Provider>
+        )
+    );
+}
+
+function getBasePath(objectId: string) {
+    return `${ADVANCED_PROCESSING_PREFIX}/${objectId}`;
+}
+
+function getPageImagePath(objectId: string, pageNumber: number, ext = ".jpeg") {
+    return `${getBasePath(objectId)}/pages/page-${pageNumber}${ext}`;
+}
+
+function getPageAnnotatedImagePath(
+    objectId: string,
+    pageNumber: number,
+    ext = ".jpeg",
+) {
+    return `${getBasePath(objectId)}/pages/page-${pageNumber}-annotated${ext}`;
+}
+
+function getPageInstrumentedImagePath(
+    objectId: string,
+    pageNumber: number,
+    ext = ".jpeg",
+) {
+    return `${getBasePath(objectId)}/pages/page-${pageNumber}.instrumented${ext}`;
+}
+
+function getLayoutJsonPath(objectId: string, pageNumber: number) {
+    return `${getBasePath(objectId)}/pages/page-${pageNumber}.layout.json`;
+}
+
+export function getResourceUrl(
+    vertesia: VertesiaClient,
+    objectId: string,
+    name: string,
+): Promise<string> {
+    return vertesia.files
+        .getDownloadUrl(`${getBasePath(objectId)}/${name}`)
+        .then((r) => r.url);
+}
+
+function getImageUrlForPage(
+    vertesia: VertesiaClient,
+    objectId: string,
+    pageNumber: number,
+): Promise<GetFileUrlResponse> {
+    return vertesia.files.getDownloadUrl(
+        getPageImagePath(objectId, pageNumber),
+    );
+}
+
+function getAnnotatedImageUrlForPage(
+    vertesia: VertesiaClient,
+    objectId: string,
+    pageNumber: number,
+): Promise<GetFileUrlResponse> {
+    return vertesia.files.getDownloadUrl(
+        getPageAnnotatedImagePath(objectId, pageNumber),
+    );
+}
+
+function getInstrumentedImageUrlForPage(
+    vertesia: VertesiaClient,
+    objectId: string,
+    pageNumber: number,
+): Promise<GetFileUrlResponse> {
+    return vertesia.files.getDownloadUrl(
+        getPageInstrumentedImagePath(objectId, pageNumber),
+    );
+}
+
+function getLayoutUrlForPage(
+    vertesia: VertesiaClient,
+    objectId: string,
+    pageNumber: number,
+): Promise<GetFileUrlResponse> {
+    return vertesia.files.getDownloadUrl(
+        getLayoutJsonPath(objectId, pageNumber),
+    );
+}
+
+async function getPdfPagesInfo(
+    vertesia: VertesiaClient,
+    object: ContentObject,
+    page_count: number,
+): Promise<PdfPagesInfo> {
+    const imageUrlPromises: Promise<GetFileUrlResponse>[] = [];
+    for (let i = 0; i < page_count; i++) {
+        imageUrlPromises.push(getImageUrlForPage(vertesia, object.id, i + 1));
+    }
+    const imageUrls = await Promise.all(imageUrlPromises);
+
+    const annotatedImageUrlPromises: Promise<GetFileUrlResponse>[] = [];
+    for (let i = 0; i < page_count; i++) {
+        annotatedImageUrlPromises.push(
+            getAnnotatedImageUrlForPage(vertesia, object.id, i + 1),
+        );
+    }
+    const annotatedImageUrls = await Promise.all(annotatedImageUrlPromises);
+
+    const instrumentedImageUrlPromises: Promise<GetFileUrlResponse>[] = [];
+    for (let i = 0; i < page_count; i++) {
+        instrumentedImageUrlPromises.push(
+            getInstrumentedImageUrlForPage(vertesia, object.id, i + 1),
+        );
+    }
+    const instrumentedImageUrls = await Promise.all(
+        instrumentedImageUrlPromises,
+    );
+
+    const layoutProvider = new PageLayoutProvider(page_count);
+    await layoutProvider.loadUrls(vertesia, object.id);
+
+    const xml = object.text ? cleanXml(object.text) : "";
+
+    return {
+        count: page_count,
+        urls: imageUrls.map((r) => r.url),
+        annotatedUrls: annotatedImageUrls.map((r) => r.url),
+        instrumentedUrls: instrumentedImageUrls.map((r) => r.url),
+        layoutProvider,
+        xml,
+        xmlPages: object.text ? extractXmlPages(xml) : [],
+    };
+}
+
+export function usePdfPagesInfo() {
+    const context = React.useContext(PdfPageContext);
+    if (!context) {
+        throw new Error(
+            "usePdfPagesInfo must be used within a PdfPageProvider",
+        );
+    }
+    return context;
+}
+
+function extractXmlPages(xml: string): string[] {
+    // Parse the XML string
+    const doc = new DOMParser().parseFromString(cleanXml(xml), "text/xml");
+    const pages = doc.getElementsByTagName("page");
+    const serializer = new XMLSerializer();
+    return Array.from(pages).map((p) => serializer.serializeToString(p));
+}
+
+function cleanXml(xml: string) {
+    const cleanedXML = xml
+        // eslint-disable-next-line no-control-regex
+        .replace(/[\x00-\x08\x0B\x0C\x0E-\x1F\x7F]/g, "")
+        .replace(/<\?xml.*?\?>/g, "");
+    return cleanedXML;
+}

package/src/features/magic-pdf/TextPageView.tsx

@@ -0,0 +1,65 @@
+import { JSONCode } from "@vertesia/ui/widgets";
+import { Theme, XMLViewer } from '@vertesia/ui/widgets';
+import { useEffect, useLayoutEffect, useState } from "react";
+import { usePdfPagesInfo } from "./PdfPageProvider";
+import { ViewType } from "./types";
+
+
+const darkTheme: Theme = {
+    attributeKeyColor: '#FFD700',
+    attributeValueColor: '#FF4500',
+    tagColor: '#87CEFA',
+    textColor: '#00FF00',
+    separatorColor: '#FFD700',
+    commentColor: "#BEBEBE",
+    cdataColor: "#33CC66",
+}
+
+interface TextPageViewProps {
+    pageNumber: number;
+    viewType: ViewType;
+}
+export function TextPageView({ viewType, pageNumber }: TextPageViewProps) {
+    return viewType === "json" ? <JsonPageLayoutView pageNumber={pageNumber} /> : <XmlPageView pageNumber={pageNumber} />
+}
+
+interface XmlPageViewProps {
+    pageNumber: number;
+}
+function XmlPageView({ pageNumber }: XmlPageViewProps) {
+    const [theme, setTheme] = useState<Theme>();
+    const { xmlPages: pages } = usePdfPagesInfo();
+    useLayoutEffect(() => {
+        const media = window.matchMedia('(prefers-color-scheme: dark)');
+        const onMediaChange = (event: MediaQueryListEvent) => {
+            setTheme(event.matches ? darkTheme : undefined);
+        };
+        media.addEventListener('change', onMediaChange);
+        media.matches && setTheme(darkTheme);
+        return () => {
+            media.removeEventListener('change', onMediaChange);
+        }
+    }, []);
+    return (
+        <div className="px-4 py-2">
+            <XMLViewer xml={pages[pageNumber - 1]} collapsible theme={theme} />
+        </div>
+    )
+}
+
+interface JsonPageLayoutViewProps {
+    pageNumber: number;
+}
+function JsonPageLayoutView({ pageNumber }: JsonPageLayoutViewProps) {
+    const [content, setContent] = useState<any>();
+    const { layoutProvider } = usePdfPagesInfo();
+    useEffect(() => {
+        layoutProvider.getPageLayout(pageNumber).then(content => setContent(content ? JSON.parse(content) : undefined)).catch(err => {
+            console.error(err);
+            setContent(undefined);
+        });
+    }, [pageNumber]);
+    return (
+        content && <JSONCode className="w-full" data={content} />
+    )
+}

package/src/features/magic-pdf/index.ts

@@ -0,0 +1 @@
+export * from "./MagicPdfView";

package/src/features/magic-pdf/types.ts

@@ -0,0 +1 @@
+export type ViewType = "xml" | "json";

package/src/features/magic-pdf/useResizeOnDrag.ts

@@ -0,0 +1,42 @@
+import { RefObject, useEffect } from "react";
+
+interface ResizeOnDragOptions {
+    handler: RefObject<HTMLElement | null | undefined>;
+    left: RefObject<HTMLElement | null | undefined>;
+    right: RefObject<HTMLElement | null | undefined>;
+}
+
+export function useResizeEW(opts: ResizeOnDragOptions) {
+
+    useEffect(() => {
+        if (opts.handler.current && opts.left.current && opts.right.current) {
+            const handler = opts.handler.current;
+            const left = opts.left.current;
+            const right = opts.right.current;
+            const onMouseDown = (e: MouseEvent) => {
+                let x = e.clientX;
+                let baseLW = left.offsetWidth;
+                let baseRL = right.offsetLeft;
+                const onMouseMove = (e: MouseEvent) => {
+                    const dx = e.clientX - x;
+                    left.style.width = `${baseLW + dx}px`;
+                    right.style.left = `${baseRL + dx}px`;
+                    (e.target as HTMLDivElement).classList.add('resizing');
+                }
+                const onMouseUp = (e: MouseEvent) => {
+                    (e.target as HTMLDivElement).classList.remove('resizing');
+                    onMouseMove(e);
+                    document.removeEventListener('mousemove', onMouseMove);
+                    document.removeEventListener('mouseup', onMouseUp);
+                }
+                document.addEventListener('mousemove', onMouseMove);
+                document.addEventListener('mouseup', onMouseUp);
+            }
+            handler.addEventListener('mousedown', onMouseDown);
+            return () => {
+                handler.removeEventListener('mousedown', onMouseDown);
+            }
+        }
+    }, [opts.handler.current, opts.left.current, opts.right.current]);
+
+}