From f54cbf6acb48dfd45442283a0acf3842d8bba97c Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Fri, 26 Jan 2024 12:50:05 +0100
Subject: [PATCH] fix(vitepress): improve class handing, reduce html payload
 size

---
 packages/shikiji-twoslash/style-rich.css      |   2 +
 .../vitepress-plugin-twoslash/src/client.ts   |  19 +-
 .../src/renderer-floating-vue.ts              |  44 ++---
 .../vitepress-plugin-twoslash/src/style.css   |  29 +--
 .../out/completion-end-multifile-2.ts.json    |  31 ++-
 .../test/out/completion-end-multifile.ts.json |  73 +++----
 .../test/out/completion-end.ts.json           | 186 +++++++-----------
 .../test/out/completion-string.ts.json        |  31 ++-
 .../test/out/highlights.ts.json               |  49 ++---
 .../test/out/import-vue.ts.json               |  21 +-
 .../test/out/query-offset.ts.json             |  33 +---
 11 files changed, 191 insertions(+), 327 deletions(-)

diff --git a/packages/shikiji-twoslash/style-rich.css b/packages/shikiji-twoslash/style-rich.css
index b54fa41e9..eaf44f6c4 100644
--- a/packages/shikiji-twoslash/style-rich.css
+++ b/packages/shikiji-twoslash/style-rich.css
@@ -10,6 +10,7 @@
   --twoslash-docs-color: #888;
   --twoslash-docs-font: sans-serif;
   --twoslach-code-font: inherit;
+  --twoslach-code-font-size: 1em;
   --twoslash-matched-color: inherit;
   --twoslash-unmatched-color: #888;
   --twoslash-cursor-color: #8888;
@@ -95,6 +96,7 @@
 
 .twoslash .twoslash-popup-code {
   font-family: var(--twoslach-code-font);
+  font-size: var(--twoslach-code-font-size);
 }
 
 .twoslash .twoslash-popup-docs {
diff --git a/packages/vitepress-plugin-twoslash/src/client.ts b/packages/vitepress-plugin-twoslash/src/client.ts
index 7d2627fae..25effe8a7 100644
--- a/packages/vitepress-plugin-twoslash/src/client.ts
+++ b/packages/vitepress-plugin-twoslash/src/client.ts
@@ -24,16 +24,33 @@ const TwoslashFloatingVue = {
     app.use(FloatingVue, {
       ...options,
       themes: {
-        twoslash: {
+        'twoslash': {
           $extend: 'dropdown',
           triggers: isMobile ? ['touch'] : ['hover', 'touch'],
           popperTriggers: isMobile ? ['touch'] : ['hover', 'touch'],
+          placement: 'bottom-start',
           overflowPadding: 10,
           delay: 0,
           handleResize: false,
           autoHide: true,
           instantMove: true,
           flip: false,
+          arrowPadding: 8,
+          autoBoundaryMaxSize: true,
+        },
+        'twoslash-query': {
+          $extend: 'twoslash',
+          triggers: ['click'],
+          popperTriggers: ['click'],
+          autoHide: false,
+        },
+        'twoslash-completion': {
+          $extend: 'twoslash-query',
+          triggers: ['click'],
+          popperTriggers: ['click'],
+          autoHide: false,
+          distance: 0,
+          arrowOverflow: true,
         },
         ...options.theme,
       },
diff --git a/packages/vitepress-plugin-twoslash/src/renderer-floating-vue.ts b/packages/vitepress-plugin-twoslash/src/renderer-floating-vue.ts
index b6f5ad997..ab90c50d8 100644
--- a/packages/vitepress-plugin-twoslash/src/renderer-floating-vue.ts
+++ b/packages/vitepress-plugin-twoslash/src/renderer-floating-vue.ts
@@ -10,20 +10,18 @@ import type { VitePressPluginTwoslashOptions } from 'vitepress-plugin-twoslash'
 export { defaultHoverInfoProcessor }
 
 export function rendererFloatingVue(options: VitePressPluginTwoslashOptions & RendererRichOptions = {}): TwoslashRenderer {
+  const classCopyIgnore = 'vp-copy-ignore'
+  const classFloatingPanel = 'twoslash-floating'
+  const classCode = 'vp-code'
+  const classMarkdown = 'vp-doc'
+  const floatingVueTheme = 'twoslash'
+  const floatingVueThemeQuery = 'twoslash-query'
+  const floatingVueThemeCompletion = 'twoslash-completion'
+
   const hoverBasicProps = {
     'class': 'twoslash-hover',
-    'popper-class': 'vp-code shiki floating-vue-twoslash vp-copy-ignore',
-    'placement': 'bottom-start',
-    'theme': 'twoslash',
-    ':arrow-padding': '8',
-    ':auto-boundary-max-size': 'true',
-  }
-  const hoverPresistedProps = {
-    ...hoverBasicProps,
-    ':shown': 'true',
-    ':triggers': '["click"]',
-    ':popper-triggers': '["click"]',
-    ':auto-hide': 'false',
+    'popper-class': ['shiki', classFloatingPanel, classCopyIgnore, classCode].join(' '),
+    'theme': floatingVueTheme,
   }
 
   function compose(parts: { token: Element | Text, popup: Element }): Element[] {
@@ -50,7 +48,7 @@ export function rendererFloatingVue(options: VitePressPluginTwoslashOptions & Re
   }
 
   const rich = rendererRich({
-    classExtra: 'vp-copy-ignore',
+    classExtra: classCopyIgnore,
     ...options,
     renderMarkdown,
     renderMarkdownInline,
@@ -62,14 +60,17 @@ export function rendererFloatingVue(options: VitePressPluginTwoslashOptions & Re
       hoverCompose: compose,
       queryToken: {
         tagName: 'v-menu',
-        properties: hoverPresistedProps,
+        properties: {
+          ...hoverBasicProps,
+          theme: floatingVueThemeQuery,
+        },
       },
       queryCompose: compose,
       popupDocs: {
-        class: 'twoslash-popup-docs vp-doc',
+        class: `twoslash-popup-docs ${classMarkdown}`,
       },
       popupDocsTags: {
-        class: 'twoslash-popup-docs twoslash-popup-docs-tags vp-doc',
+        class: `twoslash-popup-docs twoslash-popup-docs-tags ${classMarkdown}`,
       },
       completionCompose({ popup, cursor }) {
         return [
@@ -77,16 +78,9 @@ export function rendererFloatingVue(options: VitePressPluginTwoslashOptions & Re
             type: 'element',
             tagName: 'v-menu',
             properties: {
-              'popper-class': 'vp-code shiki floating-vue-twoslash-compeltion vp-copy-ignore',
-              'placement': 'bottom-start',
-              'theme': 'twoslash',
-              ':distance': '0',
-              ':arrow-overflow': 'true',
-              ':auto-boundary-max-size': 'true',
+              'popper-class': ['shiki twoslash-completion', classCopyIgnore, classFloatingPanel],
+              'theme': floatingVueThemeCompletion,
               ':shown': 'true',
-              ':triggers': '["click"]',
-              ':popper-triggers': '["click"]',
-              ':auto-hide': 'false',
             },
             children: [
               cursor,
diff --git a/packages/vitepress-plugin-twoslash/src/style.css b/packages/vitepress-plugin-twoslash/src/style.css
index 858d6a2af..819f0cd4d 100644
--- a/packages/vitepress-plugin-twoslash/src/style.css
+++ b/packages/vitepress-plugin-twoslash/src/style.css
@@ -4,10 +4,12 @@
   --twoslash-docs-color: var(--vp-c-text-1);
   --twoslash-docs-font: var(--vp-font-family-base);
   --twoslash-code-font: var(--vp-font-family-mono);
+  --twoslash-code-size: var(--vp-code-font-size);
   --twoslash-underline-color: #8888;
   --twoslash-border-color: var(--vp-c-border);
   --twoslash-cursor-color: var(--vp-c-brand);
   --twoslash-matched-color: var(--vp-c-brand);
+  --twoslash-unmatched-color: var(--vp-c-text-2);
 }
 
 .v-popper--theme-twoslash {
@@ -44,20 +46,19 @@
   color: var(--twoslash-unmatched-color) !important;
 }
 
-.floating-vue-twoslash .twoslash-popup-code {
+.twoslash-floating .twoslash-popup-code {
   max-width: 600px;
   display: block;
   width: fit-content;
   min-width: 100%;
   padding: 6px 12px;
   line-height: var(--vp-code-line-height);
-  font-size: var(--vp-code-font-size);
-  color: var(--vp-code-block-color);
+  font-size: var(--twoslash-code-size);
   transition: color 0.5s;
   white-space: pre-wrap;
 }
 
-.floating-vue-twoslash .twoslash-popup-docs {
+.twoslash-floating .twoslash-popup-docs {
   border-top: 1px solid var(--twoslash-border-color);
   color: var(--twoslash-docs-color);
   padding: 0px 12px 0px 12px !important;
@@ -70,13 +71,13 @@
   text-wrap: balance;
 }
 
-.floating-vue-twoslash .twoslash-popup-docs p {
+.twoslash-floating .twoslash-popup-docs p {
   margin: 0;
   padding: 6px 0;
   text-wrap: balance;
 }
 
-.floating-vue-twoslash .twoslash-popup-docs pre {
+.twoslash-floating .twoslash-popup-docs pre {
   background-color: var(--vp-code-block-bg);
   border-radius: 8px;
   padding: 12px;
@@ -84,15 +85,15 @@
   overflow-x: auto;
 }
 
-.floating-vue-twoslash .twoslash-popup-docs-tags {
+.twoslash-floating .twoslash-popup-docs-tags {
   display: flex;
   flex-direction: column;
   padding: 8px 12px !important;
 }
 
-.floating-vue-twoslash .twoslash-popup-docs-tags .twoslash-popup-docs-tag-name {
+.twoslash-floating .twoslash-popup-docs-tags .twoslash-popup-docs-tag-name {
   font-family: var(--twoslash-code-font);
-  color: var(--vp-c-text-2);
+  color: var(--twoslash-unmatched-color);
   margin-right: 0.5em;
 }
 
@@ -105,16 +106,16 @@
   user-select: none;
 }
 
-.floating-vue-twoslash-compeltion .v-popper__arrow-container {
+.twoslash-floating.twoslash-completion .v-popper__arrow-container {
   display: none;
 }
 
-.floating-vue-twoslash-compeltion .twoslash-completion-list {
+.twoslash-floating.twoslash-completion .twoslash-completion-list {
   padding: 6px;
-  font-family: var(--vp-font-family-mono);
-  font-size: var(--vp-code-font-size) !important;
+  font-family: var(--twoslash-code-font);
+  font-size: var(--twoslash-code-size) !important;
 }
 
-.floating-vue-twoslash-compeltion .twoslash-completion-list li {
+.twoslash-floating.twoslash-completion .twoslash-completion-list li {
   padding: 3px 0;
 }
diff --git a/packages/vitepress-plugin-twoslash/test/out/completion-end-multifile-2.ts.json b/packages/vitepress-plugin-twoslash/test/out/completion-end-multifile-2.ts.json
index 3a86c81fd..4f1590af0 100644
--- a/packages/vitepress-plugin-twoslash/test/out/completion-end-multifile-2.ts.json
+++ b/packages/vitepress-plugin-twoslash/test/out/completion-end-multifile-2.ts.json
@@ -92,11 +92,8 @@
                       "tagName": "v-menu",
                       "properties": {
                         "class": "twoslash-hover",
-                        "popper-class": "vp-code shiki floating-vue-twoslash vp-copy-ignore",
-                        "placement": "bottom-start",
-                        "theme": "twoslash",
-                        ":arrow-padding": "8",
-                        ":auto-boundary-max-size": "true"
+                        "popper-class": "shiki twoslash-floating vp-copy-ignore vp-code",
+                        "theme": "twoslash"
                       },
                       "children": [
                         {
@@ -396,11 +393,8 @@
                       "tagName": "v-menu",
                       "properties": {
                         "class": "twoslash-hover",
-                        "popper-class": "vp-code shiki floating-vue-twoslash vp-copy-ignore",
-                        "placement": "bottom-start",
-                        "theme": "twoslash",
-                        ":arrow-padding": "8",
-                        ":auto-boundary-max-size": "true"
+                        "popper-class": "shiki twoslash-floating vp-copy-ignore vp-code",
+                        "theme": "twoslash"
                       },
                       "children": [
                         {
@@ -566,16 +560,13 @@
                           "type": "element",
                           "tagName": "v-menu",
                           "properties": {
-                            "popper-class": "vp-code shiki floating-vue-twoslash-compeltion vp-copy-ignore",
-                            "placement": "bottom-start",
-                            "theme": "twoslash",
-                            ":distance": "0",
-                            ":arrow-overflow": "true",
-                            ":auto-boundary-max-size": "true",
-                            ":shown": "true",
-                            ":triggers": "[\"click\"]",
-                            ":popper-triggers": "[\"click\"]",
-                            ":auto-hide": "false"
+                            "popper-class": [
+                              "shiki twoslash-completion",
+                              "vp-copy-ignore",
+                              "twoslash-floating"
+                            ],
+                            "theme": "twoslash-completion",
+                            ":shown": "true"
                           },
                           "children": [
                             {
diff --git a/packages/vitepress-plugin-twoslash/test/out/completion-end-multifile.ts.json b/packages/vitepress-plugin-twoslash/test/out/completion-end-multifile.ts.json
index 023e6b81c..cd5631376 100644
--- a/packages/vitepress-plugin-twoslash/test/out/completion-end-multifile.ts.json
+++ b/packages/vitepress-plugin-twoslash/test/out/completion-end-multifile.ts.json
@@ -92,11 +92,8 @@
                       "tagName": "v-menu",
                       "properties": {
                         "class": "twoslash-hover",
-                        "popper-class": "vp-code shiki floating-vue-twoslash vp-copy-ignore",
-                        "placement": "bottom-start",
-                        "theme": "twoslash",
-                        ":arrow-padding": "8",
-                        ":auto-boundary-max-size": "true"
+                        "popper-class": "shiki twoslash-floating vp-copy-ignore vp-code",
+                        "theme": "twoslash"
                       },
                       "children": [
                         {
@@ -436,11 +433,8 @@
                       "tagName": "v-menu",
                       "properties": {
                         "class": "twoslash-hover",
-                        "popper-class": "vp-code shiki floating-vue-twoslash vp-copy-ignore",
-                        "placement": "bottom-start",
-                        "theme": "twoslash",
-                        ":arrow-padding": "8",
-                        ":auto-boundary-max-size": "true"
+                        "popper-class": "shiki twoslash-floating vp-copy-ignore vp-code",
+                        "theme": "twoslash"
                       },
                       "children": [
                         {
@@ -969,11 +963,8 @@
                       "tagName": "v-menu",
                       "properties": {
                         "class": "twoslash-hover",
-                        "popper-class": "vp-code shiki floating-vue-twoslash vp-copy-ignore",
-                        "placement": "bottom-start",
-                        "theme": "twoslash",
-                        ":arrow-padding": "8",
-                        ":auto-boundary-max-size": "true"
+                        "popper-class": "shiki twoslash-floating vp-copy-ignore vp-code",
+                        "theme": "twoslash"
                       },
                       "children": [
                         {
@@ -1578,11 +1569,8 @@
                       "tagName": "v-menu",
                       "properties": {
                         "class": "twoslash-hover",
-                        "popper-class": "vp-code shiki floating-vue-twoslash vp-copy-ignore",
-                        "placement": "bottom-start",
-                        "theme": "twoslash",
-                        ":arrow-padding": "8",
-                        ":auto-boundary-max-size": "true"
+                        "popper-class": "shiki twoslash-floating vp-copy-ignore vp-code",
+                        "theme": "twoslash"
                       },
                       "children": [
                         {
@@ -1751,11 +1739,8 @@
                       "tagName": "v-menu",
                       "properties": {
                         "class": "twoslash-hover",
-                        "popper-class": "vp-code shiki floating-vue-twoslash vp-copy-ignore",
-                        "placement": "bottom-start",
-                        "theme": "twoslash",
-                        ":arrow-padding": "8",
-                        ":auto-boundary-max-size": "true"
+                        "popper-class": "shiki twoslash-floating vp-copy-ignore vp-code",
+                        "theme": "twoslash"
                       },
                       "children": [
                         {
@@ -2267,11 +2252,8 @@
                       "tagName": "v-menu",
                       "properties": {
                         "class": "twoslash-hover",
-                        "popper-class": "vp-code shiki floating-vue-twoslash vp-copy-ignore",
-                        "placement": "bottom-start",
-                        "theme": "twoslash",
-                        ":arrow-padding": "8",
-                        ":auto-boundary-max-size": "true"
+                        "popper-class": "shiki twoslash-floating vp-copy-ignore vp-code",
+                        "theme": "twoslash"
                       },
                       "children": [
                         {
@@ -2676,11 +2658,8 @@
                       "tagName": "v-menu",
                       "properties": {
                         "class": "twoslash-hover",
-                        "popper-class": "vp-code shiki floating-vue-twoslash vp-copy-ignore",
-                        "placement": "bottom-start",
-                        "theme": "twoslash",
-                        ":arrow-padding": "8",
-                        ":auto-boundary-max-size": "true"
+                        "popper-class": "shiki twoslash-floating vp-copy-ignore vp-code",
+                        "theme": "twoslash"
                       },
                       "children": [
                         {
@@ -2838,11 +2817,8 @@
                       "tagName": "v-menu",
                       "properties": {
                         "class": "twoslash-hover",
-                        "popper-class": "vp-code shiki floating-vue-twoslash vp-copy-ignore",
-                        "placement": "bottom-start",
-                        "theme": "twoslash",
-                        ":arrow-padding": "8",
-                        ":auto-boundary-max-size": "true"
+                        "popper-class": "shiki twoslash-floating vp-copy-ignore vp-code",
+                        "theme": "twoslash"
                       },
                       "children": [
                         {
@@ -3194,16 +3170,13 @@
                           "type": "element",
                           "tagName": "v-menu",
                           "properties": {
-                            "popper-class": "vp-code shiki floating-vue-twoslash-compeltion vp-copy-ignore",
-                            "placement": "bottom-start",
-                            "theme": "twoslash",
-                            ":distance": "0",
-                            ":arrow-overflow": "true",
-                            ":auto-boundary-max-size": "true",
-                            ":shown": "true",
-                            ":triggers": "[\"click\"]",
-                            ":popper-triggers": "[\"click\"]",
-                            ":auto-hide": "false"
+                            "popper-class": [
+                              "shiki twoslash-completion",
+                              "vp-copy-ignore",
+                              "twoslash-floating"
+                            ],
+                            "theme": "twoslash-completion",
+                            ":shown": "true"
                           },
                           "children": [
                             {
diff --git a/packages/vitepress-plugin-twoslash/test/out/completion-end.ts.json b/packages/vitepress-plugin-twoslash/test/out/completion-end.ts.json
index f3ec766e6..4efcdf77b 100644
--- a/packages/vitepress-plugin-twoslash/test/out/completion-end.ts.json
+++ b/packages/vitepress-plugin-twoslash/test/out/completion-end.ts.json
@@ -74,16 +74,13 @@
                           "type": "element",
                           "tagName": "v-menu",
                           "properties": {
-                            "popper-class": "vp-code shiki floating-vue-twoslash-compeltion vp-copy-ignore",
-                            "placement": "bottom-start",
-                            "theme": "twoslash",
-                            ":distance": "0",
-                            ":arrow-overflow": "true",
-                            ":auto-boundary-max-size": "true",
-                            ":shown": "true",
-                            ":triggers": "[\"click\"]",
-                            ":popper-triggers": "[\"click\"]",
-                            ":auto-hide": "false"
+                            "popper-class": [
+                              "shiki twoslash-completion",
+                              "vp-copy-ignore",
+                              "twoslash-floating"
+                            ],
+                            "theme": "twoslash-completion",
+                            ":shown": "true"
                           },
                           "children": [
                             {
@@ -280,11 +277,8 @@
                       "tagName": "v-menu",
                       "properties": {
                         "class": "twoslash-hover",
-                        "popper-class": "vp-code shiki floating-vue-twoslash vp-copy-ignore",
-                        "placement": "bottom-start",
-                        "theme": "twoslash",
-                        ":arrow-padding": "8",
-                        ":auto-boundary-max-size": "true"
+                        "popper-class": "shiki twoslash-floating vp-copy-ignore vp-code",
+                        "theme": "twoslash"
                       },
                       "children": [
                         {
@@ -718,11 +712,8 @@
                       "tagName": "v-menu",
                       "properties": {
                         "class": "twoslash-hover",
-                        "popper-class": "vp-code shiki floating-vue-twoslash vp-copy-ignore",
-                        "placement": "bottom-start",
-                        "theme": "twoslash",
-                        ":arrow-padding": "8",
-                        ":auto-boundary-max-size": "true"
+                        "popper-class": "shiki twoslash-floating vp-copy-ignore vp-code",
+                        "theme": "twoslash"
                       },
                       "children": [
                         {
@@ -1314,11 +1305,8 @@
                       "tagName": "v-menu",
                       "properties": {
                         "class": "twoslash-hover",
-                        "popper-class": "vp-code shiki floating-vue-twoslash vp-copy-ignore",
-                        "placement": "bottom-start",
-                        "theme": "twoslash",
-                        ":arrow-padding": "8",
-                        ":auto-boundary-max-size": "true"
+                        "popper-class": "shiki twoslash-floating vp-copy-ignore vp-code",
+                        "theme": "twoslash"
                       },
                       "children": [
                         {
@@ -1725,11 +1713,8 @@
                       "tagName": "v-menu",
                       "properties": {
                         "class": "twoslash-hover",
-                        "popper-class": "vp-code shiki floating-vue-twoslash vp-copy-ignore",
-                        "placement": "bottom-start",
-                        "theme": "twoslash",
-                        ":arrow-padding": "8",
-                        ":auto-boundary-max-size": "true"
+                        "popper-class": "shiki twoslash-floating vp-copy-ignore vp-code",
+                        "theme": "twoslash"
                       },
                       "children": [
                         {
@@ -2160,16 +2145,13 @@
                           "type": "element",
                           "tagName": "v-menu",
                           "properties": {
-                            "popper-class": "vp-code shiki floating-vue-twoslash-compeltion vp-copy-ignore",
-                            "placement": "bottom-start",
-                            "theme": "twoslash",
-                            ":distance": "0",
-                            ":arrow-overflow": "true",
-                            ":auto-boundary-max-size": "true",
-                            ":shown": "true",
-                            ":triggers": "[\"click\"]",
-                            ":popper-triggers": "[\"click\"]",
-                            ":auto-hide": "false"
+                            "popper-class": [
+                              "shiki twoslash-completion",
+                              "vp-copy-ignore",
+                              "twoslash-floating"
+                            ],
+                            "theme": "twoslash-completion",
+                            ":shown": "true"
                           },
                           "children": [
                             {
@@ -2324,11 +2306,8 @@
                       "tagName": "v-menu",
                       "properties": {
                         "class": "twoslash-hover",
-                        "popper-class": "vp-code shiki floating-vue-twoslash vp-copy-ignore",
-                        "placement": "bottom-start",
-                        "theme": "twoslash",
-                        ":arrow-padding": "8",
-                        ":auto-boundary-max-size": "true"
+                        "popper-class": "shiki twoslash-floating vp-copy-ignore vp-code",
+                        "theme": "twoslash"
                       },
                       "children": [
                         {
@@ -2751,11 +2730,8 @@
                       "tagName": "v-menu",
                       "properties": {
                         "class": "twoslash-hover",
-                        "popper-class": "vp-code shiki floating-vue-twoslash vp-copy-ignore",
-                        "placement": "bottom-start",
-                        "theme": "twoslash",
-                        ":arrow-padding": "8",
-                        ":auto-boundary-max-size": "true"
+                        "popper-class": "shiki twoslash-floating vp-copy-ignore vp-code",
+                        "theme": "twoslash"
                       },
                       "children": [
                         {
@@ -3107,16 +3083,13 @@
                           "type": "element",
                           "tagName": "v-menu",
                           "properties": {
-                            "popper-class": "vp-code shiki floating-vue-twoslash-compeltion vp-copy-ignore",
-                            "placement": "bottom-start",
-                            "theme": "twoslash",
-                            ":distance": "0",
-                            ":arrow-overflow": "true",
-                            ":auto-boundary-max-size": "true",
-                            ":shown": "true",
-                            ":triggers": "[\"click\"]",
-                            ":popper-triggers": "[\"click\"]",
-                            ":auto-hide": "false"
+                            "popper-class": [
+                              "shiki twoslash-completion",
+                              "vp-copy-ignore",
+                              "twoslash-floating"
+                            ],
+                            "theme": "twoslash-completion",
+                            ":shown": "true"
                           },
                           "children": [
                             {
@@ -3405,11 +3378,8 @@
                       "tagName": "v-menu",
                       "properties": {
                         "class": "twoslash-hover",
-                        "popper-class": "vp-code shiki floating-vue-twoslash vp-copy-ignore",
-                        "placement": "bottom-start",
-                        "theme": "twoslash",
-                        ":arrow-padding": "8",
-                        ":auto-boundary-max-size": "true"
+                        "popper-class": "shiki twoslash-floating vp-copy-ignore vp-code",
+                        "theme": "twoslash"
                       },
                       "children": [
                         {
@@ -3832,11 +3802,8 @@
                       "tagName": "v-menu",
                       "properties": {
                         "class": "twoslash-hover",
-                        "popper-class": "vp-code shiki floating-vue-twoslash vp-copy-ignore",
-                        "placement": "bottom-start",
-                        "theme": "twoslash",
-                        ":arrow-padding": "8",
-                        ":auto-boundary-max-size": "true"
+                        "popper-class": "shiki twoslash-floating vp-copy-ignore vp-code",
+                        "theme": "twoslash"
                       },
                       "children": [
                         {
@@ -4186,16 +4153,13 @@
                           "type": "element",
                           "tagName": "v-menu",
                           "properties": {
-                            "popper-class": "vp-code shiki floating-vue-twoslash-compeltion vp-copy-ignore",
-                            "placement": "bottom-start",
-                            "theme": "twoslash",
-                            ":distance": "0",
-                            ":arrow-overflow": "true",
-                            ":auto-boundary-max-size": "true",
-                            ":shown": "true",
-                            ":triggers": "[\"click\"]",
-                            ":popper-triggers": "[\"click\"]",
-                            ":auto-hide": "false"
+                            "popper-class": [
+                              "shiki twoslash-completion",
+                              "vp-copy-ignore",
+                              "twoslash-floating"
+                            ],
+                            "theme": "twoslash-completion",
+                            ":shown": "true"
                           },
                           "children": [
                             {
@@ -4417,11 +4381,8 @@
                       "tagName": "v-menu",
                       "properties": {
                         "class": "twoslash-hover",
-                        "popper-class": "vp-code shiki floating-vue-twoslash vp-copy-ignore",
-                        "placement": "bottom-start",
-                        "theme": "twoslash",
-                        ":arrow-padding": "8",
-                        ":auto-boundary-max-size": "true"
+                        "popper-class": "shiki twoslash-floating vp-copy-ignore vp-code",
+                        "theme": "twoslash"
                       },
                       "children": [
                         {
@@ -4844,11 +4805,8 @@
                       "tagName": "v-menu",
                       "properties": {
                         "class": "twoslash-hover",
-                        "popper-class": "vp-code shiki floating-vue-twoslash vp-copy-ignore",
-                        "placement": "bottom-start",
-                        "theme": "twoslash",
-                        ":arrow-padding": "8",
-                        ":auto-boundary-max-size": "true"
+                        "popper-class": "shiki twoslash-floating vp-copy-ignore vp-code",
+                        "theme": "twoslash"
                       },
                       "children": [
                         {
@@ -5213,16 +5171,13 @@
                           "type": "element",
                           "tagName": "v-menu",
                           "properties": {
-                            "popper-class": "vp-code shiki floating-vue-twoslash-compeltion vp-copy-ignore",
-                            "placement": "bottom-start",
-                            "theme": "twoslash",
-                            ":distance": "0",
-                            ":arrow-overflow": "true",
-                            ":auto-boundary-max-size": "true",
-                            ":shown": "true",
-                            ":triggers": "[\"click\"]",
-                            ":popper-triggers": "[\"click\"]",
-                            ":auto-hide": "false"
+                            "popper-class": [
+                              "shiki twoslash-completion",
+                              "vp-copy-ignore",
+                              "twoslash-floating"
+                            ],
+                            "theme": "twoslash-completion",
+                            ":shown": "true"
                           },
                           "children": [
                             {
@@ -5470,11 +5425,8 @@
                       "tagName": "v-menu",
                       "properties": {
                         "class": "twoslash-hover",
-                        "popper-class": "vp-code shiki floating-vue-twoslash vp-copy-ignore",
-                        "placement": "bottom-start",
-                        "theme": "twoslash",
-                        ":arrow-padding": "8",
-                        ":auto-boundary-max-size": "true"
+                        "popper-class": "shiki twoslash-floating vp-copy-ignore vp-code",
+                        "theme": "twoslash"
                       },
                       "children": [
                         {
@@ -5897,11 +5849,8 @@
                       "tagName": "v-menu",
                       "properties": {
                         "class": "twoslash-hover",
-                        "popper-class": "vp-code shiki floating-vue-twoslash vp-copy-ignore",
-                        "placement": "bottom-start",
-                        "theme": "twoslash",
-                        ":arrow-padding": "8",
-                        ":auto-boundary-max-size": "true"
+                        "popper-class": "shiki twoslash-floating vp-copy-ignore vp-code",
+                        "theme": "twoslash"
                       },
                       "children": [
                         {
@@ -6253,16 +6202,13 @@
                           "type": "element",
                           "tagName": "v-menu",
                           "properties": {
-                            "popper-class": "vp-code shiki floating-vue-twoslash-compeltion vp-copy-ignore",
-                            "placement": "bottom-start",
-                            "theme": "twoslash",
-                            ":distance": "0",
-                            ":arrow-overflow": "true",
-                            ":auto-boundary-max-size": "true",
-                            ":shown": "true",
-                            ":triggers": "[\"click\"]",
-                            ":popper-triggers": "[\"click\"]",
-                            ":auto-hide": "false"
+                            "popper-class": [
+                              "shiki twoslash-completion",
+                              "vp-copy-ignore",
+                              "twoslash-floating"
+                            ],
+                            "theme": "twoslash-completion",
+                            ":shown": "true"
                           },
                           "children": [
                             {
diff --git a/packages/vitepress-plugin-twoslash/test/out/completion-string.ts.json b/packages/vitepress-plugin-twoslash/test/out/completion-string.ts.json
index ce3e31e1d..33a8c074c 100644
--- a/packages/vitepress-plugin-twoslash/test/out/completion-string.ts.json
+++ b/packages/vitepress-plugin-twoslash/test/out/completion-string.ts.json
@@ -66,11 +66,8 @@
                       "tagName": "v-menu",
                       "properties": {
                         "class": "twoslash-hover",
-                        "popper-class": "vp-code shiki floating-vue-twoslash vp-copy-ignore",
-                        "placement": "bottom-start",
-                        "theme": "twoslash",
-                        ":arrow-padding": "8",
-                        ":auto-boundary-max-size": "true"
+                        "popper-class": "shiki twoslash-floating vp-copy-ignore vp-code",
+                        "theme": "twoslash"
                       },
                       "children": [
                         {
@@ -696,11 +693,8 @@
                       "tagName": "v-menu",
                       "properties": {
                         "class": "twoslash-hover",
-                        "popper-class": "vp-code shiki floating-vue-twoslash vp-copy-ignore",
-                        "placement": "bottom-start",
-                        "theme": "twoslash",
-                        ":arrow-padding": "8",
-                        ":auto-boundary-max-size": "true"
+                        "popper-class": "shiki twoslash-floating vp-copy-ignore vp-code",
+                        "theme": "twoslash"
                       },
                       "children": [
                         {
@@ -1065,16 +1059,13 @@
                           "type": "element",
                           "tagName": "v-menu",
                           "properties": {
-                            "popper-class": "vp-code shiki floating-vue-twoslash-compeltion vp-copy-ignore",
-                            "placement": "bottom-start",
-                            "theme": "twoslash",
-                            ":distance": "0",
-                            ":arrow-overflow": "true",
-                            ":auto-boundary-max-size": "true",
-                            ":shown": "true",
-                            ":triggers": "[\"click\"]",
-                            ":popper-triggers": "[\"click\"]",
-                            ":auto-hide": "false"
+                            "popper-class": [
+                              "shiki twoslash-completion",
+                              "vp-copy-ignore",
+                              "twoslash-floating"
+                            ],
+                            "theme": "twoslash-completion",
+                            ":shown": "true"
                           },
                           "children": [
                             {
diff --git a/packages/vitepress-plugin-twoslash/test/out/highlights.ts.json b/packages/vitepress-plugin-twoslash/test/out/highlights.ts.json
index f5c28de36..67f1d14e7 100644
--- a/packages/vitepress-plugin-twoslash/test/out/highlights.ts.json
+++ b/packages/vitepress-plugin-twoslash/test/out/highlights.ts.json
@@ -73,11 +73,8 @@
                           "tagName": "v-menu",
                           "properties": {
                             "class": "twoslash-hover",
-                            "popper-class": "vp-code shiki floating-vue-twoslash vp-copy-ignore",
-                            "placement": "bottom-start",
-                            "theme": "twoslash",
-                            ":arrow-padding": "8",
-                            ":auto-boundary-max-size": "true"
+                            "popper-class": "shiki twoslash-floating vp-copy-ignore vp-code",
+                            "theme": "twoslash"
                           },
                           "children": [
                             {
@@ -557,11 +554,8 @@
                           "tagName": "v-menu",
                           "properties": {
                             "class": "twoslash-hover",
-                            "popper-class": "vp-code shiki floating-vue-twoslash vp-copy-ignore",
-                            "placement": "bottom-start",
-                            "theme": "twoslash",
-                            ":arrow-padding": "8",
-                            ":auto-boundary-max-size": "true"
+                            "popper-class": "shiki twoslash-floating vp-copy-ignore vp-code",
+                            "theme": "twoslash"
                           },
                           "children": [
                             {
@@ -734,11 +728,8 @@
                       "tagName": "v-menu",
                       "properties": {
                         "class": "twoslash-hover",
-                        "popper-class": "vp-code shiki floating-vue-twoslash vp-copy-ignore",
-                        "placement": "bottom-start",
-                        "theme": "twoslash",
-                        ":arrow-padding": "8",
-                        ":auto-boundary-max-size": "true"
+                        "popper-class": "shiki twoslash-floating vp-copy-ignore vp-code",
+                        "theme": "twoslash"
                       },
                       "children": [
                         {
@@ -1056,11 +1047,8 @@
                           "tagName": "v-menu",
                           "properties": {
                             "class": "twoslash-hover",
-                            "popper-class": "vp-code shiki floating-vue-twoslash vp-copy-ignore",
-                            "placement": "bottom-start",
-                            "theme": "twoslash",
-                            ":arrow-padding": "8",
-                            ":auto-boundary-max-size": "true"
+                            "popper-class": "shiki twoslash-floating vp-copy-ignore vp-code",
+                            "theme": "twoslash"
                           },
                           "children": [
                             {
@@ -1233,11 +1221,8 @@
                       "tagName": "v-menu",
                       "properties": {
                         "class": "twoslash-hover",
-                        "popper-class": "vp-code shiki floating-vue-twoslash vp-copy-ignore",
-                        "placement": "bottom-start",
-                        "theme": "twoslash",
-                        ":arrow-padding": "8",
-                        ":auto-boundary-max-size": "true"
+                        "popper-class": "shiki twoslash-floating vp-copy-ignore vp-code",
+                        "theme": "twoslash"
                       },
                       "children": [
                         {
@@ -1511,11 +1496,8 @@
                       "tagName": "v-menu",
                       "properties": {
                         "class": "twoslash-hover",
-                        "popper-class": "vp-code shiki floating-vue-twoslash vp-copy-ignore",
-                        "placement": "bottom-start",
-                        "theme": "twoslash",
-                        ":arrow-padding": "8",
-                        ":auto-boundary-max-size": "true"
+                        "popper-class": "shiki twoslash-floating vp-copy-ignore vp-code",
+                        "theme": "twoslash"
                       },
                       "children": [
                         {
@@ -1673,11 +1655,8 @@
                       "tagName": "v-menu",
                       "properties": {
                         "class": "twoslash-hover",
-                        "popper-class": "vp-code shiki floating-vue-twoslash vp-copy-ignore",
-                        "placement": "bottom-start",
-                        "theme": "twoslash",
-                        ":arrow-padding": "8",
-                        ":auto-boundary-max-size": "true"
+                        "popper-class": "shiki twoslash-floating vp-copy-ignore vp-code",
+                        "theme": "twoslash"
                       },
                       "children": [
                         {
diff --git a/packages/vitepress-plugin-twoslash/test/out/import-vue.ts.json b/packages/vitepress-plugin-twoslash/test/out/import-vue.ts.json
index db55a8632..4e5974896 100644
--- a/packages/vitepress-plugin-twoslash/test/out/import-vue.ts.json
+++ b/packages/vitepress-plugin-twoslash/test/out/import-vue.ts.json
@@ -92,11 +92,8 @@
                       "tagName": "v-menu",
                       "properties": {
                         "class": "twoslash-hover",
-                        "popper-class": "vp-code shiki floating-vue-twoslash vp-copy-ignore",
-                        "placement": "bottom-start",
-                        "theme": "twoslash",
-                        ":arrow-padding": "8",
-                        ":auto-boundary-max-size": "true"
+                        "popper-class": "shiki twoslash-floating vp-copy-ignore vp-code",
+                        "theme": "twoslash"
                       },
                       "children": [
                         {
@@ -838,11 +835,8 @@
                       "tagName": "v-menu",
                       "properties": {
                         "class": "twoslash-hover",
-                        "popper-class": "vp-code shiki floating-vue-twoslash vp-copy-ignore",
-                        "placement": "bottom-start",
-                        "theme": "twoslash",
-                        ":arrow-padding": "8",
-                        ":auto-boundary-max-size": "true"
+                        "popper-class": "shiki twoslash-floating vp-copy-ignore vp-code",
+                        "theme": "twoslash"
                       },
                       "children": [
                         {
@@ -1065,11 +1059,8 @@
                       "tagName": "v-menu",
                       "properties": {
                         "class": "twoslash-hover",
-                        "popper-class": "vp-code shiki floating-vue-twoslash vp-copy-ignore",
-                        "placement": "bottom-start",
-                        "theme": "twoslash",
-                        ":arrow-padding": "8",
-                        ":auto-boundary-max-size": "true"
+                        "popper-class": "shiki twoslash-floating vp-copy-ignore vp-code",
+                        "theme": "twoslash"
                       },
                       "children": [
                         {
diff --git a/packages/vitepress-plugin-twoslash/test/out/query-offset.ts.json b/packages/vitepress-plugin-twoslash/test/out/query-offset.ts.json
index 9399360b2..50e30a735 100644
--- a/packages/vitepress-plugin-twoslash/test/out/query-offset.ts.json
+++ b/packages/vitepress-plugin-twoslash/test/out/query-offset.ts.json
@@ -64,15 +64,8 @@
                       "tagName": "v-menu",
                       "properties": {
                         "class": "twoslash-hover",
-                        "popper-class": "vp-code shiki floating-vue-twoslash vp-copy-ignore",
-                        "placement": "bottom-start",
-                        "theme": "twoslash",
-                        ":arrow-padding": "8",
-                        ":auto-boundary-max-size": "true",
-                        ":shown": "true",
-                        ":triggers": "[\"click\"]",
-                        ":popper-triggers": "[\"click\"]",
-                        ":auto-hide": "false"
+                        "popper-class": "shiki twoslash-floating vp-copy-ignore vp-code",
+                        "theme": "twoslash-query"
                       },
                       "children": [
                         {
@@ -402,15 +395,8 @@
                       "tagName": "v-menu",
                       "properties": {
                         "class": "twoslash-hover",
-                        "popper-class": "vp-code shiki floating-vue-twoslash vp-copy-ignore",
-                        "placement": "bottom-start",
-                        "theme": "twoslash",
-                        ":arrow-padding": "8",
-                        ":auto-boundary-max-size": "true",
-                        ":shown": "true",
-                        ":triggers": "[\"click\"]",
-                        ":popper-triggers": "[\"click\"]",
-                        ":auto-hide": "false"
+                        "popper-class": "shiki twoslash-floating vp-copy-ignore vp-code",
+                        "theme": "twoslash-query"
                       },
                       "children": [
                         {
@@ -740,15 +726,8 @@
                       "tagName": "v-menu",
                       "properties": {
                         "class": "twoslash-hover",
-                        "popper-class": "vp-code shiki floating-vue-twoslash vp-copy-ignore",
-                        "placement": "bottom-start",
-                        "theme": "twoslash",
-                        ":arrow-padding": "8",
-                        ":auto-boundary-max-size": "true",
-                        ":shown": "true",
-                        ":triggers": "[\"click\"]",
-                        ":popper-triggers": "[\"click\"]",
-                        ":auto-hide": "false"
+                        "popper-class": "shiki twoslash-floating vp-copy-ignore vp-code",
+                        "theme": "twoslash-query"
                       },
                       "children": [
                         {