feat(integration): add image variants section and standardize code snippets

web/src/components/BuilderSelect.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+	items: string[]
+	label: string
+	display?: string
+	warning?: boolean
+}>()
+
+const model = defineModel<string>({ required: true })
+
+const options = computed(() => props.items.map((item) => ({ label: item, value: item })))
+const borderClass = computed(() => (props.warning ? 'border-warning' : 'border-accented'))
+const shown = computed(() => props.display ?? model.value)
+</script>
+
+<template>
+	<USelectMenu
+		:model-value="model"
+		:items="options"
+		value-key="value"
+		label-key="label"
+		:search-input="false"
+		:aria-label="label"
+		color="neutral"
+		variant="outline"
+		class="w-full"
+		:ui="{
+			base: `h-11 rounded-none border ${borderClass} bg-default px-2.5 text-sm ring-0 data-[state=open]:border-primary data-[state=open]:ring-1 data-[state=open]:ring-primary lg:h-8`,
+			trailingIcon: 'size-3.5 text-muted',
+			content: 'min-w-(--reka-combobox-trigger-width)',
+			item: 'min-h-11 text-sm lg:min-h-8',
+			itemLeadingIcon: 'hidden',
+			itemTrailingIcon: 'hidden',
+		}"
+		@update:model-value="model = $event as string"
+	>
+		<span class="truncate text-highlighted">{{ shown }}</span>
+	</USelectMenu>
+</template>