feat(module)!: remove devtools in favor of compodium (#3380)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

src/runtime/components/Accordion.vue

@@ -3,7 +3,6 @@ import type { AccordionRootProps, AccordionRootEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/accordion'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 import type { DynamicSlots } from '../types/utils'
 
@@ -54,37 +53,6 @@ export type AccordionSlots<T extends { slot?: string }> = {
   content: SlotProps<T>
   body: SlotProps<T>
 } & DynamicSlots<T, SlotProps<T>>
-
-extendDevtoolsMeta({
-  defaultProps: {
-    items: [{
-      label: 'Getting Started',
-      icon: 'i-lucide-info',
-      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
-    }, {
-      label: 'Installation',
-      icon: 'i-lucide-download',
-      disabled: true,
-      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
-    }, {
-      label: 'Theming',
-      icon: 'i-lucide-pipette',
-      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
-    }, {
-      label: 'Layouts',
-      icon: 'i-lucide-layout-dashboard',
-      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
-    }, {
-      label: 'Components',
-      icon: 'i-lucide-layers-3',
-      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
-    }, {
-      label: 'Utilities',
-      icon: 'i-lucide-wrench',
-      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
-    }]
-  }
-})
 </script>
 
 <script setup lang="ts" generic="T extends AccordionItem">

src/runtime/components/Alert.vue

@@ -3,7 +3,6 @@ import type { VariantProps } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/alert'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 import type { AvatarProps, ButtonProps } from '../types'
 
@@ -60,8 +59,6 @@ export interface AlertSlots {
   actions(props?: {}): any
   close(props: { ui: any }): any
 }
-
-extendDevtoolsMeta<AlertProps>({ defaultProps: { title: 'Heads up!' } })
 </script>
 
 <script setup lang="ts">

src/runtime/components/App.vue

@@ -1,7 +1,6 @@
 <script lang="ts">
 import type { ConfigProviderProps, TooltipProviderProps } from 'reka-ui'
 import { localeContextInjectionKey } from '../composables/useLocale'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import type { ToasterProps, Locale } from '../types'
 
 export interface AppProps extends Omit<ConfigProviderProps, 'useId' | 'dir' | 'locale'> {
@@ -17,8 +16,6 @@ export interface AppSlots {
 export default {
   name: 'App'
 }
-
-extendDevtoolsMeta({ ignore: true })
 </script>
 
 <script setup lang="ts">

src/runtime/components/Avatar.vue

@@ -3,7 +3,6 @@ import type { VariantProps } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/avatar'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 
 const appConfigAvatar = _appConfig as AppConfig & { ui: { avatar: Partial<typeof theme> } }
@@ -30,8 +29,6 @@ export interface AvatarProps {
 export interface AvatarSlots {
   default(props?: {}): any
 }
-
-extendDevtoolsMeta<AvatarProps>({ defaultProps: { src: 'https://avatars.githubusercontent.com/u/739984?v=4', alt: 'Benjamin Canac' } })
 </script>
 
 <script setup lang="ts">

src/runtime/components/AvatarGroup.vue

@@ -3,7 +3,6 @@ import type { VariantProps } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/avatar-group'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 
 const appConfigAvatarGroup = _appConfig as AppConfig & { ui: { avatarGroup: Partial<typeof theme> } }
@@ -30,8 +29,6 @@ export interface AvatarGroupProps {
 export interface AvatarGroupSlots {
   default(props?: {}): any
 }
-
-extendDevtoolsMeta({ example: 'AvatarGroupExample' })
 </script>
 
 <script setup lang="ts">

src/runtime/components/Badge.vue

@@ -3,7 +3,6 @@ import type { VariantProps } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/badge'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import type { UseComponentIconsProps } from '../composables/useComponentIcons'
 import { tv } from '../utils/tv'
 import type { AvatarProps } from '../types'
@@ -57,8 +56,6 @@ const ui = computed(() => badge({
   size: buttonGroupSize.value || props.size,
   buttonGroup: orientation.value
 }))
-
-extendDevtoolsMeta({ defaultProps: { label: 'Badge' } })
 </script>
 
 <template>

src/runtime/components/Breadcrumb.vue

@@ -2,7 +2,6 @@
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/breadcrumb'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 import type { AvatarProps, LinkProps } from '../types'
 import type { DynamicSlots, PartialString } from '../types/utils'
@@ -48,31 +47,6 @@ export type BreadcrumbSlots<T extends { slot?: string }> = {
   'item-trailing': SlotProps<T>
   'separator'(props?: {}): any
 } & DynamicSlots<T, SlotProps<T>>
-
-extendDevtoolsMeta({
-  defaultProps: {
-    items: [
-      { label: 'Home', to: '/' },
-      {
-        slot: 'dropdown',
-        icon: 'i-lucide-ellipsis',
-        children: [{
-          label: 'Documentation'
-        }, {
-          label: 'Themes'
-        }, {
-          label: 'GitHub'
-        }]
-      }, {
-        label: 'Components',
-        disabled: true
-      }, {
-        label: 'Breadcrumb',
-        to: '/components/breadcrumb'
-      }
-    ]
-  }
-})
 </script>
 
 <script setup lang="ts" generic="T extends BreadcrumbItem">

src/runtime/components/Button.vue

@@ -5,7 +5,6 @@ import _appConfig from '#build/app.config'
 import theme from '#build/ui/button'
 import type { LinkProps } from './Link.vue'
 import type { UseComponentIconsProps } from '../composables/useComponentIcons'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 import type { AvatarProps } from '../types'
 import type { PartialString } from '../types/utils'
@@ -32,9 +31,6 @@ export interface ButtonProps extends UseComponentIconsProps, Omit<LinkProps, 'ra
   ui?: PartialString<typeof button.slots>
 }
 
-// Injects props to use as default in the devtools playground.
-extendDevtoolsMeta<ButtonProps>({ defaultProps: { label: 'Click me!' } })
-
 export interface ButtonSlots {
   leading(props?: {}): any
   default(props?: {}): any

src/runtime/components/ButtonGroup.vue

@@ -3,7 +3,6 @@ import type { VariantProps } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/button-group'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 
 const appConfigButtonGroup = _appConfig as AppConfig & { ui: { buttonGroup: Partial<typeof theme> } }
@@ -30,8 +29,6 @@ export interface ButtonGroupProps {
 export interface ButtonGroupSlots {
   default(props?: {}): any
 }
-
-extendDevtoolsMeta({ example: 'ButtonGroupExample' })
 </script>
 
 <script setup lang="ts">

src/runtime/components/Card.vue

@@ -3,7 +3,6 @@ import type { VariantProps } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/card'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 
 const appConfigCard = _appConfig as AppConfig & { ui: { card: Partial<typeof theme> } }
@@ -28,8 +27,6 @@ export interface CardSlots {
   default(props?: {}): any
   footer(props?: {}): any
 }
-
-extendDevtoolsMeta({ example: 'CardExample' })
 </script>
 
 <script setup lang="ts">

src/runtime/components/Carousel.vue

@@ -11,7 +11,6 @@ import type { FadeOptionsType } from 'embla-carousel-fade'
 import type { WheelGesturesPluginOptions } from 'embla-carousel-wheel-gestures'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/carousel'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 import type { ButtonProps } from '../types'
 import type { PartialString } from '../types/utils'
@@ -97,8 +96,6 @@ export interface CarouselProps<T> extends Omit<EmblaOptionsType, 'axis' | 'conta
 export type CarouselSlots<T> = {
   default(props: { item: T, index: number }): any
 }
-
-extendDevtoolsMeta({ example: 'CarouselExample' })
 </script>
 
 <script setup lang="ts" generic="T extends AcceptableValue">

src/runtime/components/Checkbox.vue

@@ -4,7 +4,6 @@ import type { CheckboxRootProps } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/checkbox'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 
 const appConfigCheckbox = _appConfig as AppConfig & { ui: { checkbox: Partial<typeof theme> } }
@@ -45,8 +44,6 @@ export interface CheckboxSlots {
   label(props: { label?: string }): any
   description(props: { description?: string }): any
 }
-
-extendDevtoolsMeta({ defaultProps: { label: 'Check me!' } })
 </script>
 
 <script setup lang="ts">

src/runtime/components/Chip.vue

@@ -3,7 +3,6 @@ import type { VariantProps } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/chip'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 
 const appConfigChip = _appConfig as AppConfig & { ui: { chip: Partial<typeof theme> } }
@@ -39,8 +38,6 @@ export interface ChipSlots {
   default(props?: {}): any
   content(props?: {}): any
 }
-
-extendDevtoolsMeta({ example: 'ChipExample' })
 </script>
 
 <script setup lang="ts">

src/runtime/components/Collapsible.vue

@@ -3,7 +3,6 @@ import type { CollapsibleRootProps, CollapsibleRootEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/collapsible'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 
 const appConfigCollapsible = _appConfig as AppConfig & { ui: { collapsible: Partial<typeof theme> } }
@@ -26,8 +25,6 @@ export interface CollapsibleSlots {
   default(props: { open: boolean }): any
   content(props?: {}): any
 }
-
-extendDevtoolsMeta({ example: 'CollapsibleExample' })
 </script>
 
 <script setup lang="ts">

src/runtime/components/CommandPalette.vue

@@ -6,7 +6,6 @@ import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/command-palette'
 import type { UseComponentIconsProps } from '../composables/useComponentIcons'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 import type { AvatarProps, ButtonProps, ChipProps, KbdProps, InputProps, LinkProps } from '../types'
 import type { DynamicSlots, PartialString } from '../types/utils'
@@ -122,8 +121,6 @@ export type CommandPaletteSlots<G extends { slot?: string }, T extends { slot?:
   'item-label': SlotProps<T>
   'item-trailing': SlotProps<T>
 } & DynamicSlots<G, SlotProps<T>> & DynamicSlots<T, SlotProps<T>>
-
-extendDevtoolsMeta({ example: 'CommandPaletteExample', ignoreProps: ['groups'] })
 </script>
 
 <script setup lang="ts" generic="G extends CommandPaletteGroup<T>, T extends CommandPaletteItem">

src/runtime/components/Container.vue

@@ -2,7 +2,6 @@
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/container'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 
 const appConfigContainer = _appConfig as AppConfig & { ui: { container: Partial<typeof theme> } }
@@ -21,8 +20,6 @@ export interface ContainerProps {
 export interface ContainerSlots {
   default(props?: {}): any
 }
-
-extendDevtoolsMeta({ example: 'ContainerExample' })
 </script>
 
 <script setup lang="ts">

src/runtime/components/ContextMenu.vue

@@ -4,7 +4,6 @@ import type { ContextMenuRootProps, ContextMenuRootEmits, ContextMenuContentProp
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/context-menu'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 import type { AvatarProps, KbdProps, LinkProps } from '../types'
 import type { DynamicSlots, PartialString } from '../types/utils'
@@ -85,67 +84,6 @@ export type ContextMenuSlots<T extends { slot?: string }> = {
   'item-label': SlotProps<T>
   'item-trailing': SlotProps<T>
 } & DynamicSlots<T, SlotProps<T>>
-
-extendDevtoolsMeta({
-  example: 'ContextMenuExample',
-  ignoreProps: ['items'],
-  defaultProps: {
-    items: [
-      [{
-        label: 'My account',
-        avatar: {
-          src: 'https://avatars.githubusercontent.com/u/739984?v=4'
-        }
-      }],
-      [{
-        label: 'Appearance',
-        children: [{
-          label: 'System',
-          icon: 'i-lucide-monitor'
-        }, {
-          label: 'Light',
-          icon: 'i-lucide-sun'
-        }, {
-          label: 'Dark',
-          icon: 'i-lucide-moon'
-        }]
-      }],
-      [{
-        label: 'Show Sidebar',
-        kbds: ['meta', 'S']
-      }, {
-        label: 'Show Toolbar',
-        kbds: ['shift', 'meta', 'D']
-      }, {
-        label: 'Collapse Pinned Tabs',
-        disabled: true
-      }], [{
-        label: 'Refresh the Page'
-      }, {
-        label: 'Clear Cookies and Refresh'
-      }, {
-        label: 'Clear Cache and Refresh'
-      }, {
-        type: 'separator'
-      }, {
-        label: 'Developer',
-        children: [[{
-          label: 'View Source',
-          kbds: ['option', 'meta', 'U']
-        }, {
-          label: 'Developer Tools',
-          kbds: ['option', 'meta', 'I']
-        }], [{
-          label: 'Inspect Elements',
-          kbds: ['option', 'meta', 'C']
-        }], [{
-          label: 'JavaScript Console',
-          kbds: ['option', 'meta', 'J']
-        }]]
-      }]
-    ]
-  }
-})
 </script>
 
 <script setup lang="ts" generic="T extends ContextMenuItem">

src/runtime/components/Drawer.vue

@@ -4,7 +4,6 @@ import type { DialogContentProps } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/drawer'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 
 const appConfigDrawer = _appConfig as AppConfig & { ui: { drawer: Partial<typeof theme> } }
@@ -62,8 +61,6 @@ export interface DrawerSlots {
   body(props?: {}): any
   footer(props?: {}): any
 }
-
-extendDevtoolsMeta({ example: 'DrawerExample' })
 </script>
 
 <script setup lang="ts">

src/runtime/components/DropdownMenu.vue

@@ -4,7 +4,6 @@ import type { DropdownMenuRootProps, DropdownMenuRootEmits, DropdownMenuContentP
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/dropdown-menu'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 import type { AvatarProps, KbdProps, LinkProps } from '../types'
 import type { DynamicSlots, PartialString } from '../types/utils'
@@ -93,55 +92,6 @@ export type DropdownMenuSlots<T extends { slot?: string }> = {
   'item-label': SlotProps<T>
   'item-trailing': SlotProps<T>
 } & DynamicSlots<T, SlotProps<T>>
-
-extendDevtoolsMeta({
-  example: 'DropdownMenuExample',
-  ignoreProps: ['items'],
-  defaultProps: {
-    items: [
-      [{
-        label: 'My account',
-        avatar: {
-          src: 'https://avatars.githubusercontent.com/u/739984?v=4'
-        },
-        type: 'label'
-      }], [{
-        label: 'Profile',
-        icon: 'i-lucide-user',
-        slot: 'custom'
-      }, {
-        label: 'Billing',
-        icon: 'i-lucide-credit-card',
-        kbds: ['meta', 'b']
-      }, {
-        label: 'Settings',
-        icon: 'i-lucide-cog',
-        kbds: ['?']
-      }], [{
-        label: 'Invite users',
-        icon: 'i-lucide-user-plus',
-        children: [[{
-          label: 'Invite by email',
-          icon: 'i-lucide-send-horizontal'
-        }, {
-          label: 'Invite by link',
-          icon: 'i-lucide-link',
-          kbds: ['meta', 'i']
-        }]]
-      }],
-      [{
-        label: 'GitHub',
-        icon: 'i-simple-icons-github',
-        to: 'https://github.com/nuxt/ui',
-        target: '_blank'
-      }, {
-        label: 'Support',
-        icon: 'i-lucide-life-buoy',
-        to: '/components/dropdown-menu'
-      }]
-    ]
-  }
-})
 </script>
 
 <script setup lang="ts" generic="T extends DropdownMenuItem">

src/runtime/components/Form.vue

@@ -2,7 +2,6 @@
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/form'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 import type { FormSchema, FormError, FormInputEvents, FormErrorEvent, FormSubmitEvent, FormEvent, Form, FormErrorWithId } from '../types/form'
 import type { DeepReadonly } from 'vue'
@@ -32,8 +31,6 @@ export interface FormEmits<T extends object> {
 export interface FormSlots {
   default(props?: {}): any
 }
-
-extendDevtoolsMeta({ example: 'FormExample' })
 </script>
 
 <script lang="ts" setup generic="T extends object">

src/runtime/components/FormField.vue

@@ -4,7 +4,6 @@ import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/form-field'
 import { tv } from '../utils/tv'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 
 const appConfigFormField = _appConfig as AppConfig & { ui: { formField: Partial<typeof theme> } }
 
@@ -43,8 +42,6 @@ export interface FormFieldSlots {
   error(props: { error?: string | boolean }): any
   default(props: { error?: string | boolean }): any
 }
-
-extendDevtoolsMeta({ example: 'FormFieldExample', defaultProps: { label: 'Label' } })
 </script>
 
 <script setup lang="ts">

src/runtime/components/InputMenu.vue

@@ -6,7 +6,6 @@ import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/input-menu'
 import type { UseComponentIconsProps } from '../composables/useComponentIcons'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 import type { AvatarProps, ChipProps, InputProps } from '../types'
 import type { PartialString, MaybeArrayOfArray, MaybeArrayOfArrayItem, SelectModelValue, SelectModelValueEmits, SelectItemKey } from '../types/utils'
@@ -137,8 +136,6 @@ export interface InputMenuSlots<T, M extends boolean> {
   'tags-item-delete': SlotProps<T>
   'create-item-label'(props: { item: string }): any
 }
-
-extendDevtoolsMeta({ defaultProps: { items: ['Option 1', 'Option 2', 'Option 3'] } })
 </script>
 
 <script setup lang="ts" generic="T extends MaybeArrayOfArrayItem<I>, I extends MaybeArrayOfArray<InputMenuItem | AcceptableValue | boolean> = MaybeArrayOfArray<InputMenuItem | AcceptableValue | boolean>, V extends SelectItemKey<T> | undefined = undefined, M extends boolean = false">

src/runtime/components/Kbd.vue

@@ -4,7 +4,6 @@ import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/kbd'
 import type { KbdKey } from '../composables/useKbd'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 
 const appConfigKbd = _appConfig as AppConfig & { ui: { kbd: Partial<typeof theme> } }
@@ -28,7 +27,6 @@ export interface KbdProps {
 export interface KbdSlots {
   default(props?: {}): any
 }
-extendDevtoolsMeta({ defaultProps: { value: 'K' } })
 </script>
 
 <script setup lang="ts">

src/runtime/components/Link.vue

@@ -5,7 +5,6 @@ import _appConfig from '#build/app.config'
 import type { RouterLinkProps, RouteLocationRaw } from 'vue-router'
 import theme from '#build/ui/link'
 import { tv } from '../utils/tv'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 
 interface NuxtLinkProps extends Omit<RouterLinkProps, 'to'> {
   /**
@@ -88,8 +87,6 @@ export interface LinkProps extends NuxtLinkProps {
 export interface LinkSlots {
   default(props: { active: boolean }): any
 }
-
-extendDevtoolsMeta({ example: 'LinkExample' })
 </script>
 
 <script setup lang="ts">

src/runtime/components/Modal.vue

@@ -3,7 +3,6 @@ import type { DialogRootProps, DialogRootEmits, DialogContentProps } from 'reka-
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/modal'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 import type { ButtonProps } from '../types'
 
@@ -70,8 +69,6 @@ export interface ModalSlots {
   body(props?: {}): any
   footer(props?: {}): any
 }
-
-extendDevtoolsMeta({ example: 'ModalExample' })
 </script>
 
 <script setup lang="ts">

src/runtime/components/NavigationMenu.vue

@@ -4,7 +4,6 @@ import type { NavigationMenuRootProps, NavigationMenuRootEmits, NavigationMenuCo
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/navigation-menu'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 import type { AvatarProps, BadgeProps, LinkProps } from '../types'
 import type { DynamicSlots, MaybeArrayOfArray, MaybeArrayOfArrayItem, PartialString } from '../types/utils'
@@ -109,45 +108,6 @@ export type NavigationMenuSlots<T extends { slot?: string }> = {
   'item-trailing': SlotProps<T>
   'item-content': SlotProps<T>
 } & DynamicSlots<T, SlotProps<T>>
-
-extendDevtoolsMeta({
-  ignoreProps: ['items'],
-  defaultProps: {
-    items: [
-      [{
-        label: 'Documentation',
-        icon: 'i-lucide-book-open',
-        badge: 10,
-        children: [{
-          label: 'Introduction',
-          description: 'Fully styled and customizable components for Nuxt.',
-          icon: 'i-lucide-house'
-        }, {
-          label: 'Installation',
-          description: 'Learn how to install and configure Nuxt UI in your application.',
-          icon: 'i-lucide-cloud-download'
-        }, {
-          label: 'Theming',
-          description: 'Learn how to customize the look and feel of the components.',
-          icon: 'i-lucide-swatch-book'
-        }, {
-          label: 'Shortcuts',
-          description: 'Learn how to display and define keyboard shortcuts in your app.',
-          icon: 'i-lucide-monitor'
-        }]
-      }, {
-        label: 'GitHub',
-        icon: 'i-simple-icons-github',
-        to: 'https://github.com/nuxt/ui',
-        target: '_blank'
-      }, {
-        label: 'Help',
-        icon: 'i-lucide-circle-help',
-        disabled: true
-      }]
-    ]
-  }
-})
 </script>
 
 <script setup lang="ts" generic="T extends MaybeArrayOfArrayItem<I>, I extends MaybeArrayOfArray<NavigationMenuItem>">

src/runtime/components/Pagination.vue

@@ -4,7 +4,6 @@ import type { AppConfig } from '@nuxt/schema'
 import type { RouteLocationRaw } from '#vue-router'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/pagination'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 import type { ButtonProps } from '../types'
 
@@ -98,8 +97,6 @@ export interface PaginationSlots {
     index: number
   }): any
 }
-
-extendDevtoolsMeta({ defaultProps: { total: 50 } })
 </script>
 
 <script setup lang="ts">

src/runtime/components/Popover.vue

@@ -4,7 +4,6 @@ import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/popover'
 import { tv } from '../utils/tv'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 
 const appConfigPopover = _appConfig as AppConfig & { ui: { popover: Partial<typeof theme> } }
 
@@ -46,8 +45,6 @@ export interface PopoverSlots {
   default(props: { open: boolean }): any
   content(props?: {}): any
 }
-
-extendDevtoolsMeta({ example: 'PopoverExample' })
 </script>
 
 <script setup lang="ts">

src/runtime/components/RadioGroup.vue

@@ -4,7 +4,6 @@ import type { RadioGroupRootProps, RadioGroupRootEmits, AcceptableValue } from '
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/radio-group'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 
 const appConfigRadioGroup = _appConfig as AppConfig & { ui: { radioGroup: Partial<typeof theme> } }
@@ -65,8 +64,6 @@ export interface RadioGroupSlots<T> {
   label: SlotProps<T>
   description: SlotProps<T>
 }
-
-extendDevtoolsMeta({ defaultProps: { items: ['Option 1', 'Option 2', 'Option 3'] } })
 </script>
 
 <script setup lang="ts" generic="T extends RadioGroupItem | AcceptableValue">

src/runtime/components/Select.vue

@@ -5,7 +5,6 @@ import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/select'
 import type { UseComponentIconsProps } from '../composables/useComponentIcons'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 import type { AvatarProps, ChipProps, InputProps } from '../types'
 import type { PartialString, MaybeArrayOfArray, MaybeArrayOfArrayItem, SelectModelValue, SelectModelValueEmits, SelectItemKey } from '../types/utils'
@@ -102,8 +101,6 @@ export interface SelectSlots<T, M extends boolean> {
   'item-label': SlotProps<T>
   'item-trailing': SlotProps<T>
 }
-
-extendDevtoolsMeta({ defaultProps: { items: ['Option 1', 'Option 2', 'Option 3'] } })
 </script>
 
 <script setup lang="ts" generic="T extends MaybeArrayOfArrayItem<I>, I extends MaybeArrayOfArray<SelectItem | AcceptableValue | boolean> = MaybeArrayOfArray<SelectItem | AcceptableValue | boolean>, V extends SelectItemKey<T> | undefined = undefined, M extends boolean = false">

src/runtime/components/SelectMenu.vue

@@ -5,7 +5,6 @@ import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/select-menu'
 import type { UseComponentIconsProps } from '../composables/useComponentIcons'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 import type { AvatarProps, ChipProps, InputProps } from '../types'
 import type { PartialString, MaybeArrayOfArray, MaybeArrayOfArrayItem, SelectModelValue, SelectModelValueEmits, SelectItemKey } from '../types/utils'
@@ -128,8 +127,6 @@ export interface SelectMenuSlots<T, M extends boolean> {
   'item-trailing': SlotProps<T>
   'create-item-label'(props: { item: string }): any
 }
-
-extendDevtoolsMeta({ defaultProps: { items: ['Option 1', 'Option 2', 'Option 3'] } })
 </script>
 
 <script setup lang="ts" generic="T extends MaybeArrayOfArrayItem<I>, I extends MaybeArrayOfArray<SelectMenuItem | AcceptableValue | boolean> = MaybeArrayOfArray<SelectMenuItem | AcceptableValue | boolean>, V extends SelectItemKey<T> | undefined = undefined, M extends boolean = false">

src/runtime/components/Skeleton.vue

@@ -3,7 +3,6 @@ import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/skeleton'
 import { tv } from '../utils/tv'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 
 const appConfigSkeleton = _appConfig as AppConfig & { ui: { skeleton: Partial<typeof theme> } }
 
@@ -17,8 +16,6 @@ export interface SkeletonProps {
   as?: any
   class?: any
 }
-
-extendDevtoolsMeta({ example: 'SkeletonExample' })
 </script>
 
 <script setup lang="ts">

src/runtime/components/Slideover.vue

@@ -4,7 +4,6 @@ import type { DialogRootProps, DialogRootEmits, DialogContentProps } from 'reka-
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/slideover'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 import type { ButtonProps } from '../types'
 
@@ -69,8 +68,6 @@ export interface SlideoverSlots {
   body(props?: {}): any
   footer(props?: {}): any
 }
-
-extendDevtoolsMeta({ example: 'SlideoverExample' })
 </script>
 
 <script setup lang="ts">

src/runtime/components/Stepper.vue

@@ -4,7 +4,6 @@ import type { StepperRootProps, StepperRootEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/stepper'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 import type { DynamicSlots } from '../types/utils'
 
@@ -56,8 +55,6 @@ export type StepperSlots<T extends StepperItem> = {
   description: SlotProps<T>
   content: SlotProps<T>
 } & DynamicSlots<T, SlotProps<T>>
-
-extendDevtoolsMeta({ example: 'StepperExample' })
 </script>
 
 <script setup lang="ts" generic="T extends StepperItem">

src/runtime/components/Switch.vue

@@ -4,7 +4,6 @@ import type { SwitchRootProps } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/switch'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 import type { PartialString } from '../types/utils'
 
@@ -47,8 +46,6 @@ export interface SwitchSlots {
   label(props: { label?: string }): any
   description(props: { description?: string }): any
 }
-
-extendDevtoolsMeta({ defaultProps: { label: 'Switch me!' } })
 </script>
 
 <script setup lang="ts">

src/runtime/components/Tabs.vue

@@ -4,7 +4,6 @@ import type { TabsRootProps, TabsRootEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/tabs'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 import type { AvatarProps } from '../types'
 import type { DynamicSlots, PartialString } from '../types/utils'
@@ -65,24 +64,6 @@ export type TabsSlots<T extends { slot?: string }> = {
   trailing: SlotProps<T>
   content: SlotProps<T>
 } & DynamicSlots<T, SlotProps<T>>
-
-extendDevtoolsMeta({
-  defaultProps: {
-    items: [{
-      label: 'Tab1',
-      avatar: { src: 'https://avatars.githubusercontent.com/u/739984?v=4' },
-      content: 'This is the content shown for Tab1'
-    }, {
-      label: 'Tab2',
-      icon: 'i-lucide-user',
-      content: 'And, this is the content for Tab2'
-    }, {
-      label: 'Tab3',
-      icon: 'i-lucide-bell',
-      content: 'Finally, this is the content for Tab3'
-    }]
-  }
-})
 </script>
 
 <script setup lang="ts" generic="T extends TabsItem">

src/runtime/components/Toast.vue

@@ -4,7 +4,6 @@ import type { ToastRootProps, ToastRootEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/toast'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 import type { AvatarProps, ButtonProps } from '../types'
 import type { StringOrVNode } from '../types/utils'
@@ -58,8 +57,6 @@ export interface ToastSlots {
   actions(props?: {}): any
   close(props: { ui: any }): any
 }
-
-extendDevtoolsMeta<ToastProps>({ ignore: true })
 </script>
 
 <script setup lang="ts">

src/runtime/components/Toaster.vue

@@ -4,7 +4,6 @@ import type { ToastProviderProps } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/toaster'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 
 const appConfigToaster = _appConfig as AppConfig & { ui: { toaster: Partial<typeof theme> } }
@@ -36,8 +35,6 @@ export interface ToasterSlots {
 export default {
   name: 'Toaster'
 }
-
-extendDevtoolsMeta({ example: 'ToasterExample' })
 </script>
 
 <script setup lang="ts">

src/runtime/components/Tooltip.vue

@@ -3,7 +3,6 @@ import type { TooltipRootProps, TooltipRootEmits, TooltipContentProps, TooltipAr
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/tooltip'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 import type { KbdProps } from '../types'
 
@@ -41,8 +40,6 @@ export interface TooltipSlots {
   default(props: { open: boolean }): any
   content(props?: {}): any
 }
-
-extendDevtoolsMeta({ example: 'TooltipExample', defaultProps: { text: 'Hello world!' } })
 </script>
 
 <script setup lang="ts">

src/runtime/components/Tree.vue

@@ -4,7 +4,6 @@ import type { TreeRootProps, TreeRootEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/tree'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 import type { PartialString, DynamicSlots, MaybeMultipleModelValue, SelectItemKey } from '../types/utils'
 
@@ -83,41 +82,6 @@ export type TreeSlots<T extends { slot?: string }> = {
   'item-label': SlotProps<T>
   'item-trailing': SlotProps<T>
 } & DynamicSlots<T, SlotProps<T>>
-
-extendDevtoolsMeta({ defaultProps: {
-  items: [
-    {
-      label: 'app',
-      icon: 'i-lucide-folder',
-      defaultExpanded: true,
-      children: [{
-        label: 'composables',
-        icon: 'i-lucide-folder',
-        defaultExpanded: true,
-        children: [
-          { label: 'useAuth.ts', icon: 'vscode-icons:file-type-typescript' },
-          { label: 'useUser.ts', icon: 'vscode-icons:file-type-typescript' }
-        ]
-      },
-      {
-        label: 'components',
-        icon: 'i-lucide-folder',
-        children: [
-          {
-            label: 'Home',
-            icon: 'i-lucide-folder',
-            children: [
-              { label: 'Card.vue', icon: 'vscode-icons:file-type-vue' },
-              { label: 'Button.vue', icon: 'vscode-icons:file-type-vue' }
-            ]
-          }
-        ]
-      }]
-    },
-    { label: 'app.vue', icon: 'vscode-icons:file-type-vue' },
-    { label: 'nuxt.config.ts', icon: 'vscode-icons:file-type-nuxt' }
-  ]
-} })
 </script>
 
 <script setup lang="ts" generic="T extends TreeItem, M extends boolean = false, K extends SelectItemKey<T> | undefined = undefined">