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

package/src/widgets/markdown/MarkdownRenderer.tsx

@@ -3,9 +3,19 @@ import type { Element } from 'hast';
 import React from 'react';
 import Markdown, { defaultUrlTransform } from 'react-markdown';
 import remarkGfm from 'remark-gfm';
+import remarkMath from 'remark-math';
+import remarkDirective from 'remark-directive';
+import remarkAlert from 'remark-github-blockquote-alert';
+import { remarkDefinitionList, defListHastHandlers } from 'remark-definition-list';
+import remarkSupersub from 'remark-supersub';
+import rehypeKatex from 'rehype-katex';
 import { SKIP, visit } from 'unist-util-visit';
 import { MarkdownLink } from './MarkdownLink';
 import { MarkdownImage } from './MarkdownImage';
+import { MarkdownFigure } from './MarkdownFigure';
+import { remarkDirectiveHandler } from './remarkDirectiveHandler';
+import { normalizeCustomSchemeLinks } from './normalizeCustomSchemeLinks';
+import { normalizeDirectives } from './normalizeDirectives';
 import {
     CodeBlockHandlerProvider,
     createDefaultCodeBlockHandlers,
@@ -93,14 +103,41 @@ export function MarkdownRenderer({
     onProposalSubmit,
 }: MarkdownRendererProps) {
     const codeBlockRegistry = useCodeBlockRendererRegistry();
-    const plugins = React.useMemo(() => {
-        const result = [remarkGfm, ...remarkPlugins];
+    const normalizedMarkdown = React.useMemo(
+        () => normalizeDirectives(normalizeCustomSchemeLinks(children)),
+        [children]
+    );
+
+    // Remark plugins (markdown parsing)
+    // Order matters: GFM first, then directive (must precede handler),
+    // then definition-list/supersub, then math, then user plugins.
+    const remarkPluginsArray = React.useMemo(() => {
+        const result: any[] = [
+            remarkGfm,
+            remarkDirective,
+            remarkDirectiveHandler,
+            remarkAlert,
+            remarkDefinitionList,
+            remarkSupersub,
+            remarkMath,
+            ...remarkPlugins,
+        ];
         if (removeComments) {
             result.push(remarkRemoveComments);
         }
         return result;
     }, [remarkPlugins, removeComments]);
 
+    // Rehype plugins (HTML processing, including KaTeX for math)
+    const rehypePluginsArray = React.useMemo(() => [rehypeKatex], []);
+
+    // Remark-rehype bridge options (custom AST handlers for definition lists)
+    const remarkRehypeOptions = React.useMemo(() => ({
+        handlers: {
+            ...defListHastHandlers,
+        },
+    }), []);
+
     const componentsWithOverrides = React.useMemo(() => {
         const baseComponents = components || {};
         const ExistingCode = baseComponents.code;
@@ -157,7 +194,7 @@ export function MarkdownRenderer({
 
             // Default code rendering
             const baseInlineClass = 'px-1.5 py-0.5 rounded';
-            const baseCodeClass = 'text-muted';
+            const baseCodeClass = '';
 
             return (
                 <code
@@ -193,8 +230,22 @@ export function MarkdownRenderer({
             );
         };
 
-        const ImageComponent = (props: { node?: any; src?: string; alt?: string }) => {
-            const { node, src, alt, ...rest } = props as any;
+        const ImageComponent = (props: { node?: any; src?: string; alt?: string; title?: string }) => {
+            const { node, src, alt, title, ...rest } = props as any;
+
+            // If image has a title, render as figure with caption
+            if (title) {
+                return (
+                    <MarkdownFigure
+                        src={src}
+                        alt={alt}
+                        caption={title}
+                        className={imageClassName}
+                        artifactRunId={artifactRunId}
+                    />
+                );
+            }
+
             return (
                 <MarkdownImage
                     node={node}
@@ -231,18 +282,20 @@ export function MarkdownRenderer({
             onProposalSubmit={onProposalSubmit}
         >
             <Markdown
-                remarkPlugins={plugins}
+                remarkPlugins={remarkPluginsArray}
+                rehypePlugins={rehypePluginsArray}
+                remarkRehypeOptions={remarkRehypeOptions}
                 components={componentsWithOverrides}
                 urlTransform={customUrlTransform}
             >
-                {children}
+                {normalizedMarkdown}
             </Markdown>
         </CodeBlockHandlerProvider>
     );
 
     if (className) {
-        return <div className={className}>{markdownContent}</div>;
+        return <div className={`md-content ${className}`}>{markdownContent}</div>;
     }
 
-    return markdownContent;
+    return <div className="md-content">{markdownContent}</div>;
 }

package/src/widgets/markdown/MermaidDiagram.tsx

@@ -1,13 +1,103 @@
 import { useEffect, useRef, useState, useId } from 'react';
 import mermaid from 'mermaid';
 
-// Initialize mermaid with default config
+const MERMAID_FONT_FAMILY =
+    'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';
+
+/**
+ * Browser-side Mermaid normalization:
+ * - Convert escaped newlines in quoted labels (`\n`, `\\n`) to HTML line breaks.
+ *   Mermaid web rendering handles `<br/>` labels more reliably than escaped `\n`.
+ */
+function normalizeMermaidCodeForBrowser(code: string): string {
+    const trimmed = code.trim();
+    let normalized = '';
+    let inDoubleQuote = false;
+    let inSingleQuote = false;
+
+    for (let i = 0; i < trimmed.length; i++) {
+        const char = trimmed[i];
+        const prev = i > 0 ? trimmed[i - 1] : '';
+
+        if (char === '"' && !inSingleQuote && prev !== '\\') {
+            inDoubleQuote = !inDoubleQuote;
+            normalized += char;
+            continue;
+        }
+
+        if (char === "'" && !inDoubleQuote && prev !== '\\') {
+            inSingleQuote = !inSingleQuote;
+            normalized += char;
+            continue;
+        }
+
+        if ((inDoubleQuote || inSingleQuote) && char === '\\') {
+            let j = i;
+            while (trimmed[j] === '\\') {
+                j++;
+            }
+
+            if (trimmed[j] === 'n') {
+                normalized += '<br/>';
+                i = j;
+                continue;
+            }
+        }
+
+        normalized += char;
+    }
+
+    return normalized;
+}
+
+/**
+ * Force Mermaid SVG output to scale with container width.
+ * This keeps text and shapes proportional when the container shrinks/expands.
+ */
+function makeSvgResponsive(svg: string): string {
+    return svg.replace(/<svg([^>]*)>/i, (_full, attrs: string) => {
+        let nextAttrs = attrs
+            .replace(/\swidth="[^"]*"/i, '')
+            .replace(/\sheight="[^"]*"/i, '');
+
+        if (/style="/i.test(nextAttrs)) {
+            nextAttrs = nextAttrs.replace(
+                /style="([^"]*)"/i,
+                (_styleFull, styleValue: string) =>
+                    `style="${styleValue};width:100%;height:auto;display:block;max-width:100%;"`
+            );
+        } else {
+            nextAttrs += ' style="width:100%;height:auto;display:block;max-width:100%;"';
+        }
+
+        if (!/preserveAspectRatio=/i.test(nextAttrs)) {
+            nextAttrs += ' preserveAspectRatio="xMidYMid meet"';
+        }
+
+        return `<svg${nextAttrs}>`;
+    });
+}
+
+// Initialize mermaid with a browser-focused config close to Mermaid Playground defaults.
 mermaid.initialize({
     startOnLoad: false,
     theme: 'default',
     securityLevel: 'loose',
-    fontFamily: 'inherit',
+    fontFamily: MERMAID_FONT_FAMILY,
     suppressErrorRendering: true,
+    flowchart: {
+        htmlLabels: true,
+        useMaxWidth: true,
+        nodeSpacing: 40,
+        rankSpacing: 50,
+        padding: 12,
+    },
+    sequence: {
+        useMaxWidth: true,
+    },
+    themeVariables: {
+        fontFamily: MERMAID_FONT_FAMILY,
+    },
 });
 
 export interface MermaidDiagramProps {
@@ -54,12 +144,14 @@ export function MermaidDiagram({ code, className }: MermaidDiagramProps) {
 
                 // Generate unique ID for this render
                 const id = `mermaid-${uniqueId}-${Date.now()}`;
+                const normalizedCode = normalizeMermaidCodeForBrowser(code);
 
                 // Render the diagram
-                const { svg: renderedSvg } = await mermaid.render(id, code.trim());
+                const { svg: renderedSvg } = await mermaid.render(id, normalizedCode);
+                const responsiveSvg = makeSvgResponsive(renderedSvg);
 
                 if (!cancelled) {
-                    setSvg(renderedSvg);
+                    setSvg(responsiveSvg);
                 }
             } catch (err: unknown) {
                 if (!cancelled) {
@@ -93,7 +185,7 @@ export function MermaidDiagram({ code, className }: MermaidDiagramProps) {
     return (
         <div
             ref={containerRef}
-            className={`my-4 overflow-x-auto ${className || ''}`}
+            className={`my-4 w-full overflow-x-auto [&_svg]:mx-auto [&_svg]:w-full [&_svg]:h-auto [&_svg]:max-w-full ${className || ''}`}
             dangerouslySetInnerHTML={{ __html: svg }}
         />
     );

package/src/widgets/markdown/codeBlockHandlers.test.tsx

@@ -41,19 +41,12 @@ describe('Chart JSON parsing', () => {
         }
     };
 
-    const detectChartLibrary = (spec: Record<string, unknown>): 'vega-lite' | 'recharts' | null => {
+    const detectChartLibrary = (spec: Record<string, unknown>): 'vega-lite' | null => {
         const hasVegaSchema = typeof spec.$schema === 'string' && spec.$schema.includes('vega');
         const isExplicitVegaLite = spec.library === 'vega-lite' && 'spec' in spec;
         if (hasVegaSchema || isExplicitVegaLite) {
             return 'vega-lite';
         }
-        const isRecharts =
-            ('chart' in spec || 'type' in spec || spec.library === 'recharts') &&
-            'data' in spec &&
-            Array.isArray(spec.data);
-        if (isRecharts) {
-            return 'recharts';
-        }
         return null;
     };
 
@@ -102,39 +95,15 @@ describe('Chart JSON parsing', () => {
             expect(detectChartLibrary(spec)).toBe('vega-lite');
         });
 
-        it('should detect Recharts by chart field', () => {
-            const spec = {
-                chart: 'bar',
-                data: [{ x: 1, y: 2 }],
-            };
-            expect(detectChartLibrary(spec)).toBe('recharts');
-        });
-
-        it('should detect Recharts by type field', () => {
-            const spec = {
-                type: 'line',
-                data: [{ x: 1, y: 2 }],
-            };
-            expect(detectChartLibrary(spec)).toBe('recharts');
-        });
-
-        it('should detect explicit Recharts with library field', () => {
-            const spec = {
-                library: 'recharts',
-                data: [{ x: 1, y: 2 }],
-            };
-            expect(detectChartLibrary(spec)).toBe('recharts');
-        });
-
         it('should return null for non-chart spec', () => {
             const spec = { foo: 'bar' };
             expect(detectChartLibrary(spec)).toBeNull();
         });
 
-        it('should return null for Recharts without data array', () => {
+        it('should return null for legacy chart format', () => {
             const spec = {
                 chart: 'bar',
-                data: 'not an array',
+                data: [{ x: 1, y: 2 }],
             };
             expect(detectChartLibrary(spec)).toBeNull();
         });

package/src/widgets/markdown/codeBlockHandlers.tsx

@@ -1,12 +1,12 @@
 import React, { useMemo } from 'react';
 import type { CodeBlockRendererProps } from './CodeBlockRendering';
 import { CodeBlockPlaceholder, CodeBlockErrorBoundary } from './CodeBlockPlaceholder';
-import { AgentChart, type AgentChartSpec } from '../../features/agent/chat/AgentChart';
+import type { VegaLiteChartSpec } from '../../features/agent/chat/AgentChart';
 import { VegaLiteChart } from '../../features/agent/chat/VegaLiteChart';
 import { MermaidDiagram } from './MermaidDiagram';
 import { AskUserWidget, type AskUserWidgetProps } from '../../features/agent/chat/AskUserWidget';
 import { useArtifactContent } from './useArtifactContent';
-import { ArtifactContentRenderer, type ExpandRenderType } from './ArtifactContentRenderer';
+import { ArtifactContentRenderer, type ExpandRenderType, sanitizeSvg, makeSvgResponsive } from './ArtifactContentRenderer';
 
 /**
  * Context for passing artifact run ID and callbacks to code block handlers
@@ -125,7 +125,7 @@ function parseChartJson(code: string): Record<string, unknown> | null {
  */
 function detectChartLibrary(
     spec: Record<string, unknown>
-): 'vega-lite' | 'recharts' | null {
+): 'vega-lite' | null {
     // Detect Vega-Lite by $schema containing "vega"
     const hasVegaSchema =
         typeof spec.$schema === 'string' && spec.$schema.includes('vega');
@@ -135,16 +135,6 @@ function detectChartLibrary(
         return 'vega-lite';
     }
 
-    // Recharts: check for 'chart' property OR library === 'recharts' with data
-    const isRecharts =
-        ('chart' in spec || 'type' in spec || spec.library === 'recharts') &&
-        'data' in spec &&
-        Array.isArray(spec.data);
-
-    if (isRecharts) {
-        return 'recharts';
-    }
-
     return null;
 }
 
@@ -196,8 +186,7 @@ export function VegaLiteCodeBlockHandler({ code }: CodeBlockRendererProps) {
 
 /**
  * Chart code block handler
- * Supports both Vega-Lite and Recharts specifications
- * Routes directly to the appropriate chart component based on detected library
+ * `chart` now accepts Vega-Lite specifications only.
  */
 export function ChartCodeBlockHandler({ code }: CodeBlockRendererProps) {
     const { artifactRunId } = useCodeBlockContext();
@@ -205,27 +194,22 @@ export function ChartCodeBlockHandler({ code }: CodeBlockRendererProps) {
     // Check if JSON is incomplete (streaming in progress)
     const incomplete = useMemo(() => isIncompleteJson(code), [code]);
 
-    const { chartSpec, isVegaLite } = useMemo(() => {
-        if (incomplete) return { chartSpec: null, isVegaLite: false };
+    const chartSpec = useMemo((): VegaLiteChartSpec | null => {
+        if (incomplete) return null;
 
         const spec = parseChartJson(code);
-        if (!spec) return { chartSpec: null, isVegaLite: false };
+        if (!spec) return null;
 
         const library = detectChartLibrary(spec);
-        if (!library) return { chartSpec: null, isVegaLite: false };
+        if (!library) return null;
 
-        // Vega-Lite spec - wrap in expected format
-        if (library === 'vega-lite') {
-            // If already wrapped (has library: 'vega-lite' and spec property), use as-is
-            if (spec.library === 'vega-lite' && 'spec' in spec) {
-                return { chartSpec: spec, isVegaLite: true };
-            }
-            // Native Vega-Lite spec - wrap it
-            return { chartSpec: { library: 'vega-lite' as const, spec }, isVegaLite: true };
+        // If already wrapped, use as-is.
+        if (spec.library === 'vega-lite' && 'spec' in spec && typeof spec.spec === 'object') {
+            return spec as unknown as VegaLiteChartSpec;
         }
 
-        // Recharts spec
-        return { chartSpec: spec, isVegaLite: false };
+        // Native Vega-Lite spec - wrap it.
+        return { library: 'vega-lite' as const, spec };
     }, [code, incomplete]);
 
     // Show loading placeholder for incomplete JSON (streaming)
@@ -242,23 +226,14 @@ export function ChartCodeBlockHandler({ code }: CodeBlockRendererProps) {
         return (
             <CodeBlockPlaceholder
                 type="chart"
-                error="Invalid chart specification"
+                error="Invalid Vega-Lite chart specification"
             />
         );
     }
 
-    // Route directly to the appropriate chart component
-    if (isVegaLite) {
-        return (
-            <CodeBlockErrorBoundary type="chart" fallbackCode={code}>
-                <VegaLiteChart spec={chartSpec as any} artifactRunId={artifactRunId} />
-            </CodeBlockErrorBoundary>
-        );
-    }
-
     return (
         <CodeBlockErrorBoundary type="chart" fallbackCode={code}>
-            <AgentChart spec={chartSpec as AgentChartSpec} artifactRunId={artifactRunId} />
+            <VegaLiteChart spec={chartSpec} artifactRunId={artifactRunId} />
         </CodeBlockErrorBoundary>
     );
 }
@@ -357,6 +332,32 @@ export function ProposalCodeBlockHandler({ code }: CodeBlockRendererProps) {
     );
 }
 
+/**
+ * Mockup code block handler — renders inline SVG after sanitization.
+ */
+export function MockupCodeBlockHandler({ code }: CodeBlockRendererProps) {
+    const processedSvg = useMemo(() => {
+        const trimmed = code.trim();
+        if (!trimmed) return null;
+        return makeSvgResponsive(sanitizeSvg(trimmed));
+    }, [code]);
+
+    if (!processedSvg) {
+        return (
+            <CodeBlockPlaceholder type="code" error="Empty mockup" />
+        );
+    }
+
+    return (
+        <CodeBlockErrorBoundary type="code" fallbackCode={code}>
+            <div
+                style={{ margin: '16px 0', width: '100%', overflowX: 'auto' }}
+                dangerouslySetInnerHTML={{ __html: processedSvg }}
+            />
+        </CodeBlockErrorBoundary>
+    );
+}
+
 /**
  * Expand code block handler - fetches artifact and renders content inline.
  *
@@ -381,7 +382,7 @@ export function ExpandCodeBlockHandler({ code, language }: CodeBlockRendererProp
         // Validate known types
         const validTypes: ExpandRenderType[] = [
             'chart', 'vega-lite', 'table', 'markdown',
-            'fusion-fragment', 'code', 'image', 'auto'
+            'fusion-fragment', 'mockup', 'code', 'image', 'auto'
         ];
         return validTypes.includes(type) ? type : 'auto';
     }, [language]);
@@ -467,7 +468,7 @@ export function createDefaultCodeBlockHandlers(): Record<
     React.FunctionComponent<CodeBlockRendererProps>
 > {
     return {
-        // Chart handler for generic chart code blocks (auto-detects library)
+        // Chart handler for generic chart code blocks (Vega-Lite only)
         chart: ChartCodeBlockHandler,
         // Vega-Lite handlers - always treat as Vega-Lite
         'vega-lite': VegaLiteCodeBlockHandler,
@@ -476,6 +477,10 @@ export function createDefaultCodeBlockHandlers(): Record<
         // Mermaid handler
         mermaid: MermaidCodeBlockHandler,
 
+        // Mockup handler (inline SVG)
+        mockup: MockupCodeBlockHandler,
+        svg: MockupCodeBlockHandler,
+
         // Proposal handlers
         proposal: ProposalCodeBlockHandler,
         askuser: ProposalCodeBlockHandler,

package/src/widgets/markdown/index.ts

@@ -7,6 +7,7 @@ export {
 export { MarkdownRenderer, type MarkdownRendererProps } from './MarkdownRenderer';
 export { MarkdownLink, type MarkdownLinkProps } from './MarkdownLink';
 export { MarkdownImage, type MarkdownImageProps } from './MarkdownImage';
+export { MarkdownFigure, type MarkdownFigureProps } from './MarkdownFigure';
 export {
     useResolvedUrl,
     parseUrlScheme,

package/src/widgets/markdown/markdown.css

@@ -0,0 +1,192 @@
+/*
+ * Markdown extension styles for MarkdownRenderer.
+ *
+ * Uses CSS custom properties from the Tailwind theme so colours
+ * adapt automatically to light/dark mode.
+ *
+ * Consumers must import this file in their app entry point:
+ *   import '@vertesia/ui/src/widgets/markdown/markdown.css';
+ */
+
+/* ------------------------------------------------------------------ */
+/* Page break (:::pagebreak)                                          */
+/* Rendered as a subtle divider on the web (actual break in PDF)      */
+/* ------------------------------------------------------------------ */
+
+.md-pagebreak {
+    border: none;
+    border-top: 2px dashed var(--color-border);
+    margin: 2rem 0;
+}
+
+/* ------------------------------------------------------------------ */
+/* Columns layout (:::columns / :::column)                            */
+/* ------------------------------------------------------------------ */
+
+.md-columns {
+    display: flex;
+    gap: 1rem;
+    align-items: flex-start;
+}
+
+.md-columns > .md-column {
+    flex: 1 1 0%;
+    min-width: 0;
+}
+
+/* Stack on narrow viewports */
+@media (max-width: 640px) {
+    .md-columns {
+        flex-direction: column;
+    }
+}
+
+/* ------------------------------------------------------------------ */
+/* Callout containers (:::note, :::tip, :::warning, etc.)             */
+/* ------------------------------------------------------------------ */
+
+.md-callout {
+    border-left: 4px solid var(--color-border);
+    border-radius: var(--radius-sm, 4px);
+    padding: 0.75rem 1rem;
+    margin: 1rem 0;
+    background: var(--color-muted-background, oklch(0.97 0 0));
+}
+
+.md-callout .md-callout-title {
+    font-weight: 600;
+    margin-bottom: 0.25rem;
+}
+
+/* Semantic variants */
+.md-callout-info {
+    border-left-color: var(--color-info);
+    background: color-mix(in oklch, var(--color-info) 8%, var(--color-background));
+}
+
+.md-callout-info > .md-callout-title {
+    color: var(--color-info);
+}
+
+.md-callout-attention {
+    border-left-color: var(--color-attention);
+    background: color-mix(in oklch, var(--color-attention) 8%, var(--color-background));
+}
+
+.md-callout-attention > .md-callout-title {
+    color: var(--color-attention);
+}
+
+.md-callout-destructive {
+    border-left-color: var(--color-destructive);
+    background: color-mix(in oklch, var(--color-destructive) 8%, var(--color-background));
+}
+
+.md-callout-destructive > .md-callout-title {
+    color: var(--color-destructive);
+}
+
+/* ------------------------------------------------------------------ */
+/* GitHub-style blockquote alerts (> [!NOTE], > [!WARNING], etc.)      */
+/* Uses classes from remark-github-blockquote-alert                   */
+/* ------------------------------------------------------------------ */
+
+.markdown-alert {
+    border-left: 4px solid var(--color-border);
+    border-radius: var(--radius-sm, 4px);
+    padding: 0.75rem 1rem;
+    margin: 1rem 0;
+    background: var(--color-muted-background, oklch(0.97 0 0));
+}
+
+.markdown-alert .markdown-alert-title {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-weight: 600;
+    margin-bottom: 0.25rem;
+}
+
+.markdown-alert .markdown-alert-title svg {
+    width: 1em;
+    height: 1em;
+    flex-shrink: 0;
+}
+
+/* NOTE, TIP → info */
+.markdown-alert-note,
+.markdown-alert-tip {
+    border-left-color: var(--color-info);
+    background: color-mix(in oklch, var(--color-info) 8%, var(--color-background));
+}
+
+.markdown-alert-note > .markdown-alert-title,
+.markdown-alert-tip > .markdown-alert-title {
+    color: var(--color-info);
+}
+
+/* WARNING, IMPORTANT → attention */
+.markdown-alert-warning,
+.markdown-alert-important {
+    border-left-color: var(--color-attention);
+    background: color-mix(in oklch, var(--color-attention) 8%, var(--color-background));
+}
+
+.markdown-alert-warning > .markdown-alert-title,
+.markdown-alert-important > .markdown-alert-title {
+    color: var(--color-attention);
+}
+
+/* CAUTION → destructive */
+.markdown-alert-caution {
+    border-left-color: var(--color-destructive);
+    background: color-mix(in oklch, var(--color-destructive) 8%, var(--color-background));
+}
+
+.markdown-alert-caution > .markdown-alert-title {
+    color: var(--color-destructive);
+}
+
+/* ------------------------------------------------------------------ */
+/* Definition lists (<dl>, <dt>, <dd>)                                */
+/* ------------------------------------------------------------------ */
+
+.md-content dl {
+    margin: 1rem 0;
+}
+
+.md-content dt {
+    font-weight: 600;
+    margin-top: 0.75rem;
+}
+
+.md-content dt:first-child {
+    margin-top: 0;
+}
+
+.md-content dd {
+    margin-left: 1.5rem;
+    margin-top: 0.25rem;
+}
+
+/* ------------------------------------------------------------------ */
+/* Figures (<figure> / <figcaption>)                                  */
+/* ------------------------------------------------------------------ */
+
+.md-content figure {
+    margin: 1.5rem 0;
+    text-align: center;
+}
+
+.md-content figure img {
+    max-width: 100%;
+    height: auto;
+    margin: 0 auto;
+}
+
+.md-content figcaption {
+    font-size: 0.875rem;
+    color: var(--color-muted);
+    margin-top: 0.5rem;
+    font-style: italic;
+}