Small styling fixes, added better filter options in zone editor, added tags to objects, npm update

src/components/forms/ChipsInput.vue

@@ -4,34 +4,50 @@
       <span>{{ chip }}</span>
       <i class="cursor-pointer text-white font-light font-default not-italic hover:text-gray-50" @click="deleteChip(i)">X</i>
     </div>
-    <!-- Use keypress event and prevent modifier -->
-    <input class="outline-none border-none max-w-[250px] p-1 m-1 text-white" v-model="currentInput" @keypress.enter.prevent="saveChip" @keydown.delete="backspaceDelete" />
+    <input
+      class="outline-none border-none max-w-[250px] p-1 m-1 text-white"
+      v-model="currentInput"
+      @keypress.enter.prevent="saveChip"
+      @keydown.delete="backspaceDelete"
+    />
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 
-const modelValue = defineModel('modelValue', { type: Array, default: () => [] })
+const props = defineProps({
+  modelValue: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
 
 const currentInput = ref('')
+const internalValue = ref(props.modelValue || [])
+
+watch(() => props.modelValue, (newVal) => {
+  internalValue.value = newVal || []
+}, { immediate: true })
 
 const saveChip = (event) => {
-  // Prevent form submission explicitly if needed
   event.preventDefault()
-  if (currentInput.value.trim() && !modelValue.value.includes(currentInput.value)) {
-    modelValue.value = [...modelValue.value, currentInput.value]
+
+  if (currentInput.value.trim() && !internalValue.value.includes(currentInput.value)) {
+    emit('update:modelValue', [...internalValue.value, currentInput.value])
     currentInput.value = ''
   }
 }
 
 const deleteChip = (index) => {
-  modelValue.value = modelValue.value.filter((_, i) => i !== index)
+  emit('update:modelValue', internalValue.value.filter((_, i) => i !== index))
 }
 
 const backspaceDelete = (event) => {
-  if (event.key === 'Backspace' && currentInput.value === '' && modelValue.value.length > 0) {
-    modelValue.value = modelValue.value.slice(0, -1)
+  if (event.key === 'Backspace' && currentInput.value === '' && internalValue.value.length > 0) {
+    emit('update:modelValue', internalValue.value.slice(0, -1))
   }
 }
-</script>
+</script>