skrypt-ai 0.4.2 → 0.6.0

package/dist/template/src/components/docs-layout.tsx

@@ -13,16 +13,23 @@ import { Feedback } from './feedback'
 import { EditLink } from './edit-link'
 import { Footer } from './footer'
 import { ScrollToTop } from './scroll-to-top'
+import { ScrollToHash } from './scroll-to-hash'
+import { CopyPageButton } from './copy-page-button'
+import {
+  hasTabs,
+  getTabGroups,
+  getAllPagesFlat,
+  findPageInNavigation,
+  type Navigation,
+  type NavTab,
+  type NavGroup,
+} from '@/lib/navigation'
 
 interface DocsConfig {
   name?: string
   headerLinks?: Array<{ title: string; path: string }>
   logo?: string
-  navigation: Array<{
-    group: string
-    icon?: string
-    pages: Array<{ title: string; path: string; description?: string }>
-  }>
+  navigation: Navigation
   footer?: {
     links?: Array<{ title: string; url: string }>
   }
@@ -33,13 +40,9 @@ interface DocsConfig {
   }
 }
 
-function getAllPages(config: DocsConfig): Array<{ title: string; path: string }> {
-  return config.navigation.flatMap((group) => group.pages)
-}
-
 function PrevNextNav({ docsConfig }: { docsConfig: DocsConfig }) {
   const pathname = usePathname()
-  const allPages = getAllPages(docsConfig)
+  const allPages = getAllPagesFlat(docsConfig.navigation)
   const currentIndex = allPages.findIndex((p) => p.path === pathname)
 
   if (currentIndex === -1) return null
@@ -103,15 +106,21 @@ function MobileTOC() {
       'returned validator function', 'requirements',
       'when results are returned', 'when each value is returned',
       'validationresult shape',
+      'example', 'related', 'notes', 'properties',
     ])
 
+    const seenIds = new Set<string>()
+
     elements.forEach((el) => {
       const text = el.textContent || ''
       const normalized = text.toLowerCase().trim()
       if (genericHeadings.has(normalized)) return
+      if (el.closest('.card-link') || el.closest('[data-card]')) return
 
       const id = el.id || normalized.replace(/\s+/g, '-')
       if (!el.id) el.id = id
+      if (seenIds.has(id)) return
+      seenIds.add(id)
       items.push({ id, text, level: parseInt(el.tagName[1]) })
     })
 
@@ -154,17 +163,6 @@ function MobileTOC() {
   )
 }
 
-function getPageInfo(docsConfig: DocsConfig, pathname: string): { title?: string; description?: string } {
-  for (const group of docsConfig.navigation) {
-    for (const page of group.pages) {
-      if (page.path === pathname) {
-        return { title: page.title, description: page.description }
-      }
-    }
-  }
-  return {}
-}
-
 export function DocsLayout({
   children,
   docsConfig,
@@ -178,19 +176,28 @@ export function DocsLayout({
 }) {
   const [menuOpen, setMenuOpen] = useState(false)
   const [frontmatterDescription, setFrontmatterDescription] = useState<string | undefined>()
+  const [rawContent, setRawContent] = useState<string | undefined>()
   const pathname = usePathname()
 
-  // Read frontmatter description passed from the server component via data attribute
+  // Read frontmatter description and raw content passed from the server component via data attributes
   useEffect(() => {
     const el = document.querySelector('[data-page-description]')
     setFrontmatterDescription(el?.getAttribute('data-page-description') ?? undefined)
+
+    const rawEl = document.getElementById('raw-page-content')
+    const b64 = rawEl?.getAttribute('data-content')
+    setRawContent(b64 ? atob(b64) : undefined)
   }, [pathname])
 
   // Resolve title from props, falling back to docs.json navigation lookup
-  const pageInfo = getPageInfo(docsConfig, pathname)
+  const pageInfo = findPageInNavigation(docsConfig.navigation, pathname)
   const resolvedTitle = pageTitle ?? pageInfo.title
   const resolvedDescription = pageDescription ?? frontmatterDescription ?? pageInfo.description
 
+  // Tab support
+  const tabs: NavTab[] | undefined = hasTabs(docsConfig.navigation) ? docsConfig.navigation : undefined
+  const sidebarGroups: NavGroup[] = getTabGroups(docsConfig.navigation, pathname)
+
   return (
     <div className="min-h-screen flex flex-col">
       <Header
@@ -199,18 +206,22 @@ export function DocsLayout({
         siteName={docsConfig.name}
         navLinks={docsConfig.headerLinks}
         logo={docsConfig.logo}
+        tabs={tabs}
       />
       <div className="flex flex-1">
         <Sidebar
           open={menuOpen}
           onClose={() => setMenuOpen(false)}
-          docsConfig={docsConfig}
+          groups={sidebarGroups}
         />
         <main id="main-content" className="flex-1 min-w-0 px-6 md:px-10 py-8 lg:ml-[var(--sidebar-width)] lg:mr-[var(--toc-width)]">
           <div className="max-w-[var(--content-max-width)] mx-auto">
             <Breadcrumbs docsConfig={docsConfig} />
             {resolvedTitle && (
-              <PageHeader title={resolvedTitle} description={resolvedDescription} />
+              <div className="flex items-start justify-between gap-4">
+                <PageHeader title={resolvedTitle} description={resolvedDescription} />
+                {rawContent && <CopyPageButton content={rawContent} />}
+              </div>
             )}
             <MobileTOC />
             <article className="prose">
@@ -232,6 +243,7 @@ export function DocsLayout({
       </div>
       <Footer docsConfig={docsConfig} />
       <ScrollToTop />
+      <ScrollToHash />
     </div>
   )
 }

package/dist/template/src/components/header.tsx

@@ -1,11 +1,20 @@
 'use client'
 
 import Link from 'next/link'
-import { Search, Menu, X } from 'lucide-react'
+import { usePathname } from 'next/navigation'
+import { Search, Menu, X, BookOpen, Code, FileText, Settings, Key, Zap, Shield, Globe, Terminal, Database, Cloud, Lock, Rocket, Star, Heart, Package, Puzzle, GitBranch, Cpu, List } from 'lucide-react'
 import { useState, useEffect } from 'react'
 import { SearchDialog } from './search-dialog'
 import { ThemeToggle } from './theme-toggle'
 import { SyntaxThemeSelector } from './syntax-theme-selector'
+import type { NavTab } from '@/lib/navigation'
+import { getActiveTab, getTabHref } from '@/lib/navigation'
+
+const tabIconMap: Record<string, React.ComponentType<{ size?: number; className?: string }>> = {
+  BookOpen, Code, FileText, Settings, Key, Zap, Shield, Globe,
+  Terminal, Database, Cloud, Lock, Rocket, Search, Star, Heart,
+  Package, Puzzle, GitBranch, Cpu, List,
+}
 
 interface HeaderProps {
   onMenuToggle?: () => void
@@ -13,11 +22,13 @@ interface HeaderProps {
   siteName?: string
   navLinks?: Array<{ title: string; path: string }>
   logo?: string
+  tabs?: NavTab[]
 }
 
-export function Header({ onMenuToggle, menuOpen, siteName = 'Docs', navLinks, logo }: HeaderProps) {
+export function Header({ onMenuToggle, menuOpen, siteName = 'Docs', navLinks, logo, tabs }: HeaderProps) {
   const [searchOpen, setSearchOpen] = useState(false)
   const [isMac, setIsMac] = useState(true)
+  const pathname = usePathname()
 
   useEffect(() => {
     setIsMac(
@@ -37,10 +48,12 @@ export function Header({ onMenuToggle, menuOpen, siteName = 'Docs', navLinks, lo
     return () => document.removeEventListener('keydown', handleKeyDown)
   }, [])
 
+  const activeTab = tabs ? getActiveTab(pathname, tabs) : null
+
   return (
     <>
-      <header className="sticky top-0 z-50 h-[var(--header-height)] border-b border-[var(--color-border)] bg-[var(--color-bg)]/80 backdrop-blur-xl">
-        <div className="flex items-center justify-between h-full px-4 md:px-6">
+      <header className="sticky top-0 z-50 border-b border-[var(--color-border)] bg-[var(--color-bg)]/80 backdrop-blur-xl">
+        <div className="flex items-center justify-between h-[var(--header-height)] px-4 md:px-6">
           <div className="flex items-center gap-6">
             {/* Mobile menu button */}
             <button
@@ -61,12 +74,14 @@ export function Header({ onMenuToggle, menuOpen, siteName = 'Docs', navLinks, lo
             </Link>
 
             <nav className="hidden md:flex items-center gap-1">
-              <Link
-                href="/docs"
-                className="px-3 py-1.5 text-[0.8125rem] text-[var(--color-text-secondary)] hover:text-[var(--color-text)] hover:bg-[var(--color-bg-secondary)] rounded-lg hover:no-underline"
-              >
-                Documentation
-              </Link>
+              {!tabs && (
+                <Link
+                  href="/docs"
+                  className="px-3 py-1.5 text-[0.8125rem] text-[var(--color-text-secondary)] hover:text-[var(--color-text)] hover:bg-[var(--color-bg-secondary)] rounded-lg hover:no-underline"
+                >
+                  Documentation
+                </Link>
+              )}
               {navLinks?.map((link) => (
                 <Link
                   key={link.path}
@@ -94,6 +109,32 @@ export function Header({ onMenuToggle, menuOpen, siteName = 'Docs', navLinks, lo
             <ThemeToggle />
           </div>
         </div>
+
+        {/* Tab bar */}
+        {tabs && tabs.length > 0 && (
+          <div className="flex items-center gap-0 px-4 md:px-6 overflow-x-auto scrollbar-hide border-t border-[var(--color-border)]/50">
+            {tabs.map((tab) => {
+              const isActive = activeTab?.tab === tab.tab
+              const Icon = tab.icon ? tabIconMap[tab.icon] : null
+              const href = getTabHref(tab)
+
+              return (
+                <Link
+                  key={tab.tab}
+                  href={href}
+                  className={`flex items-center gap-1.5 px-3 py-2 text-[0.8125rem] whitespace-nowrap border-b-2 transition-colors hover:no-underline ${
+                    isActive
+                      ? 'border-[var(--color-primary)] text-[var(--color-primary)] font-medium'
+                      : 'border-transparent text-[var(--color-text-tertiary)] hover:text-[var(--color-text)]'
+                  }`}
+                >
+                  {Icon && <Icon size={14} />}
+                  {tab.tab}
+                </Link>
+              )
+            })}
+          </div>
+        )}
       </header>
 
       <SearchDialog open={searchOpen} onClose={() => setSearchOpen(false)} />

package/dist/template/src/components/mdx/card.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import Link from 'next/link'
 import { cn } from '@/lib/utils'
 import {
@@ -25,7 +27,7 @@ export function Card({ title, icon, href, children }: CardProps) {
   const Icon = icon ? iconMap[icon] : null
 
   const content = (
-    <div className={cn(
+    <div data-card="" className={cn(
       'group p-4 sm:px-6 sm:py-5 rounded-2xl border border-[var(--color-border)] bg-[var(--color-bg)] overflow-hidden w-full',
       href && 'cursor-pointer hover:!border-[var(--color-primary)]'
     )}>
@@ -36,7 +38,7 @@ export function Card({ title, icon, href, children }: CardProps) {
           </div>
         )}
         <div>
-          <h3 className="font-semibold text-[0.9375rem] text-[var(--color-text)] !mt-0 !mb-0">{title}</h3>
+          <p className="font-semibold text-[0.9375rem] text-[var(--color-text)] !mt-0 !mb-0">{title}</p>
           {children && (
             <div className="mt-1.5 text-[0.8125rem] leading-relaxed text-[var(--color-text-secondary)]">
               {children}
@@ -48,7 +50,19 @@ export function Card({ title, icon, href, children }: CardProps) {
   )
 
   if (href) {
-    return <Link href={href} className="hover:no-underline">{content}</Link>
+    if (href.startsWith('#')) {
+      const handleClick = (e: React.MouseEvent) => {
+        e.preventDefault()
+        const id = href.slice(1)
+        const target = document.getElementById(id)
+        if (target) {
+          target.scrollIntoView({ behavior: 'smooth', block: 'start' })
+          window.history.pushState(null, '', href)
+        }
+      }
+      return <a href={href} onClick={handleClick} className="card-link no-underline hover:no-underline">{content}</a>
+    }
+    return <Link href={href} className="card-link no-underline hover:no-underline">{content}</Link>
   }
 
   return content

package/dist/template/src/components/mdx/code-block.tsx

@@ -25,15 +25,19 @@ export function CodeBlock({ children, className }: CodeBlockProps) {
       setCopied(true)
       setTimeout(() => setCopied(false), 2000)
     } catch {
-      // Fallback for insecure contexts
-      const textarea = document.createElement('textarea')
-      textarea.value = codeText
-      textarea.style.position = 'fixed'
-      textarea.style.opacity = '0'
-      document.body.appendChild(textarea)
-      textarea.select()
-      document.execCommand('copy')
-      document.body.removeChild(textarea)
+      // Deprecated fallback for older browsers that don't support navigator.clipboard
+      try {
+        const textarea = document.createElement('textarea')
+        textarea.value = codeText
+        textarea.style.position = 'fixed'
+        textarea.style.opacity = '0'
+        document.body.appendChild(textarea)
+        textarea.select()
+        document.execCommand('copy') // deprecated but kept for old browser compat
+        document.body.removeChild(textarea)
+      } catch {
+        // Copy failed in both methods — silently ignore
+      }
       setCopied(true)
       setTimeout(() => setCopied(false), 2000)
     }

package/dist/template/src/components/mdx/code-group.tsx

@@ -93,14 +93,19 @@ export function CodeGroup({ children }: CodeGroupProps) {
       setCopied(true)
       setTimeout(() => setCopied(false), 2000)
     } catch {
-      const textarea = document.createElement('textarea')
-      textarea.value = activeBlock.code
-      textarea.style.position = 'fixed'
-      textarea.style.opacity = '0'
-      document.body.appendChild(textarea)
-      textarea.select()
-      document.execCommand('copy')
-      document.body.removeChild(textarea)
+      // Deprecated fallback for older browsers that don't support navigator.clipboard
+      try {
+        const textarea = document.createElement('textarea')
+        textarea.value = activeBlock.code
+        textarea.style.position = 'fixed'
+        textarea.style.opacity = '0'
+        document.body.appendChild(textarea)
+        textarea.select()
+        document.execCommand('copy') // deprecated but kept for old browser compat
+        document.body.removeChild(textarea)
+      } catch {
+        // Copy failed in both methods — silently ignore
+      }
       setCopied(true)
       setTimeout(() => setCopied(false), 2000)
     }

package/dist/template/src/components/mdx/heading.tsx

@@ -9,10 +9,23 @@ interface HeadingProps {
   id?: string
 }
 
+/** Extract plain text from React children (handles <code>, <em>, etc.) */
+function getTextContent(node: ReactNode): string {
+  if (typeof node === 'string') return node
+  if (typeof node === 'number') return String(node)
+  if (!node) return ''
+  if (Array.isArray(node)) return node.map(getTextContent).join('')
+  if (typeof node === 'object' && 'props' in node) {
+    return getTextContent((node as any).props.children)
+  }
+  return ''
+}
+
 export function Heading({ level, children, id }: HeadingProps) {
   const Tag = `h${level}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
-  const headingId = id || (typeof children === 'string'
-    ? children.toLowerCase().replace(/\s+/g, '-').replace(/[^\w-]/g, '')
+  const text = getTextContent(children)
+  const headingId = id || (text
+    ? text.toLowerCase().replace(/\s+/g, '-').replace(/[^\w-]/g, '')
     : undefined)
 
   return (

package/dist/template/src/components/mdx/highlighted-code.tsx

@@ -159,14 +159,19 @@ export function HighlightedCode({ children, className }: HighlightedCodeProps) {
     try {
       await navigator.clipboard.writeText(codeText)
     } catch {
-      const textarea = document.createElement('textarea')
-      textarea.value = codeText
-      textarea.style.position = 'fixed'
-      textarea.style.opacity = '0'
-      document.body.appendChild(textarea)
-      textarea.select()
-      document.execCommand('copy')
-      document.body.removeChild(textarea)
+      // Deprecated fallback for older browsers that don't support navigator.clipboard
+      try {
+        const textarea = document.createElement('textarea')
+        textarea.value = codeText
+        textarea.style.position = 'fixed'
+        textarea.style.opacity = '0'
+        document.body.appendChild(textarea)
+        textarea.select()
+        document.execCommand('copy') // deprecated but kept for old browser compat
+        document.body.removeChild(textarea)
+      } catch {
+        // Copy failed in both methods — silently ignore
+      }
     }
     setCopied(true)
     setShowToast(true)

package/dist/template/src/components/mdx/index.tsx

@@ -17,3 +17,5 @@ export { Tooltip } from './tooltip'
 export { Frame } from './frame'
 export { DarkImage } from './dark-image'
 export { LinkPreview } from './link-preview'
+export { Mermaid } from './mermaid'
+export { Screenshot } from './screenshot'

package/dist/template/src/components/mdx/mermaid.tsx

@@ -0,0 +1,110 @@
+'use client'
+
+import { useState, useEffect, useRef, useId } from 'react'
+
+interface MermaidProps {
+  chart: string
+  className?: string
+}
+
+export function Mermaid({ chart, className }: MermaidProps) {
+  const [svg, setSvg] = useState<string | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const id = useId().replace(/:/g, '-')
+
+  useEffect(() => {
+    let cancelled = false
+
+    async function renderDiagram() {
+      try {
+        const mermaid = (await import('mermaid')).default
+
+        // Detect dark mode
+        const isDark = document.documentElement.classList.contains('dark')
+
+        mermaid.initialize({
+          startOnLoad: false,
+          theme: isDark ? 'dark' : 'default',
+          securityLevel: 'strict',
+          fontFamily: 'inherit',
+        })
+
+        const { svg: rendered } = await mermaid.render(`mermaid-${id}`, chart.trim())
+        if (!cancelled) {
+          setSvg(rendered)
+          setError(null)
+        }
+      } catch (err) {
+        if (!cancelled) {
+          setError(err instanceof Error ? err.message : 'Failed to render diagram')
+          setSvg(null)
+        }
+      }
+    }
+
+    renderDiagram()
+    return () => { cancelled = true }
+  }, [chart, id])
+
+  // Re-render when theme changes
+  useEffect(() => {
+    const observer = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        if (mutation.attributeName === 'class') {
+          // Theme class changed, re-render
+          const isDark = document.documentElement.classList.contains('dark')
+          import('mermaid').then(({ default: mermaid }) => {
+            mermaid.initialize({
+              startOnLoad: false,
+              theme: isDark ? 'dark' : 'default',
+              securityLevel: 'strict',
+              fontFamily: 'inherit',
+            })
+            // Remove old rendered element if it exists
+            const oldEl = document.getElementById(`mermaid-${id}`)
+            if (oldEl) oldEl.remove()
+
+            mermaid.render(`mermaid-${id}`, chart.trim()).then(({ svg: rendered }) => {
+              setSvg(rendered)
+              setError(null)
+            }).catch(() => {
+              // Ignore re-render errors
+            })
+          })
+        }
+      }
+    })
+
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
+    return () => observer.disconnect()
+  }, [chart, id])
+
+  if (error) {
+    return (
+      <div className={`my-5 p-4 rounded-2xl border border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-950 ${className || ''}`}>
+        <p className="text-sm text-red-600 dark:text-red-400 font-medium mb-1">Diagram error</p>
+        <pre className="text-xs text-red-500 dark:text-red-400 whitespace-pre-wrap">{error}</pre>
+      </div>
+    )
+  }
+
+  if (!svg) {
+    return (
+      <div className={`my-5 flex items-center justify-center p-8 rounded-2xl border border-[var(--color-border)] bg-[var(--color-bg-secondary)] ${className || ''}`}>
+        <div className="flex items-center gap-2 text-sm text-[var(--color-text-tertiary)]">
+          <div className="w-4 h-4 border-2 border-[var(--color-text-tertiary)] border-t-transparent rounded-full animate-spin" />
+          Loading diagram...
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      className={`my-5 flex justify-center p-4 rounded-2xl border border-[var(--color-border)] bg-[var(--color-bg)] overflow-x-auto [&_svg]:max-w-full ${className || ''}`}
+      dangerouslySetInnerHTML={{ __html: svg }}
+    />
+  )
+}

package/dist/template/src/components/mdx/screenshot.tsx

@@ -0,0 +1,150 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { cn } from '@/lib/utils'
+
+interface ScreenshotProps {
+  url: string
+  selector?: string
+  alt: string
+  caption?: string
+  className?: string
+}
+
+/**
+ * Compute the expected screenshot filename from url + selector.
+ * Must match the naming logic in src/capture/naming.ts.
+ */
+function computeFilename(url: string, selector?: string): string {
+  let pathname: string
+  try {
+    pathname = new URL(url).pathname
+  } catch {
+    pathname = url
+  }
+
+  let slug = pathname.replace(/^\/+/, '')
+  slug = slug.replace(/\//g, '-')
+  if (!slug) slug = 'index'
+  slug = slug.replace(/[^a-zA-Z0-9-]/g, '-').replace(/-+/g, '-').replace(/^-|-$/g, '')
+
+  if (selector) {
+    let selectorSlug = selector.replace(/^[.#]/, '')
+    selectorSlug = selectorSlug.replace(/[^a-zA-Z0-9-]/g, '-').replace(/-+/g, '-').replace(/^-|-$/g, '')
+    slug = `${slug}--${selectorSlug}`
+  }
+
+  return `${slug}.png`
+}
+
+function getIsDark(): boolean {
+  if (typeof document === 'undefined') return false
+  if (document.documentElement.classList.contains('dark')) return true
+  if (document.documentElement.classList.contains('light')) return false
+  return window.matchMedia('(prefers-color-scheme: dark)').matches
+}
+
+function TrafficDots() {
+  return (
+    <div className="flex items-center gap-1.5">
+      <span className="block w-2 h-2 rounded-full bg-[#ff5f57]" />
+      <span className="block w-2 h-2 rounded-full bg-[#febc2e]" />
+      <span className="block w-2 h-2 rounded-full bg-[#28c840]" />
+    </div>
+  )
+}
+
+export function Screenshot({ url, selector, alt, caption, className }: ScreenshotProps) {
+  const [isDark, setIsDark] = useState(false)
+  const [hasError, setHasError] = useState(false)
+  const [fallbackToLight, setFallbackToLight] = useState(false)
+
+  const lightFile = computeFilename(url, selector)
+  const darkFile = lightFile.replace(/\.png$/, '-dark.png')
+
+  useEffect(() => {
+    setIsDark(getIsDark())
+
+    const mq = window.matchMedia('(prefers-color-scheme: dark)')
+    const onMediaChange = () => setIsDark(getIsDark())
+    mq.addEventListener('change', onMediaChange)
+
+    const observer = new MutationObserver(() => {
+      setIsDark(getIsDark())
+    })
+
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class'],
+    })
+
+    return () => {
+      mq.removeEventListener('change', onMediaChange)
+      observer.disconnect()
+    }
+  }, [])
+
+  const imageSrc = `/screenshots/${isDark && !fallbackToLight ? darkFile : lightFile}`
+
+  // Extract display URL for browser chrome
+  let displayUrl: string
+  try {
+    const parsed = new URL(url)
+    displayUrl = `${parsed.origin}${parsed.pathname}`
+  } catch {
+    displayUrl = url
+  }
+
+  return (
+    <figure
+      className={cn('my-4', className)}
+      data-screenshot-url={url}
+      data-screenshot-selector={selector}
+    >
+      <div className="rounded-xl border border-[var(--color-border)] overflow-hidden">
+        {/* Browser chrome with actual URL */}
+        <div className="flex items-center gap-3 px-3.5 py-2.5 border-b border-[var(--color-border)] bg-[var(--color-bg-secondary)]">
+          <TrafficDots />
+          <div className="flex-1 h-5 rounded-md bg-[var(--color-bg)] border border-[var(--color-border)] px-2.5 flex items-center">
+            <span className="text-[10px] text-[var(--color-text-tertiary)] select-none truncate">
+              {displayUrl}
+            </span>
+          </div>
+        </div>
+
+        {/* Screenshot image */}
+        <div className="[&>img]:!m-0 [&>img]:!rounded-none [&>img]:block [&>img]:w-full">
+          {hasError ? (
+            <div className="flex items-center justify-center p-8 bg-[var(--color-bg-secondary)] text-[var(--color-text-tertiary)] text-sm">
+              <p>
+                Screenshot not captured yet — run{' '}
+                <code className="px-1.5 py-0.5 rounded bg-[var(--color-bg)] border border-[var(--color-border)] text-xs">
+                  skrypt heal --screenshots
+                </code>
+              </p>
+            </div>
+          ) : (
+            <img
+              src={imageSrc}
+              alt={alt}
+              loading="lazy"
+              onError={() => {
+                if (isDark && !fallbackToLight) {
+                  setFallbackToLight(true)
+                } else {
+                  setHasError(true)
+                }
+              }}
+            />
+          )}
+        </div>
+      </div>
+
+      {caption && (
+        <figcaption className="text-sm text-[var(--color-text-tertiary)] mt-2 text-center">
+          {caption}
+        </figcaption>
+      )}
+    </figure>
+  )
+}