hunk.code_window: const el = ref<HTMLDivElement>()
   const vm = getCurrentInstance()
   onMounted(() => {
     const prev = elements.value.length
     const index = computed(() => {
       if (disabled.value)
         return props.ranges.length - 1
       return Math.min(Math.max(0, clicks.value - prev), props.ranges.length - 1)
  
hunk.labels: keep keep keep keep keep replace keep keep keep keep
hunk.after_edit:   const prev = props.at == null ? elements.value.length : props.at
  
hunk.file_path: packages/client/builtin/CodeHighlightController.vue
hunk.type: replace
file: <script setup lang="ts">
  import { useVModel } from '@vueuse/core'
  import { defineEmit, defineProps } from 'vue'
  import type { PropType } from 'vue'
  import type { SelectionItem } from './types'
  
  const emit = defineEmit()
  const props = defineProps({
    modelValue: {
      type: [Object, String, Number] as PropType<any>,
    },
    title: {
      type: String,
    },
    items: {
      type: Array as PropType<SelectionItem<any>[]>,
    },
  })
  
  const value = useVModel(props, 'modelValue', emit, { passive: true })
  </script>
  
  <template>
    <div class="select-list">
      <div class="title">
        {{ title }}
      </div>
      <div class="items">
        <div
          v-for="item of items"
          :key="item.value"
          class="item"
          :class="{ active: value === item.value }"
          @click="() => { value = item.value; item.onClick?.() }"
        >
          <carbon:checkmark class="text-green-500" :class="{ 'opacity-0': value !== item.value }" />
          {{ item.display || item.value }}
        </div>
      </div>
    </div>
  </template>
  
  <style lang="postcss" scoped>
  .select-list {
    @apply py-2;
  }
  
  .item {
    @apply flex rounded whitespace-nowrap py-1 px-4 cursor-default hover:(bg-gray-400 bg-opacity-10);
  
    svg {
      @apply mr-1 -ml-2 my-auto;
    }
  }
  
  .title {
    @apply text-xs uppercase opacity-50 tracking-widest px-7 py-1;
  }
  </style>
  