Add permanence refs opens picker, labels inject into INHERITS

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

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]