feat: SEO SPA editor integration

web/src/components/SeoDisclosure.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { useId } from 'vue'
+
+defineProps<{ title: string; tag?: string; summary: string }>()
+
+const open = defineModel<boolean>('open', { default: false })
+
+const bodyId = useId()
+</script>
+
+<template>
+	<UCollapsible
+		v-model:open="open"
+		:ui="{ root: 'flex flex-col gap-3 border border-default p-3' }"
+	>
+		<UButton
+			color="neutral"
+			variant="link"
+			class="min-h-11 w-full justify-start gap-2 p-0 text-sm text-highlighted md:min-h-6"
+			:aria-controls="bodyId"
+			data-testid="seo-disclosure-toggle"
+		>
+			<UIcon
+				name="i-lucide-chevron-down"
+				class="size-3.5 shrink-0 transition-transform"
+				:class="{ '-rotate-90': !open }"
+			/>
+			<span class="font-semibold">{{ title }}</span>
+			<span
+				v-if="tag"
+				class="inline-flex min-h-5 items-center border border-dashed border-accented px-1.5 py-px font-mono text-2xs/4 font-medium text-toned"
+				>{{ tag }}</span
+			>
+			<span class="min-w-0 flex-1 truncate text-right text-xs font-normal text-muted">{{
+				summary
+			}}</span>
+		</UButton>
+		<template #content>
+			<div :id="bodyId" class="flex flex-col gap-3">
+				<slot />
+			</div>
+		</template>
+	</UCollapsible>
+</template>