Add permanence refs opens picker, labels inject into INHERITS

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

components/ImagePickerModal.vue

@@ -1,11 +1,11 @@
 <template>
   <Teleport to="body">
-    <div class="fixed inset-0 z-40 flex items-start justify-center overflow-y-auto bg-black/70 p-4 sm:p-8" @click.self="emit('close')">
+    <div v-if="open" class="fixed inset-0 z-40 flex items-start justify-center overflow-y-auto bg-black/70 p-4 sm:p-8" @click.self="emit('close')">
       <div class="glass w-full max-w-3xl rounded-3xl p-5 sm:p-6">
         <div class="flex items-start justify-between gap-3">
           <div>
             <h2 class="font-display text-2xl font-bold">{{ heading || 'Choose an image' }}</h2>
-            <p class="mt-1 text-sm text-zinc-400">{{ tab === 'input' ? 'Uploaded stills only. Generated frames and edits live under Output.' : 'Generated stills from image edits. Video frames stay with their clips.' }}</p>
+            <p class="mt-1 text-sm text-zinc-400">{{ pickerHint }}</p>
           </div>
           <div class="flex items-center gap-2">
             <button
@@ -167,14 +167,17 @@ export interface PickerStill {
   name?: string
 }
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   folders: PickerFolder[]
   stills: PickerStill[]
   folderId: string
   hideInputPreview?: boolean
   heading?: string
   stillOnly?: boolean
-}>()
+  open?: boolean
+}>(), {
+  open: true
+})
 
 const emit = defineEmits<{
   close: []
@@ -194,6 +197,7 @@ const revealedIds = ref<string[]>([])
 const picking = ref(false)
 
 function onKey(event: KeyboardEvent) {
+  if (!props.open) return
   if (event.key === 'Escape') emit('close')
 }
 
@@ -215,6 +219,12 @@ const visibleStills = computed(() => props.stills.filter((still) => {
 const emptyLabel = computed(() => tab.value === 'input'
   ? 'No uploaded stills in this folder yet.'
   : 'No generated stills in this folder yet.')
+const pickerHint = computed(() => {
+  if (props.stillOnly) return 'Pick a still, then label it Subject / Vehicle / Interior / Object on the strip. That name is what the shot prompt inherits.'
+  return tab.value === 'input'
+    ? 'Uploaded stills only. Generated frames and edits live under Output.'
+    : 'Generated stills from image edits. Video frames stay with their clips.'
+})
 const hasHiddenItems = computed(() => visibleStills.value.some(still => stillHidden(still)))
 
 function stillHidden(still: PickerStill) {

components/PermanenceRefStrip.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div v-if="label" class="mb-1.5 flex items-baseline justify-between gap-2">
+    <div v-if="label" class="mb-1.5 flex flex-wrap items-baseline justify-between gap-x-2 gap-y-0.5">
       <p class="text-[11px] font-medium uppercase tracking-wide text-zinc-500">{{ label }}</p>
       <p v-if="hint" class="text-[11px] text-zinc-600">{{ hint }}</p>
     </div>
@@ -42,11 +42,12 @@
       <button
         v-if="!disabled && refs.length < max"
         type="button"
-        class="flex h-12 w-12 flex-col items-center justify-center rounded-lg border border-dashed border-white/15 text-[10px] text-zinc-500 hover:border-amber-300/40 hover:text-amber-100"
+        class="flex min-h-12 items-center justify-center rounded-lg border border-dashed border-white/15 text-[10px] leading-tight text-zinc-400 hover:border-amber-300/40 hover:text-amber-100"
+        :class="refs.length ? 'h-12 w-12' : 'min-w-[8.5rem] px-2.5 py-1.5'"
         :title="addTitle"
-        @click="emit('add')"
+        @click.stop="emit('addRef')"
       >
-        + Ref
+        {{ refs.length ? '+' : cta }}
       </button>
     </div>
   </div>
@@ -55,7 +56,7 @@
 <script setup lang="ts">
 import { PERMANENCE_REF_LABELS, type PermanenceRef } from '~/utils/globalLocks'
 
-const props = withDefaults(defineProps<{
+withDefaults(defineProps<{
   refs: PermanenceRef[]
   label?: string
   hint?: string
@@ -63,16 +64,18 @@ const props = withDefaults(defineProps<{
   disabled?: boolean
   max?: number
   addTitle?: string
+  cta?: string
 }>(), {
   max: 6,
-  addTitle: 'Attach a permanence still'
+  addTitle: 'Choose a still to label',
+  cta: 'Add still'
 })
 
-defineEmits<{
-  add: []
+const emit = defineEmits<{
+  addRef: []
   remove: [index: number]
   updateLabel: [index: number, label: string]
-}>()
+}>(['addRef', 'remove', 'updateLabel'])
 
 function labelOptions(current: string) {
   if (PERMANENCE_REF_LABELS.includes(current as typeof PERMANENCE_REF_LABELS[number])) return [...PERMANENCE_REF_LABELS]