From b94de302a123d5ccc6b7ef319a25b154ba22953a Mon Sep 17 00:00:00 2001
From: Arash <38922203+arashsheyda@users.noreply.github.com>
Date: Mon, 8 May 2023 15:30:37 +0300
Subject: [PATCH] feat: add open graph tab (#209)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
---
 package.json                                  |   2 +-
 .../devtools-ui-kit/src/assets/styles.css     |   4 +
 .../src/components/NSectionBlock.vue          |   3 +-
 .../src/components/NTextExternalLink.vue      |  24 ++
 packages/devtools-ui-kit/src/unocss.ts        |   2 +-
 .../components/OpenGraphMissingTabs.vue       | 132 +++++++++
 .../client/components/docs/open-graph.md      |  14 +
 .../components/social/SocialFacebook.vue      |  30 ++
 .../components/social/SocialLinkedin.vue      |  24 ++
 .../components/social/SocialPreviewGroup.vue  |  57 ++++
 .../components/social/SocialTwitter.vue       |  54 ++++
 .../devtools/client/composables/client.ts     |   6 +
 packages/devtools/client/composables/state.ts |  16 ++
 packages/devtools/client/data/open-graph.ts   | 169 +++++++++++
 .../devtools/client/pages/modules/assets.vue  |   1 +
 .../client/pages/modules/components.vue       |   1 +
 .../client/pages/modules/open-graph.vue       | 166 +++++++++++
 .../devtools/client/pages/modules/pages.vue   |  14 +-
 packages/devtools/src/types/ui-state.ts       |  15 +
 playgrounds/tab-seo/.npmrc                    |   2 +
 playgrounds/tab-seo/app.vue                   |  18 ++
 playgrounds/tab-seo/components/GlobalNav.vue  |  22 ++
 playgrounds/tab-seo/nuxt.config.ts            |   7 +
 playgrounds/tab-seo/package.json              |  14 +
 playgrounds/tab-seo/pages/dynamic-[name].vue  |  18 ++
 playgrounds/tab-seo/pages/empty.vue           |   9 +
 playgrounds/tab-seo/pages/full.vue            |  55 ++++
 playgrounds/tab-seo/pages/index.vue           |  25 ++
 playgrounds/tab-seo/tsconfig.json             |   4 +
 pnpm-lock.yaml                                | 271 +++++++++---------
 pnpm-workspace.yaml                           |   1 +
 tsconfig.json                                 |   1 +
 32 files changed, 1034 insertions(+), 147 deletions(-)
 create mode 100644 packages/devtools-ui-kit/src/components/NTextExternalLink.vue
 create mode 100644 packages/devtools/client/components/OpenGraphMissingTabs.vue
 create mode 100644 packages/devtools/client/components/docs/open-graph.md
 create mode 100644 packages/devtools/client/components/social/SocialFacebook.vue
 create mode 100644 packages/devtools/client/components/social/SocialLinkedin.vue
 create mode 100644 packages/devtools/client/components/social/SocialPreviewGroup.vue
 create mode 100644 packages/devtools/client/components/social/SocialTwitter.vue
 create mode 100644 packages/devtools/client/data/open-graph.ts
 create mode 100644 packages/devtools/client/pages/modules/open-graph.vue
 create mode 100644 playgrounds/tab-seo/.npmrc
 create mode 100644 playgrounds/tab-seo/app.vue
 create mode 100644 playgrounds/tab-seo/components/GlobalNav.vue
 create mode 100644 playgrounds/tab-seo/nuxt.config.ts
 create mode 100644 playgrounds/tab-seo/package.json
 create mode 100644 playgrounds/tab-seo/pages/dynamic-[name].vue
 create mode 100644 playgrounds/tab-seo/pages/empty.vue
 create mode 100644 playgrounds/tab-seo/pages/full.vue
 create mode 100644 playgrounds/tab-seo/pages/index.vue
 create mode 100644 playgrounds/tab-seo/tsconfig.json

diff --git a/package.json b/package.json
index 27f303975..ce30ea8f6 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,7 @@
     "@unocss/eslint-config": "^0.51.12",
     "bumpp": "^9.1.0",
     "conventional-changelog-cli": "^2.2.2",
-    "eslint": "^8.40.0",
+    "eslint": "8.39.0",
     "esno": "^0.16.3",
     "execa": "^7.1.1",
     "lint-staged": "^13.2.2",
diff --git a/packages/devtools-ui-kit/src/assets/styles.css b/packages/devtools-ui-kit/src/assets/styles.css
index 4c3fd66b6..8eb8885f5 100644
--- a/packages/devtools-ui-kit/src/assets/styles.css
+++ b/packages/devtools-ui-kit/src/assets/styles.css
@@ -11,3 +11,7 @@ html.dark {
   background-color: #151515;
   color: white;
 }
+
+::selection {
+  background: #8884;
+}
diff --git a/packages/devtools-ui-kit/src/components/NSectionBlock.vue b/packages/devtools-ui-kit/src/components/NSectionBlock.vue
index dd0b2c3d6..7d21f7034 100644
--- a/packages/devtools-ui-kit/src/components/NSectionBlock.vue
+++ b/packages/devtools-ui-kit/src/components/NSectionBlock.vue
@@ -7,6 +7,7 @@ const props = withDefaults(
     text: string
     description?: string
     containerClass?: string
+    headerClass?: string
     collapse?: boolean
     open?: boolean
     padding?: boolean | string
@@ -27,7 +28,7 @@ function onToggle(e: any) {
 <template>
   <details :open="open" @toggle="onToggle">
     <summary class="cursor-pointer select-none hover:bg-active p4" :class="collapse ? '' : 'pointer-events-none'">
-      <NIconTitle :icon="icon" :text="text" text-xl transition :class="open ? 'op100' : 'op60'">
+      <NIconTitle :icon="icon" :text="text" text-xl transition :class="[open ? 'op100' : 'op60', headerClass]">
         <div>
           <div text-base>
             <slot name="text">
diff --git a/packages/devtools-ui-kit/src/components/NTextExternalLink.vue b/packages/devtools-ui-kit/src/components/NTextExternalLink.vue
new file mode 100644
index 000000000..9c7661800
--- /dev/null
+++ b/packages/devtools-ui-kit/src/components/NTextExternalLink.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import NLink from './NLink.vue'
+
+defineProps<{
+  link?: string
+}>()
+</script>
+
+<template>
+  <component
+    :is="link ? NLink : 'div'"
+    v-bind="link ? {
+      href: link,
+      target: '_blank',
+      rel: 'noopener noreferrer',
+    } : {}"
+  >
+    <slot />
+    <div
+      v-if="link"
+      i-carbon:arrow-up-right translate-y--1 text-xs op50
+    />
+  </component>
+</template>
diff --git a/packages/devtools-ui-kit/src/unocss.ts b/packages/devtools-ui-kit/src/unocss.ts
index 211b67778..b1cd955a9 100644
--- a/packages/devtools-ui-kit/src/unocss.ts
+++ b/packages/devtools-ui-kit/src/unocss.ts
@@ -98,7 +98,7 @@ export function unocssPreset(): Preset {
 
       // link
       'n-link-base': 'underline underline-offset-2 underline-black/20 dark:underline-white/40',
-      'n-link-hover': 'decoration-dotted text-context underline-context',
+      'n-link-hover': 'decoration-dotted text-context underline-context! op100!',
 
       // card
       'n-card-base': 'border n-border-base rounded n-bg-base shadow-sm',
diff --git a/packages/devtools/client/components/OpenGraphMissingTabs.vue b/packages/devtools/client/components/OpenGraphMissingTabs.vue
new file mode 100644
index 000000000..81780c0d7
--- /dev/null
+++ b/packages/devtools/client/components/OpenGraphMissingTabs.vue
@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import { defu } from 'defu'
+import type { ReactiveHead } from '@unhead/vue'
+import type { NormalizedHeadTag } from '../../src/types'
+import { ogTags } from '../data/open-graph'
+
+const props = defineProps<{
+  tags: NormalizedHeadTag[]
+  matchedRouteFilepath?: string
+}>()
+
+const missingTags = computed(() => {
+  return ogTags.filter(define => !props.tags?.some(tag => tag.name === define.name))
+})
+
+const missingRequiredTags = computed(() => {
+  return missingTags.value.filter(i => i.suggestion === 'required')
+})
+const missingRecommendedTags = computed(() => {
+  return missingTags.value.filter(i => i.suggestion === 'recommended')
+})
+
+const mergedMissingTags = computed(() => {
+  let data: Partial<ReactiveHead> = {}
+  missingTags.value
+    .forEach((tag) => {
+      data = defu(data, tag.default)
+    })
+  return data
+})
+
+const codeSnippet = computed(() => {
+  const body = JSON.stringify(mergedMissingTags.value, null, 2)
+    .replace(/"([^"]+)":/g, '$1:')
+    .replace(/"/g, '\'')
+  return `useHead(${body})`
+})
+
+const copy = useCopy()
+const openInEditor = useOpenInEditor()
+
+const tabs = [
+  'Missing Tags',
+  'Code Snippet',
+]
+const selectedTab = ref(tabs[0])
+</script>
+
+<template>
+  <template v-if="missingTags.length">
+    <NSectionBlock
+      text="Missing Tags"
+      :description="`${missingTags.length} missing tags (${missingRequiredTags.length} required, ${missingRecommendedTags.length} recommended)`"
+      icon="carbon:warning-other"
+      header-class="text-orange op100! [[open]_&]:text-inherit"
+      :padding="false"
+    >
+      <div flex="~ wrap" mt--2 w-full flex-none>
+        <template v-for="name, idx of tabs" :key="idx">
+          <button
+            px4 py2 border="r t base"
+            hover="bg-active"
+            :class="name === selectedTab ? '' : 'border-b'"
+            @click="selectedTab = name"
+          >
+            <div :class="name === selectedTab ? '' : 'op30' " capitalize>
+              {{ name }}
+            </div>
+          </button>
+        </template>
+        <div border="b base" flex-auto />
+      </div>
+
+      <NCard v-if="selectedTab === tabs[0]" grid="~ cols-[max-content_1fr]" m4 items-center justify-between of-hidden>
+        <template v-for="item, index of missingTags" :key="index">
+          <div v-if="index" x-divider />
+          <div v-if="index" x-divider />
+          <div flex="~ gap-1 items-center" px4 py2>
+            <div i-carbon-warning text-orange />
+            <NTextExternalLink
+              op50
+              :link="item.docs"
+              n="orange"
+            >
+              {{ item.name }}
+            </NTextExternalLink>
+          </div>
+          <!-- TODO: use icons instead, show link to documentation -->
+          <div w-full p2 op75>
+            {{ item.description }}
+          </div>
+        </template>
+      </NCard>
+      <div v-else m4 flex="~ col gap-2">
+        <p flex="~ gap-1 wrap items-center">
+          <NButton
+            icon="carbon-copy" n="xs" px-2
+            @click="copy(codeSnippet)"
+          >
+            Copy
+          </NButton>
+          the following code snippet and paste it into your
+          <NButton
+            v-if="matchedRouteFilepath"
+            icon="carbon-launch" n="xs" px-2
+            @click="openInEditor(matchedRouteFilepath)"
+          >
+            page component
+          </NButton>
+          <span v-else>page component</span>
+          to full fill the missing tags.
+        </p>
+        <NCard relative n-code-block>
+          <NCodeBlock
+            :code="codeSnippet"
+            lang="ts"
+            :lines="false"
+            w-full of-auto p3
+          />
+          <div flex="~ gap-2" n="sm primary" absolute right-2 top-2>
+            <NButton
+              icon="carbon-copy"
+              @click="copy(codeSnippet)"
+            >
+              Copy
+            </NButton>
+          </div>
+        </NCard>
+      </div>
+    </NSectionBlock>
+  </template>
+</template>
diff --git a/packages/devtools/client/components/docs/open-graph.md b/packages/devtools/client/components/docs/open-graph.md
new file mode 100644
index 000000000..6cb0168f7
--- /dev/null
+++ b/packages/devtools/client/components/docs/open-graph.md
@@ -0,0 +1,14 @@
+# Open Graph
+
+Nuxt provides several different ways to manage your meta tags using [`unhead`](https://unhead.harlanzw.com/). Improve your Nuxt app's SEO with powerful head config, composables and components.
+
+[Learn more on the documentation](https://nuxt.com/docs/getting-started/seo-meta)
+
+---
+
+You can also find how open graph specs are defined in:
+
+- [The Open Graph protocol](https://ogp.me/)
+- [Twitter Cards](https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started)
+
+<!-- and maybe also add reference to SEO modules(https://nuxt.com/modules?category=SEO) ? -->
diff --git a/packages/devtools/client/components/social/SocialFacebook.vue b/packages/devtools/client/components/social/SocialFacebook.vue
new file mode 100644
index 000000000..2dced1bcb
--- /dev/null
+++ b/packages/devtools/client/components/social/SocialFacebook.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { SocialPreviewResolved } from '~/../src/types'
+
+defineProps<{
+  card: SocialPreviewResolved
+}>()
+</script>
+
+<template>
+  <div class="max-w-[524px] min-w-[524px] cursor-pointer">
+    <div
+      class="h-[274px] border border-b-0 border-base bg-cover bg-center bg-no-repeat"
+      :style="{ backgroundImage: `url(${JSON.stringify(card.image)})` }"
+    />
+    <div class="break-words border border-base px-[12px] py-[10px] antialiased">
+      <div class="overflow-hidden truncate whitespace-nowrap text-[12px] leading-[11px] uppercase op50">
+        {{ card.url }}
+      </div><div class="block h-[46px] max-h-[46px] border-separate select-none overflow-hidden break-words text-left" style="border-spacing: 0px;">
+        <div class="mt-[3px] truncate pt-[2px] text-[16px] font-semibold leading-[20px]">
+          {{ card.title }}
+        </div><div
+          class="mt-[3px] block h-[18px] max-h-[80px] border-separate select-none overflow-hidden truncate whitespace-nowrap break-words text-left text-[14px] leading-[20px] op50"
+          style="-webkit-line-clamp: 1; border-spacing: 0px; -webkit-box-orient: vertical;"
+        >
+          {{ card.description }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/packages/devtools/client/components/social/SocialLinkedin.vue b/packages/devtools/client/components/social/SocialLinkedin.vue
new file mode 100644
index 000000000..6a4dac6d2
--- /dev/null
+++ b/packages/devtools/client/components/social/SocialLinkedin.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { SocialPreviewResolved } from '~/../src/types'
+
+defineProps<{
+  card: SocialPreviewResolved
+}>()
+</script>
+
+<template>
+  <div class="max-w-[520px] min-w-[520px] cursor-pointer overflow-hidden border border-base rounded-[2px] shadow-md">
+    <div
+      class="h-[270px] border-b border-base bg-cover bg-center bg-no-repeat"
+      :style="{ backgroundImage: `url(${JSON.stringify(card.image)})` }"
+    /><div class="break-words p-[10px] antialiased">
+      <div class="block h-auto max-h-[50px] border-separate select-none break-words text-left" style="border-spacing: 0px;">
+        <div class="pb-[2px] text-[16px] font-semibold leading-[24px]">
+          {{ card.title }}
+        </div><div class="overflow-hidden truncate whitespace-nowrap text-xs font-normal uppercase op85">
+          {{ card.url }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/packages/devtools/client/components/social/SocialPreviewGroup.vue b/packages/devtools/client/components/social/SocialPreviewGroup.vue
new file mode 100644
index 000000000..c7d344054
--- /dev/null
+++ b/packages/devtools/client/components/social/SocialPreviewGroup.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import type { NormalizedHeadTag, SocialPreviewResolved } from '../../../src/types'
+
+const props = defineProps<{
+  tags: NormalizedHeadTag[]
+}>()
+
+const types = [
+  'twitter',
+  'facebook',
+  'linkedin',
+]
+
+const selected = ref(types[0])
+
+const card = computed((): SocialPreviewResolved => {
+  return {
+    url: window.location.host,
+    title: props.tags.find(tag => tag.tag === 'title')?.value,
+    image: props.tags.find(tag => tag.tag === 'meta' && tag.name === 'og:image')?.value,
+    imageAlt: props.tags.find(tag => tag.tag === 'meta' && tag.name === 'og:image:alt')?.value,
+    description: props.tags.find(tag => tag.tag === 'meta' && tag.name === 'og:description')?.value,
+    favicon: props.tags.find(tag => tag.tag === 'link' && tag.name === 'icon')?.value,
+  }
+})
+</script>
+
+<template>
+  <div h-full w-max flex="~ col">
+    <div flex="~ wrap" w-full flex-none>
+      <template v-for="name, idx of types" :key="idx">
+        <button
+          px4 py2 border="r base"
+          hover="bg-active"
+          :class="name === selected ? '' : 'border-b'"
+          @click="selected = name"
+        >
+          <div :class="name === selected ? '' : 'op30' " capitalize>
+            {{ name }}
+          </div>
+        </button>
+      </template>
+      <div border="b base" flex-auto />
+    </div>
+    <div flex="~ items-center justify-center" flex-auto p4>
+      <div v-if="selected === 'facebook'">
+        <SocialFacebook :card="card" />
+      </div>
+      <div v-else-if="selected === 'twitter'">
+        <SocialTwitter :tags="tags" />
+      </div>
+      <div v-else-if="selected === 'linkedin'">
+        <SocialLinkedin :card="card" />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/packages/devtools/client/components/social/SocialTwitter.vue b/packages/devtools/client/components/social/SocialTwitter.vue
new file mode 100644
index 000000000..3f0be2185
--- /dev/null
+++ b/packages/devtools/client/components/social/SocialTwitter.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import type { NormalizedHeadTag, SocialPreviewResolved } from '~/../src/types'
+
+const props = defineProps<{
+  tags: NormalizedHeadTag[]
+}>()
+
+const card = computed((): SocialPreviewResolved => {
+  return {
+    url: window.location.host,
+    title: props.tags.find(tag => tag.tag === 'meta' && tag.name === 'twitter:title')?.value || props.tags.find(tag => tag.tag === 'title')?.value,
+    image: props.tags.find(tag => tag.tag === 'meta' && tag.name === 'twitter:image')?.value,
+    imageAlt: props.tags.find(tag => tag.tag === 'meta' && tag.name === 'twitter:image:alt')?.value,
+    description: props.tags.find(tag => tag.tag === 'meta' && tag.name === 'twitter:description')?.value || props.tags.find(tag => tag.tag === 'meta' && tag.name === 'description')?.value,
+    favicon: props.tags.find(tag => tag.tag === 'link' && tag.name === 'icon')?.value,
+  }
+})
+
+const type = computed(() => {
+  if (!card.value.image)
+    return 'summary'
+  return props.tags.find(tag => tag.tag === 'meta' && tag.name === 'twitter:card')?.value || 'summary_large_image'
+})
+</script>
+
+<template>
+  <div
+    class="max-w-[438px] min-w-[438px] cursor-pointer overflow-hidden border border-base rounded-[0.85714em] leading-[1.3em] -outline-offset-1"
+    :class="type === 'summary_large_image' ? '' : 'flex'"
+    hover="bg-[#88888805]"
+  >
+    <div
+      v-if="type === 'summary_large_image'"
+      class="h-[220px] border-b border-base bg-cover bg-center bg-no-repeat"
+      :style="{ backgroundImage: `url(${JSON.stringify(card.image)})` }"
+    />
+    <div
+      v-else
+      class="h-[122px] w-[122px] flex-none border-r border-base bg-cover bg-center bg-no-repeat"
+      :style="{ backgroundImage: `url(${JSON.stringify(card.image)})` }"
+    />
+    <div class="break-words border-base p-[0.75em] antialiased" flex="~ col justify-center gap-1">
+      <div class="mt-[0.32333em] overflow-hidden truncate whitespace-nowrap text-[14px] leading-[18px] lowercase op50">
+        {{ card.url }}
+      </div>
+      <div class="m-0 truncate text-[14px] font-semibold leading-[19px]">
+        {{ card.title }}
+      </div>
+      <div class="line-clamp-2 block select-none overflow-hidden break-words text-left text-[14px] leading-[18px] op50">
+        {{ card.description }}
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/packages/devtools/client/composables/client.ts b/packages/devtools/client/composables/client.ts
index 8043cef6f..665eab711 100644
--- a/packages/devtools/client/composables/client.ts
+++ b/packages/devtools/client/composables/client.ts
@@ -1,5 +1,6 @@
 import type { Lang } from 'shiki-es'
 import type { NuxtDevtoolsClient, NuxtDevtoolsHostClient, NuxtDevtoolsIframeClient, VueInspectorData } from '@nuxt/devtools-kit/types'
+import type { Unhead } from '@unhead/schema'
 import { renderMarkdown } from './client-services/markdown'
 import { renderCodeHighlight } from './client-services/shiki'
 import { extendedRpcMap, rpc } from './rpc'
@@ -18,6 +19,11 @@ export function useClientRouter() {
   return computed(() => client.value?.nuxt.vueApp.config.globalProperties?.$router)
 }
 
+export function useClientHead() {
+  const client = useClient()
+  return computed(() => client.value?.nuxt.vueApp.config.globalProperties?.$head as Unhead)
+}
+
 export function useComponentInspectorData() {
   return useState<VueInspectorData>('devtools-component-inspector-data')
 }
diff --git a/packages/devtools/client/composables/state.ts b/packages/devtools/client/composables/state.ts
index 1dc4320cb..84abf9a14 100644
--- a/packages/devtools/client/composables/state.ts
+++ b/packages/devtools/client/composables/state.ts
@@ -202,3 +202,19 @@ export function useVirtualFiles() {
   })
   return data
 }
+
+export function useMergedRouteList() {
+  const serverPages = useServerPages()
+  const router = useClientRouter()
+
+  return computed((): RouteInfo[] => {
+    return (router.value?.getRoutes() || [])
+      .map(i => objectPick(i, ['path', 'name', 'meta', 'props', 'children']))
+      .map((i) => {
+        return {
+          ...serverPages.value?.find(j => j.name && j.name === i.name),
+          ...i,
+        }
+      })
+  })
+}
diff --git a/packages/devtools/client/data/open-graph.ts b/packages/devtools/client/data/open-graph.ts
new file mode 100644
index 000000000..e914c5124
--- /dev/null
+++ b/packages/devtools/client/data/open-graph.ts
@@ -0,0 +1,169 @@
+import type { ReactiveHead } from '@unhead/vue'
+
+export interface OpenGraphTagDefine {
+  name: string
+  suggestion: 'required' | 'recommended' | 'optional'
+  default: Partial<ReactiveHead>
+  docs?: string
+  description?: string
+}
+
+export const ogTags: OpenGraphTagDefine[] = [
+  {
+    name: 'title',
+    suggestion: 'required',
+    default: {
+      title: '[title]',
+    },
+    docs: 'https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title',
+    description: 'A concise and descriptive title for the browser that accurately summarizes the content of the page.',
+  },
+  {
+    name: 'description',
+    suggestion: 'required',
+    default: {
+      meta: [
+        {
+          name: 'description',
+          content: '[description]',
+        },
+      ],
+    },
+    description: 'A one to two sentence summary for search engines that includes relevant keywords to improve visibility in search results.',
+  },
+  {
+    name: 'icon',
+    suggestion: 'recommended',
+    default: {
+      link: [
+        {
+          rel: 'icon',
+          type: 'image/png',
+          href: '/favicon.png',
+        },
+      ],
+    },
+    description: 'A small image that appears in the browser tab and bookmark menu to help users easily identify the page.',
+  },
+  {
+    name: 'lang',
+    suggestion: 'recommended',
+    default: {
+      htmlAttrs: {
+        lang: 'en',
+      },
+    },
+    description: 'The primary language of the page to help search engines and browsers understand the content.',
+  },
+  {
+    name: 'og:title',
+    suggestion: 'recommended',
+    default: {
+      meta: [
+        {
+          property: 'og:title',
+          content: '[og:title]',
+        },
+      ],
+    },
+    docs: 'https://ogp.me/#metadata',
+    description: 'A title for the link preview used by social media platforms.',
+  },
+  {
+    name: 'og:description',
+    suggestion: 'recommended',
+    default: {
+      meta: [
+        {
+          property: 'og:description',
+          content: '[og:description]',
+        },
+      ],
+    },
+    docs: 'https://ogp.me/#metadata',
+    description: 'A description for the link preview used by social media platforms.',
+  },
+  {
+    name: 'og:image',
+    suggestion: 'recommended',
+    default: {
+      meta: [
+        {
+          property: 'og:image',
+          content: '[og:image]',
+        },
+      ],
+    },
+    docs: 'https://ogp.me/#metadata',
+    description: 'An image for the link preview used by social media platforms.',
+  },
+  {
+    name: 'og:url',
+    suggestion: 'recommended',
+    default: {
+      meta: [
+        {
+          property: 'og:url',
+          content: '[og:url]',
+        },
+      ],
+    },
+    docs: 'https://ogp.me/#metadata',
+    description: 'A canonical URL for the link preview used to specify the preferred URL to display in search engine results and social media previews when multiple URLs may point to the same page.',
+  },
+  {
+    name: 'twitter:title',
+    suggestion: 'recommended',
+    default: {
+      meta: [
+        {
+          name: 'twitter:title',
+          content: '[twitter:title]',
+        },
+      ],
+    },
+    docs: 'https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards',
+    description: 'A title for the Twitter card used to provide a preview of the content shared on the page.',
+  },
+  {
+    name: 'twitter:description',
+    suggestion: 'recommended',
+    default: {
+      meta: [{
+        name: 'twitter:description',
+        content: '[twitter:description]',
+      },
+      ],
+    },
+    docs: 'https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards',
+    description: 'A description for the Twitter card used to provide a preview of the content shared on the page.',
+  },
+  {
+    name: 'twitter:image',
+    suggestion: 'recommended',
+    default: {
+      meta: [
+        {
+          name: 'twitter:image',
+          content: '[twitter:image]',
+        },
+      ],
+    },
+    docs: 'https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards',
+    description: 'An image for the Twitter card used to provide a preview of the content shared on the page.',
+  },
+  {
+    name: 'twitter:card',
+    suggestion: 'recommended',
+    default: {
+      meta: [
+        {
+          name: 'twitter:card',
+          content: 'summary',
+        },
+      ],
+    },
+    docs: 'https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards',
+    description: 'The type of Twitter card to use, which determines the type of card to display in link previews on Twitter.',
+  },
+]
diff --git a/packages/devtools/client/pages/modules/assets.vue b/packages/devtools/client/pages/modules/assets.vue
index e5acc2b76..32a2ab429 100644
--- a/packages/devtools/client/pages/modules/assets.vue
+++ b/packages/devtools/client/pages/modules/assets.vue
@@ -57,6 +57,7 @@ function refreshAssets() {}
   <div h-full of-auto>
     <Navbar ref="navbar" v-model:search="search" pb2>
       <template #actions>
+        <!-- TODO: Use NIconButton -->
         <div flex-none flex="~ gap4">
           <button
             title="Toggle view"
diff --git a/packages/devtools/client/pages/modules/components.vue b/packages/devtools/client/pages/modules/components.vue
index 5f78c746a..a253cfc85 100644
--- a/packages/devtools/client/pages/modules/components.vue
+++ b/packages/devtools/client/pages/modules/components.vue
@@ -36,6 +36,7 @@ function toggleView() {
       :components="components"
     >
       <div flex-none flex="~ gap4">
+        <!-- TODO: Use NIconButton -->
         <button
           title="Toggle view"
           @click="toggleView"
diff --git a/packages/devtools/client/pages/modules/open-graph.vue b/packages/devtools/client/pages/modules/open-graph.vue
new file mode 100644
index 000000000..b4d6fcf3f
--- /dev/null
+++ b/packages/devtools/client/pages/modules/open-graph.vue
@@ -0,0 +1,166 @@
+<script setup lang="ts">
+import type { NormalizedHeadTag } from '~/../src/types/ui-state'
+import { ogTags } from '~/data/open-graph'
+
+definePageMeta({
+  icon: 'carbon:image-search',
+  title: 'Open Graph',
+  layout: 'full',
+  category: 'analyze',
+  show: () => !!useClient().value,
+})
+
+const counter = ref(0)
+const head = useClientHead()
+
+const headTags = computedAsync(async () => {
+  // eslint-disable-next-line no-unused-expressions
+  counter.value // for force refresh
+  const tags = await head.value?.resolveTags()
+  return tags.map((tag): NormalizedHeadTag => {
+    const props = tag.props || {}
+    if (tag.tag === 'htmlAttrs' && props.lang) {
+      return {
+        tag: 'html',
+        name: 'lang',
+        value: props.lang,
+      }
+    }
+    if (props.charset) {
+      return {
+        tag: 'meta',
+        name: 'charset',
+        value: props.charset,
+      }
+    }
+    return {
+      tag: tag.tag,
+      name: props.property ?? props.name ?? props.rel ?? tag.tag,
+      value: props.content ?? props.href ?? tag.textContent ?? JSON.stringify(props),
+    }
+  })
+}, [])
+
+const showPreview = ref(true)
+
+function refresh() {
+  counter.value += 1
+}
+
+const router = useClientRouter()
+const route = useClientRoute()
+const routeInput = ref('')
+const routes = useMergedRouteList()
+const openInEditor = useOpenInEditor()
+
+async function navigate() {
+  if (routeInput.value !== route.value.path)
+    router.value.push(routeInput.value || '/')
+}
+
+const routeInputMatched = computed(() => {
+  if (routeInput.value === route.value.path)
+    return []
+  return router.value.resolve(routeInput.value || '/').matched
+})
+
+const routeMatchedFilePath = computed(() => {
+  const matched = routes.value.find(i => i.path === route.value?.matched?.[0]?.path)
+  return matched?.file || matched?.meta?.file as string
+})
+
+function getDocs(item: NormalizedHeadTag) {
+  return ogTags.find(i => i.name === item.name)?.docs
+}
+
+until(route).toBeTruthy().then((v) => {
+  routeInput.value = v.path
+})
+
+until(router).toBeTruthy().then((v) => {
+  v.afterEach(() => {
+    nextTick(() => {
+      routeInput.value = route.value.path
+    })
+  })
+})
+</script>
+
+<template>
+  <div flex="~" h-full w-full of-hidden>
+    <div h-full flex-auto of-auto>
+      <Navbar>
+        <template #search>
+          <NTextInput
+            v-model="routeInput"
+            placeholder="Route"
+            icon="carbon-direction-right-01 scale-y--100"
+            n="primary" flex-auto font-mono
+            class="px-5 py-2"
+            :class="route.path === routeInput ? '' : routeInputMatched.length ? 'text-green' : 'text-orange' "
+            @keydown.enter="navigate"
+          />
+        </template>
+        <template #actions>
+          <div flex-none flex="~ gap4">
+            <button
+              v-if="routeMatchedFilePath"
+              title="Open file in editor"
+              @click="openInEditor(routeMatchedFilePath)"
+            >
+              <NIcon icon="carbon:launch" />
+            </button>
+            <button
+              title="Refresh Data"
+              @click="refresh"
+            >
+              <NIcon icon="carbon:reset" />
+            </button>
+            <button
+              title="Toggle Preview"
+              @click="showPreview = !showPreview"
+            >
+              <NIcon :icon="showPreview ? 'carbon:side-panel-open' : 'carbon:open-panel-right'" />
+            </button>
+          </div>
+        </template>
+      </Navbar>
+      <div flex="~ col">
+        <NSectionBlock
+          text="Tags"
+          icon="carbon:tag-group"
+        >
+          <!-- TODO: show current route -->
+          <NCard grid="~ cols-[max-content_1fr]" items-center justify-between of-hidden>
+            <template v-for="item, index of headTags" :key="index">
+              <div v-if="index" x-divider />
+              <div v-if="index" x-divider />
+              <div mr2 px4 py2>
+                <NTextExternalLink
+                  op50
+                  :link="getDocs(item)"
+                  n="primary"
+                >
+                  {{ item.name }}
+                </NTextExternalLink>
+              </div>
+              <NTextExternalLink
+                :link=" item.value.match(/^https?:\/\//) ? item.value : undefined"
+                w-full p2 font-mono
+                n="primary"
+              >
+                {{ item.value }}
+              </NTextExternalLink>
+            </template>
+          </NCard>
+        </NSectionBlock>
+        <OpenGraphMissingTabs :tags="headTags" :matched-route-filepath="routeMatchedFilePath" />
+      </div>
+    </div>
+    <SocialPreviewGroup v-if="showPreview && headTags?.length" :tags="headTags" border="l base" w-540px flex-none />
+  </div>
+
+  <HelpFab>
+    <DocsOpenGraph />
+  </HelpFab>
+</template>
diff --git a/packages/devtools/client/pages/modules/pages.vue b/packages/devtools/client/pages/modules/pages.vue
index b42bfb0fa..0d99f2ef6 100644
--- a/packages/devtools/client/pages/modules/pages.vue
+++ b/packages/devtools/client/pages/modules/pages.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import { objectPick } from '@antfu/utils'
 import { nextTick } from 'vue'
-import type { RouteInfo } from '~~/../src/types'
 
 definePageMeta({
   icon: 'carbon-tree-view-alt',
@@ -15,19 +13,9 @@ const route = useClientRoute()
 const config = useServerConfig()
 const serverApp = useServerApp()
 
-const serverPages = useServerPages()
 const layouts = useLayouts()
 
-const routes = computed((): RouteInfo[] => {
-  return (router.value?.getRoutes() || [])
-    .map(i => objectPick(i, ['path', 'name', 'meta', 'props', 'children']))
-    .map((i) => {
-      return {
-        ...serverPages.value?.find(j => j.name && j.name === i.name),
-        ...i,
-      }
-    })
-})
+const routes = useMergedRouteList()
 
 const middleware = computed(() => {
   return serverApp.value?.middleware || []
diff --git a/packages/devtools/src/types/ui-state.ts b/packages/devtools/src/types/ui-state.ts
index 576aad6ff..f2ca249f1 100644
--- a/packages/devtools/src/types/ui-state.ts
+++ b/packages/devtools/src/types/ui-state.ts
@@ -21,3 +21,18 @@ export interface DevToolsUISettings {
   hiddenTabs: string[]
   hiddenTabCategories: string[]
 }
+
+export interface SocialPreviewResolved {
+  url?: string
+  title?: string
+  description?: string
+  favicon?: string
+  image?: string
+  imageAlt?: string
+}
+
+export interface NormalizedHeadTag {
+  tag: string
+  name: string
+  value: string
+}
diff --git a/playgrounds/tab-seo/.npmrc b/playgrounds/tab-seo/.npmrc
new file mode 100644
index 000000000..cf0404245
--- /dev/null
+++ b/playgrounds/tab-seo/.npmrc
@@ -0,0 +1,2 @@
+shamefully-hoist=true
+strict-peer-dependencies=false
diff --git a/playgrounds/tab-seo/app.vue b/playgrounds/tab-seo/app.vue
new file mode 100644
index 000000000..d772acfd0
--- /dev/null
+++ b/playgrounds/tab-seo/app.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+useHead({
+  title: 'Default Page',
+  meta: [
+    {
+      property: 'og:title',
+      content: 'Default Page',
+    },
+  ],
+})
+</script>
+
+<template>
+  <GlobalNav />
+  <div px10 text-6xl>
+    <NuxtPage />
+  </div>
+</template>
diff --git a/playgrounds/tab-seo/components/GlobalNav.vue b/playgrounds/tab-seo/components/GlobalNav.vue
new file mode 100644
index 000000000..b1e1db302
--- /dev/null
+++ b/playgrounds/tab-seo/components/GlobalNav.vue
@@ -0,0 +1,22 @@
+<template>
+  <div px10 pt10 op50>
+    Click to navigate and see the SEO tab
+  </div>
+  <div px10 py5 flex="~ gap-4">
+    <NuxtLink to="/" active-class="text-green">
+      Home
+    </NuxtLink>
+    <NuxtLink to="/empty" active-class="text-green">
+      Empty
+    </NuxtLink>
+    <NuxtLink to="/full" active-class="text-green">
+      Full
+    </NuxtLink>
+    <NuxtLink to="/dynamic-life" active-class="text-green">
+      Dynamic Life
+    </NuxtLink>
+    <NuxtLink to="/dynamic-power" active-class="text-green">
+      Dynamic Power
+    </NuxtLink>
+  </div>
+</template>
diff --git a/playgrounds/tab-seo/nuxt.config.ts b/playgrounds/tab-seo/nuxt.config.ts
new file mode 100644
index 000000000..d733b5bff
--- /dev/null
+++ b/playgrounds/tab-seo/nuxt.config.ts
@@ -0,0 +1,7 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  modules: [
+    '../../packages/devtools-ui-kit',
+    '../../local',
+  ],
+})
diff --git a/playgrounds/tab-seo/package.json b/playgrounds/tab-seo/package.json
new file mode 100644
index 000000000..7d699e2a6
--- /dev/null
+++ b/playgrounds/tab-seo/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "nuxt-app",
+  "private": true,
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview"
+  },
+  "devDependencies": {
+    "@types/node": "^18",
+    "nuxt": "^3.4.3"
+  }
+}
diff --git a/playgrounds/tab-seo/pages/dynamic-[name].vue b/playgrounds/tab-seo/pages/dynamic-[name].vue
new file mode 100644
index 000000000..8393126b2
--- /dev/null
+++ b/playgrounds/tab-seo/pages/dynamic-[name].vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const route = useRoute()
+
+const name = computed(() => route.params.name as string)
+
+useHead({
+  title: `Nuxt is ${name.value}!`,
+  meta: [
+    { property: 'og:image', content: `https://cataas.com/cat/says/Nuxt%20is%20${name.value}!?width=480&height=300` },
+  ],
+})
+</script>
+
+<template>
+  <div>
+    Dynamic, {{ name }}!
+  </div>
+</template>
diff --git a/playgrounds/tab-seo/pages/empty.vue b/playgrounds/tab-seo/pages/empty.vue
new file mode 100644
index 000000000..04e2cc2de
--- /dev/null
+++ b/playgrounds/tab-seo/pages/empty.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div>
+    Empty!
+  </div>
+</template>
diff --git a/playgrounds/tab-seo/pages/full.vue b/playgrounds/tab-seo/pages/full.vue
new file mode 100644
index 000000000..3110d47ea
--- /dev/null
+++ b/playgrounds/tab-seo/pages/full.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+const route = useRoute()
+
+useHead({
+  title: 'Bar page',
+  htmlAttrs: {
+    lang: 'en',
+  },
+  meta: [
+    { name: 'description', content: 'Discover our list of modules to supercharge your Nuxt project. Created by the Nuxt team and community.' },
+    { name: 'keywords', content: 'modules, nuxt, nuxt-devtools' },
+    { name: 'theme-color', content: '#06b66e' },
+    { name: 'author', content: 'Nuxt' },
+    { name: 'copyright', content: 'Nuxt' },
+    { name: 'robots', content: 'no-index' },
+
+    // OG
+    { name: 'og:url', content: route.fullPath },
+    { name: 'og:type', content: 'website' },
+    { name: 'og:locale', content: 'en' },
+    { name: 'og:site_name', content: 'Nuxt' },
+    { name: 'og:title', content: 'Bar page' },
+    { name: 'og:description', content: 'Discover our list of modules to supercharge your Nuxt project. Created by the Nuxt team and community.' },
+    { name: 'og:image', content: 'https://nuxt.com/socials/modules.jpg' },
+    { name: 'og:image:alt', content: 'Bar page' },
+
+    // Twitter
+    { name: 'twitter:card', content: 'summary_large_image' },
+    { name: 'twitter:title', content: 'Bar page' },
+    { name: 'twitter:image:alt', content: 'Bar page' },
+    { name: 'twitter:description', content: 'Discover our list of modules to supercharge your Nuxt project. Created by the Nuxt team and community.' },
+    { name: 'twitter:image', content: 'https://nuxt.com/socials/modules.jpg' },
+    { name: 'twitter:image:alt', content: 'Bar page' },
+    { name: 'twitter:site', content: 'nuxt_js' },
+    { name: 'twitter:creator', content: 'nuxt_js' },
+  ],
+  link: [
+    {
+      rel: 'icon',
+      type: 'image/x-icon',
+      href: '/favicon.ico',
+    },
+    {
+      rel: 'apple-touch-icon',
+      href: '/apple-touch-icon.png',
+    },
+  ],
+})
+</script>
+
+<template>
+  <div>
+    Bar, is full!
+  </div>
+</template>
diff --git a/playgrounds/tab-seo/pages/index.vue b/playgrounds/tab-seo/pages/index.vue
new file mode 100644
index 000000000..cabd480b0
--- /dev/null
+++ b/playgrounds/tab-seo/pages/index.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+useHead({
+  title: 'Home page',
+  meta: [
+    {
+      property: 'og:title',
+      content: 'Home page',
+    },
+    {
+      property: 'og:description',
+      content: 'This is the home page',
+    },
+    {
+      property: 'og:image',
+      content: 'https://nuxt.com/assets/blog/nuxt-devtools-0-3.png',
+    },
+  ],
+})
+</script>
+
+<template>
+  <div>
+    Home
+  </div>
+</template>
diff --git a/playgrounds/tab-seo/tsconfig.json b/playgrounds/tab-seo/tsconfig.json
new file mode 100644
index 000000000..a746f2a70
--- /dev/null
+++ b/playgrounds/tab-seo/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bf0eb8e45..4bbe169d3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -6,7 +6,7 @@ importers:
     devDependencies:
       '@antfu/eslint-config':
         specifier: ^0.38.6
-        version: 0.38.6(eslint@8.40.0)(typescript@5.0.4)
+        version: 0.38.6(eslint@8.39.0)(typescript@5.0.4)
       '@antfu/ni':
         specifier: ^0.21.3
         version: 0.21.3
@@ -42,7 +42,7 @@ importers:
         version: 8.5.4
       '@unocss/eslint-config':
         specifier: ^0.51.12
-        version: 0.51.12(eslint@8.40.0)(typescript@5.0.4)
+        version: 0.51.12(eslint@8.39.0)(typescript@5.0.4)
       bumpp:
         specifier: ^9.1.0
         version: 9.1.0
@@ -50,8 +50,8 @@ importers:
         specifier: ^2.2.2
         version: 2.2.2
       eslint:
-        specifier: ^8.40.0
-        version: 8.40.0
+        specifier: 8.39.0
+        version: 8.39.0
       esno:
         specifier: ^0.16.3
         version: 0.16.3
@@ -63,7 +63,7 @@ importers:
         version: 13.2.2
       nuxt:
         specifier: ^3.4.3
-        version: 3.4.3(@types/node@18.16.5)(eslint@8.40.0)(rollup@3.21.2)(typescript@5.0.4)(vue-tsc@1.6.4)
+        version: 3.4.3(@types/node@18.16.5)(eslint@8.39.0)(rollup@3.21.2)(typescript@5.0.4)(vue-tsc@1.6.4)
       pathe:
         specifier: ^1.1.0
         version: 1.1.0
@@ -75,7 +75,7 @@ importers:
         version: 5.0.4
       unocss:
         specifier: ^0.51.12
-        version: 0.51.12(@unocss/webpack@0.51.12)(postcss@8.4.23)(rollup@3.21.2)(vite@4.3.3)
+        version: 0.51.12(@unocss/webpack@0.51.12)(postcss@8.4.23)(rollup@3.21.2)(vite@4.1.4)
       vue-tsc:
         specifier: ^1.6.4
         version: 1.6.4(typescript@5.0.4)
@@ -90,7 +90,7 @@ importers:
         version: 0.2.0(rollup@3.21.2)
       nuxt:
         specifier: ^3.4.3
-        version: 3.4.3(@types/node@18.16.5)(eslint@8.40.0)(rollup@3.21.2)(typescript@5.0.4)(vue-tsc@1.6.4)
+        version: 3.4.3(@types/node@18.16.5)(eslint@8.39.0)(rollup@3.21.2)(typescript@5.0.4)(vue-tsc@1.6.4)
 
   packages/devtools:
     dependencies:
@@ -268,7 +268,7 @@ importers:
         version: 4.0.2
       nuxt:
         specifier: ^3.4.3
-        version: 3.4.3(@types/node@18.16.5)(eslint@8.40.0)(rollup@3.21.2)(typescript@5.0.4)(vue-tsc@1.6.4)
+        version: 3.4.3(@types/node@18.16.5)(eslint@8.39.0)(rollup@3.21.2)(typescript@5.0.4)(vue-tsc@1.6.4)
       nuxt-vitest:
         specifier: ^0.6.12
         version: 0.6.12(@vitejs/plugin-vue-jsx@3.0.1)(@vitejs/plugin-vue@4.2.1)(rollup@3.21.2)(vite@4.1.4)(vue@3.2.47)
@@ -292,7 +292,7 @@ importers:
         version: 0.6.4
       unocss:
         specifier: ^0.51.12
-        version: 0.51.12(@unocss/webpack@0.51.12)(postcss@8.4.23)(rollup@3.21.2)(vite@4.3.3)
+        version: 0.51.12(@unocss/webpack@0.51.12)(postcss@8.4.23)(rollup@3.21.2)(vite@4.1.4)
       vanilla-jsoneditor:
         specifier: ^0.17.3
         version: 0.17.3
@@ -328,7 +328,7 @@ importers:
         version: 7.1.1
       nuxt:
         specifier: ^3.4.2
-        version: 3.4.3(@types/node@18.16.5)(eslint@8.40.0)(rollup@3.21.2)(typescript@5.0.4)(vue-tsc@1.6.4)
+        version: 3.4.3(@types/node@18.16.5)(eslint@8.39.0)(rollup@3.21.2)(typescript@5.0.4)(vue-tsc@1.6.4)
       vite:
         specifier: '*'
         version: 4.1.4(@types/node@18.16.5)
@@ -401,14 +401,14 @@ importers:
         version: 7.4.0
       unocss:
         specifier: ^0.51.12
-        version: 0.51.12(@unocss/webpack@0.51.12)(postcss@8.4.23)(rollup@3.21.2)(vite@4.3.3)
+        version: 0.51.12(@unocss/webpack@0.51.12)(postcss@8.4.23)(rollup@3.21.2)(vite@4.1.4)
       v-lazy-show:
         specifier: ^0.2.3
         version: 0.2.3
     devDependencies:
       nuxt:
         specifier: ^3.4.3
-        version: 3.4.3(@types/node@18.16.5)(eslint@8.40.0)(rollup@3.21.2)(typescript@5.0.4)(vue-tsc@1.6.4)
+        version: 3.4.3(@types/node@18.16.5)(eslint@8.39.0)(rollup@3.21.2)(typescript@5.0.4)(vue-tsc@1.6.4)
 
   packages/devtools-wizard:
     dependencies:
@@ -456,6 +456,15 @@ importers:
         specifier: ^1.2.1
         version: 1.2.1
 
+  playgrounds/tab-seo:
+    devDependencies:
+      '@types/node':
+        specifier: ^18
+        version: 18.16.5
+      nuxt:
+        specifier: ^3.4.3
+        version: 3.4.3(@types/node@18.16.5)(eslint@8.39.0)(rollup@3.21.2)(typescript@5.0.4)(vue-tsc@1.6.4)
+
 packages:
 
   /@ampproject/remapping@2.2.1:
@@ -465,24 +474,24 @@ packages:
       '@jridgewell/gen-mapping': 0.3.3
       '@jridgewell/trace-mapping': 0.3.18
 
-  /@antfu/eslint-config-basic@0.38.6(@typescript-eslint/eslint-plugin@5.59.0)(@typescript-eslint/parser@5.59.0)(eslint@8.40.0)(typescript@5.0.4):
+  /@antfu/eslint-config-basic@0.38.6(@typescript-eslint/eslint-plugin@5.59.0)(@typescript-eslint/parser@5.59.0)(eslint@8.39.0)(typescript@5.0.4):
     resolution: {integrity: sha512-g5hxtS98MsQ6plCQ1rPx/K9+7ZZmUgdsWx84PJCwbaSuSklP1jZjuhMcjOPn/LW5t9QAPeb74T9+QsK3+IyNKQ==}
     peerDependencies:
       eslint: '>=7.4.0'
     dependencies:
-      eslint: 8.40.0
-      eslint-plugin-antfu: 0.38.6(eslint@8.40.0)(typescript@5.0.4)
-      eslint-plugin-eslint-comments: 3.2.0(eslint@8.40.0)
+      eslint: 8.39.0
+      eslint-plugin-antfu: 0.38.6(eslint@8.39.0)(typescript@5.0.4)
+      eslint-plugin-eslint-comments: 3.2.0(eslint@8.39.0)
       eslint-plugin-html: 7.1.0
-      eslint-plugin-import: 2.27.5(@typescript-eslint/parser@5.59.0)(eslint@8.40.0)
-      eslint-plugin-jsonc: 2.7.0(eslint@8.40.0)
-      eslint-plugin-markdown: 3.0.0(eslint@8.40.0)
-      eslint-plugin-n: 15.7.0(eslint@8.40.0)
+      eslint-plugin-import: 2.27.5(@typescript-eslint/parser@5.59.0)(eslint@8.39.0)
+      eslint-plugin-jsonc: 2.7.0(eslint@8.39.0)
+      eslint-plugin-markdown: 3.0.0(eslint@8.39.0)
+      eslint-plugin-n: 15.7.0(eslint@8.39.0)
       eslint-plugin-no-only-tests: 3.1.0
-      eslint-plugin-promise: 6.1.1(eslint@8.40.0)
-      eslint-plugin-unicorn: 46.0.0(eslint@8.40.0)
-      eslint-plugin-unused-imports: 2.0.0(@typescript-eslint/eslint-plugin@5.59.0)(eslint@8.40.0)
-      eslint-plugin-yml: 1.5.0(eslint@8.40.0)
+      eslint-plugin-promise: 6.1.1(eslint@8.39.0)
+      eslint-plugin-unicorn: 46.0.0(eslint@8.39.0)
+      eslint-plugin-unused-imports: 2.0.0(@typescript-eslint/eslint-plugin@5.59.0)(eslint@8.39.0)
+      eslint-plugin-yml: 1.5.0(eslint@8.39.0)
       jsonc-eslint-parser: 2.2.0
       yaml-eslint-parser: 1.2.0
     transitivePeerDependencies:
@@ -494,17 +503,17 @@ packages:
       - typescript
     dev: true
 
-  /@antfu/eslint-config-ts@0.38.6(eslint@8.40.0)(typescript@5.0.4):
+  /@antfu/eslint-config-ts@0.38.6(eslint@8.39.0)(typescript@5.0.4):
     resolution: {integrity: sha512-a7PY1xpJwjZwIciu8gboLJ2yYxB1HMCKKshuKvH8vcGv+af5X9wk0eLN3Paa72yytSZZ2fqxfD0AwXTW0n+oiA==}
     peerDependencies:
       eslint: '>=7.4.0'
       typescript: '>=3.9'
     dependencies:
-      '@antfu/eslint-config-basic': 0.38.6(@typescript-eslint/eslint-plugin@5.59.0)(@typescript-eslint/parser@5.59.0)(eslint@8.40.0)(typescript@5.0.4)
-      '@typescript-eslint/eslint-plugin': 5.59.0(@typescript-eslint/parser@5.59.0)(eslint@8.40.0)(typescript@5.0.4)
-      '@typescript-eslint/parser': 5.59.0(eslint@8.40.0)(typescript@5.0.4)
-      eslint: 8.40.0
-      eslint-plugin-jest: 27.2.1(@typescript-eslint/eslint-plugin@5.59.0)(eslint@8.40.0)(typescript@5.0.4)
+      '@antfu/eslint-config-basic': 0.38.6(@typescript-eslint/eslint-plugin@5.59.0)(@typescript-eslint/parser@5.59.0)(eslint@8.39.0)(typescript@5.0.4)
+      '@typescript-eslint/eslint-plugin': 5.59.0(@typescript-eslint/parser@5.59.0)(eslint@8.39.0)(typescript@5.0.4)
+      '@typescript-eslint/parser': 5.59.0(eslint@8.39.0)(typescript@5.0.4)
+      eslint: 8.39.0
+      eslint-plugin-jest: 27.2.1(@typescript-eslint/eslint-plugin@5.59.0)(eslint@8.39.0)(typescript@5.0.4)
       typescript: 5.0.4
     transitivePeerDependencies:
       - eslint-import-resolver-typescript
@@ -513,15 +522,15 @@ packages:
       - supports-color
     dev: true
 
-  /@antfu/eslint-config-vue@0.38.6(@typescript-eslint/eslint-plugin@5.59.0)(@typescript-eslint/parser@5.59.0)(eslint@8.40.0)(typescript@5.0.4):
+  /@antfu/eslint-config-vue@0.38.6(@typescript-eslint/eslint-plugin@5.59.0)(@typescript-eslint/parser@5.59.0)(eslint@8.39.0)(typescript@5.0.4):
     resolution: {integrity: sha512-mC+MA7/WFXGIPR4RbdvaSWXjYJvBiloDzPaOILgbfPxWqROi5KzgMAYbRfHkXz0TaG2P1+wFiuf41unc3rq3ew==}
     peerDependencies:
       eslint: '>=7.4.0'
     dependencies:
-      '@antfu/eslint-config-basic': 0.38.6(@typescript-eslint/eslint-plugin@5.59.0)(@typescript-eslint/parser@5.59.0)(eslint@8.40.0)(typescript@5.0.4)
-      '@antfu/eslint-config-ts': 0.38.6(eslint@8.40.0)(typescript@5.0.4)
-      eslint: 8.40.0
-      eslint-plugin-vue: 9.11.0(eslint@8.40.0)
+      '@antfu/eslint-config-basic': 0.38.6(@typescript-eslint/eslint-plugin@5.59.0)(@typescript-eslint/parser@5.59.0)(eslint@8.39.0)(typescript@5.0.4)
+      '@antfu/eslint-config-ts': 0.38.6(eslint@8.39.0)(typescript@5.0.4)
+      eslint: 8.39.0
+      eslint-plugin-vue: 9.11.0(eslint@8.39.0)
       local-pkg: 0.4.3
     transitivePeerDependencies:
       - '@typescript-eslint/eslint-plugin'
@@ -533,24 +542,24 @@ packages:
       - typescript
     dev: true
 
-  /@antfu/eslint-config@0.38.6(eslint@8.40.0)(typescript@5.0.4):
+  /@antfu/eslint-config@0.38.6(eslint@8.39.0)(typescript@5.0.4):
     resolution: {integrity: sha512-QH9RwKLgumLjkVfKNIrxtISlp6VqfduXVIS2uNlOfrj1hSSObOMzj0olcsKR2pzgTMQ6d5Uu9nrxvKjs/oO6fg==}
     peerDependencies:
       eslint: '>=7.4.0'
     dependencies:
-      '@antfu/eslint-config-vue': 0.38.6(@typescript-eslint/eslint-plugin@5.59.0)(@typescript-eslint/parser@5.59.0)(eslint@8.40.0)(typescript@5.0.4)
-      '@typescript-eslint/eslint-plugin': 5.59.0(@typescript-eslint/parser@5.59.0)(eslint@8.40.0)(typescript@5.0.4)
-      '@typescript-eslint/parser': 5.59.0(eslint@8.40.0)(typescript@5.0.4)
-      eslint: 8.40.0
-      eslint-plugin-eslint-comments: 3.2.0(eslint@8.40.0)
+      '@antfu/eslint-config-vue': 0.38.6(@typescript-eslint/eslint-plugin@5.59.0)(@typescript-eslint/parser@5.59.0)(eslint@8.39.0)(typescript@5.0.4)
+      '@typescript-eslint/eslint-plugin': 5.59.0(@typescript-eslint/parser@5.59.0)(eslint@8.39.0)(typescript@5.0.4)
+      '@typescript-eslint/parser': 5.59.0(eslint@8.39.0)(typescript@5.0.4)
+      eslint: 8.39.0
+      eslint-plugin-eslint-comments: 3.2.0(eslint@8.39.0)
       eslint-plugin-html: 7.1.0
-      eslint-plugin-import: 2.27.5(@typescript-eslint/parser@5.59.0)(eslint@8.40.0)
-      eslint-plugin-jsonc: 2.7.0(eslint@8.40.0)
-      eslint-plugin-n: 15.7.0(eslint@8.40.0)
-      eslint-plugin-promise: 6.1.1(eslint@8.40.0)
-      eslint-plugin-unicorn: 46.0.0(eslint@8.40.0)
-      eslint-plugin-vue: 9.11.0(eslint@8.40.0)
-      eslint-plugin-yml: 1.5.0(eslint@8.40.0)
+      eslint-plugin-import: 2.27.5(@typescript-eslint/parser@5.59.0)(eslint@8.39.0)
+      eslint-plugin-jsonc: 2.7.0(eslint@8.39.0)
+      eslint-plugin-n: 15.7.0(eslint@8.39.0)
+      eslint-plugin-promise: 6.1.1(eslint@8.39.0)
+      eslint-plugin-unicorn: 46.0.0(eslint@8.39.0)
+      eslint-plugin-vue: 9.11.0(eslint@8.39.0)
+      eslint-plugin-yml: 1.5.0(eslint@8.39.0)
       jsonc-eslint-parser: 2.2.0
       yaml-eslint-parser: 1.2.0
     transitivePeerDependencies:
@@ -1298,13 +1307,13 @@ packages:
     requiresBuild: true
     optional: true
 
-  /@eslint-community/eslint-utils@4.4.0(eslint@8.40.0):
+  /@eslint-community/eslint-utils@4.4.0(eslint@8.39.0):
     resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
     dependencies:
-      eslint: 8.40.0
+      eslint: 8.39.0
       eslint-visitor-keys: 3.4.1
 
   /@eslint-community/regexpp@4.5.0:
@@ -1327,8 +1336,8 @@ packages:
     transitivePeerDependencies:
       - supports-color
 
-  /@eslint/js@8.40.0:
-    resolution: {integrity: sha512-ElyB54bJIhXQYVKjDSvCkPO1iU1tSAeVQJbllWJq1XQSmmA4dgFk8CbiBGpiOPxleE48vDogxCtmMYku4HSVLA==}
+  /@eslint/js@8.39.0:
+    resolution: {integrity: sha512-kf9RB0Fg7NZfap83B3QOqOGg9QmD9yBudqQXzzOtn3i4y7ZUXe5ONeW34Gwi+TxhH4mvj72R1Zc300KUMa9Bng==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
   /@floating-ui/core@0.3.1:
@@ -1891,7 +1900,7 @@ packages:
   /@nuxt/ui-templates@1.1.1:
     resolution: {integrity: sha512-PjVETP7+iZXAs5Q8O4ivl4t6qjWZMZqwiTVogUXHoHGZZcw7GZW3u3tzfYfE1HbzyYJfr236IXqQ02MeR8Fz2w==}
 
-  /@nuxt/vite-builder@3.4.3(@types/node@18.16.5)(eslint@8.40.0)(rollup@3.21.2)(typescript@5.0.4)(vue-tsc@1.6.4)(vue@3.2.47):
+  /@nuxt/vite-builder@3.4.3(@types/node@18.16.5)(eslint@8.39.0)(rollup@3.21.2)(typescript@5.0.4)(vue-tsc@1.6.4)(vue@3.2.47):
     resolution: {integrity: sha512-60bXtjEILon0vJ8bC1cpZyV7GiCMlLiji/g/Q55mfsTYHH/1cgTG4UCodbGAZfDouZyyG8D4IrZ3lcizp3Zp9Q==}
     engines: {node: ^14.18.0 || >=16.10.0}
     peerDependencies:
@@ -1929,7 +1938,7 @@ packages:
       unplugin: 1.3.1
       vite: 4.3.3(@types/node@18.16.5)
       vite-node: 0.30.1(@types/node@18.16.5)
-      vite-plugin-checker: 0.5.6(eslint@8.40.0)(typescript@5.0.4)(vite@4.3.3)(vue-tsc@1.6.4)
+      vite-plugin-checker: 0.5.6(eslint@8.39.0)(typescript@5.0.4)(vite@4.3.3)(vue-tsc@1.6.4)
       vue: 3.2.47
       vue-bundle-renderer: 1.0.3
     transitivePeerDependencies:
@@ -2375,7 +2384,7 @@ packages:
       '@types/node': 18.16.5
     dev: true
 
-  /@typescript-eslint/eslint-plugin@5.59.0(@typescript-eslint/parser@5.59.0)(eslint@8.40.0)(typescript@5.0.4):
+  /@typescript-eslint/eslint-plugin@5.59.0(@typescript-eslint/parser@5.59.0)(eslint@8.39.0)(typescript@5.0.4):
     resolution: {integrity: sha512-p0QgrEyrxAWBecR56gyn3wkG15TJdI//eetInP3zYRewDh0XS+DhB3VUAd3QqvziFsfaQIoIuZMxZRB7vXYaYw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -2387,12 +2396,12 @@ packages:
         optional: true
     dependencies:
       '@eslint-community/regexpp': 4.5.0
-      '@typescript-eslint/parser': 5.59.0(eslint@8.40.0)(typescript@5.0.4)
+      '@typescript-eslint/parser': 5.59.0(eslint@8.39.0)(typescript@5.0.4)
       '@typescript-eslint/scope-manager': 5.59.0
-      '@typescript-eslint/type-utils': 5.59.0(eslint@8.40.0)(typescript@5.0.4)
-      '@typescript-eslint/utils': 5.59.0(eslint@8.40.0)(typescript@5.0.4)
+      '@typescript-eslint/type-utils': 5.59.0(eslint@8.39.0)(typescript@5.0.4)
+      '@typescript-eslint/utils': 5.59.0(eslint@8.39.0)(typescript@5.0.4)
       debug: 4.3.4
-      eslint: 8.40.0
+      eslint: 8.39.0
       grapheme-splitter: 1.0.4
       ignore: 5.2.4
       natural-compare-lite: 1.4.0
@@ -2403,7 +2412,7 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/parser@5.59.0(eslint@8.40.0)(typescript@5.0.4):
+  /@typescript-eslint/parser@5.59.0(eslint@8.39.0)(typescript@5.0.4):
     resolution: {integrity: sha512-qK9TZ70eJtjojSUMrrEwA9ZDQ4N0e/AuoOIgXuNBorXYcBDk397D2r5MIe1B3cok/oCtdNC5j+lUUpVB+Dpb+w==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -2417,7 +2426,7 @@ packages:
       '@typescript-eslint/types': 5.59.0
       '@typescript-eslint/typescript-estree': 5.59.0(typescript@5.0.4)
       debug: 4.3.4
-      eslint: 8.40.0
+      eslint: 8.39.0
       typescript: 5.0.4
     transitivePeerDependencies:
       - supports-color
@@ -2439,7 +2448,7 @@ packages:
       '@typescript-eslint/visitor-keys': 5.59.2
     dev: true
 
-  /@typescript-eslint/type-utils@5.59.0(eslint@8.40.0)(typescript@5.0.4):
+  /@typescript-eslint/type-utils@5.59.0(eslint@8.39.0)(typescript@5.0.4):
     resolution: {integrity: sha512-d/B6VSWnZwu70kcKQSCqjcXpVH+7ABKH8P1KNn4K7j5PXXuycZTPXF44Nui0TEm6rbWGi8kc78xRgOC4n7xFgA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -2450,9 +2459,9 @@ packages:
         optional: true
     dependencies:
       '@typescript-eslint/typescript-estree': 5.59.0(typescript@5.0.4)
-      '@typescript-eslint/utils': 5.59.0(eslint@8.40.0)(typescript@5.0.4)
+      '@typescript-eslint/utils': 5.59.0(eslint@8.39.0)(typescript@5.0.4)
       debug: 4.3.4
-      eslint: 8.40.0
+      eslint: 8.39.0
       tsutils: 3.21.0(typescript@5.0.4)
       typescript: 5.0.4
     transitivePeerDependencies:
@@ -2511,19 +2520,19 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/utils@5.59.0(eslint@8.40.0)(typescript@5.0.4):
+  /@typescript-eslint/utils@5.59.0(eslint@8.39.0)(typescript@5.0.4):
     resolution: {integrity: sha512-GGLFd+86drlHSvPgN/el6dRQNYYGOvRSDVydsUaQluwIW3HvbXuxyuD5JETvBt/9qGYe+lOrDk6gRrWOHb/FvA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.40.0)
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.39.0)
       '@types/json-schema': 7.0.11
       '@types/semver': 7.3.13
       '@typescript-eslint/scope-manager': 5.59.0
       '@typescript-eslint/types': 5.59.0
       '@typescript-eslint/typescript-estree': 5.59.0(typescript@5.0.4)
-      eslint: 8.40.0
+      eslint: 8.39.0
       eslint-scope: 5.1.1
       semver: 7.5.0
     transitivePeerDependencies:
@@ -2531,19 +2540,19 @@ packages:
       - typescript
     dev: true
 
-  /@typescript-eslint/utils@5.59.2(eslint@8.40.0)(typescript@5.0.4):
+  /@typescript-eslint/utils@5.59.2(eslint@8.39.0)(typescript@5.0.4):
     resolution: {integrity: sha512-kSuF6/77TZzyGPhGO4uVp+f0SBoYxCDf+lW3GKhtKru/L8k/Hd7NFQxyWUeY7Z/KGB2C6Fe3yf2vVi4V9TsCSQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.40.0)
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.39.0)
       '@types/json-schema': 7.0.11
       '@types/semver': 7.3.13
       '@typescript-eslint/scope-manager': 5.59.2
       '@typescript-eslint/types': 5.59.2
       '@typescript-eslint/typescript-estree': 5.59.2(typescript@5.0.4)
-      eslint: 8.40.0
+      eslint: 8.39.0
       eslint-scope: 5.1.1
       semver: 7.5.0
     transitivePeerDependencies:
@@ -2610,7 +2619,6 @@ packages:
     transitivePeerDependencies:
       - rollup
       - vite
-    dev: true
 
   /@unocss/astro@0.51.12(rollup@3.21.2)(vite@4.3.3):
     resolution: {integrity: sha512-za+gcEZzS1lXOestMHu7/3IAk5l+sgA8jCM1SmA7fpt1qEGpIBGZCNr/MyBRY+HVWPfqAu7Bgc8Gr6pm6gvLYA==}
@@ -2621,6 +2629,7 @@ packages:
     transitivePeerDependencies:
       - rollup
       - vite
+    dev: false
 
   /@unocss/cli@0.51.12(rollup@3.21.2):
     resolution: {integrity: sha512-KLcFmuwORPmEEJ/n4+hJhEESt5JghKiskCAsHtW8oqyc56zzQC4ahhJ1Tjok5ehrASCRBsvqU2PClNosDwc1pQ==}
@@ -2653,22 +2662,22 @@ packages:
   /@unocss/core@0.51.12:
     resolution: {integrity: sha512-H8mLy6ZKu9nGZe5jlHhLPIVwh2G3cCDSBGl5aIZJFI1qpmDC+Zb3iueBGigNpX75IzkjaGKZiK1WUWq8TShjtA==}
 
-  /@unocss/eslint-config@0.51.12(eslint@8.40.0)(typescript@5.0.4):
+  /@unocss/eslint-config@0.51.12(eslint@8.39.0)(typescript@5.0.4):
     resolution: {integrity: sha512-SEqbaHAGiobOpiUvly8f1jCpyuICZjXctd/kDM4JKnVIj3BiL8CoNlSP0HlsLiOWAveduXUU2xPLjQKzYoBJnQ==}
     engines: {node: '>=14'}
     dependencies:
-      '@unocss/eslint-plugin': 0.51.12(eslint@8.40.0)(typescript@5.0.4)
+      '@unocss/eslint-plugin': 0.51.12(eslint@8.39.0)(typescript@5.0.4)
     transitivePeerDependencies:
       - eslint
       - supports-color
       - typescript
     dev: true
 
-  /@unocss/eslint-plugin@0.51.12(eslint@8.40.0)(typescript@5.0.4):
+  /@unocss/eslint-plugin@0.51.12(eslint@8.39.0)(typescript@5.0.4):
     resolution: {integrity: sha512-qBz5fY6g0fQiKGnOTpf1Zk/NJO3ERd6LI4FC0gRqXiXtvWvb+NA/9IegbY8hGjF+Qo2nlQ3RpZeCy60vor8G4A==}
     engines: {node: '>=14'}
     dependencies:
-      '@typescript-eslint/utils': 5.59.2(eslint@8.40.0)(typescript@5.0.4)
+      '@typescript-eslint/utils': 5.59.2(eslint@8.39.0)(typescript@5.0.4)
       '@unocss/config': 0.51.12
       '@unocss/core': 0.51.12
       magic-string: 0.30.0
@@ -2865,7 +2874,6 @@ packages:
       vite: 4.1.4(@types/node@18.16.5)
     transitivePeerDependencies:
       - rollup
-    dev: true
 
   /@unocss/vite@0.51.12(rollup@3.21.2)(vite@4.3.3):
     resolution: {integrity: sha512-ipy0ZVDV1sTX9sM1r0SZ3m3CiJtxYKe8TyL+E9ayE8Pppm0wKM3mnrVzc3Ga5SI9aRy5Zs7Prrc+cZIYCS/x1g==}
@@ -2885,6 +2893,7 @@ packages:
       vite: 4.3.3(@types/node@18.16.5)
     transitivePeerDependencies:
       - rollup
+    dev: false
 
   /@unocss/webpack@0.51.12(rollup@3.21.2)(webpack@5.79.0):
     resolution: {integrity: sha512-mG/dSwSYNLoJk5y+lWc3W9xc3imHMDt5GzdVz9v55PPdtoTOEYGD3sMBbvtpPy9cJdwVz34frJiaJiUIeNLlHA==}
@@ -3340,7 +3349,7 @@ packages:
       '@vueuse/core': 10.1.2(vue@3.2.47)
       '@vueuse/metadata': 10.1.2
       local-pkg: 0.4.3
-      nuxt: 3.4.3(@types/node@18.16.5)(eslint@8.40.0)(rollup@3.21.2)(typescript@5.0.4)(vue-tsc@1.6.4)
+      nuxt: 3.4.3(@types/node@18.16.5)(eslint@8.39.0)(rollup@3.21.2)(typescript@5.0.4)(vue-tsc@1.6.4)
       vue-demi: 0.14.0(vue@3.2.47)
     transitivePeerDependencies:
       - '@vue/composition-api'
@@ -5328,7 +5337,7 @@ packages:
       - supports-color
     dev: true
 
-  /eslint-module-utils@2.8.0(@typescript-eslint/parser@5.59.0)(eslint-import-resolver-node@0.3.7)(eslint@8.40.0):
+  /eslint-module-utils@2.8.0(@typescript-eslint/parser@5.59.0)(eslint-import-resolver-node@0.3.7)(eslint@8.39.0):
     resolution: {integrity: sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==}
     engines: {node: '>=4'}
     peerDependencies:
@@ -5349,43 +5358,43 @@ packages:
       eslint-import-resolver-webpack:
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.59.0(eslint@8.40.0)(typescript@5.0.4)
+      '@typescript-eslint/parser': 5.59.0(eslint@8.39.0)(typescript@5.0.4)
       debug: 3.2.7
-      eslint: 8.40.0
+      eslint: 8.39.0
       eslint-import-resolver-node: 0.3.7
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /eslint-plugin-antfu@0.38.6(eslint@8.40.0)(typescript@5.0.4):
+  /eslint-plugin-antfu@0.38.6(eslint@8.39.0)(typescript@5.0.4):
     resolution: {integrity: sha512-oQImiNKe+iGwoznuydq70s6oJHpaUE/hCHFeu4v7oy/hfAw7oBuCNi6TCZtQ/MUr+4XyQwq9sdC3fsLZC+DF1g==}
     dependencies:
-      '@typescript-eslint/utils': 5.59.2(eslint@8.40.0)(typescript@5.0.4)
+      '@typescript-eslint/utils': 5.59.2(eslint@8.39.0)(typescript@5.0.4)
     transitivePeerDependencies:
       - eslint
       - supports-color
       - typescript
     dev: true
 
-  /eslint-plugin-es@4.1.0(eslint@8.40.0):
+  /eslint-plugin-es@4.1.0(eslint@8.39.0):
     resolution: {integrity: sha512-GILhQTnjYE2WorX5Jyi5i4dz5ALWxBIdQECVQavL6s7cI76IZTDWleTHkxz/QT3kvcs2QlGHvKLYsSlPOlPXnQ==}
     engines: {node: '>=8.10.0'}
     peerDependencies:
       eslint: '>=4.19.1'
     dependencies:
-      eslint: 8.40.0
+      eslint: 8.39.0
       eslint-utils: 2.1.0
       regexpp: 3.2.0
     dev: true
 
-  /eslint-plugin-eslint-comments@3.2.0(eslint@8.40.0):
+  /eslint-plugin-eslint-comments@3.2.0(eslint@8.39.0):
     resolution: {integrity: sha512-0jkOl0hfojIHHmEHgmNdqv4fmh7300NdpA9FFpF7zaoLvB/QeXOGNLIo86oAveJFrfB1p05kC8hpEMHM8DwWVQ==}
     engines: {node: '>=6.5.0'}
     peerDependencies:
       eslint: '>=4.19.1'
     dependencies:
       escape-string-regexp: 1.0.5
-      eslint: 8.40.0
+      eslint: 8.39.0
       ignore: 5.2.4
     dev: true
 
@@ -5395,7 +5404,7 @@ packages:
       htmlparser2: 8.0.2
     dev: true
 
-  /eslint-plugin-import@2.27.5(@typescript-eslint/parser@5.59.0)(eslint@8.40.0):
+  /eslint-plugin-import@2.27.5(@typescript-eslint/parser@5.59.0)(eslint@8.39.0):
     resolution: {integrity: sha512-LmEt3GVofgiGuiE+ORpnvP+kAm3h6MLZJ4Q5HCyHADofsb4VzXFsRiWj3c0OFiV+3DWFh0qg3v9gcPlfc3zRow==}
     engines: {node: '>=4'}
     peerDependencies:
@@ -5405,15 +5414,15 @@ packages:
       '@typescript-eslint/parser':
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.59.0(eslint@8.40.0)(typescript@5.0.4)
+      '@typescript-eslint/parser': 5.59.0(eslint@8.39.0)(typescript@5.0.4)
       array-includes: 3.1.6
       array.prototype.flat: 1.3.1
       array.prototype.flatmap: 1.3.1
       debug: 3.2.7
       doctrine: 2.1.0
-      eslint: 8.40.0
+      eslint: 8.39.0
       eslint-import-resolver-node: 0.3.7
-      eslint-module-utils: 2.8.0(@typescript-eslint/parser@5.59.0)(eslint-import-resolver-node@0.3.7)(eslint@8.40.0)
+      eslint-module-utils: 2.8.0(@typescript-eslint/parser@5.59.0)(eslint-import-resolver-node@0.3.7)(eslint@8.39.0)
       has: 1.0.3
       is-core-module: 2.12.0
       is-glob: 4.0.3
@@ -5428,7 +5437,7 @@ packages:
       - supports-color
     dev: true
 
-  /eslint-plugin-jest@27.2.1(@typescript-eslint/eslint-plugin@5.59.0)(eslint@8.40.0)(typescript@5.0.4):
+  /eslint-plugin-jest@27.2.1(@typescript-eslint/eslint-plugin@5.59.0)(eslint@8.39.0)(typescript@5.0.4):
     resolution: {integrity: sha512-l067Uxx7ZT8cO9NJuf+eJHvt6bqJyz2Z29wykyEdz/OtmcELQl2MQGQLX8J94O1cSJWAwUSEvCjwjA7KEK3Hmg==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     peerDependencies:
@@ -5441,48 +5450,48 @@ packages:
       jest:
         optional: true
     dependencies:
-      '@typescript-eslint/eslint-plugin': 5.59.0(@typescript-eslint/parser@5.59.0)(eslint@8.40.0)(typescript@5.0.4)
-      '@typescript-eslint/utils': 5.59.2(eslint@8.40.0)(typescript@5.0.4)
-      eslint: 8.40.0
+      '@typescript-eslint/eslint-plugin': 5.59.0(@typescript-eslint/parser@5.59.0)(eslint@8.39.0)(typescript@5.0.4)
+      '@typescript-eslint/utils': 5.59.2(eslint@8.39.0)(typescript@5.0.4)
+      eslint: 8.39.0
     transitivePeerDependencies:
       - supports-color
       - typescript
     dev: true
 
-  /eslint-plugin-jsonc@2.7.0(eslint@8.40.0):
+  /eslint-plugin-jsonc@2.7.0(eslint@8.39.0):
     resolution: {integrity: sha512-DZgC71h/hZ9t5k/OGAKOMdJCleg2neZLL7No+YYi2ZMroCN4X5huZdrLf1USbrc6UTHwYujd1EDwXHg1qJ6CYw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: '>=6.0.0'
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.40.0)
-      eslint: 8.40.0
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.39.0)
+      eslint: 8.39.0
       jsonc-eslint-parser: 2.2.0
       natural-compare: 1.4.0
     dev: true
 
-  /eslint-plugin-markdown@3.0.0(eslint@8.40.0):
+  /eslint-plugin-markdown@3.0.0(eslint@8.39.0):
     resolution: {integrity: sha512-hRs5RUJGbeHDLfS7ELanT0e29Ocyssf/7kBM+p7KluY5AwngGkDf8Oyu4658/NZSGTTq05FZeWbkxXtbVyHPwg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
     dependencies:
-      eslint: 8.40.0
+      eslint: 8.39.0
       mdast-util-from-markdown: 0.8.5
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /eslint-plugin-n@15.7.0(eslint@8.40.0):
+  /eslint-plugin-n@15.7.0(eslint@8.39.0):
     resolution: {integrity: sha512-jDex9s7D/Qial8AGVIHq4W7NswpUD5DPDL2RH8Lzd9EloWUuvUkHfv4FRLMipH5q2UtyurorBkPeNi1wVWNh3Q==}
     engines: {node: '>=12.22.0'}
     peerDependencies:
       eslint: '>=7.0.0'
     dependencies:
       builtins: 5.0.1
-      eslint: 8.40.0
-      eslint-plugin-es: 4.1.0(eslint@8.40.0)
-      eslint-utils: 3.0.0(eslint@8.40.0)
+      eslint: 8.39.0
+      eslint-plugin-es: 4.1.0(eslint@8.39.0)
+      eslint-utils: 3.0.0(eslint@8.39.0)
       ignore: 5.2.4
       is-core-module: 2.12.0
       minimatch: 3.1.2
@@ -5495,26 +5504,26 @@ packages:
     engines: {node: '>=5.0.0'}
     dev: true
 
-  /eslint-plugin-promise@6.1.1(eslint@8.40.0):
+  /eslint-plugin-promise@6.1.1(eslint@8.39.0):
     resolution: {integrity: sha512-tjqWDwVZQo7UIPMeDReOpUgHCmCiH+ePnVT+5zVapL0uuHnegBUs2smM13CzOs2Xb5+MHMRFTs9v24yjba4Oig==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^7.0.0 || ^8.0.0
     dependencies:
-      eslint: 8.40.0
+      eslint: 8.39.0
     dev: true
 
-  /eslint-plugin-unicorn@46.0.0(eslint@8.40.0):
+  /eslint-plugin-unicorn@46.0.0(eslint@8.39.0):
     resolution: {integrity: sha512-j07WkC+PFZwk8J33LYp6JMoHa1lXc1u6R45pbSAipjpfpb7KIGr17VE2D685zCxR5VL4cjrl65kTJflziQWMDA==}
     engines: {node: '>=14.18'}
     peerDependencies:
       eslint: '>=8.28.0'
     dependencies:
       '@babel/helper-validator-identifier': 7.19.1
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.40.0)
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.39.0)
       ci-info: 3.8.0
       clean-regexp: 1.0.0
-      eslint: 8.40.0
+      eslint: 8.39.0
       esquery: 1.5.0
       indent-string: 4.0.0
       is-builtin-module: 3.2.1
@@ -5529,7 +5538,7 @@ packages:
       strip-indent: 3.0.0
     dev: true
 
-  /eslint-plugin-unused-imports@2.0.0(@typescript-eslint/eslint-plugin@5.59.0)(eslint@8.40.0):
+  /eslint-plugin-unused-imports@2.0.0(@typescript-eslint/eslint-plugin@5.59.0)(eslint@8.39.0):
     resolution: {integrity: sha512-3APeS/tQlTrFa167ThtP0Zm0vctjr4M44HMpeg1P4bK6wItarumq0Ma82xorMKdFsWpphQBlRPzw/pxiVELX1A==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -5539,37 +5548,37 @@ packages:
       '@typescript-eslint/eslint-plugin':
         optional: true
     dependencies:
-      '@typescript-eslint/eslint-plugin': 5.59.0(@typescript-eslint/parser@5.59.0)(eslint@8.40.0)(typescript@5.0.4)
-      eslint: 8.40.0
+      '@typescript-eslint/eslint-plugin': 5.59.0(@typescript-eslint/parser@5.59.0)(eslint@8.39.0)(typescript@5.0.4)
+      eslint: 8.39.0
       eslint-rule-composer: 0.3.0
     dev: true
 
-  /eslint-plugin-vue@9.11.0(eslint@8.40.0):
+  /eslint-plugin-vue@9.11.0(eslint@8.39.0):
     resolution: {integrity: sha512-bBCJAZnkBV7ATH4Z1E7CvN3nmtS4H7QUU3UBxPdo8WohRU+yHjnQRALpTbxMVcz0e4Mx3IyxIdP5HYODMxK9cQ==}
     engines: {node: ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.2.0 || ^7.0.0 || ^8.0.0
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.40.0)
-      eslint: 8.40.0
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.39.0)
+      eslint: 8.39.0
       natural-compare: 1.4.0
       nth-check: 2.1.1
       postcss-selector-parser: 6.0.11
       semver: 7.5.0
-      vue-eslint-parser: 9.1.1(eslint@8.40.0)
+      vue-eslint-parser: 9.1.1(eslint@8.39.0)
       xml-name-validator: 4.0.0
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /eslint-plugin-yml@1.5.0(eslint@8.40.0):
+  /eslint-plugin-yml@1.5.0(eslint@8.39.0):
     resolution: {integrity: sha512-iygN054g+ZrnYmtOXMnT+sx9iDNXt89/m0+506cQHeG0+5jJN8hY5iOPQLd3yfd50AfK/mSasajBWruf1SoHpQ==}
     engines: {node: ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: '>=6.0.0'
     dependencies:
       debug: 4.3.4
-      eslint: 8.40.0
+      eslint: 8.39.0
       lodash: 4.17.21
       natural-compare: 1.4.0
       yaml-eslint-parser: 1.2.0
@@ -5603,13 +5612,13 @@ packages:
       eslint-visitor-keys: 1.3.0
     dev: true
 
-  /eslint-utils@3.0.0(eslint@8.40.0):
+  /eslint-utils@3.0.0(eslint@8.39.0):
     resolution: {integrity: sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==}
     engines: {node: ^10.0.0 || ^12.0.0 || >= 14.0.0}
     peerDependencies:
       eslint: '>=5'
     dependencies:
-      eslint: 8.40.0
+      eslint: 8.39.0
       eslint-visitor-keys: 2.1.0
     dev: true
 
@@ -5627,15 +5636,15 @@ packages:
     resolution: {integrity: sha512-pZnmmLwYzf+kWaM/Qgrvpen51upAktaaiI01nsJD/Yr3lMOdNtq0cxkrrg16w64VtisN6okbs7Q8AfGqj4c9fA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
-  /eslint@8.40.0:
-    resolution: {integrity: sha512-bvR+TsP9EHL3TqNtj9sCNJVAFK3fBN8Q7g5waghxyRsPLIMwL73XSKnZFK0hk/O2ANC+iAoq6PWMQ+IfBAJIiQ==}
+  /eslint@8.39.0:
+    resolution: {integrity: sha512-mwiok6cy7KTW7rBpo05k6+p4YVZByLNjAZ/ACB9DRCu4YDRwjXI01tWHp6KAUWelsBetTxKK/2sHB0vdS8Z2Og==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     hasBin: true
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.40.0)
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.39.0)
       '@eslint-community/regexpp': 4.5.0
       '@eslint/eslintrc': 2.0.3
-      '@eslint/js': 8.40.0
+      '@eslint/js': 8.39.0
       '@humanwhocodes/config-array': 0.11.8
       '@humanwhocodes/module-importer': 1.0.1
       '@nodelib/fs.walk': 1.2.8
@@ -8627,7 +8636,7 @@ packages:
       - webdriverio
     dev: true
 
-  /nuxt@3.4.3(@types/node@18.16.5)(eslint@8.40.0)(rollup@3.21.2)(typescript@5.0.4)(vue-tsc@1.6.4):
+  /nuxt@3.4.3(@types/node@18.16.5)(eslint@8.39.0)(rollup@3.21.2)(typescript@5.0.4)(vue-tsc@1.6.4):
     resolution: {integrity: sha512-rOEdhHRH33m3L7aJDO7N8C+NC2vSa2mC/0hH/ePmg2S03qkzS0bVg1pIWW9ESDV5UVPFtfhOGoDTEkLJqvE18A==}
     engines: {node: ^14.18.0 || >=16.10.0}
     hasBin: true
@@ -8643,7 +8652,7 @@ packages:
       '@nuxt/schema': 3.4.3(rollup@3.21.2)
       '@nuxt/telemetry': 2.2.0(rollup@3.21.2)
       '@nuxt/ui-templates': 1.1.1
-      '@nuxt/vite-builder': 3.4.3(@types/node@18.16.5)(eslint@8.40.0)(rollup@3.21.2)(typescript@5.0.4)(vue-tsc@1.6.4)(vue@3.2.47)
+      '@nuxt/vite-builder': 3.4.3(@types/node@18.16.5)(eslint@8.39.0)(rollup@3.21.2)(typescript@5.0.4)(vue-tsc@1.6.4)(vue@3.2.47)
       '@types/node': 18.16.5
       '@unhead/ssr': 1.1.26
       '@unhead/vue': 1.1.26(vue@3.2.47)
@@ -8675,7 +8684,7 @@ packages:
       prompts: 2.4.2
       scule: 1.0.0
       strip-literal: 1.0.1
-      ufo: 1.1.1
+      ufo: 1.1.2
       unctx: 2.3.0
       unenv: 1.4.1
       unimport: 3.0.6(rollup@3.21.2)
@@ -11046,7 +11055,6 @@ packages:
       - rollup
       - supports-color
       - vite
-    dev: true
 
   /unocss@0.51.12(@unocss/webpack@0.51.12)(postcss@8.4.23)(rollup@3.21.2)(vite@4.3.3):
     resolution: {integrity: sha512-TjCrFnRq73iU/pxMSMgeWsCm9VPTcg41KEvjZWKJMglROJC+cQ99A7/tiOlamf1Y+TpJxv06K/hUZp+34j8Fmw==}
@@ -11083,6 +11091,7 @@ packages:
       - rollup
       - supports-color
       - vite
+    dev: false
 
   /unplugin@1.3.1:
     resolution: {integrity: sha512-h4uUTIvFBQRxUKS2Wjys6ivoeofGhxzTe2sRWlooyjHXVttcVfV/JiavNd3d4+jty0SVV0dxGw9AkY9MwiaCEw==}
@@ -11316,7 +11325,7 @@ packages:
       - supports-color
       - terser
 
-  /vite-plugin-checker@0.5.6(eslint@8.40.0)(typescript@5.0.4)(vite@4.3.3)(vue-tsc@1.6.4):
+  /vite-plugin-checker@0.5.6(eslint@8.39.0)(typescript@5.0.4)(vite@4.3.3)(vue-tsc@1.6.4):
     resolution: {integrity: sha512-ftRyON0gORUHDxcDt2BErmsikKSkfvl1i2DoP6Jt2zDO9InfvM6tqO1RkXhSjkaXEhKPea6YOnhFaZxW3BzudQ==}
     engines: {node: '>=14.16'}
     peerDependencies:
@@ -11352,7 +11361,7 @@ packages:
       chalk: 4.1.2
       chokidar: 3.5.3
       commander: 8.3.0
-      eslint: 8.40.0
+      eslint: 8.39.0
       fast-glob: 3.2.12
       fs-extra: 11.1.1
       lodash.debounce: 4.0.8
@@ -11664,14 +11673,14 @@ packages:
   /vue-devtools-stub@0.1.0:
     resolution: {integrity: sha512-RutnB7X8c5hjq39NceArgXg28WZtZpGc3+J16ljMiYnFhKvd8hITxSWQSQ5bvldxMDU6gG5mkxl1MTQLXckVSQ==}
 
-  /vue-eslint-parser@9.1.1(eslint@8.40.0):
+  /vue-eslint-parser@9.1.1(eslint@8.39.0):
     resolution: {integrity: sha512-C2aI/r85Q6tYcz4dpgvrs4wH/MqVrRAVIdpYedrxnATDHHkb+TroeRcDpKWGZCx/OcECMWfz7tVwQ8e+Opy6rA==}
     engines: {node: ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: '>=6.0.0'
     dependencies:
       debug: 4.3.4
-      eslint: 8.40.0
+      eslint: 8.39.0
       eslint-scope: 7.2.0
       eslint-visitor-keys: 3.4.1
       espree: 9.5.2
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index a5a394310..fec31167a 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,3 +1,4 @@
 packages:
   - docs/**
   - packages/**
+  - playgrounds/**
diff --git a/tsconfig.json b/tsconfig.json
index 382e9bfc2..d1492fa37 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -22,6 +22,7 @@
     "**/node_modules",
     "**/dist",
     "**/playground",
+    "**/playgrounds",
     "**/docs",
     "./packages/devtools/client"
   ]