Overhaul Studio controls and add image batch from one still.

Video and Image pickers, thumbwheels, aspect icons, and a Scale to MP paddle; extra prompts default to batch so each run starts from the original image.

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

components/AspectRatioPick.vue

@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <p v-if="heading" class="mb-2 text-xs uppercase tracking-wider text-zinc-500">{{ heading }}</p>
+    <div class="grid grid-cols-2 gap-2 lg:grid-cols-4">
+      <button
+        v-for="option in options"
+        :key="option.id"
+        type="button"
+        class="rounded-xl border px-3 py-2.5 text-left text-sm transition"
+        :class="model === option.id ? 'border-amber-300 bg-amber-400/10 text-amber-100' : 'border-white/10 text-zinc-200 hover:border-white/20'"
+        @click="model = option.id"
+      >
+        <span class="mb-1.5 flex h-8 items-center" aria-hidden="true">
+          <svg v-if="option.id === 'auto'" class="h-7 w-10" viewBox="0 0 40 28" fill="none">
+            <rect x="11" y="8" width="18" height="12" rx="1.5" stroke="currentColor" stroke-width="1.75" stroke-dasharray="2.5 2" />
+            <path d="M5 9V4h5M35 9V4h-5M5 19v5h5M35 19v5h-5" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" />
+          </svg>
+          <svg v-else-if="option.id === '16:9'" class="h-7 w-10" viewBox="0 0 40 28" fill="none">
+            <rect x="2" y="8" width="36" height="13" rx="2.5" stroke="currentColor" stroke-width="1.75" />
+          </svg>
+          <svg v-else-if="option.id === '9:16'" class="h-7 w-10" viewBox="0 0 40 28" fill="none">
+            <rect x="14" y="2" width="12" height="24" rx="2.5" stroke="currentColor" stroke-width="1.75" />
+          </svg>
+          <svg v-else class="h-7 w-10" viewBox="0 0 40 28" fill="none">
+            <rect x="9" y="3" width="22" height="22" rx="2.5" stroke="currentColor" stroke-width="1.75" />
+          </svg>
+        </span>
+        <span class="block font-semibold leading-tight">{{ option.label }}</span>
+        <span class="mt-0.5 block text-[11px] leading-snug text-zinc-400">{{ option.hint }}</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  heading?: string
+  options: { id: string; label: string; hint: string }[]
+}>()
+
+const model = defineModel<string>({ required: true })
+</script>