Add batch still arrows, hide output only on tap, and cut studio lag.

Co-authored-by: Cursor <cursoragent@cursor.com>

components/FamilyNav.vue

@@ -0,0 +1,42 @@
+<template>
+  <div v-if="count > 1" class="pointer-events-none absolute inset-0 z-20">
+    <button
+      type="button"
+      class="family-nav family-nav-prev pointer-events-auto"
+      :aria-label="prevLabel"
+      @click.stop="$emit('step', -1)"
+      @pointerdown.stop
+    >
+      <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+        <path d="M15 5 8 12l7 7" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" />
+      </svg>
+    </button>
+    <button
+      type="button"
+      class="family-nav family-nav-next pointer-events-auto"
+      :aria-label="nextLabel"
+      @click.stop="$emit('step', 1)"
+      @pointerdown.stop
+    >
+      <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+        <path d="m9 5 7 7-7 7" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" />
+      </svg>
+    </button>
+    <span class="pointer-events-none absolute bottom-2 left-1/2 -translate-x-1/2 rounded-full bg-zinc-950/75 px-2 py-0.5 text-[11px] tabular-nums text-amber-100">
+      {{ index + 1 }} / {{ count }}
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+withDefaults(defineProps<{
+  count: number
+  index: number
+  prevLabel?: string
+  nextLabel?: string
+}>(), {
+  prevLabel: 'Previous image',
+  nextLabel: 'Next image'
+})
+defineEmits<{ step: [delta: number] }>()
+</script>