docs: add AppImage component and markdown image shorthand

Wraps the v0 Image compound (Root/Img/Placeholder/Fallback) into a figure
with lazy loading (200px rootMargin), a skeleton placeholder, rounded
corners, a Retry-button fallback, and an optional figcaption. Overrides
markdown-it's image rule so ![alt](url "caption") emits <AppImage> with
the title attribute mapped to caption.

Author: johnleider

apps/docs/build/markdown.ts

@@ -459,6 +459,17 @@ export function applyMarkdownPlugins (md: MarkdownIt, highlighter: DocsHighlight
   md.renderer.rules.table_open = () => '<div class="overflow-x-auto mb-4"><table>'
   md.renderer.rules.table_close = () => '</table></div>'
 
+  // Emit <AppImage> for markdown images: ![alt](src "title") — title maps to caption
+  md.renderer.rules.image = (tokens, index) => {
+    const token = tokens[index]
+    const src = token.attrGet('src') ?? ''
+    const alt = token.content || token.attrGet('alt') || ''
+    const title = token.attrGet('title')
+    const escape = md.utils.escapeHtml
+    const captionAttr = title ? ` caption="${escape(title)}"` : ''
+    return `<AppImage src="${escape(src)}" alt="${escape(alt)}"${captionAttr} />`
+  }
+
   md.renderer.rules.link_open = (tokens, index, options, env, self) => {
     const t = tokens[index]
     const classes = t.attrGet('class') || ''

apps/docs/src/components/app/AppImage.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+  // Framework
+  import { Image } from '@vuetify/v0'
+
+  const { src, alt, caption } = defineProps<{
+    src: string
+    alt: string
+    caption?: string
+  }>()
+</script>
+
+<template>
+  <figure class="my-4">
+    <Image.Root
+      :lazy="true"
+      root-margin="200px"
+      :src
+    >
+      <Image.Placeholder>
+        <div class="bg-surface-variant animate-pulse w-full rounded-lg" style="min-height: 12rem" />
+      </Image.Placeholder>
+      <Image.Img
+        :alt
+        class="rounded-lg w-full block"
+      />
+      <Image.Fallback v-slot="{ retry }">
+        <div class="bg-surface-variant text-on-surface-variant flex flex-col items-center justify-center gap-2 rounded-lg w-full p-6" style="min-height: 12rem">
+          <span class="text-sm">Failed to load image</span>
+          <button
+            class="text-xs bg-surface text-on-surface rounded px-3 py-1 hover:bg-surface-tint"
+            type="button"
+            @click="retry"
+          >
+            Retry
+          </button>
+        </div>
+      </Image.Fallback>
+    </Image.Root>
+    <figcaption
+      v-if="caption"
+      class="text-sm text-on-surface-variant mt-2 text-center"
+    >
+      {{ caption }}
+    </figcaption>
+  </figure>
+</template>