diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index 793a7529e2..88ada17810 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -8,10 +8,10 @@ export {}
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     AAlert: typeof import('ant-design-vue/es')['Alert']
-    AAnchorLink: typeof import('ant-design-vue/es')['AnchorLink']
     AAutoComplete: typeof import('ant-design-vue/es')['AutoComplete']
     AButton: typeof import('ant-design-vue/es')['Button']
     ACard: typeof import('ant-design-vue/es')['Card']
+    ACarousel: typeof import('ant-design-vue/es')['Carousel']
     ACheckbox: typeof import('ant-design-vue/es')['Checkbox']
     ACol: typeof import('ant-design-vue/es')['Col']
     ACollapse: typeof import('ant-design-vue/es')['Collapse']
@@ -20,7 +20,6 @@ declare module '@vue/runtime-core' {
     ADivider: typeof import('ant-design-vue/es')['Divider']
     ADrawer: typeof import('ant-design-vue/es')['Drawer']
     ADropdown: typeof import('ant-design-vue/es')['Dropdown']
-    ADropdownButton: typeof import('ant-design-vue/es')['DropdownButton']
     AForm: typeof import('ant-design-vue/es')['Form']
     AFormItem: typeof import('ant-design-vue/es')['FormItem']
     AInput: typeof import('ant-design-vue/es')['Input']
@@ -46,20 +45,17 @@ declare module '@vue/runtime-core' {
     ASelect: typeof import('ant-design-vue/es')['Select']
     ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
     ASkeleton: typeof import('ant-design-vue/es')['Skeleton']
-    ASpace: typeof import('ant-design-vue/es')['Space']
+    ASkeletonImage: typeof import('ant-design-vue/es')['SkeletonImage']
     ASpin: typeof import('ant-design-vue/es')['Spin']
     ASubMenu: typeof import('ant-design-vue/es')['SubMenu']
     ASwitch: typeof import('ant-design-vue/es')['Switch']
     ATable: typeof import('ant-design-vue/es')['Table']
     ATableColumn: typeof import('ant-design-vue/es')['TableColumn']
-    ATableColumnGroup: typeof import('ant-design-vue/es')['TableColumnGroup']
     ATabPane: typeof import('ant-design-vue/es')['TabPane']
     ATabs: typeof import('ant-design-vue/es')['Tabs']
-    ATag: typeof import('ant-design-vue/es')['Tag']
     ATextarea: typeof import('ant-design-vue/es')['Textarea']
     ATimePicker: typeof import('ant-design-vue/es')['TimePicker']
     ATooltip: typeof import('ant-design-vue/es')['Tooltip']
-    ATypographyText: typeof import('ant-design-vue/es')['TypographyText']
     ATypographyTitle: typeof import('ant-design-vue/es')['TypographyTitle']
     AUploadDragger: typeof import('ant-design-vue/es')['UploadDragger']
     RouterLink: typeof import('vue-router')['RouterLink']
diff --git a/packages/nc-gui-v2/components/cell/Attachment.vue b/packages/nc-gui-v2/components/cell/Attachment.vue
deleted file mode 100644
index 52180b6cbb..0000000000
--- a/packages/nc-gui-v2/components/cell/Attachment.vue
+++ /dev/null
@@ -1,338 +0,0 @@
-<script setup lang="ts">
-import { useToast } from 'vue-toastification'
-import { inject, ref, useProject, watchEffect } from '#imports'
-import { useNuxtApp } from '#app'
-import { ColumnInj, MetaInj } from '~/context'
-import { NOCO } from '~/lib'
-import { isImage } from '~/utils'
-import MaterialPlusIcon from '~icons/mdi/plus'
-import MaterialArrowExpandIcon from '~icons/mdi/arrow-expand'
-
-interface Props {
-  modelValue: string | any[] | null
-}
-
-const { modelValue } = defineProps<Props>()
-
-const emit = defineEmits(['update:modelValue'])
-
-const isPublicForm = inject<boolean>('isPublicForm', false)
-const isForm = inject<boolean>('isForm', false)
-const meta = inject(MetaInj)
-const column = inject(ColumnInj)
-const editEnabled = inject<boolean>('editEnabled', false)
-
-const localFilesState = reactive([])
-const attachments = ref([])
-const uploading = ref(false)
-const fileInput = ref<HTMLInputElement>()
-
-const { $api } = useNuxtApp()
-const { project } = useProject()
-const toast = useToast()
-
-watchEffect(() => {
-  if (modelValue) {
-    attachments.value = ((typeof modelValue === 'string' ? JSON.parse(modelValue) : modelValue) || []).filter(Boolean)
-  }
-})
-
-const selectImage = (file: any, i: unknown) => {
-  // todo: implement
-}
-
-const openUrl = (url: string, target = '_blank') => {
-  window.open(url, target)
-}
-
-const addFile = () => {
-  fileInput.value?.click()
-}
-
-const onFileSelection = async (e: unknown) => {
-  // if (this.isPublicGrid) {
-  //   return
-  // }
-  // if (!this.$refs.file.files || !this.$refs.file.files.length) {
-  //   return
-  // }
-
-  // if (this.isPublicForm) {
-  //   this.localFilesState.push(...Array.from(this.$refs.file.files).map((file) => {
-  //     const res = { file, title: file.name }
-  //     if (isImage(file.name, file.mimetype)) {
-  //       const reader = new FileReader()
-  //       reader.onload = (e) => {
-  //         this.$set(res, 'data', e.target.result)
-  //       }
-  //       reader.readAsDataURL(file)
-  //     }
-  //     return res
-  //   }))
-  //
-  //   this.$emit('input', this.localFilesState.map(f => f.file))
-  //   return
-  // }
-
-  // todo : move to com
-  uploading.value = true
-  const newAttachments = []
-  for (const file of fileInput.value?.files ?? []) {
-    try {
-      const data = await $api.storage.upload(
-        {
-          path: [NOCO, project.value.title, meta?.value?.title, column?.title].join('/'),
-        },
-        {
-          files: file,
-          json: '{}',
-        },
-      )
-      newAttachments.push(...data)
-    } catch (e: any) {
-      toast.error(e.message || 'Some internal error occurred')
-      uploading.value = false
-      return
-    }
-  }
-  uploading.value = false
-  emit('update:modelValue', JSON.stringify([...attachments.value, ...newAttachments]))
-
-  // this.$emit('input', JSON.stringify(this.localState))
-  // this.$emit('update')
-}
-</script>
-
-<template>
-  <div class="main h-100">
-    <div class="d-flex align-center img-container">
-      <div class="d-flex no-overflow">
-        <div
-          v-for="(item, i) in isPublicForm ? localFilesState : attachments"
-          :key="item.url || item.title"
-          class="thumbnail align-center justify-center d-flex"
-        >
-          <!--          <v-tooltip bottom> -->
-          <!--            <template #activator="{ on }"> -->
-          <!--              <v-img
-                          v-if="isImage(item.title, item.mimetype)"
-                          lazy-src="https://via.placeholder.com/60.png?text=Loading..."
-                          alt="#"
-                          max-height="99px"
-                          contain
-                          :src="item.url || item.data"
-                          v-on="on"
-                          @click="selectImage(item.url || item.data, i)"
-                        >             -->
-          <img
-            v-if="isImage(item.title, item.mimetype)"
-            alt="#"
-            style="max-height: 30px; max-width: 30px"
-            :src="item.url || item.data"
-            @click="selectImage(item.url || item.data, i)"
-          />
-          <!--                <template #placeholder> -->
-          <!--                  <v-skeleton-loader type="image" :height="active ? 33 : 22" :width="active ? 33 : 22" /> -->
-          <!--                </template> -->
-          <v-icon v-else-if="item.icon" :size="active ? 33 : 22" v-on="on" @click="openUrl(item.url || item.data, '_blank')">
-            {{ item.icon }}
-          </v-icon>
-          <v-icon v-else :size="active ? 33 : 22" v-on="on" @click="openUrl(item.url || item.data, '_blank')"> mdi-file </v-icon>
-          <!--            </template> -->
-          <!--            <span>{{ item.title }}</span> -->
-          <!--          </v-tooltip> -->
-        </div>
-      </div>
-      <!--      todo: hide or toggle based on ancestor -->
-      <div class="add d-flex align-center justify-center px-1 nc-attachment-add" @click="addFile">
-        <v-icon v-if="uploading" small color="primary" class="nc-attachment-add-spinner"> mdi-loading mdi-spin</v-icon>
-        <!--        <v-btn v-else-if="isForm" outlined x-small color="" text class="nc-attachment-add-btn">
-          <v-icon x-small color="" icon="MaterialPlusIcon"> mdi-plus </v-icon>
-          Attachment
-        </v-btn>
-        <v-icon  small color="primary nc-attachment-add-icon">
-          mdi-plus
-        </v-icon> -->
-        <MaterialPlusIcon />
-      </div>
-
-      <v-spacer />
-
-      <MaterialArrowExpandIcon @click.stop="dialog = true" />
-      <!--      <v-icon class="expand-icon mr-1" x-small color="primary" @click.stop="dialog = true"> mdi-arrow-expand </v-icon> -->
-    </div>
-
-    <input ref="fileInput" type="file" multiple class="d-none" @change="onFileSelection" />
-  </div>
-</template>
-
-<style scoped lang="scss">
-.thumbnail {
-  height: 30px;
-  width: 30px;
-  margin: 2px;
-  border-radius: 4px;
-
-  img {
-    max-height: 33px;
-    max-width: 33px;
-  }
-}
-
-.expand-icon {
-  margin-left: 8px;
-  border-radius: 2px;
-  transition: 0.3s background-color;
-}
-
-.expand-icon:hover {
-  background-color: var(--v-primary-lighten4);
-}
-
-/*.img-container {
-  margin: 0 -2px;
-}
-
-.no-overflow {
-  overflow: hidden;
-}
-
-.add {
-  transition: 0.2s background-color;
-  !*background-color: #666666ee;*!
-  border-radius: 4px;
-  height: 33px;
-  margin: 5px 2px;
-}
-
-.add:hover {
-  !*background-color: #66666699;*!
-}
-
-.thumbnail {
-  height: 99px;
-  width: 99px;
-  margin: 2px;
-  border-radius: 4px;
-}
-
-.thumbnail img {
-  !*max-height: 33px;*!
-  max-width: 99px;
-}
-
-.main {
-  min-height: 20px;
-  position: relative;
-  height: auto;
-}
-
-.expand-icon {
-  margin-left: 8px;
-  border-radius: 2px;
-  !*opacity: 0;*!
-  transition: 0.3s background-color;
-}
-
-.expand-icon:hover {
-  !*opacity: 1;*!
-  background-color: var(--v-primary-lighten4);
-}
-
-.modal-thumbnail img {
-  height: 50px;
-  max-width: 100%;
-  border-radius: 4px;
-}
-
-.modal-thumbnail {
-  position: relative;
-  margin: 10px 10px;
-}
-
-.remove-icon {
-  position: absolute;
-  top: 5px;
-  right: 5px;
-}
-
-.modal-thumbnail-card {
-  .download-icon {
-    position: absolute;
-    bottom: 5px;
-    right: 5px;
-    opacity: 0;
-    transition: 0.4s opacity;
-  }
-
-  &:hover .download-icon {
-    opacity: 1;
-  }
-}
-
-.image-overlay-container {
-  max-height: 100vh;
-  overflow-y: auto;
-  position: relative;
-}
-
-.image-overlay-container .close-icon {
-  position: fixed;
-  top: 15px;
-  right: 15px;
-}
-
-.overlay-thumbnail {
-  transition: 0.4s transform, 0.4s opacity;
-  opacity: 0.5;
-}
-
-.overlay-thumbnail.active {
-  transform: scale(1.4);
-  opacity: 1;
-}
-
-.overlay-thumbnail:hover {
-  opacity: 1;
-}
-
-.modal-title {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  width: 100%;
-  overflow: hidden;
-}
-
-.modal-thumbnail-card {
-  transition: 0.4s transform;
-}
-
-.modal-thumbnail-card:hover {
-  transform: scale(1.05);
-}
-
-.drop-overlay {
-  z-index: 5;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 5px;
-  background: #aaaaaa44;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  pointer-events: none;
-}
-
-.expand-icon {
-  opacity: 0;
-  transition: 0.4s opacity;
-}
-
-.main:hover .expand-icon {
-  opacity: 1;
-}*/
-</style>
diff --git a/packages/nc-gui-v2/components/cell/Currency.vue b/packages/nc-gui-v2/components/cell/Currency.vue
index 84db28f405..fe99200482 100644
--- a/packages/nc-gui-v2/components/cell/Currency.vue
+++ b/packages/nc-gui-v2/components/cell/Currency.vue
@@ -1,24 +1,22 @@
 <script setup lang="ts">
-import { computed, inject } from '#imports'
-import { ColumnInj } from '~/context'
+import { computed, inject, ref, useVModel } from '#imports'
+import { ColumnInj, EditModeInj } from '~/context'
 
-const { modelValue: value } = defineProps<Props>()
+interface Props {
+  modelValue: number
+}
+
+const props = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
 const column = inject(ColumnInj)
 
-const editEnabled = inject<boolean>('editEnabled')
+const editEnabled = inject(EditModeInj, ref(false))
 
-interface Props {
-  modelValue: number
-}
 const root = ref<HTMLInputElement>()
 
-const localState = computed({
-  get: () => value,
-  set: (val) => emit('update:modelValue', val),
-})
+const vModel = useVModel(props, 'modelValue', emit)
 
 const currencyMeta = computed(() => {
   return {
@@ -29,22 +27,20 @@ const currencyMeta = computed(() => {
 })
 const currency = computed(() => {
   try {
-    return isNaN(value)
-      ? value
+    return isNaN(vModel.value)
+      ? vModel.value
       : new Intl.NumberFormat(currencyMeta?.value?.currency_locale || 'en-US', {
           style: 'currency',
           currency: currencyMeta?.value?.currency_code || 'USD',
-        }).format(value)
+        }).format(vModel.value)
   } catch (e) {
-    return value
+    return vModel.value
   }
 })
 </script>
 
 <template>
-  <input v-if="editEnabled" ref="root" v-model="localState" />
-  <span v-else-if="value">{{ currency }}</span>
+  <input v-if="editEnabled" ref="root" v-model="vModel" />
+  <span v-else-if="vModel">{{ currency }}</span>
   <span v-else />
 </template>
-
-<style scoped></style>
diff --git a/packages/nc-gui-v2/components/cell/Email.vue b/packages/nc-gui-v2/components/cell/Email.vue
index f743c5d3f5..b81b447a88 100644
--- a/packages/nc-gui-v2/components/cell/Email.vue
+++ b/packages/nc-gui-v2/components/cell/Email.vue
@@ -1,9 +1,10 @@
 <script lang="ts" setup>
-import { computed } from '#imports'
+import { computed, inject, useVModel } from '#imports'
 import { isEmail } from '~/utils'
+import { EditModeInj } from '~/context'
 
 interface Props {
-  modelValue: string
+  modelValue: string | null
 }
 
 interface Emits {
@@ -14,13 +15,13 @@ const props = defineProps<Props>()
 
 const emits = defineEmits<Emits>()
 
-const root = ref<HTMLInputElement>()
-
-const editEnabled = inject<boolean>('editEnabled')
+const editEnabled = inject(EditModeInj, ref(false))
 
 const vModel = useVModel(props, 'modelValue', emits)
 
 const validEmail = computed(() => isEmail(vModel.value))
+
+const focus = (el: HTMLInputElement) => el.focus()
 </script>
 
 <template>
diff --git a/packages/nc-gui-v2/components/cell/Float.vue b/packages/nc-gui-v2/components/cell/Float.vue
index 58355b5c20..ec4c49f699 100644
--- a/packages/nc-gui-v2/components/cell/Float.vue
+++ b/packages/nc-gui-v2/components/cell/Float.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { computed, inject, onMounted, ref } from '#imports'
+import { inject, ref, useVModel } from '#imports'
+import { EditModeInj } from '~/context'
 
 interface Props {
   modelValue: number
@@ -13,21 +14,17 @@ const props = defineProps<Props>()
 
 const emits = defineEmits<Emits>()
 
-const editEnabled = inject<boolean>('editEnabled')
-
-const root = ref<HTMLInputElement>()
+const editEnabled = inject(EditModeInj, ref(false))
 
 const vModel = useVModel(props, 'modelValue', emits)
 
-onMounted(() => {
-  root.value?.focus()
-})
+const focus = (el: HTMLInputElement) => el.focus()
 </script>
 
 <template>
   <input
     v-if="editEnabled"
-    ref="root"
+    :ref="focus"
     v-model="vModel"
     class="outline-none pa-0 border-none w-full h-full prose-sm"
     type="number"
diff --git a/packages/nc-gui-v2/components/cell/Integer.vue b/packages/nc-gui-v2/components/cell/Integer.vue
index 54ea12127b..46d609ae55 100644
--- a/packages/nc-gui-v2/components/cell/Integer.vue
+++ b/packages/nc-gui-v2/components/cell/Integer.vue
@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import { inject, ref, useVModel } from '#imports'
+import { EditModeInj } from '~/context'
+
 interface Props {
   modelValue: number
 }
@@ -11,15 +14,11 @@ const props = defineProps<Props>()
 
 const emits = defineEmits<Emits>()
 
-const editEnabled = inject<boolean>('editEnabled')
-
-const root = ref<HTMLInputElement>()
+const editEnabled = inject(EditModeInj, ref(false))
 
-const vModel = useVModel(props, 'modelValue', emits)
+const vModel = useVModel(props, 'modelValue', emit)
 
-onMounted(() => {
-  root.value?.focus()
-})
+const focus = (el: HTMLInputElement) => el.focus()
 
 function onKeyDown(evt: KeyboardEvent) {
   return evt.key === '.' && evt.preventDefault()
@@ -29,7 +28,7 @@ function onKeyDown(evt: KeyboardEvent) {
 <template>
   <input
     v-if="editEnabled"
-    ref="root"
+    :ref="focus"
     v-model="vModel"
     class="outline-none pa-0 border-none w-full h-full prose-sm"
     type="number"
diff --git a/packages/nc-gui-v2/components/cell/JsonEditableCell.vue b/packages/nc-gui-v2/components/cell/JsonEditableCell.vue
index 9f9e2e00e8..acf815fc54 100644
--- a/packages/nc-gui-v2/components/cell/JsonEditableCell.vue
+++ b/packages/nc-gui-v2/components/cell/JsonEditableCell.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import MonacoJsonObjectEditor from '@/components/monaco/Editor.vue'
-import { inject } from '#imports'
+import { computed, inject } from '#imports'
+import { EditModeInj } from '~/context'
 
 interface Props {
   modelValue: string | Record<string, any>
@@ -11,7 +12,7 @@ const props = defineProps<Props>()
 
 const emits = defineEmits(['update:modelValue', 'cancel'])
 
-const editEnabled = inject('editEnabled')
+const editEnabled = inject(EditModeInj)
 
 let expand = $ref(false)
 
@@ -19,7 +20,7 @@ let isValid = $ref(true)
 
 let error = $ref()
 
-const localState = computed({
+const vModel = computed({
   get: () => (typeof props.modelValue === 'string' ? JSON.parse(props.modelValue) : props.modelValue),
   set: (val) => {
     if (props.isForm) {
@@ -30,7 +31,7 @@ const localState = computed({
 
 function save() {
   expand = false
-  emits('update:modelValue', JSON.stringify(props.modelValue))
+  emits('update:modelValue', JSON.stringify(vModel.value))
 }
 
 function validate(n: boolean, e: any) {
@@ -69,14 +70,14 @@ export default {
     </div>
     <MonacoJsonObjectEditor
       v-if="expand"
-      v-model="localState"
+      v-model="vModel"
       class="text-left caption"
       style="width: 300px; min-height: min(600px, 80vh); min-width: 100%"
       @validate="validate"
     />
     <MonacoJsonObjectEditor
       v-else
-      v-model="localState"
+      v-model="vModel"
       class="text-left caption"
       style="width: 300px; min-height: 200px; min-width: 100%"
       @validate="validate"
diff --git a/packages/nc-gui-v2/components/cell/MultiSelect.vue b/packages/nc-gui-v2/components/cell/MultiSelect.vue
index e66f11c5de..fffc9f347c 100644
--- a/packages/nc-gui-v2/components/cell/MultiSelect.vue
+++ b/packages/nc-gui-v2/components/cell/MultiSelect.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed, inject } from '#imports'
-import { ColumnInj } from '~/context'
+import { ColumnInj, EditModeInj } from '~/context'
 
 interface Props {
   modelValue: string
@@ -12,7 +12,7 @@ const emit = defineEmits(['update:modelValue'])
 
 const column = inject(ColumnInj)
 const isForm = inject<boolean>('isForm', false)
-const editEnabled = inject<boolean>('editEnabled', false)
+const editEnabled = inject(EditModeInj, ref(false))
 
 const options = computed(() => column?.dtxp?.split(',').map((v) => v.replace(/\\'/g, "'").replace(/^'|'$/g, '')) || [])
 
@@ -24,56 +24,6 @@ const localState = computed({
     emit('update:modelValue', val?.filter((v) => options.value.includes(v)).join(','))
   },
 })
-
-/* import colors from '@/components/project/spreadsheet/helpers/colors'
-
-export default {
-  name: 'SetListCheckboxCell',
-  props: {
-    value: String,
-    column: Object,
-    values: Array,
-  },
-  data() {},
-  computed: {
-    colors() {
-      return this.$store.state.settings.darkTheme ? colors.dark : colors.light
-    },
-    localState: {
-      get() {
-        return (this.value && this.value.split(',')) || []
-      },
-      set(val) {
-        this.$emit('input', val.join(','))
-        this.$emit('update')
-      },
-    },
-    setValues() {
-      if (this.column && this.column.dtxp) {
-        return this.column.dtxp.split(',').map((v) => v.replace(/^'|'$/g, ''))
-      }
-      return this.values || []
-    },
-    parentListeners() {
-      const $listeners = {}
-
-      if (this.$listeners.blur) {
-        $listeners.blur = this.$listeners.blur
-      }
-      if (this.$listeners.focus) {
-        $listeners.focus = this.$listeners.focus
-      }
-
-      return $listeners
-    },
-  },
-  mounted() {
-    this.$el.focus()
-    const event = document.createEvent('MouseEvents')
-    event.initMouseEvent('mousedown', true, true, window)
-    this.$el.dispatchEvent(event)
-  },
-} */
 </script>
 
 <template>
diff --git a/packages/nc-gui-v2/components/cell/SingleSelect.vue b/packages/nc-gui-v2/components/cell/SingleSelect.vue
index 112e26f4b7..66570ef61c 100644
--- a/packages/nc-gui-v2/components/cell/SingleSelect.vue
+++ b/packages/nc-gui-v2/components/cell/SingleSelect.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed, inject } from '#imports'
-import { ColumnInj } from '~/context'
+import { ColumnInj, EditModeInj } from '~/context'
 
 interface Props {
   modelValue: string
@@ -12,45 +12,18 @@ const emit = defineEmits(['update:modelValue'])
 
 const column = inject(ColumnInj)
 const isForm = inject<boolean>('isForm', false)
-const editEnabled = inject<boolean>('editEnabled', false)
+const editEnabled = inject(EditModeInj, ref(false))
 
-const localState = computed({
+const vModel = computed({
   get: () => modelValue?.replace(/\\'/g, "'").replace(/^'|'$/g, ''),
   set: (val) => emit('update:modelValue', val),
 })
 
 const options = computed(() => column?.dtxp?.split(',').map((v) => v.replace(/\\'/g, "'").replace(/^'|'$/g, '')) || [])
-
-/* import colors from '@/mixins/colors'
-
-export default {
-  name: 'EnumListEditableCell',
-  mixins: [colors],
-
-  props: {
-    value: String,
-    column: Object,
-    isForm: Boolean,
-  },
-  computed: {
-    parentListeners() {
-      const $listeners = {}
-
-      if (this.$listeners.blur) {
-        $listeners.blur = this.$listeners.blur
-      }
-      if (this.$listeners.focus) {
-        $listeners.focus = this.$listeners.focus
-      }
-
-      return $listeners
-    },
-  },
-} */
 </script>
 
 <template>
-  <v-select v-model="localState" :items="options" hide-details :clearable="!column.rqd" variation="outlined">
+  <v-select v-model="vModel" :items="options" hide-details :clearable="!column.rqd" variation="outlined">
     <!--    v-on="parentListeners"
     <template #selection="{ item }">
       <div
diff --git a/packages/nc-gui-v2/components/cell/Text.vue b/packages/nc-gui-v2/components/cell/Text.vue
index 653842a105..7243a1d409 100644
--- a/packages/nc-gui-v2/components/cell/Text.vue
+++ b/packages/nc-gui-v2/components/cell/Text.vue
@@ -1,28 +1,23 @@
 <script setup lang="ts">
-import { inject, onMounted, ref } from '#imports'
+import { inject, ref, useVModel } from '#imports'
+import { EditModeInj } from '~/context'
 
 interface Props {
-  modelValue: any
+  modelValue: string
 }
 
 const props = defineProps<Props>()
 
 const emits = defineEmits(['update:modelValue'])
 
-const editEnabled = inject<boolean>('editEnabled', false)
-
-const root = ref<HTMLInputElement>()
+const editEnabled = inject(EditModeInj, ref(false))
 
 const vModel = useVModel(props, 'modelValue', emits)
 
-const onSetRef = (el: HTMLInputElement) => {
-  el.focus()
-}
+const focus = (el: HTMLInputElement) => el.focus()
 </script>
 
 <template>
-  <input v-if="editEnabled" :ref="onSetRef" v-model="vModel" class="h-full w-full outline-none" />
+  <input v-if="editEnabled" :ref="focus" v-model="vModel" class="h-full w-full outline-none" />
   <span v-else>{{ vModel }}</span>
 </template>
-
-<style scoped></style>
diff --git a/packages/nc-gui-v2/components/cell/TextArea.vue b/packages/nc-gui-v2/components/cell/TextArea.vue
index e02de3d753..fc9a2b7057 100644
--- a/packages/nc-gui-v2/components/cell/TextArea.vue
+++ b/packages/nc-gui-v2/components/cell/TextArea.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { computed, inject, onMounted, ref } from '#imports'
+import { inject, ref, useVModel } from '#imports'
+import { EditModeInj } from '~/context'
 
 interface Props {
   modelValue?: string
@@ -9,19 +10,17 @@ const props = defineProps<Props>()
 
 const emits = defineEmits(['update:modelValue'])
 
-const editEnabled = inject<boolean>('editEnabled', false)
+const editEnabled = inject(EditModeInj, ref(false))
 
 const vModel = useVModel(props, 'modelValue', emits)
 
-const onSetRef = (el: HTMLInputElement) => {
-  el.focus()
-}
+const focus = (el: HTMLTextAreaElement) => el.focus()
 </script>
 
 <template>
   <textarea
     v-if="editEnabled"
-    :ref="onSetRef"
+    :ref="focus"
     v-model="vModel"
     rows="4"
     class="h-full w-full min-h-[60px] outline-none"
@@ -30,9 +29,3 @@ const onSetRef = (el: HTMLInputElement) => {
   />
   <span v-else>{{ vModel }}</span>
 </template>
-
-<style scoped>
-textarea:focus {
-  @apply ring-transparent;
-}
-</style>
diff --git a/packages/nc-gui-v2/components/cell/Url.vue b/packages/nc-gui-v2/components/cell/Url.vue
index 760f93955a..3f39bd9988 100644
--- a/packages/nc-gui-v2/components/cell/Url.vue
+++ b/packages/nc-gui-v2/components/cell/Url.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, ref } from '#imports'
-import { ColumnInj } from '~/context'
-import { isValidURL } from '~/utils/urlUtils'
+import { computed, inject, onMounted, ref } from '#imports'
+import { ColumnInj, EditModeInj } from '~/context'
+import { isValidURL } from '~/utils'
 
 interface Props {
   modelValue: string
@@ -13,7 +13,7 @@ const emit = defineEmits(['update:modelValue'])
 
 const column = inject(ColumnInj)
 
-const editEnabled = inject<boolean>('editEnabled')
+const editEnabled = inject(EditModeInj, ref(false))
 
 const vModel = computed({
   get: () => value,
@@ -26,21 +26,15 @@ const vModel = computed({
 
 const isValid = computed(() => value && isValidURL(value))
 
-const root = ref<HTMLInputElement>()
-
-onMounted(() => {
-  root.value?.focus()
-})
+const focus = (el: HTMLInputElement) => el.focus()
 </script>
 
 <template>
-  <input v-if="editEnabled" ref="root" v-model="vModel" class="outline-none" />
+  <input v-if="editEnabled" :ref="focus" v-model="vModel" class="outline-none" />
   <nuxt-link v-else-if="isValid" class="py-2 underline hover:opacity-75" :to="value" target="_blank">{{ value }}</nuxt-link>
   <span v-else>{{ value }}</span>
 </template>
 
-<style scoped></style>
-
 <!--
 /**
  * @copyright Copyright (c) 2021, Xgene Cloud Ltd
diff --git a/packages/nc-gui-v2/components/cell/attachment/Carousel.vue b/packages/nc-gui-v2/components/cell/attachment/Carousel.vue
new file mode 100644
index 0000000000..cc92d6daf5
--- /dev/null
+++ b/packages/nc-gui-v2/components/cell/attachment/Carousel.vue
@@ -0,0 +1,148 @@
+<script lang="ts" setup>
+import { onKeyDown } from '@vueuse/core'
+import { useAttachmentCell } from './utils'
+import { isImage } from '~/utils'
+import { computed, onClickOutside, ref, watch } from '#imports'
+import MaterialSymbolsArrowCircleRightRounded from '~icons/material-symbols/arrow-circle-right-rounded'
+import MaterialSymbolsArrowCircleLeftRounded from '~icons/material-symbols/arrow-circle-left-rounded'
+import MdiCloseCircle from '~icons/mdi/close-circle'
+
+const { selectedImage, visibleItems, downloadFile } = useAttachmentCell()!
+
+const carouselRef = ref()
+
+const imageItems = computed(() => visibleItems.value.filter((item) => isImage(item.title, item.mimetype)))
+
+/** navigate to previous image on button click */
+onKeyDown(
+  (e) => ['Left', 'ArrowLeft', 'A'].includes(e.key),
+  () => {
+    if (carouselRef.value) carouselRef.value.prev()
+  },
+)
+
+/** navigate to next image on button click */
+onKeyDown(
+  (e) => ['Right', 'ArrowRight', 'D'].includes(e.key),
+  () => {
+    if (carouselRef.value) carouselRef.value.next()
+  },
+)
+
+/** set our selected image when slide changes */
+function onSlideChange(index: number) {
+  selectedImage.value = imageItems.value[index]
+}
+
+/** set our carousel ref and move to initial slide  */
+const setCarouselRef = (el: Element) => {
+  carouselRef.value = el
+
+  carouselRef.value?.goTo(
+    imageItems.value.findIndex((item) => item === selectedImage.value),
+    true,
+  )
+}
+
+/** close overlay view when clicking outside of image */
+onClickOutside(carouselRef, () => {
+  selectedImage.value = false
+})
+</script>
+
+<template>
+  <general-overlay v-model="selectedImage">
+    <template v-if="selectedImage">
+      <div class="overflow-hidden p-12 text-center relative">
+        <div class="text-white group absolute top-5 right-5">
+          <MdiCloseCircle class="group-hover:text-red-500 cursor-pointer text-4xl" @click.stop="selectedImage = false" />
+        </div>
+
+        <div
+          class="select-none group hover:ring active:ring-pink-500 cursor-pointer leading-8 inline-block px-3 py-1 bg-gray-300 text-white mb-4 text-center rounded shadow"
+          @click.stop="downloadFile(selectedImage)"
+        >
+          <h3 class="group-hover:text-primary">{{ selectedImage && selectedImage.title }}</h3>
+        </div>
+
+        <a-carousel
+          v-if="!!selectedImage"
+          :ref="setCarouselRef"
+          dots-class="slick-dots slick-thumb"
+          :after-change="onSlideChange"
+          arrows
+        >
+          <template #prevArrow>
+            <div class="custom-slick-arrow left-2 z-1">
+              <MaterialSymbolsArrowCircleLeftRounded class="bg-white rounded-full" />
+            </div>
+          </template>
+
+          <template #nextArrow>
+            <div class="custom-slick-arrow !right-2 z-1">
+              <MaterialSymbolsArrowCircleRightRounded class="bg-white rounded-full" />
+            </div>
+          </template>
+
+          <template #customPaging="props">
+            <a>
+              <nuxt-img
+                class="!block"
+                :alt="imageItems[props.i].title || `#${props.i}`"
+                :src="imageItems[props.i].url || imageItems[props.i].data"
+              />
+            </a>
+          </template>
+
+          <div v-for="item of imageItems" :key="item.url">
+            <div
+              :style="{ backgroundImage: `url('${item.url}')` }"
+              class="min-w-70vw min-h-70vh w-full h-full bg-contain bg-center bg-no-repeat"
+            />
+          </div>
+        </a-carousel>
+      </div>
+    </template>
+  </general-overlay>
+</template>
+
+<style scoped>
+.ant-carousel :deep(.slick-dots) {
+  @apply relative mt-4;
+}
+
+.ant-carousel :deep(.slick-slide) {
+  @apply w-full;
+}
+
+.ant-carousel :deep(.slick-slide img) {
+  @apply border-1 m-auto;
+}
+
+.ant-carousel :deep(.slick-thumb) {
+  @apply bottom-2;
+}
+
+.ant-carousel :deep(.slick-thumb li) {
+  @apply w-[60px] h-[45px];
+}
+
+.ant-carousel :deep(.slick-thumb li img) {
+  @apply w-full h-full block;
+  filter: grayscale(100%);
+}
+
+.ant-carousel :deep .slick-thumb li.slick-active img {
+  filter: grayscale(0%);
+}
+
+.ant-carousel :deep(.slick-arrow.custom-slick-arrow) {
+  @apply text-4xl text-white hover:text-primary active:text-pink-500 opacity-100 cursor-pointer z-1;
+}
+.ant-carousel :deep(.custom-slick-arrow:before) {
+  display: none;
+}
+.ant-carousel :deep(.custom-slick-arrow:hover) {
+  opacity: 0.5;
+}
+</style>
diff --git a/packages/nc-gui-v2/components/cell/attachment/Modal.vue b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
new file mode 100644
index 0000000000..5e7e2b70ac
--- /dev/null
+++ b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
@@ -0,0 +1,211 @@
+<script lang="ts" setup>
+import { onKeyDown } from '@vueuse/core'
+import { useAttachmentCell } from './utils'
+import { useSortable } from './sort'
+import { ref, useDropZone, useUIPermission } from '#imports'
+import { isImage, openLink } from '~/utils'
+import MaterialSymbolsAttachFile from '~icons/material-symbols/attach-file'
+import MdiCloseCircle from '~icons/mdi/close-circle'
+import MdiDownload from '~icons/mdi/download'
+import MaterialSymbolsFileCopyOutline from '~icons/material-symbols/file-copy-outline'
+import IcOutlineInsertDriveFile from '~icons/ic/outline-insert-drive-file'
+
+const { isUIAllowed } = useUIPermission()
+
+const {
+  open,
+  isLoading,
+  isPublicGrid,
+  isForm,
+  isReadonly,
+  visibleItems,
+  modalVisible,
+  column,
+  FileIcon,
+  removeFile,
+  onDrop,
+  downloadFile,
+  updateModelValue,
+  selectedImage,
+} = useAttachmentCell()!
+
+// todo: replace placeholder var
+const isLocked = ref(false)
+
+const dropZoneRef = ref<HTMLDivElement>()
+
+const sortableRef = ref<HTMLDivElement>()
+
+const { dragging } = useSortable(sortableRef, visibleItems, updateModelValue, isReadonly)
+
+const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
+
+onKeyDown('Escape', () => {
+  modalVisible.value = false
+  isOverDropZone.value = false
+})
+</script>
+
+<template>
+  <a-modal v-model:visible="modalVisible" class="nc-attachment-modal" width="80%" :footer="null">
+    <template #title>
+      <div class="flex gap-4">
+        <div
+          v-if="!isReadonly && (isForm || isUIAllowed('tableAttachment')) && !isPublicGrid && !isLocked"
+          class="nc-attach-file group"
+          @click="open"
+        >
+          <MaterialSymbolsAttachFile class="transform group-hover:(text-pink-500 scale-120)" />
+          Attach File
+        </div>
+
+        <div class="flex items-center gap-2">
+          <div v-if="isReadonly" class="text-gray-400">[Readonly]</div>
+          Viewing Attachments of
+          <div class="font-semibold underline">{{ column.title }}</div>
+        </div>
+      </div>
+    </template>
+
+    <div ref="dropZoneRef">
+      <template v-if="!isReadonly && !dragging">
+        <general-overlay
+          v-model="isOverDropZone"
+          inline
+          class="text-white ring ring-pink-500 bg-gray-700/75 flex items-center justify-center gap-2 backdrop-blur-xl"
+        >
+          <MaterialSymbolsFileCopyOutline class="text-pink-500" height="35" width="35" />
+          <div class="text-white text-3xl">Drop here</div>
+        </general-overlay>
+      </template>
+
+      <div ref="sortableRef" :class="{ dragging }" class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-6 relative p-6">
+        <div v-for="(item, i) of visibleItems" :key="`${item.title}-${i}`" class="flex flex-col gap-1">
+          <a-card class="nc-attachment-item group">
+            <a-tooltip v-if="!isReadonly">
+              <template #title> Remove File </template>
+
+              <MdiCloseCircle
+                v-if="isUIAllowed('tableAttachment') && !isPublicGrid && !isLocked"
+                class="nc-attachment-remove"
+                @click.stop="removeFile(i)"
+              />
+            </a-tooltip>
+
+            <a-tooltip placement="bottom">
+              <template #title> Download file </template>
+
+              <div class="nc-attachment-download group-hover:(opacity-100)">
+                <MdiDownload @click.stop="downloadFile(item)" />
+              </div>
+            </a-tooltip>
+
+            <div
+              :class="[dragging ? 'cursor-move' : 'cursor-pointer']"
+              class="nc-attachment h-full w-full flex items-center justify-center"
+            >
+              <div
+                v-if="isImage(item.title, item.mimetype)"
+                :style="{ backgroundImage: `url('${item.url}')` }"
+                class="w-full h-full bg-contain bg-center bg-no-repeat"
+                @click.stop="() => (selectedImage = item) && (modalVisible = false)"
+              />
+
+              <component
+                :is="FileIcon(item.icon)"
+                v-else-if="item.icon"
+                height="150"
+                width="150"
+                @click.stop="openLink(item.url || item.data)"
+              />
+
+              <IcOutlineInsertDriveFile v-else height="150" width="150" @click.stop="openLink(item.url || item.data)" />
+            </div>
+          </a-card>
+
+          <div class="truncate" :title="item.title">
+            {{ item.title }}
+          </div>
+        </div>
+
+        <div v-if="isLoading" class="flex flex-col gap-1">
+          <a-card class="nc-attachment-item group">
+            <div class="nc-attachment h-full w-full flex items-center justify-center">
+              <a-skeleton-image class />
+            </div>
+          </a-card>
+        </div>
+      </div>
+    </div>
+  </a-modal>
+</template>
+
+<style lang="scss">
+.nc-attachment-modal {
+  .nc-attach-file {
+    @apply select-none cursor-pointer color-transition flex items-center gap-1 border-1 p-2 rounded
+    @apply hover:(bg-primary/10 text-primary ring);
+    @apply active:(ring-pink-500 bg-primary/20);
+  }
+
+  .nc-attachment-item {
+    @apply !h-2/3 !min-h-[200px] flex items-center justify-center relative;
+
+    @supports (-moz-appearance: none) {
+      @apply hover:border-0;
+    }
+
+    &::after {
+      @apply pointer-events-none rounded absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out;
+      content: '';
+    }
+
+    @supports (-moz-appearance: none) {
+      &:hover::after {
+        @apply ring shadow transform scale-103;
+      }
+
+      &:active::after {
+        @apply ring ring-pink-500 shadow transform scale-103;
+      }
+    }
+  }
+
+  .nc-attachment-download {
+    @apply bg-white absolute bottom-2 right-2;
+    @apply transition-opacity duration-150 ease-in opacity-0 hover:ring;
+    @apply cursor-pointer rounded shadow flex items-center p-1 border-1;
+    @apply active:(ring border-0 ring-pink-500);
+  }
+
+  .nc-attachment-remove {
+    @apply absolute top-2 right-2 bg-white;
+    @apply hover:(ring ring-red-500);
+    @apply cursor-pointer rounded-full border-2;
+    @apply active:(ring border-0 ring-red-500);
+  }
+
+  .ant-card-body {
+    @apply !p-2 w-full h-full;
+  }
+
+  .ant-modal-body {
+    @apply !p-0;
+  }
+
+  .ghost,
+  .ghost > * {
+    @apply !pointer-events-none;
+  }
+
+  .dragging {
+    .nc-attachment-item {
+      @apply !pointer-events-none;
+    }
+
+    .ant-tooltip {
+      @apply !hidden;
+    }
+  }
+}
+</style>
diff --git a/packages/nc-gui-v2/components/cell/attachment/index.vue b/packages/nc-gui-v2/components/cell/attachment/index.vue
new file mode 100644
index 0000000000..d629504a5c
--- /dev/null
+++ b/packages/nc-gui-v2/components/cell/attachment/index.vue
@@ -0,0 +1,168 @@
+<script setup lang="ts">
+import { onKeyDown } from '@vueuse/core'
+import { useProvideAttachmentCell } from './utils'
+import Modal from './Modal.vue'
+import { useSortable } from './sort'
+import Carousel from './Carousel.vue'
+import { onMounted, ref, useDropZone, watch } from '#imports'
+import { isImage, openLink } from '~/utils'
+import MaterialSymbolsAttachFile from '~icons/material-symbols/attach-file'
+import MaterialArrowExpandIcon from '~icons/mdi/arrow-expand'
+import MaterialSymbolsFileCopyOutline from '~icons/material-symbols/file-copy-outline'
+import MdiReload from '~icons/mdi/reload'
+import IcOutlineInsertDriveFile from '~icons/ic/outline-insert-drive-file'
+
+interface Props {
+  modelValue: string | Record<string, any>[] | null
+}
+
+interface Emits {
+  (event: 'update:modelValue', value: string | Record<string, any>): void
+}
+
+const { modelValue } = defineProps<Props>()
+
+const emits = defineEmits<Emits>()
+
+const dropZoneRef = ref<HTMLTableDataCellElement>()
+
+const sortableRef = ref<HTMLDivElement>()
+
+const { column, modalVisible, attachments, visibleItems, onDrop, isLoading, open, FileIcon, selectedImage, isReadonly } =
+  useProvideAttachmentCell(updateModelValue)
+
+const { dragging } = useSortable(sortableRef, visibleItems, updateModelValue, isReadonly)
+
+const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
+
+/** on new value, reparse our stored attachments */
+watch(
+  () => modelValue,
+  (nextModel) => {
+    if (nextModel) {
+      attachments.value = ((typeof nextModel === 'string' ? JSON.parse(nextModel) : nextModel) || []).filter(Boolean)
+    }
+  },
+  { immediate: true },
+)
+
+/** updates attachments array for autosave */
+function updateModelValue(data: string | Record<string, any>) {
+  emits('update:modelValue', typeof data !== 'string' ? JSON.stringify(data) : data)
+}
+
+/** Close modal on escape press, disable dropzone as well */
+onKeyDown('Escape', () => {
+  modalVisible.value = false
+  isOverDropZone.value = false
+})
+
+/** if possible, on mounted we try to fetch the relevant `td` cell to use as a dropzone */
+onMounted(() => {
+  if (typeof document !== 'undefined') {
+    dropZoneRef.value = document.querySelector(`td[data-col="${column.id}"]`) as HTMLTableDataCellElement
+  }
+})
+</script>
+
+<template>
+  <div class="nc-attachment-cell relative flex-1 color-transition flex items-center justify-between gap-1">
+    <Carousel />
+
+    <template v-if="!isReadonly && !dragging && dropZoneRef">
+      <general-overlay
+        v-model="isOverDropZone"
+        inline
+        :target="`td[data-col='${column.id}']`"
+        class="text-white text-lg ring ring-pink-500 bg-gray-700/75 flex items-center justify-center gap-2 backdrop-blur-xl"
+      >
+        <MaterialSymbolsFileCopyOutline class="text-pink-500" /> Drop here
+      </general-overlay>
+    </template>
+
+    <div
+      v-if="!isReadonly"
+      :class="{ 'mx-auto px-4': !visibleItems.length }"
+      class="group flex gap-1 items-center active:ring rounded border-1 p-1 hover:bg-primary/10"
+      @click.stop="open"
+    >
+      <MdiReload v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
+
+      <a-tooltip v-else placement="bottom">
+        <template #title> Click or drop a file into cell </template>
+
+        <div class="flex items-center gap-2">
+          <MaterialSymbolsAttachFile class="transform group-hover:(text-pink-500 scale-120)" />
+
+          <div v-if="!visibleItems.length" class="group-hover:text-primary">Add file(s)</div>
+        </div>
+      </a-tooltip>
+    </div>
+
+    <template v-if="visibleItems.length">
+      <div ref="sortableRef" :class="{ dragging }" class="flex flex-wrap gap-2 p-1 scrollbar-thin-primary">
+        <div
+          v-for="(item, i) of visibleItems"
+          :id="item.url"
+          :key="item.url || item.title"
+          style="flex: 1 1 50px"
+          :class="isImage(item.title, item.mimetype) ? '' : 'border-1 rounded'"
+          class="nc-attachment flex items-center justify-center"
+        >
+          <a-tooltip placement="bottom">
+            <template #title>
+              <div class="text-center w-full">{{ item.title }}</div>
+            </template>
+
+            <nuxt-img
+              v-if="isImage(item.title, item.mimetype)"
+              placeholder
+              width="150"
+              height="150"
+              :alt="item.title || `#${i}`"
+              :src="item.url || item.data"
+              class="ring-1 ring-gray-300 rounded"
+              @click="selectedImage = item"
+            />
+
+            <component :is="FileIcon(item.icon)" v-else-if="item.icon" @click="openLink(item.url || item.data)" />
+
+            <IcOutlineInsertDriveFile v-else @click.stop="openLink(item.url || item.data)" />
+          </a-tooltip>
+        </div>
+      </div>
+
+      <div class="group flex gap-1 items-center border-1 active:ring rounded p-1 hover:bg-primary/10">
+        <MdiReload v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
+
+        <a-tooltip v-else placement="bottom">
+          <template #title> View attachments </template>
+
+          <MaterialArrowExpandIcon
+            class="select-none transform group-hover:(text-pink-500 scale-120)"
+            @click.stop="modalVisible = true"
+          />
+        </a-tooltip>
+      </div>
+    </template>
+
+    <Modal />
+  </div>
+</template>
+
+<style lang="scss">
+.nc-cell {
+  .nc-attachment-cell {
+    .ghost,
+    .ghost > * {
+      @apply !pointer-events-none;
+    }
+
+    .dragging {
+      .ant-tooltip {
+        @apply !hidden;
+      }
+    }
+  }
+}
+</style>
diff --git a/packages/nc-gui-v2/components/cell/attachment/sort.ts b/packages/nc-gui-v2/components/cell/attachment/sort.ts
new file mode 100644
index 0000000000..c7931205b4
--- /dev/null
+++ b/packages/nc-gui-v2/components/cell/attachment/sort.ts
@@ -0,0 +1,65 @@
+import type { SortableEvent } from 'sortablejs'
+import Sortable from 'sortablejs'
+import type { MaybeRef } from '@vueuse/core'
+import { watchPostEffect } from '@vue/runtime-core'
+import { unref } from '#imports'
+
+export function useSortable(
+  element: MaybeRef<HTMLElement | undefined>,
+  items: MaybeRef<any[]>,
+  updateModelValue: (data: string | Record<string, any>[]) => void,
+  isReadonly: MaybeRef<boolean> = false,
+) {
+  let dragging = $ref(false)
+
+  function onSortStart(evt: SortableEvent) {
+    evt.stopImmediatePropagation()
+    evt.preventDefault()
+    dragging = true
+  }
+
+  async function onSortEnd(evt: SortableEvent) {
+    evt.stopImmediatePropagation()
+    evt.preventDefault()
+    dragging = false
+
+    const _items = unref(items)
+
+    if (_items.length < 2) return
+
+    const { newIndex = 0, oldIndex = 0 } = evt
+
+    if (newIndex === oldIndex) return
+
+    _items.splice(newIndex, 0, ..._items.splice(oldIndex, 1))
+
+    updateModelValue(_items)
+  }
+
+  let sortable: Sortable
+
+  // todo: replace with vuedraggable
+  const initSortable = (el: HTMLElement) => {
+    sortable = new Sortable(el, {
+      handle: '.nc-attachment',
+      ghostClass: 'ghost',
+      onStart: onSortStart,
+      onEnd: onSortEnd,
+    })
+  }
+
+  watchPostEffect((onCleanup) => {
+    const _element = unref(element)
+
+    onCleanup(() => {
+      if (_element && sortable) sortable.destroy()
+    })
+
+    if (_element && !unref(isReadonly)) initSortable(_element)
+  })
+
+  return {
+    dragging: $$(dragging),
+    initSortable,
+  }
+}
diff --git a/packages/nc-gui-v2/components/cell/attachment/utils.ts b/packages/nc-gui-v2/components/cell/attachment/utils.ts
new file mode 100644
index 0000000000..e97275449a
--- /dev/null
+++ b/packages/nc-gui-v2/components/cell/attachment/utils.ts
@@ -0,0 +1,157 @@
+import { notification } from 'ant-design-vue'
+import FileSaver from 'file-saver'
+import { computed, inject, ref, useApi, useFileDialog, useInjectionState, useProject, watch } from '#imports'
+import { ColumnInj, EditModeInj, MetaInj, ReadonlyInj } from '~/context'
+import { isImage } from '~/utils'
+import { NOCO } from '~/lib'
+import MdiPdfBox from '~icons/mdi/pdf-box'
+import MdiFileWordOutline from '~icons/mdi/file-word-outline'
+import MdiFilePowerpointBox from '~icons/mdi/file-powerpoint-box'
+import MdiFileExcelOutline from '~icons/mdi/file-excel-outline'
+import IcOutlineInsertDriveFile from '~icons/ic/outline-insert-drive-file'
+
+export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
+  (updateModelValue: (data: string | Record<string, any>[]) => void) => {
+    const isReadonly = inject(ReadonlyInj, false)
+
+    const isPublicForm = inject('isPublicForm', false)
+
+    const isForm = inject('isForm', false)
+
+    // todo: replace placeholder var
+    const isPublicGrid = $ref(false)
+
+    const meta = inject(MetaInj)!
+
+    const column = inject(ColumnInj)!
+
+    const editEnabled = inject(EditModeInj, ref(false))
+
+    const storedFiles = ref<{ title: string; file: File }[]>([])
+
+    const attachments = ref<File[]>([])
+
+    const modalVisible = ref(false)
+
+    const selectedImage = ref()
+
+    const { project } = useProject()
+
+    const { api, isLoading } = useApi()
+
+    const { files, open } = useFileDialog()
+
+    /** remove a file from our stored attachments (either locally stored or saved ones) */
+    function removeFile(i: number) {
+      if (isPublicForm) {
+        storedFiles.value.splice(i, 1)
+
+        updateModelValue(storedFiles.value.map((storedFile) => storedFile.file))
+      } else {
+        attachments.value.splice(i, 1)
+        updateModelValue(attachments.value)
+      }
+    }
+
+    /** save a file on select / drop, either locally (in-memory) or in the db */
+    async function onFileSelect(selectedFiles: FileList | File[]) {
+      if (!selectedFiles.length || isPublicGrid) return
+
+      if (isPublicForm) {
+        storedFiles.value.push(
+          ...Array.from(selectedFiles).map((file) => {
+            const res = { file, title: file.name }
+            if (isImage(file.name, (file as any).mimetype)) {
+              const reader = new FileReader()
+              reader.readAsDataURL(file)
+            }
+            return res
+          }),
+        )
+
+        return updateModelValue(storedFiles.value.map((storedFile) => storedFile.file))
+      }
+
+      const newAttachments = []
+
+      for (const file of selectedFiles) {
+        try {
+          const data = await api.storage.upload(
+            {
+              path: [NOCO, project.value.title, meta.value.title, column.title].join('/'),
+            },
+            {
+              files: file,
+              json: '{}',
+            },
+          )
+
+          newAttachments.push(...data)
+        } catch (e: any) {
+          notification.error({
+            message: e.message || 'Some internal error occurred',
+          })
+        }
+      }
+
+      updateModelValue([...attachments.value, ...newAttachments])
+    }
+
+    /** save files on drop */
+    async function onDrop(droppedFiles: File[] | null) {
+      if (droppedFiles) {
+        // set files
+        await onFileSelect(droppedFiles)
+      }
+    }
+
+    /** download a file */
+    async function downloadFile(item: Record<string, any>) {
+      FileSaver.saveAs(item.url || item.data, item.title)
+    }
+
+    const FileIcon = (icon: string) => {
+      switch (icon) {
+        case 'mdi-pdf-box':
+          return MdiPdfBox
+        case 'mdi-file-word-outline':
+          return MdiFileWordOutline
+        case 'mdi-file-powerpoint-box':
+          return MdiFilePowerpointBox
+        case 'mdi-file-excel-outline':
+          return MdiFileExcelOutline
+        default:
+          return IcOutlineInsertDriveFile
+      }
+    }
+
+    /** our currently visible items, either the locally stored or the ones from db, depending on isPublicForm status */
+    const visibleItems = computed<any[]>(() => (isPublicForm ? storedFiles.value : attachments.value) || ([] as any[]))
+
+    watch(files, (nextFiles) => nextFiles && onFileSelect(nextFiles))
+
+    return {
+      attachments,
+      storedFiles,
+      visibleItems,
+      isPublicForm,
+      isForm,
+      isPublicGrid,
+      isReadonly,
+      meta,
+      column,
+      editEnabled,
+      isLoading,
+      api,
+      open,
+      onDrop,
+      modalVisible,
+      FileIcon,
+      removeFile,
+      downloadFile,
+      updateModelValue,
+      selectedImage,
+    }
+  },
+  'attachmentCell',
+)
diff --git a/packages/nc-gui-v2/components/general/Overlay.vue b/packages/nc-gui-v2/components/general/Overlay.vue
new file mode 100644
index 0000000000..cebc59432e
--- /dev/null
+++ b/packages/nc-gui-v2/components/general/Overlay.vue
@@ -0,0 +1,58 @@
+<script lang="ts" setup>
+import { onKeyDown } from '@vueuse/core'
+import type { TeleportProps } from '@vue/runtime-core'
+import { useVModel, watch } from '#imports'
+
+interface Props {
+  modelValue?: any
+  /** if true, overlay will use `position: absolute` instead of `position: fixed` */
+  inline?: boolean
+  /** target to teleport to */
+  target?: TeleportProps['to']
+  teleportDisabled?: TeleportProps['disabled']
+  transition?: boolean
+}
+
+interface Emits {
+  (event: 'update:modelValue', value: boolean): void
+  (event: 'close'): void
+  (event: 'open'): void
+}
+
+const { transition = true, teleportDisabled = false, inline = false, target, ...rest } = defineProps<Props>()
+
+const emits = defineEmits<Emits>()
+
+const vModel = useVModel(rest, 'modelValue', emits)
+
+onKeyDown('Escape', () => {
+  vModel.value = false
+})
+
+watch(vModel, (nextVal) => {
+  if (nextVal) emits('open')
+  else emits('close')
+})
+</script>
+
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+}
+</script>
+
+<template>
+  <teleport :disabled="teleportDisabled || (inline && !target)" :to="target || 'body'">
+    <div
+      v-bind="$attrs"
+      :class="[
+        vModel ? 'opacity-100' : 'opacity-0 pointer-events-none',
+        inline ? 'absolute' : 'fixed',
+        transition ? 'transition-opacity duration-200 ease-in-out' : '',
+      ]"
+      class="z-100 top-0 left-0 bottom-0 right-0 bg-gray-700/75"
+    >
+      <slot :is-open="vModel" />
+    </div>
+  </teleport>
+</template>
diff --git a/packages/nc-gui-v2/components/smartsheet/Cell.vue b/packages/nc-gui-v2/components/smartsheet/Cell.vue
index 44ff43c52f..e41018b4d9 100644
--- a/packages/nc-gui-v2/components/smartsheet/Cell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Cell.vue
@@ -1,30 +1,25 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
 import { provide } from 'vue'
-import { computed, useColumn } from '#imports'
+import { useColumn, useVModel } from '#imports'
 import { ColumnInj } from '~/context'
 
 interface Props {
   column: ColumnType
   modelValue: any
-  editEnabled: boolean
 }
 
-const { column, modelValue: value, editEnabled } = defineProps<Props>()
+interface Emits {
+  (event: 'update:modelValue', value: any): void
+}
 
-const emit = defineEmits(['update:modelValue'])
+const { column, ...rest } = defineProps<Props>()
 
-provide(ColumnInj, column)
+const emit = defineEmits<Emits>()
 
-provide(
-  'editEnabled',
-  computed(() => editEnabled),
-)
+provide(ColumnInj, column)
 
-const localState = computed({
-  get: () => value,
-  set: (val) => emit('update:modelValue', val),
-})
+const vModel = useVModel(rest, 'modelValue', emit)
 
 const {
   isURL,
@@ -53,155 +48,27 @@ const {
 
 <template>
   <div class="nc-cell" @keydown.stop.left @keydown.stop.right @keydown.stop.up @keydown.stop.down>
-    <!--
-todo :
- JSONCell
--->
-
-    <!--    <RatingCell -->
-    <!--      v-if="isRating" -->
-    <!--      /> -->
-    <!--      v-model="localState"
-          :active="active"
-          :is-form="isForm"
-          :column="column"
-          :is-public-grid="isPublic && !isForm"
-          :is-public-form="isPublic && isForm"
-          :is-locked="isLocked"
-          v-on="$listeners"
-        /> -->
-
-    <!--    <DurationCell -->
-    <!--      v-else-if="isDuration" -->
-    <!--      /> -->
-    <!-- &lt;!&ndash;      v-model="localState" -->
-    <!--      :active="active" -->
-    <!--      :is-form="isForm" -->
-    <!--      :column="column" -->
-    <!--      :is-locked="isLocked" -->
-    <!--      v-on="parentListeners" -->
-    <!--    />&ndash;&gt; -->
-
-    <!--    <DatePickerCell -->
-    <!--      v-else-if="isDate" -->
-    <!--      /> -->
-    <!-- &lt;!&ndash;      v-model="localState" -->
-    <!--      v-on="parentListeners" -->
-    <!--    />&ndash;&gt; -->
-
-    <!--    <TimePickerCell -->
-    <!--      v-else-if="isTime" -->
-    <!--      /> -->
-    <!-- &lt;!&ndash;      v-model="localState" -->
-    <!--      v-on="parentListeners" -->
-    <!--      @save="$emit('save')" -->
-    <!--    />&ndash;&gt; -->
-
-    <!--    <DateTimePickerCell -->
-    <!--      v-else-if="isDateTime" -->
-    <!--      /> -->
-    <!-- &lt;!&ndash;      v-model="localState" -->
-    <!--      ignore-focus -->
-    <!--      v-on="parentListeners" -->
-    <!--    />&ndash;&gt; -->
-
-    <!--    <EnumCell -->
-    <!--      v-else-if="isEnum && ((!isForm && !active) || isLocked || (isPublic && !isForm))" -->
-    <!--      /> -->
-    <!-- &lt;!&ndash;      v-model="localState" -->
-    <!--      :column="column" -->
-    <!--      v-on="parentListeners" -->
-    <!--    />&ndash;&gt; -->
-    <!--    <EnumListCell -->
-    <!--      v-else-if="isEnum" -->
-    <!--      /> -->
-    <!-- &lt;!&ndash;      v-model="localState"&ndash;&gt; -->
-    <!-- &lt;!&ndash;      :is-form="isForm"&ndash;&gt; -->
-    <!-- &lt;!&ndash;      :column="column"&ndash;&gt; -->
-    <!-- &lt;!&ndash;      v-on="parentListeners"&ndash;&gt; -->
-    <!-- &lt;!&ndash;    />&ndash;&gt; -->
-
-    <!--    <JsonEditableCell -->
-    <!--      v-else-if="isJSON" -->
-    <!--      /> -->
-    <!-- &lt;!&ndash;      v-model="localState" -->
-    <!--      :is-form="isForm" -->
-    <!--      v-on="parentListeners" -->
-    <!--      @input="$emit('save')" -->
-    <!--    />&ndash;&gt; -->
-
-    <!--    <SetListEditableCell -->
-    <!--      v-else-if="isSet && (active || isForm) && !isLocked && !(isPublic && !isForm)" -->
-    <!--      /> -->
-    <!-- &lt;!&ndash;      v-model="localState" -->
-    <!--      :column="column" -->
-    <!--      v-on="parentListeners" -->
-    <!--    />&ndash;&gt; -->
-    <!--    <SetListCell -->
-    <!--      v-else-if="isSet" -->
-    <!--      /> -->
-    <!-- &lt;!&ndash;      v-model="localState" -->
-    <!--      :column="column" -->
-    <!--      v-on="parentListeners" -->
-    <!--    />&ndash;&gt; -->
-
-    <!--    <UrlCell v-else-if="isURL" -->
-    <!--                     /> -->
-    <!-- &lt;!&ndash;                     v-model="localState" v-on="parentListeners" &ndash;&gt; -->
-    <!-- &lt;!&ndash;    />&ndash;&gt; -->
-
-    <CellTextArea v-if="isTextArea" v-model="localState" />
-    <!--      v-model="localState"
-          :is-form="isForm"
-          v-on="parentListeners"
-        /> -->
-    <CellCheckbox v-else-if="isBoolean" v-model="localState" />
-    <!-- &lt;!&ndash;      v-model="localState" -->
-    <!--      :column="column" -->
-    <!--      :is-form="isForm" -->
-    <!--      v-on="parentListeners" -->
-    <!--    />&ndash;&gt; -->
-
-    <CellAttachment v-else-if="isAttachment" v-model="localState" />
-    <CellSingleSelect v-else-if="isSingleSelect" v-model="localState" />
-    <CellMultiSelect v-else-if="isMultiSelect" v-model="localState" />
-    <CellDatePicker v-else-if="isDate" v-model="localState" />
-    <CellYearPicker v-else-if="isYear" v-model="localState" />
-    <CellDateTimePicker v-else-if="isDateTime" v-model="localState" />
-    <CellTimePicker v-else-if="isTime" v-model="localState" />
-    <CellRating v-else-if="isRating" v-model="localState" />
-    <!--      v-model="localState"
-          :active="active"
-          :db-alias="dbAlias"
-          :meta="meta"
-          :is-form="isForm"
-          :column="column"
-          :is-public-grid="isPublic && !isForm"
-          :is-public-form="isPublic && isForm"
-          :view-id="viewId"
-          :is-locked="isLocked"
-          v-on="$listeners"
-        /> -->
-    <CellDuration v-else-if="isDuration" v-model="localState" />
-    <CellEmail v-else-if="isEmail" v-model="localState" />
-    <CellUrl v-else-if="isURL" v-model="localState" />
-    <CellPhoneNumber v-else-if="isPhoneNumber" v-model="localState" />
-    <!-- v-on="parentListeners"
-        />
-    -->
-    <CellCurrency v-else-if="isCurrency" v-model="localState" />
-    <CellDecimal v-else-if="isDecimal" v-model="localState" />
-    <CellInteger v-else-if="isInt" v-model="localState" />
-    <CellFloat v-else-if="isFloat" v-model="localState" />
-    <CellText v-else-if="isString" v-model="localState" />
-    <!-- v-on="parentListeners"
-        />
-    -->
-    <CellPercent v-else-if="isPercent" v-model="localState" />
-    <CellText v-else v-model="localState" />
-    <!--  v-on="$listeners"   <span v-if="hint" class="nc-hint">{{ hint }}</span> -->
-
-    <!--    <div v-if="(isLocked || (isPublic && !isForm)) && !isAttachment" class="nc-locked-overlay" /> -->
+    <CellTextArea v-if="isTextArea" v-model="vModel" />
+    <CellCheckbox v-else-if="isBoolean" v-model="vModel" />
+    <CellAttachment v-else-if="isAttachment" v-model="vModel" />
+    <CellSingleSelect v-else-if="isSingleSelect" v-model="vModel" />
+    <CellMultiSelect v-else-if="isMultiSelect" v-model="vModel" />
+    <CellDatePicker v-else-if="isDate" v-model="vModel" />
+    <CellYearPicker v-else-if="isYear" v-model="vModel" />
+    <CellDateTimePicker v-else-if="isDateTime" v-model="vModel" />
+    <CellTimePicker v-else-if="isTime" v-model="vModel" />
+    <CellRating v-else-if="isRating" v-model="vModel" />
+    <CellDuration v-else-if="isDuration" v-model="vModel" />
+    <CellEmail v-else-if="isEmail" v-model="vModel" />
+    <CellUrl v-else-if="isURL" v-model="vModel" />
+    <CellPhoneNumber v-else-if="isPhoneNumber" v-model="vModel" />
+    <CellCurrency v-else-if="isCurrency" v-model="vModel" />
+    <CellDecimal v-else-if="isDecimal" v-model="vModel" />
+    <CellInteger v-else-if="isInt" v-model="vModel" />
+    <CellFloat v-else-if="isFloat" v-model="vModel" />
+    <CellText v-else-if="isString" v-model="vModel" />
+    <CellPercent v-else-if="isPercent" v-model="vModel" />
+    <CellText v-else v-model="vModel" />
   </div>
 </template>
 
@@ -222,7 +89,9 @@ div {
 }
 
 .nc-cell {
-  position: relative;
+  @apply relative h-full;
+  width: inherit;
+  display: inherit;
 }
 
 .nc-locked-overlay {
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index bae3fbbf1e..e4fb52653d 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -12,6 +12,7 @@ import {
 import {
   ActiveViewInj,
   ChangePageInj,
+  EditModeInj,
   FieldsInj,
   IsFormInj,
   IsGridInj,
@@ -44,6 +45,7 @@ provide(IsFormInj, false)
 provide(IsGridInj, true)
 provide(PaginationDataInj, paginationData)
 provide(ChangePageInj, changePage)
+provide(EditModeInj, editEnabled)
 
 const reloadViewDataHook = inject(ReloadViewDataHookInj)
 reloadViewDataHook?.on(() => {
@@ -142,68 +144,6 @@ if (meta) useProvideColumnCreateStore(meta)
               @click="selectCell(rowIndex, colIndex)"
               @dblclick="editEnabled = true"
             >
-              <!--          @contextmenu=" -->
-              <!--            showRowContextMenu($event, rowObj, rowMeta, row, col, columnObj) -->
-              <!--          " -->
-              <!--        > -->
-              <!--          <virtual-cell -->
-              <!--            v-if="isVirtualCol(columnObj)" -->
-              <!--            :password="password" -->
-              <!--            :is-public="isPublicView" -->
-              <!--            :metas="metas" -->
-              <!--            :is-locked="isLocked" -->
-              <!--            :column="columnObj" -->
-              <!--            :row="rowObj" -->
-              <!--            :nodes="nodes" -->
-              <!--            :meta="meta" -->
-              <!--            :api="api" -->
-              <!--            :active="selected.col === col && selected.row === row" -->
-              <!--            :sql-ui="sqlUi" -->
-              <!--            :is-new="rowMeta.new" -->
-              <!--            v-on="$listeners" -->
-              <!--            @updateCol=" -->
-              <!--              (...args) => -->
-              <!--                updateCol( -->
-              <!--                  ...args, -->
-              <!--                  columnObj.bt -->
-              <!--                    && meta.columns.find( -->
-              <!--                      (c) => c.column_name === columnObj.bt.column_name, -->
-              <!--                    ), -->
-              <!--                  col, -->
-              <!--                  row, -->
-              <!--                ) -->
-              <!--            " -->
-              <!--            @saveRow="onCellValueChange(col, row, columnObj, true)" -->
-              <!--          /> -->
-
-              <!--          <editable-cell -->
-              <!--            v-else-if=" -->
-              <!--              ((isPkAvail || rowMeta.new) -->
-              <!--                && !isView -->
-              <!--                && !isLocked -->
-              <!--                && !isPublicView -->
-              <!--                && editEnabled.col === col -->
-              <!--                && editEnabled.row === row) -->
-              <!--                || enableEditable(columnObj) -->
-              <!--            " -->
-              <!--            v-model="rowObj[columnObj.title]" -->
-              <!--            :column="columnObj" -->
-              <!--            :meta="meta" -->
-              <!--            :active="selected.col === col && selected.row === row" -->
-              <!--            :sql-ui="sqlUi" -->
-              <!--            :db-alias="nodes.dbAlias" -->
-              <!--            :is-locked="isLocked" -->
-              <!--            :is-public="isPublicView" -->
-              <!--            :view-id="viewId" -->
-              <!--            @save="editEnabled = {}; onCellValueChange(col, row, columnObj, true);" -->
-              <!--            @cancel="editEnabled = {}" -->
-              <!--            @update="onCellValueChange(col, row, columnObj, false)" -->
-              <!--            @blur="onCellValueChange(col, row, columnObj, true)" -->
-              <!--            @input="unsaved = true" -->
-              <!--            @navigateToNext="navigateToNext" -->
-              <!--            @navigateToPrev="navigateToPrev" -->
-              <!--          /> -->
-
               <SmartsheetVirtualCell v-if="isVirtualCol(columnObj)" v-model="row[columnObj.title]" :column="columnObj" />
 
               <SmartsheetCell
@@ -213,20 +153,6 @@ if (meta) useProvideColumnCreateStore(meta)
                 :edit-enabled="editEnabled && selected.col === colIndex && selected.row === rowIndex"
                 @update:model-value="updateRowProperty(row, columnObj.title)"
               />
-
-              <!--          <SmartsheetCell v-else :column="columnObj" :value="row[columnObj.title]" /> -->
-              <!-- :selected="selected.col === col && selected.row === row" -->
-              <!--        :is-locked="isLocked" -->
-              <!--            :column="columnObj" -->
-              <!--            :meta="meta" -->
-              <!--            :db-alias="nodes.dbAlias" -->
-              <!--            :value="rowObj[columnObj.title]" -->
-              <!--            :sql-ui="sqlUi" -->
-              <!--            @enableedit=" -->
-              <!--              makeSelected(col, row); -->
-              <!--              makeEditable(col, row, columnObj.ai, rowMeta); -->
-              <!--            " -->
-              <!--          /> -->
             </td>
           </tr>
         </tbody>
@@ -249,10 +175,6 @@ if (meta) useProvideColumnCreateStore(meta)
     height: 41px !important;
     position: relative;
     padding: 0 5px;
-
-    & > * {
-      @apply flex align-center h-auto;
-    }
     overflow: hidden;
   }
 
@@ -287,7 +209,7 @@ if (meta) useProvideColumnCreateStore(meta)
 
   // todo: replace with css variable
   td.active::after {
-    border: 2px solid #0040bc; /*var(--v-primary-lighten1);*/
+    @apply border-2 border-solid border-primary;
   }
 
   td.active::before {
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
index 6f8de8eac4..e3d3c9497f 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
@@ -73,7 +73,7 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
     collapsiple
     collapsed-width="50"
     width="250"
-    class="shadow !mt-[-9px]"
+    class="shadow !mt-[-9.5px]"
     style="height: calc(100% + 9px)"
     theme="light"
   >
diff --git a/packages/nc-gui-v2/composables/useViewColumns.ts b/packages/nc-gui-v2/composables/useViewColumns.ts
index 450d737b29..ef794e1431 100644
--- a/packages/nc-gui-v2/composables/useViewColumns.ts
+++ b/packages/nc-gui-v2/composables/useViewColumns.ts
@@ -28,23 +28,30 @@ export function useViewColumns(
     if (!meta || !view) return
 
     let order = 1
-    if (view?.value?.id) {
-      const data = await $api.dbViewColumn.list(view?.value?.id as string)
-      const fieldById: Record<string, any> = data.reduce((o: Record<string, any>, f: any) => {
-        f.show = !!f.show
+    if (view.value?.id) {
+      const data = (await $api.dbViewColumn.list(view.value.id)) as any[]
+
+      const fieldById = data.reduce<Record<string, any>>((acc, curr) => {
+        curr.show = !!curr.show
+
         return {
-          ...o,
-          [f.fk_column_id as string]: f,
+          ...acc,
+          [curr.fk_column_id]: curr,
         }
       }, {})
-      fields.value = meta.value?.columns
-        ?.map((c) => ({
-          title: c.title,
-          fk_column_id: c.id,
-          ...(fieldById[c.id as string] ? fieldById[c.id as string] : {}),
-          order: (fieldById[c.id as string] && fieldById[c.id as string].order) || order++,
-          system: isSystemColumn(fieldById[c.fk_model_id as string]?.type as ColumnType),
-        }))
+
+      fields.value = meta.value.columns
+        ?.map((column) => {
+          const currentColumnField = fieldById[column.id!] || {}
+
+          return {
+            title: column.title,
+            fk_column_id: column.id,
+            ...currentColumnField,
+            order: currentColumnField.order || order++,
+            system: isSystemColumn(currentColumnField.type || false),
+          }
+        })
         .sort((a, b) => a.order - b.order)
     } else if (isPublic) {
       fields.value = meta.value.columns as any
@@ -52,32 +59,37 @@ export function useViewColumns(
   }
 
   const showAll = async () => {
-    await $api.dbView.showAllColumn(view?.value?.id as string)
+    if (view?.value?.id) await $api.dbView.showAllColumn(view.value.id)
+
     await loadViewColumns()
     reloadData?.()
   }
   const hideAll = async () => {
-    await $api.dbView.hideAllColumn(view?.value?.id as string)
+    if (view?.value?.id) await $api.dbView.hideAllColumn(view.value.id)
+
     await loadViewColumns()
     reloadData?.()
   }
 
   const saveOrUpdate = async (field: any, index: number) => {
-    if (field.id) {
-      await $api.dbViewColumn.update(view?.value?.id as string, field.id, field)
-    } else {
-      if (fields.value) fields.value[index] = (await $api.dbViewColumn.create(view?.value?.id as string, field)) as any
+    if (field.id && view?.value?.id) {
+      await $api.dbViewColumn.update(view.value.id, field.id, field)
+    } else if (view?.value?.id) {
+      if (fields.value) fields.value[index] = (await $api.dbViewColumn.create(view.value.id, field)) as any
     }
+
     reloadData?.()
   }
 
   const metaColumnById = computed(() => {
-    return meta?.value?.columns?.reduce<Record<string, ColumnType>>((o: Record<string, any>, c: any) => {
-      return {
-        ...o,
-        [c.id]: c,
-      }
-    }, {})
+    return (
+      meta.value.columns?.reduce<Record<string, ColumnType>>((acc, curr) => {
+        return {
+          ...acc,
+          [curr.id!]: curr,
+        }
+      }, {}) || {}
+    )
   })
 
   const showSystemFields = computed({
@@ -86,28 +98,27 @@ export function useViewColumns(
       return (view?.value as any)?.show_system_fields || false
     },
     set(v) {
-      if (view?.value) {
-        $api.dbView.update(
-          view?.value?.id as string,
-          {
-            // todo: update swagger
-            show_system_fields: v,
-          } as any,
-        )
+      if (view?.value?.id) {
+        $api.dbView.update(view.value.id, {
+          // todo: update swagger
+          show_system_fields: v,
+        } as any)
         ;(view.value as any).show_system_fields = v
       }
     },
   })
 
   const filteredFieldList = computed(() => {
-    return fields.value?.filter((field) => {
-      // hide system columns if not enabled
-      if (!showSystemFields.value && isSystemColumn(metaColumnById?.value?.[field.fk_column_id as string])) {
-        return false
-      }
+    return (
+      fields.value?.filter((field) => {
+        // hide system columns if not enabled
+        if (!showSystemFields.value && isSystemColumn(metaColumnById?.value?.[field.fk_column_id!])) {
+          return false
+        }
 
-      return !filterQuery?.value || field.title.toLowerCase().includes(filterQuery.value.toLowerCase())
-    })
+        return !filterQuery?.value || field.title.toLowerCase().includes(filterQuery.value.toLowerCase())
+      }) || {}
+    )
   })
 
   const sortedAndFilteredFields = computed<ColumnType[]>(() => {
@@ -117,15 +128,15 @@ export function useViewColumns(
         if (
           !showSystemFields.value &&
           metaColumnById.value &&
-          metaColumnById?.value?.[c.fk_column_id as string] &&
-          isSystemColumn(metaColumnById?.value?.[c.fk_column_id as string])
+          metaColumnById?.value?.[c.fk_column_id!] &&
+          isSystemColumn(metaColumnById.value?.[c.fk_column_id!])
         ) {
           return false
         }
         return c.show
       })
-      ?.sort((c1, c2) => c1.order - c2.order)
-      ?.map((c) => metaColumnById?.value?.[c.fk_column_id as string]) || []) as ColumnType[]
+      ?.sort((a, b) => a.order - b.order)
+      ?.map((c) => metaColumnById?.value?.[c.fk_column_id!]) || []) as ColumnType[]
   })
 
   // reload view columns when table meta changes
diff --git a/packages/nc-gui-v2/context/index.ts b/packages/nc-gui-v2/context/index.ts
index d5213f89b0..809c3ee5cd 100644
--- a/packages/nc-gui-v2/context/index.ts
+++ b/packages/nc-gui-v2/context/index.ts
@@ -21,3 +21,4 @@ export const FieldsInj: InjectionKey<Ref<any[]>> = Symbol('fields-injection')
 export const ViewListInj: InjectionKey<Ref<(GridType | FormType | KanbanType | GalleryType)[]>> = Symbol('view-list-injection')
 
 export const RightSidebarInj: InjectionKey<Ref<boolean>> = Symbol('right-sidebar-injection')
+export const EditModeInj: InjectionKey<Ref<boolean>> = Symbol('edit-mode-injection')
diff --git a/packages/nc-gui-v2/nuxt.config.ts b/packages/nc-gui-v2/nuxt.config.ts
index 745d4136e7..18ff65ac2b 100644
--- a/packages/nc-gui-v2/nuxt.config.ts
+++ b/packages/nc-gui-v2/nuxt.config.ts
@@ -8,7 +8,7 @@ import monacoEditorPlugin from 'vite-plugin-monaco-editor'
 
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig({
-  modules: ['@vueuse/nuxt', 'nuxt-windicss'],
+  modules: ['@vueuse/nuxt', 'nuxt-windicss', '@nuxt/image-edge'],
 
   ssr: false,
 
diff --git a/packages/nc-gui-v2/package-lock.json b/packages/nc-gui-v2/package-lock.json
index 33942a1dde..fc8137a7d4 100644
--- a/packages/nc-gui-v2/package-lock.json
+++ b/packages/nc-gui-v2/package-lock.json
@@ -5,9 +5,9 @@
   "packages": {
     "": {
       "dependencies": {
-        "@vueuse/core": "^8.7.5",
-        "@vueuse/integrations": "^8.9.1",
-        "ant-design-vue": "^3.1.0-rc.6",
+        "@vueuse/core": "^9.0.2",
+        "@vueuse/integrations": "^9.0.2",
+        "ant-design-vue": "^3.2.10",
         "dayjs": "^1.11.3",
         "file-saver": "^2.0.5",
         "jwt-decode": "^3.1.2",
@@ -34,14 +34,16 @@
         "@iconify-json/mdi": "^1.1.25",
         "@iconify-json/ri": "^1.1.3",
         "@intlify/vite-plugin-vue-i18n": "^4.0.0",
+        "@nuxt/image-edge": "^1.0.0-27657146.da85542",
         "@types/axios": "^0.14.0",
+        "@types/file-saver": "^2.0.5",
         "@types/papaparse": "^5.3.2",
         "@types/sortablejs": "^1.13.0",
         "@vitejs/plugin-vue": "^2.3.3",
         "@vitest/ui": "^0.18.0",
         "@vue/compiler-sfc": "^3.2.37",
         "@vue/test-utils": "^2.0.2",
-        "@vueuse/nuxt": "^8.6.0",
+        "@vueuse/nuxt": "^9.0.2",
         "@windicss/plugin-animations": "^1.0.9",
         "@windicss/plugin-question-mark": "^0.1.1",
         "@windicss/plugin-scrollbar": "^1.2.3",
@@ -1546,29 +1548,52 @@
       "integrity": "sha512-YBI/6o2EBz02tdEJRBK8xkt3zvOFOWlLBf7WKYGBsSYSRtjjgrqPe2skp6VLLmKx5WbHHDNcW+6oACaurxGzeA==",
       "dev": true
     },
+    "node_modules/@nuxt/image-edge": {
+      "version": "1.0.0-27657146.da85542",
+      "resolved": "https://registry.npmjs.org/@nuxt/image-edge/-/image-edge-1.0.0-27657146.da85542.tgz",
+      "integrity": "sha512-iMDB1KR4D/2smyShDTJ2Jf1FMj42elYOWDpkHgFZvSIf7eZcg8TVGW45lTjlp7VbQ/TgC1I0kYZBEFdc1AGXrw==",
+      "dev": true,
+      "dependencies": {
+        "@nuxt/kit": "^3.0.0-rc.4",
+        "consola": "^2.15.3",
+        "defu": "^6.0.0",
+        "h3": "^0.7.10",
+        "image-meta": "^0.1.1",
+        "node-fetch-native": "^0.1.4",
+        "ohash": "^0.1.0",
+        "pathe": "^0.3.2",
+        "ufo": "^0.8.5"
+      },
+      "engines": {
+        "node": ">=14.20.0"
+      },
+      "optionalDependencies": {
+        "ipx": "^0.9.10"
+      }
+    },
     "node_modules/@nuxt/kit": {
-      "version": "3.0.0-rc.4",
-      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.0.0-rc.4.tgz",
-      "integrity": "sha512-ZBSeHFy3fPUx0equCtyP6eVUAZQWwRqTp2YnHSFqM5+yhN5aTGo8gBlfwttVBr4yhFBpGFRHhQj/iNPqrCeTnQ==",
+      "version": "3.0.0-rc.6",
+      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.0.0-rc.6.tgz",
+      "integrity": "sha512-+lxSd6dSWlAzMXfGOPcY4856xnMF1Ck1rycFUZ+K2QYiDXphq/fiW2eMaWLVvqgPyL2Box2WzVDZJ6C5ceptcw==",
       "dev": true,
       "dependencies": {
-        "@nuxt/schema": "^3.0.0-rc.4",
-        "c12": "^0.2.7",
+        "@nuxt/schema": "^3.0.0-rc.6",
+        "c12": "^0.2.8",
         "consola": "^2.15.3",
         "defu": "^6.0.0",
         "globby": "^13.1.2",
         "hash-sum": "^2.0.0",
         "ignore": "^5.2.0",
-        "jiti": "^1.13.0",
+        "jiti": "^1.14.0",
         "knitwork": "^0.1.2",
         "lodash.template": "^4.5.0",
-        "mlly": "^0.5.2",
-        "pathe": "^0.3.0",
-        "pkg-types": "^0.3.2",
+        "mlly": "^0.5.4",
+        "pathe": "^0.3.2",
+        "pkg-types": "^0.3.3",
         "scule": "^0.2.1",
         "semver": "^7.3.7",
         "unctx": "^1.1.4",
-        "unimport": "^0.2.7",
+        "unimport": "^0.4.5",
         "untyped": "^0.4.4"
       },
       "engines": {
@@ -1576,27 +1601,27 @@
       }
     },
     "node_modules/@nuxt/kit/node_modules/unimport": {
-      "version": "0.2.10",
-      "resolved": "https://registry.npmjs.org/unimport/-/unimport-0.2.10.tgz",
-      "integrity": "sha512-HoQ0ZDzHJboRYJ4/YxtMAATxiya/s5C2UE6jLFNj1e0D6Qfq6Pw2P40L+ALCkjLwLhR8l2VROE7kba/AaFtdQg==",
+      "version": "0.4.7",
+      "resolved": "https://registry.npmjs.org/unimport/-/unimport-0.4.7.tgz",
+      "integrity": "sha512-V2Pbscd1VSdgWm1/OI2pjtydEOTjE7DDnHZKhpOq7bSUBc1i8+1f6PK8jI1lJ1plRDcSNr0DLtAmtU9NPkFQpw==",
       "dev": true,
       "dependencies": {
         "@rollup/pluginutils": "^4.2.1",
         "escape-string-regexp": "^5.0.0",
         "fast-glob": "^3.2.11",
-        "local-pkg": "^0.4.1",
+        "local-pkg": "^0.4.2",
         "magic-string": "^0.26.2",
-        "mlly": "^0.5.3",
-        "pathe": "^0.3.0",
+        "mlly": "^0.5.5",
+        "pathe": "^0.3.2",
         "scule": "^0.2.1",
         "strip-literal": "^0.4.0",
-        "unplugin": "^0.7.0"
+        "unplugin": "^0.7.2"
       }
     },
     "node_modules/@nuxt/kit/node_modules/unplugin": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-0.7.1.tgz",
-      "integrity": "sha512-Z6hNDXDNh9aimMkPU1mEjtk+2ova8gh0y7rJeJdGH1vWZOHwF2lLQiQ/R97rv9ymmzEQXsR2fyMet72T8jy6ew==",
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-0.7.2.tgz",
+      "integrity": "sha512-m7thX4jP8l5sETpLdUASoDOGOcHaOVtgNyrYlToyQUvILUtEzEnngRBrHnAX3IKqooJVmXpoa/CwQ/QqzvGaHQ==",
       "dev": true,
       "dependencies": {
         "acorn": "^8.7.1",
@@ -1626,48 +1651,48 @@
       }
     },
     "node_modules/@nuxt/schema": {
-      "version": "3.0.0-rc.4",
-      "resolved": "https://registry.npmjs.org/@nuxt/schema/-/schema-3.0.0-rc.4.tgz",
-      "integrity": "sha512-5yjfKvPJ/NboevQYZLyO1SS9nJW6KHtdd7Ei61D19gYGtnN+aOpxOnUX08A1rZMb3G2Cw5JRxVeF9+AfBYefJg==",
+      "version": "3.0.0-rc.6",
+      "resolved": "https://registry.npmjs.org/@nuxt/schema/-/schema-3.0.0-rc.6.tgz",
+      "integrity": "sha512-BcD5YtWRhn+jU2DlzuI1TeITFeOt5x6qm2KeaU/d5jzJ0oZDzmZwKsAimLtRbHwyU6/kKa+zFbK6pp5obm1XLg==",
       "dev": true,
       "dependencies": {
-        "c12": "^0.2.7",
+        "c12": "^0.2.8",
         "create-require": "^1.1.1",
         "defu": "^6.0.0",
-        "jiti": "^1.13.0",
-        "pathe": "^0.3.0",
+        "jiti": "^1.14.0",
+        "pathe": "^0.3.2",
         "postcss-import-resolver": "^2.0.0",
         "scule": "^0.2.1",
         "std-env": "^3.1.1",
-        "ufo": "^0.8.4",
-        "unimport": "^0.2.7"
+        "ufo": "^0.8.5",
+        "unimport": "^0.4.5"
       },
       "engines": {
         "node": "^14.16.0 || ^16.11.0 || ^17.0.0 || ^18.0.0"
       }
     },
     "node_modules/@nuxt/schema/node_modules/unimport": {
-      "version": "0.2.10",
-      "resolved": "https://registry.npmjs.org/unimport/-/unimport-0.2.10.tgz",
-      "integrity": "sha512-HoQ0ZDzHJboRYJ4/YxtMAATxiya/s5C2UE6jLFNj1e0D6Qfq6Pw2P40L+ALCkjLwLhR8l2VROE7kba/AaFtdQg==",
+      "version": "0.4.7",
+      "resolved": "https://registry.npmjs.org/unimport/-/unimport-0.4.7.tgz",
+      "integrity": "sha512-V2Pbscd1VSdgWm1/OI2pjtydEOTjE7DDnHZKhpOq7bSUBc1i8+1f6PK8jI1lJ1plRDcSNr0DLtAmtU9NPkFQpw==",
       "dev": true,
       "dependencies": {
         "@rollup/pluginutils": "^4.2.1",
         "escape-string-regexp": "^5.0.0",
         "fast-glob": "^3.2.11",
-        "local-pkg": "^0.4.1",
+        "local-pkg": "^0.4.2",
         "magic-string": "^0.26.2",
-        "mlly": "^0.5.3",
-        "pathe": "^0.3.0",
+        "mlly": "^0.5.5",
+        "pathe": "^0.3.2",
         "scule": "^0.2.1",
         "strip-literal": "^0.4.0",
-        "unplugin": "^0.7.0"
+        "unplugin": "^0.7.2"
       }
     },
     "node_modules/@nuxt/schema/node_modules/unplugin": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-0.7.1.tgz",
-      "integrity": "sha512-Z6hNDXDNh9aimMkPU1mEjtk+2ova8gh0y7rJeJdGH1vWZOHwF2lLQiQ/R97rv9ymmzEQXsR2fyMet72T8jy6ew==",
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-0.7.2.tgz",
+      "integrity": "sha512-m7thX4jP8l5sETpLdUASoDOGOcHaOVtgNyrYlToyQUvILUtEzEnngRBrHnAX3IKqooJVmXpoa/CwQ/QqzvGaHQ==",
       "dev": true,
       "dependencies": {
         "acorn": "^8.7.1",
@@ -2248,6 +2273,12 @@
       "integrity": "sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==",
       "dev": true
     },
+    "node_modules/@types/file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-zv9kNf3keYegP5oThGLaPk8E081DFDuwfqjtiTzm6PoxChdJ1raSuADf2YGCVIyrSynLrgc8JWv296s7Q7pQSQ==",
+      "dev": true
+    },
     "node_modules/@types/form-data": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/@types/form-data/-/form-data-0.0.33.tgz",
@@ -2350,9 +2381,9 @@
       "dev": true
     },
     "node_modules/@types/web-bluetooth": {
-      "version": "0.0.14",
-      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.14.tgz",
-      "integrity": "sha512-5d2RhCard1nQUC3aHcq/gHzWYO6K0WJmAbjO7mQJgCQKtZpgXxv1rOM6O/dBDhDYYVutk1sciOgNSe+5YyfM8A=="
+      "version": "0.0.15",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.15.tgz",
+      "integrity": "sha512-w7hEHXnPMEZ+4nGKl/KDRVpxkwYxYExuHOYXyzIzCDzEZ9ZCGMAewulr9IqJu2LR4N37fcnb1XVeuZ09qgOxhA=="
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "5.30.0",
@@ -2813,58 +2844,23 @@
       }
     },
     "node_modules/@vueuse/core": {
-      "version": "8.7.5",
-      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-8.7.5.tgz",
-      "integrity": "sha512-tqgzeZGoZcXzoit4kOGLWJibDMLp0vdm6ZO41SSUQhkhtrPhAg6dbIEPiahhUu6sZAmSYvVrZgEr5aKD51nrLA==",
-      "dependencies": {
-        "@types/web-bluetooth": "^0.0.14",
-        "@vueuse/metadata": "8.7.5",
-        "@vueuse/shared": "8.7.5",
-        "vue-demi": "*"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "@vue/composition-api": "^1.1.0",
-        "vue": "^2.6.0 || ^3.2.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        },
-        "vue": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@vueuse/core/node_modules/@vueuse/shared": {
-      "version": "8.7.5",
-      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-8.7.5.tgz",
-      "integrity": "sha512-THXPvMBFmg6Gf6AwRn/EdTh2mhqwjGsB2Yfp374LNQSQVKRHtnJ0I42bsZTn7nuEliBxqUrGQm/lN6qUHmhJLw==",
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.0.2.tgz",
+      "integrity": "sha512-kOIqaQPSs7OSByWg1ulEKRUJbsq3FmbJiUr0RhEKpt3O1Uhl4DrDj85DUbQBABVYgPvSaY6AE/fP3/FOcRIOoQ==",
       "dependencies": {
+        "@types/web-bluetooth": "^0.0.15",
+        "@vueuse/metadata": "9.0.2",
+        "@vueuse/shared": "9.0.2",
         "vue-demi": "*"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "@vue/composition-api": "^1.1.0",
-        "vue": "^2.6.0 || ^3.2.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        },
-        "vue": {
-          "optional": true
-        }
       }
     },
     "node_modules/@vueuse/core/node_modules/vue-demi": {
-      "version": "0.13.2",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.2.tgz",
-      "integrity": "sha512-41ukrclEbMddAyP7PvxMSYqnOSzPV6r7GNnyTSKSCNTaz19GehxmTiXyP9kwHSUv2+Dr6hHqiUiF7L1VAw2KdQ==",
+      "version": "0.13.6",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.6.tgz",
+      "integrity": "sha512-02NYpxgyGE2kKGegRPYlNQSL1UWfA/+JqvzhGCOYjhfbLWXU5QQX0+9pAm/R2sCOPKr5NBxVIab7fvFU0B1RxQ==",
       "hasInstallScript": true,
       "bin": {
         "vue-demi-fix": "bin/vue-demi-fix.js",
@@ -2896,12 +2892,12 @@
       }
     },
     "node_modules/@vueuse/integrations": {
-      "version": "8.9.1",
-      "resolved": "https://registry.npmjs.org/@vueuse/integrations/-/integrations-8.9.1.tgz",
-      "integrity": "sha512-xeApqTnMBUzlrpJacCdaFqUfTEf7NZUgHKJTsK9I41ISf2+pywgwpfjVk6KVSKk+GuE2MB1c945lul5jA5IcwA==",
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/integrations/-/integrations-9.0.2.tgz",
+      "integrity": "sha512-Z7xwgjSaG7FeBDfFhwXbspLrLKdvjFkI/AfDJ/jz9bez73nkg3Pqnz7jD4rZ6o3lOBJ6cNLizCF5E2qEXtSLJw==",
       "dependencies": {
-        "@vueuse/core": "8.9.1",
-        "@vueuse/shared": "8.9.1",
+        "@vueuse/core": "9.0.2",
+        "@vueuse/shared": "9.0.2",
         "vue-demi": "*"
       },
       "funding": {
@@ -2952,67 +2948,60 @@
         }
       }
     },
-    "node_modules/@vueuse/integrations/node_modules/@vueuse/core": {
-      "version": "8.9.1",
-      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-8.9.1.tgz",
-      "integrity": "sha512-a7goYb/gJxjXRBw4Fr/jEACiN33ghwM1ohJVu+Zwsr3lNL4qCQ1nU+ogta98lNg5hXJxWj7mYEmQDjjyWOu5nA==",
-      "dependencies": {
-        "@types/web-bluetooth": "^0.0.14",
-        "@vueuse/metadata": "8.9.1",
-        "@vueuse/shared": "8.9.1",
-        "vue-demi": "*"
+    "node_modules/@vueuse/integrations/node_modules/vue-demi": {
+      "version": "0.13.6",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.6.tgz",
+      "integrity": "sha512-02NYpxgyGE2kKGegRPYlNQSL1UWfA/+JqvzhGCOYjhfbLWXU5QQX0+9pAm/R2sCOPKr5NBxVIab7fvFU0B1RxQ==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       },
       "peerDependencies": {
-        "@vue/composition-api": "^1.1.0",
-        "vue": "^2.6.0 || ^3.2.0"
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
       },
       "peerDependenciesMeta": {
         "@vue/composition-api": {
           "optional": true
-        },
-        "vue": {
-          "optional": true
         }
       }
     },
-    "node_modules/@vueuse/integrations/node_modules/@vueuse/metadata": {
-      "version": "8.9.1",
-      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-8.9.1.tgz",
-      "integrity": "sha512-6LADOlyl3oENHa9dsoY7LXjU1Mh14DnpM6ztETI3hpm5ZffOMIG5CB2Q6aEZfIvYr1lkJVmG2L82wFKk7VRfIA==",
+    "node_modules/@vueuse/metadata": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.0.2.tgz",
+      "integrity": "sha512-TRh+TNUYXiodatSAxd0xZc7sh4RfktVVgNFIN7TCQXKyancbCAcWfHvKfgdlX8LcqSBxKoHVa90n0XdUbboTkw==",
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
     },
-    "node_modules/@vueuse/integrations/node_modules/@vueuse/shared": {
-      "version": "8.9.1",
-      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-8.9.1.tgz",
-      "integrity": "sha512-klZfn7ijI3juqVgpfQVrrlBh4uTFajwSCWm8Cdt45Kg26b1LZ9jn9n7J6GhmkFay5016GnjjivQoekQSMeJNUg==",
+    "node_modules/@vueuse/nuxt": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/nuxt/-/nuxt-9.0.2.tgz",
+      "integrity": "sha512-1NYT3DC58fZ0YxFGaGZ4V0uAd3E4YMMnalKd1K1HBvrW3exB9zcBW52spKMspZL9dnNlxyv3TauH52b94fMxqg==",
+      "dev": true,
       "dependencies": {
+        "@nuxt/kit": "^3.0.0-rc.6",
+        "@vueuse/core": "9.0.2",
+        "@vueuse/metadata": "9.0.2",
+        "local-pkg": "^0.4.2",
         "vue-demi": "*"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "@vue/composition-api": "^1.1.0",
-        "vue": "^2.6.0 || ^3.2.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        },
-        "vue": {
-          "optional": true
-        }
       }
     },
-    "node_modules/@vueuse/integrations/node_modules/vue-demi": {
+    "node_modules/@vueuse/nuxt/node_modules/vue-demi": {
       "version": "0.13.2",
       "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.2.tgz",
       "integrity": "sha512-41ukrclEbMddAyP7PvxMSYqnOSzPV6r7GNnyTSKSCNTaz19GehxmTiXyP9kwHSUv2+Dr6hHqiUiF7L1VAw2KdQ==",
+      "dev": true,
       "hasInstallScript": true,
       "bin": {
         "vue-demi-fix": "bin/vue-demi-fix.js",
@@ -3034,35 +3023,21 @@
         }
       }
     },
-    "node_modules/@vueuse/metadata": {
-      "version": "8.7.5",
-      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-8.7.5.tgz",
-      "integrity": "sha512-emJZKRQSaEnVqmlu39NpNp8iaW+bPC2kWykWoWOZMSlO/0QVEmO/rt8A5VhOEJTKLX3vwTevqbiRy9WJRwVOQg==",
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      }
-    },
-    "node_modules/@vueuse/nuxt": {
-      "version": "8.7.5",
-      "resolved": "https://registry.npmjs.org/@vueuse/nuxt/-/nuxt-8.7.5.tgz",
-      "integrity": "sha512-e+JSiNCdWaKyTiBtM856uNJaXeCw8Ka423AGsuvq+D+GXXQe0RhHzqqLS6pQutjWuftNRBRCOiITOzhtjMP+gA==",
-      "dev": true,
+    "node_modules/@vueuse/shared": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.0.2.tgz",
+      "integrity": "sha512-KwBDefK2ljLESpt0ffe2w8EGUCb3IaMfTzeytB/uHHjHOGOEIHLHHyn8W2C48uGQEvoe5iwaW4Bfp8cRUM6IFA==",
       "dependencies": {
-        "@nuxt/kit": "^3.0.0-rc.4",
-        "@vueuse/core": "8.7.5",
-        "@vueuse/metadata": "8.7.5",
-        "local-pkg": "^0.4.1",
         "vue-demi": "*"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
     },
-    "node_modules/@vueuse/nuxt/node_modules/vue-demi": {
-      "version": "0.13.2",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.2.tgz",
-      "integrity": "sha512-41ukrclEbMddAyP7PvxMSYqnOSzPV6r7GNnyTSKSCNTaz19GehxmTiXyP9kwHSUv2+Dr6hHqiUiF7L1VAw2KdQ==",
-      "dev": true,
+    "node_modules/@vueuse/shared/node_modules/vue-demi": {
+      "version": "0.13.6",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.6.tgz",
+      "integrity": "sha512-02NYpxgyGE2kKGegRPYlNQSL1UWfA/+JqvzhGCOYjhfbLWXU5QQX0+9pAm/R2sCOPKr5NBxVIab7fvFU0B1RxQ==",
       "hasInstallScript": true,
       "bin": {
         "vue-demi-fix": "bin/vue-demi-fix.js",
@@ -3999,26 +3974,20 @@
       }
     },
     "node_modules/c12": {
-      "version": "0.2.7",
-      "resolved": "https://registry.npmjs.org/c12/-/c12-0.2.7.tgz",
-      "integrity": "sha512-ih1nuHbZ6Ltf8Wss96JH6YvKIW5+9+uLAA08LUQAoDrFPGSyvPvQv/QBIRE+dCBWOK4PcwH0ylRkSa9huI1Acw==",
+      "version": "0.2.8",
+      "resolved": "https://registry.npmjs.org/c12/-/c12-0.2.8.tgz",
+      "integrity": "sha512-JomSyVwGnqndRdVVW6SGnHUeHIfJFQNe/4zPFK6zLKPQm8US+hNr4kZP7xeNnzjn3jnQUsBbPdT85fm8K5Pr4A==",
       "dev": true,
       "dependencies": {
         "defu": "^6.0.0",
-        "dotenv": "^16.0.0",
+        "dotenv": "^16.0.1",
         "gittar": "^0.1.1",
-        "jiti": "^1.12.14",
-        "mlly": "^0.5.1",
-        "pathe": "^0.2.0",
-        "rc9": "^1.2.1"
+        "jiti": "^1.14.0",
+        "mlly": "^0.5.4",
+        "pathe": "^0.3.2",
+        "rc9": "^1.2.2"
       }
     },
-    "node_modules/c12/node_modules/pathe": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/pathe/-/pathe-0.2.0.tgz",
-      "integrity": "sha512-sTitTPYnn23esFR3RlqYBWn4c45WGeLcsKzQiUpXJAyfcWkolvlYpV8FLo7JishK946oQwMFUCHXQ9AjGPKExw==",
-      "dev": true
-    },
     "node_modules/cac": {
       "version": "6.7.12",
       "resolved": "https://registry.npmjs.org/cac/-/cac-6.7.12.tgz",
@@ -4533,6 +4502,20 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/color": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
+      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "color-convert": "^2.0.1",
+        "color-string": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=12.5.0"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -4551,6 +4534,17 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "dev": true
     },
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
     "node_modules/color-support": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
@@ -4873,6 +4867,13 @@
         "node": ">=4"
       }
     },
+    "node_modules/cssfilter": {
+      "version": "0.0.10",
+      "resolved": "https://registry.npmjs.org/cssfilter/-/cssfilter-0.0.10.tgz",
+      "integrity": "sha512-FAaLDaplstoRsDR8XGYH51znUN0UY7nMc6Z9/fvE8EXGwvJE9hu7W2vHwx1+bd6gCYnln9nLbzxFTrcO9YQDZw==",
+      "dev": true,
+      "optional": true
+    },
     "node_modules/cssnano": {
       "version": "5.1.12",
       "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-5.1.12.tgz",
@@ -5114,6 +5115,22 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/decompress-response": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
+      "integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "mimic-response": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/deep-eql": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-3.0.1.tgz",
@@ -5126,6 +5143,16 @@
         "node": ">=0.12"
       }
     },
+    "node_modules/deep-extend": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
+      "dev": true,
+      "optional": true,
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -6893,6 +6920,16 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/expand-template": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/expand-template/-/expand-template-2.0.3.tgz",
+      "integrity": "sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==",
+      "dev": true,
+      "optional": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/external-editor": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-3.1.0.tgz",
@@ -7484,6 +7521,13 @@
         "git-up": "^4.0.0"
       }
     },
+    "node_modules/github-from-package": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz",
+      "integrity": "sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw==",
+      "dev": true,
+      "optional": true
+    },
     "node_modules/gittar": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/gittar/-/gittar-0.1.1.tgz",
@@ -7950,6 +7994,15 @@
         "node": ">= 4"
       }
     },
+    "node_modules/image-meta": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/image-meta/-/image-meta-0.1.1.tgz",
+      "integrity": "sha512-+oXiHwOEPr1IE5zY0tcBLED/CYcre15J4nwL50x3o0jxWqEkyjrusiKP3YSU+tr9fvJp33ZcP5Gpj2295g3aEw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.18.0"
+      }
+    },
     "node_modules/image-size": {
       "version": "0.5.5",
       "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
@@ -8130,6 +8183,29 @@
         "url": "https://opencollective.com/ioredis"
       }
     },
+    "node_modules/ipx": {
+      "version": "0.9.10",
+      "resolved": "https://registry.npmjs.org/ipx/-/ipx-0.9.10.tgz",
+      "integrity": "sha512-HymTmXe2QBiPMgsJg1EQtUYgTXfIB9ha7j8tHCQqYGDS7bTYMNWyq/fBdI3S+wc9ic+hbPlTim+uf8QgZcEykQ==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "consola": "^2.15.3",
+        "defu": "^6.0.0",
+        "destr": "^1.1.1",
+        "etag": "^1.8.1",
+        "image-meta": "^0.1.1",
+        "listhen": "^0.2.13",
+        "ohmyfetch": "^0.4.18",
+        "pathe": "^0.3.2",
+        "sharp": "^0.30.7",
+        "ufo": "^0.8.5",
+        "xss": "^1.0.13"
+      },
+      "bin": {
+        "ipx": "bin/ipx.mjs"
+      }
+    },
     "node_modules/is-alphabetical": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz",
@@ -9004,9 +9080,9 @@
       }
     },
     "node_modules/local-pkg": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.4.1.tgz",
-      "integrity": "sha512-lL87ytIGP2FU5PWwNDo0w3WhIo2gopIAxPg9RxDYF7m4rr5ahuZxP22xnJHIvaLTe4Z9P6uKKY2UHiwyB4pcrw==",
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.4.2.tgz",
+      "integrity": "sha512-mlERgSPrbxU3BP4qBqAvvwlgW4MTg78iwJdGGnv7kibKjWcJksrG3t6LB5lXI93wXRDvG4NpUgJFmTG4T6rdrg==",
       "dev": true,
       "engines": {
         "node": ">=14"
@@ -9409,6 +9485,19 @@
         "node": ">=6"
       }
     },
+    "node_modules/mimic-response": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
+      "integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==",
+      "dev": true,
+      "optional": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/min-indent": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
@@ -9473,22 +9562,23 @@
         "mkdirp": "bin/cmd.js"
       }
     },
-    "node_modules/mlly": {
+    "node_modules/mkdirp-classic": {
       "version": "0.5.3",
-      "resolved": "https://registry.npmjs.org/mlly/-/mlly-0.5.3.tgz",
-      "integrity": "sha512-im69tuLD9EJh9fc9TZRpJEFvsBcGMez7glUCWDcHWWCKzhvPmNvyaYjp/+h0qJJN/Xovrs//GzGjOOKmFw4Gog==",
+      "resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz",
+      "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==",
+      "dev": true,
+      "optional": true
+    },
+    "node_modules/mlly": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/mlly/-/mlly-0.5.5.tgz",
+      "integrity": "sha512-2R4JT/SxRDPexomw4rmHYY/gWAGmL9Kkq1OR76Ua6w+P340a1aBDTWzKo2kAlxzrG82OdXs5VB9Lmcmyit0Obg==",
       "dev": true,
       "dependencies": {
-        "pathe": "^0.2.0",
-        "pkg-types": "^0.3.2"
+        "pathe": "^0.3.2",
+        "pkg-types": "^0.3.3"
       }
     },
-    "node_modules/mlly/node_modules/pathe": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/pathe/-/pathe-0.2.0.tgz",
-      "integrity": "sha512-sTitTPYnn23esFR3RlqYBWn4c45WGeLcsKzQiUpXJAyfcWkolvlYpV8FLo7JishK946oQwMFUCHXQ9AjGPKExw==",
-      "dev": true
-    },
     "node_modules/monaco-editor": {
       "version": "0.33.0",
       "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.33.0.tgz",
@@ -9539,6 +9629,13 @@
       "resolved": "https://registry.npmjs.org/nanopop/-/nanopop-2.1.0.tgz",
       "integrity": "sha512-jGTwpFRexSH+fxappnGQtN9dspgE2ipa1aOjtR24igG0pv6JCxImIAmrLRHX+zUF5+1wtsFVbKyfP51kIGAVNw=="
     },
+    "node_modules/napi-build-utils": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-1.0.2.tgz",
+      "integrity": "sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg==",
+      "dev": true,
+      "optional": true
+    },
     "node_modules/natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -9722,6 +9819,26 @@
       "resolved": "../nocodb-sdk",
       "link": true
     },
+    "node_modules/node-abi": {
+      "version": "3.23.0",
+      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.23.0.tgz",
+      "integrity": "sha512-XWte/uvq7hmgY27WesfxLUAPejKUlkEbikhBFaIhxe+XkHa57rXBwYqGjsIyfVXaU8kC0Wp2p/qQroauDKs1XA==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "semver": "^7.3.5"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/node-addon-api": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-5.0.0.tgz",
+      "integrity": "sha512-CvkDw2OEnme7ybCykJpVcKH+uAOLV2qLqiyla128dN9TkEWfrYmxG6C2boDe5KcNQqZF3orkqzGgOMvZ/JNekA==",
+      "dev": true,
+      "optional": true
+    },
     "node_modules/node-domexception": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
@@ -9760,9 +9877,9 @@
       }
     },
     "node_modules/node-fetch-native": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/node-fetch-native/-/node-fetch-native-0.1.3.tgz",
-      "integrity": "sha512-Jf1IQZdovUIv9E+5avmN6Sf+bND+rnMlODnBQhdE2VRyuWP9WgqZb/KEgPekh19DAN1X2C4vbS1VCOaz2OH19g==",
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/node-fetch-native/-/node-fetch-native-0.1.4.tgz",
+      "integrity": "sha512-10EKpOCQPXwZVFh3U1ptOMWBgKTbsN7Vvo6WVKt5pw4hp8zbv6ZVBZPlXw+5M6Tyi1oc1iD4/sNPd71KYA16tQ==",
       "dev": true
     },
     "node_modules/node-forge": {
@@ -10558,9 +10675,9 @@
       }
     },
     "node_modules/pathe": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/pathe/-/pathe-0.3.0.tgz",
-      "integrity": "sha512-3vUjp552BJzCw9vqKsO5sttHkbYqqsZtH0x1PNtItgqx8BXEXzoY1SYRKcL6BTyVh4lGJGLj0tM42elUDMvcYA==",
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-0.3.3.tgz",
+      "integrity": "sha512-x3nrPvG0HDSDzUiJ0WqtzhN4MD+h5B+dFJ3/qyxVuARlr4Y3aJv8gri2cZzp9Z8sGs2a+aG9gNbKngh3gme57A==",
       "dev": true
     },
     "node_modules/pathval": {
@@ -11251,6 +11368,33 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "dev": true
     },
+    "node_modules/prebuild-install": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.1.tgz",
+      "integrity": "sha512-jAXscXWMcCK8GgCoHOfIr0ODh5ai8mj63L2nWrjuAgXE6tDyYGnx4/8o/rCgU+B4JSyZBKbeZqzhtwtC3ovxjw==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "detect-libc": "^2.0.0",
+        "expand-template": "^2.0.3",
+        "github-from-package": "0.0.0",
+        "minimist": "^1.2.3",
+        "mkdirp-classic": "^0.5.3",
+        "napi-build-utils": "^1.0.1",
+        "node-abi": "^3.3.0",
+        "pump": "^3.0.0",
+        "rc": "^1.2.7",
+        "simple-get": "^4.0.0",
+        "tar-fs": "^2.0.0",
+        "tunnel-agent": "^0.6.0"
+      },
+      "bin": {
+        "prebuild-install": "bin.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -11357,6 +11501,17 @@
       "optional": true,
       "peer": true
     },
+    "node_modules/pump": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
+      "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
     "node_modules/punycode": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
@@ -11443,6 +11598,32 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/rc": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+      "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "deep-extend": "^0.6.0",
+        "ini": "~1.3.0",
+        "minimist": "^1.2.0",
+        "strip-json-comments": "~2.0.1"
+      },
+      "bin": {
+        "rc": "cli.js"
+      }
+    },
+    "node_modules/rc/node_modules/strip-json-comments": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+      "integrity": "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==",
+      "dev": true,
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/rc9": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/rc9/-/rc9-1.2.2.tgz",
@@ -12152,6 +12333,30 @@
       "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz",
       "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA=="
     },
+    "node_modules/sharp": {
+      "version": "0.30.7",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.30.7.tgz",
+      "integrity": "sha512-G+MY2YW33jgflKPTXXptVO28HvNOo9G3j0MybYAHeEmby+QuD2U98dT6ueht9cv/XDqZspSpIhoSW+BAKJ7Hig==",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "dependencies": {
+        "color": "^4.2.3",
+        "detect-libc": "^2.0.1",
+        "node-addon-api": "^5.0.0",
+        "prebuild-install": "^7.1.1",
+        "semver": "^7.3.7",
+        "simple-get": "^4.0.1",
+        "tar-fs": "^2.1.1",
+        "tunnel-agent": "^0.6.0"
+      },
+      "engines": {
+        "node": ">=12.13.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -12193,6 +12398,70 @@
       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
       "dev": true
     },
+    "node_modules/simple-concat": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz",
+      "integrity": "sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "optional": true
+    },
+    "node_modules/simple-get": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-4.0.1.tgz",
+      "integrity": "sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "optional": true,
+      "dependencies": {
+        "decompress-response": "^6.0.0",
+        "once": "^1.3.1",
+        "simple-concat": "^1.0.0"
+      }
+    },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
+    "node_modules/simple-swizzle/node_modules/is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
+      "dev": true,
+      "optional": true
+    },
     "node_modules/sirv": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.2.tgz",
@@ -12704,6 +12973,19 @@
         "node": ">=4.5"
       }
     },
+    "node_modules/tar-fs": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.1.tgz",
+      "integrity": "sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "chownr": "^1.1.1",
+        "mkdirp-classic": "^0.5.2",
+        "pump": "^3.0.0",
+        "tar-stream": "^2.1.4"
+      }
+    },
     "node_modules/tar-stream": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
@@ -13064,6 +13346,19 @@
       "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
       "dev": true
     },
+    "node_modules/tunnel-agent": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
+      "integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "safe-buffer": "^5.0.1"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -13119,9 +13414,9 @@
       }
     },
     "node_modules/ufo": {
-      "version": "0.8.4",
-      "resolved": "https://registry.npmjs.org/ufo/-/ufo-0.8.4.tgz",
-      "integrity": "sha512-/+BmBDe8GvlB2nIflWasLLAInjYG0bC9HRnfEpNi4sw77J2AJNnEVnTDReVrehoh825+Q/evF3THXTAweyam2g==",
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/ufo/-/ufo-0.8.5.tgz",
+      "integrity": "sha512-e4+UtA5IRO+ha6hYklwj6r7BjiGMxS0O+UaSg9HbaTefg4kMkzj4tXzEBajRR+wkxf+golgAWKzLbytCUDMJAA==",
       "dev": true
     },
     "node_modules/unbox-primitive": {
@@ -14364,6 +14659,30 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/xss": {
+      "version": "1.0.13",
+      "resolved": "https://registry.npmjs.org/xss/-/xss-1.0.13.tgz",
+      "integrity": "sha512-clu7dxTm1e8Mo5fz3n/oW3UCXBfV89xZ72jM8yzo1vR/pIS0w3sgB3XV2H8Vm6zfGnHL0FzvLJPJEBhd86/z4Q==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "commander": "^2.20.3",
+        "cssfilter": "0.0.10"
+      },
+      "bin": {
+        "xss": "bin/xss"
+      },
+      "engines": {
+        "node": ">= 0.10.0"
+      }
+    },
+    "node_modules/xss/node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "dev": true,
+      "optional": true
+    },
     "node_modules/xxhashjs": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/xxhashjs/-/xxhashjs-0.2.2.tgz",
@@ -15588,54 +15907,72 @@
       "integrity": "sha512-YBI/6o2EBz02tdEJRBK8xkt3zvOFOWlLBf7WKYGBsSYSRtjjgrqPe2skp6VLLmKx5WbHHDNcW+6oACaurxGzeA==",
       "dev": true
     },
+    "@nuxt/image-edge": {
+      "version": "1.0.0-27657146.da85542",
+      "resolved": "https://registry.npmjs.org/@nuxt/image-edge/-/image-edge-1.0.0-27657146.da85542.tgz",
+      "integrity": "sha512-iMDB1KR4D/2smyShDTJ2Jf1FMj42elYOWDpkHgFZvSIf7eZcg8TVGW45lTjlp7VbQ/TgC1I0kYZBEFdc1AGXrw==",
+      "dev": true,
+      "requires": {
+        "@nuxt/kit": "^3.0.0-rc.4",
+        "consola": "^2.15.3",
+        "defu": "^6.0.0",
+        "h3": "^0.7.10",
+        "image-meta": "^0.1.1",
+        "ipx": "^0.9.10",
+        "node-fetch-native": "^0.1.4",
+        "ohash": "^0.1.0",
+        "pathe": "^0.3.2",
+        "ufo": "^0.8.5"
+      }
+    },
     "@nuxt/kit": {
-      "version": "3.0.0-rc.4",
-      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.0.0-rc.4.tgz",
-      "integrity": "sha512-ZBSeHFy3fPUx0equCtyP6eVUAZQWwRqTp2YnHSFqM5+yhN5aTGo8gBlfwttVBr4yhFBpGFRHhQj/iNPqrCeTnQ==",
+      "version": "3.0.0-rc.6",
+      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.0.0-rc.6.tgz",
+      "integrity": "sha512-+lxSd6dSWlAzMXfGOPcY4856xnMF1Ck1rycFUZ+K2QYiDXphq/fiW2eMaWLVvqgPyL2Box2WzVDZJ6C5ceptcw==",
       "dev": true,
       "requires": {
-        "@nuxt/schema": "^3.0.0-rc.4",
-        "c12": "^0.2.7",
+        "@nuxt/schema": "^3.0.0-rc.6",
+        "c12": "^0.2.8",
         "consola": "^2.15.3",
         "defu": "^6.0.0",
         "globby": "^13.1.2",
         "hash-sum": "^2.0.0",
         "ignore": "^5.2.0",
-        "jiti": "^1.13.0",
+        "jiti": "^1.14.0",
         "knitwork": "^0.1.2",
         "lodash.template": "^4.5.0",
-        "mlly": "^0.5.2",
-        "pathe": "^0.3.0",
-        "pkg-types": "^0.3.2",
+        "mlly": "^0.5.4",
+        "pathe": "^0.3.2",
+        "pkg-types": "^0.3.3",
         "scule": "^0.2.1",
         "semver": "^7.3.7",
         "unctx": "^1.1.4",
-        "unimport": "^0.2.7",
+        "unimport": "^0.4.5",
         "untyped": "^0.4.4"
       },
       "dependencies": {
         "unimport": {
-          "version": "0.2.10",
-          "resolved": "https://registry.npmjs.org/unimport/-/unimport-0.2.10.tgz",
-          "integrity": "sha512-HoQ0ZDzHJboRYJ4/YxtMAATxiya/s5C2UE6jLFNj1e0D6Qfq6Pw2P40L+ALCkjLwLhR8l2VROE7kba/AaFtdQg==",
+          "version": "0.4.7",
+          "resolved": "https://registry.npmjs.org/unimport/-/unimport-0.4.7.tgz",
+          "integrity": "sha512-V2Pbscd1VSdgWm1/OI2pjtydEOTjE7DDnHZKhpOq7bSUBc1i8+1f6PK8jI1lJ1plRDcSNr0DLtAmtU9NPkFQpw==",
           "dev": true,
           "requires": {
             "@rollup/pluginutils": "^4.2.1",
             "escape-string-regexp": "^5.0.0",
             "fast-glob": "^3.2.11",
-            "local-pkg": "^0.4.1",
+            "local-pkg": "^0.4.2",
             "magic-string": "^0.26.2",
-            "mlly": "^0.5.3",
-            "pathe": "^0.3.0",
+            "mlly": "^0.5.5",
+            "pathe": "^0.3.2",
             "scule": "^0.2.1",
             "strip-literal": "^0.4.0",
-            "unplugin": "^0.7.0"
+            "unplugin": "^0.7.2"
           }
         },
         "unplugin": {
-          "version": "0.7.1",
-          "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-0.7.1.tgz",
-          "integrity": "sha512-Z6hNDXDNh9aimMkPU1mEjtk+2ova8gh0y7rJeJdGH1vWZOHwF2lLQiQ/R97rv9ymmzEQXsR2fyMet72T8jy6ew==",
+          "version": "0.7.2",
+          "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-0.7.2.tgz",
+          "integrity": "sha512-m7thX4jP8l5sETpLdUASoDOGOcHaOVtgNyrYlToyQUvILUtEzEnngRBrHnAX3IKqooJVmXpoa/CwQ/QqzvGaHQ==",
           "dev": true,
           "requires": {
             "acorn": "^8.7.1",
@@ -15647,45 +15984,45 @@
       }
     },
     "@nuxt/schema": {
-      "version": "3.0.0-rc.4",
-      "resolved": "https://registry.npmjs.org/@nuxt/schema/-/schema-3.0.0-rc.4.tgz",
-      "integrity": "sha512-5yjfKvPJ/NboevQYZLyO1SS9nJW6KHtdd7Ei61D19gYGtnN+aOpxOnUX08A1rZMb3G2Cw5JRxVeF9+AfBYefJg==",
+      "version": "3.0.0-rc.6",
+      "resolved": "https://registry.npmjs.org/@nuxt/schema/-/schema-3.0.0-rc.6.tgz",
+      "integrity": "sha512-BcD5YtWRhn+jU2DlzuI1TeITFeOt5x6qm2KeaU/d5jzJ0oZDzmZwKsAimLtRbHwyU6/kKa+zFbK6pp5obm1XLg==",
       "dev": true,
       "requires": {
-        "c12": "^0.2.7",
+        "c12": "^0.2.8",
         "create-require": "^1.1.1",
         "defu": "^6.0.0",
-        "jiti": "^1.13.0",
-        "pathe": "^0.3.0",
+        "jiti": "^1.14.0",
+        "pathe": "^0.3.2",
         "postcss-import-resolver": "^2.0.0",
         "scule": "^0.2.1",
         "std-env": "^3.1.1",
-        "ufo": "^0.8.4",
-        "unimport": "^0.2.7"
+        "ufo": "^0.8.5",
+        "unimport": "^0.4.5"
       },
       "dependencies": {
         "unimport": {
-          "version": "0.2.10",
-          "resolved": "https://registry.npmjs.org/unimport/-/unimport-0.2.10.tgz",
-          "integrity": "sha512-HoQ0ZDzHJboRYJ4/YxtMAATxiya/s5C2UE6jLFNj1e0D6Qfq6Pw2P40L+ALCkjLwLhR8l2VROE7kba/AaFtdQg==",
+          "version": "0.4.7",
+          "resolved": "https://registry.npmjs.org/unimport/-/unimport-0.4.7.tgz",
+          "integrity": "sha512-V2Pbscd1VSdgWm1/OI2pjtydEOTjE7DDnHZKhpOq7bSUBc1i8+1f6PK8jI1lJ1plRDcSNr0DLtAmtU9NPkFQpw==",
           "dev": true,
           "requires": {
             "@rollup/pluginutils": "^4.2.1",
             "escape-string-regexp": "^5.0.0",
             "fast-glob": "^3.2.11",
-            "local-pkg": "^0.4.1",
+            "local-pkg": "^0.4.2",
             "magic-string": "^0.26.2",
-            "mlly": "^0.5.3",
-            "pathe": "^0.3.0",
+            "mlly": "^0.5.5",
+            "pathe": "^0.3.2",
             "scule": "^0.2.1",
             "strip-literal": "^0.4.0",
-            "unplugin": "^0.7.0"
+            "unplugin": "^0.7.2"
           }
         },
         "unplugin": {
-          "version": "0.7.1",
-          "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-0.7.1.tgz",
-          "integrity": "sha512-Z6hNDXDNh9aimMkPU1mEjtk+2ova8gh0y7rJeJdGH1vWZOHwF2lLQiQ/R97rv9ymmzEQXsR2fyMet72T8jy6ew==",
+          "version": "0.7.2",
+          "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-0.7.2.tgz",
+          "integrity": "sha512-m7thX4jP8l5sETpLdUASoDOGOcHaOVtgNyrYlToyQUvILUtEzEnngRBrHnAX3IKqooJVmXpoa/CwQ/QqzvGaHQ==",
           "dev": true,
           "requires": {
             "acorn": "^8.7.1",
@@ -16161,6 +16498,12 @@
       "integrity": "sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==",
       "dev": true
     },
+    "@types/file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-zv9kNf3keYegP5oThGLaPk8E081DFDuwfqjtiTzm6PoxChdJ1raSuADf2YGCVIyrSynLrgc8JWv296s7Q7pQSQ==",
+      "dev": true
+    },
     "@types/form-data": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/@types/form-data/-/form-data-0.0.33.tgz",
@@ -16263,9 +16606,9 @@
       "dev": true
     },
     "@types/web-bluetooth": {
-      "version": "0.0.14",
-      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.14.tgz",
-      "integrity": "sha512-5d2RhCard1nQUC3aHcq/gHzWYO6K0WJmAbjO7mQJgCQKtZpgXxv1rOM6O/dBDhDYYVutk1sciOgNSe+5YyfM8A=="
+      "version": "0.0.15",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.15.tgz",
+      "integrity": "sha512-w7hEHXnPMEZ+4nGKl/KDRVpxkwYxYExuHOYXyzIzCDzEZ9ZCGMAewulr9IqJu2LR4N37fcnb1XVeuZ09qgOxhA=="
     },
     "@typescript-eslint/eslint-plugin": {
       "version": "5.30.0",
@@ -16610,28 +16953,20 @@
       }
     },
     "@vueuse/core": {
-      "version": "8.7.5",
-      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-8.7.5.tgz",
-      "integrity": "sha512-tqgzeZGoZcXzoit4kOGLWJibDMLp0vdm6ZO41SSUQhkhtrPhAg6dbIEPiahhUu6sZAmSYvVrZgEr5aKD51nrLA==",
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.0.2.tgz",
+      "integrity": "sha512-kOIqaQPSs7OSByWg1ulEKRUJbsq3FmbJiUr0RhEKpt3O1Uhl4DrDj85DUbQBABVYgPvSaY6AE/fP3/FOcRIOoQ==",
       "requires": {
-        "@types/web-bluetooth": "^0.0.14",
-        "@vueuse/metadata": "8.7.5",
-        "@vueuse/shared": "8.7.5",
+        "@types/web-bluetooth": "^0.0.15",
+        "@vueuse/metadata": "9.0.2",
+        "@vueuse/shared": "9.0.2",
         "vue-demi": "*"
       },
       "dependencies": {
-        "@vueuse/shared": {
-          "version": "8.7.5",
-          "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-8.7.5.tgz",
-          "integrity": "sha512-THXPvMBFmg6Gf6AwRn/EdTh2mhqwjGsB2Yfp374LNQSQVKRHtnJ0I42bsZTn7nuEliBxqUrGQm/lN6qUHmhJLw==",
-          "requires": {
-            "vue-demi": "*"
-          }
-        },
         "vue-demi": {
-          "version": "0.13.2",
-          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.2.tgz",
-          "integrity": "sha512-41ukrclEbMddAyP7PvxMSYqnOSzPV6r7GNnyTSKSCNTaz19GehxmTiXyP9kwHSUv2+Dr6hHqiUiF7L1VAw2KdQ==",
+          "version": "0.13.6",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.6.tgz",
+          "integrity": "sha512-02NYpxgyGE2kKGegRPYlNQSL1UWfA/+JqvzhGCOYjhfbLWXU5QQX0+9pAm/R2sCOPKr5NBxVIab7fvFU0B1RxQ==",
           "requires": {}
         }
       }
@@ -16644,62 +16979,38 @@
       "requires": {}
     },
     "@vueuse/integrations": {
-      "version": "8.9.1",
-      "resolved": "https://registry.npmjs.org/@vueuse/integrations/-/integrations-8.9.1.tgz",
-      "integrity": "sha512-xeApqTnMBUzlrpJacCdaFqUfTEf7NZUgHKJTsK9I41ISf2+pywgwpfjVk6KVSKk+GuE2MB1c945lul5jA5IcwA==",
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/integrations/-/integrations-9.0.2.tgz",
+      "integrity": "sha512-Z7xwgjSaG7FeBDfFhwXbspLrLKdvjFkI/AfDJ/jz9bez73nkg3Pqnz7jD4rZ6o3lOBJ6cNLizCF5E2qEXtSLJw==",
       "requires": {
-        "@vueuse/core": "8.9.1",
-        "@vueuse/shared": "8.9.1",
+        "@vueuse/core": "9.0.2",
+        "@vueuse/shared": "9.0.2",
         "vue-demi": "*"
       },
       "dependencies": {
-        "@vueuse/core": {
-          "version": "8.9.1",
-          "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-8.9.1.tgz",
-          "integrity": "sha512-a7goYb/gJxjXRBw4Fr/jEACiN33ghwM1ohJVu+Zwsr3lNL4qCQ1nU+ogta98lNg5hXJxWj7mYEmQDjjyWOu5nA==",
-          "requires": {
-            "@types/web-bluetooth": "^0.0.14",
-            "@vueuse/metadata": "8.9.1",
-            "@vueuse/shared": "8.9.1",
-            "vue-demi": "*"
-          }
-        },
-        "@vueuse/metadata": {
-          "version": "8.9.1",
-          "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-8.9.1.tgz",
-          "integrity": "sha512-6LADOlyl3oENHa9dsoY7LXjU1Mh14DnpM6ztETI3hpm5ZffOMIG5CB2Q6aEZfIvYr1lkJVmG2L82wFKk7VRfIA=="
-        },
-        "@vueuse/shared": {
-          "version": "8.9.1",
-          "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-8.9.1.tgz",
-          "integrity": "sha512-klZfn7ijI3juqVgpfQVrrlBh4uTFajwSCWm8Cdt45Kg26b1LZ9jn9n7J6GhmkFay5016GnjjivQoekQSMeJNUg==",
-          "requires": {
-            "vue-demi": "*"
-          }
-        },
         "vue-demi": {
-          "version": "0.13.2",
-          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.2.tgz",
-          "integrity": "sha512-41ukrclEbMddAyP7PvxMSYqnOSzPV6r7GNnyTSKSCNTaz19GehxmTiXyP9kwHSUv2+Dr6hHqiUiF7L1VAw2KdQ==",
+          "version": "0.13.6",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.6.tgz",
+          "integrity": "sha512-02NYpxgyGE2kKGegRPYlNQSL1UWfA/+JqvzhGCOYjhfbLWXU5QQX0+9pAm/R2sCOPKr5NBxVIab7fvFU0B1RxQ==",
           "requires": {}
         }
       }
     },
     "@vueuse/metadata": {
-      "version": "8.7.5",
-      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-8.7.5.tgz",
-      "integrity": "sha512-emJZKRQSaEnVqmlu39NpNp8iaW+bPC2kWykWoWOZMSlO/0QVEmO/rt8A5VhOEJTKLX3vwTevqbiRy9WJRwVOQg=="
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.0.2.tgz",
+      "integrity": "sha512-TRh+TNUYXiodatSAxd0xZc7sh4RfktVVgNFIN7TCQXKyancbCAcWfHvKfgdlX8LcqSBxKoHVa90n0XdUbboTkw=="
     },
     "@vueuse/nuxt": {
-      "version": "8.7.5",
-      "resolved": "https://registry.npmjs.org/@vueuse/nuxt/-/nuxt-8.7.5.tgz",
-      "integrity": "sha512-e+JSiNCdWaKyTiBtM856uNJaXeCw8Ka423AGsuvq+D+GXXQe0RhHzqqLS6pQutjWuftNRBRCOiITOzhtjMP+gA==",
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/nuxt/-/nuxt-9.0.2.tgz",
+      "integrity": "sha512-1NYT3DC58fZ0YxFGaGZ4V0uAd3E4YMMnalKd1K1HBvrW3exB9zcBW52spKMspZL9dnNlxyv3TauH52b94fMxqg==",
       "dev": true,
       "requires": {
-        "@nuxt/kit": "^3.0.0-rc.4",
-        "@vueuse/core": "8.7.5",
-        "@vueuse/metadata": "8.7.5",
-        "local-pkg": "^0.4.1",
+        "@nuxt/kit": "^3.0.0-rc.6",
+        "@vueuse/core": "9.0.2",
+        "@vueuse/metadata": "9.0.2",
+        "local-pkg": "^0.4.2",
         "vue-demi": "*"
       },
       "dependencies": {
@@ -16712,6 +17023,22 @@
         }
       }
     },
+    "@vueuse/shared": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.0.2.tgz",
+      "integrity": "sha512-KwBDefK2ljLESpt0ffe2w8EGUCb3IaMfTzeytB/uHHjHOGOEIHLHHyn8W2C48uGQEvoe5iwaW4Bfp8cRUM6IFA==",
+      "requires": {
+        "vue-demi": "*"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.13.6",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.6.tgz",
+          "integrity": "sha512-02NYpxgyGE2kKGegRPYlNQSL1UWfA/+JqvzhGCOYjhfbLWXU5QQX0+9pAm/R2sCOPKr5NBxVIab7fvFU0B1RxQ==",
+          "requires": {}
+        }
+      }
+    },
     "@webassemblyjs/ast": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
@@ -17434,26 +17761,18 @@
       }
     },
     "c12": {
-      "version": "0.2.7",
-      "resolved": "https://registry.npmjs.org/c12/-/c12-0.2.7.tgz",
-      "integrity": "sha512-ih1nuHbZ6Ltf8Wss96JH6YvKIW5+9+uLAA08LUQAoDrFPGSyvPvQv/QBIRE+dCBWOK4PcwH0ylRkSa9huI1Acw==",
+      "version": "0.2.8",
+      "resolved": "https://registry.npmjs.org/c12/-/c12-0.2.8.tgz",
+      "integrity": "sha512-JomSyVwGnqndRdVVW6SGnHUeHIfJFQNe/4zPFK6zLKPQm8US+hNr4kZP7xeNnzjn3jnQUsBbPdT85fm8K5Pr4A==",
       "dev": true,
       "requires": {
         "defu": "^6.0.0",
-        "dotenv": "^16.0.0",
+        "dotenv": "^16.0.1",
         "gittar": "^0.1.1",
-        "jiti": "^1.12.14",
-        "mlly": "^0.5.1",
-        "pathe": "^0.2.0",
-        "rc9": "^1.2.1"
-      },
-      "dependencies": {
-        "pathe": {
-          "version": "0.2.0",
-          "resolved": "https://registry.npmjs.org/pathe/-/pathe-0.2.0.tgz",
-          "integrity": "sha512-sTitTPYnn23esFR3RlqYBWn4c45WGeLcsKzQiUpXJAyfcWkolvlYpV8FLo7JishK946oQwMFUCHXQ9AjGPKExw==",
-          "dev": true
-        }
+        "jiti": "^1.14.0",
+        "mlly": "^0.5.4",
+        "pathe": "^0.3.2",
+        "rc9": "^1.2.2"
       }
     },
     "cac": {
@@ -17821,6 +18140,17 @@
       "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz",
       "integrity": "sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA=="
     },
+    "color": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
+      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "color-convert": "^2.0.1",
+        "color-string": "^1.9.0"
+      }
+    },
     "color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -17836,6 +18166,17 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "dev": true
     },
+    "color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
     "color-support": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
@@ -18100,6 +18441,13 @@
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
       "dev": true
     },
+    "cssfilter": {
+      "version": "0.0.10",
+      "resolved": "https://registry.npmjs.org/cssfilter/-/cssfilter-0.0.10.tgz",
+      "integrity": "sha512-FAaLDaplstoRsDR8XGYH51znUN0UY7nMc6Z9/fvE8EXGwvJE9hu7W2vHwx1+bd6gCYnln9nLbzxFTrcO9YQDZw==",
+      "dev": true,
+      "optional": true
+    },
     "cssnano": {
       "version": "5.1.12",
       "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-5.1.12.tgz",
@@ -18292,6 +18640,16 @@
       "integrity": "sha512-hjf+xovcEn31w/EUYdTXQh/8smFL/dzYjohQGEIgjyNavaJfBY2p5F527Bo1VPATxv0VYTUC2bOcXvqFwk78Og==",
       "dev": true
     },
+    "decompress-response": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
+      "integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "mimic-response": "^3.1.0"
+      }
+    },
     "deep-eql": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-3.0.1.tgz",
@@ -18301,6 +18659,13 @@
         "type-detect": "^4.0.0"
       }
     },
+    "deep-extend": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
+      "dev": true,
+      "optional": true
+    },
     "deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -19516,6 +19881,13 @@
       "resolved": "https://registry.npmjs.org/exit-on-epipe/-/exit-on-epipe-1.0.1.tgz",
       "integrity": "sha512-h2z5mrROTxce56S+pnvAV890uu7ls7f1kEvVGJbw1OlFH3/mlJ5bkXu0KRyW94v37zzHPiUd55iLn3DA7TjWpw=="
     },
+    "expand-template": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/expand-template/-/expand-template-2.0.3.tgz",
+      "integrity": "sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==",
+      "dev": true,
+      "optional": true
+    },
     "external-editor": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-3.1.0.tgz",
@@ -19962,6 +20334,13 @@
         "git-up": "^4.0.0"
       }
     },
+    "github-from-package": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz",
+      "integrity": "sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw==",
+      "dev": true,
+      "optional": true
+    },
     "gittar": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/gittar/-/gittar-0.1.1.tgz",
@@ -20302,6 +20681,12 @@
       "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
       "dev": true
     },
+    "image-meta": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/image-meta/-/image-meta-0.1.1.tgz",
+      "integrity": "sha512-+oXiHwOEPr1IE5zY0tcBLED/CYcre15J4nwL50x3o0jxWqEkyjrusiKP3YSU+tr9fvJp33ZcP5Gpj2295g3aEw==",
+      "dev": true
+    },
     "image-size": {
       "version": "0.5.5",
       "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
@@ -20443,6 +20828,26 @@
         "standard-as-callback": "^2.1.0"
       }
     },
+    "ipx": {
+      "version": "0.9.10",
+      "resolved": "https://registry.npmjs.org/ipx/-/ipx-0.9.10.tgz",
+      "integrity": "sha512-HymTmXe2QBiPMgsJg1EQtUYgTXfIB9ha7j8tHCQqYGDS7bTYMNWyq/fBdI3S+wc9ic+hbPlTim+uf8QgZcEykQ==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "consola": "^2.15.3",
+        "defu": "^6.0.0",
+        "destr": "^1.1.1",
+        "etag": "^1.8.1",
+        "image-meta": "^0.1.1",
+        "listhen": "^0.2.13",
+        "ohmyfetch": "^0.4.18",
+        "pathe": "^0.3.2",
+        "sharp": "^0.30.7",
+        "ufo": "^0.8.5",
+        "xss": "^1.0.13"
+      }
+    },
     "is-alphabetical": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz",
@@ -21090,9 +21495,9 @@
       }
     },
     "local-pkg": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.4.1.tgz",
-      "integrity": "sha512-lL87ytIGP2FU5PWwNDo0w3WhIo2gopIAxPg9RxDYF7m4rr5ahuZxP22xnJHIvaLTe4Z9P6uKKY2UHiwyB4pcrw==",
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.4.2.tgz",
+      "integrity": "sha512-mlERgSPrbxU3BP4qBqAvvwlgW4MTg78iwJdGGnv7kibKjWcJksrG3t6LB5lXI93wXRDvG4NpUgJFmTG4T6rdrg==",
       "dev": true
     },
     "locale-codes": {
@@ -21417,6 +21822,13 @@
       "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
       "dev": true
     },
+    "mimic-response": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
+      "integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==",
+      "dev": true,
+      "optional": true
+    },
     "min-indent": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
@@ -21474,22 +21886,21 @@
         "minimist": "^1.2.6"
       }
     },
-    "mlly": {
+    "mkdirp-classic": {
       "version": "0.5.3",
-      "resolved": "https://registry.npmjs.org/mlly/-/mlly-0.5.3.tgz",
-      "integrity": "sha512-im69tuLD9EJh9fc9TZRpJEFvsBcGMez7glUCWDcHWWCKzhvPmNvyaYjp/+h0qJJN/Xovrs//GzGjOOKmFw4Gog==",
+      "resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz",
+      "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==",
+      "dev": true,
+      "optional": true
+    },
+    "mlly": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/mlly/-/mlly-0.5.5.tgz",
+      "integrity": "sha512-2R4JT/SxRDPexomw4rmHYY/gWAGmL9Kkq1OR76Ua6w+P340a1aBDTWzKo2kAlxzrG82OdXs5VB9Lmcmyit0Obg==",
       "dev": true,
       "requires": {
-        "pathe": "^0.2.0",
-        "pkg-types": "^0.3.2"
-      },
-      "dependencies": {
-        "pathe": {
-          "version": "0.2.0",
-          "resolved": "https://registry.npmjs.org/pathe/-/pathe-0.2.0.tgz",
-          "integrity": "sha512-sTitTPYnn23esFR3RlqYBWn4c45WGeLcsKzQiUpXJAyfcWkolvlYpV8FLo7JishK946oQwMFUCHXQ9AjGPKExw==",
-          "dev": true
-        }
+        "pathe": "^0.3.2",
+        "pkg-types": "^0.3.3"
       }
     },
     "monaco-editor": {
@@ -21530,6 +21941,13 @@
       "resolved": "https://registry.npmjs.org/nanopop/-/nanopop-2.1.0.tgz",
       "integrity": "sha512-jGTwpFRexSH+fxappnGQtN9dspgE2ipa1aOjtR24igG0pv6JCxImIAmrLRHX+zUF5+1wtsFVbKyfP51kIGAVNw=="
     },
+    "napi-build-utils": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-1.0.2.tgz",
+      "integrity": "sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg==",
+      "dev": true,
+      "optional": true
+    },
     "natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -21707,6 +22125,23 @@
         "typescript": "^4.0.2"
       }
     },
+    "node-abi": {
+      "version": "3.23.0",
+      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.23.0.tgz",
+      "integrity": "sha512-XWte/uvq7hmgY27WesfxLUAPejKUlkEbikhBFaIhxe+XkHa57rXBwYqGjsIyfVXaU8kC0Wp2p/qQroauDKs1XA==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "semver": "^7.3.5"
+      }
+    },
+    "node-addon-api": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-5.0.0.tgz",
+      "integrity": "sha512-CvkDw2OEnme7ybCykJpVcKH+uAOLV2qLqiyla128dN9TkEWfrYmxG6C2boDe5KcNQqZF3orkqzGgOMvZ/JNekA==",
+      "dev": true,
+      "optional": true
+    },
     "node-domexception": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
@@ -21725,9 +22160,9 @@
       }
     },
     "node-fetch-native": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/node-fetch-native/-/node-fetch-native-0.1.3.tgz",
-      "integrity": "sha512-Jf1IQZdovUIv9E+5avmN6Sf+bND+rnMlODnBQhdE2VRyuWP9WgqZb/KEgPekh19DAN1X2C4vbS1VCOaz2OH19g==",
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/node-fetch-native/-/node-fetch-native-0.1.4.tgz",
+      "integrity": "sha512-10EKpOCQPXwZVFh3U1ptOMWBgKTbsN7Vvo6WVKt5pw4hp8zbv6ZVBZPlXw+5M6Tyi1oc1iD4/sNPd71KYA16tQ==",
       "dev": true
     },
     "node-forge": {
@@ -22333,9 +22768,9 @@
       "dev": true
     },
     "pathe": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/pathe/-/pathe-0.3.0.tgz",
-      "integrity": "sha512-3vUjp552BJzCw9vqKsO5sttHkbYqqsZtH0x1PNtItgqx8BXEXzoY1SYRKcL6BTyVh4lGJGLj0tM42elUDMvcYA==",
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-0.3.3.tgz",
+      "integrity": "sha512-x3nrPvG0HDSDzUiJ0WqtzhN4MD+h5B+dFJ3/qyxVuARlr4Y3aJv8gri2cZzp9Z8sGs2a+aG9gNbKngh3gme57A==",
       "dev": true
     },
     "pathval": {
@@ -22796,6 +23231,27 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "dev": true
     },
+    "prebuild-install": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.1.tgz",
+      "integrity": "sha512-jAXscXWMcCK8GgCoHOfIr0ODh5ai8mj63L2nWrjuAgXE6tDyYGnx4/8o/rCgU+B4JSyZBKbeZqzhtwtC3ovxjw==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "detect-libc": "^2.0.0",
+        "expand-template": "^2.0.3",
+        "github-from-package": "0.0.0",
+        "minimist": "^1.2.3",
+        "mkdirp-classic": "^0.5.3",
+        "napi-build-utils": "^1.0.1",
+        "node-abi": "^3.3.0",
+        "pump": "^3.0.0",
+        "rc": "^1.2.7",
+        "simple-get": "^4.0.0",
+        "tar-fs": "^2.0.0",
+        "tunnel-agent": "^0.6.0"
+      }
+    },
     "prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -22875,6 +23331,17 @@
       "optional": true,
       "peer": true
     },
+    "pump": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
+      "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
     "punycode": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
@@ -22929,6 +23396,28 @@
       "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
       "dev": true
     },
+    "rc": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+      "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "deep-extend": "^0.6.0",
+        "ini": "~1.3.0",
+        "minimist": "^1.2.0",
+        "strip-json-comments": "~2.0.1"
+      },
+      "dependencies": {
+        "strip-json-comments": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+          "integrity": "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==",
+          "dev": true,
+          "optional": true
+        }
+      }
+    },
     "rc9": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/rc9/-/rc9-1.2.2.tgz",
@@ -23481,6 +23970,23 @@
       "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz",
       "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA=="
     },
+    "sharp": {
+      "version": "0.30.7",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.30.7.tgz",
+      "integrity": "sha512-G+MY2YW33jgflKPTXXptVO28HvNOo9G3j0MybYAHeEmby+QuD2U98dT6ueht9cv/XDqZspSpIhoSW+BAKJ7Hig==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "color": "^4.2.3",
+        "detect-libc": "^2.0.1",
+        "node-addon-api": "^5.0.0",
+        "prebuild-install": "^7.1.1",
+        "semver": "^7.3.7",
+        "simple-get": "^4.0.1",
+        "tar-fs": "^2.1.1",
+        "tunnel-agent": "^0.6.0"
+      }
+    },
     "shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -23513,6 +24019,44 @@
       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
       "dev": true
     },
+    "simple-concat": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz",
+      "integrity": "sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==",
+      "dev": true,
+      "optional": true
+    },
+    "simple-get": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-4.0.1.tgz",
+      "integrity": "sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "decompress-response": "^6.0.0",
+        "once": "^1.3.1",
+        "simple-concat": "^1.0.0"
+      }
+    },
+    "simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "is-arrayish": "^0.3.1"
+      },
+      "dependencies": {
+        "is-arrayish": {
+          "version": "0.3.2",
+          "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+          "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
+          "dev": true,
+          "optional": true
+        }
+      }
+    },
     "sirv": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.2.tgz",
@@ -23918,6 +24462,19 @@
         }
       }
     },
+    "tar-fs": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.1.tgz",
+      "integrity": "sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "chownr": "^1.1.1",
+        "mkdirp-classic": "^0.5.2",
+        "pump": "^3.0.0",
+        "tar-stream": "^2.1.4"
+      }
+    },
     "tar-stream": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
@@ -24183,6 +24740,16 @@
         }
       }
     },
+    "tunnel-agent": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
+      "integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "safe-buffer": "^5.0.1"
+      }
+    },
     "type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -24219,9 +24786,9 @@
       "peer": true
     },
     "ufo": {
-      "version": "0.8.4",
-      "resolved": "https://registry.npmjs.org/ufo/-/ufo-0.8.4.tgz",
-      "integrity": "sha512-/+BmBDe8GvlB2nIflWasLLAInjYG0bC9HRnfEpNi4sw77J2AJNnEVnTDReVrehoh825+Q/evF3THXTAweyam2g==",
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/ufo/-/ufo-0.8.5.tgz",
+      "integrity": "sha512-e4+UtA5IRO+ha6hYklwj6r7BjiGMxS0O+UaSg9HbaTefg4kMkzj4tXzEBajRR+wkxf+golgAWKzLbytCUDMJAA==",
       "dev": true
     },
     "unbox-primitive": {
@@ -25078,6 +25645,26 @@
       "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz",
       "integrity": "sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A=="
     },
+    "xss": {
+      "version": "1.0.13",
+      "resolved": "https://registry.npmjs.org/xss/-/xss-1.0.13.tgz",
+      "integrity": "sha512-clu7dxTm1e8Mo5fz3n/oW3UCXBfV89xZ72jM8yzo1vR/pIS0w3sgB3XV2H8Vm6zfGnHL0FzvLJPJEBhd86/z4Q==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "commander": "^2.20.3",
+        "cssfilter": "0.0.10"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "2.20.3",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+          "dev": true,
+          "optional": true
+        }
+      }
+    },
     "xxhashjs": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/xxhashjs/-/xxhashjs-0.2.2.tgz",
diff --git a/packages/nc-gui-v2/package.json b/packages/nc-gui-v2/package.json
index d954b68033..3f9b5f7436 100644
--- a/packages/nc-gui-v2/package.json
+++ b/packages/nc-gui-v2/package.json
@@ -11,9 +11,9 @@
     "coverage": "vitest -c test/vite.config.ts run --coverage"
   },
   "dependencies": {
-    "@vueuse/core": "^8.7.5",
-    "@vueuse/integrations": "^8.9.1",
-    "ant-design-vue": "^3.1.0-rc.6",
+    "@vueuse/core": "^9.0.2",
+    "@vueuse/integrations": "^9.0.2",
+    "ant-design-vue": "^3.2.10",
     "dayjs": "^1.11.3",
     "file-saver": "^2.0.5",
     "jwt-decode": "^3.1.2",
@@ -40,14 +40,16 @@
     "@iconify-json/mdi": "^1.1.25",
     "@iconify-json/ri": "^1.1.3",
     "@intlify/vite-plugin-vue-i18n": "^4.0.0",
+    "@nuxt/image-edge": "^1.0.0-27657146.da85542",
     "@types/axios": "^0.14.0",
+    "@types/file-saver": "^2.0.5",
     "@types/papaparse": "^5.3.2",
     "@types/sortablejs": "^1.13.0",
     "@vitejs/plugin-vue": "^2.3.3",
     "@vitest/ui": "^0.18.0",
     "@vue/compiler-sfc": "^3.2.37",
     "@vue/test-utils": "^2.0.2",
-    "@vueuse/nuxt": "^8.6.0",
+    "@vueuse/nuxt": "^9.0.2",
     "@windicss/plugin-animations": "^1.0.9",
     "@windicss/plugin-question-mark": "^0.1.1",
     "@windicss/plugin-scrollbar": "^1.2.3",
diff --git a/packages/nc-gui-v2/tsconfig.json b/packages/nc-gui-v2/tsconfig.json
index 20e024fba7..7815bfba85 100644
--- a/packages/nc-gui-v2/tsconfig.json
+++ b/packages/nc-gui-v2/tsconfig.json
@@ -15,7 +15,8 @@
       "vue-i18n",
       "unplugin-icons/types/vue",
       "nuxt-windicss",
-      "vite/client"
+      "vite/client",
+      "@nuxt/image-edge"
     ]
   },
   "exclude": [
diff --git a/packages/nc-gui-v2/utils/urlUtils.ts b/packages/nc-gui-v2/utils/urlUtils.ts
index 5f71c720a1..5f9427c98b 100644
--- a/packages/nc-gui-v2/utils/urlUtils.ts
+++ b/packages/nc-gui-v2/utils/urlUtils.ts
@@ -27,3 +27,7 @@ export const isValidURL = (str: string) => {
     /^(?:(?:https?|ftp):\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00A1-\uFFFF0-9]-*)*[a-z\u00A1-\uFFFF0-9]+)(?:\.(?:[a-z\u00A1-\uFFFF0-9]-*)*[a-z\u00A1-\uFFFF0-9]+)*(?:\.(?:[a-z\u00A1-\uFFFF]{2,}))\.?)(?::\d{2,5})?(?:[/?#]\S*)?$/i
   return !!pattern.test(str)
 }
+
+export const openLink = (url: string, target = '_blank') => {
+  window.open(url, target)
+}