fix: render single theme-appropriate image instead of showing both dark and light

SSR was rendering both dark and light img tags, relying on CSS class
toggling to hide one. Before stylesheet load, both images were visible.
Replace with a ThemeImage component that uses VitePress isDark reactive
state to render only one img with the correct src.

Author: SamHatoum

.vitepress/theme/components/ThemeImage.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { useData } from 'vitepress'
+
+const { isDark } = useData()
+
+defineProps<{
+  dark: string
+  light: string
+  alt?: string
+}>()
+</script>
+
+<template>
+  <img
+    :src="isDark ? dark : light"
+    :alt="alt ?? ''"
+    style="border-radius: 8px; border: 1px solid var(--vp-c-divider);"
+  />
+</template>

.vitepress/theme/index.ts

@@ -3,6 +3,7 @@ import './custom.css';
 import posthog from 'posthog-js';
 import { h } from 'vue';
 import AnimatedHero from './components/AnimatedHero.vue';
+import ThemeImage from './components/ThemeImage.vue';
 
 export default {
   extends: DefaultTheme,
@@ -11,7 +12,8 @@ export default {
       'home-hero-before': () => h(AnimatedHero),
     });
   },
-  enhanceApp({ router }) {
+  enhanceApp({ app, router }) {
+    app.component('ThemeImage', ThemeImage);
     if (typeof window !== 'undefined') {
       // Prevent font swap jank: hide body until Barlow is loaded
       document.fonts.ready.then(() => {

docs/guides/see-it.md

@@ -19,13 +19,11 @@ Narrative-Driven Development is a model-based approach. The same specification r
 
 **The Visual View** (for designers and product teams):
 
-<img class="only-dark" src="/visual-canvas-dark.png" alt="User journey map showing the gym membership narrative as a visual timeline with moments, interfaces, and system actions" style="border-radius: 8px; border: 1px solid var(--vp-c-divider);">
-<img class="only-light" src="/visual-canvas-light.png" alt="User journey map showing the gym membership narrative as a visual timeline with moments, interfaces, and system actions" style="border-radius: 8px; border: 1px solid var(--vp-c-divider);">
+<ThemeImage dark="/visual-canvas-dark.png" light="/visual-canvas-light.png" alt="User journey map showing the gym membership narrative as a visual timeline with moments, interfaces, and system actions" />
 
 **The Document View** (for PMs, QA, and stakeholders):
 
-<img class="only-dark" src="/structured-doc-dark.png" alt="Structured document showing the gym membership narrative as readable specifications with business rules, acceptance criteria, and edge cases" style="border-radius: 8px; border: 1px solid var(--vp-c-divider);">
-<img class="only-light" src="/structured-doc-light.png" alt="Structured document showing the gym membership narrative as readable specifications with business rules, acceptance criteria, and edge cases" style="border-radius: 8px; border: 1px solid var(--vp-c-divider);">
+<ThemeImage dark="/structured-doc-dark.png" light="/structured-doc-light.png" alt="Structured document showing the gym membership narrative as readable specifications with business rules, acceptance criteria, and edge cases" />
 
 **The Code View** (for developers):