@shikijs/vitepress-twoslash 1.0.0-beta.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2021 Pine Wu
+Copyright (c) 2023 Anthony Fu <https://github.com/antfu>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,9 @@
+# @shikijs/vitepress-twoslash
+
+Enable Twoslash support in VitePress.
+
+[Documentation](https://shiki.style/packages/vitepress#twoslash)
+
+## License
+
+MIT

package/dist/client.d.mts

@@ -0,0 +1,14 @@
+import { App } from 'vue';
+import FloatingVue from 'floating-vue';
+
+type FloatingVueConfig = Parameters<(typeof FloatingVue)['install']>[1];
+/**
+ * Vue plugin to install FloatingVue with styles.
+ *
+ * Import this function in `.vitepress/theme/index.ts` and use `app.use(TwoslashFloatingVue)` inside the `enhanceApp` hook.
+ */
+declare const TwoslashFloatingVue: {
+    install: (app: App, options?: FloatingVueConfig) => void;
+};
+
+export { type FloatingVueConfig, TwoslashFloatingVue as default };

package/dist/client.d.ts

@@ -0,0 +1,14 @@
+import { App } from 'vue';
+import FloatingVue from 'floating-vue';
+
+type FloatingVueConfig = Parameters<(typeof FloatingVue)['install']>[1];
+/**
+ * Vue plugin to install FloatingVue with styles.
+ *
+ * Import this function in `.vitepress/theme/index.ts` and use `app.use(TwoslashFloatingVue)` inside the `enhanceApp` hook.
+ */
+declare const TwoslashFloatingVue: {
+    install: (app: App, options?: FloatingVueConfig) => void;
+};
+
+export { type FloatingVueConfig, TwoslashFloatingVue as default };

package/dist/client.mjs

@@ -0,0 +1,50 @@
+import FloatingVue, { recomputeAllPoppers } from 'floating-vue';
+
+const isMobile = typeof navigator !== "undefined" && /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+const TwoslashFloatingVue = {
+  install: (app, options = {}) => {
+    if (typeof window !== "undefined") {
+      window.addEventListener("click", (e) => {
+        const path = e.composedPath();
+        if (path.some((el) => el?.classList?.contains?.("vp-code-group") || el?.classList?.contains?.("tabs")))
+          recomputeAllPoppers();
+      }, { passive: true });
+    }
+    app.use(FloatingVue, {
+      ...options,
+      themes: {
+        "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
+      }
+    });
+  }
+};
+
+export { TwoslashFloatingVue as default };

package/dist/index.d.mts

@@ -0,0 +1,37 @@
+import { TransformerTwoslashOptions } from '@shikijs/twoslash/core';
+import { ShikiTransformer } from 'shiki';
+import { RendererRichOptions, TwoslashRenderer } from '@shikijs/twoslash';
+export { defaultHoverInfoProcessor } from '@shikijs/twoslash';
+
+interface TwoslashFloatingVueOptions {
+    classCopyIgnore?: string;
+    classFloatingPanel?: string;
+    classCode?: string;
+    classMarkdown?: string;
+    floatingVueTheme?: string;
+    floatingVueThemeQuery?: string;
+    floatingVueThemeCompletion?: string;
+}
+interface TwoslashFloatingVueRendererOptions extends RendererRichOptions {
+    /**
+     * Class and themes for floating-vue specific nodes
+     */
+    floatingVue?: TwoslashFloatingVueOptions;
+}
+declare function rendererFloatingVue(options?: TwoslashFloatingVueRendererOptions): TwoslashRenderer;
+
+interface VitePressPluginTwoslashOptions extends TransformerTwoslashOptions, TwoslashFloatingVueRendererOptions {
+    /**
+     * Requires adding `twoslash` to the code block explicitly to run twoslash
+     * @default true
+     */
+    explicitTrigger?: boolean;
+}
+/**
+ * Create a Shiki transformer for VitePress to enable twoslash integration
+ *
+ * Add this to `markdown.codeTransformers` in `.vitepress/config.ts`
+ */
+declare function transformerTwoslash(options?: VitePressPluginTwoslashOptions): ShikiTransformer;
+
+export { type TwoslashFloatingVueOptions, type TwoslashFloatingVueRendererOptions, type VitePressPluginTwoslashOptions, rendererFloatingVue, transformerTwoslash };

package/dist/index.d.ts

@@ -0,0 +1,37 @@
+import { TransformerTwoslashOptions } from '@shikijs/twoslash/core';
+import { ShikiTransformer } from 'shiki';
+import { RendererRichOptions, TwoslashRenderer } from '@shikijs/twoslash';
+export { defaultHoverInfoProcessor } from '@shikijs/twoslash';
+
+interface TwoslashFloatingVueOptions {
+    classCopyIgnore?: string;
+    classFloatingPanel?: string;
+    classCode?: string;
+    classMarkdown?: string;
+    floatingVueTheme?: string;
+    floatingVueThemeQuery?: string;
+    floatingVueThemeCompletion?: string;
+}
+interface TwoslashFloatingVueRendererOptions extends RendererRichOptions {
+    /**
+     * Class and themes for floating-vue specific nodes
+     */
+    floatingVue?: TwoslashFloatingVueOptions;
+}
+declare function rendererFloatingVue(options?: TwoslashFloatingVueRendererOptions): TwoslashRenderer;
+
+interface VitePressPluginTwoslashOptions extends TransformerTwoslashOptions, TwoslashFloatingVueRendererOptions {
+    /**
+     * Requires adding `twoslash` to the code block explicitly to run twoslash
+     * @default true
+     */
+    explicitTrigger?: boolean;
+}
+/**
+ * Create a Shiki transformer for VitePress to enable twoslash integration
+ *
+ * Add this to `markdown.codeTransformers` in `.vitepress/config.ts`
+ */
+declare function transformerTwoslash(options?: VitePressPluginTwoslashOptions): ShikiTransformer;
+
+export { type TwoslashFloatingVueOptions, type TwoslashFloatingVueRendererOptions, type VitePressPluginTwoslashOptions, rendererFloatingVue, transformerTwoslash };

package/dist/index.mjs

@@ -0,0 +1,176 @@
+import { createTransformerFactory } from '@shikijs/twoslash/core';
+import { createTwoslasher } from 'twoslash-vue';
+import { rendererRich } from '@shikijs/twoslash';
+export { defaultHoverInfoProcessor } from '@shikijs/twoslash';
+import { gfmFromMarkdown } from 'mdast-util-gfm';
+import { fromMarkdown } from 'mdast-util-from-markdown';
+import { toHast, defaultHandlers } from 'mdast-util-to-hast';
+
+function rendererFloatingVue(options = {}) {
+  const {
+    classCopyIgnore = "vp-copy-ignore",
+    classFloatingPanel = "twoslash-floating",
+    classCode = "vp-code",
+    classMarkdown = "vp-doc",
+    floatingVueTheme = "twoslash",
+    floatingVueThemeQuery = "twoslash-query",
+    floatingVueThemeCompletion = "twoslash-completion"
+  } = options.floatingVue || {};
+  const hoverBasicProps = {
+    "class": "twoslash-hover",
+    "popper-class": ["shiki", classFloatingPanel, classCopyIgnore, classCode].join(" "),
+    "theme": floatingVueTheme
+  };
+  function compose(parts) {
+    return [
+      {
+        type: "element",
+        tagName: "span",
+        properties: {},
+        children: [parts.token]
+      },
+      {
+        type: "element",
+        tagName: "template",
+        properties: {
+          "v-slot:popper": "{}"
+        },
+        content: {
+          type: "root",
+          children: [vPre(parts.popup)]
+        },
+        children: []
+      }
+    ];
+  }
+  const rich = rendererRich({
+    classExtra: classCopyIgnore,
+    ...options,
+    renderMarkdown,
+    renderMarkdownInline,
+    hast: {
+      hoverToken: {
+        tagName: "v-menu",
+        properties: hoverBasicProps
+      },
+      hoverCompose: compose,
+      queryToken: {
+        tagName: "v-menu",
+        properties: {
+          ...hoverBasicProps,
+          theme: floatingVueThemeQuery
+        }
+      },
+      queryCompose: compose,
+      popupDocs: {
+        class: `twoslash-popup-docs ${classMarkdown}`
+      },
+      popupDocsTags: {
+        class: `twoslash-popup-docs twoslash-popup-docs-tags ${classMarkdown}`
+      },
+      completionCompose({ popup, cursor }) {
+        return [
+          {
+            type: "element",
+            tagName: "v-menu",
+            properties: {
+              "popper-class": ["shiki twoslash-completion", classCopyIgnore, classFloatingPanel],
+              "theme": floatingVueThemeCompletion,
+              ":shown": "true"
+            },
+            children: [
+              cursor,
+              {
+                type: "element",
+                tagName: "template",
+                properties: {
+                  "v-slot:popper": "{}"
+                },
+                content: {
+                  type: "root",
+                  children: [vPre(popup)]
+                }
+              }
+            ]
+          }
+        ];
+      }
+    }
+  });
+  return rich;
+}
+function vPre(el) {
+  if (el.type === "element") {
+    el.properties = el.properties || {};
+    el.properties["v-pre"] = "";
+  }
+  return el;
+}
+function renderMarkdown(md) {
+  const mdast = fromMarkdown(
+    md.replace(/{@link ([^}]*)}/g, "$1"),
+    // replace jsdoc links
+    { mdastExtensions: [gfmFromMarkdown()] }
+  );
+  return toHast(
+    mdast,
+    {
+      handlers: {
+        code: (state, node) => {
+          const lang = node.lang || "";
+          if (lang) {
+            return this.codeToHast(
+              node.value,
+              {
+                ...this.options,
+                transformers: [],
+                lang
+              }
+            ).children[0];
+          }
+          return defaultHandlers.code(state, node);
+        }
+      }
+    }
+  ).children;
+}
+function renderMarkdownInline(md, context) {
+  if (context === "tag:param")
+    md = md.replace(/^([\w$-]+)/, "`$1` ");
+  const children = renderMarkdown.call(this, md);
+  if (children.length === 1 && children[0].type === "element" && children[0].tagName === "p")
+    return children[0].children;
+  return children;
+}
+
+function transformerTwoslash(options = {}) {
+  const twoslash = createTransformerFactory(
+    createTwoslasher()
+  )({
+    langs: ["ts", "tsx", "js", "jsx", "json", "vue"],
+    explicitTrigger: true,
+    renderer: rendererFloatingVue(options),
+    ...options
+  });
+  return {
+    ...twoslash,
+    name: "@shikijs/vitepress-twoslash",
+    preprocess(code, options2) {
+      const cleanup = options2.transformers?.find((i) => i.name === "vitepress:clean-up");
+      if (cleanup)
+        options2.transformers?.splice(options2.transformers.indexOf(cleanup), 1);
+      if (options2.meta?.__raw?.includes("twoslash")) {
+        const vPre = options2.transformers?.find((i) => i.name === "vitepress:v-pre");
+        if (vPre)
+          options2.transformers?.splice(options2.transformers.indexOf(vPre), 1);
+      }
+      return twoslash.preprocess.call(this, code, options2);
+    },
+    postprocess(html) {
+      if (this.meta.twoslash)
+        return html.replace(/{/g, "{");
+    }
+  };
+}
+
+export { rendererFloatingVue, transformerTwoslash };

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@shikijs/vitepress-twoslash",
+  "type": "module",
+  "version": "1.0.0-beta.0",
+  "description": "Enable Twoslash support in VitePress",
+  "author": "Anthony Fu <anthonyfu117@hotmail.com>",
+  "license": "MIT",
+  "homepage": "https://github.com/shikijs/shiki#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/shikijs/shiki.git",
+    "directory": "packages/vitepress-twoslash"
+  },
+  "bugs": "https://github.com/shikijs/shiki/issues",
+  "keywords": [
+    "shiki",
+    "twoslash",
+    "vitepress-plugin"
+  ],
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "default": "./dist/index.mjs"
+    },
+    "./client": {
+      "types": "./dist/client.d.mts",
+      "default": "./dist/client.mjs"
+    },
+    "./style.css": "./style.css",
+    "./style-core.css": "./style-core.css"
+  },
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "typesVersions": {
+    "*": {
+      "./client": [
+        "./dist/client.d.mts"
+      ],
+      "*": [
+        "./dist/index.d.mts"
+      ]
+    }
+  },
+  "files": [
+    "*.css",
+    "dist"
+  ],
+  "dependencies": {
+    "floating-vue": "^5.2.0",
+    "mdast-util-from-markdown": "^2.0.0",
+    "mdast-util-gfm": "^3.0.0",
+    "mdast-util-to-hast": "^13.1.0",
+    "twoslash-vue": "^0.1.0",
+    "vue": "^3.4.15",
+    "@shikijs/twoslash": "1.0.0-beta.0",
+    "shiki": "1.0.0-beta.0"
+  },
+  "scripts": {
+    "build": "unbuild",
+    "dev": "unbuild --stub"
+  }
+}

package/style-core.css

@@ -0,0 +1,121 @@
+:root {
+  --twoslash-popup-bg: var(--vp-c-bg, inherit);
+  --twoslash-popup-color: var(--vp-c-text-1);
+  --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 {
+  z-index: calc(var(--vp-z-index-local-nav) - 1);
+}
+
+.v-popper--theme-twoslash .v-popper__inner {
+  background: var(--twoslash-popup-bg);
+  color: var(--twoslash-popup-color);
+  border-color: var(--twoslash-border-color);
+}
+
+.v-popper--theme-twoslash .v-popper__arrow-outer {
+  border-color: var(--twoslash-border-color);
+}
+
+.v-popper--theme-twoslash .v-popper__arrow-inner {
+  border-color: var(--twoslash-popup-bg);
+}
+
+.twoslash-popup-container {
+  transform: translateY(1.5em);
+}
+
+.twoslash-query-presisted .twoslash-popup-container {
+  transform: translateY(1.8em);
+}
+
+.twoslash .v-popper {
+  display: inline-block;
+}
+
+.twoslash-completion-list .twoslash-completions-icon {
+  color: var(--twoslash-unmatched-color) !important;
+}
+
+.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(--twoslash-code-size);
+  transition: color 0.5s;
+  white-space: pre-wrap;
+}
+
+.twoslash-floating .twoslash-popup-docs {
+  border-top: 1px solid var(--twoslash-border-color);
+  color: var(--twoslash-docs-color);
+  padding: 0px 12px 0px 12px !important;
+  font-family: var(--twoslash-docs-font);
+  font-size: 0.9em;
+  max-height: 500px;
+  max-width: 700px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  text-wrap: balance;
+}
+
+.twoslash-floating .twoslash-popup-docs p {
+  margin: 0;
+  padding: 6px 0;
+  text-wrap: balance;
+}
+
+.twoslash-floating .twoslash-popup-docs pre {
+  background-color: var(--vp-code-block-bg);
+  border-radius: 8px;
+  padding: 12px;
+  margin: 6px -2px;
+  overflow-x: auto;
+}
+
+.twoslash-floating .twoslash-popup-docs-tags {
+  display: flex;
+  flex-direction: column;
+  padding: 8px 12px !important;
+}
+
+.twoslash-floating .twoslash-popup-docs-tags .twoslash-popup-docs-tag-name {
+  font-family: var(--twoslash-code-font);
+  color: var(--twoslash-unmatched-color);
+  margin-right: 0.5em;
+}
+
+.twoslash-completion-cursor {
+  height: 1.2em;
+  width: 2px;
+  margin-bottom: -0.2em;
+  background: var(--twoslash-cursor-color);
+  display: inline-block;
+  user-select: none;
+}
+
+.twoslash-floating.twoslash-completion .v-popper__arrow-container {
+  display: none;
+}
+
+.twoslash-floating.twoslash-completion .twoslash-completion-list {
+  padding: 6px;
+  font-family: var(--twoslash-code-font);
+  font-size: var(--twoslash-code-size) !important;
+}
+
+.twoslash-floating.twoslash-completion .twoslash-completion-list li {
+  padding: 3px 0;
+}

package/style.css

@@ -0,0 +1,382 @@
+/* BUNDLED FROM floating-vue/dist/style.css */
+.resize-observer[data-v-b329ee4c]{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;border:none;background-color:transparent;pointer-events:none;display:block;overflow:hidden;opacity:0}.resize-observer[data-v-b329ee4c] object{display:block;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1}.v-popper__popper{z-index:10000;top:0;left:0;outline:none}.v-popper__popper.v-popper__popper--hidden{visibility:hidden;opacity:0;transition:opacity .15s,visibility .15s;pointer-events:none}.v-popper__popper.v-popper__popper--shown{visibility:visible;opacity:1;transition:opacity .15s}.v-popper__popper.v-popper__popper--skip-transition,.v-popper__popper.v-popper__popper--skip-transition>.v-popper__wrapper{transition:none!important}.v-popper__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;display:none}.v-popper__inner{position:relative;box-sizing:border-box;overflow-y:auto}.v-popper__inner>div{position:relative;z-index:1;max-width:inherit;max-height:inherit}.v-popper__arrow-container{position:absolute;width:10px;height:10px}.v-popper__popper--arrow-overflow .v-popper__arrow-container,.v-popper__popper--no-positioning .v-popper__arrow-container{display:none}.v-popper__arrow-inner,.v-popper__arrow-outer{border-style:solid;position:absolute;top:0;left:0;width:0;height:0}.v-popper__arrow-inner{visibility:hidden;border-width:7px}.v-popper__arrow-outer{border-width:6px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{left:-2px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{left:-1px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer{border-bottom-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-container{top:0}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{border-top-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-top-color:transparent!important}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{top:-4px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{top:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{top:-1px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{border-left-width:0;border-left-color:transparent!important;border-top-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{left:-4px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{left:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-container{right:-10px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer{border-right-width:0;border-top-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner{left:-2px}.v-popper--theme-tooltip .v-popper__inner{background:rgba(0,0,0,.8);color:#fff;border-radius:6px;padding:7px 12px 6px}.v-popper--theme-tooltip .v-popper__arrow-outer{border-color:#000c}.v-popper--theme-dropdown .v-popper__inner{background:#fff;color:#000;border-radius:6px;border:1px solid #ddd;box-shadow:0 6px 30px #0000001a}.v-popper--theme-dropdown .v-popper__arrow-inner{visibility:visible;border-color:#fff}.v-popper--theme-dropdown .v-popper__arrow-outer{border-color:#ddd}
+
+
+/* BUNDLED FROM @shikijs/twoslash/style-rich.css */
+/* ===== Basic ===== */
+:root {
+  --twoslash-border-color: #8888;
+  --twoslash-underline-color: currentColor;
+  --twoslash-highlighted-border: #c37d0d50;
+  --twoslash-highlighted-bg: #c37d0d20;
+  --twoslash-popup-bg: #f8f8f8;
+  --twoslash-popup-color: inherit;
+  --twoslash-popup-shadow: rgba(0, 0, 0.08) 0px 1px 4px;
+  --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;
+  --twoslash-error-color: #d45656;
+  --twoslash-error-bg: #d4565620;
+  --twoslash-tag-color: #3772cf;
+  --twoslash-tag-bg: #3772cf20;
+  --twoslash-tag-warn-color: #c37d0d;
+  --twoslash-tag-warn-bg: #c37d0d20;
+  --twoslash-tag-annotate-color: #1ba673;
+  --twoslash-tag-annotate-bg: #1ba67320;
+}
+
+/* Respect people's wishes to not have animations */
+@media (prefers-reduced-motion: reduce) {
+  .twoslash * {
+    transition: none !important;
+  }
+}
+
+/* ===== Hover Info ===== */
+.twoslash:hover .twoslash-hover {
+  border-color: var(--twoslash-underline-color);
+}
+
+.twoslash .twoslash-hover {
+  border-bottom: 1px dotted transparent;
+  transition-timing-function: ease;
+  transition: border-color 0.3s;
+  position: relative;
+}
+
+.twoslash .twoslash-popup-container {
+  position: absolute;
+  opacity: 0;
+  display: inline-flex;
+  flex-direction: column;
+  transform: translateY(1.1em);
+  background: var(--twoslash-popup-bg);
+  color: var(--twoslash-popup-color);
+  border: 1px solid var(--twoslash-border-color);
+  transition: opacity 0.3s;
+  border-radius: 4px;
+  pointer-events: none;
+  z-index: 10;
+  user-select: none;
+  text-align: left;
+  box-shadow: var(--twoslash-popup-shadow);
+}
+
+.twoslash .twoslash-query-presisted .twoslash-popup-container {
+  z-index: 9;
+  transform: translateY(1.5em);
+}
+
+.twoslash .twoslash-hover:hover .twoslash-popup-container,
+.twoslash .twoslash-query-presisted .twoslash-popup-container {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.twoslash .twoslash-popup-container:hover {
+  user-select: auto;
+}
+
+.twoslash .twoslash-popup-arrow {
+  position: absolute;
+  top: -4px;
+  left: 1em;
+  border-top: 1px solid var(--twoslash-border-color);
+  border-right: 1px solid var(--twoslash-border-color);
+  background: var(--twoslash-popup-bg);
+  transform: rotate(-45deg);
+  width: 6px;
+  height: 6px;
+  pointer-events: none;
+}
+
+.twoslash .twoslash-popup-code,
+.twoslash .twoslash-popup-docs {
+  padding: 6px 8px !important;
+}
+
+.twoslash .twoslash-popup-code {
+  font-family: var(--twoslach-code-font);
+  font-size: var(--twoslach-code-font-size);
+}
+
+.twoslash .twoslash-popup-docs {
+  color: var(--twoslash-docs-color);
+  font-family: var(--twoslash-docs-font);
+  font-size: 0.8em;
+  border-top: 1px solid var(--twoslash-border-color);
+}
+
+.twoslash .twoslash-popup-docs-tags {
+  display: flex;
+  flex-direction: column;
+  font-family: var(--twoslash-docs-font);
+}
+
+.twoslash .twoslash-popup-docs-tags,
+.twoslash .twoslash-popup-docs-tag-name {
+  margin-right: 0.5em;
+}
+
+.twoslash .twoslash-popup-docs-tag-name {
+  font-family: var(--twoslach-code-font);
+}
+
+/* ===== Error Line ===== */
+.twoslash .twoslash-error-line {
+  position: relative;
+  background-color: var(--twoslash-error-bg);
+  border-left: 3px solid var(--twoslash-error-color);
+  color: var(--twoslash-error-color);
+  padding: 6px 12px;
+  margin: 0.2em 0;
+}
+
+.twoslash .twoslash-error {
+  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%206%203'%20enable-background%3D'new%200%200%206%203'%20height%3D'3'%20width%3D'6'%3E%3Cg%20fill%3D'%23c94824'%3E%3Cpolygon%20points%3D'5.5%2C0%202.5%2C3%201.1%2C3%204.1%2C0'%2F%3E%3Cpolygon%20points%3D'4%2C0%206%2C2%206%2C0.6%205.4%2C0'%2F%3E%3Cpolygon%20points%3D'0%2C2%201%2C3%202.4%2C3%200%2C0.6'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
+    repeat-x bottom left;
+  padding-bottom: 2px;
+}
+
+/* ===== Completeions ===== */
+.twoslash .twoslash-completion-cursor {
+  position: relative;
+}
+
+.twoslash .twoslash-completion-cursor .twoslash-completion-list {
+  user-select: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform: translate(0, 1.2em);
+  margin: 3px 0 0 -1px;
+  display: inline-block;
+  z-index: 8;
+  box-shadow: var(--twoslash-popup-shadow);
+  background: var(--twoslash-popup-bg);
+  border: 1px solid var(--twoslash-border-color);
+}
+
+.twoslash-completion-list {
+  width: 240px;
+  font-size: 0.8rem;
+  padding: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.twoslash-completion-list:hover {
+  user-select: auto;
+}
+
+.twoslash-completion-list::before {
+  background-color: var(--twoslash-cursor-color);
+  width: 2px;
+  position: absolute;
+  top: -1.6em;
+  height: 1.4em;
+  left: -1px;
+  content: ' ';
+}
+
+.twoslash-completion-list li {
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  gap: 0.25em;
+  line-height: 1em;
+}
+
+.twoslash-completion-list li span.twoslash-completions-unmatched {
+  color: var(--twoslash-unmatched-color);
+}
+
+.twoslash-completion-list .deprecated {
+  text-decoration: line-through;
+  opacity: 0.5;
+}
+
+.twoslash-completion-list li span.twoslash-completions-matched {
+  color: var(--twoslash-matched-color);
+}
+
+/* Highlights */
+.twoslash-highlighted {
+  background-color: var(--twoslash-highlighted-bg);
+  border: 1px solid var(--twoslash-highlighted-border);
+  padding: 1px 2px;
+  margin: -1px -3px;
+  border-radius: 4px;
+}
+
+/* Icons */
+.twoslash-completion-list .twoslash-completions-icon {
+  color: var(--twoslash-unmatched-color);
+  width: 1em;
+  flex: none;
+}
+
+/* Custom Tags */
+.twoslash .twoslash-tag-line {
+  position: relative;
+  background-color: var(--twoslash-tag-bg);
+  border-left: 3px solid var(--twoslash-tag-color);
+  color: var(--twoslash-tag-color);
+  padding: 6px 10px;
+  margin: 0.2em 0;
+  display: flex;
+  align-items: center;
+  gap: 0.3em;
+}
+
+.twoslash .twoslash-tag-line .twoslash-tag-icon {
+  width: 1.1em;
+  color: inherit;
+}
+
+.twoslash .twoslash-tag-line.twoslash-tag-error-line {
+  background-color: var(--twoslash-error-bg);
+  border-left: 3px solid var(--twoslash-error-color);
+  color: var(--twoslash-error-color);
+}
+
+.twoslash .twoslash-tag-line.twoslash-tag-warn-line {
+  background-color: var(--twoslash-tag-warn-bg);
+  border-left: 3px solid var(--twoslash-tag-warn-color);
+  color: var(--twoslash-tag-warn-color);
+}
+
+.twoslash .twoslash-tag-line.twoslash-tag-annotate-line {
+  background-color: var(--twoslash-tag-annotate-bg);
+  border-left: 3px solid var(--twoslash-tag-annotate-color);
+  color: var(--twoslash-tag-annotate-color);
+}
+
+
+/* BUNDLED FROM @shikijs/vitepress-twoslash/style-core.css */
+:root {
+  --twoslash-popup-bg: var(--vp-c-bg, inherit);
+  --twoslash-popup-color: var(--vp-c-text-1);
+  --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 {
+  z-index: calc(var(--vp-z-index-local-nav) - 1);
+}
+
+.v-popper--theme-twoslash .v-popper__inner {
+  background: var(--twoslash-popup-bg);
+  color: var(--twoslash-popup-color);
+  border-color: var(--twoslash-border-color);
+}
+
+.v-popper--theme-twoslash .v-popper__arrow-outer {
+  border-color: var(--twoslash-border-color);
+}
+
+.v-popper--theme-twoslash .v-popper__arrow-inner {
+  border-color: var(--twoslash-popup-bg);
+}
+
+.twoslash-popup-container {
+  transform: translateY(1.5em);
+}
+
+.twoslash-query-presisted .twoslash-popup-container {
+  transform: translateY(1.8em);
+}
+
+.twoslash .v-popper {
+  display: inline-block;
+}
+
+.twoslash-completion-list .twoslash-completions-icon {
+  color: var(--twoslash-unmatched-color) !important;
+}
+
+.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(--twoslash-code-size);
+  transition: color 0.5s;
+  white-space: pre-wrap;
+}
+
+.twoslash-floating .twoslash-popup-docs {
+  border-top: 1px solid var(--twoslash-border-color);
+  color: var(--twoslash-docs-color);
+  padding: 0px 12px 0px 12px !important;
+  font-family: var(--twoslash-docs-font);
+  font-size: 0.9em;
+  max-height: 500px;
+  max-width: 700px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  text-wrap: balance;
+}
+
+.twoslash-floating .twoslash-popup-docs p {
+  margin: 0;
+  padding: 6px 0;
+  text-wrap: balance;
+}
+
+.twoslash-floating .twoslash-popup-docs pre {
+  background-color: var(--vp-code-block-bg);
+  border-radius: 8px;
+  padding: 12px;
+  margin: 6px -2px;
+  overflow-x: auto;
+}
+
+.twoslash-floating .twoslash-popup-docs-tags {
+  display: flex;
+  flex-direction: column;
+  padding: 8px 12px !important;
+}
+
+.twoslash-floating .twoslash-popup-docs-tags .twoslash-popup-docs-tag-name {
+  font-family: var(--twoslash-code-font);
+  color: var(--twoslash-unmatched-color);
+  margin-right: 0.5em;
+}
+
+.twoslash-completion-cursor {
+  height: 1.2em;
+  width: 2px;
+  margin-bottom: -0.2em;
+  background: var(--twoslash-cursor-color);
+  display: inline-block;
+  user-select: none;
+}
+
+.twoslash-floating.twoslash-completion .v-popper__arrow-container {
+  display: none;
+}
+
+.twoslash-floating.twoslash-completion .twoslash-completion-list {
+  padding: 6px;
+  font-family: var(--twoslash-code-font);
+  font-size: var(--twoslash-code-size) !important;
+}
+
+.twoslash-floating.twoslash-completion .twoslash-completion-list li {
+  padding: 3px 0;
+}