feat: SEO SPA editor integration

web/src/components/SoftCounter.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{ value: number; min: number; max: number }>()
+
+const outside = computed(
+	() => props.value > 0 && (props.value < props.min || props.value > props.max),
+)
+</script>
+
+<template>
+	<span
+		class="font-mono text-xs"
+		:class="outside ? 'text-warning' : 'text-muted'"
+		data-testid="soft-counter"
+		>{{ value }} / {{ max }}</span
+	>
+</template>