hunk.code_window: const props = defineProps({
     ranges: {
       default: () => [],
     },
   })
   const clicks = inject(injectionClicks)!
   const elements = inject(injectionClicksElements)!
   const disabled = inject(injectionClicksDisabled)!
  
hunk.labels: keep keep keep keep add keep keep keep keep keep
hunk.after_edit:   at: {
       default: undefined,
     },
  
hunk.file_path: packages/client/builtin/CodeHighlightController.vue
hunk.type: add
file: <script setup lang="ts">
  import { defineProps, ref } from 'vue'
  
  const props = defineProps({
    count: {
      default: 0,
    },
  })
  
  const counter = ref(props.count)
  </script>
  
  <template>
    <div flex="~" w="min" border="~ gray-400 opacity-50 rounded-md">
      <button
        border="r gray-400 opacity-50"
        p="2"
        font="mono"
        outline="!none"
        hover:bg="gray-400 opacity-20"
        @click="counter -= 1"
      >
        -
      </button>
      <span m="auto" p="2">{{ counter }}</span>
      <button
        border="l gray-400 opacity-50"
        p="2"
        font="mono"
        outline="!none"
        hover:bg="gray-400 opacity-20"
        @click="counter += 1"
      >
        +
      </button>
    </div>
  </template>
  