@vertesia/ui 1.0.0-dev.20260203.130115Z → 1.0.0-dev.20260225.024852Z

package/src/features/store/types/SelectContentTypeModal.tsx

@@ -6,10 +6,11 @@ import {
     ModalFooter,
     ModalTitle,
     SelectBox,
+    VTooltip,
 } from "@vertesia/ui/core";
 import { ContentObjectTypeItem } from "@vertesia/common";
 import { useUserSession } from "@vertesia/ui/session";
-import { CheckCircleIcon } from "lucide-react";
+import { CheckCircleIcon, Info } from "lucide-react";
 
 /**
  * Props for the SelectTypeModal component
@@ -46,7 +47,6 @@ export function SelectContentTypeModal({
     title = "Select Content Type",
     children,
     initialSelectedType = null,
-    confirmLabel = "Select Type",
     allowNone = true,
 }: SelectContentTypeModalProps) {
     const { typeRegistry } = useUserSession();
@@ -63,6 +63,7 @@ export function SelectContentTypeModal({
     // Handle type selection and confirmation
     const handleConfirm = () => {
         onClose(selectedType?.id ?? null);
+        setSelectedType(null);
     };
 
     return (
@@ -72,7 +73,7 @@ export function SelectContentTypeModal({
             className="w-full max-w-xl mx-auto"
         >
             <ModalTitle>{title}</ModalTitle>
-            <ModalBody className="p-6">
+            <ModalBody>
                 {children}
 
                 {/* Type selection */}
@@ -100,41 +101,27 @@ export function SelectContentTypeModal({
                             filterBy="name"
                         />
                     )}
-
-                    {allowNone && (
-                        <div className="mt-2 text-sm text-blue-600 flex items-center">
-                            <CheckCircleIcon className="h-4 w-4 mr-1" />
-                            <span><strong>Type selection is optional.</strong> Leave empty to let Vertesia choose the appropriate type</span>
-                        </div>
-                    )}
                 </div>
 
-                {selectedType ? (
-                    <div className="text-sm text-gray-500 bg-gray-50 p-3 rounded-md mb-4">
-                        <div className="font-medium">{selectedType.name}</div>
-                        {selectedType.description && (
-                            <div className="mt-1">{selectedType.description}</div>
-                        )}
-                    </div>
-                ) : allowNone && (
-                    <div className="text-sm text-blue-600 bg-blue-50 p-3 rounded-md mb-4">
-                        <div className="font-medium">Automatic Type Detection</div>
-                        <div className="mt-1">
-                            Vertesia will analyze each file&apos;s content and automatically select the most appropriate type.
-                            <br />
-                            <span className="mt-1 block font-medium">This is recommended for most uploads.</span>
-                        </div>
+                {!selectedType && (
+                    <div className="flex items-center text-attention">
+                        <CheckCircleIcon className="size-4 mr-1" />
+                        Automatic Type Detection
+                        <VTooltip
+                            description="Vertesia will analyze the content and select the most appropriate type. This is recommended for most uploads and ensures optimal processing."
+                            placement="top" size="xs"
+                        >
+                            <Info className="size-3 ml-2" />
+                        </VTooltip>
                     </div>
                 )}
             </ModalBody>
             <ModalFooter>
-                <Button variant="ghost" onClick={handleClose}>
+                <Button variant="ghost" onClick={handleClose} alt="Cancel">
                     Cancel
                 </Button>
-                <Button
-                    onClick={handleConfirm}
-                >
-                    {selectedType ? `${confirmLabel}: ${selectedType.name}` : allowNone ? "Let Vertesia Choose" : confirmLabel}
+                <Button onClick={handleConfirm} alt="Confirm selection">
+                    Confirm
                 </Button>
             </ModalFooter>
         </Modal>

package/src/features/store/types/TableLayoutEditor.tsx

@@ -7,8 +7,9 @@ import { MonacoEditor, EditorApi } from '@vertesia/ui/widgets';
 interface TableLayoutEditorProps {
     objectType: ContentObjectType;
     onLayoutUpdate: (value: ColumnLayout[] | undefined) => void;
+    readonly?: boolean;
 }
-export function TableLayoutEditor({ objectType, onLayoutUpdate }: TableLayoutEditorProps) {
+export function TableLayoutEditor({ objectType, onLayoutUpdate, readonly = false }: TableLayoutEditorProps) {
     const toast = useToast();
     const { theme } = useTheme();
 
@@ -79,13 +80,14 @@ export function TableLayoutEditor({ objectType, onLayoutUpdate }: TableLayoutEdi
 
     return (
         <Panel title="Table Layout Editor" className="bg-background! h-[calc(100vh-197px)]" action={
-            <Button isLoading={isUpdating} variant="outline" size="sm" onClick={onSave}>Save Changes</Button>
+            !readonly ? <Button isLoading={isUpdating} variant="outline" size="sm" onClick={onSave}>Save Changes</Button> : undefined
         }>
             <MonacoEditor
                 value={value}
                 language="json"
                 editorRef={editorRef}
                 theme={theme === 'dark' ? 'vs-dark' : 'vs'}
+                options={{ readOnly: readonly }}
             />
         </Panel>
     )

package/src/features/user/UserInfo.tsx

@@ -111,8 +111,9 @@ interface AgentAvatarProps extends InfoProps {
     agentId: string;  // Format: accountId:projectId:timestamp
     onBehalfOfType?: string;
     onBehalfOfId?: string;
+    isScheduleAgent?: boolean;
 }
-function AgentAvatar({ agentId, onBehalfOfType, onBehalfOfId, showTitle = false, size = "md" }: AgentAvatarProps) {
+function AgentAvatar({ agentId, onBehalfOfType, onBehalfOfId, showTitle = false, size = "md", isScheduleAgent = false }: AgentAvatarProps) {
     // Fetch user info - must call hooks unconditionally per React rules
     const shouldFetchUser = onBehalfOfType === 'user' && onBehalfOfId;
     const shouldFetchApiKey = onBehalfOfType === 'apikey' && onBehalfOfId;
@@ -126,6 +127,7 @@ function AgentAvatar({ agentId, onBehalfOfType, onBehalfOfId, showTitle = false,
 
     // Determine title and description
     const title = user ? "Agent on behalf of" : apiKey ? "Agent on behalf of API key" : "Service Account";
+    const _title = isScheduleAgent ? `Schedule ${title}` : title;
 
     const description = (
         <div className="space-y-2">
@@ -160,7 +162,7 @@ function AgentAvatar({ agentId, onBehalfOfType, onBehalfOfId, showTitle = false,
     );
 
     return (
-        <UserPopoverPanel title={title} description={description}>
+        <UserPopoverPanel title={_title} description={description}>
             <div className="flex items-center gap-2">
                 <div className="flex items-center -space-x-2">
                     <Avatar
@@ -188,7 +190,7 @@ function AgentAvatar({ agentId, onBehalfOfType, onBehalfOfId, showTitle = false,
                 </div>
                 {showTitle && (
                     <div className="text-sm font-semibold truncate">
-                        {user ? `Agent (${user.name || user.email})` : apiKey ? `Agent (${apiKey.name})` : "Agent"}
+                        {user ? `Agent (${user.name || user.email})` : apiKey ? `Agent (${apiKey.name})` : title}
                     </div>
                 )}
             </div>
@@ -274,6 +276,22 @@ export function UserInfo({ userRef, showTitle = false, size = "md" }: UserInfoPr
             />
         }
 
+        case PrincipalType.Schedule: {
+            // format: schedule:agentId:user:userId
+            const agentId = parts[1];
+            const onBehalfOfType = parts[2];
+            const onBehalfOfId = parts[3];
+
+            return <AgentAvatar
+                agentId={agentId}
+                onBehalfOfType={onBehalfOfType}
+                onBehalfOfId={onBehalfOfId}
+                showTitle={showTitle}
+                size={size}
+                isScheduleAgent={true}
+            />
+        }
+
         case PrincipalType.ApiKey:
             return <ApiKeyAvatar keyId={parts[1]} size={size} showTitle={showTitle} />
 

package/src/features/utils/print.ts

@@ -105,7 +105,6 @@ const PRINT_STYLES = `
   .vprose blockquote,
   .vprose figure,
   .vprose img,
-  .recharts-wrapper,
   [class*="chart"],
   [class*="Chart"] {
     break-inside: avoid;

package/src/layout/Sidebar.tsx

@@ -86,8 +86,9 @@ export interface SidebarItemProps {
     className?: string;
     id?: string; //HTML ID of the element
     external?: boolean; //If true, the link will open in a new tab
+    replace?: boolean; //If true, navigation replaces the current history entry instead of pushing
 }
-export function SidebarItem({ external, className, tools, children, icon: Icon, href, current, onClick }: SidebarItemProps) {
+export function SidebarItem({ external, className, tools, children, icon: Icon, href, current, onClick, replace }: SidebarItemProps) {
     const { toggleMobile } = useSidebarToggle();
     const _closeSideBar = () => {
         setTimeout(() => {
@@ -105,7 +106,7 @@ export function SidebarItem({ external, className, tools, children, icon: Icon,
     }
     return (
         <li>
-            <Nav onClick={_closeSideBar}>
+            <Nav onClick={_closeSideBar} replace={replace}>
                 <SidebarTooltip text={children as string}>
                     <a
                         href={href}

package/src/router/HistoryNavigator.ts

@@ -213,7 +213,15 @@ export class HistoryNavigator {
             this.fireLocationChange(new AfterLocationChangeEvent(type, to, state));
         }
         const _linkNavListener = (ev: MouseEvent) => {
-            const url = getElementHrefAsUrl(ev.target as HTMLElement)
+            const target = ev.target as HTMLElement;
+            // Skip anchors with download attribute or blob: URLs - they are file downloads, not navigation
+            if (target.tagName.toLowerCase() === 'a' && (
+                (target as HTMLAnchorElement).hasAttribute('download') ||
+                (target as HTMLAnchorElement).href?.startsWith('blob:')
+            )) {
+                return;
+            }
+            const url = getElementHrefAsUrl(target)
             if (url && url.origin === window.location.origin) {
                 ev.preventDefault();
                 const to = new URL(this.addStickyParams(url.href));

package/src/router/Nav.tsx

@@ -12,15 +12,20 @@ interface NavProps {
      * @returns
      */
     onClick?: (ev: SyntheticEvent) => void;
+    /**
+     * If true, use replaceState instead of pushState (no new browser history entry).
+     * Defaults to true for backward compatibility.
+     */
+    replace?: boolean;
 }
-export function Nav({ children, onClick }: NavProps) {
+export function Nav({ children, onClick, replace = true }: NavProps) {
     const navigate = useNavigate();
     const _onClick = (ev: SyntheticEvent) => {
         const link = (ev.target as HTMLElement).closest('a');
         if (link && link.href) {
             ev.stopPropagation();
             ev.preventDefault();
-            navigate(link.href, { replace: true });
+            navigate(link.href, { replace });
             onClick?.(ev);
         }
     }

package/src/session/UserSession.ts

@@ -12,6 +12,8 @@ import { TypeRegistry } from './TypeRegistry';
 import { LastSelectedAccountId_KEY, LastSelectedProjectId_KEY } from './constants';
 export { LastSelectedAccountId_KEY, LastSelectedProjectId_KEY };
 
+const CENTRAL_AUTH_REDIRECT = "https://internal-auth.vertesia.app/";
+
 
 class UserSession {
 
@@ -117,15 +119,41 @@ class UserSession {
 
     logout() {
         console.log('Logging out');
-        if (this.authToken) {
-            getFirebaseAuth().signOut();
+
+        // Check if we should use central auth for logout
+        const devDomains = [".composable.sh", ".vertesia.dev", "vertesia.app"];
+        const shouldUseCentralAuth = Env.isDocker || devDomains.some((domain) => window.location.hostname.endsWith(domain));
+
+        if (shouldUseCentralAuth) {
+            // Redirect to central auth for logout
+            // Central auth will handle Firebase logout
+            console.log('Using central auth logout');
+            this.authError = undefined;
+            this.isLoading = false;
+            this.authToken = undefined;
+            this.typeRegistry = undefined;
+            this.setSession = undefined;
+            this.client.withAuthCallback(undefined);
+
+            const logoutUrl = new URL(CENTRAL_AUTH_REDIRECT);
+            const currentUrl = new URL(window.location.href);
+            currentUrl.hash = "";
+            logoutUrl.pathname = "/logout";
+            logoutUrl.searchParams.set("redirect_uri", currentUrl.toString());
+            location.replace(logoutUrl.toString());
+        } else {
+            // Use Firebase logout directly
+            console.log('Using Firebase logout');
+            if (this.authToken) {
+                getFirebaseAuth().signOut();
+            }
+            this.authError = undefined;
+            this.isLoading = false;
+            this.authToken = undefined;
+            this.typeRegistry = undefined;
+            this.setSession = undefined;
+            this.client.withAuthCallback(undefined);
         }
-        this.authError = undefined;
-        this.isLoading = false;
-        this.authToken = undefined;
-        this.typeRegistry = undefined;
-        this.setSession = undefined;
-        this.client.withAuthCallback(undefined);
     }
 
     async switchAccount(targetAccountId: string) {
@@ -151,7 +179,8 @@ class UserSession {
 
     async _loadTypes() {
         if (this.project) {
-            return this.store.types.list({}, { layout: true }).then(types => this.typeRegistry = new TypeRegistry(types)).catch(err => {
+            return this.store.types.catalog.list({ layout: true }).then(types => this.typeRegistry = new TypeRegistry(types)).catch(err => {
+                //return this.store.types.list({}, { layout: true }).then(types => this.typeRegistry = new TypeRegistry(types)).catch(err => {
                 console.error('Failed to fetch object types', err);
                 throw err;
             })

package/src/session/UserSessionProvider.tsx

@@ -1,15 +1,15 @@
+import { Env } from "@vertesia/ui/env";
 import { onAuthStateChanged } from "firebase/auth";
 import { ReactNode, useEffect, useRef, useState } from "react";
 import { UserNotFoundError, getComposableToken } from "./auth/composable";
 import { getFirebaseAuth } from "./auth/firebase";
 import { useAuthState } from "./auth/useAuthState";
-import { Env } from "@vertesia/ui/env";
 import { LastSelectedAccountId_KEY, LastSelectedProjectId_KEY, UserSession, UserSessionContext } from "./UserSession";
 
 const devDomains = [".composable.sh", ".vertesia.dev", "vertesia.app"];
 const CENTRAL_AUTH_REDIRECT = "https://internal-auth.vertesia.app/";
 
-function shouldRedirectToCentralAuth() {
+export function shouldRedirectToCentralAuth() {
     // Authentication is not supported in Docker environment.
     // See https://github.com/vertesia/studio/wiki/Composable-UI-Hosting-Options
     if (Env.isDocker) {
@@ -129,6 +129,7 @@ export function UserSessionProvider({ children }: UserSessionProviderProps) {
                         },
                     });
                     redirectToCentralAuth();
+                    return; // Don't register onAuthStateChanged listener when redirecting
                 } else {
                     console.log("Auth: not on dev domain");
                     Env.logger.info("Not on dev domain", {

package/src/widgets/markdown/ArtifactContentRenderer.tsx

@@ -5,8 +5,9 @@
  */
 
 import { useMemo, type ReactElement } from 'react';
+import DOMPurify from 'dompurify';
 import { CodeBlockPlaceholder, CodeBlockErrorBoundary } from './CodeBlockPlaceholder';
-import { AgentChart, type AgentChartSpec, type VegaLiteChartSpec } from '../../features/agent/chat/AgentChart';
+import { type VegaLiteChartSpec } from '../../features/agent/chat/AgentChart';
 import { VegaLiteChart } from '../../features/agent/chat/VegaLiteChart';
 import { FusionFragmentHandler, FusionFragmentProvider } from '@vertesia/fusion-ux';
 import { MarkdownRenderer } from './MarkdownRenderer';
@@ -18,6 +19,7 @@ export type ExpandRenderType =
     | 'table'
     | 'markdown'
     | 'fusion-fragment'
+    | 'mockup'
     | 'code'
     | 'image'
     | 'auto';
@@ -45,8 +47,13 @@ function autoDetectRenderType(
 ): ExpandRenderType {
     const ext = path.split('.').pop()?.toLowerCase();
 
-    // Image extensions
-    if (['png', 'jpg', 'jpeg', 'gif', 'webp', 'svg'].includes(ext || '')) {
+    // SVG files → mockup renderer (inline SVG from text content)
+    if (ext === 'svg') {
+        return 'mockup';
+    }
+
+    // Image extensions (binary → rendered via URL)
+    if (['png', 'jpg', 'jpeg', 'gif', 'webp'].includes(ext || '')) {
         return 'image';
     }
 
@@ -74,11 +81,6 @@ function autoDetectRenderType(
             return 'vega-lite';
         }
 
-        // Check for Recharts format
-        if (('chart' in obj || 'type' in obj) && 'data' in obj && Array.isArray(obj.data)) {
-            return 'chart';
-        }
-
         // Check for fusion fragment template with data
         if ('template' in obj && 'data' in obj) {
             return 'fusion-fragment';
@@ -94,6 +96,24 @@ function autoDetectRenderType(
     return 'code';
 }
 
+function toVegaLiteSpec(content: unknown): VegaLiteChartSpec | null {
+    if (typeof content !== 'object' || content === null) {
+        return null;
+    }
+
+    const obj = content as Record<string, unknown>;
+
+    if (obj.library === 'vega-lite' && 'spec' in obj && typeof obj.spec === 'object' && obj.spec !== null) {
+        return obj as unknown as VegaLiteChartSpec;
+    }
+
+    if (typeof obj.$schema === 'string' && obj.$schema.includes('vega')) {
+        return { library: 'vega-lite', spec: obj };
+    }
+
+    return null;
+}
+
 /**
  * Table renderer for array data or CSV
  */
@@ -175,6 +195,67 @@ function CodeRenderer({ content, path }: { content: unknown; path: string }): Re
     );
 }
 
+/**
+ * Sanitize SVG markup using DOMPurify.
+ * Allows only safe SVG elements; strips scripts, event handlers, and foreignObject.
+ */
+export function sanitizeSvg(svg: string): string {
+    return DOMPurify.sanitize(svg, {
+        USE_PROFILES: { svg: true, svgFilters: true },
+        ADD_TAGS: ['use'],
+        FORBID_TAGS: ['foreignObject'],
+    });
+}
+
+/**
+ * Make SVG responsive — remove fixed dimensions, ensure viewBox.
+ */
+export function makeSvgResponsive(svg: string): string {
+    return svg.replace(/<svg([^>]*)>/i, (_full: string, attrs: string) => {
+        let a = attrs;
+        if (!/viewBox/i.test(a)) {
+            const w = /\swidth\s*=\s*["']?(\d+(?:\.\d+)?)/i.exec(a);
+            const h = /\sheight\s*=\s*["']?(\d+(?:\.\d+)?)/i.exec(a);
+            if (w && h) a += ` viewBox="0 0 ${w[1]} ${h[1]}"`;
+        }
+        a = a
+            .replace(/\swidth\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/i, '')
+            .replace(/\sheight\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/i, '');
+        if (/style="/i.test(a)) {
+            a = a.replace(/style="([^"]*)"/i, (_: string, v: string) =>
+                `style="${v};width:100%;height:auto;display:block;max-width:100%;"`);
+        } else {
+            a += ' style="width:100%;height:auto;display:block;max-width:100%;"';
+        }
+        if (!/preserveAspectRatio=/i.test(a)) {
+            a += ' preserveAspectRatio="xMidYMid meet"';
+        }
+        return `<svg${a}>`;
+    });
+}
+
+/**
+ * Mockup renderer — renders raw SVG content inline after sanitization.
+ */
+function MockupRenderer({ content }: { content: unknown }): ReactElement {
+    const processedSvg = useMemo(() => {
+        const raw = typeof content === 'string' ? content.trim() : '';
+        if (!raw) return null;
+        return makeSvgResponsive(sanitizeSvg(raw));
+    }, [content]);
+
+    if (!processedSvg) {
+        return <CodeBlockPlaceholder type="expand" error="Empty mockup" />;
+    }
+
+    return (
+        <div
+            style={{ margin: '16px 0', width: '100%', overflowX: 'auto' }}
+            dangerouslySetInnerHTML={{ __html: processedSvg }}
+        />
+    );
+}
+
 /**
  * Image renderer
  */
@@ -215,19 +296,32 @@ export function ArtifactContentRenderer({
     // Render based on type
     switch (actualType) {
         case 'chart': {
+            const spec = toVegaLiteSpec(content);
+            if (!spec) {
+                return (
+                    <CodeBlockPlaceholder
+                        type="chart"
+                        error="Only Vega-Lite charts are supported. Recharts rendering has been retired."
+                    />
+                );
+            }
             return (
                 <CodeBlockErrorBoundary type="chart" fallbackCode={JSON.stringify(content, null, 2)}>
-                    <AgentChart spec={content as AgentChartSpec} artifactRunId={runId} />
+                    <VegaLiteChart spec={spec} artifactRunId={runId} />
                 </CodeBlockErrorBoundary>
             );
         }
 
         case 'vega-lite': {
-            const spec: VegaLiteChartSpec = typeof content === 'object' && content !== null
-                ? ('library' in (content as Record<string, unknown>)
-                    ? content as VegaLiteChartSpec
-                    : { library: 'vega-lite', spec: content as Record<string, unknown> })
-                : { library: 'vega-lite', spec: content as Record<string, unknown> };
+            const spec = toVegaLiteSpec(content);
+            if (!spec) {
+                return (
+                    <CodeBlockPlaceholder
+                        type="chart"
+                        error="Invalid Vega-Lite specification"
+                    />
+                );
+            }
             return (
                 <CodeBlockErrorBoundary type="chart" fallbackCode={JSON.stringify(content, null, 2)}>
                     <VegaLiteChart spec={spec} artifactRunId={runId} />
@@ -287,6 +381,13 @@ export function ArtifactContentRenderer({
             );
         }
 
+        case 'mockup':
+            return (
+                <CodeBlockErrorBoundary type="expand" fallbackCode={typeof content === 'string' ? content : path}>
+                    <MockupRenderer content={content} />
+                </CodeBlockErrorBoundary>
+            );
+
         case 'image':
             return (
                 <CodeBlockErrorBoundary type="image" fallbackCode={path}>

package/src/widgets/markdown/MarkdownFigure.tsx

@@ -0,0 +1,100 @@
+import { useResolvedUrl, parseUrlScheme } from './useResolvedUrl';
+import { CodeBlockPlaceholder } from './CodeBlockPlaceholder';
+
+export interface MarkdownFigureProps {
+    src?: string;
+    alt?: string;
+    caption: string;
+    className?: string;
+    artifactRunId?: string;
+}
+
+/**
+ * Markdown figure component for images with captions.
+ * Wraps the image in a <figure> element with a <figcaption>.
+ *
+ * Usage in markdown: ![alt text](image-url "Caption text")
+ */
+export function MarkdownFigure({
+    src,
+    alt,
+    caption,
+    className,
+    artifactRunId,
+}: MarkdownFigureProps) {
+    const rawSrc = src || '';
+    const { scheme } = parseUrlScheme(rawSrc);
+
+    // For standard URLs, render directly
+    if (scheme === 'standard') {
+        return (
+            <figure className="my-4">
+                <img src={src} alt={alt} className={className} />
+                <figcaption className="mt-2 text-sm text-muted text-center italic">
+                    {caption}
+                </figcaption>
+            </figure>
+        );
+    }
+
+    // For artifact: and image: URLs, use the resolver
+    return (
+        <ResolvedFigure
+            rawSrc={rawSrc}
+            alt={alt}
+            caption={caption}
+            artifactRunId={artifactRunId}
+            className={className}
+        />
+    );
+}
+
+/**
+ * Internal component for figures that need async URL resolution
+ */
+function ResolvedFigure({
+    rawSrc,
+    alt,
+    caption,
+    artifactRunId,
+    className,
+}: {
+    rawSrc: string;
+    alt?: string;
+    caption: string;
+    artifactRunId?: string;
+    className?: string;
+}) {
+    const { url, isLoading, error, retry } = useResolvedUrl({
+        rawUrl: rawSrc,
+        artifactRunId,
+        disposition: 'inline',
+    });
+
+    if (isLoading) {
+        return <CodeBlockPlaceholder type="image" message={alt ? `Loading ${alt}...` : undefined} />;
+    }
+
+    if (error) {
+        return (
+            <CodeBlockPlaceholder
+                type="image"
+                error={error}
+                onRetry={retry}
+            />
+        );
+    }
+
+    if (!url) {
+        return null;
+    }
+
+    return (
+        <figure className="my-4">
+            <img src={url} alt={alt} className={className} />
+            <figcaption className="mt-2 text-sm text-muted text-center italic">
+                {caption}
+            </figcaption>
+        </figure>
+    );
+}