diff --git a/apps/docs/nuxt.config.ts b/apps/docs/nuxt.config.ts
index 16d619f..db4cef9 100644
--- a/apps/docs/nuxt.config.ts
+++ b/apps/docs/nuxt.config.ts
@@ -23,13 +23,13 @@ export default defineNuxtConfig({
       nodeCompat: true,
     },
   },
-    llms: {
-        domain: 'https://docs-please.pages.dev',
-        title: 'Docs Please',
-        description: 'Documentation for Docs Please',
-        full: {
-            title: 'Docs Please',
-            description: 'Documentation for Docs Please',
-        },
+  llms: {
+    domain: 'https://docs-please.pages.dev',
+    title: 'Docs Please',
+    description: 'Documentation for Docs Please',
+    full: {
+      title: 'Docs Please',
+      description: 'Documentation for Docs Please',
     },
+  },
 })
diff --git a/packages/layer/app/components/content/ProseTable.vue b/packages/layer/app/components/content/ProseTable.vue
index b0c2dc5..1891adf 100644
--- a/packages/layer/app/components/content/ProseTable.vue
+++ b/packages/layer/app/components/content/ProseTable.vue
@@ -12,7 +12,10 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div data-slot="prose-table" class="no-scrollbar my-6 w-full overflow-hidden rounded-lg border">
+  <div
+    data-slot="prose-table"
+    class="no-scrollbar my-6 w-full overflow-hidden rounded-lg border"
+  >
     <table
       :class="cn(
         'w-full border-collapse text-sm',
diff --git a/packages/layer/app/components/ui/command/Command.vue b/packages/layer/app/components/ui/command/Command.vue
index 5f21581..baeec5b 100644
--- a/packages/layer/app/components/ui/command/Command.vue
+++ b/packages/layer/app/components/ui/command/Command.vue
@@ -1,28 +1,28 @@
 <script setup lang="ts">
-import type { ListboxRootEmits, ListboxRootProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { ListboxRoot, useFilter, useForwardPropsEmits } from "reka-ui"
-import { reactive, ref, watch } from "vue"
+import type { ListboxRootEmits, ListboxRootProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { ListboxRoot, useFilter, useForwardPropsEmits } from 'reka-ui'
+import { reactive, ref, watch } from 'vue'
 import { cn } from '~/lib/utils'
-import { provideCommandContext } from "."
+import { provideCommandContext } from '.'
 
-const props = withDefaults(defineProps<ListboxRootProps & { class?: HTMLAttributes["class"] }>(), {
-  modelValue: "",
+const props = withDefaults(defineProps<ListboxRootProps & { class?: HTMLAttributes['class'] }>(), {
+  modelValue: '',
 })
 
 const emits = defineEmits<ListboxRootEmits>()
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class')
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
 
 const allItems = ref<Map<string, string>>(new Map())
 const allGroups = ref<Map<string, Set<string>>>(new Map())
 
-const { contains } = useFilter({ sensitivity: "base" })
+const { contains } = useFilter({ sensitivity: 'base' })
 const filterState = reactive({
-  search: "",
+  search: '',
   filtered: {
     /** The count of all visible items. */
     count: 0,
diff --git a/packages/layer/app/components/ui/command/CommandDialog.vue b/packages/layer/app/components/ui/command/CommandDialog.vue
index 9c64d58..f8b463c 100644
--- a/packages/layer/app/components/ui/command/CommandDialog.vue
+++ b/packages/layer/app/components/ui/command/CommandDialog.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { DialogRootEmits, DialogRootProps } from "reka-ui"
-import { useForwardPropsEmits } from "reka-ui"
+import type { DialogRootEmits, DialogRootProps } from 'reka-ui'
+import { useForwardPropsEmits } from 'reka-ui'
 import { Dialog, DialogContent } from '~/components/ui/dialog'
-import Command from "./Command.vue"
+import Command from './Command.vue'
 
 const props = defineProps<DialogRootProps>()
 const emits = defineEmits<DialogRootEmits>()
diff --git a/packages/layer/app/components/ui/command/CommandEmpty.vue b/packages/layer/app/components/ui/command/CommandEmpty.vue
index a081a8b..c124c84 100644
--- a/packages/layer/app/components/ui/command/CommandEmpty.vue
+++ b/packages/layer/app/components/ui/command/CommandEmpty.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { Primitive } from "reka-ui"
-import { computed } from "vue"
+import type { PrimitiveProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { Primitive } from 'reka-ui'
+import { computed } from 'vue'
 import { cn } from '~/lib/utils'
-import { useCommand } from "."
+import { useCommand } from '.'
 
-const props = defineProps<PrimitiveProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>()
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class')
 
 const { filterState } = useCommand()
 const isRender = computed(() => !!filterState.search && filterState.filtered.count === 0,
@@ -17,7 +17,11 @@ const isRender = computed(() => !!filterState.search && filterState.filtered.cou
 </script>
 
 <template>
-  <Primitive v-if="isRender" v-bind="delegatedProps" :class="cn('py-6 text-center text-sm', props.class)">
+  <Primitive
+    v-if="isRender"
+    v-bind="delegatedProps"
+    :class="cn('py-6 text-center text-sm', props.class)"
+  >
     <slot />
   </Primitive>
 </template>
diff --git a/packages/layer/app/components/ui/command/CommandGroup.vue b/packages/layer/app/components/ui/command/CommandGroup.vue
index cbc1261..fcd0510 100644
--- a/packages/layer/app/components/ui/command/CommandGroup.vue
+++ b/packages/layer/app/components/ui/command/CommandGroup.vue
@@ -1,18 +1,18 @@
 <script setup lang="ts">
-import type { ListboxGroupProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { ListboxGroup, ListboxGroupLabel, useId } from "reka-ui"
-import { computed, onMounted, onUnmounted } from "vue"
+import type { ListboxGroupProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { ListboxGroup, ListboxGroupLabel, useId } from 'reka-ui'
+import { computed, onMounted, onUnmounted } from 'vue'
 import { cn } from '~/lib/utils'
-import { provideCommandGroupContext, useCommand } from "."
+import { provideCommandGroupContext, useCommand } from '.'
 
 const props = defineProps<ListboxGroupProps & {
-  class?: HTMLAttributes["class"]
+  class?: HTMLAttributes['class']
   heading?: string
 }>()
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class')
 
 const { allGroups, filterState } = useCommand()
 const id = useId()
@@ -36,7 +36,10 @@ onUnmounted(() => {
     :class="cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', props.class)"
     :hidden="isRender ? undefined : true"
   >
-    <ListboxGroupLabel v-if="heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+    <ListboxGroupLabel
+      v-if="heading"
+      class="px-2 py-1.5 text-xs font-medium text-muted-foreground"
+    >
       {{ heading }}
     </ListboxGroupLabel>
     <slot />
diff --git a/packages/layer/app/components/ui/command/CommandInput.vue b/packages/layer/app/components/ui/command/CommandInput.vue
index 732c6f4..1b6775d 100644
--- a/packages/layer/app/components/ui/command/CommandInput.vue
+++ b/packages/layer/app/components/ui/command/CommandInput.vue
@@ -1,21 +1,21 @@
 <script setup lang="ts">
-import type { ListboxFilterProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { Search } from "lucide-vue-next"
-import { ListboxFilter, useForwardProps } from "reka-ui"
+import type { ListboxFilterProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { Search } from 'lucide-vue-next'
+import { ListboxFilter, useForwardProps } from 'reka-ui'
 import { cn } from '~/lib/utils'
-import { useCommand } from "."
+import { useCommand } from '.'
 
 defineOptions({
   inheritAttrs: false,
 })
 
 const props = defineProps<ListboxFilterProps & {
-  class?: HTMLAttributes["class"]
+  class?: HTMLAttributes['class']
 }>()
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class')
 
 const forwardedProps = useForwardProps(delegatedProps)
 
@@ -23,7 +23,10 @@ const { filterState } = useCommand()
 </script>
 
 <template>
-  <div class="flex items-center border-b px-3" cmdk-input-wrapper>
+  <div
+    class="flex items-center border-b px-3"
+    cmdk-input-wrapper
+  >
     <Search class="mr-2 h-4 w-4 shrink-0 opacity-50" />
     <ListboxFilter
       v-bind="{ ...forwardedProps, ...$attrs }"
diff --git a/packages/layer/app/components/ui/command/CommandItem.vue b/packages/layer/app/components/ui/command/CommandItem.vue
index 5df7b90..ae91999 100644
--- a/packages/layer/app/components/ui/command/CommandItem.vue
+++ b/packages/layer/app/components/ui/command/CommandItem.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import type { ListboxItemEmits, ListboxItemProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit, useCurrentElement } from "@vueuse/core"
-import { ListboxItem, useForwardPropsEmits, useId } from "reka-ui"
-import { computed, onMounted, onUnmounted, ref } from "vue"
+import type { ListboxItemEmits, ListboxItemProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit, useCurrentElement } from '@vueuse/core'
+import { ListboxItem, useForwardPropsEmits, useId } from 'reka-ui'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { cn } from '~/lib/utils'
-import { useCommand, useCommandGroup } from "."
+import { useCommand, useCommandGroup } from '.'
 
-const props = defineProps<ListboxItemProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<ListboxItemProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<ListboxItemEmits>()
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class')
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
 
diff --git a/packages/layer/app/components/ui/command/CommandList.vue b/packages/layer/app/components/ui/command/CommandList.vue
index 3cbe253..42c2172 100644
--- a/packages/layer/app/components/ui/command/CommandList.vue
+++ b/packages/layer/app/components/ui/command/CommandList.vue
@@ -1,19 +1,22 @@
 <script setup lang="ts">
-import type { ListboxContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { ListboxContent, useForwardProps } from "reka-ui"
+import type { ListboxContentProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { ListboxContent, useForwardProps } from 'reka-ui'
 import { cn } from '~/lib/utils'
 
-const props = defineProps<ListboxContentProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<ListboxContentProps & { class?: HTMLAttributes['class'] }>()
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class')
 
 const forwarded = useForwardProps(delegatedProps)
 </script>
 
 <template>
-  <ListboxContent v-bind="forwarded" :class="cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)">
+  <ListboxContent
+    v-bind="forwarded"
+    :class="cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)"
+  >
     <div role="presentation">
       <slot />
     </div>
diff --git a/packages/layer/app/components/ui/command/CommandSeparator.vue b/packages/layer/app/components/ui/command/CommandSeparator.vue
index 5f0a98f..47d5ec5 100644
--- a/packages/layer/app/components/ui/command/CommandSeparator.vue
+++ b/packages/layer/app/components/ui/command/CommandSeparator.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import type { SeparatorProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { Separator } from "reka-ui"
+import type { SeparatorProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { Separator } from 'reka-ui'
 import { cn } from '~/lib/utils'
 
-const props = defineProps<SeparatorProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<SeparatorProps & { class?: HTMLAttributes['class'] }>()
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class')
 </script>
 
 <template>
diff --git a/packages/layer/app/components/ui/command/CommandShortcut.vue b/packages/layer/app/components/ui/command/CommandShortcut.vue
index ffeb92b..aed3751 100644
--- a/packages/layer/app/components/ui/command/CommandShortcut.vue
+++ b/packages/layer/app/components/ui/command/CommandShortcut.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
+import type { HTMLAttributes } from 'vue'
 import { cn } from '~/lib/utils'
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
+  class?: HTMLAttributes['class']
 }>()
 </script>
 
diff --git a/packages/layer/app/components/ui/command/index.ts b/packages/layer/app/components/ui/command/index.ts
index af18933..cb48e1e 100644
--- a/packages/layer/app/components/ui/command/index.ts
+++ b/packages/layer/app/components/ui/command/index.ts
@@ -1,15 +1,15 @@
-import type { Ref } from "vue"
-import { createContext } from "reka-ui"
+import type { Ref } from 'vue'
+import { createContext } from 'reka-ui'
 
-export { default as Command } from "./Command.vue"
-export { default as CommandDialog } from "./CommandDialog.vue"
-export { default as CommandEmpty } from "./CommandEmpty.vue"
-export { default as CommandGroup } from "./CommandGroup.vue"
-export { default as CommandInput } from "./CommandInput.vue"
-export { default as CommandItem } from "./CommandItem.vue"
-export { default as CommandList } from "./CommandList.vue"
-export { default as CommandSeparator } from "./CommandSeparator.vue"
-export { default as CommandShortcut } from "./CommandShortcut.vue"
+export { default as Command } from './Command.vue'
+export { default as CommandDialog } from './CommandDialog.vue'
+export { default as CommandEmpty } from './CommandEmpty.vue'
+export { default as CommandGroup } from './CommandGroup.vue'
+export { default as CommandInput } from './CommandInput.vue'
+export { default as CommandItem } from './CommandItem.vue'
+export { default as CommandList } from './CommandList.vue'
+export { default as CommandSeparator } from './CommandSeparator.vue'
+export { default as CommandShortcut } from './CommandShortcut.vue'
 
 export const [useCommand, provideCommandContext] = createContext<{
   allItems: Ref<Map<string, string>>
@@ -18,8 +18,8 @@ export const [useCommand, provideCommandContext] = createContext<{
     search: string
     filtered: { count: number, items: Map<string, number>, groups: Set<string> }
   }
-}>("Command")
+}>('Command')
 
 export const [useCommandGroup, provideCommandGroupContext] = createContext<{
   id?: string
-}>("CommandGroup")
+}>('CommandGroup')
diff --git a/packages/layer/app/components/ui/dialog/Dialog.vue b/packages/layer/app/components/ui/dialog/Dialog.vue
index ade5260..315b5ca 100644
--- a/packages/layer/app/components/ui/dialog/Dialog.vue
+++ b/packages/layer/app/components/ui/dialog/Dialog.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { DialogRootEmits, DialogRootProps } from "reka-ui"
-import { DialogRoot, useForwardPropsEmits } from "reka-ui"
+import type { DialogRootEmits, DialogRootProps } from 'reka-ui'
+import { DialogRoot, useForwardPropsEmits } from 'reka-ui'
 
 const props = defineProps<DialogRootProps>()
 const emits = defineEmits<DialogRootEmits>()
diff --git a/packages/layer/app/components/ui/dialog/DialogClose.vue b/packages/layer/app/components/ui/dialog/DialogClose.vue
index c5fae04..b1e1167 100644
--- a/packages/layer/app/components/ui/dialog/DialogClose.vue
+++ b/packages/layer/app/components/ui/dialog/DialogClose.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { DialogCloseProps } from "reka-ui"
-import { DialogClose } from "reka-ui"
+import type { DialogCloseProps } from 'reka-ui'
+import { DialogClose } from 'reka-ui'
 
 const props = defineProps<DialogCloseProps>()
 </script>
diff --git a/packages/layer/app/components/ui/dialog/DialogContent.vue b/packages/layer/app/components/ui/dialog/DialogContent.vue
index 7b2840a..4d13680 100644
--- a/packages/layer/app/components/ui/dialog/DialogContent.vue
+++ b/packages/layer/app/components/ui/dialog/DialogContent.vue
@@ -1,27 +1,27 @@
 <script setup lang="ts">
-import type { DialogContentEmits, DialogContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { X } from "lucide-vue-next"
+import type { DialogContentEmits, DialogContentProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { X } from 'lucide-vue-next'
 import {
   DialogClose,
   DialogContent,
   DialogPortal,
   useForwardPropsEmits,
-} from "reka-ui"
+} from 'reka-ui'
 import { cn } from '~/lib/utils'
-import DialogOverlay from "./DialogOverlay.vue"
+import DialogOverlay from './DialogOverlay.vue'
 
 defineOptions({
   inheritAttrs: false,
 })
 
-const props = withDefaults(defineProps<DialogContentProps & { class?: HTMLAttributes["class"], showCloseButton?: boolean }>(), {
+const props = withDefaults(defineProps<DialogContentProps & { class?: HTMLAttributes['class'], showCloseButton?: boolean }>(), {
   showCloseButton: true,
 })
 const emits = defineEmits<DialogContentEmits>()
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class')
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
diff --git a/packages/layer/app/components/ui/dialog/DialogDescription.vue b/packages/layer/app/components/ui/dialog/DialogDescription.vue
index aaac142..af07a2e 100644
--- a/packages/layer/app/components/ui/dialog/DialogDescription.vue
+++ b/packages/layer/app/components/ui/dialog/DialogDescription.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import type { DialogDescriptionProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { DialogDescription, useForwardProps } from "reka-ui"
+import type { DialogDescriptionProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { DialogDescription, useForwardProps } from 'reka-ui'
 import { cn } from '~/lib/utils'
 
-const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class')
 
 const forwardedProps = useForwardProps(delegatedProps)
 </script>
diff --git a/packages/layer/app/components/ui/dialog/DialogFooter.vue b/packages/layer/app/components/ui/dialog/DialogFooter.vue
index 42a2400..fbe4894 100644
--- a/packages/layer/app/components/ui/dialog/DialogFooter.vue
+++ b/packages/layer/app/components/ui/dialog/DialogFooter.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
+import type { HTMLAttributes } from 'vue'
 import { cn } from '~/lib/utils'
 
-const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
 </script>
 
 <template>
diff --git a/packages/layer/app/components/ui/dialog/DialogHeader.vue b/packages/layer/app/components/ui/dialog/DialogHeader.vue
index 3e5c2a7..0f00ab5 100644
--- a/packages/layer/app/components/ui/dialog/DialogHeader.vue
+++ b/packages/layer/app/components/ui/dialog/DialogHeader.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
+import type { HTMLAttributes } from 'vue'
 import { cn } from '~/lib/utils'
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
+  class?: HTMLAttributes['class']
 }>()
 </script>
 
diff --git a/packages/layer/app/components/ui/dialog/DialogOverlay.vue b/packages/layer/app/components/ui/dialog/DialogOverlay.vue
index dd5d3e7..98671d8 100644
--- a/packages/layer/app/components/ui/dialog/DialogOverlay.vue
+++ b/packages/layer/app/components/ui/dialog/DialogOverlay.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import type { DialogOverlayProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { DialogOverlay } from "reka-ui"
+import type { DialogOverlayProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { DialogOverlay } from 'reka-ui'
 import { cn } from '~/lib/utils'
 
-const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes['class'] }>()
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class')
 </script>
 
 <template>
diff --git a/packages/layer/app/components/ui/dialog/DialogScrollContent.vue b/packages/layer/app/components/ui/dialog/DialogScrollContent.vue
index ec6bd10..084edea 100644
--- a/packages/layer/app/components/ui/dialog/DialogScrollContent.vue
+++ b/packages/layer/app/components/ui/dialog/DialogScrollContent.vue
@@ -1,25 +1,25 @@
 <script setup lang="ts">
-import type { DialogContentEmits, DialogContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { X } from "lucide-vue-next"
+import type { DialogContentEmits, DialogContentProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { X } from 'lucide-vue-next'
 import {
   DialogClose,
   DialogContent,
   DialogOverlay,
   DialogPortal,
   useForwardPropsEmits,
-} from "reka-ui"
+} from 'reka-ui'
 import { cn } from '~/lib/utils'
 
 defineOptions({
   inheritAttrs: false,
 })
 
-const props = defineProps<DialogContentProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<DialogContentEmits>()
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class')
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
diff --git a/packages/layer/app/components/ui/dialog/DialogTitle.vue b/packages/layer/app/components/ui/dialog/DialogTitle.vue
index fcf9f8a..787cd09 100644
--- a/packages/layer/app/components/ui/dialog/DialogTitle.vue
+++ b/packages/layer/app/components/ui/dialog/DialogTitle.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import type { DialogTitleProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { DialogTitle, useForwardProps } from "reka-ui"
+import type { DialogTitleProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { DialogTitle, useForwardProps } from 'reka-ui'
 import { cn } from '~/lib/utils'
 
-const props = defineProps<DialogTitleProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class')
 
 const forwardedProps = useForwardProps(delegatedProps)
 </script>
diff --git a/packages/layer/app/components/ui/dialog/DialogTrigger.vue b/packages/layer/app/components/ui/dialog/DialogTrigger.vue
index 49667e9..44ea981 100644
--- a/packages/layer/app/components/ui/dialog/DialogTrigger.vue
+++ b/packages/layer/app/components/ui/dialog/DialogTrigger.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { DialogTriggerProps } from "reka-ui"
-import { DialogTrigger } from "reka-ui"
+import type { DialogTriggerProps } from 'reka-ui'
+import { DialogTrigger } from 'reka-ui'
 
 const props = defineProps<DialogTriggerProps>()
 </script>
diff --git a/packages/layer/app/components/ui/dialog/index.ts b/packages/layer/app/components/ui/dialog/index.ts
index 6768b09..baa7d61 100644
--- a/packages/layer/app/components/ui/dialog/index.ts
+++ b/packages/layer/app/components/ui/dialog/index.ts
@@ -1,10 +1,10 @@
-export { default as Dialog } from "./Dialog.vue"
-export { default as DialogClose } from "./DialogClose.vue"
-export { default as DialogContent } from "./DialogContent.vue"
-export { default as DialogDescription } from "./DialogDescription.vue"
-export { default as DialogFooter } from "./DialogFooter.vue"
-export { default as DialogHeader } from "./DialogHeader.vue"
-export { default as DialogOverlay } from "./DialogOverlay.vue"
-export { default as DialogScrollContent } from "./DialogScrollContent.vue"
-export { default as DialogTitle } from "./DialogTitle.vue"
-export { default as DialogTrigger } from "./DialogTrigger.vue"
+export { default as Dialog } from './Dialog.vue'
+export { default as DialogClose } from './DialogClose.vue'
+export { default as DialogContent } from './DialogContent.vue'
+export { default as DialogDescription } from './DialogDescription.vue'
+export { default as DialogFooter } from './DialogFooter.vue'
+export { default as DialogHeader } from './DialogHeader.vue'
+export { default as DialogOverlay } from './DialogOverlay.vue'
+export { default as DialogScrollContent } from './DialogScrollContent.vue'
+export { default as DialogTitle } from './DialogTitle.vue'
+export { default as DialogTrigger } from './DialogTrigger.vue'
diff --git a/packages/layer/app/components/ui/kbd/Kbd.vue b/packages/layer/app/components/ui/kbd/Kbd.vue
index a7f84a0..94409ef 100644
--- a/packages/layer/app/components/ui/kbd/Kbd.vue
+++ b/packages/layer/app/components/ui/kbd/Kbd.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
+import type { HTMLAttributes } from 'vue'
 import { cn } from '~/lib/utils'
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
+  class?: HTMLAttributes['class']
 }>()
 </script>
 
diff --git a/packages/layer/app/components/ui/kbd/KbdGroup.vue b/packages/layer/app/components/ui/kbd/KbdGroup.vue
index 41212d3..5e1b910 100644
--- a/packages/layer/app/components/ui/kbd/KbdGroup.vue
+++ b/packages/layer/app/components/ui/kbd/KbdGroup.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
+import type { HTMLAttributes } from 'vue'
 import { cn } from '~/lib/utils'
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
+  class?: HTMLAttributes['class']
 }>()
 </script>
 
diff --git a/packages/layer/app/components/ui/kbd/index.ts b/packages/layer/app/components/ui/kbd/index.ts
index b613b0c..ea722ab 100644
--- a/packages/layer/app/components/ui/kbd/index.ts
+++ b/packages/layer/app/components/ui/kbd/index.ts
@@ -1,2 +1,2 @@
-export { default as Kbd } from "./Kbd.vue"
-export { default as KbdGroup } from "./KbdGroup.vue"
+export { default as Kbd } from './Kbd.vue'
+export { default as KbdGroup } from './KbdGroup.vue'
diff --git a/packages/layer/nuxt.config.ts b/packages/layer/nuxt.config.ts
index 38ac1bd..7a682bc 100644
--- a/packages/layer/nuxt.config.ts
+++ b/packages/layer/nuxt.config.ts
@@ -1,4 +1,4 @@
-import { createResolver, useNuxt } from '@nuxt/kit'
+import { createResolver, extendViteConfig, useNuxt } from '@nuxt/kit'
 import tailwindcss from '@tailwindcss/vite'
 
 const { resolve } = createResolver(import.meta.url)
@@ -13,9 +13,20 @@ export default defineNuxtConfig({
     '@nuxt/image',
     '@nuxt/icon',
     'nuxt-og-image',
-      '@nuxtjs/robots',
-      'nuxt-og-image',
-      'nuxt-llms',
+    '@nuxtjs/robots',
+    'nuxt-llms',
+    () => {
+      // Update @nuxt/content optimizeDeps options for layer compatibility
+      extendViteConfig((config) => {
+        config.optimizeDeps ||= {}
+        config.optimizeDeps.include ||= []
+        const includes = new Set(config.optimizeDeps.include)
+        includes.add('@nuxt/content > slugify')
+        config.optimizeDeps.include = Array.from(includes).map(id =>
+          id.startsWith('@nuxt/content > ') ? `docs-please > ${id}` : id,
+        )
+      })
+    },
   ],
   devtools: { enabled: true },
   css: [resolve('./app/assets/css/main.css')],
@@ -68,7 +79,10 @@ export default defineNuxtConfig({
       },
     },
   },
-  compatibilityDate: '2025-01-01',
+  experimental: {
+    asyncContext: true,
+  },
+  compatibilityDate: '2025-07-22',
   nitro: {
     prerender: {
       crawlLinks: true,