Keep the image batch popup open, and add a lock on each dial.

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

components/ImageBatchModal.vue

@@ -2,13 +2,14 @@
   <Teleport to="body">
     <div
       v-if="open"
-      class="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-black/70 p-4 sm:p-8"
+      class="fixed inset-0 z-[80] flex items-start justify-center overflow-y-auto bg-black/70 p-4 sm:p-8"
       role="dialog"
       aria-modal="true"
       aria-label="Batch image prompts"
-      @click.self="close"
+      @pointerdown.self="onBackdrop"
+      @click.self="onBackdrop"
     >
-      <div class="glass flex w-full max-w-5xl flex-col rounded-3xl p-5 sm:p-6">
+      <div class="glass flex w-full max-w-5xl flex-col rounded-3xl p-5 sm:p-6" @pointerdown.stop @click.stop>
         <div class="flex items-start justify-between gap-3">
           <div>
             <h2 class="font-display text-2xl font-bold">Batch script</h2>
@@ -35,11 +36,10 @@
             <span class="mb-2 block font-medium text-zinc-300">Shot list</span>
             <textarea
               ref="textareaEl"
-              :value="text"
+              v-model="draft"
               rows="16"
               class="max-h-[min(36rem,55vh)] min-h-[16rem] w-full overflow-y-auto rounded-2xl border border-white/10 bg-zinc-950/70 px-4 py-3 text-sm outline-none ring-amber-300/40 placeholder:text-zinc-600 [overflow-wrap:anywhere] focus:ring-2"
               :placeholder="placeholder"
-              @input="onInput"
               @keydown.ctrl.enter.prevent="apply"
               @keydown.meta.enter.prevent="apply"
             />
@@ -100,11 +100,13 @@ const props = withDefaults(defineProps<{
 
 const emit = defineEmits<{
   close: []
-  apply: []
+  apply: [text: string]
   'update:text': [value: string]
 }>()
 
 const textareaEl = ref<HTMLTextAreaElement | null>(null)
+const draft = ref('')
+const ignoreBackdropUntil = ref(0)
 
 const placeholder = `shot 1
 Change her jacket to black leather.
@@ -115,7 +117,7 @@ Put her in a red dress.
 shot 3
 Make it night, city lights behind her.`
 
-const parsed = computed(() => parseImageBatchScript(props.text))
+const parsed = computed(() => parseImageBatchScript(draft.value))
 
 const applyLabel = computed(() => {
   const n = parsed.value.length
@@ -123,32 +125,43 @@ const applyLabel = computed(() => {
   return n === 1 ? 'Apply 1 prompt' : `Apply ${n} prompts`
 })
 
-function onInput(event: Event) {
-  emit('update:text', (event.target as HTMLTextAreaElement).value)
-}
-
 function close() {
   emit('close')
 }
 
+function onBackdrop() {
+  if (Date.now() < ignoreBackdropUntil.value) return
+  close()
+}
+
 function apply() {
-  if (!parsed.value.length) return
-  emit('apply')
+  const text = draft.value
+  if (!parseImageBatchScript(text).length) return
+  emit('update:text', text)
+  emit('apply', text)
 }
 
 function onKey(event: KeyboardEvent) {
   if (event.key === 'Escape') close()
 }
 
-watch(() => props.open, (open) => {
+watch(() => props.open, async (open) => {
   if (typeof document === 'undefined') return
   document.body.style.overflow = open ? 'hidden' : ''
-  if (open) {
-    document.addEventListener('keydown', onKey)
-    nextTick(() => textareaEl.value?.focus())
-  } else {
+  if (!open) {
     document.removeEventListener('keydown', onKey)
+    return
   }
+  ignoreBackdropUntil.value = Date.now() + 500
+  draft.value = props.text || ''
+  document.addEventListener('keydown', onKey)
+  await nextTick()
+  textareaEl.value?.focus()
+  if (draft.value.trim()) return
+  try {
+    const clip = await navigator.clipboard.readText()
+    if (clip.trim()) draft.value = clip
+  } catch { /* clipboard permission */ }
 })
 
 onBeforeUnmount(() => {