@vertesia/ui 0.24.0-dev.202601221707

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

@@ -0,0 +1,109 @@
+import { useEffect, useRef, useState } from "react";
+
+import { clsx } from "clsx";
+import { RefreshCw } from "lucide-react";
+
+import { DocumentsFacetsNav } from "../../../facets";
+import { DocumentTable } from "../DocumentTable";
+import { useDocumentSearch, useWatchDocumentSearchFacets, useWatchDocumentSearchResult } from "../search/DocumentSearchContext";
+import { DocumentSearchProvider } from "../search/DocumentSearchProvider";
+import { ContentDispositionButton } from "./ContentDispositionButton";
+
+import { ColumnLayout, ContentObjectItem } from "@vertesia/common";
+import { Button, ErrorBox, Spinner, useIntersectionObserver } from "@vertesia/ui/core";
+
+const layout: ColumnLayout[] = [
+    { "name": "Name", "field": "properties.title", "type": "string", "fallback": "name" },
+    { "name": "Type", "field": "type.name", "type": "string" },
+    { "name": "Status", "field": "status", "type": "string" },
+    { "name": "Created At", "field": "created_at", "type": "date" }
+];
+
+const LAST_DISPLAYED_VIEW = "vertesia.content_store.lastDisplayedView"
+
+interface SelectDocumentProps {
+    onChange: (value: ContentObjectItem) => void;
+    type?: string;
+    mimeType?: string;
+}
+export function SelectDocument({ onChange }: Readonly<SelectDocumentProps>) {
+    const onRowClick = (selected: ContentObjectItem) => {
+        onChange(selected || undefined);
+    }
+
+    return (
+        <DocumentSearchProvider>
+            <SelectDocumentImpl onRowClick={onRowClick} />
+        </DocumentSearchProvider>
+    )
+}
+
+interface SelectDocumentImplProps {
+    onRowClick: (selected: ContentObjectItem) => void;
+}
+function SelectDocumentImpl({ onRowClick }: Readonly<SelectDocumentImplProps>) {
+    const [isReady, setIsReady] = useState(false);
+    const [isGridView, setIsGridView] = useState(localStorage.getItem(LAST_DISPLAYED_VIEW) === "grid");
+    const { search, isLoading, error, objects, hasMore } = useWatchDocumentSearchResult();
+
+    const loadMoreRef = useRef<HTMLDivElement>(null);
+    useIntersectionObserver(loadMoreRef, () => {
+        if (isReady && hasMore && !isLoading) {
+            setIsReady(false);
+            search.loadMore(true)
+                .finally(() => {
+                    setIsReady(true);
+                });
+        }
+    }, { threshold: 0.1, deps: [isReady, hasMore, isLoading] });
+
+    useEffect(() => {
+        search.search()
+            .finally(() => {
+                setIsReady(true);
+            });
+    }, []);
+
+    const facets = useWatchDocumentSearchFacets();
+    const facetSearch = useDocumentSearch();
+
+    const handleRefetch = () => {
+        setIsReady(false);
+        search.search().then(() => setIsReady(true));
+    }
+
+    if (error) {
+        return <ErrorBox title="Search failed">{error.message}</ErrorBox>
+    }
+
+    return (
+        <div className="flex flex-col gap-2 h-full w-full">
+            <div className="flex justify-between items-center flex-shrink-0">
+                <DocumentsFacetsNav facets={facets} search={facetSearch} />
+                <div className="flex items-center gap-2">
+                    <Button variant="outline" onClick={handleRefetch} alt="Refresh">
+                        <RefreshCw size={16} />
+                    </Button>
+                    <ContentDispositionButton onUpdate={setIsGridView} />
+                </div>
+            </div>
+            <div className="@container flex-1 overflow-y-auto">
+                {/* Documents Display Grid or Table */}
+                <DocumentTable objects={objects || []} isLoading={false} layout={layout} onRowClick={onRowClick} isGridView={isGridView} />
+
+                {/* Intersection observer target */}
+                <div ref={loadMoreRef} className="h-4 w-full" />
+
+                {/* Loading spinner */}
+                <div
+                    className={clsx(
+                        "bg-white dark:bg-gray-800 opacity-80 absolute inset-0 z-50 flex justify-center items-center rounded",
+                        isLoading ? "block" : "hidden"
+                    )}
+                >
+                    <Spinner size="xl" />
+                </div>
+            </div>
+        </div>
+    )
+}

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

@@ -0,0 +1,20 @@
+import { ContentObjectItem } from "@vertesia/common";
+import { VModal, VModalBody, VModalTitle } from "@vertesia/ui/core";
+import { SelectDocument } from "./SelectDocument";
+
+interface SelectDocumentModalProps {
+    value?: string;
+    isOpen?: boolean
+    // if value is undefined then do not save changes
+    onClose: (value?: ContentObjectItem) => void;
+}
+export function SelectDocumentModal({ isOpen, onClose }: SelectDocumentModalProps) {
+    return (
+        <VModal onClose={() => onClose()} isOpen={!!isOpen} className='min-w-[60vw]'>
+            <VModalTitle>Select Content</VModalTitle>
+            <VModalBody className='pt-0 overflow-y-auto max-h-[80vh] min-h-[80vh]'>
+                {isOpen && <SelectDocument onChange={onClose} />}
+            </VModalBody>
+        </VModal>
+    )
+}

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

@@ -0,0 +1,143 @@
+import { useEffect, useState } from 'react';
+
+import { ComplexSearchQuery, ProjectConfiguration, SearchTypes, SupportedEmbeddingTypes } from '@vertesia/common';
+import { Button, Checkbox, Input, Modal, ModalBody, ModalFooter, ModalTitle, NumberInput, useToast } from '@vertesia/ui/core';
+import { useUserSession } from '@vertesia/ui/session';
+import { Settings } from 'lucide-react';
+
+interface VectorSearchWidgetProps {
+    onChange: (query?: ComplexSearchQuery) => void;
+    className?: string;
+    status?: boolean;
+    isLoading?: boolean;
+    refresh: number;
+    searchTypes?: (keyof typeof SearchTypes)[];
+}
+
+const allTypes = Object.values(SearchTypes);
+const embeddingTypes = Object.values(SupportedEmbeddingTypes);
+
+export function VectorSearchWidget({ onChange, isLoading, refresh, searchTypes }: VectorSearchWidgetProps) {
+    const { client, project } = useUserSession();
+    const toast = useToast();
+
+    const [searchText, setSearchText] = useState<string | undefined>(undefined);
+    const [config, setConfig] = useState<ProjectConfiguration | undefined>(undefined);
+    const isReady = !!project && (!!config?.embeddings.text || !!config?.embeddings.image);
+    const [status, setStatus] = useState<string | undefined>(undefined);
+
+    const [showSettings, setShowSettings] = useState(false);
+    // Default to all types, or use prop if provided
+    const [selectedTypes, setSelectedTypes] = useState<(keyof typeof SearchTypes)[]>(searchTypes || allTypes);
+    const [limit, setLimit] = useState<number>(100);
+    useEffect(() => {
+        if (searchTypes) setSelectedTypes(searchTypes);
+    }, [searchTypes]);
+
+    // Always derive embeddingSearchTypes and full_text from selectedTypes
+    const embeddingSearchTypes: Record<string, boolean> = {};
+    let fullTextEnabled = false;
+    let vectorSearchEnabled = false;
+    selectedTypes.forEach(type => {
+        if (type === SearchTypes.full_text) {
+            fullTextEnabled = true;
+        } else {
+            vectorSearchEnabled = true;
+        }
+        if (embeddingTypes.includes(type as SupportedEmbeddingTypes)) {
+            embeddingSearchTypes[type] = true;
+        }
+    });
+
+    useEffect(() => {
+        setSearchText(undefined);
+        setStatus(undefined);
+    }, [refresh]);
+
+    useEffect(() => {
+        if (!project) return;
+        client.projects.retrieve(project.id).then((project) => {
+            setConfig(project.configuration);
+        })
+    }, [project]);
+
+    useEffect(() => {
+        if (status) {
+            toast({ title: status, status: 'success', duration: 2000 });
+        }
+    }, [status]);
+
+    useEffect(() => {
+        if (!searchText || searchText.length === 0) {
+            onChange(undefined);
+        }
+    }, [searchText]);
+
+    const fireSearch = () => {
+        if (!isReady || !searchText) return;
+        const query: ComplexSearchQuery = {
+            vector: vectorSearchEnabled ? {
+                text: searchText,
+                config: embeddingSearchTypes,
+            } : undefined,
+            full_text: fullTextEnabled ? searchText : undefined,
+            limit: limit
+        };
+        onChange(query);
+        setStatus("Searching...");
+    };
+
+    const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === "Enter") {
+            fireSearch();
+        }
+    };
+
+    // Modal state for search type selection
+    const handleCheckboxChange = (type: keyof typeof SearchTypes) => (checked: boolean) => {
+        if (checked) {
+            setSelectedTypes(prev => Array.from(new Set([...prev, type])));
+        } else {
+            setSelectedTypes(prev => prev.filter(t => t !== type));
+        }
+    };
+
+    return (
+        <div className="flex gap-1 items-center w-1/2">
+            <Input placeholder="Type what you are looking for, or select a filter" value={searchText} onChange={setSearchText} onKeyDown={handleKeyPress} />
+            <Button variant="ghost" onClick={() => setShowSettings(true)} alt="Semantic search settings" className="ml-1"><Settings size={18} /></Button>
+            <Modal isOpen={showSettings} onClose={() => setShowSettings(false)}>
+                <ModalTitle>Search Types</ModalTitle>
+                <ModalBody>
+                    <div className="flex flex-col gap-2">
+                        <label className="flex items-center gap-2">
+                            <Checkbox
+                                checked={selectedTypes.includes(SearchTypes.full_text)}
+                                onCheckedChange={handleCheckboxChange(SearchTypes.full_text)}
+                            />
+                            <span>Full Text</span>
+                        </label>
+                        <div className="font-semibold mt-2 mb-1">Embeddings</div>
+                        {embeddingTypes.map(type => (
+                            <label key={type} className="flex items-center gap-2">
+                                <Checkbox
+                                    checked={selectedTypes.includes(type)}
+                                    onCheckedChange={handleCheckboxChange(type)}
+                                />
+                                <span>{type.charAt(0).toUpperCase() + type.slice(1)}</span>
+                            </label>
+                        ))}
+                        <div className="mt-3">
+                            <span className="mr-2">Limit</span>
+                            <NumberInput type="number" min={1} value={limit} onChange={v => setLimit(Number(v ?? 100))} style={{ width: 80 }} />
+                        </div>
+                    </div>
+                </ModalBody>
+                <ModalFooter>
+                    <Button variant="outline" onClick={() => setShowSettings(false)}>Close</Button>
+                </ModalFooter>
+            </Modal>
+            <Button variant="secondary" isLoading={isLoading} onClick={fireSearch} isDisabled={!isReady} alt="Semantic search">Search</Button>
+        </div>
+    );
+}

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

@@ -0,0 +1,9 @@
+export * from "./ContentDispositionButton"
+export * from "./ContentOverview"
+export * from "./DocumentIcon"
+export * from "./DocumentInput"
+export * from "./SelectDocument"
+export * from "./SelectDocumentModal"
+export * from "./useDownloadObject"
+export * from "./PropertiesEditorModal"
+export * from "./SaveVersionConfirmModal"

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

@@ -0,0 +1,185 @@
+import { useCallback, useEffect, useState } from "react";
+import { useUserSession } from "@vertesia/ui/session";
+import { DocAnalyzerProgress, DocProcessorOutputFormat, MarkdownRenditionFormat, WorkflowExecutionStatus } from "@vertesia/common";
+
+// Maximum text size before cropping (128K characters)
+const MAX_TEXT_DISPLAY_SIZE = 128 * 1024;
+
+/**
+ * Hook for managing object text loading and cropping.
+ */
+export function useObjectText(objectId: string, initialText?: string, loadOnMount = false) {
+    const { store } = useUserSession();
+
+    const [fullText, setFullText] = useState<string | undefined>(initialText);
+    const [displayText, setDisplayText] = useState<string | undefined>(() => {
+        if (initialText && initialText.length > MAX_TEXT_DISPLAY_SIZE) {
+            return initialText.substring(0, MAX_TEXT_DISPLAY_SIZE);
+        }
+        return initialText;
+    });
+    const [isLoading, setIsLoading] = useState(false);
+    const [isCropped, setIsCropped] = useState(
+        () => !!initialText && initialText.length > MAX_TEXT_DISPLAY_SIZE
+    );
+
+    const loadText = useCallback(() => {
+        setIsLoading(true);
+        store.objects
+            .getObjectText(objectId)
+            .then((res) => {
+                setFullText(res.text);
+                if (res.text.length > MAX_TEXT_DISPLAY_SIZE) {
+                    setDisplayText(res.text.substring(0, MAX_TEXT_DISPLAY_SIZE));
+                    setIsCropped(true);
+                } else {
+                    setDisplayText(res.text);
+                    setIsCropped(false);
+                }
+            })
+            .catch((err) => {
+                console.error("Failed to load text", err);
+                setFullText(undefined);
+                setDisplayText(undefined);
+                setIsCropped(false);
+            })
+            .finally(() => {
+                setIsLoading(false);
+            });
+    }, [objectId, store]);
+
+    // Reset state when objectId changes
+    useEffect(() => {
+        // Reset to initial text for new object
+        if (initialText && initialText.length > MAX_TEXT_DISPLAY_SIZE) {
+            setFullText(initialText);
+            setDisplayText(initialText.substring(0, MAX_TEXT_DISPLAY_SIZE));
+            setIsCropped(true);
+        } else {
+            setFullText(initialText);
+            setDisplayText(initialText);
+            setIsCropped(false);
+        }
+
+        // Load text if requested
+        if (loadOnMount && !initialText) {
+            loadText();
+        }
+    }, [objectId, initialText, loadOnMount, loadText]);
+
+    return {
+        fullText,
+        displayText,
+        isLoading,
+        isCropped,
+        loadText,
+    };
+}
+
+/**
+ * Hook for polling PDF/document processing status.
+ */
+export function usePdfProcessingStatus(objectId: string, shouldPoll: boolean) {
+    const { client } = useUserSession();
+
+    const [progress, setProgress] = useState<DocAnalyzerProgress | undefined>();
+    const [status, setStatus] = useState<WorkflowExecutionStatus | undefined>();
+    const [outputFormat, setOutputFormat] = useState<DocProcessorOutputFormat | undefined>();
+    const [isComplete, setIsComplete] = useState(false);
+
+    useEffect(() => {
+        if (!shouldPoll) return;
+
+        let interrupted = false;
+
+        function poll() {
+            if (interrupted) return;
+
+            client.objects.analyze(objectId).getStatus()
+                .then((r) => {
+                    setProgress(r.progress);
+                    setStatus(r.status);
+                    setOutputFormat(r.output_format ?? r.progress?.output_format);
+
+                    if (r.status === WorkflowExecutionStatus.RUNNING) {
+                        // Workflow is running, poll every 2 seconds for progress
+                        if (!interrupted) {
+                            setTimeout(poll, 2000);
+                        }
+                    } else {
+                        // Workflow completed or terminal state
+                        setIsComplete(true);
+                    }
+                })
+                .catch(() => {
+                    // No workflow found yet, poll every 10 seconds to check if one starts
+                    if (!interrupted) {
+                        setTimeout(poll, 10000);
+                    }
+                });
+        }
+
+        poll();
+        return () => { interrupted = true; };
+    }, [shouldPoll, objectId, client]);
+
+    return {
+        progress,
+        status,
+        outputFormat,
+        isComplete,
+    };
+}
+
+/**
+ * Hook for managing Office document to PDF conversion.
+ */
+export function useOfficePdfConversion(objectId: string, enabled: boolean) {
+    const { client } = useUserSession();
+
+    const [pdfUrl, setPdfUrl] = useState<string | undefined>();
+    const [isConverting, setIsConverting] = useState(false);
+    const [error, setError] = useState<string | undefined>();
+
+    const triggerConversion = useCallback(async () => {
+        if (!enabled || isConverting) return;
+
+        setIsConverting(true);
+        setError(undefined);
+
+        const pollForPdf = async (isFirstCall: boolean) => {
+            try {
+                const response = await client.objects.getRendition(objectId, {
+                    format: MarkdownRenditionFormat.pdf,
+                    generate_if_missing: isFirstCall,
+                    sign_url: true,
+                    block_on_generation: false,
+                });
+
+                if (response.status === "generating") {
+                    // Poll every 5 seconds
+                    setTimeout(() => pollForPdf(false), 5000);
+                } else if (response.status === "found" && response.renditions?.length) {
+                    setPdfUrl(response.renditions[0]);
+                    setIsConverting(false);
+                } else if (response.status === "failed") {
+                    setError("PDF conversion failed");
+                    setIsConverting(false);
+                }
+            } catch (err) {
+                console.error("Failed to convert Office document to PDF:", err);
+                setError("Failed to convert to PDF");
+                setIsConverting(false);
+            }
+        };
+
+        await pollForPdf(true);
+    }, [objectId, enabled, isConverting, client]);
+
+    return {
+        pdfUrl,
+        isConverting,
+        error,
+        triggerConversion,
+    };
+}

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

@@ -0,0 +1,29 @@
+import { VertesiaClient, ZenoClient } from "@vertesia/client";
+import { ToastFn } from "@vertesia/ui/core";
+
+export function useDownloadDocument(
+    client: VertesiaClient | ZenoClient,
+    toast: ToastFn,
+    uri: string | undefined,
+    name?: string,
+) {
+    const onDownload = () => {
+        if (uri) {
+            client.files
+                .getDownloadUrlWithOptions({ file: uri, name })
+                .then((r) => {
+                    window.open(r.url, "_blank");
+                })
+                .catch((err) => {
+                    toast({
+                        status: "error",
+                        title: "Failed to get download URL",
+                        description: err.message,
+                        duration: 5000,
+                    });
+                });
+        }
+    };
+
+    return onDownload;
+}

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

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

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

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

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

@@ -0,0 +1,69 @@
+import { ColumnLayout, ContentObjectItem } from "@vertesia/common";
+import { Table, TBody } from "@vertesia/ui/core";
+import { ChangeEvent } from "react";
+import { DocumentIcon, DocumentIconSkeleton } from "../components/DocumentIcon";
+import { DocumentSelection } from "../DocumentSelectionProvider";
+import { DocumentTableColumn } from "./DocumentTableColumn";
+
+interface ViewProps {
+    objects: ContentObjectItem[];
+    isLoading: boolean;
+    layout?: ColumnLayout[];
+    onRowClick?: (object: ContentObjectItem) => void;
+    previewObject?: (objectId: string) => void;
+    selectedObject?: ContentObjectItem | null;
+    onSelectionChange: ((object: ContentObjectItem, ev: ChangeEvent<HTMLInputElement>) => void);
+    selection: DocumentSelection;
+    toggleAll?: (ev: ChangeEvent<HTMLInputElement>) => void;
+    columns: DocumentTableColumn[];
+}
+
+export function DocumentTableView({ objects, selection, isLoading, columns, onRowClick, selectedObject, toggleAll, onSelectionChange }: ViewProps) {
+    return (
+        <Table className="w-full border-t">
+            <thead>
+                <tr>
+                    {selection && <th><input type="checkbox" onChange={toggleAll} /></th>}
+                    {columns.map((col) => (
+                        <th key={col.name}>{col.name}</th>
+                    ))}
+                </tr>
+            </thead>
+            <TBody isLoading={isLoading} columns={columns.length + 1}>
+                {
+                    objects?.map((obj: ContentObjectItem) => {
+                        return (
+                            <tr key={obj.id} className={`cursor-pointer hover:bg-muted group ${selectedObject?.id === obj.id ? 'bg-muted' : ''}`} onClick={() => {
+                                onRowClick && onRowClick(obj)
+                            }}>
+                                {selection &&
+                                    <td onClick={ev => ev.stopPropagation()}>
+                                        <input checked={selection.isSelected(obj.id)} type="checkbox" className={`${!selection.isSelected(obj.id) ? 'hidden group-hover:block' : ''}`}
+                                            onChange={(ev: ChangeEvent<HTMLInputElement>) => onSelectionChange(obj, ev)} />
+                                    </td>
+                                }
+                                {columns.map((col, index) => col.render(obj, index))}
+                            </tr>
+                        )
+                    })
+                }
+                {objects.length === 0 && <tr><td colSpan={columns.length + (selection ? 1 : 0)} className="text-center">No objects. Just drag and drop documents or images here to create content objects.</td></tr>}
+            </TBody>
+        </Table>
+    )
+}
+
+export function DocumentGridView({ objects, selection, isLoading, onSelectionChange, onRowClick, previewObject, selectedObject }: ViewProps) {
+    return (
+        <>
+            <DocumentIconSkeleton isLoading={isLoading} />
+            <div className="w-full gap-2 grid xs:grid-cols-1 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-6 @xs:grid-cols-1 @sm:grid-cols-2 @md:grid-cols-3 @lg:grid-cols-4">
+                {
+                    objects.map((document) => (
+                        <DocumentIcon key={document.id} document={document} selection={selection} onSelectionChange={onSelectionChange} onRowClick={onRowClick} previewObject={previewObject} selectedObject={selectedObject} />
+                    ))
+                }
+            </div>
+        </>
+    )
+}

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

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