feat(variant): image preview on variant creation with a real sample image

web/src/components/variants/ImageCompare.vue

@@ -17,6 +17,8 @@ const CHIP =
 const props = defineProps<{
 	name: string
 	comparable: boolean
+	originalSrc?: string | null
+	variantSrc?: string | null
 }>()
 
 const position = defineModel<number>({ default: 50 })
@@ -64,7 +66,13 @@ function onKeydown(event: KeyboardEvent) {
 			class="absolute inset-0 flex items-center justify-center bg-(--ui-color-secondary-200) text-muted dark:bg-(--ui-color-secondary-300)"
 			:class="PATTERN"
 		>
-			<UIcon name="i-lucide-image" class="size-8 opacity-55" />
+			<img
+				v-if="originalSrc"
+				:src="originalSrc"
+				alt=""
+				class="absolute inset-0 size-full object-cover"
+			/>
+			<UIcon v-else name="i-lucide-image" class="size-8 opacity-55" />
 		</div>
 		<template v-if="comparable">
 			<div
@@ -72,7 +80,14 @@ function onKeydown(event: KeyboardEvent) {
 				class="absolute inset-0 bg-accented"
 				:class="VARIANT_PATTERN"
 				:style="{ clipPath: `inset(0 0 0 ${position}%)` }"
-			/>
+			>
+				<img
+					v-if="variantSrc"
+					:src="variantSrc"
+					alt=""
+					class="absolute inset-0 size-full object-contain"
+				/>
+			</div>
 			<span :class="[CHIP, 'left-2']">{{ t('Original') }}</span>
 			<span :class="[CHIP, 'right-2 font-mono']">{{ shownName }}</span>
 			<input