chore: lint

antfu · antfu · commit b3754b8c06be · 2025-06-29T18:48:07.000+09:00
diff --git a/packages/devtools-kit/src/_types/common.ts b/packages/devtools-kit/src/_types/common.ts
@@ -1,9 +1,9 @@
-export type TabCategory =
-  | 'pinned'
-  | 'app'
-  | 'vue-devtools'
-  | 'analyze'
-  | 'server'
-  | 'modules'
-  | 'documentation'
-  | 'advanced'
+export type TabCategory
+  = | 'pinned'
+    | 'app'
+    | 'vue-devtools'
+    | 'analyze'
+    | 'server'
+    | 'modules'
+    | 'documentation'
+    | 'advanced'
diff --git a/packages/devtools-ui-kit/playground/components/ShowSource.vue b/packages/devtools-ui-kit/playground/components/ShowSource.vue
@@ -19,7 +19,7 @@ watch(show, async () => {
 
 <template>
   <div class="mt-2">
-    <span n="xs" class="n-link cursor-pointer text-gray n-transition hover:n-link-hover n-link-base" @click="show = !show">
+    <span n="xs" class="n-link cursor-pointer text-gray n-link-base n-transition hover:n-link-hover" @click="show = !show">
       {{ show ? 'Hide' : 'Show' }} source
     </span>
     <div v-if="show" ref="embed" class="dark:filter-invert-100" />
diff --git a/packages/devtools-ui-kit/playground/pages/index.vue b/packages/devtools-ui-kit/playground/pages/index.vue
@@ -7,8 +7,8 @@ const radio = ref('a')
 </script>
 
 <template>
-  <div class="relative p-10 n-bg-base">
-    <div class="mx-auto w-full flex flex-col gap-4 container">
+  <div class="relative n-bg-base p-10">
+    <div class="container mx-auto w-full flex flex-col gap-4">
       <NTip n="hover:yellow-600 dark:hover:yellow-500">
         This library is heavily working in progress. Breaking changes may not follow semver. Pin the version if used.
       </NTip>
diff --git a/packages/devtools-ui-kit/src/components/NCheckbox.vue b/packages/devtools-ui-kit/src/components/NCheckbox.vue
@@ -17,7 +17,7 @@ const checked = useVModel(props, 'modelValue', emit, { passive: true })
 
 <template>
   <label
-    class="n-checkbox hover:n-checkbox-hover select-none items-center n-disabled:n-disabled"
+    class="n-checkbox select-none items-center hover:n-checkbox-hover n-disabled:n-disabled"
     :checked="checked || null"
     :disabled="disabled || null"
   >
@@ -28,7 +28,7 @@ const checked = useVModel(props, 'modelValue', emit, { passive: true })
       :disabled="disabled"
       @keypress.enter="checked = !checked"
     >
-    <span class="n-checkbox-box n-checked:n-checkbox-box-checked peer-active:n-active-base peer-focus-visible:n-focus-base n-transition">
+    <span class="n-checkbox-box n-transition n-checked:n-checkbox-box-checked peer-active:n-active-base peer-focus-visible:n-focus-base">
       <NIcon class="n-checkbox-icon scale-0 transform op0 n-transition n-checked:scale-100 n-checked:op100" />
     </span>
     <span :class="checked ? '' : 'op50'" class="n-transition"><slot /></span>
diff --git a/packages/devtools-ui-kit/src/components/NDialog.vue b/packages/devtools-ui-kit/src/components/NDialog.vue
@@ -59,7 +59,7 @@ export default {
   <Teleport v-if="shown" to="body">
     <div
       v-show="show"
-      class="fixed inset-0 z-100 flex items-center justify-center n-transition n-glass-effect"
+      class="fixed inset-0 z-100 flex items-center justify-center n-glass-effect n-transition"
       role="dialog"
       aria-modal="true"
       :class="[
diff --git a/packages/devtools-ui-kit/src/components/NDrawer.vue b/packages/devtools-ui-kit/src/components/NDrawer.vue
@@ -61,7 +61,7 @@ const transitionType = {
       :border="`${transition === 'right' ? 'l' : transition === 'bottom' ? 't' : 'b'} base`"
       flex="~ col gap-1"
       :class="{ 'right-0': transition === 'right' || transition === 'bottom' }"
-      absolute bottom-0 z-10 z-20 of-auto text-sm n-glass-effect
+      absolute bottom-0 z-10 z-20 of-auto n-glass-effect text-sm
       :style="{
         top: transition === 'bottom' ? 'auto' : `${height}px`,
         left: transition === 'right' && !width ? 'auto' : `${width}px`,
diff --git a/packages/devtools-ui-kit/src/components/NDropdown.vue b/packages/devtools-ui-kit/src/components/NDropdown.vue
@@ -27,7 +27,7 @@ onClickOutside(el, () => {
     </slot>
 
     <div
-      class="absolute z-10 border n-border-base rounded shadow n-transition n-bg-base"
+      class="absolute z-10 border n-border-base rounded n-bg-base shadow n-transition"
       :class="[enabled ? 'op-100' : 'op0 pointer-events-none -translate-y-1', direction === 'end' ? 'right-0' : 'left-0']"
     >
       <slot />
diff --git a/packages/devtools-ui-kit/src/components/NNavbar.vue b/packages/devtools-ui-kit/src/components/NNavbar.vue
@@ -14,7 +14,7 @@ function update(event: any) {
 </script>
 
 <template>
-  <div flex="~ col gap2 wrap" border="b base" flex-1 n-navbar-glass :class="[{ p4: !noPadding }]">
+  <div flex="~ col gap2 wrap" border="b base" n-navbar-glass flex-1 :class="[{ p4: !noPadding }]">
     <div flex="~ gap4 wrap" items-center>
       <slot name="search">
         <NTextInput
diff --git a/packages/devtools-ui-kit/src/components/NNotification.vue b/packages/devtools-ui-kit/src/components/NNotification.vue
@@ -36,7 +36,7 @@ devtoolsUiProvideNotificationFn((data) => {
       <div
         border="~ base"
         flex="~ inline gap2"
-        m-3 inline-block items-center rounded px-4 py-1 transition-all duration-300 bg-base
+        m-3 inline-block items-center rounded bg-base px-4 py-1 transition-all duration-300
         :style="show ? {} : { transform: `translateY(${position.startsWith('top') ? '-' : ''}300%)` }"
         :class="[show ? 'shadow' : 'shadow-none', classes]"
       >
diff --git a/packages/devtools-ui-kit/src/components/NRadio.vue b/packages/devtools-ui-kit/src/components/NRadio.vue
@@ -19,7 +19,7 @@ const model = useVModel(props, 'modelValue', emit, { passive: true })
 
 <template>
   <label
-    class="n-radio inline-flex hover:n-radio-hover select-none items-center n-disabled:n-disabled"
+    class="n-radio inline-flex select-none items-center hover:n-radio-hover n-disabled:n-disabled"
     :checked="model === value || null"
     :disabled="disabled || null"
   >
@@ -32,8 +32,8 @@ const model = useVModel(props, 'modelValue', emit, { passive: true })
       :value="value"
       @keypress.enter="model = value!"
     >
-    <span class="n-radio-box n-checked:n-radio-box-checked peer-active:n-active-base peer-focus-visible:n-focus-base n-transition">
-      <div class="n-radio-inner n-checked:n-radio-inner-checked n-transition" />
+    <span class="n-radio-box n-transition n-checked:n-radio-box-checked peer-active:n-active-base peer-focus-visible:n-focus-base">
+      <div class="n-radio-inner n-transition n-checked:n-radio-inner-checked" />
     </span>
     <span><slot /></span>
   </label>
diff --git a/packages/devtools-ui-kit/src/components/NSectionBlock.vue b/packages/devtools-ui-kit/src/components/NSectionBlock.vue
@@ -31,7 +31,7 @@ function onToggle(e: any) {
   <!-- @vue-ignore -->
   <details :open="open" @toggle="(onToggle as any)">
     <summary
-      class="cursor-pointer select-none hover:bg-active p4"
+      class="cursor-pointer select-none p4 hover:bg-active"
       :class="collapse ? '' : 'pointer-events-none'"
     >
       <NIconTitle :icon="icon" :text="text" text-xl transition :class="[open ? 'op100' : 'op60', headerClass]">
diff --git a/packages/devtools-ui-kit/src/components/NSelect.vue b/packages/devtools-ui-kit/src/components/NSelect.vue
@@ -21,7 +21,7 @@ const input = useVModel(props, 'modelValue', emit, { passive: true })
 
 <template>
   <div
-    class="n-select flex flex items-center border rounded px-2 py-1 focus-within:n-focus-base focus-within:border-context n-bg-base"
+    class="n-select flex flex items-center border rounded n-bg-base px-2 py-1 focus-within:border-context focus-within:n-focus-base"
     :class="disabled ? 'border-gray:10' : 'n-border-base'"
   >
     <slot name="icon">
diff --git a/packages/devtools-ui-kit/src/components/NSelectTabs.vue b/packages/devtools-ui-kit/src/components/NSelectTabs.vue
@@ -24,7 +24,7 @@ const input = useVModel(props, 'modelValue', emit, { passive: true })
       v-for="i, idx of options"
       :key="i.label"
       :disabled="disabled"
-      class="relative n-border-base hover:n-bg-active px-0.5em py-0.1em"
+      class="relative n-border-base px-0.5em py-0.1em hover:n-bg-active"
       :class="[
         idx ? 'border-l n-border-base ml--1px' : '',
         i.value === input ? 'n-bg-active' : '',
diff --git a/packages/devtools-ui-kit/src/components/NSwitch.vue b/packages/devtools-ui-kit/src/components/NSwitch.vue
@@ -26,8 +26,8 @@ const checked = defineModel('modelValue', {
       :disabled="disabled"
       @keypress.enter="checked = !checked"
     >
-    <div class="n-switch-slider n-checked:n-switch-slider-checked peer-active:n-active-base peer-focus-visible:n-focus-base n-transition">
-      <div class="n-checked:n-switch-thumb-checked n-switch-thumb n-transition" />
+    <div class="n-switch-slider n-transition n-checked:n-switch-slider-checked peer-active:n-active-base peer-focus-visible:n-focus-base">
+      <div class="n-switch-thumb n-transition n-checked:n-switch-thumb-checked" />
     </div>
     <slot />
   </label>
diff --git a/packages/devtools-ui-kit/src/components/NTextInput.vue b/packages/devtools-ui-kit/src/components/NTextInput.vue
@@ -27,7 +27,7 @@ const input = useVModel(props, 'modelValue', emit, { passive: true })
 </script>
 
 <template>
-  <div class="n-text-input flex flex items-center border n-border-base rounded py-1 pl-1 pr-2 focus-within:n-focus-base focus-within:border-context n-bg-base">
+  <div class="n-text-input flex flex items-center border n-border-base rounded n-bg-base py-1 pl-1 pr-2 focus-within:border-context focus-within:n-focus-base">
     <slot name="icon">
       <NIcon v-if="icon" :icon="icon" class="ml-0.3em mr-0.1em text-1.1em op50" />
     </slot>
diff --git a/packages/devtools/client/app.vue b/packages/devtools/client/app.vue
@@ -137,7 +137,7 @@ registerCommands(() => [
     <div
       v-else
       :class="isUtilityView ? 'flex' : sidebarExpanded ? 'grid grid-cols-[250px_1fr]' : 'grid grid-cols-[50px_1fr]'"
-      h-full h-screen of-hidden rounded-xl font-sans bg-base
+      h-full h-screen of-hidden rounded-xl bg-base font-sans
     >
       <SideNav v-show="!isUtilityView" of-x-hidden of-y-auto />
       <NuxtLayout>
diff --git a/packages/devtools/client/components/ComponentsGraph.vue b/packages/devtools/client/components/ComponentsGraph.vue
@@ -255,7 +255,7 @@ function setFilter() {
 
   <div relative h-full w-full>
     <div ref="container" h-full w-full />
-    <NCard absolute bottom-3 left-3 border-0 p2 px3 text-sm n-glass-effect>
+    <NCard absolute bottom-3 left-3 border-0 n-glass-effect p2 px3 text-sm>
       <div grid="~ cols-[20px_1fr] items-center gap-y-1">
         <div h-3 w-3 rounded-full bg-hex-42b883 />
         <div op50>
diff --git a/packages/devtools/client/components/CronCollection.vue b/packages/devtools/client/components/CronCollection.vue
@@ -19,7 +19,7 @@ const humanReadableCron = computed(() => {
 <template>
   <div>
     <button
-      flex="~ gap-2" w-full items-start items-center hover-bg-active p2
+      flex="~ gap-2" w-full items-start items-center p2 hover-bg-active
       :title="humanReadableCron"
       @click="open = !open"
     >
@@ -39,7 +39,7 @@ const humanReadableCron = computed(() => {
     <ul v-if="open">
       <li v-for="task in collection.tasks" :key="task">
         <button
-          flex="~ gap-2" w-full items-start items-center hover-bg-active px2 py1 pl-9 font-mono
+          flex="~ gap-2" w-full items-start items-center px2 py1 pl-9 font-mono hover-bg-active
           :class="[{ 'bg-active': currentTaskRoute === task }]"
           @click="currentTaskRoute = task"
         >
diff --git a/packages/devtools/client/components/DataSchemaDrawer.vue b/packages/devtools/client/components/DataSchemaDrawer.vue
@@ -77,7 +77,7 @@ function copyToClipboard() {
 <template>
   <Teleport v-if="language" to="body">
     <NDrawer :model-value="!!input?.input" auto-close max-w-screen w-2xl n-code-block @close="input = null">
-      <div border="b base" flex="~ items-center gap-2" sticky left-0 right-0 top-0 z-1 p3 bg-base>
+      <div border="b base" flex="~ items-center gap-2" sticky left-0 right-0 top-0 z-1 bg-base p3>
         <p mr-2>
           Schema
         </p>
diff --git a/packages/devtools/client/components/DisconnectIndicator.vue b/packages/devtools/client/components/DisconnectIndicator.vue
@@ -11,7 +11,7 @@ function reload() {
     <div
       v-if="wsConnectingDebounced"
       flex="~ col justify-center items-center gap-4"
-      fixed bottom-0 left-0 right-0 top-0 z-2147483646 p5 text-lg backdrop-blur-4 n-glass-effect
+      fixed bottom-0 left-0 right-0 top-0 z-2147483646 n-glass-effect p5 text-lg backdrop-blur-4
     >
       <div flex-auto />
       <div flex="~" mt-8 items-center justify-center>
diff --git a/packages/devtools/client/components/HelpFab.vue b/packages/devtools/client/components/HelpFab.vue
@@ -31,7 +31,7 @@ const { showHelpButtons } = useDevToolsOptions('ui')
       <div
         v-if="open" border="l base"
         class="prose" pos="fixed bottom-0 right-0 top-0"
-        z-200 h-full w-150 overflow-auto px8 py4 bg-base
+        z-200 h-full w-150 overflow-auto bg-base px8 py4
       >
         <slot />
         <NButton
diff --git a/packages/devtools/client/components/ServerRouteDetails.vue b/packages/devtools/client/components/ServerRouteDetails.vue
@@ -368,7 +368,7 @@ const copy = useCopy()
 
 <template>
   <div h-full w-full flex="~ col">
-    <div flex="~ col gap-2" flex-none p4 n-navbar-glass>
+    <div flex="~ col gap-2" n-navbar-glass flex-none p4>
       <div flex="~ gap2 items-center">
         <NButton
           v-if="route.method"
diff --git a/packages/devtools/client/components/ServerRouteListItem.vue b/packages/devtools/client/components/ServerRouteListItem.vue
@@ -18,7 +18,7 @@ const currentServerRoute = useCurrentServeRoute()
 <template>
   <div>
     <button
-      flex="~ gap-2" w-full items-start items-center hover-bg-active px2 py1
+      flex="~ gap-2" w-full items-start items-center px2 py1 hover-bg-active
       :class="[{ 'bg-active': currentServerRoute === item.filepath }]"
       :style="{ paddingLeft: `calc(0.5rem + ${index * 1.5}em)` }"
       @click="open = !open;currentServerRoute = item.filepath"
diff --git a/packages/devtools/client/components/ServerTaskDetails.vue b/packages/devtools/client/components/ServerTaskDetails.vue
@@ -217,7 +217,7 @@ const copy = useCopy()
 
 <template>
   <div h-full w-full flex="~ col">
-    <div flex="~ col gap-2" flex-none p4 n-navbar-glass>
+    <div flex="~ col gap-2" n-navbar-glass flex-none p4>
       <div flex="~ gap2 items-center">
         <div v-tooltip="`Method is ${method} as ${method === 'GET' ? 'no' : ''} json body is sent`">
           <NButton
diff --git a/packages/devtools/client/components/ServerTaskListItem.vue b/packages/devtools/client/components/ServerTaskListItem.vue
@@ -17,7 +17,7 @@ const currentTaskRoute = useCurrentServerTask()
 <template>
   <div>
     <button
-      flex="~ gap-2" w-full items-start items-center hover-bg-active px2 py1
+      flex="~ gap-2" w-full items-start items-center px2 py1 hover-bg-active
       :class="[{ 'bg-active': currentTaskRoute === item.name }]"
       :style="{ paddingLeft: `calc(0.5rem + ${index * 1.5}em)` }"
       @click="open = !open;currentTaskRoute = item.name"
diff --git a/packages/devtools/client/components/SideNav.vue b/packages/devtools/client/components/SideNav.vue
@@ -63,7 +63,7 @@ onClickOutside(
     z-100 h-full items-start of-hidden bg-base
   >
     <div
-      sticky top-0 z-1 w-full p1 bg-base border="b base"
+      sticky top-0 z-1 w-full bg-base p1 border="b base"
     >
       <VDropdown
         placement="left-start"
@@ -122,7 +122,7 @@ onClickOutside(
 
     <div
       :flex="`~ items-center gap-1 ${sidebarExpanded ? '' : 'none col'}`"
-      border="t base" sticky bottom-0 w-full p1 bg-base
+      border="t base" sticky bottom-0 w-full bg-base p1
     >
       <VDropdown
         v-if="overflowTabs.length && !sidebarScrollable && !sidebarExpanded"
diff --git a/packages/devtools/client/components/SplitScreen.vue b/packages/devtools/client/components/SplitScreen.vue
@@ -56,7 +56,7 @@ onClickOutside(gridPanel, (e) => {
 
 <template>
   <div h-full h-screen of-hidden>
-    <div border="b base" flex="~ gap1" z-99 px4 py3 n-navbar-glass>
+    <div border="b base" flex="~ gap1" n-navbar-glass z-99 px4 py3>
       <VDropdown
         placement="bottom-start"
         :distance="12"
diff --git a/packages/devtools/client/components/TerminalPage.vue b/packages/devtools/client/components/TerminalPage.vue
@@ -22,7 +22,7 @@ watchEffect(() => {
 <template>
   <div v-if="terminals?.length" h-full w-full of-hidden grid="~ rows-[max-content_1fr_max-content]">
     <!-- TODO: Refactor to have general component -->
-    <div flex="~" border="b base" flex-1 items-center n-navbar-glass>
+    <div flex="~" border="b base" n-navbar-glass flex-1 items-center>
       <button
         v-for="t of terminals"
         :key="t.id" border="r base"
diff --git a/packages/devtools/client/components/TimelineItemFunction.vue b/packages/devtools/client/components/TimelineItemFunction.vue
@@ -20,7 +20,7 @@ const colorBackground = computed(() => colorRaw.value.replace(/_op_/, '0.2'))
       color,
       borderLeft: `2px solid ${color}`,
     }"
-    relative text-sm transition hover:z-1000 bg-base
+    relative bg-base text-sm transition hover:z-1000
   >
     <div
       :style="{
diff --git a/packages/devtools/client/components/TimelineTable.vue b/packages/devtools/client/components/TimelineTable.vue
@@ -137,7 +137,7 @@ useEventListener(scroller, 'wheel', (e: WheelEvent) => {
         />
       </div>
       <TimelineSegment
-        flex-inline of-x-hidden hover:of-x-visible bg-base
+        flex-inline of-x-hidden bg-base hover:of-x-visible
         :class="idx === segments.length - 1 ? 'border-r border-base' : ''"
         :segment="segment"
         :style="{
diff --git a/packages/devtools/client/components/social/SocialLinkedin.vue b/packages/devtools/client/components/social/SocialLinkedin.vue
@@ -7,7 +7,7 @@ defineProps<{
 </script>
 
 <template>
-  <div class="max-w-[520px] min-w-[520px] cursor-pointer overflow-hidden border border-base rounded-[2px] shadow-md bg-base">
+  <div class="max-w-[520px] min-w-[520px] cursor-pointer overflow-hidden border border-base rounded-[2px] bg-base shadow-md">
     <div
       class="h-[270px] border-b border-base bg-cover bg-center bg-no-repeat"
       :style="{ backgroundImage: `url(${JSON.stringify(card.image)})` }"
diff --git a/packages/devtools/client/components/social/SocialTelegram.vue b/packages/devtools/client/components/social/SocialTelegram.vue
@@ -11,7 +11,7 @@ const time = useDateFormat(useNow(), 'HH:mm')
 </script>
 
 <template>
-  <div class="relative max-w-[420px] min-w-[420px] rounded-[16px] rounded-bl-0 py-[6px] leading-[18px] drop-shadow-sm drop-shadow-color-[#10232f26] bg-base">
+  <div class="relative max-w-[420px] min-w-[420px] rounded-[16px] rounded-bl-0 bg-base py-[6px] leading-[18px] drop-shadow-sm drop-shadow-color-[#10232f26]">
     <div class="pl-[10px] pr-[8px]">
       <div class="text-[#3390ec] leading-normal underline">
         {{ card.url }}
diff --git a/packages/devtools/client/pages/modules/analyze-build.vue b/packages/devtools/client/pages/modules/analyze-build.vue
@@ -81,7 +81,7 @@ registerCommands(() => [
       <div flex="~ col">
         <template v-for="build of info?.builds" :key="build.slug">
           <button
-            flex="~ col gap1" hover:bg-active p3
+            flex="~ col gap1" p3 hover:bg-active
             :class="build.slug === selected?.slug ? 'text-primary bg-active' : ''"
             @click="slug = build.slug"
           >
diff --git a/packages/devtools/client/pages/modules/overview.vue b/packages/devtools/client/pages/modules/overview.vue
@@ -68,39 +68,39 @@ function authorize() {
       </div>
       <!-- Main Grid -->
       <div flex="~ gap2 wrap">
-        <NuxtLink to="https://nuxt.com" target="_blank" p4 theme-card-green flex="~ col auto">
+        <NuxtLink to="https://nuxt.com" target="_blank" theme-card-green p4 flex="~ col auto">
           <div logos-nuxt-icon text-3xl />
           <NpmVersionCheck package-name="nuxt" :options="{ dev: true }" />
         </NuxtLink>
-        <NuxtLink v-if="vueVersion" to="https://vuejs.org" target="_blank" p4 theme-card-green flex="~ col auto">
+        <NuxtLink v-if="vueVersion" to="https://vuejs.org" target="_blank" theme-card-green p4 flex="~ col auto">
           <div logos-vue text-3xl />
           <code>v{{ vueVersion }}</code>
         </NuxtLink>
         <template v-if="config">
           <NuxtLink
-            v-if="config && config.pages && client" min-w-40 p4 theme-card-lime flex="~ col auto"
+            v-if="config && config.pages && client" min-w-40 theme-card-lime p4 flex="~ col auto"
             to="/modules/pages"
           >
             <div carbon-tree-view-alt text-3xl />
             <div>{{ pluralizeByCount(routes.length, 'page') }}</div>
           </NuxtLink>
-          <NuxtLink v-if="config" min-w-40 p4 theme-card-lime flex="~ col auto" to="/modules/components">
+          <NuxtLink v-if="config" min-w-40 theme-card-lime p4 flex="~ col auto" to="/modules/components">
             <div i-carbon-assembly-cluster text-3xl />
             <div>{{ pluralizeByCount(components.length, 'component') }}</div>
           </NuxtLink>
-          <NuxtLink v-if="config && autoImports" min-w-40 p4 theme-card-yellow flex="~ col auto" to="/modules/imports">
+          <NuxtLink v-if="config && autoImports" min-w-40 theme-card-yellow p4 flex="~ col auto" to="/modules/imports">
             <div carbon-function text-3xl />
             <div>{{ pluralizeByCount(autoImports.imports.length, 'import') }}</div>
           </NuxtLink>
-          <NuxtLink v-if="config" min-w-40 p4 theme-card-purple flex="~ col auto" to="/modules/modules">
+          <NuxtLink v-if="config" min-w-40 theme-card-purple p4 flex="~ col auto" to="/modules/modules">
             <div carbon-3d-mpr-toggle text-3xl />
             <div>{{ pluralizeByCount(installedModules.length, 'module') }}</div>
           </NuxtLink>
-          <NuxtLink v-if="config" min-w-40 p4 theme-card-teal flex="~ col auto" to="/modules/plugins">
+          <NuxtLink v-if="config" min-w-40 theme-card-teal p4 flex="~ col auto" to="/modules/plugins">
             <div carbon-plug text-3xl />
             <div>{{ pluralizeByCount(config.plugins.length, 'plugin') }}</div>
           </NuxtLink>
-          <div v-if="metricsLoading" pointer-events-none min-w-40 p4 theme-card-lime flex="~ auto gap-6">
+          <div v-if="metricsLoading" pointer-events-none min-w-40 theme-card-lime p4 flex="~ auto gap-6">
             <div i-carbon-time-plot flex-none text-3xl />
             <div grid="~ cols-[auto_auto] gap-x-5 items-center">
               <template v-if="metricsLoading.ssrStart">
diff --git a/packages/devtools/client/pages/modules/pages.vue b/packages/devtools/client/pages/modules/pages.vue
diff --git a/packages/devtools/src/integrations/vite-inspect.ts b/packages/devtools/src/integrations/vite-inspect.ts
diff --git a/playgrounds/module-starter/client/pages/index.vue b/playgrounds/module-starter/client/pages/index.vue

Original file line number	Diff line number	Diff line change
`@@ -27,7 +27,7 @@ onClickOutside(el, () => {`
`27`	`27`	`</slot>`
`28`	`28`
`29`	`29`	`<div`
`30`		`- class="absolute z-10 border n-border-base rounded shadow n-transition n-bg-base"`
	`30`	`+ class="absolute z-10 border n-border-base rounded n-bg-base shadow n-transition"`
`31`	`31`	`:class="[enabled ? 'op-100' : 'op0 pointer-events-none -translate-y-1', direction === 'end' ? 'right-0' : 'left-0']"`
`32`	`32`	`>`
`33`	`33`	`<slot />`
Original file line number	Diff line number	Diff line change
`@@ -36,7 +36,7 @@ devtoolsUiProvideNotificationFn((data) => {`
`36`	`36`	`<div`
`37`	`37`	`border="~ base"`
`38`	`38`	`flex="~ inline gap2"`
`39`		`- m-3 inline-block items-center rounded px-4 py-1 transition-all duration-300 bg-base`
	`39`	`+ m-3 inline-block items-center rounded bg-base px-4 py-1 transition-all duration-300`
`40`	`40`	:style="show ? {} : { transform: `translateY(${position.startsWith('top') ? '-' : ''}300%)` }"
`41`	`41`	`:class="[show ? 'shadow' : 'shadow-none', classes]"`
`42`	`42`	`>`