diff --git a/.husky/pre-commit b/.husky/pre-commit
new file mode 100644
index 000000000..ec92286c4
--- /dev/null
+++ b/.husky/pre-commit
@@ -0,0 +1,4 @@
+#!/bin/sh
+STAGED=$(git diff --cached --name-only --diff-filter=ACMR)
+yarn format-changed
+git diff --exit-code $STAGED || (echo "Files were reformatted, please stage them and commit again" && exit 1)
\ No newline at end of file
diff --git a/.prettierrc.json b/.prettierrc.json
index 50f7605fd..998a6bb31 100644
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -2,5 +2,6 @@
     "semi": false,
     "singleQuote": true,
     "tabWidth": 2,
+    "printWidth": 100,
     "proseWrap": "always"
 }
\ No newline at end of file
diff --git a/package.json b/package.json
index 1d7e81fd8..f45e6b00b 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,8 @@
   "scripts": {
     "test": "vitest --run",
     "type-check": "tsc --noEmit",
-    "prettier": "yarn prettier -w ./src",
+    "format": "prettier -w ./src",
+    "format-changed": "prettier $(git diff --cached --name-only --diff-filter=ACMR | sed 's| |\\ |g') --write --ignore-unknown",
     "bump-and-release": "yarn test && git pull --rebase origin main && yarn run release-patch",
     "release-patch": "yarn version --patch && git push && git push --tags",
     "dev": "vite",
@@ -16,7 +17,8 @@
     "docs:dev": "vitepress dev docs --host",
     "docs:build": "vitepress build docs",
     "docs:preview": "vitepress preview docs",
-    "docs:gen": "node docs/scripts/propsgen.ts --trace-uncaught"
+    "docs:gen": "node docs/scripts/propsgen.ts --trace-uncaught",
+    "prepare": "husky"
   },
   "exports": {
     ".": {
@@ -132,6 +134,7 @@
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.0.0",
     "autoprefixer": "^10.4.13",
+    "husky": "^9.1.7",
     "jsdom": "^27.4.0",
     "lint-staged": ">=10",
     "msw": "^2.7.0",
diff --git a/src/components/Alert/Alert.vue b/src/components/Alert/Alert.vue
index eed0afb33..360acbff4 100644
--- a/src/components/Alert/Alert.vue
+++ b/src/components/Alert/Alert.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-import type { AlertProps } from "./types";
+import type { AlertProps } from './types'
 
-import LucideX from "~icons/lucide/x";
-import LucideInfo from "~icons/lucide/info";
-import LucideCircleX from "~icons/lucide/circle-x";
-import LucideCheck from "~icons/lucide/circle-check";
-import LucideWarning from "~icons/lucide/triangle-alert";
+import LucideX from '~icons/lucide/x'
+import LucideInfo from '~icons/lucide/info'
+import LucideCircleX from '~icons/lucide/circle-x'
+import LucideCheck from '~icons/lucide/circle-check'
+import LucideWarning from '~icons/lucide/triangle-alert'
 
 /** Controls the visibility of the alert for dismissing or toggling it */
-const visible = defineModel({ default: true });
+const visible = defineModel({ default: true })
 
 const emit = defineEmits(['dismiss'])
 
@@ -21,16 +21,16 @@ const dismissAlert = () => {
 
 const classes = computed(() => {
   const subtleBgs = {
-    yellow: "bg-surface-amber-2",
-    blue: "bg-surface-blue-2",
-    red: "bg-surface-red-2",
-    green: "bg-surface-green-2",
-  };
+    yellow: 'bg-surface-amber-2',
+    blue: 'bg-surface-blue-2',
+    red: 'bg-surface-red-2',
+    green: 'bg-surface-green-2',
+  }
 
-  if (props.variant == "outline") return "border border-outline-gray-3";
+  if (props.variant == 'outline') return 'border border-outline-gray-3'
 
-  return props.theme ? subtleBgs[props.theme] : "bg-surface-gray-2";
-});
+  return props.theme ? subtleBgs[props.theme] : 'bg-surface-gray-2'
+})
 
 const icon = computed(() => {
   const data = {
@@ -43,9 +43,9 @@ const icon = computed(() => {
 })
 
 const props = withDefaults(defineProps<AlertProps>(), {
-  variant: "subtle",
+  variant: 'subtle',
   dismissable: true,
-});
+})
 
 defineSlots<{
   /** Custom icon shown before the content */
@@ -67,15 +67,10 @@ defineSlots<{
     class="grid grid-cols-[auto_1fr_auto] gap-3 rounded-md px-4 py-3.5 text-base items-start"
   >
     <slot name="icon">
-      <component
-        :is="icon.component"
-        class="size-4"
-        v-if="icon"
-        :class="icon.css"
-      />
+      <component :is="icon.component" class="size-4" v-if="icon" :class="icon.css" />
     </slot>
 
-    <div class="grid gap-2" :class='{ "col-span-2": !$slots.icon && !icon }'>
+    <div class="grid gap-2" :class="{ 'col-span-2': !$slots.icon && !icon }">
       <span class="text-ink-gray-9"> {{ props.title }} </span>
 
       <slot name="description">
diff --git a/src/components/Autocomplete/Autocomplete.vue b/src/components/Autocomplete/Autocomplete.vue
index 6cb7d2115..f55824011 100644
--- a/src/components/Autocomplete/Autocomplete.vue
+++ b/src/components/Autocomplete/Autocomplete.vue
@@ -13,9 +13,7 @@
       :placement="placement"
       :match-target-width="true"
     >
-      <template
-        #target="{ open: openPopover, togglePopover, close: closePopover }"
-      >
+      <template #target="{ open: openPopover, togglePopover, close: closePopover }">
         <slot
           name="target"
           v-bind="{
@@ -36,10 +34,7 @@
             >
               <div class="flex items-center overflow-hidden">
                 <slot name="prefix" />
-                <span
-                  class="truncate text-base leading-5 text-ink-gray-8"
-                  v-if="displayValue"
-                >
+                <span class="truncate text-base leading-5 text-ink-gray-8" v-if="displayValue">
                   {{ displayValue }}
                 </span>
                 <span class="text-base leading-5 text-ink-gray-4" v-else>
@@ -47,11 +42,7 @@
                 </span>
                 <slot name="suffix" />
               </div>
-              <FeatherIcon
-                name="chevron-down"
-                class="h-4 w-4 text-ink-gray-5"
-                aria-hidden="true"
-              />
+              <FeatherIcon name="chevron-down" class="h-4 w-4 text-ink-gray-5" aria-hidden="true" />
             </button>
           </div>
         </slot>
@@ -81,24 +72,15 @@
                     autocomplete="off"
                     placeholder="Search"
                   />
-                  <div
-                    class="absolute right-0 inline-flex h-7 w-7 items-center justify-center"
-                  >
-                    <LoadingIndicator
-                      v-if="props.loading"
-                      class="h-4 w-4 text-ink-gray-5"
-                    />
+                  <div class="absolute right-0 inline-flex h-7 w-7 items-center justify-center">
+                    <LoadingIndicator v-if="props.loading" class="h-4 w-4 text-ink-gray-5" />
                     <button v-else @click="clearAll">
                       <FeatherIcon name="x" class="w-4 text-ink-gray-8" />
                     </button>
                   </div>
                 </div>
               </div>
-              <div
-                v-for="group in groups"
-                :key="group.key"
-                v-show="group.items.length > 0"
-              >
+              <div v-for="group in groups" :key="group.key" v-show="group.items.length > 0">
                 <div
                   v-if="group.group && !group.hideLabel"
                   class="sticky top-10 truncate bg-surface-modal px-2.5 py-1.5 text-sm font-medium text-ink-gray-5"
@@ -107,10 +89,7 @@
                 </div>
                 <ComboboxOption
                   as="template"
-                  v-for="(option, idx) in group.items.slice(
-                    0,
-                    props.maxOptions,
-                  )"
+                  v-for="(option, idx) in group.items.slice(0, props.maxOptions)"
                   :key="idx"
                   :value="option"
                   :disabled="option.disabled"
@@ -130,10 +109,7 @@
                         v-if="$slots['item-prefix'] || props.multiple"
                         class="flex flex-shrink-0"
                       >
-                        <slot
-                          name="item-prefix"
-                          v-bind="{ active, selected, option }"
-                        >
+                        <slot name="item-prefix" v-bind="{ active, selected, option }">
                           <FeatherIcon
                             name="check"
                             v-if="isOptionSelected(option)"
@@ -151,14 +127,8 @@
                       v-if="$slots['item-suffix'] || option?.description"
                       class="ml-2 flex-shrink-0"
                     >
-                      <slot
-                        name="item-suffix"
-                        v-bind="{ active, selected, option }"
-                      >
-                        <div
-                          v-if="option?.description"
-                          class="text-sm text-ink-gray-5"
-                        >
+                      <slot name="item-suffix" v-bind="{ active, selected, option }">
+                        <div v-if="option?.description" class="text-sm text-ink-gray-5">
                           {{ option.description }}
                         </div>
                       </slot>
@@ -174,10 +144,7 @@
               </li>
             </ComboboxOptions>
 
-            <div
-              v-if="$slots.footer || props.showFooter || multiple"
-              class="border-t p-1"
-            >
+            <div v-if="$slots.footer || props.showFooter || multiple" class="border-t p-1">
               <slot name="footer" v-bind="{ togglePopover }">
                 <div v-if="multiple" class="flex items-center justify-end">
                   <Button
@@ -185,11 +152,7 @@
                     label="Select All"
                     @click.stop="selectAll"
                   />
-                  <Button
-                    v-if="areAllOptionsSelected"
-                    label="Clear All"
-                    @click.stop="clearAll"
-                  />
+                  <Button v-if="areAllOptionsSelected" label="Clear All" @click.stop="clearAll" />
                 </div>
                 <div v-else class="flex items-center justify-end">
                   <Button label="Clear" @click.stop="clearAll" />
@@ -204,12 +167,7 @@
 </template>
 
 <script setup lang="ts">
-import {
-  Combobox,
-  ComboboxInput,
-  ComboboxOption,
-  ComboboxOptions,
-} from '@headlessui/vue'
+import { Combobox, ComboboxInput, ComboboxOption, ComboboxOptions } from '@headlessui/vue'
 import { computed, nextTick, ref, watch } from 'vue'
 import { Popover } from '../Popover'
 import { Button } from '../Button'
@@ -270,9 +228,7 @@ const sanitizeOptions = (options: AutocompleteOption[]) => {
   if (!options) return []
   // in case the options are just values, convert them to objects
   return options.map((option) => {
-    return isOption(option)
-      ? option
-      : { label: option.toString(), value: option }
+    return isOption(option) ? option : { label: option.toString(), value: option }
   })
 }
 
@@ -281,10 +237,7 @@ const filterOptions = (options: Option[]) => {
   return options.filter((option) => {
     return (
       option.label.toLowerCase().includes(query.value.trim().toLowerCase()) ||
-      option.value
-        .toString()
-        .toLowerCase()
-        .includes(query.value.trim().toLowerCase())
+      option.value.toString().toLowerCase().includes(query.value.trim().toLowerCase())
     )
   })
 }
@@ -302,9 +255,7 @@ const selectedValue = computed({
     // in case of `multiple`, modelValue is an array of values
     // if the modelValue is a list of values, convert them to options
     const values = (props.modelValue || []) as AutocompleteOption[]
-    return isOption(values[0])
-      ? values
-      : values.map((v) => findOption(v) || makeOption(v))
+    return isOption(values[0]) ? values : values.map((v) => findOption(v) || makeOption(v))
   },
   set(val) {
     query.value = ''
@@ -336,9 +287,7 @@ const displayValue = computed(() => {
   if (!props.multiple) {
     return getLabel(selectedValue.value as AutocompleteOption)
   }
-  return (selectedValue.value as AutocompleteOption[])
-    .map((v) => getLabel(v))
-    .join(', ')
+  return (selectedValue.value as AutocompleteOption[]).map((v) => getLabel(v)).join(', ')
 })
 
 const isOptionSelected = (option: AutocompleteOption) => {
@@ -354,10 +303,7 @@ const isOptionSelected = (option: AutocompleteOption) => {
 
 const areAllOptionsSelected = computed(() => {
   if (!props.multiple) return false
-  return (
-    allOptions.value.length ===
-    (selectedValue.value as AutocompleteOption[])?.length
-  )
+  return allOptions.value.length === (selectedValue.value as AutocompleteOption[])?.length
 })
 
 const selectAll = () => {
diff --git a/src/components/Avatar/Avatar.vue b/src/components/Avatar/Avatar.vue
index ec6dd71f1..0431bd5e1 100644
--- a/src/components/Avatar/Avatar.vue
+++ b/src/components/Avatar/Avatar.vue
@@ -1,8 +1,5 @@
 <template>
-  <div
-    class="relative inline-block shrink-0"
-    :class="[sizeClasses, shapeClasses]"
-  >
+  <div class="relative inline-block shrink-0" :class="[sizeClasses, shapeClasses]">
     <img
       v-if="image && !imgFetchError"
       :src="image"
@@ -136,5 +133,4 @@ defineSlots<{
   /** Small indicator shown at the bottom-right of the avatar */
   indicator?: () => any
 }>()
-
 </script>
diff --git a/src/components/Badge/Badge.vue b/src/components/Badge/Badge.vue
index 8099ae703..97c1dbdce 100644
--- a/src/components/Badge/Badge.vue
+++ b/src/components/Badge/Badge.vue
@@ -3,17 +3,11 @@
     class="inline-flex select-none items-center gap-1 rounded-full whitespace-nowrap"
     :class="classes"
   >
-    <div
-      :class="[props.size == 'lg' ? 'max-h-6' : 'max-h-4']"
-      v-if="$slots.prefix"
-    >
+    <div :class="[props.size == 'lg' ? 'max-h-6' : 'max-h-4']" v-if="$slots.prefix">
       <slot name="prefix"></slot>
     </div>
     <slot>{{ props.label?.toString() }}</slot>
-    <div
-      :class="[props.size == 'lg' ? 'max-h-6' : 'max-h-4']"
-      v-if="$slots.suffix"
-    >
+    <div :class="[props.size == 'lg' ? 'max-h-6' : 'max-h-4']" v-if="$slots.suffix">
       <slot name="suffix"></slot>
     </div>
   </div>
@@ -73,7 +67,7 @@ const classes = computed(() => {
     sm: 'h-4 text-xs px-1.5',
     md: 'h-5 text-xs px-1.5',
     lg: 'h-6 text-sm px-2',
-		xl: 'h-7 text-base px-2',
+    xl: 'h-7 text-base px-2',
   }[props.size]
 
   return [variantClasses, sizeClasses]
diff --git a/src/components/Badge/stories/Themes.vue b/src/components/Badge/stories/Themes.vue
index 0ee989120..fe637be34 100644
--- a/src/components/Badge/stories/Themes.vue
+++ b/src/components/Badge/stories/Themes.vue
@@ -3,8 +3,8 @@ import { Badge } from 'frappe-ui'
 </script>
 
 <template>
-  <Badge theme="gray" size='lg'>Solid</Badge>
-  <Badge theme="blue" size='lg'>Subtle</Badge>
-  <Badge theme="green" size='lg'>Outline</Badge>
-  <Badge theme="orange" size='lg'>Ghost</Badge>
+  <Badge theme="gray" size="lg">Solid</Badge>
+  <Badge theme="blue" size="lg">Subtle</Badge>
+  <Badge theme="green" size="lg">Outline</Badge>
+  <Badge theme="orange" size="lg">Ghost</Badge>
 </template>
diff --git a/src/components/Badge/types.ts b/src/components/Badge/types.ts
index 0d9417564..8ca421afc 100644
--- a/src/components/Badge/types.ts
+++ b/src/components/Badge/types.ts
@@ -15,4 +15,3 @@ export interface BadgeProps {
   /** Content displayed inside the badge */
   label?: Label | string | number
 }
-
diff --git a/src/components/Breadcrumbs/Breadcrumbs.vue b/src/components/Breadcrumbs/Breadcrumbs.vue
index aaf9c848f..3875eb55c 100644
--- a/src/components/Breadcrumbs/Breadcrumbs.vue
+++ b/src/components/Breadcrumbs/Breadcrumbs.vue
@@ -8,9 +8,7 @@
           </template>
         </Button>
       </Dropdown>
-      <span class="ml-1 mr-0.5 text-base text-ink-gray-4" aria-hidden="true">
-        /
-      </span>
+      <span class="ml-1 mr-0.5 text-base text-ink-gray-4" aria-hidden="true"> / </span>
     </template>
 
     <div class="flex min-w-0 items-center text-ellipsis whitespace-nowrap">
@@ -21,9 +19,7 @@
           @click="item.onClick ? item.onClick() : null"
           class="flex items-center rounded px-0.5 py-1 text-lg font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-outline-gray-3"
           :class="[
-            i == crumbs.length - 1
-              ? 'text-ink-gray-9'
-              : 'text-ink-gray-5 hover:text-ink-gray-7',
+            i == crumbs.length - 1 ? 'text-ink-gray-9' : 'text-ink-gray-5 hover:text-ink-gray-7',
           ]"
         >
           <slot name="prefix" :item="item" />
@@ -38,9 +34,7 @@
           @click="item.onClick ? item.onClick() : null"
           class="flex items-center rounded px-0.5 py-1 text-lg font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-outline-gray-3"
           :class="[
-            i == crumbs.length - 1
-              ? 'text-ink-gray-9'
-              : 'text-ink-gray-5 hover:text-ink-gray-7',
+            i == crumbs.length - 1 ? 'text-ink-gray-9' : 'text-ink-gray-5 hover:text-ink-gray-7',
           ]"
         >
           <slot name="prefix" :item="item" />
@@ -54,9 +48,7 @@
           @click="item.onClick ? item.onClick() : null"
           class="flex items-center rounded px-0.5 py-1 text-lg font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-outline-gray-3"
           :class="[
-            i == crumbs.length - 1
-              ? 'text-ink-gray-9'
-              : 'text-ink-gray-5 hover:text-ink-gray-7',
+            i == crumbs.length - 1 ? 'text-ink-gray-9' : 'text-ink-gray-5 hover:text-ink-gray-7',
           ]"
         >
           <slot name="prefix" :item="item" />
diff --git a/src/components/Button/Button.vue b/src/components/Button/Button.vue
index 717e7bace..aa49204df 100644
--- a/src/components/Button/Button.vue
+++ b/src/components/Button/Button.vue
@@ -6,7 +6,7 @@
       @click="handleClick"
       :disabled="isDisabled"
       :ariaLabel="ariaLabel"
-      :type = "props.type"
+      :type="props.type"
       ref="rootRef"
     >
       <LoadingIndicator
@@ -53,11 +53,7 @@
           :class="slotClasses"
           aria-hidden="true"
         />
-          <component
-            v-else-if="iconRight"
-            :is="iconRight"
-            :class="slotClasses"
-          />
+        <component v-else-if="iconRight" :is="iconRight" :class="slotClasses" />
       </slot>
     </button>
   </Tooltip>
@@ -78,7 +74,7 @@ const props = withDefaults(defineProps<ButtonProps>(), {
   variant: 'subtle',
   loading: false,
   disabled: false,
-  type: "button"
+  type: 'button',
 })
 
 const slots = useSlots()
@@ -88,16 +84,14 @@ const buttonClasses = computed(() => {
   let solidClasses = {
     gray: 'text-ink-white bg-surface-gray-7 hover:bg-surface-gray-6 active:bg-surface-gray-5',
     blue: 'text-ink-white bg-blue-500 hover:bg-surface-blue-3 active:bg-blue-700',
-    green:
-      'text-ink-white bg-surface-green-3 hover:bg-green-700 active:bg-green-800',
+    green: 'text-ink-white bg-surface-green-3 hover:bg-green-700 active:bg-green-800',
     red: 'text-ink-white bg-surface-red-5 hover:bg-surface-red-6 active:bg-surface-red-7',
   }[props.theme]
 
   let subtleClasses = {
     gray: 'text-ink-gray-8 bg-surface-gray-2 hover:bg-surface-gray-3 active:bg-surface-gray-4',
     blue: 'text-ink-blue-3 bg-surface-blue-2 hover:bg-blue-200 active:bg-blue-300',
-    green:
-      'text-green-800 bg-surface-green-2 hover:bg-green-200 active:bg-green-300',
+    green: 'text-green-800 bg-surface-green-2 hover:bg-green-200 active:bg-green-300',
     red: 'text-red-700 bg-surface-red-2 hover:bg-surface-red-3 active:bg-surface-red-4',
   }[props.theme]
 
@@ -112,8 +106,7 @@ const buttonClasses = computed(() => {
   let ghostClasses = {
     gray: 'text-ink-gray-8 bg-transparent hover:bg-surface-gray-3 active:bg-surface-gray-4',
     blue: 'text-ink-blue-3 bg-transparent hover:bg-blue-200 active:bg-blue-300',
-    green:
-      'text-green-800 bg-transparent hover:bg-green-200 active:bg-green-300',
+    green: 'text-green-800 bg-transparent hover:bg-green-200 active:bg-green-300',
     red: 'text-red-700 bg-transparent hover:bg-surface-red-3 active:bg-surface-red-4',
   }[props.theme]
 
@@ -136,26 +129,22 @@ const buttonClasses = computed(() => {
   let disabledClassesMap: Record<ThemeVariant, string> = {
     'gray-solid': 'bg-surface-gray-2 text-ink-gray-4',
     'gray-subtle': 'bg-surface-gray-2 text-ink-gray-4',
-    'gray-outline':
-      'bg-surface-gray-2 text-ink-gray-4 border border-outline-gray-2',
+    'gray-outline': 'bg-surface-gray-2 text-ink-gray-4 border border-outline-gray-2',
     'gray-ghost': 'text-ink-gray-4',
 
     'blue-solid': 'bg-blue-300 text-ink-white',
     'blue-subtle': 'bg-surface-blue-2 text-ink-blue-link',
-    'blue-outline':
-      'bg-surface-blue-2 text-ink-blue-link border border-outline-blue-1',
+    'blue-outline': 'bg-surface-blue-2 text-ink-blue-link border border-outline-blue-1',
     'blue-ghost': 'text-ink-blue-link',
 
     'green-solid': 'bg-surface-green-2 text-ink-green-2',
     'green-subtle': 'bg-surface-green-2 text-ink-green-2',
-    'green-outline':
-      'bg-surface-green-2 text-ink-green-2 border border-outline-green-2',
+    'green-outline': 'bg-surface-green-2 text-ink-green-2 border border-outline-green-2',
     'green-ghost': 'text-ink-green-2',
 
     'red-solid': 'bg-surface-red-2 text-ink-red-2',
     'red-subtle': 'bg-surface-red-2 text-ink-red-2',
-    'red-outline':
-      'bg-surface-red-2 text-ink-red-2 border border-outline-red-1',
+    'red-outline': 'bg-surface-red-2 text-ink-red-2 border border-outline-red-1',
     'red-ghost': 'text-ink-red-2',
   }
   let disabledClasses = disabledClassesMap[themeVariant]
@@ -218,10 +207,7 @@ const hasLucideIconInDefaultSlot = computed(() => {
   // if the slot contains only one element and it's a lucide icon
   // render it as an icon button
   let firstVNode = slotContent[0]
-  if (
-    typeof firstVNode.type?.name == 'string' &&
-    firstVNode.type?.name?.startsWith('lucide-')
-  ) {
+  if (typeof firstVNode.type?.name == 'string' && firstVNode.type?.name?.startsWith('lucide-')) {
     return true
   }
   return false
diff --git a/src/components/Calendar/Calendar.vue b/src/components/Calendar/Calendar.vue
index 53341f59e..f12183de4 100644
--- a/src/components/Calendar/Calendar.vue
+++ b/src/components/Calendar/Calendar.vue
@@ -46,11 +46,7 @@
           <Button @click="increment" variant="ghost" icon="chevron-right" />
 
           <!--  View change button, default is months or can be set via props!  -->
-          <TabButtons
-            :buttons="enabledModes"
-            class="ml-2"
-            v-model="activeView"
-          />
+          <TabButtons :buttons="enabledModes" class="ml-2" v-model="activeView" />
         </div>
       </div>
     </slot>
@@ -78,30 +74,15 @@
       :config="overrideConfig"
     >
       <template #header="{ parseDateWithDay, currentDate, fullDay }">
-        <slot
-          name="daily-header"
-          v-bind="{ parseDateWithDay, currentDate, fullDay }"
-        />
+        <slot name="daily-header" v-bind="{ parseDateWithDay, currentDate, fullDay }" />
       </template>
     </CalendarDaily>
 
-    <NewEventModal
-      v-if="showEventModal"
-      v-model="showEventModal"
-      :event="newEvent"
-    />
+    <NewEventModal v-if="showEventModal" v-model="showEventModal" :event="newEvent" />
   </div>
 </template>
 <script setup>
-import {
-  computed,
-  onMounted,
-  onUnmounted,
-  provide,
-  ref,
-  watch,
-  nextTick,
-} from 'vue'
+import { computed, onMounted, onUnmounted, provide, ref, watch, nextTick } from 'vue'
 import { Button } from '../Button'
 import { TabButtons } from '../TabButtons'
 import {
@@ -186,9 +167,7 @@ function syncSelectedMonth(year, month) {
   if (typeof year === 'number' && typeof month === 'number') {
     const currentDay = dayjs(selectedMonthDate.value).date()
 
-    let tentative = dayjs(
-      `${year}-${String(month + 1).padStart(2, '0')}-01`,
-    ).date(currentDay)
+    let tentative = dayjs(`${year}-${String(month + 1).padStart(2, '0')}-01`).date(currentDay)
 
     if (tentative.month() !== month) {
       // overflowed into next month, use last day of target month
@@ -342,9 +321,7 @@ const actionOptions = [
   { label: 'Week', value: 'Week', iconLeft: WeekIcon },
   { label: 'Month', value: 'Month', iconLeft: MonthIcon },
 ]
-let enabledModes = actionOptions.filter(
-  (mode) => !overrideConfig.disableModes.includes(mode.value),
-)
+let enabledModes = actionOptions.filter((mode) => !overrideConfig.disableModes.includes(mode.value))
 
 let currentYear = ref(new Date().getFullYear())
 let currentMonth = ref(new Date().getMonth())
@@ -442,9 +419,7 @@ function incrementWeek() {
   if (nextWeek < datesInWeeks.value.length) {
     week.value = nextWeek
     const weekDates = datesInWeeks.value[week.value]
-    const spansNextMonth = weekDates.some(
-      (d) => d.getMonth() !== currentMonth.value,
-    ) // overlap into next month
+    const spansNextMonth = weekDates.some((d) => d.getMonth() !== currentMonth.value) // overlap into next month
     if (spansNextMonth) {
       // cross boundary -> advance month
       incrementMonth()
@@ -474,9 +449,7 @@ function decrementWeek() {
   if (prevWeek >= 0) {
     week.value = prevWeek
     const weekDates = datesInWeeks.value[week.value]
-    const spansPrevMonth = weekDates.some(
-      (d) => d.getMonth() !== currentMonth.value,
-    ) // overlap into previous month
+    const spansPrevMonth = weekDates.some((d) => d.getMonth() !== currentMonth.value) // overlap into previous month
     if (spansPrevMonth) {
       // cross boundary -> go to previous month
       decrementMonth()
@@ -495,9 +468,7 @@ function decrementWeek() {
   decrementMonth()
   let targetIndex = datesInWeeks.value.length - 1 // start at last row
   const lastWeekDates = datesInWeeks.value[targetIndex]
-  const hasNextMonthDates = lastWeekDates.some(
-    (d) => d.getMonth() !== currentMonth.value,
-  ) // overlap into next month
+  const hasNextMonthDates = lastWeekDates.some((d) => d.getMonth() !== currentMonth.value) // overlap into next month
   if (hasNextMonthDates && targetIndex > 0) {
     targetIndex = targetIndex - 1 // skip overlap row
   }
@@ -519,10 +490,7 @@ function incrementDay() {
 
 function decrementDay() {
   date.value--
-  if (
-    date.value < 0 ||
-    !isCurrentMonthDate(currentMonthDates.value[date.value])
-  ) {
+  if (date.value < 0 || !isCurrentMonthDate(currentMonthDates.value[date.value])) {
     decrementMonth()
   }
 }
@@ -562,12 +530,10 @@ const currentMonthYear = computed(() => {
   }
 
   // Non-week views or empty week fallback
-  if (activeView.value !== 'Week')
-    return formatMonthYear(currentMonth.value, currentYear.value)
+  if (activeView.value !== 'Week') return formatMonthYear(currentMonth.value, currentYear.value)
 
   const weekDates = datesInWeeks.value[week.value] || []
-  if (!weekDates.length)
-    return formatMonthYear(currentMonth.value, currentYear.value)
+  if (!weekDates.length) return formatMonthYear(currentMonth.value, currentYear.value)
 
   const parts = getWeekMonthParts(weekDates)
   if (parts.length === 1) return formatMonthYear(parts[0].month, parts[0].year)
@@ -630,12 +596,8 @@ function getVisibleRange() {
     }
   }
 
-  const start = dayjs(
-    new Date(currentYear.value, currentMonth.value, 1),
-  ).startOf('day')
-  const end = dayjs(
-    new Date(currentYear.value, currentMonth.value + 1, 0),
-  ).endOf('day')
+  const start = dayjs(new Date(currentYear.value, currentMonth.value, 1)).startOf('day')
+  const end = dayjs(new Date(currentYear.value, currentMonth.value + 1, 0)).endOf('day')
   return {
     startDate: toDateString(start),
     endDate: toDateString(end),
diff --git a/src/components/Calendar/CalendarDaily.vue b/src/components/Calendar/CalendarDaily.vue
index 4a97636a2..52935ad3c 100644
--- a/src/components/Calendar/CalendarDaily.vue
+++ b/src/components/Calendar/CalendarDaily.vue
@@ -12,22 +12,16 @@
           :is="showCollapsable ? Button : 'div'"
           :class="{ '!pl-1.5 pr-1 py-1 !gap-1': showCollapsable }"
           variant="ghost"
-          :iconRight="
-            showCollapsable ? (isCollapsed ? 'chevron-down' : 'chevron-up') : ''
-          "
+          :iconRight="showCollapsable ? (isCollapsed ? 'chevron-down' : 'chevron-up') : ''"
           @click="showCollapsable && (isCollapsed = !isCollapsed)"
         >
-          <div class="text-sm text-ink-gray-6 h-7 inline-flex items-center">
-            All day
-          </div>
+          <div class="text-sm text-ink-gray-6 h-7 inline-flex items-center">All day</div>
         </component>
       </div>
       <div
         class="flex flex-wrap gap-1 py-1 w-full overflow-hidden"
         :data-date-attr="currentDate"
-        @click.prevent="
-          calendarActions.handleCellClick($event, currentDate, '', true)
-        "
+        @click.prevent="calendarActions.handleCellClick($event, currentDate, '', true)"
       >
         <CalendarEvent
           v-for="(calendarEvent, idx) in !showCollapsable || !isCollapsed
@@ -51,9 +45,7 @@
     <div class="h-full overflow-hidden">
       <div
         class="flex h-full w-full overflow-scroll border-outline-gray-1"
-        :class="[
-          config.noBorder ? 'border-t-[1px]' : 'border-[1px] border-r-0',
-        ]"
+        :class="[config.noBorder ? 'border-t-[1px]' : 'border-[1px] border-r-0']"
         ref="gridRef"
       >
         <!-- Left column -->
@@ -77,9 +69,7 @@
               v-for="(time, i) in timeArray"
               :key="time"
               :data-time-attr="i == 0 ? '' : time"
-              @click="
-                calendarActions.handleCellClick($event, currentDate, time)
-              "
+              @click="calendarActions.handleCellClick($event, currentDate, time)"
             >
               <div
                 class="w-full border-outline-gray-1"
@@ -88,9 +78,7 @@
               />
             </div>
             <CalendarEvent
-              v-for="(calendarEvent, idx) in timedEvents[
-                parseDate(currentDate)
-              ]"
+              v-for="(calendarEvent, idx) in timedEvents[parseDate(currentDate)]"
               class="absolute mb-2 cursor-pointer"
               :event="calendarEvent"
               :key="calendarEvent.id"
@@ -131,21 +119,15 @@ const props = defineProps({
     required: true,
   },
 })
-const timedEvents = computed(
-  () => useCalendarData(props.events).timedEvents.value,
-)
-const fullDayEvents = computed(
-  () => useCalendarData(props.events).fullDayEvents.value,
-)
+const timedEvents = computed(() => useCalendarData(props.events).timedEvents.value)
+const fullDayEvents = computed(() => useCalendarData(props.events).fullDayEvents.value)
 const gridRef = ref(null)
 const hourHeight = props.config.hourHeight
 const minuteHeight = hourHeight / 60
 
 const showCollapsable = ref(false)
 const isCollapsed = ref(true)
-const dayFullDayEvents = computed(
-  () => fullDayEvents.value?.[parseDate(props.currentDate)] || [],
-)
+const dayFullDayEvents = computed(() => fullDayEvents.value?.[parseDate(props.currentDate)] || [])
 
 function updateFullDayEventsState() {
   // Show collapsible if more than 4 events
@@ -157,8 +139,7 @@ function updateFullDayEventsState() {
 
 watch(dayFullDayEvents, updateFullDayEventsState, { immediate: true })
 
-const timeArray =
-  props.config.timeFormat == '24h' ? twentyFourHoursFormat : twelveHoursFormat
+const timeArray = props.config.timeFormat == '24h' ? twentyFourHoursFormat : twelveHoursFormat
 
 onMounted(() => {
   const currentHour = new Date().getHours()
diff --git a/src/components/Calendar/CalendarEvent.vue b/src/components/Calendar/CalendarEvent.vue
index 863d66007..1a97fc74b 100644
--- a/src/components/Calendar/CalendarEvent.vue
+++ b/src/components/Calendar/CalendarEvent.vue
@@ -22,9 +22,7 @@
         class="event-border h-full w-[2px] rounded shrink-0"
         :style="eventBorderStyle"
       />
-      <div
-        class="relative flex h-full select-none items-start gap-2 overflow-hidden"
-      >
+      <div class="relative flex h-full select-none items-start gap-2 overflow-hidden">
         <div v-if="config.showIcon && eventIcons[props.event.type]">
           <component
             v-if="eventIcons[props.event.type]"
@@ -34,11 +32,7 @@
         </div>
 
         <div class="flex w-fit flex-col gap-0.5 overflow-hidden">
-          <p
-            ref="eventTitleRef"
-            class="text-sm font-medium event-title"
-            :class="lineClampClass"
-          >
+          <p ref="eventTitleRef" class="text-sm font-medium event-title" :class="lineClampClass">
             {{ props.event.title || '(No title)' }}
           </p>
           <p
@@ -46,13 +40,7 @@
             class="text-xs font-normal event-subtitle"
             v-if="!props.event.isFullDay"
           >
-            {{
-              formattedDuration(
-                updatedEvent.fromTime,
-                updatedEvent.toTime,
-                config.timeFormat,
-              )
-            }}
+            {{ formattedDuration(updatedEvent.fromTime, updatedEvent.toTime, config.timeFormat) }}
           </p>
         </div>
       </div>
@@ -84,9 +72,7 @@
       class="event-border w-[2px] rounded shrink-0"
       :style="eventBorderStyle"
     />
-    <div
-      class="relative flex h-full select-none items-start gap-2 overflow-hidden"
-    >
+    <div class="relative flex h-full select-none items-start gap-2 overflow-hidden">
       <div v-if="config.showIcon && eventIcons[props.event.type]">
         <component
           v-if="eventIcons[props.event.type]"
@@ -95,9 +81,7 @@
         />
       </div>
 
-      <div
-        class="flex w-fit flex-col text-start overflow-hidden whitespace-nowrap"
-      >
+      <div class="flex w-fit flex-col text-start overflow-hidden whitespace-nowrap">
         <p class="text-sm font-medium truncate">
           {{ props.event.title || 'New Event' }}
         </p>
@@ -130,15 +114,7 @@ import NewEventModal from './NewEventModal.vue'
 import { useFloating, shift, flip, offset, autoUpdate } from '@floating-ui/vue'
 import { activeEvent } from './composables/useCalendarData.js'
 
-import {
-  ref,
-  inject,
-  computed,
-  onMounted,
-  onBeforeUnmount,
-  watch,
-  reactive,
-} from 'vue'
+import { ref, inject, computed, onMounted, onBeforeUnmount, watch, reactive } from 'vue'
 
 import {
   calculateMinutes,
@@ -219,10 +195,7 @@ const setEventStyles = computed(() => {
     }
   }
 
-  let diff = calculateDiff(
-    calendarEvent.value.fromTime,
-    calendarEvent.value.toTime,
-  )
+  let diff = calculateDiff(calendarEvent.value.fromTime, calendarEvent.value.toTime)
   let height = diff * minuteHeight
   if (height < heightThreshold) {
     height = minimumHeight
@@ -232,16 +205,10 @@ const setEventStyles = computed(() => {
   let top = calculateMinutes(calendarEvent.value.fromTime) * minuteHeight
 
   let hallNumber = calendarEvent.value.hallNumber
-  let width =
-    isResizing.value || isRepositioning.value
-      ? '100%'
-      : `${93 - hallNumber * 20}%`
-  let left =
-    isResizing.value || isRepositioning.value ? '0' : `${hallNumber * 20}%`
+  let width = isResizing.value || isRepositioning.value ? '100%' : `${93 - hallNumber * 20}%`
+  let left = isResizing.value || isRepositioning.value ? '0' : `${hallNumber * 20}%`
   let zIndex =
-    isResizing.value || isRepositioning.value
-      ? 100
-      : (props.event.idx || 1) * hallNumber + 1
+    isResizing.value || isRepositioning.value ? 100 : (props.event.idx || 1) * hallNumber + 1
 
   return {
     height,
@@ -279,9 +246,7 @@ const getTheme = () => {
   const theme = document.documentElement.getAttribute('data-theme')
 
   if (theme) return theme
-  return document.documentElement.classList.contains('htw-dark')
-    ? 'dark'
-    : 'light'
+  return document.documentElement.classList.contains('htw-dark') ? 'dark' : 'light'
 }
 
 function color(color) {
@@ -338,8 +303,7 @@ const isEventUpdated = ref(false)
 
 function newEventEndTime(newHeight) {
   let newEndTime =
-    parseFloat(newHeight) / minuteHeight +
-    calculateMinutes(calendarEvent.value.fromTime)
+    parseFloat(newHeight) / minuteHeight + calculateMinutes(calendarEvent.value.fromTime)
   newEndTime = Math.floor(newEndTime)
   if (newEndTime > 1440) {
     newEndTime = 1440
@@ -360,8 +324,7 @@ function handleResizeMouseDown(e) {
     preventClick.value = true
     // difference between where mouse is and where event's top is, to find the new height
     let diffX = e.clientY - eventRef.value.getBoundingClientRect().top
-    eventRef.value.style.height =
-      Math.round(diffX / height15Min) * height15Min + 'px'
+    eventRef.value.style.height = Math.round(diffX / height15Min) * height15Min + 'px'
 
     eventRef.value.style.width = '100%'
     updatedEvent.toTime = newEventEndTime(eventRef.value.style.height)
@@ -429,10 +392,8 @@ function handleRepositionMouseDown(e) {
       calendarEvent.value.date = updatedEvent.date
       calendarEvent.value.fromDate = updatedEvent.date
       calendarEvent.value.toDate = updatedEvent.date
-      calendarEvent.value.fromDateTime =
-        updatedEvent.date + ' ' + updatedEvent.fromTime
-      calendarEvent.value.toDateTime =
-        updatedEvent.date + ' ' + updatedEvent.toTime
+      calendarEvent.value.fromDateTime = updatedEvent.date + ' ' + updatedEvent.fromTime
+      calendarEvent.value.toDateTime = updatedEvent.date + ' ' + updatedEvent.toTime
       calendarEvent.value.fromTime = updatedEvent.fromTime
       calendarEvent.value.toTime = updatedEvent.toTime
       calendarActions.updateEventState(calendarEvent.value)
@@ -447,18 +408,12 @@ function handleRepositionMouseDown(e) {
 }
 
 function getDate(date, nextDate = 0) {
-  let newDate = new Date(
-    date.getFullYear(),
-    date.getMonth(),
-    date.getDate() + nextDate,
-  )
+  let newDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() + nextDate)
   return newDate
 }
 
 function handleHorizontalMovement(clientX, rect) {
-  const currentDate = new Date(
-    eventRef.value.parentNode.getAttribute('data-date-attr'),
-  )
+  const currentDate = new Date(eventRef.value.parentNode.getAttribute('data-date-attr'))
 
   if (props.event.isFullDay) {
     eventRef.value.style.width = '100%'
@@ -504,12 +459,10 @@ function handleVerticalMovement(clientY, prevY, rect) {
   state.yAxis = diffY
 
   updatedEvent.fromTime = convertMinutesToHours(
-    calculateMinutes(calendarEvent.value.fromTime) +
-      Math.round(diffY / minuteHeight),
+    calculateMinutes(calendarEvent.value.fromTime) + Math.round(diffY / minuteHeight),
   )
   updatedEvent.toTime = convertMinutesToHours(
-    calculateMinutes(calendarEvent.value.toTime) +
-      Math.round(diffY / minuteHeight),
+    calculateMinutes(calendarEvent.value.toTime) + Math.round(diffY / minuteHeight),
   )
   handleTimeConstraints()
 }
@@ -607,8 +560,7 @@ const isPastEvent = computed(() => {
     if (!endDateStr) return false
     // If event has a toTime use it; else if full day, treat end as end of day; fallback 00:00:00
     let endTimeStr = '00:00:00'
-    if (calendarEvent.value.isFullDay || props.event.isFullDay)
-      endTimeStr = '23:59:59'
+    if (calendarEvent.value.isFullDay || props.event.isFullDay) endTimeStr = '23:59:59'
     else if (calendarEvent.value.toTime) endTimeStr = calendarEvent.value.toTime
 
     const end = new Date(`${endDateStr}T${endTimeStr}`.replace(' ', 'T'))
diff --git a/src/components/Calendar/CalendarMonthly.vue b/src/components/Calendar/CalendarMonthly.vue
index e2dbd57f0..98668d7a1 100644
--- a/src/components/Calendar/CalendarMonthly.vue
+++ b/src/components/Calendar/CalendarMonthly.vue
@@ -35,15 +35,11 @@
           class="flex justify-center font-normal"
           :class="isCurrentMonth(date) ? 'text-gray-700' : 'text-gray-200'"
         >
-          <div
-            class="flex gap-0.5 w-full flex-col items-center text-xs text-right"
-          >
+          <div class="flex gap-0.5 w-full flex-col items-center text-xs text-right">
             <span
               class="z-10 w-full flex justify-between items-center"
               :class="[
-                date.toDateString() === new Date().toDateString()
-                  ? 'p-[3px] pb-0.5'
-                  : 'p-2',
+                date.toDateString() === new Date().toDateString() ? 'p-[3px] pb-0.5' : 'p-2',
               ]"
             >
               <div></div>
@@ -91,9 +87,7 @@
                 v-if="timedEvents[parseDate(date)]"
                 class="z-10 cursor-pointer"
                 :draggable="config.isEditMode"
-                @dragstart="
-                  onDragStart($event, timedEvents[parseDate(date)][0].id)
-                "
+                @dragstart="onDragStart($event, timedEvents[parseDate(date)][0].id)"
                 @dragend="$event.target.style.opacity = '1'"
                 @dragover.prevent
                 :events="timedEvents[parseDate(date)]"
@@ -136,13 +130,9 @@ const props = defineProps({
 
 const emit = defineEmits(['setCurrentDate'])
 
-const timedEvents = computed(
-  () => useCalendarData(props.events, 'Month').timedEvents.value,
-)
+const timedEvents = computed(() => useCalendarData(props.events, 'Month').timedEvents.value)
 
-const maxEventsInCell = computed(() =>
-  props.currentMonthDates.length > 35 ? 1 : 2,
-)
+const maxEventsInCell = computed(() => (props.currentMonthDates.length > 35 ? 1 : 2))
 
 function isCurrentMonth(date) {
   return date.getMonth() === props.currentMonth
diff --git a/src/components/Calendar/CalendarWeekly.vue b/src/components/Calendar/CalendarWeekly.vue
index ded14b39c..a952d4c54 100644
--- a/src/components/Calendar/CalendarWeekly.vue
+++ b/src/components/Calendar/CalendarWeekly.vue
@@ -32,16 +32,10 @@
           :is="showCollapsable ? Button : 'div'"
           :class="{ '!pl-1.5 pr-1 py-1 !gap-1': showCollapsable }"
           variant="ghost"
-          :iconRight="
-            showCollapsable ? (isCollapsed ? 'chevron-down' : 'chevron-up') : ''
-          "
+          :iconRight="showCollapsable ? (isCollapsed ? 'chevron-down' : 'chevron-up') : ''"
           @click="showCollapsable && (isCollapsed = !isCollapsed)"
         >
-          <div
-            class="text-sm text-ink-gray-6 h-[29px] inline-flex items-center"
-          >
-            All day
-          </div>
+          <div class="text-sm text-ink-gray-6 h-[29px] inline-flex items-center">All day</div>
         </component>
       </div>
       <div class="grid w-full grid-cols-7 overflow-hidden">
@@ -69,11 +63,7 @@
               @click.stop
             />
             <Button
-              v-if="
-                showCollapsable &&
-                isCollapsed &&
-                fullDayEvents[parseDate(date)]?.length > 2
-              "
+              v-if="showCollapsable && isCollapsed && fullDayEvents[parseDate(date)]?.length > 2"
               :label="fullDayEvents[parseDate(date)]?.length - 2 + ' more'"
               variant="ghost"
               class="w-fit text-sm !py-0.5 !h-5 !justify-start cursor-pointer"
@@ -113,9 +103,7 @@
               class="relative w-full border-outline-gray-1"
               :class="[
                 idx === 0 && 'calendar-column border-l-[1px]',
-                config.noBorder && idx === weeklyDates.length - 1
-                  ? ''
-                  : 'border-r-[1px]',
+                config.noBorder && idx === weeklyDates.length - 1 ? '' : 'border-r-[1px]',
                 isWeekend(date, config) && 'bg-surface-gray-1',
               ]"
               :data-date-attr="date"
@@ -126,9 +114,7 @@
                 v-for="(time, i) in timeArray"
                 :key="time"
                 :data-time-attr="i == 0 ? '' : time"
-                @click.prevent="
-                  calendarActions.handleCellClick($event, date, time)
-                "
+                @click.prevent="calendarActions.handleCellClick($event, date, time)"
               >
                 <div
                   class="border-outline-gray-1 w-full"
@@ -192,18 +178,12 @@ const isCollapsed = ref(true)
 const hourHeight = props.config.hourHeight
 const minuteHeight = hourHeight / 60
 
-const timeArray =
-  props.config.timeFormat == '24h' ? twentyFourHoursFormat : twelveHoursFormat
+const timeArray = props.config.timeFormat == '24h' ? twentyFourHoursFormat : twelveHoursFormat
 
-const timedEvents = computed(
-  () => useCalendarData(props.events).timedEvents.value,
-)
-const fullDayEvents = computed(
-  () => useCalendarData(props.events).fullDayEvents.value,
-)
+const timedEvents = computed(() => useCalendarData(props.events).timedEvents.value)
+const fullDayEvents = computed(() => useCalendarData(props.events).fullDayEvents.value)
 
-const isToday = (date) =>
-  new Date(date).toDateString() === new Date().toDateString()
+const isToday = (date) => new Date(date).toDateString() === new Date().toDateString()
 
 const currentTime = computed(() => {
   let d = new Date()
@@ -238,10 +218,7 @@ function getFullDayEventsCount(eventsObject) {
 }
 
 function setFullDayEventsHeight(eventsObject, weeklyDates) {
-  let currentWeekEvents = getFullDayEventsInCurrentWeek(
-    eventsObject,
-    weeklyDates,
-  )
+  let currentWeekEvents = getFullDayEventsInCurrentWeek(eventsObject, weeklyDates)
   let maxEvents = getFullDayEventsCount(currentWeekEvents)
   if (maxEvents > 3) {
     showCollapsable.value = true
diff --git a/src/components/Calendar/EventModalContent.vue b/src/components/Calendar/EventModalContent.vue
index d4dcc135b..aa8f1fc2c 100644
--- a/src/components/Calendar/EventModalContent.vue
+++ b/src/components/Calendar/EventModalContent.vue
@@ -1,24 +1,13 @@
 <template>
-  <div
-    class="w-80 rounded bg-surface-modal text-ink-gray-8 p-4 shadow"
-    @click.stop
-  >
+  <div class="w-80 rounded bg-surface-modal text-ink-gray-8 p-4 shadow" @click.stop>
     <div class="flex flex-row-reverse gap-2">
       <span class="cursor-pointer" @click.stop="$emit('close')">
         <FeatherIcon name="x" class="h-4 w-4" />
       </span>
-      <span
-        v-if="isEditMode"
-        class="cursor-pointer"
-        @click.stop="$emit('edit')"
-      >
+      <span v-if="isEditMode" class="cursor-pointer" @click.stop="$emit('edit')">
         <FeatherIcon name="edit-2" class="h-4 w-4" />
       </span>
-      <span
-        v-if="isEditMode"
-        class="cursor-pointer"
-        @click.stop="$emit('delete')"
-      >
+      <span v-if="isEditMode" class="cursor-pointer" @click.stop="$emit('delete')">
         <FeatherIcon name="trash-2" class="h-4 w-4" />
       </span>
     </div>
@@ -39,10 +28,7 @@
             {{ calendarEvent.participant }}
           </span>
         </div>
-        <div
-          class="flex items-center gap-2"
-          v-if="calendarEvent.fromTime && calendarEvent.toTime"
-        >
+        <div class="flex items-center gap-2" v-if="calendarEvent.fromTime && calendarEvent.toTime">
           <FeatherIcon name="clock" class="h-4 w-4" />
           <span class="text-sm font-normal">
             {{ calendarEvent.fromTime }} - {{ calendarEvent.toTime }}
diff --git a/src/components/Calendar/FloatingPopover.vue b/src/components/Calendar/FloatingPopover.vue
index 2f066501e..bf544dd6c 100644
--- a/src/components/Calendar/FloatingPopover.vue
+++ b/src/components/Calendar/FloatingPopover.vue
@@ -1,10 +1,6 @@
 <template>
   <div ref="floating" :style="{ ...floatingStyles, zIndex: 100 }" v-if="opened">
-    <EventModalContent
-      :calendarEvent="calendarEvent"
-      :date="date"
-      @close="close"
-    />
+    <EventModalContent :calendarEvent="calendarEvent" :date="date" @close="close" />
   </div>
 </template>
 <script setup>
diff --git a/src/components/Calendar/Icon/DayIcon.vue b/src/components/Calendar/Icon/DayIcon.vue
index a4a4e1b06..39338d4cc 100644
--- a/src/components/Calendar/Icon/DayIcon.vue
+++ b/src/components/Calendar/Icon/DayIcon.vue
@@ -1,11 +1,5 @@
 <template>
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M8 6C9.10457 6 10 6.89543 10 8C10 9.10457 9.10457 10 8 10C6.89543 10 6 9.10457 6 8C6 6.89543 6.89543 6 8 6ZM8 7C7.44772 7 7 7.44772 7 8C7 8.55228 7.44772 9 8 9C8.55228 9 9 8.55228 9 8C9 7.44772 8.55228 7 8 7Z"
       fill="currentColor"
diff --git a/src/components/Calendar/Icon/MonthIcon.vue b/src/components/Calendar/Icon/MonthIcon.vue
index 37aabe402..93ace715d 100644
--- a/src/components/Calendar/Icon/MonthIcon.vue
+++ b/src/components/Calendar/Icon/MonthIcon.vue
@@ -1,11 +1,5 @@
 <template>
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M5 9C6.10457 9 7 9.89543 7 11C7 12.1046 6.10457 13 5 13C3.89543 13 3 12.1046 3 11C3 9.89543 3.89543 9 5 9ZM11 9C12.1046 9 13 9.89543 13 11C13 12.1046 12.1046 13 11 13C9.89543 13 9 12.1046 9 11C9 9.89543 9.89543 9 11 9ZM5 10C4.44772 10 4 10.4477 4 11C4 11.5523 4.44772 12 5 12C5.55228 12 6 11.5523 6 11C6 10.4477 5.55228 10 5 10ZM11 10C10.4477 10 10 10.4477 10 11C10 11.5523 10.4477 12 11 12C11.5523 12 12 11.5523 12 11C12 10.4477 11.5523 10 11 10ZM5 3C6.10457 3 7 3.89543 7 5C7 6.10457 6.10457 7 5 7C3.89543 7 3 6.10457 3 5C3 3.89543 3.89543 3 5 3ZM11 3C12.1046 3 13 3.89543 13 5C13 6.10457 12.1046 7 11 7C9.89543 7 9 6.10457 9 5C9 3.89543 9.89543 3 11 3ZM5 4C4.44772 4 4 4.44772 4 5C4 5.55228 4.44772 6 5 6C5.55228 6 6 5.55228 6 5C6 4.44772 5.55228 4 5 4ZM11 4C10.4477 4 10 4.44772 10 5C10 5.55228 10.4477 6 11 6C11.5523 6 12 5.55228 12 5C12 4.44772 11.5523 4 11 4Z"
       fill="currentColor"
diff --git a/src/components/Calendar/Icon/WeekIcon.vue b/src/components/Calendar/Icon/WeekIcon.vue
index 357e87f6d..33a157135 100644
--- a/src/components/Calendar/Icon/WeekIcon.vue
+++ b/src/components/Calendar/Icon/WeekIcon.vue
@@ -1,11 +1,5 @@
 <template>
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M3 6C4.10457 6 5 6.89543 5 8C5 9.10457 4.10457 10 3 10C1.89543 10 1 9.10457 1 8C1 6.89543 1.89543 6 3 6ZM8 6C9.10457 6 10 6.89543 10 8C10 9.10457 9.10457 10 8 10C6.89543 10 6 9.10457 6 8C6 6.89543 6.89543 6 8 6ZM13 6C14.1046 6 15 6.89543 15 8C15 9.10457 14.1046 10 13 10C11.8954 10 11 9.10457 11 8C11 6.89543 11.8954 6 13 6ZM13 7C12.4477 7 12 7.44772 12 8C12 8.55228 12.4477 9 13 9C13.5523 9 14 8.55228 14 8C14 7.44772 13.5523 7 13 7ZM3 7C2.44772 7 2 7.44772 2 8C2 8.55228 2.44772 9 3 9C3.55228 9 4 8.55228 4 8C4 7.44772 3.55228 7 3 7ZM8 7C7.44772 7 7 7.44772 7 8C7 8.55228 7.44772 9 8 9C8.55228 9 9 8.55228 9 8C9 7.44772 8.55228 7 8 7Z"
       fill="currentColor"
diff --git a/src/components/Calendar/NewEventModal.vue b/src/components/Calendar/NewEventModal.vue
index e66cc80df..d20af14dc 100644
--- a/src/components/Calendar/NewEventModal.vue
+++ b/src/components/Calendar/NewEventModal.vue
@@ -74,23 +74,14 @@
               />
             </template>
           </FormControl>
-          <FormControl
-            type="checkbox"
-            label="Full Day Event?"
-            v-model="newEvent.isFullDay"
-          />
+          <FormControl type="checkbox" label="Full Day Event?" v-model="newEvent.isFullDay" />
           <ErrorMessage :message="errorMessage" v-if="errorMessage" />
         </div>
       </div>
     </template>
     <template #actions="{ close }">
       <div class="flex flex-row-reverse gap-2">
-        <Button
-          class="w-full"
-          variant="solid"
-          @click="submitEvent(close)"
-          label="Submit"
-        />
+        <Button class="w-full" variant="solid" @click="submitEvent(close)" label="Submit" />
       </div>
     </template>
   </Dialog>
@@ -155,10 +146,7 @@ function validateFields() {
   } else {
     errorMessage.value = ''
   }
-  if (
-    newEvent.hasOwnProperty('fromTime') &&
-    newEvent.hasOwnProperty('toTime')
-  ) {
+  if (newEvent.hasOwnProperty('fromTime') && newEvent.hasOwnProperty('toTime')) {
     validateStartEndTime()
   }
 }
diff --git a/src/components/Calendar/calendarUtils.js b/src/components/Calendar/calendarUtils.js
index 61f3d7e93..a14dab2ed 100644
--- a/src/components/Calendar/calendarUtils.js
+++ b/src/components/Calendar/calendarUtils.js
@@ -30,8 +30,7 @@ export function getCalendarDates(month, year) {
   }
 
   function getNextMonthDates(currentAndPreviousMonthDates) {
-    const numberofDaysInCalendar =
-      currentAndPreviousMonthDates.length > 35 ? 42 : 35
+    const numberofDaysInCalendar = currentAndPreviousMonthDates.length > 35 ? 42 : 35
     let lengthOfDates = currentAndPreviousMonthDates.length
     let lastDate = currentAndPreviousMonthDates[lengthOfDates - 1]
     let diff = numberofDaysInCalendar - lengthOfDates + 1
@@ -40,13 +39,7 @@ export function getCalendarDates(month, year) {
     return allDates
   }
 
-  function getDatesAfter(
-    date,
-    startIndex,
-    counter,
-    stepper = 1,
-    getNextMonthDates = false,
-  ) {
+  function getDatesAfter(date, startIndex, counter, stepper = 1, getNextMonthDates = false) {
     let allDates = []
     for (let index = startIndex; index < counter; index++) {
       let tempDate = new Date(
@@ -151,9 +144,7 @@ export function findOverlappingEventsCount(events) {
   const result = []
 
   for (const event of events) {
-    const availableHall = result.find(
-      (hall) => hall[hall.length - 1].endTime <= event.startTime,
-    )
+    const availableHall = result.find((hall) => hall[hall.length - 1].endTime <= event.startTime)
 
     if (availableHall) {
       availableHall.push(event)
@@ -471,8 +462,7 @@ export function getWeekendDays(config) {
       if (typeof d === 'number') return d
       if (typeof d === 'string') {
         const key = d.trim().toLowerCase()
-        if (_weekdayNameToIndex.hasOwnProperty(key))
-          return _weekdayNameToIndex[key]
+        if (_weekdayNameToIndex.hasOwnProperty(key)) return _weekdayNameToIndex[key]
       }
       return null
     })
@@ -498,8 +488,7 @@ export function getWeekMonthParts(weekDates) {
     const m = dt.getMonth()
     const y = dt.getFullYear()
     const key = `${y}-${m}`
-    if (!parts.find((p) => p.key === key))
-      parts.push({ key, month: m, year: y })
+    if (!parts.find((p) => p.key === key)) parts.push({ key, month: m, year: y })
   }
   return parts
 }
diff --git a/src/components/Calendar/composables/useCalendarData.js b/src/components/Calendar/composables/useCalendarData.js
index df68bd2cf..6dc3b6a7c 100644
--- a/src/components/Calendar/composables/useCalendarData.js
+++ b/src/components/Calendar/composables/useCalendarData.js
@@ -1,9 +1,5 @@
 import { ref, computed } from 'vue'
-import {
-  groupBy,
-  calculateMinutes,
-  findOverlappingEventsCount,
-} from '../calendarUtils'
+import { groupBy, calculateMinutes, findOverlappingEventsCount } from '../calendarUtils'
 
 export const activeEvent = ref('')
 
diff --git a/src/components/Calendar/composables/useEventModal.js b/src/components/Calendar/composables/useEventModal.js
index 15228a2df..62233764e 100644
--- a/src/components/Calendar/composables/useEventModal.js
+++ b/src/components/Calendar/composables/useEventModal.js
@@ -1,9 +1,5 @@
 import { ref, reactive } from 'vue'
-import {
-  parseDate,
-  convertMinutesToHours,
-  calculateMinutes,
-} from '../calendarUtils'
+import { parseDate, convertMinutesToHours, calculateMinutes } from '../calendarUtils'
 
 export default function useEventModal() {
   const showEventModal = ref(false)
@@ -18,19 +14,9 @@ export default function useEventModal() {
     title: '',
     isFullDay: false,
   })
-  function openNewEventModal(
-    e,
-    view,
-    date,
-    isEditMode,
-    fromTime = '',
-    isFullDay = false,
-  ) {
+  function openNewEventModal(e, view, date, isEditMode, fromTime = '', isFullDay = false) {
     if (!isEditMode) return
-    date =
-      view === 'Week'
-        ? e.target.parentNode.parentNode.getAttribute('data-date-attr')
-        : date
+    date = view === 'Week' ? e.target.parentNode.parentNode.getAttribute('data-date-attr') : date
     newEvent.date = parseDate(new Date(date))
     newEvent.fromDate = date
     newEvent.toDate = date
@@ -41,10 +27,7 @@ export default function useEventModal() {
       return
     }
 
-    let toTime = convertMinutesToHours(calculateMinutes(fromTime) + 60).slice(
-      0,
-      -3,
-    )
+    let toTime = convertMinutesToHours(calculateMinutes(fromTime) + 60).slice(0, -3)
 
     newEvent.fromTime = fromTime
     newEvent.toTime = toTime
diff --git a/src/components/Calendar/stories/CustomHeader.vue b/src/components/Calendar/stories/CustomHeader.vue
index 652bf4eae..4f2875558 100644
--- a/src/components/Calendar/stories/CustomHeader.vue
+++ b/src/components/Calendar/stories/CustomHeader.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import { Button, Calendar, DatePicker, Select } from "frappe-ui";
+import { Button, Calendar, DatePicker, Select } from 'frappe-ui'
 
 const config = {
   defaultMode: 'Month',
@@ -119,21 +119,9 @@ const events = ref([
           </DatePicker>
         </div>
         <div class="flex items-center gap-2">
-          <Button
-            variant="ghost"
-            icon="chevron-left"
-            @click="headerProps.decrement"
-          />
-          <Button
-            label="Today"
-            variant="ghost"
-            @click="headerProps.setCalendarDate()"
-          />
-          <Button
-            variant="ghost"
-            icon="chevron-right"
-            @click="headerProps.increment"
-          />
+          <Button variant="ghost" icon="chevron-left" @click="headerProps.decrement" />
+          <Button label="Today" variant="ghost" @click="headerProps.setCalendarDate()" />
+          <Button variant="ghost" icon="chevron-right" @click="headerProps.increment" />
         </div>
         <div>
           <Select
diff --git a/src/components/Card.vue b/src/components/Card.vue
index a02edd1d4..204e3b0a0 100644
--- a/src/components/Card.vue
+++ b/src/components/Card.vue
@@ -14,10 +14,7 @@
     <p class="mt-1.5 text-base text-gray-600" v-if="subtitle">
       {{ subtitle }}
     </p>
-    <div
-      v-if="loading"
-      class="mt-4 flex flex-auto flex-col items-center justify-center rounded-md"
-    >
+    <div v-if="loading" class="mt-4 flex flex-auto flex-col items-center justify-center rounded-md">
       <LoadingText />
     </div>
     <div class="mt-4 flex-auto overflow-auto" v-else-if="$slots['default']">
diff --git a/src/components/Charts/ECharts.vue b/src/components/Charts/ECharts.vue
index 7f8f17413..52307a123 100644
--- a/src/components/Charts/ECharts.vue
+++ b/src/components/Charts/ECharts.vue
@@ -16,8 +16,7 @@ let chart: echarts.ECharts
 const chartDiv = ref<HTMLDivElement>()
 
 const chartClass = computed(() => {
-  const defaults =
-    'h-full w-full min-w-[300px] md:min-w-[400px] min-h-[300px] px-4 py-2'
+  const defaults = 'h-full w-full min-w-[300px] md:min-w-[400px] min-h-[300px] px-4 py-2'
   return props.class || defaults
 })
 
diff --git a/src/components/Charts/NumberChart.vue b/src/components/Charts/NumberChart.vue
index c45d8baa7..693a21abb 100644
--- a/src/components/Charts/NumberChart.vue
+++ b/src/components/Charts/NumberChart.vue
@@ -14,11 +14,7 @@
           <div
             class="flex flex-1 items-center gap-0.5 flex-shrink-0 truncate text-[24px] text-ink-gray-6 font-semibold leading-10"
           >
-            <div
-              v-if="config.prefix"
-              v-html="config.prefix"
-              class="size-4 table"
-            />
+            <div v-if="config.prefix" v-html="config.prefix" class="size-4 table" />
             {{ formatValue(config.value, 1, true) }}{{ config.suffix }}
           </div>
         </slot>
diff --git a/src/components/Charts/axisChartOptions.ts b/src/components/Charts/axisChartOptions.ts
index 23d8910f0..a1691cb44 100644
--- a/src/components/Charts/axisChartOptions.ts
+++ b/src/components/Charts/axisChartOptions.ts
@@ -1,11 +1,6 @@
 import useEchartsOptions from './eChartOptions'
 import { formatValue, mergeDeep } from './helpers'
-import {
-  AreaSeriesConfig,
-  AxisChartConfig,
-  BarSeriesConfig,
-  LineSeriesConfig,
-} from './types'
+import { AreaSeriesConfig, AxisChartConfig, BarSeriesConfig, LineSeriesConfig } from './types'
 
 export default function useAxisChartOptions(config: AxisChartConfig) {
   const data = config.data || []
@@ -15,10 +10,7 @@ export default function useAxisChartOptions(config: AxisChartConfig) {
     throw new Error('Swap axes is not supported for time series data')
   }
 
-  if (
-    config.series.find((s) => s.axis === 'y2' || s.type !== 'bar') &&
-    config.swapXY
-  ) {
+  if (config.series.find((s) => s.axis === 'y2' || s.type !== 'bar') && config.swapXY) {
     throw new Error('Swap axes is not supported for non-bar series or y2 axis')
   }
 
@@ -103,19 +95,12 @@ function getBarSeriesOptions(config: AxisChartConfig, series: BarSeriesConfig) {
     stack: config.stacked ? 'stack' : undefined,
     barMaxWidth: 60,
     itemStyle: {
-      borderRadius: config.stacked
-        ? isLastBar
-          ? roundedCorners
-          : 0
-        : roundedCorners,
+      borderRadius: config.stacked ? (isLastBar ? roundedCorners : 0) : roundedCorners,
     },
   }
 }
 
-function getLineSeriesOptions(
-  config: AxisChartConfig,
-  series: LineSeriesConfig,
-) {
+function getLineSeriesOptions(config: AxisChartConfig, series: LineSeriesConfig) {
   const showSymbol = series.showDataPoints || series.showDataLabels
   return {
     connectNulls: true,
@@ -130,10 +115,7 @@ function getLineSeriesOptions(
   }
 }
 
-function getAreaSeriesOptions(
-  config: AxisChartConfig,
-  series: AreaSeriesConfig,
-) {
+function getAreaSeriesOptions(config: AxisChartConfig, series: AreaSeriesConfig) {
   return {
     type: 'line',
     showSymbol: series.showDataPoints,
diff --git a/src/components/Charts/donutChartOptions.ts b/src/components/Charts/donutChartOptions.ts
index 772ba68d8..92e934345 100644
--- a/src/components/Charts/donutChartOptions.ts
+++ b/src/components/Charts/donutChartOptions.ts
@@ -88,8 +88,7 @@ export default function useDonutChartOptions(config: DonutChartConfig) {
           itemGap: 12,
           formatter: function (name: string) {
             const labelIndex = labels.indexOf(name)
-            const percentage =
-              total > 0 ? (values[labelIndex] / total) * 100 : 0
+            const percentage = total > 0 ? (values[labelIndex] / total) * 100 : 0
             return `${name} (${percentage.toFixed(0)}%)`
           },
           textStyle: {
diff --git a/src/components/Charts/eChartOptions.ts b/src/components/Charts/eChartOptions.ts
index 6c9f01f2e..297f4e72b 100644
--- a/src/components/Charts/eChartOptions.ts
+++ b/src/components/Charts/eChartOptions.ts
@@ -32,11 +32,7 @@ export default function useEchartsOptions(config: AxisChartConfig) {
     grid: {
       left: '1%',
       right: config.swapXY ? '2.5%' : '1.5%',
-      top:
-        PADDING_TOP +
-        TITLE_HEIGHT * hasTitle +
-        SUBTITLE_HEIGHT * hasSubtitle +
-        TITLE_BOTTOM,
+      top: PADDING_TOP + TITLE_HEIGHT * hasTitle + SUBTITLE_HEIGHT * hasSubtitle + TITLE_BOTTOM,
       bottom: PADDING_BOTTOM + LEGEND_HEIGHT * hasLegend,
       containLabel: true,
     },
@@ -218,8 +214,7 @@ function getXAxisOptions(config: AxisChartConfig) {
         axisLabel: {
           show: true,
           hideOverlap: true,
-          showMaxLabel:
-            config.xAxis.type === 'category' || config.xAxis.type === 'value',
+          showMaxLabel: config.xAxis.type === 'category' || config.xAxis.type === 'value',
           margin: 8,
         },
       }
@@ -298,7 +293,7 @@ function getYAxisOptions(config: AxisChartConfig) {
 
   primaryYAxisOptions = mergeDeep(
     primaryYAxisOptions,
-    config.swapXY ? config.xAxis.echartOptions : config.yAxis.echartOptions
+    config.swapXY ? config.xAxis.echartOptions : config.yAxis.echartOptions,
   )
 
   let secondaryYAxisOptions = {
@@ -349,10 +344,8 @@ function getYAxisOptions(config: AxisChartConfig) {
 
   secondaryYAxisOptions = mergeDeep(
     secondaryYAxisOptions,
-    config.swapXY ? config.y2Axis?.echartOptions : config.y2Axis?.echartOptions
+    config.swapXY ? config.y2Axis?.echartOptions : config.y2Axis?.echartOptions,
   )
 
-  return config.swapXY
-    ? [primaryYAxisOptions]
-    : [primaryYAxisOptions, secondaryYAxisOptions]
+  return config.swapXY ? [primaryYAxisOptions] : [primaryYAxisOptions, secondaryYAxisOptions]
 }
diff --git a/src/components/Charts/funnelChartOptions.ts b/src/components/Charts/funnelChartOptions.ts
index d20dc351b..073397fe9 100644
--- a/src/components/Charts/funnelChartOptions.ts
+++ b/src/components/Charts/funnelChartOptions.ts
@@ -44,11 +44,7 @@ export default function getFunnelChartOptions(config: FunnelChartConfig) {
         type: 'funnel',
         orient: 'vertical',
         funnelAlign: 'center',
-        top:
-          PADDING_TOP +
-          TITLE_HEIGHT +
-          SUBTITLE_HEIGHT * hasSubtitle +
-          TITLE_BOTTOM,
+        top: PADDING_TOP + TITLE_HEIGHT + SUBTITLE_HEIGHT * hasSubtitle + TITLE_BOTTOM,
         left: 'center',
         width: '60%',
         height: '75%',
diff --git a/src/components/Charts/helpers.ts b/src/components/Charts/helpers.ts
index bfaed7a86..eaa5e972c 100644
--- a/src/components/Charts/helpers.ts
+++ b/src/components/Charts/helpers.ts
@@ -40,15 +40,7 @@ function guessPrecision(number: number) {
   return Math.min(str.length - decimalIndex - 1, 2)
 }
 
-export type TimeGrain =
-  | 'second'
-  | 'minute'
-  | 'hour'
-  | 'day'
-  | 'week'
-  | 'month'
-  | 'quarter'
-  | 'year'
+export type TimeGrain = 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'quarter' | 'year'
 export function formatDate(date: string, format?: string, grain: TimeGrain = 'day') {
   if (!date) return ''
 
@@ -74,33 +66,32 @@ export function formatDate(date: string, format?: string, grain: TimeGrain = 'da
   return dayjs(date).format(format)
 }
 
-
 export function isObject(item: any) {
   return item && typeof item === 'object' && !Array.isArray(item)
 }
 
 export function mergeDeep(target: any, ...sources: any[]) {
-  if (!sources.length) return target;
-  const source = sources.shift();
+  if (!sources.length) return target
+  const source = sources.shift()
 
   if (!source || !isObject(target) || !isObject(source)) {
     // Skip the current source if it's not a proper object
-    return mergeDeep(target, ...sources);
+    return mergeDeep(target, ...sources)
   }
 
-  let output = Object.assign({}, target);
+  let output = Object.assign({}, target)
 
   Object.keys(source).forEach((key) => {
     if (isObject(source[key])) {
       if (!(key in output)) {
-        output[key] = source[key];
+        output[key] = source[key]
       } else {
-        output[key] = mergeDeep(output[key], source[key]);
+        output[key] = mergeDeep(output[key], source[key])
       }
     } else {
-      output[key] = source[key];
+      output[key] = source[key]
     }
-  });
+  })
 
-  return mergeDeep(output, ...sources);
+  return mergeDeep(output, ...sources)
 }
diff --git a/src/components/Charts/stories/Examples.vue b/src/components/Charts/stories/Examples.vue
index f31eea0ec..c493d82ff 100644
--- a/src/components/Charts/stories/Examples.vue
+++ b/src/components/Charts/stories/Examples.vue
@@ -1,10 +1,7 @@
 <script setup lang="ts">
 import { AxisChart, DonutChart, FunnelChart, NumberChart } from 'frappe-ui'
 
-import {
-  AxisChartConfig,
-  DonutChartConfig,
-} from 'frappe-ui/src/components/Charts/types'
+import { AxisChartConfig, DonutChartConfig } from 'frappe-ui/src/components/Charts/types'
 
 import Story from '@/components/Story.vue'
 
diff --git a/src/components/Checkbox/Checkbox.vue b/src/components/Checkbox/Checkbox.vue
index 6e276b817..57362be3c 100644
--- a/src/components/Checkbox/Checkbox.vue
+++ b/src/components/Checkbox/Checkbox.vue
@@ -15,10 +15,7 @@
       :disabled="disabled"
       :id="htmlId"
       :checked="Boolean(modelValue)"
-      @change="
-        (e) =>
-          $emit('update:modelValue', (e.target as HTMLInputElement).checked)
-      "
+      @change="(e) => $emit('update:modelValue', (e.target as HTMLInputElement).checked)"
       v-bind="attrs"
     />
     <label class="block" :class="labelClasses" v-if="label" :for="htmlId">
diff --git a/src/components/Checkbox/index.ts b/src/components/Checkbox/index.ts
index 4e7abd311..f2b20f33b 100644
--- a/src/components/Checkbox/index.ts
+++ b/src/components/Checkbox/index.ts
@@ -1,2 +1,2 @@
 export { default as Checkbox } from './Checkbox.vue'
-export type { CheckboxProps } from './types'
\ No newline at end of file
+export type { CheckboxProps } from './types'
diff --git a/src/components/Checkbox/stories/Examples.vue b/src/components/Checkbox/stories/Examples.vue
index 1271e6275..3fd5579d1 100644
--- a/src/components/Checkbox/stories/Examples.vue
+++ b/src/components/Checkbox/stories/Examples.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Checkbox } from "frappe-ui";
+import { Checkbox } from 'frappe-ui'
 </script>
 
 <template>
diff --git a/src/components/CircularProgressBar/CircularProgressBar.story.vue b/src/components/CircularProgressBar/CircularProgressBar.story.vue
index af33aa6f6..bbbb6825a 100644
--- a/src/components/CircularProgressBar/CircularProgressBar.story.vue
+++ b/src/components/CircularProgressBar/CircularProgressBar.story.vue
@@ -1,11 +1,11 @@
 <script setup>
-import { CircularProgressBar } from "frappe-ui";
-import Story from "@/components/Story.vue";
+import { CircularProgressBar } from 'frappe-ui'
+import Story from '@/components/Story.vue'
 
 // 'black' | 'red' | 'green' | 'blue' | 'orange'
 
-const themes = ["black", "red", "green", "blue", "orange"];
-const sizes = ["xs", "sm", "md", "lg", "xl"];
+const themes = ['black', 'red', 'green', 'blue', 'orange']
+const sizes = ['xs', 'sm', 'md', 'lg', 'xl']
 </script>
 
 <template>
@@ -15,51 +15,27 @@ const sizes = ["xs", "sm", "md", "lg", "xl"];
     </Story>
 
     <Story title="Solid Variant (Complete)">
-      <CircularProgressBar
-        :step="9"
-        :totalSteps="9"
-        variant="solid"
-        themeComplete="lightgreen"
-      />
+      <CircularProgressBar :step="9" :totalSteps="9" variant="solid" themeComplete="lightgreen" />
     </Story>
 
     <Story title="Outline Variant (Complete)">
-      <CircularProgressBar
-        :step="9"
-        :totalSteps="9"
-        variant="outline"
-        themeComplete="lightgreen"
-      />
+      <CircularProgressBar :step="9" :totalSteps="9" variant="outline" themeComplete="lightgreen" />
     </Story>
 
     <Story title="Custom Theme">
       <CircularProgressBar
         :step="2"
         :totalSteps="6"
-        :theme='{ primary: "#2376f5", secondary: "#ddd5d5" }'
+        :theme="{ primary: '#2376f5', secondary: '#ddd5d5' }"
       />
     </Story>
 
     <Story title="Themes" preview-css="flex gap-4" class="col-span-2">
-      <CircularProgressBar
-        v-for="theme in themes"
-        :step="3"
-        :totalSteps="4"
-        :theme="theme"
-      />
+      <CircularProgressBar v-for="theme in themes" :step="3" :totalSteps="4" :theme="theme" />
     </Story>
 
-    <Story
-      title="Sizes"
-      preview-css="flex gap-3 items-center"
-      class="col-span-2"
-    >
-      <CircularProgressBar
-        v-for="size in sizes"
-        :step="3"
-        :totalSteps="4"
-        :size="size"
-      />
+    <Story title="Sizes" preview-css="flex gap-3 items-center" class="col-span-2">
+      <CircularProgressBar v-for="size in sizes" :step="3" :totalSteps="4" :size="size" />
     </Story>
   </div>
 </template>
diff --git a/src/components/CircularProgressBar/index.ts b/src/components/CircularProgressBar/index.ts
index 020527ac3..2dc9ac7a7 100644
--- a/src/components/CircularProgressBar/index.ts
+++ b/src/components/CircularProgressBar/index.ts
@@ -1,2 +1,2 @@
 export { default as CircularProgressBar } from './CircularProgressBar.vue'
-export type { CircularProgressBarProps } from './types'
\ No newline at end of file
+export type { CircularProgressBarProps } from './types'
diff --git a/src/components/Combobox/Combobox.vue b/src/components/Combobox/Combobox.vue
index 447020a70..8b3b53785 100644
--- a/src/components/Combobox/Combobox.vue
+++ b/src/components/Combobox/Combobox.vue
@@ -1,13 +1,5 @@
 <script setup lang="ts">
-import {
-  computed,
-  type Component,
-  type VNode,
-  ref,
-  watch,
-  h,
-  FunctionalComponent,
-} from 'vue'
+import { computed, type Component, type VNode, ref, watch, h, FunctionalComponent } from 'vue'
 import {
   ComboboxAnchor,
   ComboboxContent,
@@ -54,7 +46,6 @@ const emit = defineEmits<{
   input: (value: string) => void
 }>()
 
-
 const searchTerm = ref(getDisplayValue(props.modelValue))
 const internalModelValue = ref(props.modelValue)
 const isOpen = ref(false)
@@ -160,32 +151,24 @@ const allOptionsFlat = computed(() => {
 
 function getDisplayValue(selectedValue: string | null | undefined): string {
   if (!selectedValue) return ''
-  const options = props.options.flatMap((opt) =>
-    isGroup(opt) ? opt.options : opt,
-  )
+  const options = props.options.flatMap((opt) => (isGroup(opt) ? opt.options : opt))
   const selectedOption = options.find((opt) => getKey(opt) === selectedValue)
   return selectedOption ? getLabel(selectedOption) : selectedValue || ''
 }
 
 const selectedOption = computed(() => {
   if (!internalModelValue.value) return null
-  return allOptionsFlat.value.find(
-    (opt) => getKey(opt) === internalModelValue.value,
-  )
+  return allOptionsFlat.value.find((opt) => getKey(opt) === internalModelValue.value)
 })
 
 const selectedOptionIcon = computed(() => {
   return selectedOption.value ? getIcon(selectedOption.value) : undefined
 })
 
-const RenderIcon: FunctionalComponent<{ icon?: string | Component }> = (
-  props,
-) => {
+const RenderIcon: FunctionalComponent<{ icon?: string | Component }> = (props) => {
   if (!props.icon) return null
   const iconContent =
-    typeof props.icon === 'string'
-      ? h('span', props.icon)
-      : h(props.icon, { class: 'w-4 h-4' })
+    typeof props.icon === 'string' ? h('span', props.icon) : h(props.icon, { class: 'w-4 h-4' })
 
   return h(
     'span',
@@ -313,7 +296,6 @@ defineSlots<{
   /** Custom slot for individual options, only used if the option has `slotName` */
   [slotName: string]: (props: { option: SimpleOption; searchTerm: string }) => any
 }>()
-
 </script>
 
 <template>
@@ -363,15 +345,10 @@ defineSlots<{
             class="max-h-60 overflow-auto pb-1.5"
             :class="{ 'px-1.5 pt-1.5': !isGroup(filteredOptions[0]) }"
           >
-            <ComboboxEmpty
-              class="text-ink-gray-5 text-base text-center py-1.5 px-2.5"
-            >
+            <ComboboxEmpty class="text-ink-gray-5 text-base text-center py-1.5 px-2.5">
               No results found for "{{ searchTerm }}"
             </ComboboxEmpty>
-            <template
-              v-for="(optionOrGroup, index) in filteredOptions"
-              :key="index"
-            >
+            <template v-for="(optionOrGroup, index) in filteredOptions" :key="index">
               <ComboboxGroup class="px-1.5" v-if="isGroup(optionOrGroup)">
                 <ComboboxLabel
                   class="px-2.5 pt-3 pb-1.5 text-sm font-medium text-ink-gray-5 sticky top-0 bg-surface-modal z-10"
@@ -427,10 +404,7 @@ defineSlots<{
                 />
                 <template v-else>
                   <span class="flex items-center gap-2 pr-6 flex-1">
-                    <RenderIcon
-                      v-if="getIcon(optionOrGroup)"
-                      :icon="getIcon(optionOrGroup)"
-                    />
+                    <RenderIcon v-if="getIcon(optionOrGroup)" :icon="getIcon(optionOrGroup)" />
                     {{ getLabel(optionOrGroup) }}
                   </span>
                   <ComboboxItemIndicator
diff --git a/src/components/Combobox/stories/Simple.vue b/src/components/Combobox/stories/Simple.vue
index c496a6765..106976056 100644
--- a/src/components/Combobox/stories/Simple.vue
+++ b/src/components/Combobox/stories/Simple.vue
@@ -8,12 +8,7 @@ const options = ['John Doe', 'Jane Doe', 'John Smith', 'Jane Smith']
 </script>
 
 <template>
-  <Combobox
-    v-model="value"
-    :options="options"
-    placeholder="Select an option"
-    show-cancel
-  />
+  <Combobox v-model="value" :options="options" placeholder="Select an option" show-cancel />
 
   <div class="text-sm text-gray-600">Selected: {{ value || 'None' }}</div>
 </template>
diff --git a/src/components/CommandPalette/CommandPalette.vue b/src/components/CommandPalette/CommandPalette.vue
index 0257062bc..4e39b0a55 100644
--- a/src/components/CommandPalette/CommandPalette.vue
+++ b/src/components/CommandPalette/CommandPalette.vue
@@ -29,10 +29,7 @@
                 v-for="(group, index) in groups"
                 :key="group.title"
               >
-                <div
-                  class="mb-2.5 px-4.5 text-base text-ink-gray-5"
-                  v-if="!group.hideTitle"
-                >
+                <div class="mb-2.5 px-4.5 text-base text-ink-gray-5" v-if="!group.hideTitle">
                   {{ group.title }}
                 </div>
                 <ComboboxOption
@@ -43,11 +40,7 @@
                   class="px-2.5"
                   :disabled="item.disabled"
                 >
-                  <component
-                    :is="group.component"
-                    :item="item"
-                    :active="active"
-                  />
+                  <component :is="group.component" :item="item" :active="active" />
                 </ComboboxOption>
               </div>
             </ComboboxOptions>
@@ -59,12 +52,7 @@
 </template>
 
 <script setup>
-import {
-  Combobox,
-  ComboboxInput,
-  ComboboxOption,
-  ComboboxOptions,
-} from '@headlessui/vue'
+import { Combobox, ComboboxInput, ComboboxOption, ComboboxOptions } from '@headlessui/vue'
 import { computed, onBeforeUnmount, onMounted } from 'vue'
 
 const emit = defineEmits(['update:show', 'update:searchQuery', 'select'])
@@ -95,11 +83,7 @@ function keydownWatcher(e) {
     e.preventDefault()
   }
 
-  if (
-    e.key === 'k' &&
-    (e.ctrlKey || e.metaKey) &&
-    !e.target.classList.contains('ProseMirror')
-  ) {
+  if (e.key === 'k' && (e.ctrlKey || e.metaKey) && !e.target.classList.contains('ProseMirror')) {
     show.value = true
     e.preventDefault()
   }
diff --git a/src/components/CommandPalette/CommandPaletteItem.vue b/src/components/CommandPalette/CommandPaletteItem.vue
index 76d6c382f..ad5c392fa 100644
--- a/src/components/CommandPalette/CommandPaletteItem.vue
+++ b/src/components/CommandPalette/CommandPaletteItem.vue
@@ -10,18 +10,11 @@ defineProps({
     class="flex w-full min-w-0 items-center rounded px-2 py-2 text-base font-medium text-ink-gray-8"
     :class="{ 'bg-surface-gray-3': active }"
   >
-    <component
-      :is="item.icon"
-      v-if="item.icon"
-      class="mr-3 h-4 w-4 text-ink-gray-7"
-    />
+    <component :is="item.icon" v-if="item.icon" class="mr-3 h-4 w-4 text-ink-gray-7" />
     <span class="overflow-hidden text-ellipsis whitespace-nowrap">
       {{ item.title }}
     </span>
-    <span
-      v-if="item.description"
-      class="ml-auto whitespace-nowrap pl-2 text-ink-gray-5"
-    >
+    <span v-if="item.description" class="ml-auto whitespace-nowrap pl-2 text-ink-gray-5">
       {{ item.description }}
     </span>
   </div>
diff --git a/src/components/ConfirmDialog.vue b/src/components/ConfirmDialog.vue
index b28560303..0dd0c8386 100644
--- a/src/components/ConfirmDialog.vue
+++ b/src/components/ConfirmDialog.vue
@@ -2,11 +2,7 @@
   <Dialog v-model="showDialog" :options="{ title }" @close="closeDialog">
     <template #body-content>
       <div class="space-y-4">
-        <p
-          class="text-p-base text-ink-gray-6"
-          v-if="message"
-          v-html="message"
-        />
+        <p class="text-p-base text-ink-gray-6" v-if="message" v-html="message" />
       </div>
     </template>
     <template #actions>
diff --git a/src/components/DatePicker/DatePicker.vue b/src/components/DatePicker/DatePicker.vue
index de02590c1..14570c110 100644
--- a/src/components/DatePicker/DatePicker.vue
+++ b/src/components/DatePicker/DatePicker.vue
@@ -1,15 +1,7 @@
 <template>
-  <Popover
-    class="inline-block"
-    :placement="placement"
-    @open="initFromValue"
-    @close="handleClose"
-  >
+  <Popover class="inline-block" :placement="placement" @open="initFromValue" @close="handleClose">
     <template #target="{ togglePopover, isOpen }">
-      <slot
-        name="target"
-        v-bind="{ togglePopover, isOpen, displayLabel, inputValue }"
-      >
+      <slot name="target" v-bind="{ togglePopover, isOpen, displayLabel, inputValue }">
         <TextInput
           v-model="inputValue"
           type="text"
@@ -26,16 +18,10 @@
           @keydown.enter.prevent="onEnter(togglePopover)"
         >
           <template v-if="$slots.prefix" #prefix>
-            <slot
-              name="prefix"
-              v-bind="{ togglePopover, isOpen, displayLabel, inputValue }"
-            />
+            <slot name="prefix" v-bind="{ togglePopover, isOpen, displayLabel, inputValue }" />
           </template>
           <template #suffix>
-            <slot
-              name="suffix"
-              v-bind="{ togglePopover, isOpen, displayLabel, inputValue }"
-            >
+            <slot name="suffix" v-bind="{ togglePopover, isOpen, displayLabel, inputValue }">
               <FeatherIcon
                 name="chevron-down"
                 class="h-4 w-4 cursor-pointer"
@@ -58,21 +44,12 @@
             class="text-sm font-medium text-ink-gray-7"
             @click="cycleView"
           >
-            <span v-if="view === 'date'">
-              {{ months[currentMonth] }} {{ currentYear }}
-            </span>
+            <span v-if="view === 'date'"> {{ months[currentMonth] }} {{ currentYear }} </span>
             <span v-else-if="view === 'month'">{{ currentYear }}</span>
-            <span v-else>
-              {{ yearRangeStart }} - {{ yearRangeStart + 11 }}
-            </span>
+            <span v-else> {{ yearRangeStart }} - {{ yearRangeStart + 11 }} </span>
           </Button>
           <div class="flex items-center">
-            <Button
-              variant="ghost"
-              icon="chevron-left"
-              class="size-7"
-              @click="prev"
-            />
+            <Button variant="ghost" icon="chevron-left" class="size-7" @click="prev" />
             <Button
               v-if="!clearable"
               variant="ghost"
@@ -80,19 +57,12 @@
               :label="'Today'"
               @click="() => handleTodayClick(togglePopover)"
             />
-            <Button
-              variant="ghost"
-              icon="chevron-right"
-              class="size-7"
-              @click="next"
-            />
+            <Button variant="ghost" icon="chevron-right" class="size-7" @click="next" />
           </div>
         </div>
         <div class="p-2">
           <div v-if="view === 'date'" role="grid" aria-label="Calendar dates">
-            <div
-              class="flex items-center text-xs font-medium uppercase text-ink-gray-4 mb-1"
-            >
+            <div class="flex items-center text-xs font-medium uppercase text-ink-gray-4 mb-1">
               <div
                 v-for="d in ['S', 'M', 'T', 'W', 'T', 'F', 'S']"
                 :key="d"
@@ -117,8 +87,7 @@
                 role="gridcell"
                 :aria-selected="dateObj.isSelected ? 'true' : 'false'"
                 :aria-label="
-                  dateObj.date.format('YYYY-MM-DD') +
-                  (dateObj.isToday ? ' (Today)' : '')
+                  dateObj.date.format('YYYY-MM-DD') + (dateObj.isToday ? ' (Today)' : '')
                 "
                 @click="handleDateCellClick(dateObj.date, togglePopover)"
               >
@@ -138,8 +107,7 @@
               :key="m"
               class="py-2 text-sm rounded cursor-pointer text-center hover:bg-surface-gray-2 focus:outline-none focus:ring-2 focus:ring-brand-6"
               :class="{
-                'bg-surface-gray-6 text-ink-white hover:bg-surface-gray-6':
-                  i === currentMonth,
+                'bg-surface-gray-6 text-ink-white hover:bg-surface-gray-6': i === currentMonth,
               }"
               :aria-selected="i === currentMonth ? 'true' : 'false'"
               @click="selectMonth(i)"
@@ -147,20 +115,14 @@
               {{ m.slice(0, 3) }}
             </button>
           </div>
-          <div
-            v-else
-            class="grid grid-cols-3 gap-1"
-            role="grid"
-            aria-label="Select year"
-          >
+          <div v-else class="grid grid-cols-3 gap-1" role="grid" aria-label="Select year">
             <button
               v-for="y in yearRange"
               type="button"
               :key="y"
               class="py-2 text-sm rounded cursor-pointer text-center hover:bg-surface-gray-2 focus:outline-none focus:ring-2 focus:ring-brand-6"
               :class="{
-                'bg-surface-gray-6 text-ink-white hover:bg-surface-gray-6':
-                  y === currentYear,
+                'bg-surface-gray-6 text-ink-white hover:bg-surface-gray-6': y === currentYear,
               }"
               :aria-selected="y === currentYear ? 'true' : 'false'"
               @click="selectYear(y)"
@@ -169,10 +131,7 @@
             </button>
           </div>
         </div>
-        <div
-          v-if="props.clearable"
-          class="flex items-center justify-between gap-1 p-2 border-t"
-        >
+        <div v-if="props.clearable" class="flex items-center justify-between gap-1 p-2 border-t">
           <div class="flex gap-1">
             <Button
               variant="outline"
@@ -377,9 +336,7 @@ function selectDate(date: string | Date | Dayjs): void {
 
   // Reflect new value in input immediately if not typing
   if (!isTyping.value) {
-    inputValue.value = props.format
-      ? formatter(selected.value, props.format)
-      : selected.value
+    inputValue.value = props.format ? formatter(selected.value, props.format) : selected.value
   }
   view.value = 'date'
 }
@@ -393,10 +350,7 @@ function selectYear(y: number): void {
 }
 function prev(): void {
   if (view.value === 'date') {
-    const m = monthStart(currentYear.value, currentMonth.value).subtract(
-      1,
-      'month',
-    )
+    const m = monthStart(currentYear.value, currentMonth.value).subtract(1, 'month')
     currentYear.value = m.year()
     currentMonth.value = m.month()
   } else if (view.value === 'month') {
@@ -416,10 +370,7 @@ function next(): void {
     currentYear.value += 12
   }
 }
-function handleDateCellClick(
-  date: string | Date | Dayjs,
-  togglePopover: () => void,
-) {
+function handleDateCellClick(date: string | Date | Dayjs, togglePopover: () => void) {
   selectDate(date)
   if (autoClose.value) togglePopover()
   isTyping.value = false
@@ -456,9 +407,7 @@ function handleClose() {
   }
 }
 
-const yearRangeStart = computed(
-  () => currentYear.value - (currentYear.value % 12),
-)
+const yearRangeStart = computed(() => currentYear.value - (currentYear.value % 12))
 const yearRange = computed<number[]>(() =>
   Array.from({ length: 12 }, (_, i) => yearRangeStart.value + i),
 )
diff --git a/src/components/DatePicker/DateRangePicker.vue b/src/components/DatePicker/DateRangePicker.vue
index 193fe9bfd..2fb6dbb84 100644
--- a/src/components/DatePicker/DateRangePicker.vue
+++ b/src/components/DatePicker/DateRangePicker.vue
@@ -7,10 +7,7 @@
     ref="popoverRef"
   >
     <template #target="{ togglePopover, isOpen }">
-      <slot
-        name="target"
-        v-bind="{ togglePopover, isOpen, displayLabel, inputValue }"
-      >
+      <slot name="target" v-bind="{ togglePopover, isOpen, displayLabel, inputValue }">
         <TextInput
           v-model="inputValue"
           type="text"
@@ -27,16 +24,10 @@
           @keydown.enter.prevent="onEnter(togglePopover)"
         >
           <template v-if="$slots.prefix" #prefix>
-            <slot
-              name="prefix"
-              v-bind="{ togglePopover, isOpen, displayLabel, inputValue }"
-            />
+            <slot name="prefix" v-bind="{ togglePopover, isOpen, displayLabel, inputValue }" />
           </template>
           <template #suffix>
-            <slot
-              name="suffix"
-              v-bind="{ togglePopover, isOpen, displayLabel, inputValue }"
-            >
+            <slot name="suffix" v-bind="{ togglePopover, isOpen, displayLabel, inputValue }">
               <FeatherIcon
                 name="chevron-down"
                 class="h-4 w-4 cursor-pointer"
@@ -60,40 +51,26 @@
             class="text-sm font-medium text-ink-gray-7"
             @click="cycleView"
           >
-            <span v-if="view === 'date'">
-              {{ months[currentMonth] }} {{ currentYear }}
-            </span>
+            <span v-if="view === 'date'"> {{ months[currentMonth] }} {{ currentYear }} </span>
             <span v-else-if="view === 'month'">{{ currentYear }}</span>
             <span v-else>{{ yearRangeStart }} - {{ yearRangeStart + 11 }}</span>
           </Button>
           <div class="flex items-center">
-            <Button
-              variant="ghost"
-              icon="chevron-left"
-              class="size-7"
-              @click="prev"
-            />
+            <Button variant="ghost" icon="chevron-left" class="size-7" @click="prev" />
             <Button
               variant="ghost"
               class="text-xs"
               :label="'Today'"
               @click="() => handleTodayClick(togglePopover)"
             />
-            <Button
-              variant="ghost"
-              icon="chevron-right"
-              class="size-7"
-              @click="next"
-            />
+            <Button variant="ghost" icon="chevron-right" class="size-7" @click="next" />
           </div>
         </div>
         <!-- Content -->
         <div class="p-2">
           <!-- Date Grid -->
           <div v-if="view === 'date'">
-            <div
-              class="flex items-center text-xs font-medium uppercase text-ink-gray-4 mb-1"
-            >
+            <div class="flex items-center text-xs font-medium uppercase text-ink-gray-4 mb-1">
               <div
                 v-for="d in ['S', 'M', 'T', 'W', 'T', 'F', 'S']"
                 :key="d"
@@ -116,23 +93,14 @@
                     : dateObj.inRange
                       ? 'bg-surface-gray-3 rounded-none'
                       : 'hover:bg-surface-gray-2',
-                  dateObj.isRangeStart && !dateObj.isRangeEnd
-                    ? 'rounded-l-md rounded-r-none'
-                    : '',
-                  dateObj.isRangeEnd && !dateObj.isRangeStart
-                    ? 'rounded-r-md rounded-l-none'
-                    : '',
-                  dateObj.isRangeStart && dateObj.isRangeEnd
-                    ? 'rounded-md'
-                    : '',
+                  dateObj.isRangeStart && !dateObj.isRangeEnd ? 'rounded-l-md rounded-r-none' : '',
+                  dateObj.isRangeEnd && !dateObj.isRangeStart ? 'rounded-r-md rounded-l-none' : '',
+                  dateObj.isRangeStart && dateObj.isRangeEnd ? 'rounded-md' : '',
                 ]"
                 role="gridcell"
-                :aria-selected="
-                  dateObj.isRangeStart || dateObj.isRangeEnd ? 'true' : 'false'
-                "
+                :aria-selected="dateObj.isRangeStart || dateObj.isRangeEnd ? 'true' : 'false'"
                 :aria-label="
-                  dateObj.date.format('YYYY-MM-DD') +
-                  (dateObj.isToday ? ' (Today)' : '')
+                  dateObj.date.format('YYYY-MM-DD') + (dateObj.isToday ? ' (Today)' : '')
                 "
                 @click="handleDateCellClick(dateObj.date, togglePopover)"
               >
@@ -153,8 +121,7 @@
               :key="m"
               class="py-2 text-sm rounded cursor-pointer text-center hover:bg-surface-gray-2 focus:outline-none focus:ring-2 focus:ring-brand-6"
               :class="{
-                'bg-surface-gray-6 text-ink-white hover:bg-surface-gray-6':
-                  i === currentMonth,
+                'bg-surface-gray-6 text-ink-white hover:bg-surface-gray-6': i === currentMonth,
               }"
               :aria-selected="i === currentMonth ? 'true' : 'false'"
               @click="selectMonth(i)"
@@ -163,20 +130,14 @@
             </button>
           </div>
           <!-- Year Grid -->
-          <div
-            v-else
-            class="grid grid-cols-3 gap-1"
-            role="grid"
-            aria-label="Select year"
-          >
+          <div v-else class="grid grid-cols-3 gap-1" role="grid" aria-label="Select year">
             <button
               v-for="y in yearRange"
               type="button"
               :key="y"
               class="py-2 text-sm rounded cursor-pointer text-center hover:bg-surface-gray-2 focus:outline-none focus:ring-2 focus:ring-brand-6"
               :class="{
-                'bg-surface-gray-6 text-ink-white hover:bg-surface-gray-6':
-                  y === currentYear,
+                'bg-surface-gray-6 text-ink-white hover:bg-surface-gray-6': y === currentYear,
               }"
               :aria-selected="y === currentYear ? 'true' : 'false'"
               @click="selectYear(y)"
@@ -185,10 +146,7 @@
             </button>
           </div>
         </div>
-        <div
-          v-if="fromDate && toDate"
-          class="flex justify-end gap-1 p-2 border-t"
-        >
+        <div v-if="fromDate && toDate" class="flex justify-end gap-1 p-2 border-t">
           <Button
             size="sm"
             variant="outline"
@@ -211,11 +169,7 @@ import FeatherIcon from '../FeatherIcon.vue'
 import { dayjs, dayjsLocal } from '../../utils/dayjs'
 import { months, monthStart, generateWeeks, getDateValue } from './utils'
 import type { Dayjs } from 'dayjs'
-import type {
-  DatePickerEmits,
-  DateRangePickerProps,
-  DatePickerViewMode as ViewMode,
-} from './types'
+import type { DatePickerEmits, DateRangePickerProps, DatePickerViewMode as ViewMode } from './types'
 
 const props = withDefaults(defineProps<DateRangePickerProps>(), {
   value: '',
@@ -255,9 +209,7 @@ function formatOne(dateStr: string): string {
   if (!d.isValid()) return dateStr
   return props.format ? d.format(props.format) : dateStr
 }
-const displayLabel = computed<string>(() =>
-  formatDisplay(fromDate.value, toDate.value),
-)
+const displayLabel = computed<string>(() => formatDisplay(fromDate.value, toDate.value))
 
 function coerceToDayjs(val?: string | null): Dayjs | null {
   if (!val) return null
@@ -401,10 +353,7 @@ const weeks = computed<RangeDateObj[][]>(() => {
       const isRangeStart = f.isValid() && d.date.isSame(f, 'day')
       const isRangeEnd = t.isValid() && d.date.isSame(t, 'day')
       const inRange =
-        f.isValid() &&
-        t.isValid() &&
-        d.date.isAfter(f, 'day') &&
-        d.date.isBefore(t, 'day')
+        f.isValid() && t.isValid() && d.date.isAfter(f, 'day') && d.date.isBefore(t, 'day')
       return {
         date: d.date,
         key: d.key,
@@ -442,10 +391,7 @@ function ensureOrder() {
   }
 }
 
-function handleDateCellClick(
-  date: string | Date | Dayjs,
-  togglePopover: () => void,
-) {
+function handleDateCellClick(date: string | Date | Dayjs, togglePopover: () => void) {
   selectDate(date)
   if (autoClose.value && fromDate.value && toDate.value) {
     emitIfComplete()
@@ -500,10 +446,7 @@ function selectYear(y: number): void {
 }
 function prev(): void {
   if (view.value === 'date') {
-    const m = monthStart(currentYear.value, currentMonth.value).subtract(
-      1,
-      'month',
-    )
+    const m = monthStart(currentYear.value, currentMonth.value).subtract(1, 'month')
     currentYear.value = m.year()
     currentMonth.value = m.month()
   } else if (view.value === 'month') {
@@ -536,9 +479,7 @@ function handleClose() {
   }
 }
 
-const yearRangeStart = computed(
-  () => currentYear.value - (currentYear.value % 12),
-)
+const yearRangeStart = computed(() => currentYear.value - (currentYear.value % 12))
 const yearRange = computed<number[]>(() =>
   Array.from({ length: 12 }, (_, i) => yearRangeStart.value + i),
 )
diff --git a/src/components/DatePicker/DateTimePicker.vue b/src/components/DatePicker/DateTimePicker.vue
index 1bc602676..b44293854 100644
--- a/src/components/DatePicker/DateTimePicker.vue
+++ b/src/components/DatePicker/DateTimePicker.vue
@@ -1,15 +1,7 @@
 <template>
-  <Popover
-    class="inline-block"
-    :placement="placement"
-    @open="initFromValue"
-    @close="handleClose"
-  >
+  <Popover class="inline-block" :placement="placement" @open="initFromValue" @close="handleClose">
     <template #target="{ togglePopover, isOpen }">
-      <slot
-        name="target"
-        v-bind="{ togglePopover, isOpen, displayLabel, inputValue }"
-      >
+      <slot name="target" v-bind="{ togglePopover, isOpen, displayLabel, inputValue }">
         <TextInput
           v-model="inputValue"
           type="text"
@@ -26,16 +18,10 @@
           @keydown.enter.prevent="onEnter(togglePopover)"
         >
           <template v-if="$slots.prefix" #prefix>
-            <slot
-              name="prefix"
-              v-bind="{ togglePopover, isOpen, displayLabel, inputValue }"
-            />
+            <slot name="prefix" v-bind="{ togglePopover, isOpen, displayLabel, inputValue }" />
           </template>
           <template #suffix>
-            <slot
-              name="suffix"
-              v-bind="{ togglePopover, isOpen, displayLabel, inputValue }"
-            >
+            <slot name="suffix" v-bind="{ togglePopover, isOpen, displayLabel, inputValue }">
               <FeatherIcon
                 name="chevron-down"
                 class="h-4 w-4 cursor-pointer"
@@ -60,19 +46,12 @@
             class="text-sm font-medium text-ink-gray-7"
             @click="cycleView"
           >
-            <span v-if="view === 'date'"
-              >{{ months[currentMonth] }} {{ currentYear }}</span
-            >
+            <span v-if="view === 'date'">{{ months[currentMonth] }} {{ currentYear }}</span>
             <span v-else-if="view === 'month'">{{ currentYear }}</span>
             <span v-else>{{ yearRangeStart }} - {{ yearRangeStart + 11 }}</span>
           </Button>
           <div class="flex items-center">
-            <Button
-              variant="ghost"
-              icon="chevron-left"
-              class="size-7"
-              @click="prev"
-            />
+            <Button variant="ghost" icon="chevron-left" class="size-7" @click="prev" />
             <Button
               v-if="!clearable"
               variant="ghost"
@@ -80,21 +59,14 @@
               :label="'Now'"
               @click="() => handleNowClick(togglePopover)"
             />
-            <Button
-              variant="ghost"
-              icon="chevron-right"
-              class="size-7"
-              @click="next"
-            />
+            <Button variant="ghost" icon="chevron-right" class="size-7" @click="next" />
           </div>
         </div>
 
         <!-- Calendar -->
         <div class="p-2">
           <div v-if="view === 'date'" role="grid" aria-label="Calendar dates">
-            <div
-              class="flex items-center text-xs font-medium uppercase text-ink-gray-4 mb-1"
-            >
+            <div class="flex items-center text-xs font-medium uppercase text-ink-gray-4 mb-1">
               <div
                 v-for="d in ['S', 'M', 'T', 'W', 'T', 'F', 'S']"
                 :key="d"
@@ -121,14 +93,10 @@
                 role="gridcell"
                 :aria-selected="dateObj.isSelected ? 'true' : 'false'"
                 :aria-label="
-                  dateObj.date.format('YYYY-MM-DD') +
-                  (dateObj.isToday ? ' (Today)' : '')
+                  dateObj.date.format('YYYY-MM-DD') + (dateObj.isToday ? ' (Today)' : '')
                 "
                 :disabled="dateObj.disabled"
-                @click="
-                  !dateObj.disabled &&
-                  handleDateCellClick(dateObj.date, togglePopover)
-                "
+                @click="!dateObj.disabled && handleDateCellClick(dateObj.date, togglePopover)"
               >
                 {{ dateObj.date.date() }}
               </button>
@@ -146,8 +114,7 @@
               :key="m"
               class="py-2 text-sm rounded cursor-pointer text-center hover:bg-surface-gray-2 focus:outline-none focus:ring-2 focus:ring-brand-6"
               :class="{
-                'bg-surface-gray-6 text-ink-white hover:bg-surface-gray-6':
-                  i === currentMonth,
+                'bg-surface-gray-6 text-ink-white hover:bg-surface-gray-6': i === currentMonth,
               }"
               :aria-selected="i === currentMonth ? 'true' : 'false'"
               @click="selectMonth(i)"
@@ -155,20 +122,14 @@
               {{ m.slice(0, 3) }}
             </button>
           </div>
-          <div
-            v-else
-            class="grid grid-cols-3 gap-1"
-            role="grid"
-            aria-label="Select year"
-          >
+          <div v-else class="grid grid-cols-3 gap-1" role="grid" aria-label="Select year">
             <button
               v-for="y in yearRange"
               type="button"
               :key="y"
               class="py-2 text-sm rounded cursor-pointer text-center hover:bg-surface-gray-2 focus:outline-none focus:ring-2 focus:ring-brand-6"
               :class="{
-                'bg-surface-gray-6 text-ink-white hover:bg-surface-gray-6':
-                  y === currentYear,
+                'bg-surface-gray-6 text-ink-white hover:bg-surface-gray-6': y === currentYear,
               }"
               :aria-selected="y === currentYear ? 'true' : 'false'"
               @click="selectYear(y)"
@@ -192,21 +153,10 @@
         </div>
 
         <!-- Footer Actions (clearable variant) -->
-        <div
-          v-if="props.clearable"
-          class="flex items-center justify-between gap-1 p-2 border-t"
-        >
+        <div v-if="props.clearable" class="flex items-center justify-between gap-1 p-2 border-t">
           <div class="flex gap-1">
-            <Button
-              variant="outline"
-              :label="'Now'"
-              @click="() => handleNowClick(togglePopover)"
-            />
-            <Button
-              variant="outline"
-              :label="'Tomorrow'"
-              @click="() => handleTomorrowClick()"
-            />
+            <Button variant="outline" :label="'Now'" @click="() => handleNowClick(togglePopover)" />
+            <Button variant="outline" :label="'Tomorrow'" @click="() => handleTomorrowClick()" />
           </div>
           <Button
             v-if="selectedDate"
@@ -232,11 +182,7 @@ import TimePicker from '../TimePicker/TimePicker.vue'
 import { dayjs, dayjsLocal, dayjsSystem } from '../../utils/dayjs'
 import { months, monthStart, generateWeeks, getDateValue } from './utils'
 import type { Dayjs } from 'dayjs'
-import type {
-  DatePickerProps,
-  DatePickerEmits,
-  DatePickerViewMode as ViewMode,
-} from './types'
+import type { DatePickerProps, DatePickerEmits, DatePickerViewMode as ViewMode } from './types'
 
 interface ExtraDateTimeProps {
   minDateTime?: string
@@ -244,22 +190,19 @@ interface ExtraDateTimeProps {
   allowCustomTime?: boolean
 }
 
-const props = withDefaults(
-  defineProps<DatePickerProps & ExtraDateTimeProps>(),
-  {
-    value: '',
-    modelValue: '',
-    placement: 'bottom-start',
-    variant: 'subtle',
-    placeholder: 'Select date & time',
-    readonly: false,
-    allowCustom: true,
-    autoClose: true,
-    disabled: false,
-    clearable: true,
-    allowCustomTime: true,
-  },
-)
+const props = withDefaults(defineProps<DatePickerProps & ExtraDateTimeProps>(), {
+  value: '',
+  modelValue: '',
+  placement: 'bottom-start',
+  variant: 'subtle',
+  placeholder: 'Select date & time',
+  readonly: false,
+  allowCustom: true,
+  autoClose: true,
+  disabled: false,
+  clearable: true,
+  allowCustomTime: true,
+})
 const emit = defineEmits<DatePickerEmits>()
 
 const { autoClose } = toRefs(props)
@@ -424,26 +367,18 @@ function dateDisabled(d: Dayjs): boolean {
 }
 
 const weeks = computed<any[][]>(() => {
-  const base = generateWeeks(
-    currentYear.value,
-    currentMonth.value,
-    selectedDate.value,
-  )
-  return base.map((week) =>
-    week.map((obj) => ({ ...obj, disabled: dateDisabled(obj.date) })),
-  )
+  const base = generateWeeks(currentYear.value, currentMonth.value, selectedDate.value)
+  return base.map((week) => week.map((obj) => ({ ...obj, disabled: dateDisabled(obj.date) })))
 })
 
 const computedMinTime = computed<string>(() => {
   if (!minDT.value || !selectedDate.value) return ''
-  if (dayjs(selectedDate.value).isSame(minDT.value, 'day'))
-    return minDT.value.format('HH:mm:ss')
+  if (dayjs(selectedDate.value).isSame(minDT.value, 'day')) return minDT.value.format('HH:mm:ss')
   return ''
 })
 const computedMaxTime = computed<string>(() => {
   if (!maxDT.value || !selectedDate.value) return ''
-  if (dayjs(selectedDate.value).isSame(maxDT.value, 'day'))
-    return maxDT.value.format('HH:mm:ss')
+  if (dayjs(selectedDate.value).isSame(maxDT.value, 'day')) return maxDT.value.format('HH:mm:ss')
   return ''
 })
 
@@ -474,10 +409,7 @@ function selectYear(y: number): void {
 }
 function prev(): void {
   if (view.value === 'date') {
-    const m = monthStart(currentYear.value, currentMonth.value).subtract(
-      1,
-      'month',
-    )
+    const m = monthStart(currentYear.value, currentMonth.value).subtract(1, 'month')
     currentYear.value = m.year()
     currentMonth.value = m.month()
   } else if (view.value === 'month') currentYear.value -= 1
@@ -491,10 +423,7 @@ function next(): void {
   } else if (view.value === 'month') currentYear.value += 1
   else currentYear.value += 12
 }
-function handleDateCellClick(
-  date: string | Date | Dayjs,
-  togglePopover: () => void,
-) {
+function handleDateCellClick(date: string | Date | Dayjs, togglePopover: () => void) {
   selectDate(date)
   emitChange(true, togglePopover)
   isTyping.value = false
@@ -561,9 +490,7 @@ function handleClose() {
   }
 }
 
-const yearRangeStart = computed(
-  () => currentYear.value - (currentYear.value % 12),
-)
+const yearRangeStart = computed(() => currentYear.value - (currentYear.value % 12))
 const yearRange = computed<number[]>(() =>
   Array.from({ length: 12 }, (_, i) => yearRangeStart.value + i),
 )
diff --git a/src/components/DatePicker/stories/DateTime.vue b/src/components/DatePicker/stories/DateTime.vue
index 6b0cc9af3..ee12dae1b 100644
--- a/src/components/DatePicker/stories/DateTime.vue
+++ b/src/components/DatePicker/stories/DateTime.vue
@@ -6,11 +6,7 @@ const value = ref('')
 </script>
 
 <template>
-  <DateTimePicker
-    v-model="value"
-    placeholder="Select Date & time"
-    label="Label"
-  />
+  <DateTimePicker v-model="value" placeholder="Select Date & time" label="Label" />
 
   <div class="mt-2 text-sm text-gray-600">Selected: {{ value || 'None' }}</div>
 </template>
diff --git a/src/components/DatePicker/useDatePicker.ts b/src/components/DatePicker/useDatePicker.ts
index 18741ad6b..8af22b093 100644
--- a/src/components/DatePicker/useDatePicker.ts
+++ b/src/components/DatePicker/useDatePicker.ts
@@ -24,12 +24,7 @@ export function useDatePicker() {
     const daysInMonth = getDaysInMonth(monthIndex, year)
     const datesInMonth = getDatesAfter(firstDayOfMonth, daysInMonth - 1)
 
-    let dates = [
-      ...leftPadding,
-      firstDayOfMonth,
-      ...datesInMonth,
-      ...rightPadding,
-    ]
+    let dates = [...leftPadding, firstDayOfMonth, ...datesInMonth, ...rightPadding]
 
     if (dates.length < 42) {
       const lastDate = dates.at(-1)
diff --git a/src/components/DatePicker/utils.ts b/src/components/DatePicker/utils.ts
index dd146876b..f607d7376 100644
--- a/src/components/DatePicker/utils.ts
+++ b/src/components/DatePicker/utils.ts
@@ -24,11 +24,7 @@ export function monthStart(year: number, monthIndex: number): Dayjs {
 }
 
 // Build weeks grid for the calendar
-export function generateWeeks(
-  year: number,
-  monthIndex: number,
-  selected: string,
-): DateObj[][] {
+export function generateWeeks(year: number, monthIndex: number, selected: string): DateObj[][] {
   const start = monthStart(year, monthIndex).startOf('week')
   const end = monthStart(year, monthIndex).endOf('month').endOf('week')
   const days: DateObj[] = []
@@ -76,11 +72,7 @@ function getDatesAfter(date: Date, count: number) {
   const dates: Date[] = []
 
   while (count) {
-    date = getDate(
-      date.getFullYear(),
-      date.getMonth(),
-      date.getDate() + incrementer,
-    )
+    date = getDate(date.getFullYear(), date.getMonth(), date.getDate() + incrementer)
     dates.push(date)
     count--
   }
diff --git a/src/components/Dialog/Dialog.vue b/src/components/Dialog/Dialog.vue
index eb4964363..8fceaac28 100644
--- a/src/components/Dialog/Dialog.vue
+++ b/src/components/Dialog/Dialog.vue
@@ -57,9 +57,7 @@
                             </div>
                             <DialogTitle as="header">
                               <slot name="body-title">
-                                <h3
-                                  class="text-2xl font-semibold leading-6 text-ink-gray-9"
-                                >
+                                <h3 class="text-2xl font-semibold leading-6 text-ink-gray-9">
                                   {{ options.title || 'Untitled' }}
                                 </h3>
                               </slot>
@@ -86,10 +84,7 @@
                   </div>
                 </div>
               </slot>
-              <div
-                class="px-4 pb-7 pt-4 sm:px-6"
-                v-if="actions.length || $slots.actions"
-              >
+              <div class="px-4 pb-7 pt-4 sm:px-6" v-if="actions.length || $slots.actions">
                 <slot name="actions" v-bind="{ close }">
                   <div class="space-y-2">
                     <Button
@@ -126,12 +121,7 @@ import { computed, reactive } from 'vue'
 import { Button } from '../Button'
 import FeatherIcon from '../FeatherIcon.vue'
 import LucideX from '~icons/lucide/x'
-import type {
-  DialogProps,
-  DialogIcon,
-  DialogAction,
-  DialogActionContext,
-} from './types'
+import type { DialogProps, DialogIcon, DialogAction, DialogActionContext } from './types'
 
 // Type for dialog action with reactive loading state
 type ReactiveDialogAction = DialogAction & {
@@ -170,8 +160,7 @@ const actions = computed((): ReactiveDialogAction[] => {
               if (action.onClick) {
                 // deprecated: uncomment this when we remove the backwards compatibility
                 // let context: DialogActionContext = { close }
-                type BackwardsCompatibleDialogActionContext = (() => void) &
-                  DialogActionContext
+                type BackwardsCompatibleDialogActionContext = (() => void) & DialogActionContext
 
                 let backwardsCompatibleContext = (() => {
                   console.warn(
diff --git a/src/components/Dialog/stories/Confirm.vue b/src/components/Dialog/stories/Confirm.vue
index 07f3cb5f8..ca6a753b4 100644
--- a/src/components/Dialog/stories/Confirm.vue
+++ b/src/components/Dialog/stories/Confirm.vue
@@ -10,16 +10,12 @@ const open = ref(false)
 
   <Dialog v-model="open">
     <template #body-title>
-      <h3 class="text-2xl font-semibold text-blue-600">
-        Custom Title with Styling
-      </h3>
+      <h3 class="text-2xl font-semibold text-blue-600">Custom Title with Styling</h3>
     </template>
 
     <template #body-content>
       <div class="space-y-4">
-        <p class="text-gray-700">
-          This dialog uses custom slots for flexible content layout.
-        </p>
+        <p class="text-gray-700">This dialog uses custom slots for flexible content layout.</p>
         <div class="bg-blue-50 p-4 rounded-lg">
           <p class="text-blue-800">
             You can put any content here including forms or other components.
diff --git a/src/components/Dialog/stories/Custom.vue b/src/components/Dialog/stories/Custom.vue
index 98bb04a47..ca6a753b4 100644
--- a/src/components/Dialog/stories/Custom.vue
+++ b/src/components/Dialog/stories/Custom.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { ref } from "vue";
-import { Button, Dialog } from "frappe-ui";
+import { ref } from 'vue'
+import { Button, Dialog } from 'frappe-ui'
 
-const open = ref(false);
+const open = ref(false)
 </script>
 
 <template>
@@ -10,16 +10,12 @@ const open = ref(false);
 
   <Dialog v-model="open">
     <template #body-title>
-      <h3 class="text-2xl font-semibold text-blue-600">
-        Custom Title with Styling
-      </h3>
+      <h3 class="text-2xl font-semibold text-blue-600">Custom Title with Styling</h3>
     </template>
 
     <template #body-content>
       <div class="space-y-4">
-        <p class="text-gray-700">
-          This dialog uses custom slots for flexible content layout.
-        </p>
+        <p class="text-gray-700">This dialog uses custom slots for flexible content layout.</p>
         <div class="bg-blue-50 p-4 rounded-lg">
           <p class="text-blue-800">
             You can put any content here including forms or other components.
diff --git a/src/components/Dialog/stories/Modal.vue b/src/components/Dialog/stories/Modal.vue
index 9eca86b8e..5d8707e36 100644
--- a/src/components/Dialog/stories/Modal.vue
+++ b/src/components/Dialog/stories/Modal.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { ref } from "vue";
-import { Button, Dialog } from "frappe-ui";
+import { ref } from 'vue'
+import { Button, Dialog } from 'frappe-ui'
 
-const open = ref(false);
+const open = ref(false)
 </script>
 
 <template>
@@ -13,8 +13,7 @@ const open = ref(false);
     :disable-outside-click-to-close="true"
     :options="{
       title: 'Modal Dialog',
-      message:
-        'This dialog cannot be closed by clicking outside.',
+      message: 'This dialog cannot be closed by clicking outside.',
       actions: [{ label: 'Close', variant: 'solid' }],
     }"
   />
diff --git a/src/components/Dialog/types.ts b/src/components/Dialog/types.ts
index 2e7bca01b..c3c84d803 100644
--- a/src/components/Dialog/types.ts
+++ b/src/components/Dialog/types.ts
@@ -9,18 +9,7 @@ type DialogOptions = {
   title?: string
   message?: string
   // default size = 'lg'
-  size?:
-    | 'xs'
-    | 'sm'
-    | 'md'
-    | 'lg'
-    | 'xl'
-    | '2xl'
-    | '3xl'
-    | '4xl'
-    | '5xl'
-    | '6xl'
-    | '7xl'
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl'
   icon?: DialogIcon | string
   actions?: Array<DialogAction>
   // default position = 'center'
diff --git a/src/components/Divider/index.ts b/src/components/Divider/index.ts
index eafa2264b..487643683 100644
--- a/src/components/Divider/index.ts
+++ b/src/components/Divider/index.ts
@@ -1,2 +1,2 @@
 export { default as Divider } from './Divider.vue'
-export type { DividerProps } from './types'
\ No newline at end of file
+export type { DividerProps } from './types'
diff --git a/src/components/Divider/types.ts b/src/components/Divider/types.ts
index 075de64b7..19b6cd0f4 100644
--- a/src/components/Divider/types.ts
+++ b/src/components/Divider/types.ts
@@ -9,4 +9,4 @@ export interface DividerProps {
   position?: 'start' | 'center' | 'end'
   flexItem?: boolean
   action?: DividerAction
-}
\ No newline at end of file
+}
diff --git a/src/components/Dropdown/Dropdown.vue b/src/components/Dropdown/Dropdown.vue
index 253f956ed..93c35227e 100644
--- a/src/components/Dropdown/Dropdown.vue
+++ b/src/components/Dropdown/Dropdown.vue
@@ -61,20 +61,11 @@
                 class="data-[disabled]:cursor-not-allowed"
               >
                 <slot v-if="$slots.item" name="item" v-bind="{ item, close }" />
-                <component
-                  v-else-if="item.component"
-                  :is="item.component"
-                  :active="false"
-                />
+                <component v-else-if="item.component" :is="item.component" :active="false" />
 
                 <DropdownMenuSub v-else-if="item.submenu">
                   <DropdownMenuSubTrigger as-child>
-                    <button
-                      :class="[
-                        cssClasses.submenuTrigger,
-                        getSubmenuBackgroundColor(item),
-                      ]"
-                    >
+                    <button :class="[cssClasses.submenuTrigger, getSubmenuBackgroundColor(item)]">
                       <FeatherIcon
                         v-if="item.icon && typeof item.icon === 'string'"
                         :name="item.icon"
@@ -101,10 +92,7 @@
                     </button>
                   </DropdownMenuSubTrigger>
                   <DropdownMenuPortal>
-                    <DropdownMenuSubContent
-                      :class="cssClasses.dropdownContent"
-                      :side-offset="4"
-                    >
+                    <DropdownMenuSubContent :class="cssClasses.dropdownContent" :side-offset="4">
                       <div
                         v-for="submenuGroup in getSubmenuGroups(item.submenu)"
                         :key="submenuGroup.key"
@@ -116,39 +104,20 @@
                         >
                           {{ submenuGroup.group }}
                         </DropdownMenuLabel>
-                        <template
-                          v-for="subItem in submenuGroup.items"
-                          :key="subItem.label"
-                        >
-                          <div
-                            v-if="subItem.switch"
-                            :class="cssClasses.itemButton"
-                          >
+                        <template v-for="subItem in submenuGroup.items" :key="subItem.label">
+                          <div v-if="subItem.switch" :class="cssClasses.itemButton">
                             <FeatherIcon
-                              v-if="
-                                subItem.icon && typeof subItem.icon === 'string'
-                              "
+                              v-if="subItem.icon && typeof subItem.icon === 'string'"
                               :name="subItem.icon"
-                              :class="[
-                                cssClasses.itemIcon,
-                                getIconColor(subItem),
-                              ]"
+                              :class="[cssClasses.itemIcon, getIconColor(subItem)]"
                               aria-hidden="true"
                             />
                             <component
-                              :class="[
-                                cssClasses.itemIcon,
-                                getIconColor(subItem),
-                              ]"
+                              :class="[cssClasses.itemIcon, getIconColor(subItem)]"
                               v-else-if="subItem.icon"
                               :is="subItem.icon"
                             />
-                            <span
-                              :class="[
-                                cssClasses.itemLabel,
-                                getTextColor(subItem),
-                              ]"
-                            >
+                            <span :class="[cssClasses.itemLabel, getTextColor(subItem)]">
                               {{ subItem.label }}
                             </span>
                             <Switch
@@ -162,10 +131,7 @@
                           <DropdownMenuItem
                             v-else
                             as-child
-                            @select="
-                              (event: PointerEvent) =>
-                                handleItemClick(subItem, event)
-                            "
+                            @select="(event: PointerEvent) => handleItemClick(subItem, event)"
                             :disabled="subItem.disabled"
                             class="data-[disabled]:cursor-not-allowed"
                           >
@@ -176,28 +142,16 @@
                             />
                             <button
                               v-else
-                              :class="[
-                                cssClasses.itemButton,
-                                getBackgroundColor(subItem),
-                              ]"
+                              :class="[cssClasses.itemButton, getBackgroundColor(subItem)]"
                             >
                               <FeatherIcon
-                                v-if="
-                                  subItem.icon &&
-                                  typeof subItem.icon === 'string'
-                                "
+                                v-if="subItem.icon && typeof subItem.icon === 'string'"
                                 :name="subItem.icon"
-                                :class="[
-                                  cssClasses.itemIcon,
-                                  getIconColor(subItem),
-                                ]"
+                                :class="[cssClasses.itemIcon, getIconColor(subItem)]"
                                 aria-hidden="true"
                               />
                               <component
-                                :class="[
-                                  cssClasses.itemIcon,
-                                  getIconColor(subItem),
-                                ]"
+                                :class="[cssClasses.itemIcon, getIconColor(subItem)]"
                                 v-else-if="subItem.icon"
                                 :is="subItem.icon"
                               />
@@ -205,12 +159,7 @@
                                 v-else-if="groupHasIcons(submenuGroup)"
                                 :class="cssClasses.itemIconPlaceholder"
                               />
-                              <span
-                                :class="[
-                                  cssClasses.itemLabel,
-                                  getTextColor(subItem),
-                                ]"
-                              >
+                              <span :class="[cssClasses.itemLabel, getTextColor(subItem)]">
                                 {{ subItem.label }}
                               </span>
                             </button>
@@ -220,10 +169,7 @@
                     </DropdownMenuSubContent>
                   </DropdownMenuPortal>
                 </DropdownMenuSub>
-                <button
-                  v-else
-                  :class="[cssClasses.itemButton, getBackgroundColor(item)]"
-                >
+                <button v-else :class="[cssClasses.itemButton, getBackgroundColor(item)]">
                   <FeatherIcon
                     v-if="item.icon && typeof item.icon === 'string'"
                     :name="item.icon"
@@ -235,13 +181,8 @@
                     v-else-if="item.icon"
                     :is="item.icon"
                   />
-                  <div
-                    v-else-if="groupHasIcons(group)"
-                    :class="cssClasses.itemIconPlaceholder"
-                  />
-                  <span :class="[cssClasses.itemLabel, getTextColor(item)]"
-                    >{{ item.label }}
-                  </span>
+                  <div v-else-if="groupHasIcons(group)" :class="cssClasses.itemIconPlaceholder" />
+                  <span :class="[cssClasses.itemLabel, getTextColor(item)]">{{ item.label }} </span>
                 </button>
               </DropdownMenuItem>
             </template>
@@ -338,9 +279,7 @@ const getSubmenuBackgroundColor = (item: DropdownItem) =>
   (item.theme === 'red' ? 'red-3' : 'gray-3')
 
 // Unified group processing for both main options and submenu options
-const processOptionsIntoGroups = (
-  options: DropdownOptions,
-): DropdownGroupOption[] => {
+const processOptionsIntoGroups = (options: DropdownOptions): DropdownGroupOption[] => {
   let groups: DropdownGroupOption[] = []
   let currentGroup: DropdownGroupOption | null = null
   let i = 0
@@ -415,8 +354,7 @@ const cssClasses = {
   chevronIcon: 'ml-auto h-4 w-4 flex-shrink-0',
 
   // Button classes
-  itemButton:
-    'group flex h-7 w-full items-center rounded px-2 text-base focus:outline-none',
+  itemButton: 'group flex h-7 w-full items-center rounded px-2 text-base focus:outline-none',
   submenuTrigger:
     'group flex h-7 w-full items-center rounded px-2 text-base text-ink-gray-6 focus:outline-none',
 }
diff --git a/src/components/Dropdown/types.ts b/src/components/Dropdown/types.ts
index b59649623..4b6e13bf9 100644
--- a/src/components/Dropdown/types.ts
+++ b/src/components/Dropdown/types.ts
@@ -45,4 +45,3 @@ export interface DropdownProps {
   /** Offset in pixels between trigger and dropdown */
   offset?: number
 }
-
diff --git a/src/components/ErrorMessage/index.ts b/src/components/ErrorMessage/index.ts
index ac91bd6d9..199af50fb 100644
--- a/src/components/ErrorMessage/index.ts
+++ b/src/components/ErrorMessage/index.ts
@@ -1,2 +1,2 @@
 export { default as ErrorMessage } from './ErrorMessage.vue'
-export type { ErrorMessageProps } from './types'
\ No newline at end of file
+export type { ErrorMessageProps } from './types'
diff --git a/src/components/ErrorMessage/stories/ErrorObject.vue b/src/components/ErrorMessage/stories/ErrorObject.vue
index 9d5faf3de..c0ab8cfac 100644
--- a/src/components/ErrorMessage/stories/ErrorObject.vue
+++ b/src/components/ErrorMessage/stories/ErrorObject.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { ErrorMessage } from "frappe-ui";
+import { ErrorMessage } from 'frappe-ui'
 
-const error = new Error("There was an error");
+const error = new Error('There was an error')
 </script>
 
 <template>
diff --git a/src/components/FeatherIcon.vue b/src/components/FeatherIcon.vue
index 09900f4a7..74eac375b 100644
--- a/src/components/FeatherIcon.vue
+++ b/src/components/FeatherIcon.vue
@@ -12,9 +12,7 @@ export default {
       validator(value) {
         const valid = validIcons.includes(value)
         if (!valid) {
-          console.groupCollapsed(
-            '[frappe-ui] name property for feather-icon must be one of ',
-          )
+          console.groupCollapsed('[frappe-ui] name property for feather-icon must be one of ')
           console.dir(validIcons)
           console.groupEnd()
         }
diff --git a/src/components/FileUploader/FileUploader.vue b/src/components/FileUploader/FileUploader.vue
index 91cd3a530..5e1ab452b 100644
--- a/src/components/FileUploader/FileUploader.vue
+++ b/src/components/FileUploader/FileUploader.vue
@@ -1,12 +1,6 @@
 <template>
   <div>
-    <input
-      ref="input"
-      type="file"
-      :accept="fileTypes"
-      class="hidden"
-      @change="onFileAdd"
-    />
+    <input ref="input" type="file" :accept="fileTypes" class="hidden" @change="onFileAdd" />
     <slot
       v-bind="{
         file,
@@ -122,9 +116,7 @@ export default {
           this.uploading = false
           let errorMessage = 'Error Uploading File'
           if (error?._server_messages) {
-            errorMessage = JSON.parse(
-              JSON.parse(error._server_messages)[0],
-            ).message
+            errorMessage = JSON.parse(JSON.parse(error._server_messages)[0]).message
           } else if (error?.exc) {
             errorMessage = JSON.parse(error.exc)[0].split('\n').slice(-2, -1)[0]
           }
diff --git a/src/components/FileUploader/stories/Examples.vue b/src/components/FileUploader/stories/Examples.vue
index abc8b40a9..964a23e19 100644
--- a/src/components/FileUploader/stories/Examples.vue
+++ b/src/components/FileUploader/stories/Examples.vue
@@ -11,11 +11,7 @@ const onSuccess = (file: File) => {
 </script>
 
 <template>
-  <FileUploader
-    :fileTypes="['image/*']"
-    :validateFile="validateFileFunction"
-    @success="onSuccess"
-  >
+  <FileUploader :fileTypes="['image/*']" :validateFile="validateFileFunction" @success="onSuccess">
     <template #default="{ uploading, progress, openFileSelector }">
       <Button @click="openFileSelector" :loading="uploading">
         {{ uploading ? `Uploading ${progress}%` : 'Upload Image' }}
diff --git a/src/components/FormControl/FormControl.story.vue b/src/components/FormControl/FormControl.story.vue
index 215e6f14b..a5b7ffff7 100644
--- a/src/components/FormControl/FormControl.story.vue
+++ b/src/components/FormControl/FormControl.story.vue
@@ -1,32 +1,24 @@
 <script setup lang="ts">
-import Story from "@/components/Story.vue";
-import { reactive, ref } from "vue";
+import Story from '@/components/Story.vue'
+import { reactive, ref } from 'vue'
 // import FeatherIcon from "../FeatherIcon.vue";
-import LucideSearch from "~icons/lucide/search";
-import { Avatar, FormControl } from "frappe-ui";
+import LucideSearch from '~icons/lucide/search'
+import { Avatar, FormControl } from 'frappe-ui'
 
 const state = reactive({
-  size: "sm",
-  variant: "subtle",
-  placeholder: "Placeholder",
+  size: 'sm',
+  variant: 'subtle',
+  placeholder: 'Placeholder',
   disabled: false,
-  label: "Label",
-});
+  label: 'Label',
+})
 
-const inputValue = ref("");
-const selectValue = ref(null);
-const autocompleteValue = ref(null);
-const checkboxValue = ref(false);
+const inputValue = ref('')
+const selectValue = ref(null)
+const autocompleteValue = ref(null)
+const checkboxValue = ref(false)
 
-const inputTypes = [
-  "text",
-  "number",
-  "email",
-  "date",
-  "password",
-  "search",
-  "textarea",
-];
+const inputTypes = ['text', 'number', 'email', 'date', 'password', 'search', 'textarea']
 </script>
 
 <template>
@@ -38,13 +30,11 @@ const inputTypes = [
     <Story title="Select Input" :layout="{ width: 250 }">
       <FormControl
         type="select"
-        :options='
-          [
-            { label: "One", value: "1" },
-            { label: "Two", value: "2" },
-            { label: "Three", value: "3" },
-          ]
-        '
+        :options="[
+          { label: 'One', value: '1' },
+          { label: 'Two', value: '2' },
+          { label: 'Three', value: '3' },
+        ]"
         v-bind="state"
         v-model="selectValue"
       />
@@ -53,13 +43,11 @@ const inputTypes = [
     <Story title="Combobox Input" :layout="{ width: 250 }">
       <FormControl
         type="combobox"
-        :options='
-          [
-            { label: "One", value: "1" },
-            { label: "Two", value: "2" },
-            { label: "Three", value: "3" },
-          ]
-        '
+        :options="[
+          { label: 'One', value: '1' },
+          { label: 'Two', value: '2' },
+          { label: 'Three', value: '3' },
+        ]"
         v-bind="state"
         v-model="autocompleteValue"
       />
@@ -88,10 +76,7 @@ const inputTypes = [
     <Story title="Prefix Avatar" :layout="{ width: 250 }">
       <FormControl type="text" label="Label">
         <template #prefix>
-          <Avatar
-            size="sm"
-            image="https://avatars.githubusercontent.com/u/499550?s=60&v=4"
-          />
+          <Avatar size="sm" image="https://avatars.githubusercontent.com/u/499550?s=60&v=4" />
         </template>
       </FormControl>
     </Story>
diff --git a/src/components/FormControl/FormControl.vue b/src/components/FormControl/FormControl.vue
index 0ee30ce1b..210eff171 100644
--- a/src/components/FormControl/FormControl.vue
+++ b/src/components/FormControl/FormControl.vue
@@ -1,38 +1,17 @@
 <template>
-  <div
-    v-if="type != 'checkbox'"
-    :class="['space-y-1.5', attrs.class]"
-    :style="attrs.style"
-  >
-    <FormLabel
-      v-if="label"
-      :label="label"
-      :size="size"
-      :id="id"
-      :required="required"
-    />
-    <Select
-      v-if="type === 'select'"
-      :id="id"
-      v-bind="{ ...controlAttrs, size, variant }"
-    >
+  <div v-if="type != 'checkbox'" :class="['space-y-1.5', attrs.class]" :style="attrs.style">
+    <FormLabel v-if="label" :label="label" :size="size" :id="id" :required="required" />
+    <Select v-if="type === 'select'" :id="id" v-bind="{ ...controlAttrs, size, variant }">
       <template #prefix v-if="$slots.prefix">
         <slot name="prefix" />
       </template>
     </Select>
-    <Combobox
-      v-else-if="type === 'combobox'"
-      :id="id"
-      v-bind="{ ...controlAttrs, variant }"
-    >
+    <Combobox v-else-if="type === 'combobox'" :id="id" v-bind="{ ...controlAttrs, variant }">
       <template #prefix v-if="$slots.prefix">
         <slot name="prefix" />
       </template>
     </Combobox>
-    <Autocomplete
-      v-else-if="type === 'autocomplete'"
-      v-bind="{ ...controlAttrs }"
-    >
+    <Autocomplete v-else-if="type === 'autocomplete'" v-bind="{ ...controlAttrs }">
       <template #prefix v-if="$slots.prefix">
         <slot name="prefix" />
       </template>
@@ -45,11 +24,7 @@
       :id="id"
       v-bind="{ ...controlAttrs, size, variant }"
     />
-    <TextInput
-      v-else
-      :id="id"
-      v-bind="{ ...controlAttrs, type, size, variant, required }"
-    >
+    <TextInput v-else :id="id" v-bind="{ ...controlAttrs, type, size, variant, required }">
       <template #prefix v-if="$slots.prefix">
         <slot name="prefix" />
       </template>
@@ -61,11 +36,7 @@
       <p v-if="description" :class="descriptionClasses">{{ description }}</p>
     </slot>
   </div>
-  <Checkbox
-    v-else
-    :id="id"
-    v-bind="{ ...controlAttrs, label, size, class: attrs.class }"
-  />
+  <Checkbox v-else :id="id" v-bind="{ ...controlAttrs, label, size, class: attrs.class }" />
 </template>
 <script setup lang="ts">
 import { useAttrs, computed } from 'vue'
diff --git a/src/components/Input.vue b/src/components/Input.vue
index 92cd55986..dd82eb840 100644
--- a/src/components/Input.vue
+++ b/src/components/Input.vue
@@ -1,15 +1,9 @@
 <template>
   <label :class="[type == 'checkbox' ? 'flex' : 'block', $attrs.class]" :style="$attrs.style">
-    <span
-      v-if="label && type != 'checkbox'"
-      class="mb-2 block text-sm leading-4 text-gray-700"
-    >
+    <span v-if="label && type != 'checkbox'" class="mb-2 block text-sm leading-4 text-gray-700">
       {{ label }}
     </span>
-    <div
-      class="relative flex"
-      :class="{ 'items-center': isNormalInput || type == 'select' }"
-    >
+    <div class="relative flex" :class="{ 'items-center': isNormalInput || type == 'select' }">
       <FeatherIcon
         v-if="iconLeft && type != 'checkbox'"
         :name="iconLeft"
@@ -70,10 +64,7 @@
         </option>
       </select>
     </div>
-    <span
-      v-if="label && type == 'checkbox'"
-      class="ml-2 inline-block text-base leading-4"
-    >
+    <span v-if="label && type == 'checkbox'" class="ml-2 inline-block text-base leading-4">
       {{ label }}
     </span>
   </label>
@@ -195,14 +186,7 @@ export default {
         .filter(Boolean)
     },
     isNormalInput() {
-      return [
-        'text',
-        'number',
-        'checkbox',
-        'email',
-        'password',
-        'date',
-      ].includes(this.type)
+      return ['text', 'number', 'checkbox', 'email', 'password', 'date'].includes(this.type)
     },
   },
 }
diff --git a/src/components/KeyboardShortcut.vue b/src/components/KeyboardShortcut.vue
index 254ecff9d..14b11f9d8 100644
--- a/src/components/KeyboardShortcut.vue
+++ b/src/components/KeyboardShortcut.vue
@@ -27,11 +27,9 @@
             class="w-3 h-3"
             :aria-label="part.display"
           />
-          <span
-            v-else
-            class="font-mono leading-none tracking-wide uppercase text-[10px]"
-            >{{ part.display }}</span
-          >
+          <span v-else class="font-mono leading-none tracking-wide uppercase text-[10px]">{{
+            part.display
+          }}</span>
         </span>
         <!-- + separator (visually): hidden from screen readers because ariaLabel combines sequence -->
         <span
@@ -48,9 +46,7 @@
         <LucideCommand v-if="isMac" class="w-3 h-3" aria-label="Command" />
         <span v-else class="font-mono text-[10px] leading-none">Ctrl</span>
       </span>
-      <span v-if="shift"
-        ><LucideShift class="w-3 h-3" aria-label="Shift"
-      /></span>
+      <span v-if="shift"><LucideShift class="w-3 h-3" aria-label="Shift" /></span>
       <span v-if="alt"><LucideAlt class="w-3 h-3" aria-label="Option" /></span>
       <slot></slot>
     </template>
@@ -85,8 +81,7 @@ import IconBackspace from '~icons/lucide/delete'
 // Robust mac detection (navigator.platform deprecated)
 const isMac = computed(() => {
   if (typeof navigator === 'undefined') return false
-  const p =
-    (navigator as any).userAgentData?.platform || navigator.platform || ''
+  const p = (navigator as any).userAgentData?.platform || navigator.platform || ''
   if (/Mac|iPod|iPhone|iPad/i.test(p)) return true
   return /Mac OS X|Macintosh|iPhone|iPad|iPod/i.test(navigator.userAgent)
 })
@@ -123,9 +118,7 @@ const showPlus = computed<boolean>(() => props.showPlus)
 
 // Dynamic root styling based on bg prop
 const rootClasses = computed(() =>
-  props.bg
-    ? 'bg-surface-gray-2 rounded-sm text-ink-gray-5 py-0.5 px-1'
-    : 'text-ink-gray-4',
+  props.bg ? 'bg-surface-gray-2 rounded-sm text-ink-gray-5 py-0.5 px-1' : 'text-ink-gray-4',
 )
 
 // Normalize one combo string (e.g. Mod+Shift+K)
@@ -232,9 +225,7 @@ const ariaLabel = computed(() => {
     '←': 'Left Arrow',
     '→': 'Right Arrow',
   }
-  const seq = parsedParts.value
-    .map((p) => wordMap[p.display] || p.display)
-    .join(' + ')
+  const seq = parsedParts.value.map((p) => wordMap[p.display] || p.display).join(' + ')
   return 'Shortcut ' + seq
 })
 
diff --git a/src/components/ListFilter/FilterIcon.vue b/src/components/ListFilter/FilterIcon.vue
index 002168e06..adcf1c463 100644
--- a/src/components/ListFilter/FilterIcon.vue
+++ b/src/components/ListFilter/FilterIcon.vue
@@ -1,11 +1,5 @@
 <template>
-  <svg
-    width="16"
-    height="17"
-    viewBox="0 0 16 17"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M2 4.5H14"
       stroke="currentColor"
diff --git a/src/components/ListFilter/ListFilter.vue b/src/components/ListFilter/ListFilter.vue
index 3065429a3..10c8c09e5 100644
--- a/src/components/ListFilter/ListFilter.vue
+++ b/src/components/ListFilter/ListFilter.vue
@@ -13,9 +13,7 @@
       </Button>
     </template>
     <template #body="{ close }">
-      <div
-        class="my-2 rounded-lg border border-gray-100 bg-surface-white shadow-xl"
-      >
+      <div class="my-2 rounded-lg border border-gray-100 bg-surface-white shadow-xl">
         <div class="min-w-[400px] p-2">
           <div
             v-if="filters.length"
@@ -25,9 +23,7 @@
             class="mb-3 flex items-center justify-between gap-2"
           >
             <div class="flex flex-1 items-center gap-2">
-              <div
-                class="w-13 flex-shrink-0 ps-2 text-end text-base text-ink-gray-5"
-              >
+              <div class="w-13 flex-shrink-0 ps-2 text-end text-base text-ink-gray-5">
                 {{ i == 0 ? 'Where' : 'And' }}
               </div>
               <div id="fieldname" class="!min-w-[140px] flex-1">
@@ -60,12 +56,7 @@
                 />
                 <component
                   v-else
-                  :is="
-                    getValueSelector(
-                      filter.field.fieldtype,
-                      filter.field.options,
-                    )
-                  "
+                  :is="getValueSelector(filter.field.fieldtype, filter.field.options)"
                   v-model="filter.value"
                   placeholder="Value"
                 />
@@ -75,10 +66,7 @@
               <Button variant="ghost" icon="x" @click="removeFilter(i)" />
             </div>
           </div>
-          <div
-            v-else
-            class="mb-3 flex h-7 items-center px-3 text-sm text-ink-gray-5"
-          >
+          <div v-else class="mb-3 flex h-7 items-center px-3 text-sm text-ink-gray-5">
             Empty - Choose a field to filter by
           </div>
           <div class="flex items-center justify-between gap-2">
@@ -126,15 +114,7 @@ const typeCheck = ['Check']
 const typeLink = ['Link']
 const typeNumber = ['Float', 'Int']
 const typeSelect = ['Select']
-const typeString = [
-  'Data',
-  'Long Text',
-  'Small Text',
-  'Text Editor',
-  'Text',
-  'JSON',
-  'Code',
-]
+const typeString = ['Data', 'Long Text', 'Small Text', 'Text Editor', 'Text', 'JSON', 'Code']
 
 const emits = defineEmits(['update:modelValue'])
 const props = defineProps({
@@ -252,8 +232,7 @@ function getDefaultOperator(fieldtype) {
 
 function getValueSelector(fieldtype, options) {
   if (typeSelect.includes(fieldtype) || typeCheck.includes(fieldtype)) {
-    const _options =
-      fieldtype == 'Check' ? ['Yes', 'No'] : getSelectOptions(options)
+    const _options = fieldtype == 'Check' ? ['Yes', 'No'] : getSelectOptions(options)
     return h(FormControl, {
       type: 'select',
       options: _options,
diff --git a/src/components/ListFilter/NestedPopover.vue b/src/components/ListFilter/NestedPopover.vue
index 48e5b3d5e..8525ebeb0 100644
--- a/src/components/ListFilter/NestedPopover.vue
+++ b/src/components/ListFilter/NestedPopover.vue
@@ -11,12 +11,7 @@
       <slot name="target" v-bind="{ open }" />
     </PopoverButton>
     <div v-show="open">
-      <PopoverPanel
-        v-slot="{ open, close }"
-        ref="popover"
-        static
-        class="z-[100]"
-      >
+      <PopoverPanel v-slot="{ open, close }" ref="popover" static class="z-[100]">
         <slot name="body" v-bind="{ open, close }" />
       </PopoverPanel>
     </div>
diff --git a/src/components/ListFilter/SearchComplete.vue b/src/components/ListFilter/SearchComplete.vue
index 378cd8941..78ed0a2ca 100644
--- a/src/components/ListFilter/SearchComplete.vue
+++ b/src/components/ListFilter/SearchComplete.vue
@@ -59,9 +59,7 @@ const r = createListResource({
   auto: true,
   fields: [props.labelField, props.searchField, props.valueField],
   onSuccess: () => {
-    selection.value = props.value
-      ? options.value.find((o) => o.value === props.value)
-      : null
+    selection.value = props.value ? options.value.find((o) => o.value === props.value) : null
   },
 })
 const options = computed(
diff --git a/src/components/ListView/ListEmptyState.vue b/src/components/ListView/ListEmptyState.vue
index 093f3c3ea..7d0a418bd 100644
--- a/src/components/ListView/ListEmptyState.vue
+++ b/src/components/ListView/ListEmptyState.vue
@@ -1,9 +1,9 @@
 <template>
-  <div
-    class="flex h-full w-full flex-col items-center justify-center text-base"
-  >
+  <div class="flex h-full w-full flex-col items-center justify-center text-base">
     <slot>
-      <div class="text-xl font-medium text-ink-gray-8 mt-6">{{ list.options.emptyState.title }}</div>
+      <div class="text-xl font-medium text-ink-gray-8 mt-6">
+        {{ list.options.emptyState.title }}
+      </div>
       <div class="mt-1 text-base text-ink-gray-5">
         {{ list.options.emptyState.description }}
       </div>
diff --git a/src/components/ListView/ListFooter.vue b/src/components/ListView/ListFooter.vue
index 611ed0ae4..62f47c08b 100644
--- a/src/components/ListView/ListFooter.vue
+++ b/src/components/ListView/ListFooter.vue
@@ -9,11 +9,7 @@
       </slot>
       <slot name="right">
         <div class="flex items-center">
-          <Button
-            v-if="showLoadMore"
-            label="Load More"
-            @click="emit('loadMore')"
-          />
+          <Button v-if="showLoadMore" label="Load More" @click="emit('loadMore')" />
           <div v-if="showLoadMore" class="mx-3 h-[80%] border-l" />
           <div class="flex items-center gap-1 text-base text-ink-gray-5">
             <div>{{ options.rowCount || '0' }}</div>
diff --git a/src/components/ListView/ListGroupHeader.vue b/src/components/ListView/ListGroupHeader.vue
index 68b5cbfa8..ff93997b0 100644
--- a/src/components/ListView/ListGroupHeader.vue
+++ b/src/components/ListView/ListGroupHeader.vue
@@ -1,9 +1,6 @@
 <template>
   <div class="flex items-center">
-    <button
-      @click="toggleGroup"
-      class="ms-[3px] me-[11px] rounded p-1 hover:bg-surface-gray-2"
-    >
+    <button @click="toggleGroup" class="ms-[3px] me-[11px] rounded p-1 hover:bg-surface-gray-2">
       <DownSolid
         class="h-4 w-4 text-ink-gray-6 transition-transform duration-200"
         :class="[group.collapsed ? '-rotate-90' : '']"
diff --git a/src/components/ListView/ListGroups.vue b/src/components/ListView/ListGroups.vue
index cc7f32dbc..c36ea18d4 100644
--- a/src/components/ListView/ListGroups.vue
+++ b/src/components/ListView/ListGroups.vue
@@ -3,11 +3,7 @@
     <div v-for="group in list.rows" :key="group.group">
       <slot>
         <ListGroupHeader :group="group">
-          <slot
-            name="group-header"
-            v-if="$slots['group-header']"
-            v-bind="{ group }"
-          />
+          <slot name="group-header" v-if="$slots['group-header']" v-bind="{ group }" />
         </ListGroupHeader>
         <ListGroupRows :group="group" />
       </slot>
diff --git a/src/components/ListView/ListHeader.vue b/src/components/ListView/ListHeader.vue
index bc129be9e..7b847fd49 100644
--- a/src/components/ListView/ListHeader.vue
+++ b/src/components/ListView/ListHeader.vue
@@ -2,10 +2,7 @@
   <div
     class="mb-2 grid items-center gap-4 rounded bg-surface-gray-2 p-2"
     :style="{
-      gridTemplateColumns: getGridTemplateColumns(
-        list.columns,
-        list.options.selectable,
-      ),
+      gridTemplateColumns: getGridTemplateColumns(list.columns, list.options.selectable),
     }"
   >
     <Checkbox
diff --git a/src/components/ListView/ListHeaderItem.vue b/src/components/ListView/ListHeaderItem.vue
index 2d06dcf9b..e4f9961cb 100644
--- a/src/components/ListView/ListHeaderItem.vue
+++ b/src/components/ListView/ListHeaderItem.vue
@@ -4,10 +4,7 @@
     class="group relative flex items-center"
     :class="item.align ? alignmentMap[item.align] : 'justify-between'"
   >
-    <div
-      class="flex items-center gap-2 truncate text-sm text-ink-gray-5"
-      :class="$attrs.class"
-    >
+    <div class="flex items-center gap-2 truncate text-sm text-ink-gray-5" :class="$attrs.class">
       <slot name="prefix" v-bind="{ item }" />
       <slot>
         <div class="truncate">
diff --git a/src/components/ListView/ListRow.vue b/src/components/ListView/ListRow.vue
index efdcb6de8..dff7279b8 100644
--- a/src/components/ListView/ListRow.vue
+++ b/src/components/ListView/ListRow.vue
@@ -25,10 +25,7 @@
         class="grid items-center gap-4 px-2"
         :style="{
           height: rowHeight,
-          gridTemplateColumns: getGridTemplateColumns(
-            list.columns,
-            list.options.selectable,
-          ),
+          gridTemplateColumns: getGridTemplateColumns(list.columns, list.options.selectable),
         }"
       >
         <div
@@ -46,10 +43,7 @@
         <div
           v-for="(column, i) in list.columns"
           :key="column.key"
-          :class="[
-            alignmentMap[column.align],
-            i == 0 ? 'text-ink-gray-9' : 'text-ink-gray-7',
-          ]"
+          :class="[alignmentMap[column.align], i == 0 ? 'text-ink-gray-9' : 'text-ink-gray-7']"
         >
           <slot v-bind="{ idx: i, column, item: row[column.key], isActive }">
             <component
@@ -103,8 +97,7 @@ const list = inject('list')
 const isLastRow = computed(() => {
   if (!list.value.rows?.length) return false
   return (
-    list.value.rows[list.value.rows.length - 1][list.value.rowKey] ===
-    props.row[list.value.rowKey]
+    list.value.rows[list.value.rows.length - 1][list.value.rowKey] === props.row[list.value.rowKey]
   )
 })
 
@@ -112,9 +105,7 @@ const isSelected = computed(() => {
   return list.value.selections.has(props.row[list.value.rowKey])
 })
 const isActive = computed(
-  () =>
-    list.value.options.enableActive &&
-    list.value.activeRow.value === props.row.name,
+  () => list.value.options.enableActive && list.value.activeRow.value === props.row.name,
 )
 
 const isHoverable = computed(() => {
@@ -131,9 +122,7 @@ const rowHeight = computed(() => {
 const roundedClass = computed(() => {
   if (!isSelected.value) return 'rounded'
   const selections = [...list.value.selections]
-  let groups = list.value.rows[0]?.group
-    ? list.value.rows.map((k) => k.rows)
-    : [list.value.rows]
+  let groups = list.value.rows[0]?.group ? list.value.rows.map((k) => k.rows) : [list.value.rows]
 
   for (let rows of groups) {
     let currentIndex = rows.findIndex((k) => k == props.row)
@@ -145,8 +134,7 @@ const roundedClass = computed(() => {
 })
 
 const onRowClick = (event) => {
-  if (list.value.options.onRowClick)
-    list.value.options.onRowClick(props.row, event)
+  if (list.value.options.onRowClick) list.value.options.onRowClick(props.row, event)
   if (list.value.activeRow.value === props.row.name) {
     list.value.activeRow.value = null
   } else {
@@ -161,9 +149,7 @@ const handleCheckboxClick = (event) => {
     const rows = list.value.rows.find((k) => k.group)
       ? list.value.rows.reduce((acc, curr) => acc.concat(curr.rows), [])
       : list.value.rows
-    const lastIndex = rows.findIndex(
-      (k) => lastSelected === k[list.value.rowKey],
-    )
+    const lastIndex = rows.findIndex((k) => lastSelected === k[list.value.rowKey])
     const curIndex = rows.findIndex((k) => value === k[list.value.rowKey])
     const start = Math.min(lastIndex, curIndex)
     const end = Math.max(lastIndex, curIndex)
diff --git a/src/components/ListView/ListRowItem.vue b/src/components/ListView/ListRowItem.vue
index 387a4c8d0..a5b98b51a 100644
--- a/src/components/ListView/ListRowItem.vue
+++ b/src/components/ListView/ListRowItem.vue
@@ -3,11 +3,7 @@
     <slot name="prefix">
       <component
         v-if="column.prefix"
-        :is="
-          typeof column.prefix === 'function'
-            ? column.prefix({ row })
-            : column.prefix
-        "
+        :is="typeof column.prefix === 'function' ? column.prefix({ row }) : column.prefix"
       />
     </slot>
     <Tooltip
@@ -57,9 +53,7 @@ const label = computed(() => {
 
 const tooltip = computed(() => {
   if (!list.value.options.showTooltip) return ''
-  return props.column.getTooltip
-    ? props.column.getTooltip(props.row)
-    : getValue(props.item).label
+  return props.column.getTooltip ? props.column.getTooltip(props.row) : getValue(props.item).label
 })
 
 function getValue(value) {
diff --git a/src/components/ListView/ListSelectBanner.vue b/src/components/ListView/ListSelectBanner.vue
index 02a335857..5da14b50d 100644
--- a/src/components/ListView/ListSelectBanner.vue
+++ b/src/components/ListView/ListSelectBanner.vue
@@ -7,10 +7,7 @@
     leave-from-class="opacity-100"
     leave-to-class="transform opacity-0"
   >
-    <div
-      v-if="list.selections.size"
-      class="absolute inset-x-0 bottom-6 mx-auto w-max text-base"
-    >
+    <div v-if="list.selections.size" class="absolute inset-x-0 bottom-6 mx-auto w-max text-base">
       <div
         class="flex min-w-[596px] items-center gap-3 rounded-lg bg-surface-white px-4 py-2 shadow-2xl"
         :class="$attrs.class"
@@ -23,15 +20,9 @@
             unselectAll: () => list.toggleAllRows(false),
           }"
         >
-          <div
-            class="flex flex-1 justify-between border-r border-outline-gray-2 text-ink-gray-9"
-          >
+          <div class="flex flex-1 justify-between border-r border-outline-gray-2 text-ink-gray-9">
             <div class="flex items-center gap-3">
-              <Checkbox
-                :modelValue="true"
-                :disabled="true"
-                class="text-ink-gray-9"
-              />
+              <Checkbox :modelValue="true" :disabled="true" class="text-ink-gray-9" />
               <div>{{ selectedText }}</div>
             </div>
             <div class="me-3">
@@ -56,11 +47,7 @@
             >
               Select all
             </Button>
-            <Button
-              icon="x"
-              variant="ghost"
-              @click="list.toggleAllRows(false)"
-            />
+            <Button icon="x" variant="ghost" @click="list.toggleAllRows(false)" />
           </div>
         </slot>
       </div>
diff --git a/src/components/ListView/ListView.vue b/src/components/ListView/ListView.vue
index 7f5051716..9e8eb4478 100644
--- a/src/components/ListView/ListView.vue
+++ b/src/components/ListView/ListView.vue
@@ -104,10 +104,7 @@ let _options = computed(() => {
 const allRowsSelected = computed(() => {
   if (!props.rows.length) return false
   if (showGroupedRows.value) {
-    return (
-      selections.size ===
-      props.rows.reduce((acc, row) => acc + row.rows.length, 0)
-    )
+    return selections.size === props.rows.reduce((acc, row) => acc + row.rows.length, 0)
   }
   return selections.size === props.rows.length
 })
@@ -117,9 +114,7 @@ const selectable = computed(() => {
 })
 
 let showGroupedRows = computed(() => {
-  return props.rows.every(
-    (row) => row.group && row.rows && Array.isArray(row.rows)
-  )
+  return props.rows.every((row) => row.group && row.rows && Array.isArray(row.rows))
 })
 
 function toggleRow(row) {
@@ -155,7 +150,7 @@ provide(
     slots: slots,
     toggleRow,
     toggleAllRows,
-  }))
+  })),
 )
 
 defineExpose({
diff --git a/src/components/ListView/stories/CellSlot.vue b/src/components/ListView/stories/CellSlot.vue
index 99b02e926..e55ca09ff 100644
--- a/src/components/ListView/stories/CellSlot.vue
+++ b/src/components/ListView/stories/CellSlot.vue
@@ -8,8 +8,7 @@ const cols = reactive([
     key: 'name',
     width: 3,
     getLabel: ({ row }) => row.name,
-    prefix: ({ row }) =>
-      h(Avatar, { shape: 'circle', image: row.user_image, size: 'sm' }),
+    prefix: ({ row }) => h(Avatar, { shape: 'circle', image: row.user_image, size: 'sm' }),
   },
   { label: 'Email', key: 'email', width: '200px' },
   { label: 'Role', key: 'role' },
diff --git a/src/components/ListView/stories/CustomList.vue b/src/components/ListView/stories/CustomList.vue
index 5a8828a4c..db89201a9 100644
--- a/src/components/ListView/stories/CustomList.vue
+++ b/src/components/ListView/stories/CustomList.vue
@@ -67,23 +67,14 @@ const custom_rows = [
     row-key="id"
   >
     <ListHeader>
-      <ListHeaderItem
-        v-for="column in custom_columns"
-        :key="column.key"
-        :item="column"
-      >
+      <ListHeaderItem v-for="column in custom_columns" :key="column.key" :item="column">
         <template #prefix="{ item }">
           <component :is="item.icon" class="size-4" />
         </template>
       </ListHeaderItem>
     </ListHeader>
     <ListRows>
-      <ListRow
-        v-for="row in custom_rows"
-        :key="row.id"
-        v-slot="{ column, item }"
-        :row="row"
-      >
+      <ListRow v-for="row in custom_rows" :key="row.id" v-slot="{ column, item }" :row="row">
         <ListRowItem :item="item" :align="column.align">
           <template #prefix>
             <div
@@ -91,12 +82,7 @@ const custom_rows = [
               class="h-3 w-3 rounded-full"
               :class="item.bg_color"
             />
-            <Avatar
-              v-if="column.key === 'name'"
-              shape="circle"
-              :image="item.image"
-              size="sm"
-            />
+            <Avatar v-if="column.key === 'name'" shape="circle" :image="item.image" size="sm" />
           </template>
           <Badge
             v-if="column.key === 'role'"
diff --git a/src/components/ListView/stories/Empty.vue b/src/components/ListView/stories/Empty.vue
index 2ca63dc43..ea9a88035 100644
--- a/src/components/ListView/stories/Empty.vue
+++ b/src/components/ListView/stories/Empty.vue
@@ -8,8 +8,7 @@ const cols = reactive([
     key: 'name',
     width: 3,
     getLabel: ({ row }) => row.name,
-    prefix: ({ row }) =>
-      h(Avatar, { shape: 'circle', image: row.user_image, size: 'sm' }),
+    prefix: ({ row }) => h(Avatar, { shape: 'circle', image: row.user_image, size: 'sm' }),
   },
   { label: 'Email', key: 'email', width: '200px' },
   { label: 'Role', key: 'role' },
diff --git a/src/components/ListView/stories/Examples.vue b/src/components/ListView/stories/Examples.vue
index 441c2a179..15e980572 100644
--- a/src/components/ListView/stories/Examples.vue
+++ b/src/components/ListView/stories/Examples.vue
@@ -9,8 +9,7 @@ const columns = reactive([
     key: 'name',
     width: 3,
     getLabel: ({ row }) => row.name,
-    prefix: ({ row }) =>
-      h(Avatar, { shape: 'circle', image: row.user_image, size: 'sm' }),
+    prefix: ({ row }) => h(Avatar, { shape: 'circle', image: row.user_image, size: 'sm' }),
   },
   { label: 'Email', key: 'email', width: '200px' },
   { label: 'Role', key: 'role' },
diff --git a/src/components/MonthPicker/MonthPicker.vue b/src/components/MonthPicker/MonthPicker.vue
index 5e6d25094..ed1d49ceb 100644
--- a/src/components/MonthPicker/MonthPicker.vue
+++ b/src/components/MonthPicker/MonthPicker.vue
@@ -32,16 +32,10 @@ const months = [
 
 const currentYear = ref(new Date().getFullYear())
 
-const yearRangeStart = computed(
-  () => currentYear.value - (currentYear.value % 12),
-)
-const yearRange = computed(() =>
-  Array.from({ length: 12 }, (_, i) => yearRangeStart.value + i),
-)
+const yearRangeStart = computed(() => currentYear.value - (currentYear.value % 12))
+const yearRange = computed(() => Array.from({ length: 12 }, (_, i) => yearRangeStart.value + i))
 
-const pickerList = computed(() =>
-  viewMode.value == 'year' ? yearRange.value : months,
-)
+const pickerList = computed(() => (viewMode.value == 'year' ? yearRange.value : months))
 
 const toggleViewMode = () => {
   viewMode.value = viewMode.value == 'year' ? 'month' : 'year'
@@ -66,17 +60,19 @@ const formatBtn = (v: string | number) =>
   viewMode.value == 'month' ? (v as String).slice(0, 3) : v
 
 const txtClass = computed(() => {
-  return model.value || props.disabled ? '': '!text-ink-gray-5' 
+  return model.value || props.disabled ? '' : '!text-ink-gray-5'
 })
 </script>
 
 <template>
-  <Popover
-    popover-class="mt-2 shadow-xl rounded-lg border bg-surface-modal p-2"
-  >
+  <Popover popover-class="mt-2 shadow-xl rounded-lg border bg-surface-modal p-2">
     <template #target="{ togglePopover }">
-      <Button @click="togglePopover" class="w-full justify-between border" :class="txtClass"
-				:disabled="disabled">
+      <Button
+        @click="togglePopover"
+        class="w-full justify-between border"
+        :class="txtClass"
+        :disabled="disabled"
+      >
         {{ model || props.placeholder }}
         <template #suffix> <LucideCalender class="size-4" /> </template>
       </Button>
@@ -93,9 +89,7 @@ const txtClass = computed(() => {
           <template v-if="viewMode == 'month'">
             {{ model.split(' ')[1] ?? currentYear }}
           </template>
-          <template v-else>
-            {{ yearRangeStart }} - {{ yearRangeStart + 11 }}
-          </template>
+          <template v-else> {{ yearRangeStart }} - {{ yearRangeStart + 11 }} </template>
         </Button>
 
         <Button variant="ghost" @click="nextClick">
diff --git a/src/components/MonthPicker/index.ts b/src/components/MonthPicker/index.ts
index 995f7e7b8..3a082a008 100644
--- a/src/components/MonthPicker/index.ts
+++ b/src/components/MonthPicker/index.ts
@@ -1 +1 @@
-export { default as MonthPicker } from "./MonthPicker.vue";
+export { default as MonthPicker } from './MonthPicker.vue'
diff --git a/src/components/MonthPicker/stories/Example.vue b/src/components/MonthPicker/stories/Example.vue
index c51938fed..582ed1248 100644
--- a/src/components/MonthPicker/stories/Example.vue
+++ b/src/components/MonthPicker/stories/Example.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { ref } from "vue";
-import { MonthPicker } from "frappe-ui";
+import { ref } from 'vue'
+import { MonthPicker } from 'frappe-ui'
 
-const val = ref("");
+const val = ref('')
 </script>
 
 <template>
diff --git a/src/components/MonthPicker/types.ts b/src/components/MonthPicker/types.ts
index e436e9fa1..8f9e1eff3 100644
--- a/src/components/MonthPicker/types.ts
+++ b/src/components/MonthPicker/types.ts
@@ -1,7 +1,7 @@
 export interface MonthPickerProps {
-	/** Placeholder text shown when no value is selected */
-  placeholder?: string;
+  /** Placeholder text shown when no value is selected */
+  placeholder?: string
 
-	/** Disables the month picker */
-	disabled?: boolean;
+  /** Disables the month picker */
+  disabled?: boolean
 }
diff --git a/src/components/MultiSelect/MultiSelect.vue b/src/components/MultiSelect/MultiSelect.vue
index e46f1bc88..4b4db84cd 100644
--- a/src/components/MultiSelect/MultiSelect.vue
+++ b/src/components/MultiSelect/MultiSelect.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed } from "vue";
-import { MultiSelectOption, MultiSelectProps } from "./types";
+import { computed } from 'vue'
+import { MultiSelectOption, MultiSelectProps } from './types'
 
 import {
   ComboboxContent,
@@ -10,34 +10,32 @@ import {
   ComboboxItemIndicator,
   ComboboxRoot,
   ComboboxViewport,
-} from "reka-ui";
+} from 'reka-ui'
 
-import LucideX from "~icons/lucide/x";
-import Button from "../Button/Button.vue";
-import Popover from "../Popover/Popover.vue";
-import LucideCheck from "~icons/lucide/check";
-import LoadingIndicator from "../LoadingIndicator.vue";
-import LucideChevronDown from "~icons/lucide/chevron-down";
+import LucideX from '~icons/lucide/x'
+import Button from '../Button/Button.vue'
+import Popover from '../Popover/Popover.vue'
+import LucideCheck from '~icons/lucide/check'
+import LoadingIndicator from '../LoadingIndicator.vue'
+import LucideChevronDown from '~icons/lucide/chevron-down'
 
 const props = withDefaults(defineProps<MultiSelectProps>(), {
-  placeholder: "Select option",
-});
+  placeholder: 'Select option',
+})
 
-const model = defineModel<String[]>({ default: [] });
+const model = defineModel<String[]>({ default: [] })
 
-const getValues = (arr: String[]) =>
-  arr.map((x) => props.options.find((y) => y.value === x)?.label);
+const getValues = (arr: String[]) => arr.map((x) => props.options.find((y) => y.value === x)?.label)
 
-const optionToStr = (options: MultiSelectOption[]) =>
-  options.map((x) => x.value);
+const optionToStr = (options: MultiSelectOption[]) => options.map((x) => x.value)
 
 const selectedOptions = computed(() => {
-  const values = getValues(model.value).join(", ");
-  return model.value.length > 0 ? values : props.placeholder;
-});
+  const values = getValues(model.value).join(', ')
+  return model.value.length > 0 ? values : props.placeholder
+})
 
-const clearAll = () => model.value = [];
-const selectAll = () => model.value = optionToStr(props.options);
+const clearAll = () => (model.value = [])
+const selectAll = () => (model.value = optionToStr(props.options))
 
 defineSlots<{
   /** Rendered for each option in the dropdown. Receives the option object. */
@@ -57,7 +55,7 @@ defineSlots<{
       <Button
         @click="togglePopover"
         class="w-full justify-between"
-        :class='{ "!text-ink-gray-4": model.length == 0 }'
+        :class="{ '!text-ink-gray-4': model.length == 0 }"
       >
         {{ selectedOptions }}
         <template #suffix>
@@ -67,42 +65,25 @@ defineSlots<{
     </template>
 
     <template #body>
-      <ComboboxRoot
-        :open="true"
-        class="relative p-2 pb-0"
-        v-model="model"
-        multiple
-      >
+      <ComboboxRoot :open="true" class="relative p-2 pb-0" v-model="model" multiple>
         <div
           v-if="!props.hideSearch"
-          class="
-            flex w-full items-center justify-between gap-2
-            rounded bg-surface-gray-2 px-2 py-1 ring-2 ring-outline-gray-2
-            transition-colors hover:bg-surface-gray-3 boder borer-transparent
-          "
+          class="flex w-full items-center justify-between gap-2 rounded bg-surface-gray-2 px-2 py-1 ring-2 ring-outline-gray-2 transition-colors hover:bg-surface-gray-3 boder borer-transparent"
         >
           <ComboboxInput
             placeholder="Search for..."
-            class="
-              bg-transparent p-0 focus:outline-0 border-0 focus:border-0 focus:ring-0
-              text-base text-ink-gray-8 h-full placeholder:text-ink-gray-4 w-full
-            "
+            class="bg-transparent p-0 focus:outline-0 border-0 focus:border-0 focus:ring-0 text-base text-ink-gray-8 h-full placeholder:text-ink-gray-4 w-full"
           />
 
           <div class="inline-flex gap-1">
-            <LoadingIndicator
-              v-if="props.loading"
-              class="size-4 text-ink-gray-5"
-            />
+            <LoadingIndicator v-if="props.loading" class="size-4 text-ink-gray-5" />
             <LucideX class="size-4 text-ink-gray-9" />
           </div>
         </div>
 
         <ComboboxContent class="z-10 overflow-hidden mt-2">
           <ComboboxViewport class="max-h-60 overflow-auto pb-1.5">
-            <ComboboxEmpty
-              class="text-ink-gray-5 text-base text-center py-1.5 px-2.5"
-            >
+            <ComboboxEmpty class="text-ink-gray-5 text-base text-center py-1.5 px-2.5">
               No results found
             </ComboboxEmpty>
 
@@ -111,11 +92,7 @@ defineSlots<{
               :key="item.value"
               :value="item.value"
               :disabled="item.disabled"
-              class="
-                text-base leading-none text-ink-gray-7 rounded flex items-center h-7 p-1.5
-                relative select-none data-[disabled]:opacity-50 data-[disabled]:pointer-events-none
-                data-[highlighted]:outline-none data-[highlighted]:bg-surface-gray-3
-              "
+              class="text-base leading-none text-ink-gray-7 rounded flex items-center h-7 p-1.5 relative select-none data-[disabled]:opacity-50 data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-surface-gray-3"
             >
               <slot name="option" v-bind="{ item }">
                 {{ item.label }}
diff --git a/src/components/MultiSelect/stories/Example.vue b/src/components/MultiSelect/stories/Example.vue
index 509abbfe7..c628cd4c4 100644
--- a/src/components/MultiSelect/stories/Example.vue
+++ b/src/components/MultiSelect/stories/Example.vue
@@ -1,24 +1,20 @@
 <script setup lang="ts">
-import { ref } from "vue";
-import { MultiSelect } from "frappe-ui";
+import { ref } from 'vue'
+import { MultiSelect } from 'frappe-ui'
 
-const state = ref();
+const state = ref()
 
 const options = [
-  { value: "red-apple", label: "Red Apple" },
-  { value: "blueberry-burst", label: "Blueberry Burst" },
-  { value: "orange-grove", label: "Orange Grove" },
-  { value: "banana-split", label: "Banana Split" },
-  { value: "grapes-cluster", label: "Grapes Cluster" },
-  { value: "kiwi-slice", label: "Kiwi Slice" },
-  { value: "mango-fusion", label: "Mango Fusion" },
-];
+  { value: 'red-apple', label: 'Red Apple' },
+  { value: 'blueberry-burst', label: 'Blueberry Burst' },
+  { value: 'orange-grove', label: 'Orange Grove' },
+  { value: 'banana-split', label: 'Banana Split' },
+  { value: 'grapes-cluster', label: 'Grapes Cluster' },
+  { value: 'kiwi-slice', label: 'Kiwi Slice' },
+  { value: 'mango-fusion', label: 'Mango Fusion' },
+]
 </script>
 
 <template>
-  <MultiSelect
-    :options="options"
-    v-model="state"
-    placeholder="Select fruit"
-  />
+  <MultiSelect :options="options" v-model="state" placeholder="Select fruit" />
 </template>
diff --git a/src/components/MultiSelect/stories/Footer.vue b/src/components/MultiSelect/stories/Footer.vue
index 1ae1c582e..d8e3e74a0 100644
--- a/src/components/MultiSelect/stories/Footer.vue
+++ b/src/components/MultiSelect/stories/Footer.vue
@@ -1,27 +1,24 @@
 <script setup lang="ts">
-import { ref } from "vue";
-import { Button, MultiSelect } from "frappe-ui";
-import LucideCheck from "~icons/lucide/check-check";
-import LucideTrash from "~icons/lucide/trash-2";
+import { ref } from 'vue'
+import { Button, MultiSelect } from 'frappe-ui'
+import LucideCheck from '~icons/lucide/check-check'
+import LucideTrash from '~icons/lucide/trash-2'
 
-const state = ref();
+const state = ref()
 
 const options = [
-  { value: "red-apple", label: "Red Apple" },
-  { value: "blueberry-burst", label: "Blueberry Burst" },
-  { value: "orange-grove", label: "Orange Grove" },
-  { value: "banana-split", label: "Banana Split" },
-  { value: "grapes-cluster", label: "Grapes Cluster" },
-  { value: "kiwi-slice", label: "Kiwi Slice" },
-  { value: "mango-fusion", label: "Mango Fusion" },
-];
+  { value: 'red-apple', label: 'Red Apple' },
+  { value: 'blueberry-burst', label: 'Blueberry Burst' },
+  { value: 'orange-grove', label: 'Orange Grove' },
+  { value: 'banana-split', label: 'Banana Split' },
+  { value: 'grapes-cluster', label: 'Grapes Cluster' },
+  { value: 'kiwi-slice', label: 'Kiwi Slice' },
+  { value: 'mango-fusion', label: 'Mango Fusion' },
+]
 </script>
 
 <template>
-  <MultiSelect
-    :options="options"
-    v-model="state"
-  >
+  <MultiSelect :options="options" v-model="state">
     <template #footer="{ clearAll, selectAll }">
       <div class="flex justify-between my-2">
         <Button theme="red" @click="clearAll">
diff --git a/src/components/MultiSelect/stories/Options.vue b/src/components/MultiSelect/stories/Options.vue
index 8a919a510..29ccdd7c2 100644
--- a/src/components/MultiSelect/stories/Options.vue
+++ b/src/components/MultiSelect/stories/Options.vue
@@ -1,30 +1,24 @@
-
 <script setup lang="ts">
-import { ref } from "vue";
-import { Avatar, MultiSelect } from "frappe-ui";
+import { ref } from 'vue'
+import { Avatar, MultiSelect } from 'frappe-ui'
 
-const state = ref();
+const state = ref()
 
-const img =
-  "https://images.unsplash.com/photo-1502741338009-cac2772e18bc?w=100&h=100&fit=crop";
+const img = 'https://images.unsplash.com/photo-1502741338009-cac2772e18bc?w=100&h=100&fit=crop'
 
 const options = [
-  { value: "red-apple", label: "Red Apple", img },
-  { value: "blueberry-burst", label: "Blueberry Burst", img },
-  { value: "orange-grove", label: "Orange Grove", img },
-  { value: "banana-split", label: "Banana Split", img },
-  { value: "grapes-cluster", label: "Grapes Cluster", img },
-  { value: "kiwi-slice", label: "Kiwi Slice", img },
-  { value: "mango-fusion", label: "Mango Fusion", img },
-];
+  { value: 'red-apple', label: 'Red Apple', img },
+  { value: 'blueberry-burst', label: 'Blueberry Burst', img },
+  { value: 'orange-grove', label: 'Orange Grove', img },
+  { value: 'banana-split', label: 'Banana Split', img },
+  { value: 'grapes-cluster', label: 'Grapes Cluster', img },
+  { value: 'kiwi-slice', label: 'Kiwi Slice', img },
+  { value: 'mango-fusion', label: 'Mango Fusion', img },
+]
 </script>
 
 <template>
-  <MultiSelect
-    :options="options"
-    v-model="state"
-    placeholder="Select fruit"
-  >
+  <MultiSelect :options="options" v-model="state" placeholder="Select fruit">
     <template #option="{ item }">
       <Avatar :image="item.img" size="sm" class="mr-2" />
       {{ item.label }}
diff --git a/src/components/Password/Password.vue b/src/components/Password/Password.vue
index d5aa740cf..4b443d1b9 100644
--- a/src/components/Password/Password.vue
+++ b/src/components/Password/Password.vue
@@ -1,6 +1,6 @@
 <template>
   <FormControl
-    :type='show ? "text" : "password"'
+    :type="show ? 'text' : 'password'"
     :value="modelValue || value"
     v-bind="$attrs"
     @keydown.meta.i.prevent="show = !show"
@@ -12,16 +12,10 @@
     <template #suffix>
       <Tooltip>
         <template #body>
-          <div
-            class="rounded bg-surface-gray-7 py-1.5 px-2 text-xs text-ink-white shadow-xl"
-          >
+          <div class="rounded bg-surface-gray-7 py-1.5 px-2 text-xs text-ink-white shadow-xl">
             <span class="flex items-center gap-1">
-              {{ show ? "Hide Password" : "Show Password" }}
-              <KeyboardShortcut
-                bg
-                combo="Mod+I"
-                class="!bg-surface-gray-5 !text-ink-gray-2 px-1"
-              />
+              {{ show ? 'Hide Password' : 'Show Password' }}
+              <KeyboardShortcut bg combo="Mod+I" class="!bg-surface-gray-5 !text-ink-gray-2 px-1" />
             </span>
           </div>
         </template>
@@ -38,24 +32,24 @@
   </FormControl>
 </template>
 <script setup lang="ts">
-import LucideEye from "~icons/lucide/eye";
-import LucideEyeOff from "~icons/lucide/eye-off";
-import KeyboardShortcut from "../KeyboardShortcut.vue";
-import FormControl from "../FormControl/FormControl.vue";
-import Tooltip from "../Tooltip/Tooltip.vue";
-import type { PasswordProps } from "./types";
-import { computed, ref } from "vue";
+import LucideEye from '~icons/lucide/eye'
+import LucideEyeOff from '~icons/lucide/eye-off'
+import KeyboardShortcut from '../KeyboardShortcut.vue'
+import FormControl from '../FormControl/FormControl.vue'
+import Tooltip from '../Tooltip/Tooltip.vue'
+import type { PasswordProps } from './types'
+import { computed, ref } from 'vue'
 
-const props = defineProps<PasswordProps>();
+const props = defineProps<PasswordProps>()
 
-const show = ref(false);
+const show = ref(false)
 const showEye = computed(() => {
-  let v = props.modelValue || props.value;
-  return !v?.includes("*");
-});
+  let v = props.modelValue || props.value
+  return !v?.includes('*')
+})
 
 defineSlots<{
   /** Content shown before the input field (left icon / custom content) */
-  prefix?: () => any;
-}>();
+  prefix?: () => any
+}>()
 </script>
diff --git a/src/components/Popover/Popover.vue b/src/components/Popover/Popover.vue
index f10ec0fcb..f925f6789 100644
--- a/src/components/Popover/Popover.vue
+++ b/src/components/Popover/Popover.vue
@@ -4,7 +4,7 @@
       <div
         ref="anchorRef"
         :class="['flex', $attrs.class]"
-        :style="($attrs.style as StyleValue)"
+        :style="$attrs.style as StyleValue"
         @mouseover="onMouseover"
         @mouseleave="onMouseleave"
       >
@@ -26,9 +26,7 @@
         :align="placementAlign"
         :sideOffset="offset"
         :style="{
-          minWidth: matchTargetWidth
-            ? 'var(--reka-popover-trigger-width)'
-            : undefined,
+          minWidth: matchTargetWidth ? 'var(--reka-popover-trigger-width)' : undefined,
         }"
         :class="['PopoverContent', { 'has-transition': hasTransition }]"
         @mouseover="
@@ -40,10 +38,7 @@
         @interact-outside="onInteractOutside"
       >
         <div class="relative" :class="['body-container', popoverClass]">
-          <slot
-            name="body"
-            v-bind="{ togglePopover, updatePosition, open, close, isOpen }"
-          >
+          <slot name="body" v-bind="{ togglePopover, updatePosition, open, close, isOpen }">
             <div class="rounded-lg border bg-surface-modal shadow-xl">
               <slot
                 name="body-main"
@@ -65,12 +60,7 @@
 
 <script setup lang="ts">
 import { computed, ref, onUnmounted, type StyleValue } from 'vue'
-import {
-  PopoverAnchor,
-  PopoverContent,
-  PopoverPortal,
-  PopoverRoot,
-} from 'reka-ui'
+import { PopoverAnchor, PopoverContent, PopoverPortal, PopoverRoot } from 'reka-ui'
 import { PopoverProps, PopoverEmits } from './types'
 
 const props = withDefaults(defineProps<PopoverProps>(), {
@@ -222,10 +212,7 @@ function onInteractOutside(event: Event) {
 
   // Check if the click is on the trigger/anchor element
   const target = event.target as Element
-  if (
-    anchorRef.value &&
-    (anchorRef.value.contains(target) || anchorRef.value === target)
-  ) {
+  if (anchorRef.value && (anchorRef.value.contains(target) || anchorRef.value === target)) {
     event.preventDefault()
     return
   }
diff --git a/src/components/Popover/index.ts b/src/components/Popover/index.ts
index c20021652..2188e6752 100644
--- a/src/components/Popover/index.ts
+++ b/src/components/Popover/index.ts
@@ -1 +1 @@
-export { default as Popover } from './Popover.vue'
\ No newline at end of file
+export { default as Popover } from './Popover.vue'
diff --git a/src/components/Progress/Progress.vue b/src/components/Progress/Progress.vue
index ed6e2fe55..dd24904c0 100644
--- a/src/components/Progress/Progress.vue
+++ b/src/components/Progress/Progress.vue
@@ -1,9 +1,6 @@
 <template>
   <div class="w-full space-y-[10px]">
-    <div
-      v-if="props.label || props.hint"
-      class="flex items-baseline justify-between"
-    >
+    <div v-if="props.label || props.hint" class="flex items-baseline justify-between">
       <span v-if="props.label" class="text-base font-medium text-ink-gray-8">
         {{ props.label }}
       </span>
@@ -12,9 +9,7 @@
 
       <span class="self-end" v-if="props.hint || $slots.hint">
         <slot name="hint">
-          <span class="text-base font-medium text-ink-gray-4">
-            {{ props.value }}%
-          </span>
+          <span class="text-base font-medium text-ink-gray-4"> {{ props.value }}% </span>
         </slot>
       </span>
     </div>
@@ -39,11 +34,7 @@
         v-else
         v-for="index in intervalCount"
         class="h-full w-full"
-        :class="
-          index <= filledIntervalCount
-            ? 'bg-surface-gray-7'
-            : 'bg-surface-gray-2'
-        "
+        :class="index <= filledIntervalCount ? 'bg-surface-gray-7' : 'bg-surface-gray-2'"
       ></div>
     </div>
   </div>
@@ -72,9 +63,7 @@ const indicatorContainerClasses = computed(() => {
     xl: 'h-3',
   }[props.size]
 
-  const layoutClasses = props.intervals
-    ? 'flex space-x-1'
-    : 'relative bg-surface-gray-2'
+  const layoutClasses = props.intervals ? 'flex space-x-1' : 'relative bg-surface-gray-2'
 
   return [heightClass, layoutClasses]
 })
@@ -88,7 +77,7 @@ const filledIntervalCount = computed(() => {
 })
 
 defineSlots<{
-  /** Custom content for the hint area (usually displays the progress value). 
+  /** Custom content for the hint area (usually displays the progress value).
    * If not provided, defaults to showing `props.value` followed by `%`.
    */
   hint?: () => any
diff --git a/src/components/Progress/index.ts b/src/components/Progress/index.ts
index 93ff00025..c096672f2 100644
--- a/src/components/Progress/index.ts
+++ b/src/components/Progress/index.ts
@@ -1,2 +1,2 @@
 export { default as Progress } from './Progress.vue'
-export type { ProgressProps } from './types'
\ No newline at end of file
+export type { ProgressProps } from './types'
diff --git a/src/components/Progress/stories/Intervals.vue b/src/components/Progress/stories/Intervals.vue
index 0bb25936c..fc0e93cc5 100644
--- a/src/components/Progress/stories/Intervals.vue
+++ b/src/components/Progress/stories/Intervals.vue
@@ -3,10 +3,5 @@ import { Progress } from 'frappe-ui'
 </script>
 
 <template>
-  <Progress
-    :value="30"
-    label="Progress"
-    :intervals="true"
-    :interval-count="5"
-  />
+  <Progress :value="30" label="Progress" :intervals="true" :interval-count="5" />
 </template>
diff --git a/src/components/Rating/index.ts b/src/components/Rating/index.ts
index f893a0100..abf9c092c 100644
--- a/src/components/Rating/index.ts
+++ b/src/components/Rating/index.ts
@@ -1,2 +1,2 @@
 export { default as Rating } from './Rating.vue'
-export type { RatingProps } from './types'
\ No newline at end of file
+export type { RatingProps } from './types'
diff --git a/src/components/Select/Select.vue b/src/components/Select/Select.vue
index 81a20163d..41cd2f64b 100644
--- a/src/components/Select/Select.vue
+++ b/src/components/Select/Select.vue
@@ -54,16 +54,12 @@ const selectClasses = computed(() => {
   let variantClasses = {
     subtle:
       'border border-[--surface-gray-2] bg-surface-gray-2 hover:border-outline-gray-modals hover:bg-surface-gray-3',
-    outline:
-      'border border-outline-gray-2 bg-surface-white hover:border-outline-gray-3',
-    ghost:
-      'bg-transparent border-transparent hover:bg-surface-gray-3 focus:bg-surface-gray-3',
+    outline: 'border border-outline-gray-2 bg-surface-white hover:border-outline-gray-3',
+    ghost: 'bg-transparent border-transparent hover:bg-surface-gray-3 focus:bg-surface-gray-3',
     disabled: [
       'border',
       props.variant !== 'ghost' ? 'bg-surface-gray-1' : '',
-      props.variant === 'outline'
-        ? 'border-outline-gray-2'
-        : 'border-transparent',
+      props.variant === 'outline' ? 'border-outline-gray-2' : 'border-transparent',
     ],
   }[variant]
 
@@ -95,7 +91,6 @@ defineSlots<{
   /** Custom content at the bottom of the dropdown */
   footer?: () => any
 }>()
-
 </script>
 
 <template>
diff --git a/src/components/Select/index.ts b/src/components/Select/index.ts
index 3dae8e304..1dde67c02 100644
--- a/src/components/Select/index.ts
+++ b/src/components/Select/index.ts
@@ -1,2 +1,2 @@
 export { default as Select } from './Select.vue'
-export type { SelectProps } from './types'
\ No newline at end of file
+export type { SelectProps } from './types'
diff --git a/src/components/Select/stories/Example.vue b/src/components/Select/stories/Example.vue
index 8c23f30a7..a01b0621d 100644
--- a/src/components/Select/stories/Example.vue
+++ b/src/components/Select/stories/Example.vue
@@ -37,6 +37,6 @@ const options = [
 </script>
 
 <template>
-    <Select :options="options" v-model="value" />
-    {{ value }}
+  <Select :options="options" v-model="value" />
+  {{ value }}
 </template>
diff --git a/src/components/Select/stories/OptionSlot.vue b/src/components/Select/stories/OptionSlot.vue
index efe484cdd..2ce883e82 100644
--- a/src/components/Select/stories/OptionSlot.vue
+++ b/src/components/Select/stories/OptionSlot.vue
@@ -42,14 +42,12 @@ const options = [
   },
 ]
 
-const activeImg = computed(
-  () => options.find((x) => x.value === value.value)?.img,
-)
+const activeImg = computed(() => options.find((x) => x.value === value.value)?.img)
 </script>
 
 <template>
   <Select :options="options" v-model="value">
-    <template #prefix v-if='activeImg'>
+    <template #prefix v-if="activeImg">
       <Avatar size="sm" :image="activeImg" />
     </template>
     <template #option="{ option }">
diff --git a/src/components/Sidebar/Sidebar.vue b/src/components/Sidebar/Sidebar.vue
index c1526e085..9be9570ad 100644
--- a/src/components/Sidebar/Sidebar.vue
+++ b/src/components/Sidebar/Sidebar.vue
@@ -31,10 +31,7 @@
     </SidebarSection>
 
     <div class="mt-auto flex flex-col gap-2">
-      <slot
-        name="footer-items"
-        v-bind="{ isCollapsed: shouldCollapse, isMobile }"
-      />
+      <slot name="footer-items" v-bind="{ isCollapsed: shouldCollapse, isMobile }" />
       <SidebarItem
         v-if="!props.disableCollapse"
         :label="shouldCollapse ? 'Expand' : 'Collapse'"
diff --git a/src/components/Sidebar/SidebarHeader.vue b/src/components/Sidebar/SidebarHeader.vue
index a9ccc1c5f..b1ff30356 100644
--- a/src/components/Sidebar/SidebarHeader.vue
+++ b/src/components/Sidebar/SidebarHeader.vue
@@ -30,11 +30,7 @@
         </div>
         <div
           class="flex flex-1 flex-col text-left duration-300 ease-in-out truncate"
-          :class="
-            isCollapsed
-              ? 'ml-0 w-0 overflow-hidden opacity-0'
-              : 'ml-2 w-auto opacity-100'
-          "
+          :class="isCollapsed ? 'ml-0 w-0 overflow-hidden opacity-0' : 'ml-2 w-auto opacity-100'"
         >
           <div class="text-base font-medium text-ink-gray-8 leading-none">
             {{ props.title }}
@@ -45,11 +41,7 @@
         </div>
         <div
           class="duration-300 ease-in-out"
-          :class="
-            isCollapsed
-              ? 'ml-0 w-0 overflow-hidden opacity-0'
-              : 'ml-2 w-auto opacity-100'
-          "
+          :class="isCollapsed ? 'ml-0 w-0 overflow-hidden opacity-0' : 'ml-2 w-auto opacity-100'"
         >
           <LucideChevronDown class="h-4 w-4 text-ink-gray-7" />
         </div>
diff --git a/src/components/Sidebar/SidebarItem.vue b/src/components/Sidebar/SidebarItem.vue
index 3e94d56b3..fae37972b 100644
--- a/src/components/Sidebar/SidebarItem.vue
+++ b/src/components/Sidebar/SidebarItem.vue
@@ -3,24 +3,14 @@
     :label="props.label"
     @click="handleClick"
     class="!w-full focus-visible:ring-0 focus:outline-none"
-    :class="
-      props.isActive
-        ? '!bg-surface-selected shadow-sm'
-        : 'hover:bg-surface-gray-2'
-    "
+    :class="props.isActive ? '!bg-surface-selected shadow-sm' : 'hover:bg-surface-gray-2'"
     variant="ghost"
     :accesskey="props.accessKey"
   >
     <template #icon>
-      <div
-        class="flex w-full items-center justify-between transition-all ease-in-out px-2 py-1"
-      >
+      <div class="flex w-full items-center justify-between transition-all ease-in-out px-2 py-1">
         <div class="flex items-center truncate">
-          <Tooltip
-            :text="props.label"
-            placement="right"
-            :disabled="!isCollapsed"
-          >
+          <Tooltip :text="props.label" placement="right" :disabled="!isCollapsed">
             <span class="grid flex-shrink-0 place-items-center">
               <slot name="icon">
                 <span
@@ -29,26 +19,15 @@
                 >
                   {{ props.icon }}
                 </span>
-                <component
-                  v-else
-                  :is="props.icon"
-                  class="size-4 text-ink-gray-6"
-                />
+                <component v-else :is="props.icon" class="size-4 text-ink-gray-6" />
               </slot>
             </span>
           </Tooltip>
-          <Tooltip
-            :text="props.label"
-            placement="right"
-            :disabled="isCollapsed"
-            :hoverDelay="1.5"
-          >
+          <Tooltip :text="props.label" placement="right" :disabled="isCollapsed" :hoverDelay="1.5">
             <span
               class="flex-1 flex-shrink-0 truncate text-sm transition-all ease-in-out"
               :class="
-                isCollapsed
-                  ? 'ml-0 w-0 overflow-hidden opacity-0'
-                  : 'ml-2 w-auto opacity-100'
+                isCollapsed ? 'ml-0 w-0 overflow-hidden opacity-0' : 'ml-2 w-auto opacity-100'
               "
             >
               {{ props.label }}
@@ -57,11 +36,7 @@
         </div>
         <div
           class="transition-all ease-in-out"
-          :class="
-            isCollapsed
-              ? 'ml-0 w-0 overflow-hidden opacity-0'
-              : 'ml-auto w-auto opacity-100'
-          "
+          :class="isCollapsed ? 'ml-0 w-0 overflow-hidden opacity-0' : 'ml-auto w-auto opacity-100'"
         >
           <slot name="suffix">
             <span v-if="props.suffix" class="text-sm text-ink-gray-4">
diff --git a/src/components/Sidebar/SidebarSection.vue b/src/components/Sidebar/SidebarSection.vue
index 4e08475d8..f7e5a4aaa 100644
--- a/src/components/Sidebar/SidebarSection.vue
+++ b/src/components/Sidebar/SidebarSection.vue
@@ -8,11 +8,7 @@
     >
       <h3
         class="h-4 text-sm text-ink-gray-5 transition-all duration-300 ease-in-out"
-        :class="
-          isSidebarCollapsed
-            ? 'w-0 overflow-hidden opacity-0'
-            : 'w-auto opacity-100'
-        "
+        :class="isSidebarCollapsed ? 'w-0 overflow-hidden opacity-0' : 'w-auto opacity-100'"
       >
         {{ props.label }}
       </h3>
diff --git a/src/components/Slider/Slider.vue b/src/components/Slider/Slider.vue
index 9ce745d0c..a63b2246e 100644
--- a/src/components/Slider/Slider.vue
+++ b/src/components/Slider/Slider.vue
@@ -1,37 +1,26 @@
 <script setup lang="ts">
-import { SliderRange, SliderRoot, SliderThumb, SliderTrack } from "reka-ui";
-import type { SliderProps } from "./types";
+import { SliderRange, SliderRoot, SliderThumb, SliderTrack } from 'reka-ui'
+import type { SliderProps } from './types'
 
-const model = defineModel({ default: [] });
+const model = defineModel({ default: [] })
 
 withDefaults(defineProps<SliderProps>(), {
   step: 1,
   max: 100,
   min: 0,
-});
+})
 </script>
 
 <template>
-  <SliderRoot
-    v-model="model"
-    class="relative flex items-center select-none touch-none"
-    :max="100"
-  >
+  <SliderRoot v-model="model" class="relative flex items-center select-none touch-none" :max="100">
     <SliderTrack class="bg-surface-gray-3 relative grow rounded h-1">
       <SliderRange class="absolute bg-surface-gray-7 rounded h-full" />
     </SliderTrack>
 
     <SliderThumb
-      v-for="_,i in model"
-      :key='"slider-thumb-" + i'
-      class="
-        size-4 rounded-full
-        bg-surface-white dark:bg-surface-gray-7
-        shadow-md
-        transition-shadow duration-200 ease-out
-        hover:ring-[6px] ring-gray-600/20 dark:ring-gray-100/20
-        focus:outline-none
-      "
+      v-for="(_, i) in model"
+      :key="'slider-thumb-' + i"
+      class="size-4 rounded-full bg-surface-white dark:bg-surface-gray-7 shadow-md transition-shadow duration-200 ease-out hover:ring-[6px] ring-gray-600/20 dark:ring-gray-100/20 focus:outline-none"
       aria-label="Volume"
     />
   </SliderRoot>
diff --git a/src/components/Switch/Switch.vue b/src/components/Switch/Switch.vue
index 6019ca081..30b79aa90 100644
--- a/src/components/Switch/Switch.vue
+++ b/src/components/Switch/Switch.vue
@@ -8,11 +8,7 @@
           :class="iconClasses"
           aria-hidden="true"
         />
-        <component
-          :class="iconClasses"
-          v-else-if="props.icon"
-          :is="props.icon"
-        />
+        <component :class="iconClasses" v-else-if="props.icon" :is="props.icon" />
         <label :class="switchLabelClasses" :for="id">
           {{ props.label }}
         </label>
@@ -90,9 +86,7 @@ const iconClasses = 'mr-2 h-4 w-4 flex-shrink-0 text-ink-gray-6'
 const switchLabelClasses = computed(() => {
   return [
     'font-medium leading-normal',
-    props.disabled && !props.description
-      ? 'text-ink-gray-4'
-      : 'text-ink-gray-8',
+    props.disabled && !props.description ? 'text-ink-gray-4' : 'text-ink-gray-8',
     props.size === 'md' ? 'text-lg' : 'text-base',
     props.labelClasses,
   ]
@@ -107,9 +101,7 @@ const switchGroupClasses = computed(() => {
     )
 
     classes.push(
-      props.disabled
-        ? 'cursor-not-allowed'
-        : 'hover:bg-surface-gray-3 active:bg-surface-gray-4',
+      props.disabled ? 'cursor-not-allowed' : 'hover:bg-surface-gray-3 active:bg-surface-gray-4',
     )
   } else {
     classes.push('items-start')
diff --git a/src/components/Switch/index.ts b/src/components/Switch/index.ts
index 0cf115f9d..0d0b52dfd 100644
--- a/src/components/Switch/index.ts
+++ b/src/components/Switch/index.ts
@@ -1,2 +1,2 @@
 export { default as Switch } from './Switch.vue'
-export type { SwitchProps } from './types'
\ No newline at end of file
+export type { SwitchProps } from './types'
diff --git a/src/components/Switch/stories/Labels.vue b/src/components/Switch/stories/Labels.vue
index 7103ccf89..9727ca4f6 100644
--- a/src/components/Switch/stories/Labels.vue
+++ b/src/components/Switch/stories/Labels.vue
@@ -3,15 +3,8 @@ import { Switch } from 'frappe-ui'
 </script>
 
 <template>
-  <Switch
-    label="Enable Notifications"
-    description="Get notified when something happens."
-  />
-  <Switch
-    label="Enable Notifications"
-    icon="inbox"
-    description="This has an icon."
-  />
+  <Switch label="Enable Notifications" description="Get notified when something happens." />
+  <Switch label="Enable Notifications" icon="inbox" description="This has an icon." />
 
   <Switch label="This is a disabled switch" :disabled="true" />
 </template>
diff --git a/src/components/TabButtons/TabButtons.story.vue b/src/components/TabButtons/TabButtons.story.vue
index ba013ac92..25e68c94e 100644
--- a/src/components/TabButtons/TabButtons.story.vue
+++ b/src/components/TabButtons/TabButtons.story.vue
@@ -1,20 +1,18 @@
 <script setup lang="ts">
-import { ref } from "vue";
-import Story from "@/components/Story.vue";
-import { TabButtons } from "frappe-ui";
-const currentTab = ref("mytasks");
+import { ref } from 'vue'
+import Story from '@/components/Story.vue'
+import { TabButtons } from 'frappe-ui'
+const currentTab = ref('mytasks')
 </script>
 
 <template>
   <div class="flex w-4/5">
     <Story>
       <TabButtons
-        :buttons='
-          [
-            { label: "Tasks assigned to me", value: "mytasks" },
-            { label: "Tasks created by me", value: "created" },
-          ]
-        '
+        :buttons="[
+          { label: 'Tasks assigned to me', value: 'mytasks' },
+          { label: 'Tasks created by me', value: 'created' },
+        ]"
         v-model="currentTab"
       />
     </Story>
diff --git a/src/components/TabButtons/TabButtons.vue b/src/components/TabButtons/TabButtons.vue
index 13b71fcaa..48f253e6b 100644
--- a/src/components/TabButtons/TabButtons.vue
+++ b/src/components/TabButtons/TabButtons.vue
@@ -1,8 +1,6 @@
 <template>
   <RadioGroup v-model="value">
-    <div
-      class="flex space-x-0.5 rounded-md bg-surface-gray-2 h-7 items-center px-[1px] text-sm"
-    >
+    <div class="flex space-x-0.5 rounded-md bg-surface-gray-2 h-7 items-center px-[1px] text-sm">
       <RadioGroupOption
         as="div"
         v-for="button in buttons"
@@ -18,11 +16,7 @@
           :class="[
             active ? 'ring-outline-gray-2 focus-visible:ring' : '',
             checked && '!bg-surface-white',
-            button.disabled
-              ? ''
-              : checked
-                ? ' text-ink-gray-8 shadow'
-                : '!text-ink-gray-5',
+            button.disabled ? '' : checked ? ' text-ink-gray-8 shadow' : '!text-ink-gray-5',
           ]"
         >
           <RadioGroupLabel
diff --git a/src/components/TabButtons/index.ts b/src/components/TabButtons/index.ts
index a5e78227b..387c73d2e 100644
--- a/src/components/TabButtons/index.ts
+++ b/src/components/TabButtons/index.ts
@@ -1 +1 @@
-export { default as TabButtons } from './TabButtons.vue'
\ No newline at end of file
+export { default as TabButtons } from './TabButtons.vue'
diff --git a/src/components/Tabs/Tabs.vue b/src/components/Tabs/Tabs.vue
index 9e8eb055c..3c543fb38 100644
--- a/src/components/Tabs/Tabs.vue
+++ b/src/components/Tabs/Tabs.vue
@@ -1,11 +1,5 @@
 <script setup lang="ts">
-import {
-  TabsContent,
-  TabsIndicator,
-  TabsList,
-  TabsRoot,
-  TabsTrigger,
-} from 'reka-ui'
+import { TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger } from 'reka-ui'
 
 import type { TabProps } from './types'
 import { h } from 'vue'
@@ -62,8 +56,7 @@ defineSlots<{
             class="flex items-center gap-1.5 text-base text-ink-gray-5 duration-300 ease-in-out hover:text-ink-gray-9 data-[state=active]:text-ink-gray-9"
             :class="{ 'px-2.5': props.vertical, 'py-2.5': !props.vertical }"
           >
-            <component v-if="tab.icon" :is="tab.icon" class="size-4">
-            </component>
+            <component v-if="tab.icon" :is="tab.icon" class="size-4"> </component>
 
             {{ tab.label }}
           </component>
@@ -71,11 +64,7 @@ defineSlots<{
       </TabsTrigger>
     </TabsList>
 
-    <TabsContent
-      v-for="(tab, i) in props.tabs"
-      :value="i"
-      class="flex flex-col overflow-auto"
-    >
+    <TabsContent v-for="(tab, i) in props.tabs" :value="i" class="flex flex-col overflow-auto">
       <slot name="tab-panel" v-bind="{ tab }" />
     </TabsContent>
   </TabsRoot>
diff --git a/src/components/Tabs/stories/Orientation.vue b/src/components/Tabs/stories/Orientation.vue
index 5ec29dc6d..c48505984 100644
--- a/src/components/Tabs/stories/Orientation.vue
+++ b/src/components/Tabs/stories/Orientation.vue
@@ -7,8 +7,7 @@ const state = reactive({
   tabs: [
     {
       label: 'Github',
-      content:
-        'Github is a code hosting platform for version control and collaboration',
+      content: 'Github is a code hosting platform for version control and collaboration',
     },
     {
       label: 'Twitter',
@@ -17,8 +16,7 @@ const state = reactive({
     },
     {
       label: 'Linkedin',
-      content:
-        'LinkedIn is an American business and employment-oriented online service',
+      content: 'LinkedIn is an American business and employment-oriented online service',
     },
   ],
 })
@@ -31,12 +29,7 @@ const state = reactive({
     </template>
   </Tabs>
 
-  <Tabs
-    class="border rounded"
-    v-model="state.index"
-    :tabs="state.tabs"
-    :vertical="true"
-  >
+  <Tabs class="border rounded" v-model="state.index" :tabs="state.tabs" :vertical="true">
     <template #tab-panel="{ tab }">
       <div class="p-5">{{ tab.content }}</div>
     </template>
diff --git a/src/components/Tabs/types.ts b/src/components/Tabs/types.ts
index d4d26e913..7674c8fe4 100644
--- a/src/components/Tabs/types.ts
+++ b/src/components/Tabs/types.ts
@@ -18,4 +18,4 @@ export interface TabProps {
 
   /** Renders tabs vertically instead of horizontally */
   vertical?: boolean
-}
\ No newline at end of file
+}
diff --git a/src/components/TextEditor/TextEditor.vue b/src/components/TextEditor/TextEditor.vue
index 4e0ddd612..3e7af0656 100644
--- a/src/components/TextEditor/TextEditor.vue
+++ b/src/components/TextEditor/TextEditor.vue
@@ -44,12 +44,7 @@ import Typography from '@tiptap/extension-typography'
 import { TextStyleKit } from '@tiptap/extension-text-style'
 import { TaskList, TaskItem } from '@tiptap/extension-list'
 import TextAlign from '@tiptap/extension-text-align'
-import {
-  Table,
-  TableRow,
-  TableCell,
-  TableHeader,
-} from '@tiptap/extension-table'
+import { Table, TableRow, TableCell, TableHeader } from '@tiptap/extension-table'
 
 import { ImageExtension } from './extensions/image'
 import { VideoExtension } from './extensions/video-extension'
diff --git a/src/components/TextEditor/commands.js b/src/components/TextEditor/commands.js
index c359f6a2c..32cba0df1 100644
--- a/src/components/TextEditor/commands.js
+++ b/src/components/TextEditor/commands.js
@@ -40,48 +40,42 @@ export default {
     label: 'Heading 1',
     text: 'H1',
     icon: H1,
-    action: (editor) =>
-      editor.chain().focus().toggleHeading({ level: 1 }).run(),
+    action: (editor) => editor.chain().focus().toggleHeading({ level: 1 }).run(),
     isActive: (editor) => editor.isActive('heading', { level: 1 }),
   },
   'Heading 2': {
     label: 'Heading 2',
     text: 'H2',
     icon: H2,
-    action: (editor) =>
-      editor.chain().focus().toggleHeading({ level: 2 }).run(),
+    action: (editor) => editor.chain().focus().toggleHeading({ level: 2 }).run(),
     isActive: (editor) => editor.isActive('heading', { level: 2 }),
   },
   'Heading 3': {
     label: 'Heading 3',
     text: 'H3',
     icon: H3,
-    action: (editor) =>
-      editor.chain().focus().toggleHeading({ level: 3 }).run(),
+    action: (editor) => editor.chain().focus().toggleHeading({ level: 3 }).run(),
     isActive: (editor) => editor.isActive('heading', { level: 3 }),
   },
   'Heading 4': {
     label: 'Heading 4',
     text: 'H4',
     icon: H4,
-    action: (editor) =>
-      editor.chain().focus().toggleHeading({ level: 4 }).run(),
+    action: (editor) => editor.chain().focus().toggleHeading({ level: 4 }).run(),
     isActive: (editor) => editor.isActive('heading', { level: 4 }),
   },
   'Heading 5': {
     label: 'Heading 5',
     text: 'H5',
     icon: H5,
-    action: (editor) =>
-      editor.chain().focus().toggleHeading({ level: 5 }).run(),
+    action: (editor) => editor.chain().focus().toggleHeading({ level: 5 }).run(),
     isActive: (editor) => editor.isActive('heading', { level: 5 }),
   },
   'Heading 6': {
     label: 'Heading 6',
     text: 'H6',
     icon: H6,
-    action: (editor) =>
-      editor.chain().focus().toggleHeading({ level: 6 }).run(),
+    action: (editor) => editor.chain().focus().toggleHeading({ level: 6 }).run(),
     isActive: (editor) => editor.isActive('heading', { level: 6 }),
   },
   Bold: {
@@ -147,8 +141,7 @@ export default {
   FontColor: {
     label: 'Font Color',
     icon: FontColor,
-    isActive: (editor) =>
-      editor.getAttributes('textStyle')?.color || editor.isActive('highlight'),
+    isActive: (editor) => editor.getAttributes('textStyle')?.color || editor.isActive('highlight'),
     component: defineAsyncComponent(() => import('./components/FontColor.vue')),
   },
   Blockquote: {
@@ -173,33 +166,25 @@ export default {
     label: 'Link',
     icon: Link,
     isActive: (editor) => editor.isActive('link'),
-    component: defineAsyncComponent(
-      () => import('./components/InsertLink.vue'),
-    ),
+    component: defineAsyncComponent(() => import('./components/InsertLink.vue')),
   },
   Image: {
     label: 'Image',
     icon: Image,
     isActive: (editor) => false,
-    component: defineAsyncComponent(
-      () => import('./components/InsertImage.vue'),
-    ),
+    component: defineAsyncComponent(() => import('./components/InsertImage.vue')),
   },
   Video: {
     label: 'Video',
     icon: Video,
     isActive: (editor) => false,
-    component: defineAsyncComponent(
-      () => import('./components/InsertVideo.vue'),
-    ),
+    component: defineAsyncComponent(() => import('./components/InsertVideo.vue')),
   },
   Iframe: {
     label: 'Embed',
     icon: GalleryVertical,
     isActive: (editor) => editor.isActive('iframe'),
-    component: defineAsyncComponent(
-      () => import('./extensions/iframe/InsertIframe.vue'),
-    ),
+    component: defineAsyncComponent(() => import('./extensions/iframe/InsertIframe.vue')),
   },
   Undo: {
     label: 'Undo',
@@ -217,11 +202,7 @@ export default {
     label: 'Insert Table',
     icon: Table,
     action: (editor) =>
-      editor
-        .chain()
-        .focus()
-        .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
-        .run(),
+      editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run(),
     isActive: (editor) => editor.can().deleteTable(),
   },
   AddColumnBefore: {
@@ -299,8 +280,7 @@ export default {
   TableOfContents: {
     label: 'Table of Contents',
     icon: TableOfContentsIcon,
-    action: (editor) =>
-      editor.chain().focus().insertTableOfContentsNode().run(),
+    action: (editor) => editor.chain().focus().insertTableOfContentsNode().run(),
     isActive: (editor) => editor.isActive('tocNode'),
   },
   Separator: {
diff --git a/src/components/TextEditor/components/CodeBlockComponent.vue b/src/components/TextEditor/components/CodeBlockComponent.vue
index 067807f90..efd9c307d 100644
--- a/src/components/TextEditor/components/CodeBlockComponent.vue
+++ b/src/components/TextEditor/components/CodeBlockComponent.vue
@@ -100,9 +100,10 @@ export default {
 .ProseMirror pre {
   background: #0d0d0d;
   color: #fff;
-  font-family: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
-    'Roboto Mono', 'Oxygen Mono', 'Ubuntu Mono', 'Source Code Pro', 'Fira Mono',
-    'Droid Sans Mono', 'Consolas', 'Courier New', monospace;
+  font-family:
+    ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', 'Oxygen Mono',
+    'Ubuntu Mono', 'Source Code Pro', 'Fira Mono', 'Droid Sans Mono', 'Consolas', 'Courier New',
+    monospace;
   padding: 0.75rem 1rem;
   border-radius: 0.75rem;
   caret-color: #fff;
diff --git a/src/components/TextEditor/components/FontColor.vue b/src/components/TextEditor/components/FontColor.vue
index a8da8b603..0b5d33b79 100644
--- a/src/components/TextEditor/components/FontColor.vue
+++ b/src/components/TextEditor/components/FontColor.vue
@@ -1,9 +1,7 @@
 <template>
   <Popover transition="default">
     <template #target="{ togglePopover, isOpen }">
-      <slot
-        v-bind="{ onClick: () => togglePopover(), isActive: isOpen }"
-      ></slot>
+      <slot v-bind="{ onClick: () => togglePopover(), isActive: isOpen }"></slot>
     </template>
     <template #body-main>
       <div class="p-2">
@@ -58,22 +56,14 @@ export default {
   methods: {
     setBackgroundColor(color) {
       if (color.name != 'Default') {
-        this.editor
-          .chain()
-          .focus()
-          .toggleHighlightByName(color.name.toLowerCase())
-          .run()
+        this.editor.chain().focus().toggleHighlightByName(color.name.toLowerCase()).run()
       } else {
         this.editor.chain().focus().unsetHighlight().run()
       }
     },
     setForegroundColor(color) {
       if (color.name != 'Default') {
-        this.editor
-          .chain()
-          .focus()
-          .setColorByName(color.name.toLowerCase())
-          .run()
+        this.editor.chain().focus().setColorByName(color.name.toLowerCase()).run()
       } else {
         this.editor.chain().focus().unsetColor().run()
       }
diff --git a/src/components/TextEditor/components/ImageViewerModal.vue b/src/components/TextEditor/components/ImageViewerModal.vue
index e274ee319..6d6447eb1 100644
--- a/src/components/TextEditor/components/ImageViewerModal.vue
+++ b/src/components/TextEditor/components/ImageViewerModal.vue
@@ -16,11 +16,7 @@
         @touchmove="handleActivity"
       >
         <!-- Dedicated Backdrop -->
-        <div
-          class="absolute inset-0 z-0"
-          ref="backdropElement"
-          @click="close"
-        ></div>
+        <div class="absolute inset-0 z-0" ref="backdropElement" @click="close"></div>
 
         <!-- Image Container -->
         <div class="relative z-10 flex flex-col items-center">
@@ -30,12 +26,7 @@
             class="max-w-screen max-h-screen object-contain block"
             :style="{
               transform: `scale(${zoomLevel / 100}) translate(${panPosition.x}px, ${panPosition.y}px)`,
-              cursor:
-                zoomLevel > 100
-                  ? isMousePanning
-                    ? 'grabbing'
-                    : 'grab'
-                  : 'default',
+              cursor: zoomLevel > 100 ? (isMousePanning ? 'grabbing' : 'grab') : 'default',
               transition:
                 isPanning || isPinching || isAnimatingPan
                   ? 'none'
@@ -132,9 +123,7 @@
               </button>
             </Tooltip>
 
-            <Tooltip
-              :text="isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'"
-            >
+            <Tooltip :text="isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'">
               <button
                 class="p-2 hover:bg-gray-900 rounded-r focus:outline-none hidden sm:block"
                 @click.stop="toggleFullscreen"
@@ -148,10 +137,7 @@
           <!-- Close button -->
           <div class="bg-black/65 rounded flex items-center">
             <Tooltip text="Close">
-              <button
-                class="p-2 hover:bg-gray-900 rounded focus:outline-none"
-                @click.stop="close"
-              >
+              <button class="p-2 hover:bg-gray-900 rounded focus:outline-none" @click.stop="close">
                 <LucideX class="size-4" />
               </button>
             </Tooltip>
@@ -163,15 +149,7 @@
 </template>
 
 <script setup lang="ts">
-import {
-  ref,
-  onMounted,
-  onUnmounted,
-  useTemplateRef,
-  computed,
-  toRef,
-  watch,
-} from 'vue'
+import { ref, onMounted, onUnmounted, useTemplateRef, computed, toRef, watch } from 'vue'
 import Tooltip from '../../Tooltip/Tooltip.vue'
 import { useTouchHandler } from '../../../composables/useTouchHandler'
 import { useImageNavigation } from '../../../composables/useImageNavigation'
diff --git a/src/components/TextEditor/components/LinkPopup.vue b/src/components/TextEditor/components/LinkPopup.vue
index 25596c36c..3650b99a6 100644
--- a/src/components/TextEditor/components/LinkPopup.vue
+++ b/src/components/TextEditor/components/LinkPopup.vue
@@ -1,7 +1,5 @@
 <template>
-  <div
-    class="p-2 w-72 flex items-center gap-2 bg-surface-white shadow-xl rounded"
-  >
+  <div class="p-2 w-72 flex items-center gap-2 bg-surface-white shadow-xl rounded">
     <TextInput
       v-if="edit"
       ref="input"
@@ -23,12 +21,7 @@
     </a>
     <div class="shrink-0 flex items-center gap-1.5 ml-auto">
       <template v-if="edit">
-        <Button
-          @click="submitLink"
-          tooltip="Submit"
-          :icon="LucideCheck"
-          variant="subtle"
-        />
+        <Button @click="submitLink" tooltip="Submit" :icon="LucideCheck" variant="subtle" />
         <Button
           @click="props.href ? (edit = false) : $emit('updateHref', '')"
           tooltip="Exit"
@@ -37,18 +30,8 @@
         />
       </template>
       <template v-else>
-        <Button
-          @click="copyLink"
-          tooltip="Copy"
-          :icon="LucideCopy"
-          variant="subtle"
-        />
-        <Button
-          @click="edit = true"
-          tooltip="Edit"
-          :icon="LucidePencil"
-          variant="subtle"
-        />
+        <Button @click="copyLink" tooltip="Copy" :icon="LucideCopy" variant="subtle" />
+        <Button @click="edit = true" tooltip="Edit" :icon="LucidePencil" variant="subtle" />
         <Button
           tooltip="Remove"
           variant="subtle"
diff --git a/src/components/TextEditor/components/MediaNodeView.vue b/src/components/TextEditor/components/MediaNodeView.vue
index 1a4546427..a8a62489f 100644
--- a/src/components/TextEditor/components/MediaNodeView.vue
+++ b/src/components/TextEditor/components/MediaNodeView.vue
@@ -266,90 +266,141 @@ const wrapperClasses = (float: string) => [
 
 <template>
   <NodeViewWrapper as="div" :class="node.attrs.float ? wrapperClasses(node.attrs.float) : 'my-2'">
-    <div ref="containerRef" class="group relative overflow-hidden not-prose rounded-[2px]" :class="[
-      {
-        'ring-2 ring-outline-gray-3 ring-offset-2': selected,
-      },
-      node.attrs.align === 'center' || !node.attrs.align ? 'mx-auto' : '',
-      node.attrs.align === 'right' ? 'ml-auto mr-0' : '',
-      node.attrs.align === 'left' ? 'mr-auto ml-0' : '',
-      !node.attrs.float && 'block max-w-full',
-    ]" :style="{
-      width: node.attrs.width ? `${node.attrs.width}px` : 'auto',
-    }">
+    <div
+      ref="containerRef"
+      class="group relative overflow-hidden not-prose rounded-[2px]"
+      :class="[
+        {
+          'ring-2 ring-outline-gray-3 ring-offset-2': selected,
+        },
+        node.attrs.align === 'center' || !node.attrs.align ? 'mx-auto' : '',
+        node.attrs.align === 'right' ? 'ml-auto mr-0' : '',
+        node.attrs.align === 'left' ? 'mr-auto ml-0' : '',
+        !node.attrs.float && 'block max-w-full',
+      ]"
+      :style="{
+        width: node.attrs.width ? `${node.attrs.width}px` : 'auto',
+      }"
+    >
       <div v-if="isUploaded || fileContent" class="relative">
-        <img v-if="!isVideo" ref="mediaRef" class="rounded-[2px]" :class="!isUploaded && 'opacity-40'" :src="node.attrs.src || fileContent"
-          :alt="node.attrs.alt || ''" :width="node.attrs.width" :height="node.attrs.height"
-          @click.stop="selectMedia" @load="handleMediaLoaded" />
-        <video v-else ref="mediaRef" class="rounded-[2px]" :class="!isUploaded && 'opacity-40'" :src="node.attrs.src || fileContent"
-          :width="node.attrs.width" :height="node.attrs.height" :autoplay="node.attrs.autoplay"
-          :loop="node.attrs.loop" :muted="node.attrs.muted" :controls="isUploaded" @click.stop="selectMedia"
-          @loadedmetadata="handleMediaLoaded" />
-
-        <div v-if="isUploaded" class="absolute top-2 right-2 items-center bg-black/65 px-1.5 py-1 gap-2 rounded group-hover:flex"
-          :class="selected && isEditable ? 'flex' : 'hidden'">
+        <img
+          v-if="!isVideo"
+          ref="mediaRef"
+          class="rounded-[2px]"
+          :class="!isUploaded && 'opacity-40'"
+          :src="node.attrs.src || fileContent"
+          :alt="node.attrs.alt || ''"
+          :width="node.attrs.width"
+          :height="node.attrs.height"
+          @click.stop="selectMedia"
+          @load="handleMediaLoaded"
+        />
+        <video
+          v-else
+          ref="mediaRef"
+          class="rounded-[2px]"
+          :class="!isUploaded && 'opacity-40'"
+          :src="node.attrs.src || fileContent"
+          :width="node.attrs.width"
+          :height="node.attrs.height"
+          :autoplay="node.attrs.autoplay"
+          :loop="node.attrs.loop"
+          :muted="node.attrs.muted"
+          :controls="isUploaded"
+          @click.stop="selectMedia"
+          @loadedmetadata="handleMediaLoaded"
+        />
+
+        <div
+          v-if="isUploaded"
+          class="absolute top-2 right-2 items-center bg-black/65 px-1.5 py-1 gap-2 rounded group-hover:flex"
+          :class="selected && isEditable ? 'flex' : 'hidden'"
+        >
           <button>
-            <LucideCaptions @click="toggleCaptions" class="size-4"
-              :class="[showCaption ? 'text-ink-white' : 'text-ink-gray-4']" />
+            <LucideCaptions
+              @click="toggleCaptions"
+              class="size-4"
+              :class="[showCaption ? 'text-ink-white' : 'text-ink-gray-4']"
+            />
           </button>
-          <button v-if="!node.attrs.float && !isVideo" @click.stop="toggleAlignPopper"
+          <button
+            v-if="!node.attrs.float && !isVideo"
+            @click.stop="toggleAlignPopper"
             class="hover:text-ink-white text-ink-gray-4"
-            :class="[node.attrs.align ? 'text-ink-white' : 'text-ink-gray-4']">
+            :class="[node.attrs.align ? 'text-ink-white' : 'text-ink-gray-4']"
+          >
             <component :is="currentAlignIcon" class="size-4" />
           </button>
-          <button @click.stop="toggleFloatPopper" class="hover:text-ink-white text-ink-gray-4"
-            :class="[node.attrs.float ? 'text-ink-white' : 'text-ink-gray-4']">
+          <button
+            @click.stop="toggleFloatPopper"
+            class="hover:text-ink-white text-ink-gray-4"
+            :class="[node.attrs.float ? 'text-ink-white' : 'text-ink-gray-4']"
+          >
             <component :is="currentFloatIcon" class="size-4" />
           </button>
 
-          <div ref="alignButtonRef" v-if="showAlignPopper && !isVideo"
-            class="absolute top-full mt-1 right-6 bg-black/65 rounded shadow-lg px-1.5 py-1 z-50 gap-2.5 flex items-center">
+          <div
+            ref="alignButtonRef"
+            v-if="showAlignPopper && !isVideo"
+            class="absolute top-full mt-1 right-6 bg-black/65 rounded shadow-lg px-1.5 py-1 z-50 gap-2.5 flex items-center"
+          >
             <Tooltip text="Align left" class="h-5">
-              <button @click="setAlignment('left')" class="text-ink-gray-4 hover:text-ink-white" :class="node.attrs.align === 'left'
-                ? 'text-ink-white'
-                : 'text-ink-gray-4'
-                ">
+              <button
+                @click="setAlignment('left')"
+                class="text-ink-gray-4 hover:text-ink-white"
+                :class="node.attrs.align === 'left' ? 'text-ink-white' : 'text-ink-gray-4'"
+              >
                 <LucideAlignLeft class="size-4" />
               </button>
             </Tooltip>
             <Tooltip text="Align center" class="h-5">
-              <button @click="setAlignment('center')" class="text-ink-gray-4 hover:text-ink-white" :class="node.attrs.align === 'center'
-                ? 'text-ink-white'
-                : 'text-ink-gray-4'
-                ">
+              <button
+                @click="setAlignment('center')"
+                class="text-ink-gray-4 hover:text-ink-white"
+                :class="node.attrs.align === 'center' ? 'text-ink-white' : 'text-ink-gray-4'"
+              >
                 <LucideAlignCenter class="size-4" />
               </button>
             </Tooltip>
             <Tooltip text="Align right" class="h-5">
-              <button @click="setAlignment('right')" class="text-ink-gray-4 hover:text-ink-white" :class="node.attrs.align === 'right'
-                ? 'text-ink-white'
-                : 'text-ink-gray-4'
-                ">
+              <button
+                @click="setAlignment('right')"
+                class="text-ink-gray-4 hover:text-ink-white"
+                :class="node.attrs.align === 'right' ? 'text-ink-white' : 'text-ink-gray-4'"
+              >
                 <LucideAlignRight class="size-4" />
               </button>
             </Tooltip>
           </div>
 
-          <div v-if="showFloatPopper" ref="floatButtonRef"
-            class="absolute top-full mt-1 right-0 bg-black/65 rounded shadow-lg px-1.5 py-1 z-50 gap-2.5 flex items-center">
+          <div
+            v-if="showFloatPopper"
+            ref="floatButtonRef"
+            class="absolute top-full mt-1 right-0 bg-black/65 rounded shadow-lg px-1.5 py-1 z-50 gap-2.5 flex items-center"
+          >
             <Tooltip text="Float left" class="h-5">
-              <button @click="setFloat('left')" class="text-ink-gray-4 hover:text-ink-white" :class="node.attrs.float === 'left'
-                ? 'text-ink-white'
-                : 'text-ink-gray-4'
-                ">
+              <button
+                @click="setFloat('left')"
+                class="text-ink-gray-4 hover:text-ink-white"
+                :class="node.attrs.float === 'left' ? 'text-ink-white' : 'text-ink-gray-4'"
+              >
                 <LucideFloatLeft class="size-4" />
               </button>
             </Tooltip>
             <Tooltip text="Float right" class="h-5">
-              <button @click="setFloat('right')" class="text-ink-gray-4 hover:text-ink-white" :class="node.attrs.float === 'right'
-                ? 'text-ink-white'
-                : 'text-ink-gray-4'
-                ">
+              <button
+                @click="setFloat('right')"
+                class="text-ink-gray-4 hover:text-ink-white"
+                :class="node.attrs.float === 'right' ? 'text-ink-white' : 'text-ink-gray-4'"
+              >
                 <LucideFloatRight class="size-4" />
               </button>
             </Tooltip>
             <Tooltip v-if="node.attrs.float" text="Remove float" class="h-5">
-              <button @click="setFloat(null)" class="text-ink-gray-4 hover:text-ink-white hover:bg-transparent">
+              <button
+                @click="setFloat(null)"
+                class="text-ink-gray-4 hover:text-ink-white hover:bg-transparent"
+              >
                 <LucideNoFloat class="size-4" />
               </button>
             </Tooltip>
@@ -362,16 +413,27 @@ const wrapperClasses = (float: string) => [
           class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
           :icon-left="h(LucideRotateCw, { class: 'size-4' })"
           label="Try again"
-          @click="isVideo ? editor.commands.reuploadVideo(node.attrs.uploadId) : editor.commands.reuploadImage(node.attrs.uploadId)"
+          @click="
+            isVideo
+              ? editor.commands.reuploadVideo(node.attrs.uploadId)
+              : editor.commands.reuploadImage(node.attrs.uploadId)
+          "
         />
 
-        <button v-if="selected && isEditable && isUploaded" class="absolute bottom-2 right-2 cursor-nw-resize bg-black/65 rounded p-1"
-          @mousedown.prevent="startResize">
+        <button
+          v-if="selected && isEditable && isUploaded"
+          class="absolute bottom-2 right-2 cursor-nw-resize bg-black/65 rounded p-1"
+          @mousedown.prevent="startResize"
+        >
           <LucideMoveDiagonal2 class="text-white size-4" />
         </button>
-        <div v-if="node.attrs.loading" class="inset-0 absolute flex items-center justify-center z-10">
+        <div
+          v-if="node.attrs.loading"
+          class="inset-0 absolute flex items-center justify-center z-10"
+        >
           <div
-            class="bg-gray-900/80 p-2 inset-0 leading-none rounded-sm flex flex-col items-center justify-center gap-2">
+            class="bg-gray-900/80 p-2 inset-0 leading-none rounded-sm flex flex-col items-center justify-center gap-2"
+          >
             <div class="flex items-center gap-2">
               <LoadingIndicator class="text-gray-100 size-4" />
               <span class="text-gray-100">Uploading {{ isVideo ? 'video' : 'image' }}...</span>
@@ -379,18 +441,39 @@ const wrapperClasses = (float: string) => [
           </div>
         </div>
       </div>
-      <div v-else class="flex flex-col items-center justify-center gap-2 border rounded text-ink-gray-6 text-sm py-5 max-w-full" :class="{ 'border-none': selected }" :style="{ width: node.attrs.width + 'px', aspectRatio: node.attrs.width && node.attrs.height ? `${node.attrs.width} / ${node.attrs.height}` : undefined,}">
-        <div class="text-ink-gray-8 text-base">This {{ isVideo ? 'video' : 'image' }} hasn't yet been uploaded.</div>
-        <div v-if="node.attrs.error" class="text-sm text-ink-red-4">Upload failed: {{ node.attrs.error }}</div>
+      <div
+        v-else
+        class="flex flex-col items-center justify-center gap-2 border rounded text-ink-gray-6 text-sm py-5 max-w-full"
+        :class="{ 'border-none': selected }"
+        :style="{
+          width: node.attrs.width + 'px',
+          aspectRatio:
+            node.attrs.width && node.attrs.height
+              ? `${node.attrs.width} / ${node.attrs.height}`
+              : undefined,
+        }"
+      >
+        <div class="text-ink-gray-8 text-base">
+          This {{ isVideo ? 'video' : 'image' }} hasn't yet been uploaded.
+        </div>
+        <div v-if="node.attrs.error" class="text-sm text-ink-red-4">
+          Upload failed: {{ node.attrs.error }}
+        </div>
       </div>
 
-      <input v-if="(node.attrs.alt || showCaption) && !node.attrs.error" v-model="caption"
+      <input
+        v-if="(node.attrs.alt || showCaption) && !node.attrs.error"
+        v-model="caption"
         class="w-full text-center bg-transparent text-sm text-ink-gray-6 h-7 border-none focus:ring-0 placeholder-ink-gray-4"
-        placeholder="Add caption" :disabled="!isEditable" @change="updateCaption" @keydown="handleKeydown" />
+        placeholder="Add caption"
+        :disabled="!isEditable"
+        @change="updateCaption"
+        @keydown="handleKeydown"
+      />
 
       <div v-if="node.attrs.error && fileContent" class="w-full py-1.5 text-center">
         <ErrorMessage :message="`Upload failed: ${node.attrs.error}`" />
       </div>
     </div>
   </NodeViewWrapper>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/components/TextEditor/components/MentionList.vue b/src/components/TextEditor/components/MentionList.vue
index eac67f88d..6c789674a 100644
--- a/src/components/TextEditor/components/MentionList.vue
+++ b/src/components/TextEditor/components/MentionList.vue
@@ -59,8 +59,7 @@ export default {
       return false
     },
     upHandler() {
-      this.selectedIndex =
-        (this.selectedIndex + this.items.length - 1) % this.items.length
+      this.selectedIndex = (this.selectedIndex + this.items.length - 1) % this.items.length
     },
     downHandler() {
       this.selectedIndex = (this.selectedIndex + 1) % this.items.length
diff --git a/src/components/TextEditor/components/Menu.vue b/src/components/TextEditor/components/Menu.vue
index 0814552d8..1db03bf2a 100644
--- a/src/components/TextEditor/components/Menu.vue
+++ b/src/components/TextEditor/components/Menu.vue
@@ -5,21 +5,14 @@
         v-for="(button, index) in buttons"
         :key="button?.label || button?.type || `btn-${index}`"
       >
-        <div
-          class="h-4 w-[2px] border-l"
-          v-if="button && button.type === 'separator'"
-        ></div>
+        <div class="h-4 w-[2px] border-l" v-if="button && button.type === 'separator'"></div>
         <div class="shrink-0" v-else-if="button && button.map">
           <Popover>
             <template #target="{ togglePopover }">
               <button
                 class="rounded p-1 text-base font-medium text-ink-gray-8 transition-colors"
                 @click="togglePopover"
-                :class="
-                  getActiveButton(button)
-                    ? 'bg-surface-gray-3'
-                    : 'hover:bg-surface-gray-2'
-                "
+                :class="getActiveButton(button) ? 'bg-surface-gray-3' : 'hover:bg-surface-gray-2'"
               >
                 <component
                   v-if="(getActiveButton(button) || button[0]).icon"
@@ -50,8 +43,7 @@
                         class="w-full h-7 rounded px-2 text-base flex items-center gap-2 hover:bg-surface-gray-3"
                         @click="
                           () => {
-                            if (componentSlotProps?.onClick)
-                              componentSlotProps.onClick(option)
+                            if (componentSlotProps?.onClick) componentSlotProps.onClick(option)
                             else if (option.action) onButtonClick(option)
 
                             close()
@@ -59,15 +51,8 @@
                         "
                         :title="option.label"
                       >
-                        <component
-                          v-if="option.icon"
-                          :is="option.icon"
-                          class="h-4 w-4"
-                        />
-                        <span
-                          class="whitespace-nowrap text-ink-gray-7"
-                          v-if="option.label"
-                        >
+                        <component v-if="option.icon" :is="option.icon" class="h-4 w-4" />
+                        <span class="whitespace-nowrap text-ink-gray-7" v-if="option.label">
                           {{ option.label }}
                         </span>
                       </button>
@@ -89,11 +74,9 @@
                       :is="option.icon"
                       class="size-4 flex-shrink-0 text-ink-gray-6"
                     />
-                    <span
-                      v-if="option.label"
-                      class="whitespace-nowrap text-ink-gray-7"
-                      >{{ option.label }}</span
-                    >
+                    <span v-if="option.label" class="whitespace-nowrap text-ink-gray-7">{{
+                      option.label
+                    }}</span>
                   </button>
                 </li>
               </ul>
@@ -106,25 +89,17 @@
           :class="[
             buttons.length > 1 ? 'p-1' : 'p-1.5 border',
             button.isDisabled?.(editor) && 'opacity-50 pointer-events-none',
-            button.isActive?.(editor)
-              ? 'bg-surface-gray-3'
-              : 'hover:bg-surface-gray-2',
+            button.isActive?.(editor) ? 'bg-surface-gray-3' : 'hover:bg-surface-gray-2',
             button.class,
           ]"
           @click="onButtonClick(button)"
           :title="button.label || button.text"
         >
           <component v-if="button.icon" :is="button.icon" class="h-4 w-4" />
-          <span
-            class="inline-block h-4 min-w-[1rem] text-sm leading-4"
-            v-else-if="button.text"
-          >
+          <span class="inline-block h-4 min-w-[1rem] text-sm leading-4" v-else-if="button.text">
             {{ button.text }}
           </span>
-          <span
-            class="inline-block h-4 min-w-[1rem] text-sm leading-4"
-            v-else-if="button.label"
-          >
+          <span class="inline-block h-4 min-w-[1rem] text-sm leading-4" v-else-if="button.label">
             {{ button.label }}
           </span>
         </button>
@@ -135,8 +110,7 @@
               <button
                 class="flex rounded p-1 text-ink-gray-8 transition-colors"
                 :class="[
-                  button.isDisabled?.(editor) &&
-                    'opacity-50 pointer-events-none',
+                  button.isDisabled?.(editor) && 'opacity-50 pointer-events-none',
                   button.isActive?.(editor) || componentSlotProps?.isActive
                     ? 'bg-surface-gray-3'
                     : 'hover:bg-surface-gray-2',
@@ -149,15 +123,8 @@
                 "
                 :title="button.label"
               >
-                <component
-                  v-if="button.icon"
-                  :is="button.icon"
-                  class="h-4 w-4"
-                />
-                <span
-                  class="inline-block h-4 min-w-[1rem] text-sm leading-4"
-                  v-else
-                >
+                <component v-if="button.icon" :is="button.icon" class="h-4 w-4" />
+                <span class="inline-block h-4 min-w-[1rem] text-sm leading-4" v-else>
                   {{ button.text }}
                 </span>
               </button>
@@ -175,10 +142,7 @@
               :title="button.label"
             >
               <component v-if="button.icon" :is="button.icon" class="h-4 w-4" />
-              <span
-                class="inline-block h-4 min-w-[1rem] text-sm leading-4"
-                v-else
-              >
+              <span class="inline-block h-4 min-w-[1rem] text-sm leading-4" v-else>
                 {{ button.text }}
               </span>
             </button></template
diff --git a/src/components/TextEditor/components/TextEditorBubbleMenu.vue b/src/components/TextEditor/components/TextEditorBubbleMenu.vue
index f0d1f11e5..02c8c26ab 100644
--- a/src/components/TextEditor/components/TextEditorBubbleMenu.vue
+++ b/src/components/TextEditor/components/TextEditorBubbleMenu.vue
@@ -1,7 +1,16 @@
 <template>
-  <BubbleMenu v-if="bubbleMenuButtons" class="bubble-menu rounded-md z-[100]"
-    :class="bubbleMenuButtons.length > 1 && 'shadow-sm'" :editor="editor" v-bind="options">
-    <Menu class="rounded" :class="bubbleMenuButtons.length > 1 && 'shadow-lg'" :buttons="bubbleMenuButtons" />
+  <BubbleMenu
+    v-if="bubbleMenuButtons"
+    class="bubble-menu rounded-md z-[100]"
+    :class="bubbleMenuButtons.length > 1 && 'shadow-sm'"
+    :editor="editor"
+    v-bind="options"
+  >
+    <Menu
+      class="rounded"
+      :class="bubbleMenuButtons.length > 1 && 'shadow-lg'"
+      :buttons="bubbleMenuButtons"
+    />
   </BubbleMenu>
 </template>
 <script>
diff --git a/src/components/TextEditor/components/TextEditorFixedMenu.vue b/src/components/TextEditor/components/TextEditorFixedMenu.vue
index 463249fb9..edd4d00c9 100644
--- a/src/components/TextEditor/components/TextEditorFixedMenu.vue
+++ b/src/components/TextEditor/components/TextEditorFixedMenu.vue
@@ -19,14 +19,7 @@ export default {
       } else {
         buttons = [
           'Paragraph',
-          [
-            'Heading 1',
-            'Heading 2',
-            'Heading 3',
-            'Heading 4',
-            'Heading 5',
-            'Heading 6',
-          ],
+          ['Heading 1', 'Heading 2', 'Heading 3', 'Heading 4', 'Heading 5', 'Heading 6'],
           'Separator',
           'Bold',
           'Italic',
diff --git a/src/components/TextEditor/components/TextEditorFloatingMenu.vue b/src/components/TextEditor/components/TextEditorFloatingMenu.vue
index 241da4e75..8d80514c1 100644
--- a/src/components/TextEditor/components/TextEditorFloatingMenu.vue
+++ b/src/components/TextEditor/components/TextEditorFloatingMenu.vue
@@ -9,11 +9,7 @@
       v-for="button in floatingMenuButtons"
       :key="button.label"
       class="flex rounded p-1 text-ink-gray-8 transition-colors"
-      :class="
-        button.isActive(editor)
-          ? 'bg-surface-gray-2'
-          : 'hover:bg-surface-gray-2'
-      "
+      :class="button.isActive(editor) ? 'bg-surface-gray-2' : 'hover:bg-surface-gray-2'"
       @click="() => button.action(editor)"
       :title="button.label"
     >
diff --git a/src/components/TextEditor/extensions/color/color-extension.ts b/src/components/TextEditor/extensions/color/color-extension.ts
index 4397b9421..05f583a81 100644
--- a/src/components/TextEditor/extensions/color/color-extension.ts
+++ b/src/components/TextEditor/extensions/color/color-extension.ts
@@ -72,18 +72,13 @@ export const NamedColorExtension = Extension.create<ColorOptions>({
               // Check for CSS custom property format in style attribute
               const style = element.getAttribute('style')
               if (style) {
-                const colorMatch = style.match(
-                  /color:\s*var\(--prose-color-(\w+)\)/,
-                )
+                const colorMatch = style.match(/color:\s*var\(--prose-color-(\w+)\)/)
                 if (colorMatch && this.options.colors.includes(colorMatch[1])) {
                   return colorMatch[1]
                 }
 
                 // Fallback: try extracting from legacy formats
-                const extractedColor = extractTextColorFromStyle(
-                  style,
-                  this.options.colors,
-                )
+                const extractedColor = extractTextColorFromStyle(style, this.options.colors)
                 if (extractedColor) {
                   return extractedColor
                 }
@@ -92,10 +87,7 @@ export const NamedColorExtension = Extension.create<ColorOptions>({
               return null
             },
             renderHTML: (attributes) => {
-              if (
-                !attributes.color ||
-                !this.options.colors.includes(attributes.color)
-              ) {
+              if (!attributes.color || !this.options.colors.includes(attributes.color)) {
                 return {}
               }
               return {
@@ -115,9 +107,7 @@ export const NamedColorExtension = Extension.create<ColorOptions>({
         ({ chain, state, editor }) => {
           // Validate that the color name is allowed
           if (!this.options.colors.includes(colorName)) {
-            console.warn(
-              `Color "${colorName}" is not in the allowed colors list`,
-            )
+            console.warn(`Color "${colorName}" is not in the allowed colors list`)
             return false
           }
 
@@ -126,12 +116,10 @@ export const NamedColorExtension = Extension.create<ColorOptions>({
           let commandChain = chain().setMark('textStyle', { color: colorName })
 
           if (!empty) {
-            commandChain = commandChain
-              .setTextSelection(to)
-              .command(({ tr }) => {
-                tr.setStoredMarks([])
-                return true
-              })
+            commandChain = commandChain.setTextSelection(to).command(({ tr }) => {
+              tr.setStoredMarks([])
+              return true
+            })
           }
 
           return commandChain.focus().run()
@@ -139,10 +127,7 @@ export const NamedColorExtension = Extension.create<ColorOptions>({
       unsetColor:
         () =>
         ({ chain }) => {
-          return chain()
-            .setMark('textStyle', { color: null })
-            .removeEmptyTextStyle()
-            .run()
+          return chain().setMark('textStyle', { color: null }).removeEmptyTextStyle().run()
         },
     }
   },
diff --git a/src/components/TextEditor/extensions/content-paste-extension.ts b/src/components/TextEditor/extensions/content-paste-extension.ts
index ca5ad5433..3fefd7287 100644
--- a/src/components/TextEditor/extensions/content-paste-extension.ts
+++ b/src/components/TextEditor/extensions/content-paste-extension.ts
@@ -35,12 +35,8 @@ export const ContentPasteExtension = Extension.create<ContentPasteOptions>({
             if (!this.options.enabled) return false
 
             // handle image pasting
-            const files: File[] | [] = Array.from(
-              event.clipboardData?.files || [],
-            )
-            const images = Array.from(files).filter((file) =>
-              file.type.startsWith('image/'),
-            )
+            const files: File[] | [] = Array.from(event.clipboardData?.files || [])
+            const images = Array.from(files).filter((file) => file.type.startsWith('image/'))
             if (images.length > 0) {
               processMultipleImages(images, view, null, extensionThis.options)
               return true
diff --git a/src/components/TextEditor/extensions/emoji/emoji-extension.ts b/src/components/TextEditor/extensions/emoji/emoji-extension.ts
index 39f29641c..a5fd8a9cf 100644
--- a/src/components/TextEditor/extensions/emoji/emoji-extension.ts
+++ b/src/components/TextEditor/extensions/emoji/emoji-extension.ts
@@ -18,9 +18,7 @@ export default createSuggestionExtension<EmojiItem>({
   char: ':',
   pluginKey: new PluginKey('emojiSuggestion'),
   items: ({ query }: { query: string }) => {
-    return EMOJIS.filter((item) =>
-      item.name.toLowerCase().includes(query.toLowerCase()),
-    )
+    return EMOJIS.filter((item) => item.name.toLowerCase().includes(query.toLowerCase()))
       .sort((a, b) => {
         const aName = a.name.toLowerCase()
         const bName = b.name.toLowerCase()
@@ -31,10 +29,8 @@ export default createSuggestionExtension<EmojiItem>({
         if (bName === queryLower && aName !== queryLower) return 1
 
         // Then names starting with the query
-        if (aName.startsWith(queryLower) && !bName.startsWith(queryLower))
-          return -1
-        if (bName.startsWith(queryLower) && !aName.startsWith(queryLower))
-          return 1
+        if (aName.startsWith(queryLower) && !bName.startsWith(queryLower)) return -1
+        if (bName.startsWith(queryLower) && !aName.startsWith(queryLower)) return 1
 
         // Then sort by name length (shorter first)
         return aName.length - bName.length
diff --git a/src/components/TextEditor/extensions/highlight/highlight-extension.ts b/src/components/TextEditor/extensions/highlight/highlight-extension.ts
index 1de9e0d5b..6cb537e56 100644
--- a/src/components/TextEditor/extensions/highlight/highlight-extension.ts
+++ b/src/components/TextEditor/extensions/highlight/highlight-extension.ts
@@ -88,13 +88,8 @@ export const NamedHighlightExtension = Mark.create<HighlightOptions>({
           // Check for CSS custom property format in style attribute
           const style = element.getAttribute('style')
           if (style) {
-            const highlightMatch = style.match(
-              /background-color:\s*var\(--prose-highlight-(\w+)\)/,
-            )
-            if (
-              highlightMatch &&
-              this.options.colors.includes(highlightMatch[1])
-            ) {
+            const highlightMatch = style.match(/background-color:\s*var\(--prose-highlight-(\w+)\)/)
+            if (highlightMatch && this.options.colors.includes(highlightMatch[1])) {
               return highlightMatch[1]
             }
           }
@@ -115,10 +110,7 @@ export const NamedHighlightExtension = Mark.create<HighlightOptions>({
 
           // Try extracting from style attribute as fallback
           if (style) {
-            const extractedColor = extractHighlightColorFromStyle(
-              style,
-              this.options.colors,
-            )
+            const extractedColor = extractHighlightColorFromStyle(style, this.options.colors)
             if (extractedColor) {
               return extractedColor
             }
@@ -127,10 +119,7 @@ export const NamedHighlightExtension = Mark.create<HighlightOptions>({
           return null
         },
         renderHTML: (attributes) => {
-          if (
-            !attributes.color ||
-            !this.options.colors.includes(attributes.color)
-          ) {
+          if (!attributes.color || !this.options.colors.includes(attributes.color)) {
             return {}
           }
 
@@ -151,11 +140,7 @@ export const NamedHighlightExtension = Mark.create<HighlightOptions>({
   },
 
   renderHTML({ HTMLAttributes }) {
-    return [
-      'mark',
-      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
-      0,
-    ]
+    return ['mark', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0]
   },
 
   addCommands() {
@@ -165,9 +150,7 @@ export const NamedHighlightExtension = Mark.create<HighlightOptions>({
         ({ chain, commands, editor, state }) => {
           // Validate that the color name is allowed
           if (!this.options.colors.includes(colorName)) {
-            console.warn(
-              `Highlight color "${colorName}" is not in the allowed colors list`,
-            )
+            console.warn(`Highlight color "${colorName}" is not in the allowed colors list`)
             return false
           }
 
@@ -181,12 +164,10 @@ export const NamedHighlightExtension = Mark.create<HighlightOptions>({
           }
 
           if (!empty) {
-            commandChain = commandChain
-              .setTextSelection(to)
-              .command(({ tr }) => {
-                tr.setStoredMarks([])
-                return true
-              })
+            commandChain = commandChain.setTextSelection(to).command(({ tr }) => {
+              tr.setStoredMarks([])
+              return true
+            })
           }
 
           return commandChain.focus().run()
@@ -196,35 +177,26 @@ export const NamedHighlightExtension = Mark.create<HighlightOptions>({
         ({ chain, commands, editor, state }) => {
           // Validate that the color name is allowed
           if (!this.options.colors.includes(colorName)) {
-            console.warn(
-              `Highlight color "${colorName}" is not in the allowed colors list`,
-            )
+            console.warn(`Highlight color "${colorName}" is not in the allowed colors list`)
             return false
           }
 
           const { to, empty } = state.selection // Get original selection details
-          const highlightAttributes = this.options.multicolor
-            ? { color: colorName }
-            : undefined
+          const highlightAttributes = this.options.multicolor ? { color: colorName } : undefined
 
           // Check if the mark is currently active with the given attributes *before* toggling
           // This helps determine if the toggle action will be setting or unsetting the mark.
-          const isCurrentlyActive = editor.isActive(
-            this.name,
-            highlightAttributes,
-          )
+          const isCurrentlyActive = editor.isActive(this.name, highlightAttributes)
 
           let commandChain = chain().toggleMark(this.name, highlightAttributes)
 
           // If the selection was not empty AND the toggle action is about to *set* the mark
           // (i.e., it wasn't active before)
           if (!empty && !isCurrentlyActive) {
-            commandChain = commandChain
-              .setTextSelection(to)
-              .command(({ tr }) => {
-                tr.setStoredMarks([])
-                return true
-              })
+            commandChain = commandChain.setTextSelection(to).command(({ tr }) => {
+              tr.setStoredMarks([])
+              return true
+            })
           }
 
           return commandChain.focus().run()
diff --git a/src/components/TextEditor/extensions/iframe/IframeNodeView.vue b/src/components/TextEditor/extensions/iframe/IframeNodeView.vue
index 44f3331eb..17c590ff3 100644
--- a/src/components/TextEditor/extensions/iframe/IframeNodeView.vue
+++ b/src/components/TextEditor/extensions/iframe/IframeNodeView.vue
@@ -14,7 +14,7 @@ const containerRef = ref<HTMLDivElement | null>(null)
 const isResizing = ref(false)
 const startDragX = ref(0)
 const startWidth = ref(0)
-const originalAspectRatio = ref(9/16) // Default 16:9
+const originalAspectRatio = ref(9 / 16) // Default 16:9
 const isEditable = ref(false)
 
 function selectIframe() {
@@ -28,19 +28,19 @@ const platformInfo = computed(() => {
     const aspectInfo = calculateAspectRatio(props.node.attrs.src)
     return {
       platform: platform?.name || 'Generic',
-      aspectRatio: aspectInfo.ratio
+      aspectRatio: aspectInfo.ratio,
     }
   }
-  return { platform: 'Generic', aspectRatio: 9/16 }
+  return { platform: 'Generic', aspectRatio: 9 / 16 }
 })
 
 const iframeStyles = computed(() => {
   const width = props.node.attrs.width || 640
-  const height = props.node.attrs.height || (width * originalAspectRatio.value)
+  const height = props.node.attrs.height || width * originalAspectRatio.value
 
   return {
     width: `${width}px`,
-    height: `${height}px`
+    height: `${height}px`,
   }
 })
 
@@ -75,7 +75,7 @@ function startResize(event: MouseEvent) {
     originalAspectRatio.value = props.node.attrs.aspectRatio
   } else {
     const width = props.node.attrs.width || startWidth.value
-    const height = props.node.attrs.height || (width * originalAspectRatio.value)
+    const height = props.node.attrs.height || width * originalAspectRatio.value
     if (width && height) {
       originalAspectRatio.value = height / width
     }
@@ -125,7 +125,7 @@ function stopResize() {
     props.updateAttributes({
       width: finalWidth,
       height: finalHeight,
-      aspectRatio: originalAspectRatio.value
+      aspectRatio: originalAspectRatio.value,
     })
 
     // Clear temporary styles immediately (like image extension)
@@ -194,7 +194,7 @@ function setCursorBeforeIframe() {
       ]"
       :style="{
         width: node.attrs.width ? `${node.attrs.width}px` : 'auto',
-        maxWidth: '100%'
+        maxWidth: '100%',
       }"
       @keydown="handleKeydown"
       tabindex="0"
@@ -236,7 +236,7 @@ function setCursorBeforeIframe() {
               @click.stop="setAlignment('left')"
               :class="[
                 'px-1.5 py-1 text-ink-gray-4 hover:text-white transition-colors duration-150',
-                { 'text-white': node.attrs.align === 'left' }
+                { 'text-white': node.attrs.align === 'left' },
               ]"
               title="Align Left"
             >
@@ -246,7 +246,7 @@ function setCursorBeforeIframe() {
               @click.stop="setAlignment('center')"
               :class="[
                 'px-1.5 py-1 text-ink-gray-4 hover:text-white transition-colors duration-150',
-                { 'text-white': node.attrs.align === 'center' }
+                { 'text-white': node.attrs.align === 'center' },
               ]"
               title="Align Center"
             >
@@ -256,7 +256,7 @@ function setCursorBeforeIframe() {
               @click.stop="setAlignment('right')"
               :class="[
                 'px-1.5 py-1 text-ink-gray-4 hover:text-white transition-colors duration-150',
-                { 'text-white': node.attrs.align === 'right' }
+                { 'text-white': node.attrs.align === 'right' },
               ]"
               title="Align Right"
             >
@@ -275,7 +275,6 @@ function setCursorBeforeIframe() {
           </button>
         </div>
 
-
         <!-- Loading state for new embeds -->
         <div
           v-if="!node.attrs.src"
diff --git a/src/components/TextEditor/extensions/iframe/InsertIframe.vue b/src/components/TextEditor/extensions/iframe/InsertIframe.vue
index 7d5a513be..0facff87d 100644
--- a/src/components/TextEditor/extensions/iframe/InsertIframe.vue
+++ b/src/components/TextEditor/extensions/iframe/InsertIframe.vue
@@ -3,10 +3,7 @@
     <slot v-bind="{ onClick: openIframeDialog }"></slot>
 
     <!-- Iframe URL Input Dialog -->
-    <Dialog
-      v-model="showDialog"
-      :options="{ title: 'Insert Embed', size: 'md' }"
-    >
+    <Dialog v-model="showDialog" :options="{ title: 'Insert Embed', size: 'md' }">
       <template #body-content>
         <div class="space-y-4">
           <div>
@@ -23,10 +20,7 @@
             <p v-if="urlError" class="text-red-500 text-sm mt-1">
               {{ urlError }}
             </p>
-            <p
-              v-else-if="embedUrl && isValidUrl"
-              class="text-ink-green-3 text-sm mt-1"
-            >
+            <p v-else-if="embedUrl && isValidUrl" class="text-ink-green-3 text-sm mt-1">
               ✓ Valid {{ platformInfo.platform }} URL
             </p>
           </div>
@@ -36,11 +30,7 @@
       <template #actions>
         <div class="flex justify-end space-x-2">
           <Button variant="subtle" @click="showDialog = false">Cancel</Button>
-          <Button
-            variant="solid"
-            :disabled="!embedUrl || !isValidUrl"
-            @click="insertIframe"
-          >
+          <Button variant="solid" :disabled="!embedUrl || !isValidUrl" @click="insertIframe">
             Insert Embed
           </Button>
         </div>
@@ -60,10 +50,9 @@ import {
   detectPlatform,
   calculateAspectRatio,
   getOptimalDimensions,
-  ALLOWED_DOMAINS
+  ALLOWED_DOMAINS,
 } from './utils'
 
-
 const props = defineProps<{
   editor: Editor
 }>()
@@ -88,7 +77,7 @@ const isValidUrl = computed(() => {
       if (srcMatch?.[1]) {
         return validateURL(srcMatch[1], {
           allowedDomains: ALLOWED_DOMAINS,
-          HTMLAttributes: {}
+          HTMLAttributes: {},
         })
       }
       return false
@@ -97,7 +86,7 @@ const isValidUrl = computed(() => {
     // Handle direct URLs
     return validateURL(embedUrl.value, {
       allowedDomains: ALLOWED_DOMAINS,
-      HTMLAttributes: {}
+      HTMLAttributes: {},
     })
   } catch {
     return false
@@ -120,14 +109,14 @@ const processedUrl = computed(() => {
 })
 
 const platformInfo = computed(() => {
-  if (!embedUrl.value || !isValidUrl.value) return { platform: 'Generic', aspectRatio: 9/16 }
+  if (!embedUrl.value || !isValidUrl.value) return { platform: 'Generic', aspectRatio: 9 / 16 }
 
   const platform = detectPlatform(processedUrl.value)
   const aspectInfo = calculateAspectRatio(processedUrl.value)
 
   return {
     platform: platform?.name || 'Generic',
-    aspectRatio: aspectInfo.ratio
+    aspectRatio: aspectInfo.ratio,
   }
 })
 
@@ -180,7 +169,7 @@ function insertIframe() {
     width: customWidth.value,
     height: customHeight.value,
     title: title.value,
-    align: alignment.value
+    align: alignment.value,
   })
 
   if (success) {
@@ -198,12 +187,18 @@ function handleSlashCommandInsert(event: CustomEvent) {
 }
 
 onMounted(() => {
-  props.editor.view.dom.addEventListener('iframe:open-dialog', handleSlashCommandInsert as EventListener)
+  props.editor.view.dom.addEventListener(
+    'iframe:open-dialog',
+    handleSlashCommandInsert as EventListener,
+  )
 })
 
 onUnmounted(() => {
   try {
-  props.editor.view.dom.removeEventListener('iframe:open-dialog', handleSlashCommandInsert as EventListener)
+    props.editor.view.dom.removeEventListener(
+      'iframe:open-dialog',
+      handleSlashCommandInsert as EventListener,
+    )
   } catch {}
 })
 </script>
diff --git a/src/components/TextEditor/extensions/iframe/iframe-extension.ts b/src/components/TextEditor/extensions/iframe/iframe-extension.ts
index fa1b621bc..6e2846f71 100644
--- a/src/components/TextEditor/extensions/iframe/iframe-extension.ts
+++ b/src/components/TextEditor/extensions/iframe/iframe-extension.ts
@@ -80,7 +80,7 @@ export const IframeExtension = Node.create<IframeOptions>({
         }),
       },
       aspectRatio: {
-        default: 9/16, // Default 16:9 aspect ratio
+        default: 9 / 16, // Default 16:9 aspect ratio
         parseHTML: () => null, // Don't parse from HTML
         renderHTML: () => ({}), // Don't render to HTML
       },
@@ -155,7 +155,7 @@ export const IframeExtension = Node.create<IframeOptions>({
             width: width ? parseInt(width, 10) : null,
             height: height ? parseInt(height, 10) : null,
             title: title || null,
-            align: align || 'center'
+            align: align || 'center',
           }
         },
       },
@@ -210,7 +210,7 @@ export const IframeExtension = Node.create<IframeOptions>({
 
           return commands.insertContent({
             type: this.name,
-            attrs
+            attrs,
           })
         },
 
@@ -227,7 +227,7 @@ export const IframeExtension = Node.create<IframeOptions>({
           // Emit a custom event on the editor's view DOM element
           // This is more localized than document.dispatchEvent
           const event = new CustomEvent('iframe:open-dialog', {
-            detail: { editor }
+            detail: { editor },
           })
           editor.view.dom.dispatchEvent(event)
           return true
@@ -251,7 +251,14 @@ export const IframeExtension = Node.create<IframeOptions>({
             if (html) {
               const iframeData = parseIframeFromHTML(html)
               if (iframeData) {
-                return createIframeNode(view, extensionThis, iframeData.src, iframeData.width, iframeData.height, iframeData.title)
+                return createIframeNode(
+                  view,
+                  extensionThis,
+                  iframeData.src,
+                  iframeData.width,
+                  iframeData.height,
+                  iframeData.title,
+                )
               }
             }
 
@@ -259,14 +266,22 @@ export const IframeExtension = Node.create<IframeOptions>({
             if (text && text.includes('<iframe')) {
               const iframeData = parseIframeFromHTML(text)
               if (iframeData) {
-                return createIframeNode(view, extensionThis, iframeData.src, iframeData.width, iframeData.height, iframeData.title)
+                return createIframeNode(
+                  view,
+                  extensionThis,
+                  iframeData.src,
+                  iframeData.width,
+                  iframeData.height,
+                  iframeData.title,
+                )
               }
             }
 
             // Fallback to URL detection for plain text
             if (text) {
               // Check if pasted text is a supported embed URL
-              const urlPattern = /^https?:\/\/(?:www\.)?(?:youtube\.com\/watch\?v=[\w-]+|youtu\.be\/[\w-]+|youtube\.com\/embed\/[\w-]+|vimeo\.com\/\d+|player\.vimeo\.com\/video\/\d+|codepen\.io\/[\w-]+\/pen\/[\w-]+|codesandbox\.io\/[\w\/.-]+|figma\.com\/[\w\/.-]+|embed\.figma\.com\/[\w\/.-]+)$/
+              const urlPattern =
+                /^https?:\/\/(?:www\.)?(?:youtube\.com\/watch\?v=[\w-]+|youtu\.be\/[\w-]+|youtube\.com\/embed\/[\w-]+|vimeo\.com\/\d+|player\.vimeo\.com\/video\/\d+|codepen\.io\/[\w-]+\/pen\/[\w-]+|codesandbox\.io\/[\w\/.-]+|figma\.com\/[\w\/.-]+|embed\.figma\.com\/[\w\/.-]+)$/
 
               if (urlPattern.test(text.trim())) {
                 return createIframeNode(view, extensionThis, text.trim())
@@ -282,7 +297,9 @@ export const IframeExtension = Node.create<IframeOptions>({
 })
 
 // Helper function to parse iframe embed codes from pasted HTML content
-function parseIframeFromHTML(html: string): { src: string, width?: number, height?: number, title?: string } | null {
+function parseIframeFromHTML(
+  html: string,
+): { src: string; width?: number; height?: number; title?: string } | null {
   try {
     const parser = new DOMParser()
     const doc = parser.parseFromString(html, 'text/html')
@@ -301,7 +318,7 @@ function parseIframeFromHTML(html: string): { src: string, width?: number, heigh
           src,
           width: widthMatch ? parseInt(widthMatch[1], 10) : undefined,
           height: heightMatch ? parseInt(heightMatch[1], 10) : undefined,
-          title: titleMatch ? titleMatch[1] : undefined
+          title: titleMatch ? titleMatch[1] : undefined,
         }
       }
       return null
@@ -310,8 +327,12 @@ function parseIframeFromHTML(html: string): { src: string, width?: number, heigh
     const src = iframe.getAttribute('src')
     if (!src) return null
 
-    const width = iframe.getAttribute('width') ? parseInt(iframe.getAttribute('width')!, 10) : undefined
-    const height = iframe.getAttribute('height') ? parseInt(iframe.getAttribute('height')!, 10) : undefined
+    const width = iframe.getAttribute('width')
+      ? parseInt(iframe.getAttribute('width')!, 10)
+      : undefined
+    const height = iframe.getAttribute('height')
+      ? parseInt(iframe.getAttribute('height')!, 10)
+      : undefined
     const title = iframe.getAttribute('title') || undefined
 
     return { src, width, height, title }
@@ -321,9 +342,18 @@ function parseIframeFromHTML(html: string): { src: string, width?: number, heigh
 }
 
 // Helper function to create iframe node from parsed data
-function createIframeNode(view: any, extensionThis: any, src: string, width?: number, height?: number, title?: string) {
+function createIframeNode(
+  view: any,
+  extensionThis: any,
+  src: string,
+  width?: number,
+  height?: number,
+  title?: string,
+) {
   // Ask user for confirmation before creating iframe
-  const shouldCreateEmbed = confirm(`Do you want to embed this content?\n\nURL: ${src}\n\nClick "OK" to create an embed, or "Cancel" to paste as plain text.`)
+  const shouldCreateEmbed = confirm(
+    `Do you want to embed this content?\n\nURL: ${src}\n\nClick "OK" to create an embed, or "Cancel" to paste as plain text.`,
+  )
 
   if (!shouldCreateEmbed) {
     return false // Allow default paste behavior (paste as text)
@@ -348,7 +378,7 @@ function createIframeNode(view: any, extensionThis: any, src: string, width?: nu
     height: finalHeight,
     title: title,
     align: 'center' as const,
-    aspectRatio: finalHeight / finalWidth
+    aspectRatio: finalHeight / finalWidth,
   }
 
   const node = view.state.schema.nodes.iframe.create(attrs)
diff --git a/src/components/TextEditor/extensions/iframe/index.ts b/src/components/TextEditor/extensions/iframe/index.ts
index 39accb8d5..a92485e5b 100644
--- a/src/components/TextEditor/extensions/iframe/index.ts
+++ b/src/components/TextEditor/extensions/iframe/index.ts
@@ -6,6 +6,6 @@ export {
   getOptimalDimensions,
   validateURL,
   processURL,
-  ALLOWED_DOMAINS
+  ALLOWED_DOMAINS,
 } from './utils'
 export type { AspectRatioInfo, PlatformConfig } from './utils'
diff --git a/src/components/TextEditor/extensions/iframe/utils.ts b/src/components/TextEditor/extensions/iframe/utils.ts
index 4ef20fa4e..ffe4c20fa 100644
--- a/src/components/TextEditor/extensions/iframe/utils.ts
+++ b/src/components/TextEditor/extensions/iframe/utils.ts
@@ -1,6 +1,5 @@
 import { IframeOptions } from './iframe-extension'
 
-
 export const ALLOWED_DOMAINS = [
   'youtube.com',
   'www.youtube.com',
@@ -36,45 +35,45 @@ export interface PlatformConfig {
 const PLATFORM_CONFIGS: PlatformConfig[] = [
   {
     name: 'YouTube',
-    ratio: 9/16, // 16:9 aspect ratio
+    ratio: 9 / 16, // 16:9 aspect ratio
     defaultWidth: 640,
-    urlPatterns: ['youtube.com', 'youtu.be', 'youtube-nocookie.com']
+    urlPatterns: ['youtube.com', 'youtu.be', 'youtube-nocookie.com'],
   },
   {
     name: 'Vimeo',
-    ratio: 9/16, // 16:9 aspect ratio
+    ratio: 9 / 16, // 16:9 aspect ratio
     defaultWidth: 640,
-    urlPatterns: ['vimeo.com', 'player.vimeo.com']
+    urlPatterns: ['vimeo.com', 'player.vimeo.com'],
   },
   {
     name: 'CodePen',
-    ratio: 3/2, // 2:3 aspect ratio (taller for code demos)
+    ratio: 3 / 2, // 2:3 aspect ratio (taller for code demos)
     defaultWidth: 500,
-    urlPatterns: ['codepen.io']
+    urlPatterns: ['codepen.io'],
   },
   {
     name: 'CodeSandbox',
-    ratio: 3/2, // 2:3 aspect ratio
+    ratio: 3 / 2, // 2:3 aspect ratio
     defaultWidth: 500,
-    urlPatterns: ['codesandbox.io']
+    urlPatterns: ['codesandbox.io'],
   },
   {
     name: 'Figma',
-    ratio: 9/16, // 16:9 default for design embeds
+    ratio: 9 / 16, // 16:9 default for design embeds
     defaultWidth: 800,
-    urlPatterns: ['figma.com', 'www.figma.com', 'embed.figma.com']
+    urlPatterns: ['figma.com', 'www.figma.com', 'embed.figma.com'],
   },
   {
     name: 'Google Docs',
-    ratio: 4/3, // 4:3 for documents
+    ratio: 4 / 3, // 4:3 for documents
     defaultWidth: 600,
-    urlPatterns: ['docs.google.com', 'drive.google.com']
+    urlPatterns: ['docs.google.com', 'drive.google.com'],
   },
   {
     name: 'Notion',
-    ratio: 4/3, // 4:3 for pages
+    ratio: 4 / 3, // 4:3 for pages
     defaultWidth: 600,
-    urlPatterns: ['notion.so', 'www.notion.so']
+    urlPatterns: ['notion.so', 'www.notion.so'],
   },
 ]
 
@@ -83,9 +82,11 @@ export function detectPlatform(url: string): PlatformConfig | null {
     const urlObj = new URL(url)
     const domain = urlObj.hostname.toLowerCase()
 
-    return PLATFORM_CONFIGS.find(config =>
-      config.urlPatterns.some(pattern => domain.includes(pattern))
-    ) || null
+    return (
+      PLATFORM_CONFIGS.find((config) =>
+        config.urlPatterns.some((pattern) => domain.includes(pattern)),
+      ) || null
+    )
   } catch {
     return null
   }
@@ -99,20 +100,23 @@ export function calculateAspectRatio(url: string): AspectRatioInfo {
       ratio: platform.ratio,
       width: platform.defaultWidth,
       height: Math.round(platform.defaultWidth * platform.ratio),
-      platform: platform.name
+      platform: platform.name,
     }
   }
 
   // Default to 16:9 for unknown platforms
   return {
-    ratio: 9/16,
+    ratio: 9 / 16,
     width: 640,
     height: 360,
-    platform: 'Generic'
+    platform: 'Generic',
   }
 }
 
-export function getOptimalDimensions(url: string, containerWidth?: number): { width: number, height: number } {
+export function getOptimalDimensions(
+  url: string,
+  containerWidth?: number,
+): { width: number; height: number } {
   const aspectInfo = calculateAspectRatio(url)
 
   // If container width is provided, scale to fit
@@ -121,13 +125,13 @@ export function getOptimalDimensions(url: string, containerWidth?: number): { wi
     const maxWidth = Math.min(containerWidth - CONTAINER_PADDING, aspectInfo.width)
     return {
       width: maxWidth,
-      height: Math.round(maxWidth * aspectInfo.ratio)
+      height: Math.round(maxWidth * aspectInfo.ratio),
     }
   }
 
   return {
     width: aspectInfo.width,
-    height: aspectInfo.height
+    height: aspectInfo.height,
   }
 }
 
@@ -144,9 +148,7 @@ export function validateURL(url: string, options: IframeOptions): boolean {
 
     // If allowedDomains is specified, check if domain is allowed
     if (options.allowedDomains?.length) {
-      return options.allowedDomains.some((allowed) =>
-        domain.includes(allowed.toLowerCase())
-      )
+      return options.allowedDomains.some((allowed) => domain.includes(allowed.toLowerCase()))
     }
 
     // If no allowedDomains specified, allow all except blocked
diff --git a/src/components/TextEditor/extensions/image-group/ImageGroupNodeView.vue b/src/components/TextEditor/extensions/image-group/ImageGroupNodeView.vue
index 863e8ee82..8d1b6bb2e 100644
--- a/src/components/TextEditor/extensions/image-group/ImageGroupNodeView.vue
+++ b/src/components/TextEditor/extensions/image-group/ImageGroupNodeView.vue
@@ -8,25 +8,48 @@
           </template>
           Edit
         </Button>
-        <Select :options="selectOptions" v-model="internalColumns" size="sm" variant="subtle" class="w-28" />
+        <Select
+          :options="selectOptions"
+          v-model="internalColumns"
+          size="sm"
+          variant="subtle"
+          class="w-28"
+        />
       </div>
       <div class="grid gap-px" :style="gridStyle">
-        <div v-for="(img, idx) in images" :key="img.attrs.src + idx"
-          class="relative aspect-square w-full h-full overflow-hidden bg-surface-white group">
-          <button v-if="isEditable" type="button"
+        <div
+          v-for="(img, idx) in images"
+          :key="img.attrs.src + idx"
+          class="relative aspect-square w-full h-full overflow-hidden bg-surface-white group"
+        >
+          <button
+            v-if="isEditable"
+            type="button"
             class="absolute top-1 right-1 z-10 bg-white/80 hover:bg-white rounded-full p-1 shadow transition-opacity opacity-0 group-hover:opacity-100 focus:opacity-100"
-            aria-label="Remove image" @click.stop="removeImage(idx)">
+            aria-label="Remove image"
+            @click.stop="removeImage(idx)"
+          >
             <LucideX class="w-4 h-4 text-gray-700" />
           </button>
-          <img :src="img.attrs.src" :alt="img.attrs.alt || ''"
-            class="object-cover w-full h-full not-prose cursor-pointer rounded-[2px]" v-if="!isEditable"
-            @click="openViewer(idx)" />
-          <img v-else :src="img.attrs.src" :alt="img.attrs.alt || ''"
-            class="object-cover w-full h-full not-prose rounded-[2px]" />
+          <img
+            :src="img.attrs.src"
+            :alt="img.attrs.alt || ''"
+            class="object-cover w-full h-full not-prose cursor-pointer rounded-[2px]"
+            v-if="!isEditable"
+            @click="openViewer(idx)"
+          />
+          <img
+            v-else
+            :src="img.attrs.src"
+            :alt="img.attrs.alt || ''"
+            class="object-cover w-full h-full not-prose rounded-[2px]"
+          />
 
           <!-- Caption overlay (visible when there's alt text) -->
-          <div v-if="img.attrs.alt"
-            class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent rounded-b-[2px] opacity-0 group-hover:opacity-100 transition-opacity">
+          <div
+            v-if="img.attrs.alt"
+            class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent rounded-b-[2px] opacity-0 group-hover:opacity-100 transition-opacity"
+          >
             <div class="p-2">
               <div class="text-white text-xs truncate" :title="img.attrs.alt">
                 {{ img.attrs.alt }}
@@ -35,11 +58,23 @@
           </div>
         </div>
       </div>
-      <ImageViewerModal v-if="showViewer" v-model:show="showViewer" :images="viewerImages"
-        :initialIndex="viewerIndex" />
-      <ImageGroupUploadDialog v-if="showEditModal" v-model="showEditModal" :files="editFiles" :editor="props.editor"
-        mode="edit" :existingImages="existingImages" :initialColumns="columns" @close="handleEditModalClose"
-        @save="handleEditSave" />
+      <ImageViewerModal
+        v-if="showViewer"
+        v-model:show="showViewer"
+        :images="viewerImages"
+        :initialIndex="viewerIndex"
+      />
+      <ImageGroupUploadDialog
+        v-if="showEditModal"
+        v-model="showEditModal"
+        :files="editFiles"
+        :editor="props.editor"
+        mode="edit"
+        :existingImages="existingImages"
+        :initialColumns="columns"
+        @close="handleEditModalClose"
+        @save="handleEditSave"
+      />
       <slot />
     </div>
   </NodeViewWrapper>
@@ -120,10 +155,7 @@ function handleEditModalClose() {
   editFiles.value = []
 }
 
-async function handleEditSave(data: {
-  images: ExistingImage[]
-  columns: number
-}) {
+async function handleEditSave(data: { images: ExistingImage[]; columns: number }) {
   // Update the node with the final images and columns from the modal
   props.editor.commands.command(({ tr, state }) => {
     const pos = props.getPos()
@@ -167,9 +199,7 @@ function removeImage(idx: number) {
       if (typeof pos === 'number') {
         const node = state.doc.nodeAt(pos)
         if (node && node.type.name === 'imageGroup') {
-          const newContent = newImages.map((img) =>
-            state.schema.nodes.image.create(img.attrs),
-          )
+          const newContent = newImages.map((img) => state.schema.nodes.image.create(img.attrs))
           tr.replaceWith(pos + 1, pos + 1 + node.content.size, newContent)
           return true
         }
diff --git a/src/components/TextEditor/extensions/image-group/ImageGroupUploadDialog.vue b/src/components/TextEditor/extensions/image-group/ImageGroupUploadDialog.vue
index 19c7beb25..4158c8ddb 100644
--- a/src/components/TextEditor/extensions/image-group/ImageGroupUploadDialog.vue
+++ b/src/components/TextEditor/extensions/image-group/ImageGroupUploadDialog.vue
@@ -27,11 +27,7 @@
             @update:modelValue="(val) => (columns = +val)"
           />
         </div>
-        <div
-          v-if="images && images.length"
-          class="grid gap-px mb-4"
-          :style="gridStyle"
-        >
+        <div v-if="images && images.length" class="grid gap-px mb-4" :style="gridStyle">
           <div
             v-for="(item, idx) in images"
             :key="item.id"
@@ -72,12 +68,7 @@
                 <div
                   v-if="editingCaption !== `${item.type}-${idx}`"
                   class="p-2 cursor-pointer"
-                  @click.stop="
-                    startEditingCaption(
-                      `${item.type}-${idx}`,
-                      item.existing?.alt || '',
-                    )
-                  "
+                  @click.stop="startEditingCaption(`${item.type}-${idx}`, item.existing?.alt || '')"
                 >
                   <div
                     class="text-white text-xs truncate"
@@ -91,9 +82,7 @@
                     :ref="(el) => (captionInputRef = el as HTMLInputElement)"
                     v-model="captionEditValue"
                     @blur="handleCaptionBlur(`${item.type}-${idx}`, idx)"
-                    @keydown.enter.prevent="
-                      saveCaption(`${item.type}-${idx}`, idx)
-                    "
+                    @keydown.enter.prevent="saveCaption(`${item.type}-${idx}`, idx)"
                     @keydown.escape="cancelEditingCaption"
                     class="w-full text-xs bg-white/90 text-gray-900 px-1 py-0.5 rounded-sm border-none outline-none"
                     placeholder="Add caption..."
@@ -135,9 +124,7 @@
                   <div
                     v-if="editingCaption !== `${item.type}-${idx}`"
                     class="p-2 cursor-pointer"
-                    @click.stop="
-                      startEditingCaption(`${item.type}-${idx}`, item.alt || '')
-                    "
+                    @click.stop="startEditingCaption(`${item.type}-${idx}`, item.alt || '')"
                   >
                     <div
                       class="text-white text-xs truncate"
@@ -151,9 +138,7 @@
                       ref="captionInput"
                       v-model="captionEditValue"
                       @blur="handleCaptionBlur(`${item.type}-${idx}`, idx)"
-                      @keydown.enter.prevent="
-                        saveCaption(`${item.type}-${idx}`, idx)
-                      "
+                      @keydown.enter.prevent="saveCaption(`${item.type}-${idx}`, idx)"
                       @keydown.escape="cancelEditingCaption"
                       class="w-full text-xs bg-white/90 text-gray-900 px-1 py-0.5 rounded border-none outline-none"
                       placeholder="Add caption..."
@@ -166,13 +151,10 @@
           </div>
         </div>
         <div v-if="images && images.length" class="text-p-sm text-ink-gray-5">
-          Upload more images by dropping them anywhere in this window. Reorder
-          images by dragging them. Hover over an image to edit caption.
+          Upload more images by dropping them anywhere in this window. Reorder images by dragging
+          them. Hover over an image to edit caption.
         </div>
-        <div
-          v-else
-          class="flex flex-col items-center justify-center min-h-[200px]"
-        >
+        <div v-else class="flex flex-col items-center justify-center min-h-[200px]">
           <div
             class="w-full flex flex-1 flex-col items-center justify-center border border-outline-gray-2 rounded-lg bg-surface-gray-1 h-full cursor-pointer transition hover:border-primary-400 hover:bg-primary-50 text-center"
             @click="triggerFileInput"
@@ -188,19 +170,14 @@
           </div>
         </div>
         <div v-if="uploading">
-          <div class="mb-2 text-sm">
-            Uploading: {{ uploadedCount }}/{{ totalCount }}
-          </div>
+          <div class="mb-2 text-sm">Uploading: {{ uploadedCount }}/{{ totalCount }}</div>
           <div class="w-full bg-gray-200 rounded h-2 overflow-hidden">
             <div
               class="bg-surface-gray-5 h-2 transition-all"
               :style="{ width: uploadProgress + '%' }"
             ></div>
           </div>
-          <div
-            v-if="uploadErrors && uploadErrors.some((e) => e)"
-            class="mt-2 text-red-500 text-xs"
-          >
+          <div v-if="uploadErrors && uploadErrors.some((e) => e)" class="mt-2 text-red-500 text-xs">
             Some files failed to upload.
           </div>
         </div>
@@ -208,9 +185,7 @@
     </template>
     <template #actions>
       <div class="flex justify-end gap-2">
-        <Button variant="ghost" :disabled="uploading" @click="handleCancel">
-          Cancel
-        </Button>
+        <Button variant="ghost" :disabled="uploading" @click="handleCancel"> Cancel </Button>
         <Button
           v-if="props.mode === 'edit'"
           variant="solid"
@@ -244,24 +219,14 @@
         v-if="isFileDragging"
         class="fixed inset-0 z-50 bg-gray-900/60 pointer-events-none flex items-center justify-center"
       >
-        <div class="text-ink-gray-1 text-base font-medium">
-          Drop images anywhere
-        </div>
+        <div class="text-ink-gray-1 text-base font-medium">Drop images anywhere</div>
       </div>
     </Transition>
   </Teleport>
 </template>
 
 <script setup lang="ts">
-import {
-  computed,
-  ref,
-  onMounted,
-  onUnmounted,
-  watch,
-  nextTick,
-  useTemplateRef,
-} from 'vue'
+import { computed, ref, onMounted, onUnmounted, watch, nextTick, useTemplateRef } from 'vue'
 import Dialog from '../../../Dialog/Dialog.vue'
 import Button from '../../../Button/Button.vue'
 import Select from '../../../Select/Select.vue'
@@ -336,9 +301,7 @@ watch(
   () => props.modelValue,
   (isOpen) => {
     if (isOpen && props.mode === 'edit') {
-      const existingItems = (props.existingImages || []).map(
-        createExistingImageItem,
-      )
+      const existingItems = (props.existingImages || []).map(createExistingImageItem)
       const fileItems = (props.files || []).map(createImageItem)
       images.value = [...existingItems, ...fileItems]
 
@@ -359,9 +322,7 @@ watch(
   () => props.existingImages,
   (newExistingImages) => {
     if (props.modelValue && props.mode === 'edit') {
-      const existingItems = (newExistingImages || []).map(
-        createExistingImageItem,
-      )
+      const existingItems = (newExistingImages || []).map(createExistingImageItem)
       const fileItems = (props.files || []).map(createImageItem)
       images.value = [...existingItems, ...fileItems]
     }
@@ -505,8 +466,7 @@ function addFiles(files: File[]) {
     .map((item) => `${item.file!.name}-${item.file!.size}`)
 
   const uniqueNewItems = newImageItems.filter(
-    (item) =>
-      !existingFileSignatures.includes(`${item.file!.name}-${item.file!.size}`),
+    (item) => !existingFileSignatures.includes(`${item.file!.name}-${item.file!.size}`),
   )
 
   images.value.push(...uniqueNewItems)
@@ -621,11 +581,7 @@ function onDragLeave(e: DragEvent, idx: number) {
 }
 
 function isDropTarget(idx: number) {
-  return (
-    overIndex.value === idx &&
-    draggedIndex.value !== null &&
-    draggedIndex.value !== idx
-  )
+  return overIndex.value === idx && draggedIndex.value !== null && draggedIndex.value !== idx
 }
 
 function onDragOverWindow(e: DragEvent) {
@@ -725,9 +681,7 @@ async function uploadFiles(files: File[]): Promise<UploadResult[]> {
       return { success: false, error: err }
     } finally {
       uploadedCount.value++
-      uploadProgress.value = Math.round(
-        (uploadedCount.value / totalCount.value) * 100,
-      )
+      uploadProgress.value = Math.round((uploadedCount.value / totalCount.value) * 100)
     }
   })
 
diff --git a/src/components/TextEditor/extensions/image-group/image-group-extension.ts b/src/components/TextEditor/extensions/image-group/image-group-extension.ts
index 37a303e65..4f995d10e 100644
--- a/src/components/TextEditor/extensions/image-group/image-group-extension.ts
+++ b/src/components/TextEditor/extensions/image-group/image-group-extension.ts
@@ -70,9 +70,7 @@ export const ImageGroup = Node.create<ImageGroupOptions>({
           if (typeof element === 'string') return {}
           const el = element as HTMLElement
           return {
-            columns: el.getAttribute('data-columns')
-              ? Number(el.getAttribute('data-columns'))
-              : 4,
+            columns: el.getAttribute('data-columns') ? Number(el.getAttribute('data-columns')) : 4,
           }
         },
       },
diff --git a/src/components/TextEditor/extensions/image-viewer-extension.ts b/src/components/TextEditor/extensions/image-viewer-extension.ts
index d71d8cde8..ab1c5fcb9 100644
--- a/src/components/TextEditor/extensions/image-viewer-extension.ts
+++ b/src/components/TextEditor/extensions/image-viewer-extension.ts
@@ -106,10 +106,7 @@ export default Extension.create({
                 if (node.type.name === 'image' && !foundImageNode) {
                   const domNode = view.nodeDOM(nodePos)
                   // Check if the event target is the DOM representation of this node or inside it
-                  if (
-                    domNode &&
-                    (domNode === event.target || domNode.contains(event.target))
-                  ) {
+                  if (domNode && (domNode === event.target || domNode.contains(event.target))) {
                     event.preventDefault()
                     extension.editor.commands.openImageViewer(node.attrs.src)
                     foundImageNode = true
diff --git a/src/components/TextEditor/extensions/image/image-extension.ts b/src/components/TextEditor/extensions/image/image-extension.ts
index f98a63330..1cf84dcbb 100644
--- a/src/components/TextEditor/extensions/image/image-extension.ts
+++ b/src/components/TextEditor/extensions/image/image-extension.ts
@@ -1,8 +1,4 @@
-import {
-  Node as NodeExtension,
-  nodeInputRule,
-  mergeAttributes,
-} from '@tiptap/core'
+import { Node as NodeExtension, nodeInputRule, mergeAttributes } from '@tiptap/core'
 import { VueNodeViewRenderer } from '@tiptap/vue-3'
 import MediaNodeView from '../../components/MediaNodeView.vue'
 import { Plugin, Selection, Transaction, EditorState } from '@tiptap/pm/state'
@@ -155,10 +151,7 @@ export const ImageExtension = NodeExtension.create<ImageExtensionOptions>({
   },
 
   renderHTML({ HTMLAttributes }) {
-    return [
-      'img',
-      mergeAttributes(this.options.HTMLAttributes || {}, HTMLAttributes),
-    ]
+    return ['img', mergeAttributes(this.options.HTMLAttributes || {}, HTMLAttributes)]
   },
 
   addNodeView() {
@@ -237,31 +230,19 @@ export const ImageExtension = NodeExtension.create<ImageExtensionOptions>({
           // Find the node position
           let nodePos: number | null = null
           editor.view.state.doc.descendants((node, pos) => {
-            if (
-              node.type.name === 'image' &&
-              node.attrs.uploadId === uploadId
-            ) {
+            if (node.type.name === 'image' && node.attrs.uploadId === uploadId) {
               nodePos = pos
               return false
             }
           })
 
           if (nodePos === null) {
-            console.error(
-              'reuploadImage: could not find node with uploadId',
-              uploadId,
-            )
+            console.error('reuploadImage: could not find node with uploadId', uploadId)
             return false
           }
 
           // Re-run the upload using the stored file, replacing the node at its position
-          return uploadImageBase(
-            fileData.file,
-            editor.view,
-            nodePos,
-            this.options,
-            'replace',
-          )
+          return uploadImageBase(fileData.file, editor.view, nodePos, this.options, 'replace')
         },
     }
   },
@@ -293,8 +274,8 @@ export const ImageExtension = NodeExtension.create<ImageExtensionOptions>({
                 return false
               }
 
-              const images = Array.from(event.dataTransfer.files).filter(
-                (file) => /image/i.test(file.type),
+              const images = Array.from(event.dataTransfer.files).filter((file) =>
+                /image/i.test(file.type),
               )
 
               if (images.length === 0) {
@@ -335,10 +316,7 @@ export const ImageExtension = NodeExtension.create<ImageExtensionOptions>({
 
               for (let i = 0; i < clipboardItems.length; i++) {
                 const item = clipboardItems[i]
-                if (
-                  item.kind === 'file' &&
-                  item.type.indexOf('image/') !== -1
-                ) {
+                if (item.kind === 'file' && item.type.indexOf('image/') !== -1) {
                   const file = item.getAsFile()
                   if (file) {
                     images.push(file)
@@ -393,10 +371,7 @@ export const ImageExtension = NodeExtension.create<ImageExtensionOptions>({
   },
 })
 
-function findInsertPosition(
-  view: EditorView,
-  lastNodeId: string | null,
-): number | null {
+function findInsertPosition(view: EditorView, lastNodeId: string | null): number | null {
   if (!lastNodeId) {
     return null
   }
@@ -574,11 +549,7 @@ function findImageNodeBySource(
   })
 }
 
-function updateNodeWithDimensions(
-  src: string,
-  view: EditorView,
-  pos: number,
-): void {
+function updateNodeWithDimensions(src: string, view: EditorView, pos: number): void {
   getImageDimensions(src)
     .then((dimensions) => {
       const node = view.state.doc.nodeAt(pos)
@@ -601,9 +572,7 @@ function updateNodeWithDimensions(
     })
 }
 
-function getImageDimensions(
-  src: string,
-): Promise<{ width: number; height: number }> {
+function getImageDimensions(src: string): Promise<{ width: number; height: number }> {
   return new Promise((resolve, reject) => {
     const img = new Image()
     img.onload = () =>
@@ -639,9 +608,7 @@ export function processMultipleImages(
     const file = imageQueue.shift()
     if (!file) return
 
-    const currentPos = lastInsertedNodeId
-      ? findInsertPosition(view, lastInsertedNodeId)
-      : pos
+    const currentPos = lastInsertedNodeId ? findInsertPosition(view, lastInsertedNodeId) : pos
 
     uploadImageWithTracking(file, view, currentPos, options, (newNodeId) => {
       lastInsertedNodeId = newNodeId
diff --git a/src/components/TextEditor/extensions/image/index.ts b/src/components/TextEditor/extensions/image/index.ts
index 0ed930548..47a9ee87c 100644
--- a/src/components/TextEditor/extensions/image/index.ts
+++ b/src/components/TextEditor/extensions/image/index.ts
@@ -1,5 +1 @@
-export {
-  ImageExtension,
-  type ImageExtensionOptions,
-  type SetImageOptions,
-} from './image-extension'
+export { ImageExtension, type ImageExtensionOptions, type SetImageOptions } from './image-extension'
diff --git a/src/components/TextEditor/extensions/link/link-extension.ts b/src/components/TextEditor/extensions/link/link-extension.ts
index 34101ce72..4dc399e65 100644
--- a/src/components/TextEditor/extensions/link/link-extension.ts
+++ b/src/components/TextEditor/extensions/link/link-extension.ts
@@ -50,10 +50,7 @@ export const LinkExtension = Link.extend({
             if (markRange) {
               range = markRange
               // Select the link text
-              editor
-                .chain()
-                .setTextSelection({ from: markRange.from, to: markRange.to })
-                .run()
+              editor.chain().setTextSelection({ from: markRange.from, to: markRange.to }).run()
               shouldDelayPopover = true
             } else {
               // No selection and not within a link, and cursor not in link
@@ -75,9 +72,7 @@ export const LinkExtension = Link.extend({
                   return
                 }
 
-                let chain = editor
-                  .chain()
-                  .focus(null, { scrollIntoView: false })
+                let chain = editor.chain().focus(null, { scrollIntoView: false })
 
                 if (href === '') {
                   chain
@@ -269,10 +264,7 @@ function openLinkEditor(href: string, anchor: HTMLElement): Promise<string> {
   })
 }
 
-function clearLinkOnBoundaryPlugin(options: {
-  editor: Editor
-  type: MarkType
-}) {
+function clearLinkOnBoundaryPlugin(options: { editor: Editor; type: MarkType }) {
   return new Plugin({
     key: new PluginKey('clearLinkMarkOnBoundary'),
     appendTransaction: (transactions, oldState, newState) => {
@@ -289,9 +281,7 @@ function clearLinkOnBoundaryPlugin(options: {
       }
 
       const linkMarkType = options.type
-      const hasStoredLinkMark = storedMarks.some(
-        (mark) => mark.type === linkMarkType,
-      )
+      const hasStoredLinkMark = storedMarks.some((mark) => mark.type === linkMarkType)
 
       if (!hasStoredLinkMark) {
         return null
@@ -299,9 +289,7 @@ function clearLinkOnBoundaryPlugin(options: {
 
       // Check if the cursor position itself has an active link mark in the document
       const marksAtCursor = $from.marks()
-      const activeLinkAtCursor = marksAtCursor.some(
-        (mark) => mark.type === linkMarkType,
-      )
+      const activeLinkAtCursor = marksAtCursor.some((mark) => mark.type === linkMarkType)
 
       if (activeLinkAtCursor) {
         // If there's an actual link mark active in the document at the cursor,
diff --git a/src/components/TextEditor/extensions/mention/mention-extension.ts b/src/components/TextEditor/extensions/mention/mention-extension.ts
index 207d0abda..1d9a65e16 100644
--- a/src/components/TextEditor/extensions/mention/mention-extension.ts
+++ b/src/components/TextEditor/extensions/mention/mention-extension.ts
@@ -44,8 +44,7 @@ function createMentionNode(component?: Component) {
         },
         label: {
           default: null,
-          parseHTML: (element: HTMLElement) =>
-            element.getAttribute('data-label'),
+          parseHTML: (element: HTMLElement) => element.getAttribute('data-label'),
           renderHTML: (attributes: any) => {
             if (!attributes.label) {
               return {}
@@ -95,64 +94,63 @@ function createMentionNode(component?: Component) {
   return Node.create(config)
 }
 
-const MentionSuggestionExtension =
-  createSuggestionExtension<MentionSuggestionItem>({
-    name: 'mentionSuggestion',
-    char: '@',
-    pluginKey: new PluginKey('mentionSuggestion'),
-    component: SuggestionList,
+const MentionSuggestionExtension = createSuggestionExtension<MentionSuggestionItem>({
+  name: 'mentionSuggestion',
+  char: '@',
+  pluginKey: new PluginKey('mentionSuggestion'),
+  component: SuggestionList,
 
-    addOptions() {
-      return {
-        mentions: [],
-      }
-    },
+  addOptions() {
+    return {
+      mentions: [],
+    }
+  },
 
-    items: ({ query, editor }) => {
-      const { mentions: _mentions } = editor.extensionManager.extensions.find(
-        (ext) => ext.name === 'mentionSuggestion',
-      )!.options
-      const mentions = toValue(_mentions)
-
-      const filtered = mentions
-        .filter((mention: MentionSuggestionItem) =>
-          mention.label.toLowerCase().startsWith(query.toLowerCase()),
-        )
-        .slice(0, 10)
-        .map((mention: MentionSuggestionItem) => ({
-          ...mention,
-          display: mention.label,
-        }))
-
-      return filtered
-    },
+  items: ({ query, editor }) => {
+    const { mentions: _mentions } = editor.extensionManager.extensions.find(
+      (ext) => ext.name === 'mentionSuggestion',
+    )!.options
+    const mentions = toValue(_mentions)
+
+    const filtered = mentions
+      .filter((mention: MentionSuggestionItem) =>
+        mention.label.toLowerCase().startsWith(query.toLowerCase()),
+      )
+      .slice(0, 10)
+      .map((mention: MentionSuggestionItem) => ({
+        ...mention,
+        display: mention.label,
+      }))
+
+    return filtered
+  },
 
-    command: ({ editor, range, props }) => {
-      const attributes = {
-        id: props.id || props.value,
-        label: props.label,
-      }
+  command: ({ editor, range, props }) => {
+    const attributes = {
+      id: props.id || props.value,
+      label: props.label,
+    }
 
-      editor
-        .chain()
-        .focus()
-        .insertContentAt(range, [
-          {
-            type: 'mention',
-            attrs: attributes,
-          },
-        ])
-        .run()
-    },
+    editor
+      .chain()
+      .focus()
+      .insertContentAt(range, [
+        {
+          type: 'mention',
+          attrs: attributes,
+        },
+      ])
+      .run()
+  },
 
-    tippyOptions: {
-      placement: 'bottom-start',
-      offset: [0, 8],
-    },
-    allowSpaces: false,
-    decorationTag: 'span',
-    decorationClass: 'mention-suggestion-active',
-  })
+  tippyOptions: {
+    placement: 'bottom-start',
+    offset: [0, 8],
+  },
+  allowSpaces: false,
+  decorationTag: 'span',
+  decorationClass: 'mention-suggestion-active',
+})
 
 export const MentionExtension = Extension.create<{
   mentions: MaybeRefOrGetter<MentionSuggestionItem[]>
diff --git a/src/components/TextEditor/extensions/mention/style.css b/src/components/TextEditor/extensions/mention/style.css
index 5c3e4c3de..7a85d75e3 100644
--- a/src/components/TextEditor/extensions/mention/style.css
+++ b/src/components/TextEditor/extensions/mention/style.css
@@ -6,6 +6,7 @@
   display: inline-block;
 }
 
-.mention.ProseMirror-selectednode, .mention:hover {
+.mention.ProseMirror-selectednode,
+.mention:hover {
   background-color: var(--surface-gray-1, #f8f8f8);
 }
diff --git a/src/components/TextEditor/extensions/shared/color-utils.ts b/src/components/TextEditor/extensions/shared/color-utils.ts
index 6e805f214..0c9902c70 100644
--- a/src/components/TextEditor/extensions/shared/color-utils.ts
+++ b/src/components/TextEditor/extensions/shared/color-utils.ts
@@ -111,9 +111,7 @@ export function getClosestNamedColor(
     const namedHex = colorMap[colorName]
     if (!namedHex) continue
 
-    const namedHexClean = namedHex.startsWith('#')
-      ? namedHex.substring(1)
-      : namedHex
+    const namedHexClean = namedHex.startsWith('#') ? namedHex.substring(1) : namedHex
 
     if (namedHexClean.length !== 6) continue
 
@@ -122,9 +120,7 @@ export function getClosestNamedColor(
     const nb = parseInt(namedHexClean.substring(4, 6), 16)
 
     // Calculate Euclidean distance
-    const distance = Math.sqrt(
-      Math.pow(r - nr, 2) + Math.pow(g - ng, 2) + Math.pow(b - nb, 2),
-    )
+    const distance = Math.sqrt(Math.pow(r - nr, 2) + Math.pow(g - ng, 2) + Math.pow(b - nb, 2))
 
     if (distance < minDistance) {
       minDistance = distance
@@ -154,9 +150,7 @@ export function extractColorFromStyle(
   const allColorsInMap = Object.keys(colorMap)
 
   // Check for color in hex format
-  const hexColorMatch = new RegExp(`${property}:\\s*(#[0-9a-f]{6})`, 'i').exec(
-    style,
-  )
+  const hexColorMatch = new RegExp(`${property}:\\s*(#[0-9a-f]{6})`, 'i').exec(style)
   if (hexColorMatch && hexColorMatch[1]) {
     const closestOverallColor = getClosestNamedColor(
       hexColorMatch[1],
@@ -206,17 +200,8 @@ export function extractColorFromStyle(
 /**
  * Extracts text color from a style attribute
  */
-export function extractTextColorFromStyle(
-  style: string,
-  allowedColors: string[],
-): string | null {
-  return extractColorFromStyle(
-    style,
-    allowedColors,
-    textColorHexMap,
-    legacyTextColorMap,
-    'color',
-  )
+export function extractTextColorFromStyle(style: string, allowedColors: string[]): string | null {
+  return extractColorFromStyle(style, allowedColors, textColorHexMap, legacyTextColorMap, 'color')
 }
 
 /**
diff --git a/src/components/TextEditor/extensions/slash-commands/slash-commands-extension.ts b/src/components/TextEditor/extensions/slash-commands/slash-commands-extension.ts
index b7cf9e075..0ae43a090 100644
--- a/src/components/TextEditor/extensions/slash-commands/slash-commands-extension.ts
+++ b/src/components/TextEditor/extensions/slash-commands/slash-commands-extension.ts
@@ -22,9 +22,7 @@ import Minus from '~icons/lucide/minus'
 import Table from '~icons/lucide/table-2'
 import TableOfContents from '~icons/lucide/table-of-contents'
 
-export const SlashCommandSuggestionKey = new PluginKey<any>(
-  'slashCommandSuggestion',
-)
+export const SlashCommandSuggestionKey = new PluginKey<any>('slashCommandSuggestion')
 
 export interface CommandItem extends BaseSuggestionItem {
   title: string
@@ -42,24 +40,14 @@ const getCommands = (): CommandItem[] => [
     title: 'Heading 2',
     icon: Heading2,
     command: ({ editor, range }: CommandExecutionProps) => {
-      editor
-        .chain()
-        .focus()
-        .deleteRange(range)
-        .setNode('heading', { level: 2 })
-        .run()
+      editor.chain().focus().deleteRange(range).setNode('heading', { level: 2 }).run()
     },
   },
   {
     title: 'Heading 3',
     icon: Heading3,
     command: ({ editor, range }: CommandExecutionProps) => {
-      editor
-        .chain()
-        .focus()
-        .deleteRange(range)
-        .setNode('heading', { level: 3 })
-        .run()
+      editor.chain().focus().deleteRange(range).setNode('heading', { level: 3 }).run()
     },
   },
   {
@@ -148,12 +136,7 @@ const getCommands = (): CommandItem[] => [
     title: 'Table of Contents',
     icon: TableOfContents,
     command: ({ editor, range }: CommandExecutionProps) => {
-      editor
-        .chain()
-        .focus()
-        .deleteRange(range)
-        .insertTableOfContentsNode()
-        .run()
+      editor.chain().focus().deleteRange(range).insertTableOfContentsNode().run()
     },
   },
 ]
@@ -164,9 +147,7 @@ export const SlashCommands = createSuggestionExtension<CommandItem>({
   pluginKey: SlashCommandSuggestionKey,
   items: ({ query }) => {
     const commands = getCommands()
-    return commands.filter((item) =>
-      item.title.toLowerCase().startsWith(query.toLowerCase()),
-    )
+    return commands.filter((item) => item.title.toLowerCase().startsWith(query.toLowerCase()))
   },
   command: ({ editor, range, props: item }) => {
     if (item && typeof item.command === 'function') {
diff --git a/src/components/TextEditor/extensions/suggestion/SuggestionList.vue b/src/components/TextEditor/extensions/suggestion/SuggestionList.vue
index 2157dd0f0..80f265aaf 100644
--- a/src/components/TextEditor/extensions/suggestion/SuggestionList.vue
+++ b/src/components/TextEditor/extensions/suggestion/SuggestionList.vue
@@ -25,10 +25,7 @@
         <span>{{ item.display || item.title || item.name }}</span>
       </slot>
     </button>
-    <div
-      v-if="!items.length && showNoResults"
-      class="px-3 py-1.5 text-sm text-ink-gray-5"
-    >
+    <div v-if="!items.length && showNoResults" class="px-3 py-1.5 text-sm text-ink-gray-5">
       No results
     </div>
   </div>
@@ -104,8 +101,7 @@ const onKeyDown = ({ event }: { event: KeyboardEvent }) => {
 }
 
 const upHandler = () => {
-  selectedIndex.value =
-    (selectedIndex.value + props.items.length - 1) % props.items.length
+  selectedIndex.value = (selectedIndex.value + props.items.length - 1) % props.items.length
   scrollIntoView()
 }
 
diff --git a/src/components/TextEditor/extensions/suggestion/createSuggestionExtension.ts b/src/components/TextEditor/extensions/suggestion/createSuggestionExtension.ts
index e7f8ff6aa..6d6fb51b3 100644
--- a/src/components/TextEditor/extensions/suggestion/createSuggestionExtension.ts
+++ b/src/components/TextEditor/extensions/suggestion/createSuggestionExtension.ts
@@ -1,9 +1,6 @@
 import { Extension, Editor, Range } from '@tiptap/core'
 import { VueRenderer } from '@tiptap/vue-3'
-import Suggestion, {
-  SuggestionOptions,
-  SuggestionProps,
-} from '@tiptap/suggestion'
+import Suggestion, { SuggestionOptions, SuggestionProps } from '@tiptap/suggestion'
 import { PluginKey } from '@tiptap/pm/state'
 import tippy, { Instance as TippyInstance, Props as TippyProps } from 'tippy.js'
 import { Component as VueComponent } from 'vue'
@@ -14,16 +11,11 @@ export interface BaseSuggestionItem {
   [key: string]: any
 }
 
-export interface CreateSuggestionExtensionOptions<
-  TItem extends BaseSuggestionItem,
-> {
+export interface CreateSuggestionExtensionOptions<TItem extends BaseSuggestionItem> {
   name: string
   char: string
   pluginKey: PluginKey
-  items: (props: {
-    query: string
-    editor: Editor
-  }) => TItem[] | Promise<TItem[]>
+  items: (props: { query: string; editor: Editor }) => TItem[] | Promise<TItem[]>
   command: (props: { editor: Editor; range: Range; props: TItem }) => void
   component: VueComponent
   tippyOptions?: Partial<TippyProps>
@@ -45,9 +37,7 @@ export function createSuggestionExtension<TItem extends BaseSuggestionItem>(
     name: options.name,
 
     addOptions() {
-      const customOptions = options.addOptions
-        ? options.addOptions.call(this)
-        : {}
+      const customOptions = options.addOptions ? options.addOptions.call(this) : {}
 
       return {
         ...customOptions,
diff --git a/src/components/TextEditor/extensions/tag/tag-extension.ts b/src/components/TextEditor/extensions/tag/tag-extension.ts
index 575f592f2..978c79113 100644
--- a/src/components/TextEditor/extensions/tag/tag-extension.ts
+++ b/src/components/TextEditor/extensions/tag/tag-extension.ts
@@ -43,9 +43,7 @@ export const TagNode = Node.create({
           const element = dom as HTMLElement
           return {
             tagId: element.getAttribute('data-tag-id'),
-            tagLabel:
-              element.getAttribute('data-tag-label') ||
-              element.innerText.replace(/^#/, ''),
+            tagLabel: element.getAttribute('data-tag-label') || element.innerText.replace(/^#/, ''),
           }
         },
       },
@@ -61,7 +59,7 @@ export const TagNode = Node.create({
     ]
   },
   renderText({ node }: any) {
-    return `#${node.attrs.tagLabel ||  ''}`
+    return `#${node.attrs.tagLabel || ''}`
   },
   addCommands() {
     return {
@@ -103,17 +101,12 @@ export const TagExtension = createSuggestionExtension<TagSuggestionItem>({
 
     // Filter existing tags based on the query
     let filteredTags = tags
-      .filter((tag: TagSuggestionItem) =>
-        tag.label.toLowerCase().startsWith(query.toLowerCase()),
-      )
+      .filter((tag: TagSuggestionItem) => tag.label.toLowerCase().startsWith(query.toLowerCase()))
       .map((tag: TagSuggestionItem) => ({ ...tag, display: tag.label }))
 
     if (
       query.length > 0 &&
-      !tags.some(
-        (tag: TagSuggestionItem) =>
-          tag.label.toLowerCase() === query.toLowerCase(),
-      )
+      !tags.some((tag: TagSuggestionItem) => tag.label.toLowerCase() === query.toLowerCase())
     ) {
       filteredTags.push({
         display: `New tag: "${query}"`,
diff --git a/src/components/TextEditor/extensions/toc-node/TocNodeView.vue b/src/components/TextEditor/extensions/toc-node/TocNodeView.vue
index ab8bc01b6..d9d79d530 100644
--- a/src/components/TextEditor/extensions/toc-node/TocNodeView.vue
+++ b/src/components/TextEditor/extensions/toc-node/TocNodeView.vue
@@ -1,8 +1,5 @@
 <template>
-  <NodeViewWrapper
-    class="table-of-contents-node group relative"
-    contenteditable="false"
-  >
+  <NodeViewWrapper class="table-of-contents-node group relative" contenteditable="false">
     <p v-if="anchorTree.length === 0" class="text-sm text-ink-gray-5 py-3">
       There are no headings in this document.
     </p>
@@ -30,16 +27,7 @@
 </template>
 
 <script setup lang="ts">
-import {
-  computed,
-  ref,
-  onMounted,
-  onBeforeUnmount,
-  nextTick,
-  watch,
-  defineComponent,
-  h,
-} from 'vue'
+import { computed, ref, onMounted, onBeforeUnmount, nextTick, watch, defineComponent, h } from 'vue'
 import type { PropType, VNode } from 'vue'
 import { NodeViewWrapper, nodeViewProps } from '@tiptap/vue-3'
 import { TextSelection } from '@tiptap/pm/state'
@@ -63,12 +51,8 @@ const anchors = ref<HeadingAnchor[]>([])
 const anchorTree = computed(() => buildAnchorTree(anchors.value))
 const isEditable = ref(false)
 
-const orderedListHTMLAttrs = computed(
-  () => getExtensionHTMLAttributes('orderedList') ?? {},
-)
-const listItemHTMLAttrs = computed(
-  () => getExtensionHTMLAttributes('listItem') ?? {},
-)
+const orderedListHTMLAttrs = computed(() => getExtensionHTMLAttributes('orderedList') ?? {})
+const listItemHTMLAttrs = computed(() => getExtensionHTMLAttributes('listItem') ?? {})
 
 const removeNode = () => {
   if (!props.editor || !isEditable.value) return
@@ -112,13 +96,8 @@ const scrollToHeading = (heading: HeadingAnchor) => {
   }
 
   if (!element) {
-    const allHeadings = Array.from(
-      editorDom.querySelectorAll('h1, h2, h3, h4, h5, h6'),
-    )
-    element =
-      allHeadings.find(
-        (el) => el.textContent?.trim() === heading.textContent,
-      ) || null
+    const allHeadings = Array.from(editorDom.querySelectorAll('h1, h2, h3, h4, h5, h6'))
+    element = allHeadings.find((el) => el.textContent?.trim() === heading.textContent) || null
   }
 
   const tr = view.state.tr
@@ -132,8 +111,7 @@ const scrollToHeading = (heading: HeadingAnchor) => {
     const containerRect = editorContainer.getBoundingClientRect()
 
     const currentScrollTop = editorContainer.scrollTop
-    const elementTopRelativeToContainer =
-      elementRect.top - containerRect.top + currentScrollTop
+    const elementTopRelativeToContainer = elementRect.top - containerRect.top + currentScrollTop
 
     editorContainer.scrollTo({
       top: Math.max(0, elementTopRelativeToContainer - 20),
@@ -152,8 +130,7 @@ const scrollToHeading = (heading: HeadingAnchor) => {
         const nodeRect = node.getBoundingClientRect()
         const containerRect = editorContainer.getBoundingClientRect()
         const currentScrollTop = editorContainer.scrollTop
-        const nodeTopRelativeToContainer =
-          nodeRect.top - containerRect.top + currentScrollTop
+        const nodeTopRelativeToContainer = nodeRect.top - containerRect.top + currentScrollTop
 
         editorContainer.scrollTo({
           top: Math.max(0, nodeTopRelativeToContainer - 20),
@@ -201,9 +178,7 @@ const TocRecursiveItem = defineComponent({
             props.listAttrs?.class,
             'toc-item',
             props.node.isScrolledOver ? 'text-ink-gray-5' : 'text-ink-gray-8',
-            props.node.isActive && !props.node.isScrolledOver
-              ? 'font-medium'
-              : '',
+            props.node.isActive && !props.node.isScrolledOver ? 'font-medium' : '',
           ]
             .filter(Boolean)
             .join(' '),
@@ -240,9 +215,8 @@ const TocRecursiveItem = defineComponent({
 })
 
 const getExtensionHTMLAttributes = (name: string) => {
-  return props.editor?.extensionManager?.extensions.find(
-    (ext: any) => ext.name === name,
-  )?.options?.HTMLAttributes
+  return props.editor?.extensionManager?.extensions.find((ext: any) => ext.name === name)?.options
+    ?.HTMLAttributes
 }
 
 const buildAnchorTree = (items: HeadingAnchor[]): AnchorNode[] => {
@@ -321,13 +295,8 @@ const extractAnchors = (): HeadingAnchor[] => {
       const domPos = props.editor.view.domAtPos(pos)
       const domNode = domPos.node
       if (domNode?.nodeType === Node.ELEMENT_NODE) {
-        const headingEl = (domNode as Element).closest(
-          'h1, h2, h3, h4, h5, h6, [data-toc-id]',
-        )
-        id =
-          headingEl?.getAttribute('data-toc-id') ||
-          headingEl?.getAttribute('id') ||
-          undefined
+        const headingEl = (domNode as Element).closest('h1, h2, h3, h4, h5, h6, [data-toc-id]')
+        id = headingEl?.getAttribute('data-toc-id') || headingEl?.getAttribute('id') || undefined
       }
     }
 
@@ -339,21 +308,15 @@ const extractAnchors = (): HeadingAnchor[] => {
     })
   })
 
-  if (!headings.length || !scrollParent || !props.editor?.view?.dom)
-    return headings
+  if (!headings.length || !scrollParent || !props.editor?.view?.dom) return headings
 
   const scrollTop = scrollParent.scrollTop
   headings.forEach((heading) => {
-    const element = props.editor.view.dom.querySelector(
-      `[data-toc-id="${heading.id}"]`,
-    )
+    const element = props.editor.view.dom.querySelector(`[data-toc-id="${heading.id}"]`)
     if (element) {
       const relativeTop =
-        element.getBoundingClientRect().top -
-        scrollParent.getBoundingClientRect().top +
-        scrollTop
-      heading.isActive =
-        relativeTop >= scrollTop - 50 && relativeTop <= scrollTop + 100
+        element.getBoundingClientRect().top - scrollParent.getBoundingClientRect().top + scrollTop
+      heading.isActive = relativeTop >= scrollTop - 50 && relativeTop <= scrollTop + 100
       heading.isScrolledOver = relativeTop < scrollTop - 50
     }
   })
diff --git a/src/components/TextEditor/extensions/toc-node/index.ts b/src/components/TextEditor/extensions/toc-node/index.ts
index 28e9f840c..a46f1b674 100644
--- a/src/components/TextEditor/extensions/toc-node/index.ts
+++ b/src/components/TextEditor/extensions/toc-node/index.ts
@@ -1,3 +1,2 @@
 export { TocNodeExtension } from './toc-node-extension'
 export { default } from './toc-node-extension'
-
diff --git a/src/components/TextEditor/extensions/toc-node/toc-node-extension.ts b/src/components/TextEditor/extensions/toc-node/toc-node-extension.ts
index f260a2d10..f5efbbd60 100644
--- a/src/components/TextEditor/extensions/toc-node/toc-node-extension.ts
+++ b/src/components/TextEditor/extensions/toc-node/toc-node-extension.ts
@@ -43,8 +43,7 @@ export const TocNodeExtension = Node.create({
       if (this.editor?.commands?.getCurrentTab) {
         activeTabId = this.editor.commands.getCurrentTab() || null
       }
-    } catch (e) {
-    }
+    } catch (e) {}
 
     if (this.editor?.state?.doc) {
       const doc = this.editor.state.doc
@@ -123,7 +122,13 @@ export const TocNodeExtension = Node.create({
           {},
           ['p', { style: 'margin: 0' }, node.text],
           ...(node.children.length > 0
-            ? [['ol', { style: 'list-style-type: decimal; padding-left: 1.5em' }, ...convertToHTML(node.children)]]
+            ? [
+                [
+                  'ol',
+                  { style: 'list-style-type: decimal; padding-left: 1.5em' },
+                  ...convertToHTML(node.children),
+                ],
+              ]
             : []),
         ])
       }
@@ -136,7 +141,11 @@ export const TocNodeExtension = Node.create({
     return [
       'div',
       { ...HTMLAttributes, 'data-type': 'toc-node', class: 'table-of-contents-node' },
-      ['ol', { style: 'list-style-type: decimal; margin: 0.5em 0; padding-left: 1.5em' }, ...listItems],
+      [
+        'ol',
+        { style: 'list-style-type: decimal; margin: 0.5em 0; padding-left: 1.5em' },
+        ...listItems,
+      ],
     ]
   },
 
@@ -161,6 +170,3 @@ export const TocNodeExtension = Node.create({
 })
 
 export default TocNodeExtension
-
-
-
diff --git a/src/components/TextEditor/extensions/video-extension.ts b/src/components/TextEditor/extensions/video-extension.ts
index abc0b5e68..8d8767979 100644
--- a/src/components/TextEditor/extensions/video-extension.ts
+++ b/src/components/TextEditor/extensions/video-extension.ts
@@ -1,8 +1,4 @@
-import {
-  Node as NodeExtension,
-  nodeInputRule,
-  mergeAttributes,
-} from '@tiptap/core'
+import { Node as NodeExtension, nodeInputRule, mergeAttributes } from '@tiptap/core'
 import { VueNodeViewRenderer } from '@tiptap/vue-3'
 import MediaNodeView from '../components/MediaNodeView.vue'
 import { Plugin, Selection, Transaction, EditorState } from '@tiptap/pm/state'
@@ -71,8 +67,7 @@ declare module '@tiptap/core' {
 /**
  * Matches markdown-style video syntax (custom): !video[alt](src "title")
  */
-const inputRegex =
-  /(?:^|\s)(!video\[(.+|:?)]\((\S+)(?:(?:\s+)["'](\S+)["'])?\))$/
+const inputRegex = /(?:^|\s)(!video\[(.+|:?)]\((\S+)(?:(?:\s+)["'](\S+)["'])?\))$/
 
 export const VideoExtension = NodeExtension.create<VideoExtensionOptions>({
   name: 'video',
@@ -105,8 +100,7 @@ export const VideoExtension = NodeExtension.create<VideoExtensionOptions>({
       float: {
         default: null,
         parseHTML: (element) => {
-          const float =
-            element.getAttribute('data-float') || element.getAttribute('float')
+          const float = element.getAttribute('data-float') || element.getAttribute('float')
 
           if (['left', 'right', null].includes(float)) {
             return float as 'left' | 'right' | null
@@ -218,41 +212,26 @@ export const VideoExtension = NodeExtension.create<VideoExtensionOptions>({
         ({ editor }) => {
           const fileData = localFileMap.get(uploadId)
           if (!fileData) {
-            console.error(
-              'reuploadVideo: no file found in localFileMap for uploadId',
-              uploadId,
-            )
+            console.error('reuploadVideo: no file found in localFileMap for uploadId', uploadId)
             return false
           }
 
           // Find the node position
           let nodePos: number | null = null
           editor.view.state.doc.descendants((node, pos) => {
-            if (
-              node.type.name === 'video' &&
-              node.attrs.uploadId === uploadId
-            ) {
+            if (node.type.name === 'video' && node.attrs.uploadId === uploadId) {
               nodePos = pos
               return false
             }
           })
 
           if (nodePos === null) {
-            console.error(
-              'reuploadVideo: could not find node with uploadId',
-              uploadId,
-            )
+            console.error('reuploadVideo: could not find node with uploadId', uploadId)
             return false
           }
 
           // Re-run the upload using the stored file, replacing the node at its position
-          return uploadVideoBase(
-            fileData.file,
-            editor.view,
-            nodePos,
-            this.options,
-            'replace',
-          )
+          return uploadVideoBase(fileData.file, editor.view, nodePos, this.options, 'replace')
         },
     }
   },
@@ -284,8 +263,8 @@ export const VideoExtension = NodeExtension.create<VideoExtensionOptions>({
                 return false
               }
 
-              const videos = Array.from(event.dataTransfer.files).filter(
-                (file) => /video/i.test(file.type),
+              const videos = Array.from(event.dataTransfer.files).filter((file) =>
+                /video/i.test(file.type),
               )
 
               if (videos.length === 0) {
@@ -326,10 +305,7 @@ export const VideoExtension = NodeExtension.create<VideoExtensionOptions>({
 
               for (let i = 0; i < clipboardItems.length; i++) {
                 const item = clipboardItems[i]
-                if (
-                  item.kind === 'file' &&
-                  item.type.indexOf('video/') !== -1
-                ) {
+                if (item.kind === 'file' && item.type.indexOf('video/') !== -1) {
                   const file = item.getAsFile()
                   if (file) videos.push(file)
                 }
@@ -380,10 +356,7 @@ export const VideoExtension = NodeExtension.create<VideoExtensionOptions>({
   },
 })
 
-function findInsertPosition(
-  view: EditorView,
-  lastNodeId: string | null,
-): number | null {
+function findInsertPosition(view: EditorView, lastNodeId: string | null): number | null {
   if (!lastNodeId) {
     return null
   }
@@ -567,11 +540,7 @@ function findVideoNodeBySource(
   })
 }
 
-function updateNodeWithDimensions(
-  src: string,
-  view: EditorView,
-  pos: number,
-): void {
+function updateNodeWithDimensions(src: string, view: EditorView, pos: number): void {
   getVideoDimensions(src)
     .then((dimensions) => {
       const node = view.state.doc.nodeAt(pos)
@@ -594,9 +563,7 @@ function updateNodeWithDimensions(
     })
 }
 
-function getVideoDimensions(
-  src: string,
-): Promise<{ width: number; height: number }> {
+function getVideoDimensions(src: string): Promise<{ width: number; height: number }> {
   return new Promise((resolve, reject) => {
     const video = document.createElement('video')
     video.preload = 'metadata'
@@ -638,9 +605,7 @@ export function processMultipleVideos(
     const file = videoQueue.shift()
     if (!file) return
 
-    const currentPos = lastInsertedNodeId
-      ? findInsertPosition(view, lastInsertedNodeId)
-      : pos
+    const currentPos = lastInsertedNodeId ? findInsertPosition(view, lastInsertedNodeId) : pos
 
     uploadVideoWithTracking(file, view, currentPos, options, (newNodeId) => {
       lastInsertedNodeId = newNodeId
diff --git a/src/components/TextEditor/stories/Comment.vue b/src/components/TextEditor/stories/Comment.vue
index b63e22de1..eac79c1b1 100644
--- a/src/components/TextEditor/stories/Comment.vue
+++ b/src/components/TextEditor/stories/Comment.vue
@@ -29,20 +29,12 @@ const customButtons = [
     placeholder="Write something amazing..."
   >
     <template v-slot:editor="{ editor }">
-      <EditorContent
-        class="max-h-[50vh] overflow-y-auto border rounded-lg p-4"
-        :editor="editor"
-      />
+      <EditorContent class="max-h-[50vh] overflow-y-auto border rounded-lg p-4" :editor="editor" />
     </template>
 
     <template v-slot:bottom>
-      <div
-        class="mt-2 flex flex-col justify-between sm:flex-row sm:items-center"
-      >
-        <TextEditorFixedMenu
-          class="-ml-1 overflow-x-auto"
-          :buttons="customButtons"
-        />
+      <div class="mt-2 flex flex-col justify-between sm:flex-row sm:items-center">
+        <TextEditorFixedMenu class="-ml-1 overflow-x-auto" :buttons="customButtons" />
         <div class="mt-2 flex items-center justify-end space-x-2 sm:mt-0">
           <Button>Cancel</Button>
           <Button variant="solid">Submit</Button>
diff --git a/src/components/TextInput/TextInput.vue b/src/components/TextInput/TextInput.vue
index 662ed489a..7082376f5 100644
--- a/src/components/TextInput/TextInput.vue
+++ b/src/components/TextInput/TextInput.vue
@@ -1,15 +1,7 @@
 <template>
-  <div
-    class="relative flex items-center"
-    :class="attrs.class"
-    :style="attrs.style"
-  >
+  <div class="relative flex items-center" :class="attrs.class" :style="attrs.style">
     <div
-      :class="[
-        'absolute inset-y-0 left-0 flex items-center',
-        textColor,
-        prefixClasses,
-      ]"
+      :class="['absolute inset-y-0 left-0 flex items-center', textColor, prefixClasses]"
       v-if="$slots.prefix"
     >
       <slot name="prefix"> </slot>
@@ -28,11 +20,7 @@
       v-bind="attrsWithoutClassStyle"
     />
     <div
-      :class="[
-        'absolute inset-y-0 right-0 flex items-center',
-        textColor,
-        suffixClasses,
-      ]"
+      :class="['absolute inset-y-0 right-0 flex items-center', textColor, suffixClasses]"
       v-if="$slots.suffix"
     >
       <slot name="suffix"> </slot>
@@ -92,26 +80,10 @@ const inputClasses = computed(() => {
   }[props.size]
 
   let paddingClasses = {
-    sm: [
-      'py-1.5',
-      slots.prefix ? 'pl-8' : 'pl-2',
-      slots.suffix ? 'pr-8' : 'pr-2',
-    ],
-    md: [
-      'py-1.5',
-      slots.prefix ? 'pl-9' : 'pl-2.5',
-      slots.suffix ? 'pr-9' : 'pr-2.5',
-    ],
-    lg: [
-      'py-1.5',
-      slots.prefix ? 'pl-10' : 'pl-3',
-      slots.suffix ? 'pr-10' : 'pr-3',
-    ],
-    xl: [
-      'py-1.5',
-      slots.prefix ? 'pl-10' : 'pl-3',
-      slots.suffix ? 'pr-10' : 'pr-3',
-    ],
+    sm: ['py-1.5', slots.prefix ? 'pl-8' : 'pl-2', slots.suffix ? 'pr-8' : 'pr-2'],
+    md: ['py-1.5', slots.prefix ? 'pl-9' : 'pl-2.5', slots.suffix ? 'pr-9' : 'pr-2.5'],
+    lg: ['py-1.5', slots.prefix ? 'pl-10' : 'pl-3', slots.suffix ? 'pr-10' : 'pr-3'],
+    xl: ['py-1.5', slots.prefix ? 'pl-10' : 'pl-3', slots.suffix ? 'pr-10' : 'pr-3'],
   }[props.size]
 
   let variant = props.disabled ? 'disabled' : props.variant
@@ -122,9 +94,7 @@ const inputClasses = computed(() => {
       'border border-outline-gray-2 bg-surface-white placeholder-ink-gray-4 hover:border-outline-gray-3 hover:shadow-sm focus:bg-surface-white focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3',
     disabled: [
       'border bg-surface-gray-1 placeholder-ink-gray-3',
-      props.variant === 'outline'
-        ? 'border-outline-gray-2'
-        : 'border-transparent',
+      props.variant === 'outline' ? 'border-outline-gray-2' : 'border-transparent',
     ],
     ghost: 'border-0 focus:ring-0 focus-visible:ring-0',
   }[variant]
diff --git a/src/components/TextInput/index.ts b/src/components/TextInput/index.ts
index 1f4a4ba5f..97cbc1f60 100644
--- a/src/components/TextInput/index.ts
+++ b/src/components/TextInput/index.ts
@@ -1,2 +1,2 @@
 export { default as TextInput } from './TextInput.vue'
-export type { TextInputProps } from './types'
\ No newline at end of file
+export type { TextInputProps } from './types'
diff --git a/src/components/TextInput/stories/List.vue b/src/components/TextInput/stories/List.vue
index 79811d2e3..95633ad4f 100644
--- a/src/components/TextInput/stories/List.vue
+++ b/src/components/TextInput/stories/List.vue
@@ -1,31 +1,27 @@
 <script setup lang="ts">
-import Story from "@/components/Story.vue";
-import { Avatar, TextInput } from "frappe-ui";
-import LucideSearch from "~icons/lucide/search";
+import Story from '@/components/Story.vue'
+import { Avatar, TextInput } from 'frappe-ui'
+import LucideSearch from '~icons/lucide/search'
 
 const inputTypes = [
-  "text",
-  "number",
-  "email",
-  "date",
-  "datetime-local",
-  "password",
-  "search",
-  "tel",
-  "time",
-  "url",
-];
-const sizes = ["sm", "md", "lg", "xl"];
-const variants = ["subtle", "outline"];
+  'text',
+  'number',
+  'email',
+  'date',
+  'datetime-local',
+  'password',
+  'search',
+  'tel',
+  'time',
+  'url',
+]
+const sizes = ['sm', 'md', 'lg', 'xl']
+const variants = ['subtle', 'outline']
 </script>
 
 <template>
   <div class="grid grid-cols-2 gap-5">
-    <Story
-      v-for="inputType in inputTypes"
-      :key="inputType"
-      :title="inputType"
-    >
+    <Story v-for="inputType in inputTypes" :key="inputType" :title="inputType">
       <TextInput :type="inputType" placeholder="Enter input" />
     </Story>
 
@@ -48,10 +44,7 @@ const variants = ["subtle", "outline"];
     <Story title="prefix slot avatar">
       <TextInput placeholder="Enter Name">
         <template #prefix>
-          <Avatar
-            size="sm"
-            image="https://avatars.githubusercontent.com/u/499550?s=60&v=4"
-          />
+          <Avatar size="sm" image="https://avatars.githubusercontent.com/u/499550?s=60&v=4" />
         </template>
       </TextInput>
     </Story>
@@ -61,11 +54,7 @@ const variants = ["subtle", "outline"];
     </Story>
 
     <Story title="Variants" class="col-span-2" preview-css="flex gap-3">
-      <TextInput
-        v-for="variant in variants"
-        :variant="variant"
-        placeholder="Enter input"
-      />
+      <TextInput v-for="variant in variants" :variant="variant" placeholder="Enter input" />
     </Story>
   </div>
 </template>
diff --git a/src/components/Textarea/Textarea.vue b/src/components/Textarea/Textarea.vue
index 8bfd679ad..c95de6c22 100644
--- a/src/components/Textarea/Textarea.vue
+++ b/src/components/Textarea/Textarea.vue
@@ -57,9 +57,7 @@ const inputClasses = computed(() => {
       'border border-outline-gray-2 bg-surface-white placeholder-ink-gray-4 hover:border-outline-gray-3 hover:shadow-sm focus:bg-surface-white focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3',
     disabled: [
       'border bg-surface-gray-1 placeholder-ink-gray-3',
-      props.variant === 'outline'
-        ? 'border-outline-gray-2'
-        : 'border-transparent',
+      props.variant === 'outline' ? 'border-outline-gray-2' : 'border-transparent',
     ],
   }[variant]
 
diff --git a/src/components/Textarea/index.ts b/src/components/Textarea/index.ts
index 779234d5e..36e8d63e5 100644
--- a/src/components/Textarea/index.ts
+++ b/src/components/Textarea/index.ts
@@ -1,2 +1,2 @@
 export { default as Textarea } from './Textarea.vue'
-export type { TextareaProps } from './types'
\ No newline at end of file
+export type { TextareaProps } from './types'
diff --git a/src/components/TimePicker/TimePicker.vue b/src/components/TimePicker/TimePicker.vue
index c5477d882..4c40309b0 100644
--- a/src/components/TimePicker/TimePicker.vue
+++ b/src/components/TimePicker/TimePicker.vue
@@ -1,9 +1,5 @@
 <template>
-  <Popover
-    v-model:show="showOptions"
-    transition="default"
-    :placement="placement"
-  >
+  <Popover v-model:show="showOptions" transition="default" :placement="placement">
     <template #target="{ togglePopover, isOpen }">
       <TextInput
         ref="inputRef"
@@ -177,9 +173,7 @@ function normalize24(raw: string): string {
   if (/^\d{2}:\d{2}:\d{2}$/.test(raw)) return raw // keep seconds if present
   const parsed = parseFlexibleTime(raw)
   if (!parsed.valid) return ''
-  return parsed.ss
-    ? `${parsed.hh24}:${parsed.mm}:${parsed.ss}`
-    : `${parsed.hh24}:${parsed.mm}`
+  return parsed.ss ? `${parsed.hh24}:${parsed.mm}:${parsed.ss}` : `${parsed.hh24}:${parsed.mm}`
 }
 
 function formatDisplay(val24: string): string {
@@ -194,9 +188,7 @@ function formatDisplay(val24: string): string {
   if (!props.use12Hour) return base24
   const am = h < 12
   const hour12 = h % 12 === 0 ? 12 : h % 12
-  return `${hour12}:${m.toString().padStart(2, '0')}${s ? `:${s}` : ''} ${
-    am ? 'am' : 'pm'
-  }`
+  return `${hour12}:${m.toString().padStart(2, '0')}${s ? `:${s}` : ''} ${am ? 'am' : 'pm'}`
 }
 
 function parseFlexibleTime(input: string): ParsedTime {
@@ -252,9 +244,7 @@ function findNearestIndex(targetMinutes: number, list: Option[]): number {
   if (lo - 1 >= 0) candidates.push(lo - 1)
   if (!candidates.length) return -1
   return candidates.sort(
-    (a, b) =>
-      Math.abs(minutesArr[a] - targetMinutes) -
-      Math.abs(minutesArr[b] - targetMinutes),
+    (a, b) => Math.abs(minutesArr[a] - targetMinutes) - Math.abs(minutesArr[b] - targetMinutes),
   )[0]
 }
 
@@ -336,8 +326,7 @@ const selectedAndNearest = computed<{
         : `${parsedTyped.hh24}:${parsedTyped.mm}`
       : internalValue.value || null
   if (!candidate) return { selected: null, nearest: null }
-  const candidateCompare =
-    candidate && candidate.length === 8 ? candidate.slice(0, 5) : candidate
+  const candidateCompare = candidate && candidate.length === 8 ? candidate.slice(0, 5) : candidate
   const selected = list.find((o) => o.value === candidateCompare) || null
   if (selected) return { selected, nearest: null }
   const parsed = parseFlexibleTime(candidate)
@@ -350,14 +339,11 @@ function buttonClasses(opt: Option, idx: number): string {
   if (idx === highlightIndex.value) return 'bg-surface-gray-3 text-ink-gray-8'
   const { selected, nearest } = selectedAndNearest.value
   if (isTyping.value && !selected) {
-    if (nearest && nearest.value === opt.value)
-      return 'text-ink-gray-7 italic bg-surface-gray-2'
+    if (nearest && nearest.value === opt.value) return 'text-ink-gray-7 italic bg-surface-gray-2'
     return 'text-ink-gray-6 hover:bg-surface-gray-2 hover:text-ink-gray-8'
   }
-  if (selected && selected.value === opt.value)
-    return 'bg-surface-gray-3 text-ink-gray-8'
-  if (nearest && nearest.value === opt.value)
-    return 'text-ink-gray-7 italic bg-surface-gray-2'
+  if (selected && selected.value === opt.value) return 'bg-surface-gray-3 text-ink-gray-8'
+  if (nearest && nearest.value === opt.value) return 'text-ink-gray-7 italic bg-surface-gray-2'
   return 'text-ink-gray-6 hover:bg-surface-gray-2 hover:text-ink-gray-8'
 }
 
@@ -429,9 +415,7 @@ function moveHighlight(delta: number) {
   const list = displayedOptions.value
   if (!list.length) return
   if (highlightIndex.value === -1) initHighlight()
-  else
-    highlightIndex.value =
-      (highlightIndex.value + delta + list.length) % list.length
+  else highlightIndex.value = (highlightIndex.value + delta + list.length) % list.length
   const opt = list[highlightIndex.value]
   if (opt) {
     navUpdating = true
@@ -471,8 +455,7 @@ function onEnter() {
     : null
   const exists = normalized
     ? displayedOptions.value.some((o) => {
-        const base =
-          normalized.length === 8 ? normalized.slice(0, 5) : normalized
+        const base = normalized.length === 8 ? normalized.slice(0, 5) : normalized
         return o.value === base
       })
     : false
@@ -560,10 +543,6 @@ defineSlots<{
    * Slot rendered after the input value.
    * Exposes popover controls.
    */
-  suffix?: (props: {
-    togglePopover: () => void
-    isOpen: boolean
-  }) => any
+  suffix?: (props: { togglePopover: () => void; isOpen: boolean }) => any
 }>()
-
 </script>
diff --git a/src/components/TimePicker/stories/Basic.vue b/src/components/TimePicker/stories/Basic.vue
index 4fb0e58d0..39e4d1d02 100644
--- a/src/components/TimePicker/stories/Basic.vue
+++ b/src/components/TimePicker/stories/Basic.vue
@@ -6,10 +6,6 @@ const valueBasic = ref('')
 </script>
 
 <template>
-  <TimePicker
-    v-model="valueBasic"
-    placeholder="Select time"
-    placement="bottom-start"
-  />
+  <TimePicker v-model="valueBasic" placeholder="Select time" placement="bottom-start" />
   <div class="mt-2 text-xs text-gray-500">Value: {{ valueBasic || '—' }}</div>
 </template>
diff --git a/src/components/TimePicker/stories/CustomOptions.vue b/src/components/TimePicker/stories/CustomOptions.vue
index adf072126..f539bf7ac 100644
--- a/src/components/TimePicker/stories/CustomOptions.vue
+++ b/src/components/TimePicker/stories/CustomOptions.vue
@@ -15,12 +15,7 @@ const customOptions = [
 </script>
 
 <template>
-  <TimePicker
-    v-model="val"
-    :interval="15"
-    :options="customOptions"
-    :allowCustom="true"
-  />
+  <TimePicker v-model="val" :interval="15" :options="customOptions" :allowCustom="true" />
 
   <div class="text-xs text-gray-500">Value: {{ val }}</div>
 </template>
diff --git a/src/components/TimePicker/stories/Range.vue b/src/components/TimePicker/stories/Range.vue
index f7aab2a7c..5b05f5c26 100644
--- a/src/components/TimePicker/stories/Range.vue
+++ b/src/components/TimePicker/stories/Range.vue
@@ -5,11 +5,6 @@ const val = ref()
 </script>
 
 <template>
-  <TimePicker
-    v-model="val"
-    minTime="05:00"
-    maxTime="09:00"
-    :interval="10"
-  />
+  <TimePicker v-model="val" minTime="05:00" maxTime="09:00" :interval="10" />
   <div class="text-xs text-gray-500">Value: {{ val }}</div>
 </template>
diff --git a/src/components/Toast/Toast.vue b/src/components/Toast/Toast.vue
index ab9f52b70..476cf7487 100644
--- a/src/components/Toast/Toast.vue
+++ b/src/components/Toast/Toast.vue
@@ -10,18 +10,12 @@
     <div class="flex items-center gap-2 flex-grow overflow-hidden">
       <div>
         <component v-if="icon" :is="icon" class="flex-shrink-0 size-4" />
-        <CircleCheck
-          v-else-if="type == 'success'"
-          class="flex-shrink-0 size-4 text-ink-green-2"
-        />
+        <CircleCheck v-else-if="type == 'success'" class="flex-shrink-0 size-4 text-ink-green-2" />
         <LucideAlertTriangle
           v-else-if="type == 'warning'"
           class="flex-shrink-0 size-4 text-ink-amber-2"
         />
-        <LucideInfo
-          v-else-if="type == 'error'"
-          class="flex-shrink-0 size-4 text-ink-red-2"
-        />
+        <LucideInfo v-else-if="type == 'error'" class="flex-shrink-0 size-4 text-ink-red-2" />
       </div>
       <div class="flex flex-col flex-grow overflow-hidden">
         <ToastDescription
@@ -80,8 +74,7 @@ function handleAction() {
 <style>
 @keyframes KSlideIn {
   from {
-    transform: translateY(calc(100% + var(--viewport-padding, 32px)))
-      scale(0.95);
+    transform: translateY(calc(100% + var(--viewport-padding, 32px))) scale(0.95);
     opacity: 0;
   }
   to {
diff --git a/src/components/Toast/index.ts b/src/components/Toast/index.ts
index 3eace6804..152cc677a 100644
--- a/src/components/Toast/index.ts
+++ b/src/components/Toast/index.ts
@@ -4,17 +4,12 @@ import LoadingIndicator from '../LoadingIndicator.vue'
 import ToastComponent from './Toast.vue'
 import type { ToastProps } from './types'
 
-interface ToastOptions
-  extends Omit<Partial<ToastProps>, 'open' | 'message' | 'title'> {
+interface ToastOptions extends Omit<Partial<ToastProps>, 'open' | 'message' | 'title'> {
   id?: string
   message: string
 }
 
-interface ToastItem
-  extends Pick<
-    ToastProps,
-    'duration' | 'action' | 'type' | 'icon' | 'closable'
-  > {
+interface ToastItem extends Pick<ToastProps, 'duration' | 'action' | 'type' | 'icon' | 'closable'> {
   id: string
   open: boolean
   message: string
@@ -49,10 +44,7 @@ interface ToastPromiseOptions<TData = any, TError = any> {
 const toastsState: Ref<ToastItem[]> = ref([])
 let toastIdCounter = 0
 
-const updateToastInState = (
-  id: string,
-  updates: Partial<Omit<ToastItem, 'id'>>,
-) => {
+const updateToastInState = (id: string, updates: Partial<Omit<ToastItem, 'id'>>) => {
   const index = toastsState.value.findIndex((t) => t.id === id)
   if (index !== -1) {
     toastsState.value[index] = {
@@ -66,8 +58,7 @@ const updateToastInState = (
 export const toast = {
   create: (options: ToastOptions): string => {
     const id = `toast-${toastIdCounter++}`
-    const durationInMs =
-      options.duration != null ? options.duration * 1000 : 5000
+    const durationInMs = options.duration != null ? options.duration * 1000 : 5000
 
     const sanitizedMessage = DOMPurify.sanitize(options.message, {
       ALLOWED_TAGS: ['a', 'em', 'strong', 'i', 'b', 'u'],
@@ -110,12 +101,9 @@ export const toast = {
     try {
       const data = await promiseToResolve
       const successMessage =
-        typeof options.success === 'function'
-          ? options.success(data)
-          : options.success
+        typeof options.success === 'function' ? options.success(data) : options.success
 
-      const successToastDurationInSeconds =
-        options.successDuration ?? options.duration ?? 5
+      const successToastDurationInSeconds = options.successDuration ?? options.duration ?? 5
 
       updateToastInState(toastId, {
         message: successMessage,
@@ -123,17 +111,14 @@ export const toast = {
         duration: successToastDurationInSeconds * 1000,
         icon: undefined,
         closable: true,
-		action: options.successAction,
+        action: options.successAction,
       })
       return data
     } catch (error) {
       const errorMessage =
-        typeof options.error === 'function'
-          ? options.error(error as TError)
-          : options.error
+        typeof options.error === 'function' ? options.error(error as TError) : options.error
 
-      const errorToastDurationInSeconds =
-        options.errorDuration ?? options.duration ?? 5
+      const errorToastDurationInSeconds = options.errorDuration ?? options.duration ?? 5
 
       updateToastInState(toastId, {
         message: errorMessage,
@@ -141,28 +126,20 @@ export const toast = {
         duration: errorToastDurationInSeconds * 1000,
         icon: undefined,
         closable: true,
-		action: options.errorAction,
+        action: options.errorAction,
       })
       throw error
     }
   },
 
-  success: (
-    message: string,
-    options: Omit<ToastOptions, 'message' | 'type'> = {},
-  ) => toast.create({ message, type: 'success', ...options }),
-  error: (
-    message: string,
-    options: Omit<ToastOptions, 'message' | 'type'> = {},
-  ) => toast.create({ message, type: 'error', ...options }),
-  warning: (
-    message: string,
-    options: Omit<ToastOptions, 'message' | 'type'> = {},
-  ) => toast.create({ message, type: 'warning', ...options }),
-  info: (
-    message: string,
-    options: Omit<ToastOptions, 'message' | 'type'> = {},
-  ) => toast.create({ message, type: 'info', ...options }),
+  success: (message: string, options: Omit<ToastOptions, 'message' | 'type'> = {}) =>
+    toast.create({ message, type: 'success', ...options }),
+  error: (message: string, options: Omit<ToastOptions, 'message' | 'type'> = {}) =>
+    toast.create({ message, type: 'error', ...options }),
+  warning: (message: string, options: Omit<ToastOptions, 'message' | 'type'> = {}) =>
+    toast.create({ message, type: 'warning', ...options }),
+  info: (message: string, options: Omit<ToastOptions, 'message' | 'type'> = {}) =>
+    toast.create({ message, type: 'info', ...options }),
 }
 
 export const Toasts = defineComponent({
diff --git a/src/components/Tooltip/Tooltip.vue b/src/components/Tooltip/Tooltip.vue
index 025b2aeae..0661dc182 100644
--- a/src/components/Tooltip/Tooltip.vue
+++ b/src/components/Tooltip/Tooltip.vue
@@ -43,7 +43,6 @@ defineSlots<{
    */
   content?: () => any
 }>()
-
 </script>
 
 <template>
@@ -61,9 +60,7 @@ defineSlots<{
           class="z-[100]"
         >
           <slot name="body">
-            <div
-              class="rounded bg-surface-gray-7 px-2 py-1 text-xs text-ink-white shadow-xl"
-            >
+            <div class="rounded bg-surface-gray-7 px-2 py-1 text-xs text-ink-white shadow-xl">
               <slot name="content">{{ props.text }}</slot>
             </div>
           </slot>
diff --git a/src/components/Tooltip/index.ts b/src/components/Tooltip/index.ts
index 90b567843..5a3f9eed5 100644
--- a/src/components/Tooltip/index.ts
+++ b/src/components/Tooltip/index.ts
@@ -1,2 +1,2 @@
 export { default as Tooltip } from './Tooltip.vue'
-export type { TooltipProps } from './types'
\ No newline at end of file
+export type { TooltipProps } from './types'
diff --git a/src/components/Tooltip/types.ts b/src/components/Tooltip/types.ts
index 06ec44d5f..714170ca2 100644
--- a/src/components/Tooltip/types.ts
+++ b/src/components/Tooltip/types.ts
@@ -28,4 +28,3 @@ export interface TooltipProps {
    */
   disabled?: boolean
 }
-
diff --git a/src/components/Tree/Tree.vue b/src/components/Tree/Tree.vue
index 565aed859..12f4b042a 100644
--- a/src/components/Tree/Tree.vue
+++ b/src/components/Tree/Tree.vue
@@ -1,9 +1,6 @@
 <template>
   <!-- Current Tree Node -->
-  <slot
-    name="node"
-    v-bind="{ node, hasChildren, isCollapsed, toggleCollapsed }"
-  >
+  <slot name="node" v-bind="{ node, hasChildren, isCollapsed, toggleCollapsed }">
     <div
       class="flex items-center cursor-pointer gap-1"
       :style="{ height: options.rowHeight }"
@@ -12,16 +9,8 @@
       <div ref="iconRef">
         <!-- slot to only override the Icon -->
         <slot name="icon" v-bind="{ hasChildren, isCollapsed }">
-          <FeatherIcon
-            v-if="hasChildren && !isCollapsed"
-            name="chevron-down"
-            class="h-3.5"
-          />
-          <FeatherIcon
-            v-else-if="hasChildren"
-            name="chevron-right"
-            class="h-3.5"
-          />
+          <FeatherIcon v-if="hasChildren && !isCollapsed" name="chevron-down" class="h-3.5" />
+          <FeatherIcon v-else-if="hasChildren" name="chevron-right" class="h-3.5" />
         </slot>
       </div>
 
@@ -46,10 +35,7 @@
         <Tree :node="child" :nodeKey="nodeKey" :options="options">
           <!-- Pass the parent slots to the children of current node -->
           <template #node="{ node, hasChildren, isCollapsed, toggleCollapsed }">
-            <slot
-              name="node"
-              v-bind="{ node, hasChildren, isCollapsed, toggleCollapsed }"
-            />
+            <slot name="node" v-bind="{ node, hasChildren, isCollapsed, toggleCollapsed }" />
           </template>
 
           <template #icon="{ hasChildren, isCollapsed }">
diff --git a/src/components/Tree/index.ts b/src/components/Tree/index.ts
index b3767421f..4c73847b8 100644
--- a/src/components/Tree/index.ts
+++ b/src/components/Tree/index.ts
@@ -1,2 +1,2 @@
 export { default as Tree } from './Tree.vue'
-export type { TreeProps } from './types'
\ No newline at end of file
+export type { TreeProps } from './types'
diff --git a/src/components/VueGridLayout/Layout.vue b/src/components/VueGridLayout/Layout.vue
index 262946607..6d586b9ba 100644
--- a/src/components/VueGridLayout/Layout.vue
+++ b/src/components/VueGridLayout/Layout.vue
@@ -1,9 +1,5 @@
 <template>
-  <GridLayout
-    v-model:layout="layout"
-    v-bind="options"
-    @layout-ready="() => (layoutReady = true)"
-  >
+  <GridLayout v-model:layout="layout" v-bind="options" @layout-ready="() => (layoutReady = true)">
     <GridItem
       v-for="(l, index) in layout"
       :key="l.i"
diff --git a/src/composables/useImageNavigation.ts b/src/composables/useImageNavigation.ts
index 08c549d05..ee5fcbcdf 100644
--- a/src/composables/useImageNavigation.ts
+++ b/src/composables/useImageNavigation.ts
@@ -27,8 +27,7 @@ export function useImageNavigation({
 
   function previousImage() {
     if (imageCount.value > 0) {
-      currentIndex.value =
-        (currentIndex.value - 1 + imageCount.value) % imageCount.value
+      currentIndex.value = (currentIndex.value - 1 + imageCount.value) % imageCount.value
       onNavigate?.()
     }
   }
diff --git a/src/composables/useTouchHandler.ts b/src/composables/useTouchHandler.ts
index 22eceaf03..52dba6916 100644
--- a/src/composables/useTouchHandler.ts
+++ b/src/composables/useTouchHandler.ts
@@ -188,8 +188,7 @@ export function useTouchHandler(options: UseTouchHandlerOptions) {
       if (
         !isPanning.value &&
         zoomLevel.value > 100 &&
-        (Math.abs(deltaXFromStart) > panThreshold ||
-          Math.abs(deltaYFromStart) > panThreshold)
+        (Math.abs(deltaXFromStart) > panThreshold || Math.abs(deltaYFromStart) > panThreshold)
       ) {
         isPanning.value = true
         // Adjust start coords slightly to avoid jump if pan starts mid-movement
@@ -219,11 +218,7 @@ export function useTouchHandler(options: UseTouchHandlerOptions) {
     const finalVelocity = { ...panVelocity.value }
 
     // Handle Pan End and Inertia
-    if (
-      wasPanning &&
-      initialTouchPoints.value &&
-      touchesLeft < initialTouchPoints.value.length
-    ) {
+    if (wasPanning && initialTouchPoints.value && touchesLeft < initialTouchPoints.value.length) {
       isPanning.value = false // Set panning to false *before* starting animation
       if (onPanEnd) onPanEnd(event)
 
@@ -262,10 +257,7 @@ export function useTouchHandler(options: UseTouchHandlerOptions) {
           animVelocity.y *= dampingFactor
 
           // Stop animation if velocity is negligible or zoom changed back to <= 100%
-          if (
-            Math.hypot(animVelocity.x, animVelocity.y) < 0.01 ||
-            zoomLevel.value <= 100
-          ) {
+          if (Math.hypot(animVelocity.x, animVelocity.y) < 0.01 || zoomLevel.value <= 100) {
             cancelInertiaAnimation()
           } else {
             animationFrameId.value = requestAnimationFrame(animate)
diff --git a/src/composables/useZoomPan.ts b/src/composables/useZoomPan.ts
index 79db63a16..b84a00d63 100644
--- a/src/composables/useZoomPan.ts
+++ b/src/composables/useZoomPan.ts
@@ -85,10 +85,7 @@ export function useZoomPan({ containerRef, isEnabled }: UseZoomPanOptions) {
       const newZoom = Math.round(currentZoom + zoomChange)
       let clampedZoom = Math.max(25, Math.min(300, newZoom))
 
-      if (
-        (currentZoom > 100 && clampedZoom < 100) ||
-        (currentZoom < 100 && clampedZoom > 100)
-      ) {
+      if ((currentZoom > 100 && clampedZoom < 100) || (currentZoom < 100 && clampedZoom > 100)) {
         if (Math.abs(100 - clampedZoom) < Math.abs(zoomChange) * 1.5) {
           clampedZoom = 100
         }
diff --git a/src/data-fetching/docStore.ts b/src/data-fetching/docStore.ts
index 0e28e291c..0a07df11d 100644
--- a/src/data-fetching/docStore.ts
+++ b/src/data-fetching/docStore.ts
@@ -70,11 +70,7 @@ class DocStore {
     return this.docs.get(key)!
   }
 
-  private async loadDoc(
-    key: DocKey,
-    isFirstLoad: boolean,
-    transform: (doc: Doc) => Doc,
-  ) {
+  private async loadDoc(key: DocKey, isFirstLoad: boolean, transform: (doc: Doc) => Doc) {
     try {
       if (!isFirstLoad && this.isStale(key)) {
         await this.cleanup(key)
@@ -146,9 +142,7 @@ class DocStore {
   async clearAll() {
     try {
       const allKeys = await idbStore.keys()
-      const docKeys = allKeys.filter((key: string) =>
-        key.startsWith(this.storePrefix),
-      )
+      const docKeys = allKeys.filter((key: string) => key.startsWith(this.storePrefix))
       await Promise.all(docKeys.map((key: string) => idbStore.delete(key)))
       this.docs.clear()
       this.lastFetched.clear()
diff --git a/src/data-fetching/useCall/types.ts b/src/data-fetching/useCall/types.ts
index 7784c3006..4678674fc 100644
--- a/src/data-fetching/useCall/types.ts
+++ b/src/data-fetching/useCall/types.ts
@@ -3,10 +3,7 @@ import { Ref } from 'vue'
 export type BasicParams = Record<string, any> | undefined
 export type CacheKey = string | Array<string | number | boolean | object>
 
-export interface UseCallOptions<
-  TResponse = any,
-  TParams extends BasicParams = undefined,
-> {
+export interface UseCallOptions<TResponse = any, TParams extends BasicParams = undefined> {
   url: string | Ref<string>
   method?: 'GET' | 'POST' | 'PUT' | 'DELETE'
   params?: TParams | (() => TParams)
diff --git a/src/data-fetching/useCall/useCall.test.ts b/src/data-fetching/useCall/useCall.test.ts
index 5977143cc..ce8b90776 100644
--- a/src/data-fetching/useCall/useCall.test.ts
+++ b/src/data-fetching/useCall/useCall.test.ts
@@ -63,9 +63,7 @@ describe('useCall', () => {
 
     expect(errorCall.loading).toBe(false)
     expect(errorCall.error).toBeInstanceOf(Error)
-    expect(errorCall.error.message).toEqual(
-      'ServerError: Internal Server Error occurred',
-    )
+    expect(errorCall.error.message).toEqual('ServerError: Internal Server Error occurred')
     expect(errorCall.data).toBe(null)
     expect(onError).toHaveBeenCalledWith(errorCall.error)
   })
diff --git a/src/data-fetching/useCall/useCall.ts b/src/data-fetching/useCall/useCall.ts
index d1523622b..d5c67f875 100644
--- a/src/data-fetching/useCall/useCall.ts
+++ b/src/data-fetching/useCall/useCall.ts
@@ -101,25 +101,19 @@ export function useCall<TResponse, TParams extends BasicParams = undefined>(
 
   let result
   if (method === 'POST') {
-    result = useFrappeFetch<FrappeResponse<TResponse>>(
-      computedUrl,
-      fetchOptions,
-    ).post(computedParams)
+    result = useFrappeFetch<FrappeResponse<TResponse>>(computedUrl, fetchOptions).post(
+      computedParams,
+    )
   } else if (method === 'PUT') {
-    result = useFrappeFetch<FrappeResponse<TResponse>>(
-      computedUrl,
-      fetchOptions,
-    ).put(computedParams)
+    result = useFrappeFetch<FrappeResponse<TResponse>>(computedUrl, fetchOptions).put(
+      computedParams,
+    )
   } else if (method === 'DELETE') {
-    result = useFrappeFetch<FrappeResponse<TResponse>>(
-      computedUrl,
-      fetchOptions,
-    ).delete(computedParams)
+    result = useFrappeFetch<FrappeResponse<TResponse>>(computedUrl, fetchOptions).delete(
+      computedParams,
+    )
   } else {
-    result = useFrappeFetch<FrappeResponse<TResponse>>(
-      computedUrl,
-      fetchOptions,
-    ).get()
+    result = useFrappeFetch<FrappeResponse<TResponse>>(computedUrl, fetchOptions).get()
   }
 
   const {
diff --git a/src/data-fetching/useDoc/useDoc.ts b/src/data-fetching/useDoc/useDoc.ts
index 6fdc6702d..70c5b5b0c 100644
--- a/src/data-fetching/useDoc/useDoc.ts
+++ b/src/data-fetching/useDoc/useDoc.ts
@@ -1,11 +1,4 @@
-import {
-  computed,
-  reactive,
-  readonly,
-  Ref,
-  MaybeRefOrGetter,
-  toValue,
-} from 'vue'
+import { computed, reactive, readonly, Ref, MaybeRefOrGetter, toValue } from 'vue'
 import { UseFetchOptions, AfterFetchContext } from '@vueuse/core'
 import { useFrappeFetch } from '../useFrappeFetch'
 import { useCall } from '../useCall/useCall'
@@ -24,8 +17,7 @@ type TransformMethods<T> = {
       : never
 }
 
-interface DocMethodOption<T = any>
-  extends Omit<UseCallOptions<T>, 'url' | 'baseUrl'> {
+interface DocMethodOption<T = any> extends Omit<UseCallOptions<T>, 'url' | 'baseUrl'> {
   name: string
 }
 
@@ -39,9 +31,7 @@ interface UseDocOptions<TDoc> {
   transform?: (doc: TDoc & { doctype: string }) => TDoc & { doctype: string }
 }
 
-export function useDoc<TDoc extends { name: string }, TMethods = {}>(
-  options: UseDocOptions<TDoc>,
-) {
+export function useDoc<TDoc extends { name: string }, TMethods = {}>(options: UseDocOptions<TDoc>) {
   const {
     baseUrl = '',
     doctype,
@@ -92,8 +82,10 @@ export function useDoc<TDoc extends { name: string }, TMethods = {}>(
     },
   }
 
-  const { error, isFetching, isFinished, canAbort, aborted, abort, execute } =
-    useFrappeFetch(url, fetchOptions).get()
+  const { error, isFetching, isFinished, canAbort, aborted, abort, execute } = useFrappeFetch(
+    url,
+    fetchOptions,
+  ).get()
 
   let docMethods: Record<string, ReturnType<typeof useCall>> = {}
   if (methods) {
@@ -113,10 +105,7 @@ export function useDoc<TDoc extends { name: string }, TMethods = {}>(
         method: 'POST',
         ...option,
         baseUrl,
-        url: computed(
-          () =>
-            `/api/v2/document/${doctype}/${toValue(name)}/method/${option.name}`,
-        ),
+        url: computed(() => `/api/v2/document/${doctype}/${toValue(name)}/method/${option.name}`),
       }
 
       docMethods[key] = readonly(useCall(callOptions))
diff --git a/src/data-fetching/useDoctype/useDoctype.ts b/src/data-fetching/useDoctype/useDoctype.ts
index c3d2dc30e..e6b126b43 100644
--- a/src/data-fetching/useDoctype/useDoctype.ts
+++ b/src/data-fetching/useDoctype/useDoctype.ts
@@ -7,10 +7,7 @@ interface UseDoctypeOptions {
   baseUrl?: string
 }
 
-export function useDoctype<T>(
-  doctype: string,
-  options: UseDoctypeOptions = {},
-) {
+export function useDoctype<T>(doctype: string, options: UseDoctypeOptions = {}) {
   const insert = useInsert<T>(doctype, options)
   const delete_ = useDelete(doctype, options)
   const setValue = useSetValue<T>(doctype, options)
@@ -113,8 +110,7 @@ function useRunDocMethod(doctype: string, options: UseDoctypeOptions = {}) {
     },
     isLoading: (name: string, method: string) => {
       return (
-        runDocMethod.loading &&
-        url.value === `/api/v2/document/${doctype}/${name}/method/${method}`
+        runDocMethod.loading && url.value === `/api/v2/document/${doctype}/${name}/method/${method}`
       )
     },
   } as RunDocMethodReturnValue)
@@ -161,9 +157,7 @@ function useRunMethod(doctype: string, options: UseDoctypeOptions = {}) {
       return runMethod.submit(params)
     },
     isLoading: (method: string) => {
-      return (
-        runMethod.loading && url.value === `/api/v2/method/${doctype}/${method}`
-      )
+      return runMethod.loading && url.value === `/api/v2/method/${doctype}/${method}`
     },
   } as RunMethodReturnValue)
 }
diff --git a/src/data-fetching/useFrappeFetch.ts b/src/data-fetching/useFrappeFetch.ts
index 48c23233f..92e240255 100644
--- a/src/data-fetching/useFrappeFetch.ts
+++ b/src/data-fetching/useFrappeFetch.ts
@@ -62,10 +62,7 @@ export const useFrappeFetch = createFetch({
     onFetchError(ctx) {
       if (ctx.response?.ok && ctx.error) {
         // if response is ok and there is an error, it's a client side programming error
-        console.error(
-          'Fetch request succeeded but there was a programming error:\n\n',
-          ctx.error,
-        )
+        console.error('Fetch request succeeded but there was a programming error:\n\n', ctx.error)
         return ctx
       }
 
@@ -85,15 +82,12 @@ export const useFrappeFetch = createFetch({
           : error.exception
             ? ` (Traceback)`
             : ''
-        let frappeError = new FrappeResponseError(
-          `${error.type}${errorDescription}`,
-          {
-            title: error.title,
-            type: error.type,
-            exception: error.exception,
-            indicator: error.indicator,
-          },
-        )
+        let frappeError = new FrappeResponseError(`${error.type}${errorDescription}`, {
+          title: error.title,
+          type: error.type,
+          exception: error.exception,
+          indicator: error.indicator,
+        })
 
         if (import.meta.env.DEV && error.exception) {
           console.log(error.exception)
@@ -115,8 +109,7 @@ function setHeaders(headers: HeadersInit) {
   let csrfToken = null
   if (typeof window !== 'undefined') {
     siteName = window.location.hostname
-    csrfToken =
-      window.csrf_token !== '{{ csrf_token }}' ? window.csrf_token : null
+    csrfToken = window.csrf_token !== '{{ csrf_token }}' ? window.csrf_token : null
   }
 
   const defaultHeaders: Record<string, string> = {
diff --git a/src/data-fetching/useList/types.ts b/src/data-fetching/useList/types.ts
index 133c65a60..5102d6764 100644
--- a/src/data-fetching/useList/types.ts
+++ b/src/data-fetching/useList/types.ts
@@ -17,11 +17,7 @@ export interface Filters {
   [key: Field]: FilterValue | undefined
 }
 
-export type OrderBy =
-  | `${Field} ASC`
-  | `${Field} DESC`
-  | `${Field} asc`
-  | `${Field} desc`
+export type OrderBy = `${Field} ASC` | `${Field} DESC` | `${Field} asc` | `${Field} desc`
 
 export interface UseListOptions<T> {
   doctype: string
diff --git a/src/data-fetching/useList/useList.test.ts b/src/data-fetching/useList/useList.test.ts
index 5df9e34b0..14ec0f721 100644
--- a/src/data-fetching/useList/useList.test.ts
+++ b/src/data-fetching/useList/useList.test.ts
@@ -88,15 +88,11 @@ describe('useList', () => {
     })
 
     await waitUntilValueChanges(() => users.data)
-    expect(users.data).toStrictEqual([
-      { name: 'User1', email: 'user1@example.com' },
-    ])
+    expect(users.data).toStrictEqual([{ name: 'User1', email: 'user1@example.com' }])
 
     query.value = 'user2'
     await waitUntilValueChanges(() => users.data)
-    expect(users.data).toStrictEqual([
-      { name: 'User2', email: 'user2@example.com' },
-    ])
+    expect(users.data).toStrictEqual([{ name: 'User2', email: 'user2@example.com' }])
   })
 
   it('params are parsed and sent to server correctly', async () => {
@@ -129,9 +125,7 @@ describe('useList', () => {
     })
 
     expect(fetchSpy).toHaveBeenCalledWith(
-      expect.stringContaining(
-        `${baseUrl}/api/v2/document/User?${searchParams.toString()}`,
-      ),
+      expect.stringContaining(`${baseUrl}/api/v2/document/User?${searchParams.toString()}`),
       expect.any(Object),
     )
 
diff --git a/src/data-fetching/useList/useList.ts b/src/data-fetching/useList/useList.ts
index f11fad22c..348eff722 100644
--- a/src/data-fetching/useList/useList.ts
+++ b/src/data-fetching/useList/useList.ts
@@ -1,17 +1,5 @@
-import {
-  computed,
-  MaybeRefOrGetter,
-  reactive,
-  readonly,
-  Ref,
-  ref,
-  toValue,
-} from 'vue'
-import {
-  AfterFetchContext,
-  OnFetchErrorContext,
-  UseFetchOptions,
-} from '@vueuse/core'
+import { computed, MaybeRefOrGetter, reactive, readonly, Ref, ref, toValue } from 'vue'
+import { AfterFetchContext, OnFetchErrorContext, UseFetchOptions } from '@vueuse/core'
 import { useFrappeFetch } from '../useFrappeFetch'
 import { useCall } from '../useCall/useCall'
 import { parseFilters, makeGetParams, normalizeCacheKey } from '../utils'
@@ -20,9 +8,7 @@ import { idbStore } from '../idbStore'
 import { listStore } from './listStore'
 import { docStore } from '../docStore'
 
-export function useList<T extends { name: string }>(
-  options: UseListOptions<T>,
-) {
+export function useList<T extends { name: string }>(options: UseListOptions<T>) {
   const {
     doctype,
     fields,
@@ -86,18 +72,9 @@ export function useList<T extends { name: string }>(
     onFetchError: handleFetchError<T>(options),
   }
 
-  const {
-    data,
-    error,
-    isFetching,
-    isFinished,
-    canAbort,
-    aborted,
-    abort,
-    execute,
-  } = useFrappeFetch<UseListResponse<T>>(_url, fetchOptions).get()
-
-
+  const { data, error, isFetching, isFinished, canAbort, aborted, abort, execute } = useFrappeFetch<
+    UseListResponse<T>
+  >(_url, fetchOptions).get()
 
   const result = computed(() => {
     if (normalizedCacheKey && (out.loading || !out.isFinished)) {
@@ -133,9 +110,7 @@ export function useList<T extends { name: string }>(
     if (!refetch) execute()
   }
 
-  const updateRow = (
-    doc: Partial<{ name: string }> & Record<string, unknown>,
-  ) => {
+  const updateRow = (doc: Partial<{ name: string }> & Record<string, unknown>) => {
     if (allData.value == null) return
     let changed = false
     for (let row of allData.value) {
diff --git a/src/data-fetching/useNewDoc/useNewDoc.ts b/src/data-fetching/useNewDoc/useNewDoc.ts
index 198b21093..4132a2c94 100644
--- a/src/data-fetching/useNewDoc/useNewDoc.ts
+++ b/src/data-fetching/useNewDoc/useNewDoc.ts
@@ -3,14 +3,9 @@ import { useCall } from '../useCall/useCall'
 import { UseCallOptions } from '../useCall/types'
 import { docStore } from '../docStore'
 
-type UseNewDocOptions = Omit<
-  UseCallOptions,
-  'url' | 'method' | 'params' | 'immediate'
->
+type UseNewDocOptions = Omit<UseCallOptions, 'url' | 'method' | 'params' | 'immediate'>
 
-type NewDoc<T> = Partial<
-  Omit<T, 'creation' | 'modified' | 'owner' | 'modified_by'>
->
+type NewDoc<T> = Partial<Omit<T, 'creation' | 'modified' | 'owner' | 'modified_by'>>
 
 export function useNewDoc<T extends object>(
   doctype: string,
diff --git a/src/data-fetching/utils.ts b/src/data-fetching/utils.ts
index 56bb7b6a5..b717d74cc 100644
--- a/src/data-fetching/utils.ts
+++ b/src/data-fetching/utils.ts
@@ -16,9 +16,7 @@ export function isEmptyObject(obj: any) {
   return Object.keys(obj).length === 0 && obj.constructor === Object
 }
 
-export function parseFilters(
-  _filters: MaybeRefOrGetter<Filters>,
-): Filters | null {
+export function parseFilters(_filters: MaybeRefOrGetter<Filters>): Filters | null {
   let filters = typeof _filters == 'function' ? _filters() : toValue(_filters)
   let parsedFilters: Filters = {}
   for (let key in filters) {
@@ -49,9 +47,7 @@ export function parseFilters(
   return parsedFilters
 }
 
-export function unrefObject(
-  obj: Record<string, MaybeRef<string | number | boolean>>,
-) {
+export function unrefObject(obj: Record<string, MaybeRef<string | number | boolean>>) {
   let newObj: Record<keyof typeof obj, any> = {}
   for (let key in obj) {
     newObj[key] = toValue(obj[key])
diff --git a/src/directives/focus.ts b/src/directives/focus.ts
index 6779dabaa..ee37c1fb0 100644
--- a/src/directives/focus.ts
+++ b/src/directives/focus.ts
@@ -1,4 +1,4 @@
-import { type ObjectDirective, type DirectiveBinding, nextTick } from "vue"
+import { type ObjectDirective, type DirectiveBinding, nextTick } from 'vue'
 
 interface FocusDirective extends ObjectDirective<HTMLElement> {
   mounted(el: HTMLElement, binding: DirectiveBinding<boolean>): void
@@ -14,7 +14,7 @@ const focusDirective: FocusDirective = {
       await nextTick()
       firstFocusableElement.focus()
       if (
-        binding.arg === "autoselect" &&
+        binding.arg === 'autoselect' &&
         (firstFocusableElement instanceof HTMLInputElement ||
           firstFocusableElement instanceof HTMLTextAreaElement)
       ) {
@@ -38,8 +38,7 @@ function getFirstFocusableElement(parent: HTMLElement): HTMLElement | null {
     return parent
   }
 
-  const focusableElements =
-    parent.querySelectorAll<HTMLElement>(focusableSelector)
+  const focusableElements = parent.querySelectorAll<HTMLElement>(focusableSelector)
   return focusableElements.length > 0 ? focusableElements[0] : null
 }
 
diff --git a/src/directives/visibility.ts b/src/directives/visibility.ts
index 94a125677..41dd37430 100644
--- a/src/directives/visibility.ts
+++ b/src/directives/visibility.ts
@@ -6,24 +6,15 @@ interface VisibilityElement extends Element {
 }
 
 export default {
-  beforeMount(
-    el: VisibilityElement,
-    binding: DirectiveBinding,
-    vnode: VNode,
-  ): void {
-    const fn = binding.value as (
-      visible: boolean,
-      entry: IntersectionObserverEntry,
-    ) => void
+  beforeMount(el: VisibilityElement, binding: DirectiveBinding, vnode: VNode): void {
+    const fn = binding.value as (visible: boolean, entry: IntersectionObserverEntry) => void
     if (!fn) return
 
-    const observer = new IntersectionObserver(
-      (entries: IntersectionObserverEntry[]) => {
-        const entry = entries[0]
-        const visible = entry.isIntersecting && entry.intersectionRatio > 0
-        fn(visible, entry)
-      },
-    )
+    const observer = new IntersectionObserver((entries: IntersectionObserverEntry[]) => {
+      const entry = entries[0]
+      const visible = entry.isIntersecting && entry.intersectionRatio > 0
+      fn(visible, entry)
+    })
 
     nextTick(() => {
       observer.observe(el)
diff --git a/src/fonts/Inter/inter.css b/src/fonts/Inter/inter.css
index e01007ebc..452d02ca2 100644
--- a/src/fonts/Inter/inter.css
+++ b/src/fonts/Inter/inter.css
@@ -13,11 +13,11 @@
     url('Inter.var.woff2?v=3.19') format('woff2');
   src: url('Inter.var.woff2?v=3.19') format('woff2') tech('variations');
   unicode-range:
-    U+0000-05FF, /* Latin, Greek, Cyrillic, Hebrew */
-    U+0700-1FFF, /* Extended Latin, Greek, Cyrillic, Armenian, Georgian */
-    U+2C00-2FFF, /* Additional scripts */
-    U+4E00-9FFF, /* CJK (Chinese, Japanese, Korean) */
-    U+AC00-D7AF; /* Hangul (Korean) */
+    U+0000-05FF,
+    /* Latin, Greek, Cyrillic, Hebrew */ U+0700-1FFF,
+    /* Extended Latin, Greek, Cyrillic, Armenian, Georgian */ U+2C00-2FFF,
+    /* Additional scripts */ U+4E00-9FFF,
+    /* CJK (Chinese, Japanese, Korean) */ U+AC00-D7AF; /* Hangul (Korean) */
 }
 @font-face {
   font-family: 'InterVar';
@@ -42,11 +42,11 @@
     url('Inter.var.woff2?v=3.19') format('woff2');
   src: url('Inter.var.woff2?v=3.19') format('woff2') tech('variations');
   unicode-range:
-    U+0000-05FF, /* Latin, Greek, Cyrillic, Hebrew */
-    U+0700-1FFF, /* Extended Latin, Greek, Cyrillic, Armenian, Georgian */
-    U+2C00-2FFF, /* Additional scripts */
-    U+4E00-9FFF, /* CJK (Chinese, Japanese, Korean) */
-    U+AC00-D7AF; /* Hangul (Korean) */
+    U+0000-05FF,
+    /* Latin, Greek, Cyrillic, Hebrew */ U+0700-1FFF,
+    /* Extended Latin, Greek, Cyrillic, Armenian, Georgian */ U+2C00-2FFF,
+    /* Additional scripts */ U+4E00-9FFF,
+    /* CJK (Chinese, Japanese, Korean) */ U+AC00-D7AF; /* Hangul (Korean) */
 }
 @font-face {
   font-family: 'Inter';
diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts
index 742921bcc..bb6f5c586 100644
--- a/src/mocks/handlers.ts
+++ b/src/mocks/handlers.ts
@@ -73,23 +73,20 @@ export const handlers = [
       },
     })
   }),
-  http.post(
-    url('/api/v2/document/User/user1/method/update_email'),
-    async ({ request }) => {
-      let body = await request.json()
-      return HttpResponse.json({
-        docs: [
-          {
-            doctype: 'User',
-            name: 'user1',
-            email: body['email'],
-            first_name: 'User',
-            last_name: '1',
-          },
-        ],
-      })
-    },
-  ),
+  http.post(url('/api/v2/document/User/user1/method/update_email'), async ({ request }) => {
+    let body = await request.json()
+    return HttpResponse.json({
+      docs: [
+        {
+          doctype: 'User',
+          name: 'user1',
+          email: body['email'],
+          first_name: 'User',
+          last_name: '1',
+        },
+      ],
+    })
+  }),
 ]
 
 function getUsers(listParams) {
diff --git a/src/resources/documentResource.js b/src/resources/documentResource.js
index 99a0adb5b..69ee6f85c 100644
--- a/src/resources/documentResource.js
+++ b/src/resources/documentResource.js
@@ -24,12 +24,9 @@ export function createDocumentResource(options, vm) {
   }
 
   let defaultDocGetUrl = getConfig('defaultDocGetUrl') || 'frappe.client.get'
-  let defaultDocUpdateUrl =
-    getConfig('defaultDocUpdateUrl') || 'frappe.client.set_value'
-  let defaultDocDeleteUrl =
-    getConfig('defaultDocDeleteUrl') || 'frappe.client.delete'
-  let defaultRunDocMethodUrl =
-    getConfig('defaultRunDocMethodUrl') || 'run_doc_method'
+  let defaultDocUpdateUrl = getConfig('defaultDocUpdateUrl') || 'frappe.client.set_value'
+  let defaultDocDeleteUrl = getConfig('defaultDocDeleteUrl') || 'frappe.client.delete'
+  let defaultRunDocMethodUrl = getConfig('defaultRunDocMethodUrl') || 'run_doc_method'
 
   let setValueOptions = {
     url: defaultDocUpdateUrl,
@@ -162,13 +159,7 @@ export function createDocumentResource(options, vm) {
       }
     }
 
-    let {
-      method,
-      onSuccess,
-      makeParams,
-      transform: _transform,
-      ...otherOptions
-    } = methodOptions
+    let { method, onSuccess, makeParams, transform: _transform, ...otherOptions } = methodOptions
 
     out[methodKey] = createResource(
       {
@@ -194,10 +185,7 @@ export function createDocumentResource(options, vm) {
         onSuccess(data) {
           if (data.docs) {
             for (let doc of data.docs) {
-              if (
-                doc.doctype === out.doctype &&
-                doc.name.toString() === out.name.toString()
-              ) {
+              if (doc.doctype === out.doctype && doc.name.toString() === out.name.toString()) {
                 out.doc = transform(doc)
                 // update data in list resources
                 updateRowInListResource(out.doctype, out.doc)
diff --git a/src/resources/index.ts b/src/resources/index.ts
index 6e7b33265..fb8834f23 100644
--- a/src/resources/index.ts
+++ b/src/resources/index.ts
@@ -1,7 +1,4 @@
-export {
-  createDocumentResource,
-  getCachedDocumentResource,
-} from './documentResource'
+export { createDocumentResource, getCachedDocumentResource } from './documentResource'
 export { createListResource, getCachedListResource } from './listResource'
 export * from './local'
 export { default as resourcesPlugin } from './plugin'
diff --git a/src/resources/listResource.js b/src/resources/listResource.js
index 9a0d6031b..a54796a2e 100644
--- a/src/resources/listResource.js
+++ b/src/resources/listResource.js
@@ -24,14 +24,10 @@ export function createListResource(options, vm) {
   }
 
   let defaultListUrl = getConfig('defaultListUrl') || 'frappe.client.get_list'
-  let defaultDocInsertUrl =
-    getConfig('defaultDocInsertUrl') || 'frappe.client.insert'
-  let defaultDocUpdateUrl =
-    getConfig('defaultDocUpdateUrl') || 'frappe.client.set_value'
-  let defaultDocDeleteUrl =
-    getConfig('defaultDocDeleteUrl') || 'frappe.client.delete'
-  let defaultRunDocMethodUrl =
-    getConfig('defaultRunDocMethodUrl') || 'run_doc_method'
+  let defaultDocInsertUrl = getConfig('defaultDocInsertUrl') || 'frappe.client.insert'
+  let defaultDocUpdateUrl = getConfig('defaultDocUpdateUrl') || 'frappe.client.set_value'
+  let defaultDocDeleteUrl = getConfig('defaultDocDeleteUrl') || 'frappe.client.delete'
+  let defaultRunDocMethodUrl = getConfig('defaultRunDocMethodUrl') || 'run_doc_method'
 
   let out = reactive({
     doctype: options.doctype,
diff --git a/src/resources/plugin.js b/src/resources/plugin.js
index be4c2c01b..18ae8abdd 100644
--- a/src/resources/plugin.js
+++ b/src/resources/plugin.js
@@ -1,9 +1,6 @@
 import { reactive, watch } from 'vue'
 import { createResource, getCachedResource } from './resources'
-import {
-  createDocumentResource,
-  getCachedDocumentResource,
-} from './documentResource'
+import { createDocumentResource, getCachedDocumentResource } from './documentResource'
 import { createListResource, getCachedListResource } from './listResource'
 
 let createMixin = (mixinOptions) => ({
@@ -30,9 +27,7 @@ let createMixin = (mixinOptions) => ({
                 return
               }
 
-              let changed =
-                !oldOptions ||
-                JSON.stringify(options) !== JSON.stringify(oldOptions)
+              let changed = !oldOptions || JSON.stringify(options) !== JSON.stringify(oldOptions)
 
               if (!changed) return
               this._resources[key] = createResourceForOptions(options, this)
diff --git a/src/resources/resources.js b/src/resources/resources.js
index e7d1d91d2..fe99b578d 100644
--- a/src/resources/resources.js
+++ b/src/resources/resources.js
@@ -27,9 +27,7 @@ export function createResource(options, vm) {
     }
   }
 
-  let fetchFunction = options.debounce
-    ? debounce(fetch, options.debounce)
-    : fetch
+  let fetchFunction = options.debounce ? debounce(fetch, options.debounce) : fetch
 
   let out = reactive({
     method: options.method,
@@ -51,8 +49,7 @@ export function createResource(options, vm) {
   })
 
   async function fetch(params, tempOptions = {}) {
-    let resourceFetcher =
-      options.resourceFetcher || getConfig('resourceFetcher') || request
+    let resourceFetcher = options.resourceFetcher || getConfig('resourceFetcher') || request
 
     if (params instanceof Event) {
       params = null
diff --git a/src/utils/call.js b/src/utils/call.js
index a1b84fa79..2621b63b5 100644
--- a/src/utils/call.js
+++ b/src/utils/call.js
@@ -50,9 +50,7 @@ export default async function call(method, args, options = {}) {
       error = JSON.parse(response)
       // eslint-disable-next-line no-empty
     } catch (e) {}
-    let errorParts = [
-      [method, error.exc_type, error._error_message].filter(Boolean).join(' '),
-    ]
+    let errorParts = [[method, error.exc_type, error._error_message].filter(Boolean).join(' ')]
     if (error.exc) {
       exception = error.exc
       try {
@@ -65,9 +63,7 @@ export default async function call(method, args, options = {}) {
     e.exc_type = error.exc_type
     e.exc = exception
     e.status = res.status
-    e.messages = error._server_messages
-      ? JSON.parse(error._server_messages)
-      : []
+    e.messages = error._server_messages ? JSON.parse(error._server_messages) : []
     e.messages = e.messages.concat(error.message)
     e.messages = e.messages.map((m) => {
       try {
@@ -78,9 +74,7 @@ export default async function call(method, args, options = {}) {
     })
     e.messages = e.messages.filter(Boolean)
     if (!e.messages.length) {
-      e.messages = error._error_message
-        ? [error._error_message]
-        : ['Internal Server Error']
+      e.messages = error._error_message ? [error._error_message] : ['Internal Server Error']
     }
 
     if (options.onError) {
diff --git a/src/utils/config.ts b/src/utils/config.ts
index 2861a0696..692b0dc68 100644
--- a/src/utils/config.ts
+++ b/src/utils/config.ts
@@ -22,15 +22,10 @@ interface FrappeUIConfig {
 
 let config: FrappeUIConfig = {}
 
-export function setConfig<K extends keyof FrappeUIConfig>(
-  key: K,
-  value: FrappeUIConfig[K],
-): void {
+export function setConfig<K extends keyof FrappeUIConfig>(key: K, value: FrappeUIConfig[K]): void {
   config[key] = value
 }
 
-export function getConfig<K extends keyof FrappeUIConfig>(
-  key: K,
-): FrappeUIConfig[K] | null {
+export function getConfig<K extends keyof FrappeUIConfig>(key: K): FrappeUIConfig[K] | null {
   return config[key] ?? null
 }
diff --git a/src/utils/confirmDialog.js b/src/utils/confirmDialog.js
index 1c38ae94b..a352d43be 100644
--- a/src/utils/confirmDialog.js
+++ b/src/utils/confirmDialog.js
@@ -7,7 +7,7 @@ export function confirmDialog({ title = 'Untitled', message = '', onConfirm, onC
       title,
       message,
       onConfirm,
-      onCancel
+      onCancel,
     }),
   )
 }
diff --git a/src/utils/debounce.ts b/src/utils/debounce.ts
index 2faddc082..36c42536e 100644
--- a/src/utils/debounce.ts
+++ b/src/utils/debounce.ts
@@ -1,8 +1,4 @@
-export default function debounce(
-  func: Function,
-  wait: number,
-  immediate?: boolean,
-) {
+export default function debounce(func: Function, wait: number, immediate?: boolean) {
   var timeout: number | undefined
   return function () {
     var context = this,
diff --git a/src/utils/fileUploadHandler.ts b/src/utils/fileUploadHandler.ts
index f4cc63666..3c61d810b 100644
--- a/src/utils/fileUploadHandler.ts
+++ b/src/utils/fileUploadHandler.ts
@@ -1,4 +1,4 @@
-import { UploadOptions } from "./useFileUpload"
+import { UploadOptions } from './useFileUpload'
 
 type EventListenerOption = 'start' | 'progress' | 'finish' | 'error'
 
@@ -79,8 +79,7 @@ class FileUploadHandler {
         }
       }
 
-      const uploadEndpoint =
-        options.upload_endpoint || '/api/method/upload_file'
+      const uploadEndpoint = options.upload_endpoint || '/api/method/upload_file'
       xhr.open('POST', uploadEndpoint, true)
       xhr.setRequestHeader('Accept', 'application/json')
 
@@ -122,10 +121,10 @@ class FileUploadHandler {
       if (options.optimize) {
         form_data.append('optimize', '1')
         if (options.max_width) {
-            form_data.append('max_width', options.max_width.toString())
+          form_data.append('max_width', options.max_width.toString())
         }
         if (options.max_height) {
-            form_data.append('max_height', options.max_height.toString())
+          form_data.append('max_height', options.max_height.toString())
         }
       }
 
diff --git a/src/utils/frappeRequest.js b/src/utils/frappeRequest.js
index 66e425328..30a10689c 100644
--- a/src/utils/frappeRequest.js
+++ b/src/utils/frappeRequest.js
@@ -66,9 +66,7 @@ export function frappeRequest(options) {
           // eslint-disable-next-line no-empty
         } catch (e) {}
         let errorParts = [
-          [options.url, error?.exc_type, error?._error_message]
-            .filter(Boolean)
-            .join(' '),
+          [options.url, error?.exc_type, error?._error_message].filter(Boolean).join(' '),
         ]
         if (error.exc) {
           exception = error.exc
@@ -83,9 +81,7 @@ export function frappeRequest(options) {
         e.exc = exception
         e.response = response
         e.status = errorResponse.status
-        e.messages = error._server_messages
-          ? JSON.parse(error._server_messages)
-          : []
+        e.messages = error._server_messages ? JSON.parse(error._server_messages) : []
         e.messages = e.messages.concat(error.message)
         e.messages = e.messages.map((m) => {
           try {
@@ -96,9 +92,7 @@ export function frappeRequest(options) {
         })
         e.messages = e.messages.filter(Boolean)
         if (!e.messages.length) {
-          e.messages = error._error_message
-            ? [error._error_message]
-            : ['Internal Server Error']
+          e.messages = error._error_message ? [error._error_message] : ['Internal Server Error']
         }
         options.onError && options.onError(e)
         throw e
diff --git a/src/utils/pageMeta.ts b/src/utils/pageMeta.ts
index fbfd0ce6b..eb47b4c5a 100644
--- a/src/utils/pageMeta.ts
+++ b/src/utils/pageMeta.ts
@@ -1,10 +1,4 @@
-import {
-  watch,
-  getCurrentInstance,
-  onBeforeUnmount,
-  type App,
-  type WatchStopHandle,
-} from 'vue'
+import { watch, getCurrentInstance, onBeforeUnmount, type App, type WatchStopHandle } from 'vue'
 
 interface PageMeta {
   title?: string
diff --git a/src/utils/theme.ts b/src/utils/theme.ts
index ac3ed54f4..8f0a47eac 100644
--- a/src/utils/theme.ts
+++ b/src/utils/theme.ts
@@ -6,9 +6,7 @@ export function useTheme() {
   const currentTheme: Ref<Theme> = ref('light')
 
   const getSystemTheme = (): 'light' | 'dark' => {
-    return window.matchMedia('(prefers-color-scheme: dark)').matches
-      ? 'dark'
-      : 'light'
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
   }
 
   const toggleTheme = (): void => {
diff --git a/src/utils/useFileUpload.ts b/src/utils/useFileUpload.ts
index d308eab88..6d815b952 100644
--- a/src/utils/useFileUpload.ts
+++ b/src/utils/useFileUpload.ts
@@ -68,8 +68,7 @@ export function useFileUpload() {
   const result = computed(() => state.result)
 
   return {
-    upload: (file: File, options: UploadOptions = {}) =>
-      upload(file, options, state, reset),
+    upload: (file: File, options: UploadOptions = {}) => upload(file, options, state, reset),
     reset,
     state,
     isUploading,
@@ -141,9 +140,7 @@ async function upload(
 
         if (error) {
           let exception
-          let errorParts = [
-            [error.exc_type, error._error_message].filter(Boolean).join(' '),
-          ]
+          let errorParts = [[error.exc_type, error._error_message].filter(Boolean).join(' ')]
           if (error.exc) {
             exception = error.exc
             try {
@@ -153,9 +150,7 @@ async function upload(
             } catch (e) {}
           }
           let e = new Error(errorParts.join('\n'))
-          let messages = error._server_messages
-            ? JSON.parse(error._server_messages)
-            : []
+          let messages = error._server_messages ? JSON.parse(error._server_messages) : []
           messages = messages
             .map((m: string) => {
               try {
@@ -166,9 +161,7 @@ async function upload(
             })
             .filter(Boolean)
           if (!messages.length) {
-            messages = error._error_message
-              ? [error._error_message]
-              : ['Internal Server Error']
+            messages = error._error_message ? [error._error_message] : ['Internal Server Error']
           }
           e.message = messages.join('\n')
           state.error = e
diff --git a/yarn.lock b/yarn.lock
index e8e1aee07..906ed8d9d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1809,6 +1809,11 @@ browserslist@^4.28.1:
     node-releases "^2.0.27"
     update-browserslist-db "^1.2.0"
 
+buffer-from@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
+  integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==
+
 buffer@^5.5.0:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.7.1.tgz#ba62e7c13133053582197160851a8f648e99eed0"
@@ -1969,6 +1974,16 @@ commander@^4.0.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
   integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
 
+concat-stream@^1.4.7:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.2.tgz#904bdf194cd3122fc675c77fc4ac3d4ff0fd1a34"
+  integrity sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==
+  dependencies:
+    buffer-from "^1.0.0"
+    inherits "^2.0.3"
+    readable-stream "^2.2.2"
+    typedarray "^0.0.6"
+
 confbox@^0.1.8:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/confbox/-/confbox-0.1.8.tgz#820d73d3b3c82d9bd910652c5d4d599ef8ff8b06"
@@ -1996,11 +2011,25 @@ core-js@^3.1.3:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.47.0.tgz#436ef07650e191afeb84c24481b298bd60eb4a17"
   integrity sha512-c3Q2VVkGAUyupsjRnaNX6u8Dq2vAdzm9iuPj5FW0fRxzlxgq9Q39MDq10IvmQSpLgHQNyQzQmOo6bgGHmH3NNg==
 
+core-util-is@~1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"
+  integrity sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==
+
 crelt@^1.0.0:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/crelt/-/crelt-1.0.6.tgz#7cc898ea74e190fb6ef9dae57f8f81cf7302df72"
   integrity sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==
 
+cross-spawn@^5.0.1:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
+  integrity sha512-pTgQJ5KC0d2hcY8eyL1IzlBPYjTkyH72XRZPnLyKus2mBfNjQs3klqbJU2VILqZryAZUt9JOb3h/mWMy23/f5A==
+  dependencies:
+    lru-cache "^4.0.1"
+    shebang-command "^1.2.0"
+    which "^1.2.9"
+
 css-tree@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-3.1.0.tgz#7aabc035f4e66b5c86f54570d55e05b1346eb0fd"
@@ -2456,6 +2485,11 @@ https-proxy-agent@^7.0.6:
     agent-base "^7.1.2"
     debug "4"
 
+husky@^9.1.7:
+  version "9.1.7"
+  resolved "https://registry.yarnpkg.com/husky/-/husky-9.1.7.tgz#d46a38035d101b46a70456a850ff4201344c0b2d"
+  integrity sha512-5gs5ytaNjBrh5Ow3zrvdUUY+0VxIuWVL4i9irt6friV+BqdCfmV11CQTWMiBYWHbXhco+J1kHfTOUkePhCDvMA==
+
 idb-keyval@^6.2.0:
   version "6.2.2"
   resolved "https://registry.yarnpkg.com/idb-keyval/-/idb-keyval-6.2.2.tgz#b0171b5f73944854a3291a5cdba8e12768c4854a"
@@ -2466,7 +2500,7 @@ ieee754@^1.1.13:
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
   integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
 
-inherits@^2.0.3, inherits@^2.0.4:
+inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.3:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -2546,6 +2580,16 @@ is-what@^5.2.0:
   resolved "https://registry.yarnpkg.com/is-what/-/is-what-5.5.0.tgz#a3031815757cfe1f03fed990bf6355a2d3f628c4"
   integrity sha512-oG7cgbmg5kLYae2N5IVd3jm2s+vldjxJzK1pcu9LfpGuQ93MQSzo0okvRna+7y5ifrD+20FE8FvjusyGaz14fw==
 
+isarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
+  integrity sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==
+
+isexe@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
+  integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
+
 jiti@^1.21.7:
   version "1.21.7"
   resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.7.tgz#9dd81043424a3d28458b193d965f0d18a2300ba9"
@@ -2676,6 +2720,14 @@ lru-cache@^11.2.4:
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-11.2.4.tgz#ecb523ebb0e6f4d837c807ad1abaea8e0619770d"
   integrity sha512-B5Y16Jr9LB9dHVkh6ZevG+vAbOsNOYCX+sXvFWFu7B3Iz5mijW3zdbMyhsh8ANd2mSWBYdJgnqi+mL7/LrOPYg==
 
+lru-cache@^4.0.1:
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd"
+  integrity sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==
+  dependencies:
+    pseudomap "^1.0.2"
+    yallist "^2.1.2"
+
 lucide-static@^0.543.0:
   version "0.543.0"
   resolved "https://registry.yarnpkg.com/lucide-static/-/lucide-static-0.543.0.tgz#054c14493993452084ed9968a3ad912c58fec90a"
@@ -2961,6 +3013,11 @@ orderedmap@^2.0.0:
   resolved "https://registry.yarnpkg.com/orderedmap/-/orderedmap-2.1.1.tgz#61481269c44031c449915497bf5a4ad273c512d2"
   integrity sha512-TvAWxi0nDe1j/rtMcWcIj94+Ffe6n7zhow33h40SKxmsmozs6dz/e+EajymfoFcHd7sxNn8yHM8839uixMOV6g==
 
+os-shim@^0.1.2:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/os-shim/-/os-shim-0.1.3.tgz#6b62c3791cf7909ea35ed46e17658bb417cb3917"
+  integrity sha512-jd0cvB8qQ5uVt0lvCIexBaROw1KyKm5sbulg2fWOHjETisuCzWyt+eTZKEMs8v6HwzoGs8xik26jg7eCM6pS+A==
+
 outvariant@^1.4.0, outvariant@^1.4.3:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/outvariant/-/outvariant-1.4.3.tgz#221c1bfc093e8fec7075497e7799fdbf43d14873"
@@ -3121,6 +3178,15 @@ postcss@^8.4.21, postcss@^8.4.43, postcss@^8.4.47, postcss@^8.4.48, postcss@^8.5
     picocolors "^1.1.1"
     source-map-js "^1.2.1"
 
+pre-commit@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/pre-commit/-/pre-commit-1.2.2.tgz#dbcee0ee9de7235e57f79c56d7ce94641a69eec6"
+  integrity sha512-qokTiqxD6GjODy5ETAIgzsRgnBWWQHQH2ghy86PU7mIn/wuWeTwF3otyNQZxWBwVn8XNr8Tdzj/QfUXpH+gRZA==
+  dependencies:
+    cross-spawn "^5.0.1"
+    spawn-sync "^1.0.15"
+    which "1.2.x"
+
 prettier-plugin-tailwindcss@^0.1.13:
   version "0.1.13"
   resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.1.13.tgz#ca1071361dc7e2ed5d95a2ee36825ce45f814942"
@@ -3131,6 +3197,11 @@ prettier@^3.3.2:
   resolved "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz"
   integrity sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==
 
+process-nextick-args@~2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
+  integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
+
 property-information@^7.0.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/property-information/-/property-information-7.1.0.tgz#b622e8646e02b580205415586b40804d3e8bfd5d"
@@ -3290,6 +3361,11 @@ prosemirror-view@1.40.0, prosemirror-view@^1.0.0, prosemirror-view@^1.1.0, prose
     prosemirror-state "^1.0.0"
     prosemirror-transform "^1.1.0"
 
+pseudomap@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
+  integrity sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ==
+
 punycode.js@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/punycode.js/-/punycode.js-2.3.1.tgz#6b53e56ad75588234e79f4affa90972c7dd8cdb7"
@@ -3334,6 +3410,19 @@ read-cache@^1.0.0:
   dependencies:
     pify "^2.3.0"
 
+readable-stream@^2.2.2:
+  version "2.3.8"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.8.tgz#91125e8042bba1b9887f49345f6277027ce8be9b"
+  integrity sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.3"
+    isarray "~1.0.0"
+    process-nextick-args "~2.0.0"
+    safe-buffer "~5.1.1"
+    string_decoder "~1.1.1"
+    util-deprecate "~1.0.1"
+
 readable-stream@^3.4.0:
   version "3.6.2"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.2.tgz#56a9b36ea965c00c5a93ef31eb111a0f11056967"
@@ -3512,6 +3601,11 @@ run-parallel@^1.1.9:
   dependencies:
     queue-microtask "^1.2.2"
 
+safe-buffer@~5.1.0, safe-buffer@~5.1.1:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
+  integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
+
 safe-buffer@~5.2.0:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
@@ -3529,6 +3623,18 @@ scule@^1.3.0:
   resolved "https://registry.yarnpkg.com/scule/-/scule-1.3.0.tgz#6efbd22fd0bb801bdcc585c89266a7d2daa8fbd3"
   integrity sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==
 
+shebang-command@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
+  integrity sha512-EV3L1+UQWGor21OmnvojK36mhg+TyIKDh3iFBKBohr5xeXIhNBcx8oWdgkTEEQ+BEFFYdLRuqMfd5L84N1V5Vg==
+  dependencies:
+    shebang-regex "^1.0.0"
+
+shebang-regex@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
+  integrity sha512-wpoSFAxys6b2a2wHZ1XpDSgD7N9iVjg29Ph9uV/uaP9Ex/KXlkTZTeddxDPSYQpgvzKLGJke2UU0AzoGCjNIvQ==
+
 shiki@^3.15.0:
   version "3.19.0"
   resolved "https://registry.yarnpkg.com/shiki/-/shiki-3.19.0.tgz#f44abb80c69f0adf0870028e86145bc3d7fe546e"
@@ -3599,6 +3705,14 @@ space-separated-tokens@^2.0.0:
   resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz#1ecd9d2350a3844572c3f4a312bceb018348859f"
   integrity sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==
 
+spawn-sync@^1.0.15:
+  version "1.0.15"
+  resolved "https://registry.yarnpkg.com/spawn-sync/-/spawn-sync-1.0.15.tgz#b00799557eb7fb0c8376c29d44e8a1ea67e57476"
+  integrity sha512-9DWBgrgYZzNghseho0JOuh+5fg9u6QWhAWa51QC7+U5rCheZ/j1DrEZnyE0RBBRqZ9uEXGPgSSM0nky6burpVw==
+  dependencies:
+    concat-stream "^1.4.7"
+    os-shim "^0.1.2"
+
 speakingurl@^14.0.1:
   version "14.0.1"
   resolved "https://registry.yarnpkg.com/speakingurl/-/speakingurl-14.0.1.tgz#f37ec8ddc4ab98e9600c1c9ec324a8c48d772a53"
@@ -3662,6 +3776,13 @@ string_decoder@^1.1.1:
   dependencies:
     safe-buffer "~5.2.0"
 
+string_decoder@~1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
+  integrity sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==
+  dependencies:
+    safe-buffer "~5.1.0"
+
 stringify-entities@^4.0.0:
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/stringify-entities/-/stringify-entities-4.0.4.tgz#b3b79ef5f277cc4ac73caeb0236c5ba939b3a4f3"
@@ -3890,6 +4011,11 @@ type-fest@^5.2.0:
   dependencies:
     tagged-tag "^1.0.0"
 
+typedarray@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
+  integrity sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==
+
 typescript@^5.0.2:
   version "5.9.3"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.9.3.tgz#5b4f59e15310ab17a216f5d6cf53ee476ede670f"
@@ -4031,7 +4157,7 @@ update-browserslist-db@^1.2.0:
     escalade "^3.2.0"
     picocolors "^1.1.1"
 
-util-deprecate@^1.0.1, util-deprecate@^1.0.2:
+util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
@@ -4239,6 +4365,20 @@ whatwg-url@^15.1.0:
     tr46 "^6.0.0"
     webidl-conversions "^8.0.0"
 
+which@1.2.x:
+  version "1.2.14"
+  resolved "https://registry.yarnpkg.com/which/-/which-1.2.14.tgz#9a87c4378f03e827cecaf1acdf56c736c01c14e5"
+  integrity sha512-16uPglFkRPzgiUXYMi1Jf8Z5EzN1iB4V0ZtMXcHZnwsBtQhhHeCqoWw7tsUY42hJGNDWtUsVLTjakIa5BgAxCw==
+  dependencies:
+    isexe "^2.0.0"
+
+which@^1.2.9:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
+  integrity sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==
+  dependencies:
+    isexe "^2.0.0"
+
 why-is-node-running@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/why-is-node-running/-/why-is-node-running-2.3.0.tgz#a3f69a97107f494b3cdc3bdddd883a7d65cebf04"
@@ -4304,6 +4444,11 @@ y18n@^5.0.5:
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55"
   integrity sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==
 
+yallist@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
+  integrity sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==
+
 yaml@^2.8.1:
   version "2.8.2"
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.8.2.tgz#5694f25eca0ce9c3e7a9d9e00ce0ddabbd9e35c5"