@shikijs/twoslash 1.0.0-beta.5 → 1.0.0-beta.6

package/dist/core.d.mts

@@ -2,9 +2,12 @@ import { TwoslashReturn, twoslasher, TwoslashOptions, NodeError, NodeTag, NodeQu
 import { CodeToHastOptions, ShikiTransformerContext, ShikiTransformerContextCommon, ShikiTransformer } from '@shikijs/core';
 import { ElementContent, Element, Text } from 'hast';
 
+type TwoslashShikiReturn = Pick<TwoslashReturn, 'nodes' | 'code'> & {
+    meta?: Partial<Pick<TwoslashReturn['meta'], 'extension'>>;
+};
 declare module '@shikijs/core' {
     interface ShikiTransformerContextMeta {
-        twoslash?: TwoslashReturn;
+        twoslash?: TwoslashShikiReturn;
     }
 }
 interface TransformerTwoslashOptions {
@@ -17,7 +20,7 @@ interface TransformerTwoslashOptions {
      *
      * @default false
      */
-    explicitTrigger?: boolean;
+    explicitTrigger?: boolean | RegExp;
     /**
      * Mapping from language alias to language name
      */
@@ -46,15 +49,15 @@ interface TransformerTwoslashOptions {
     throws?: boolean;
 }
 interface TwoslashRenderer {
-    lineError?(this: ShikiTransformerContext, error: NodeError): ElementContent[];
-    lineCustomTag?(this: ShikiTransformerContext, tag: NodeTag): ElementContent[];
-    lineQuery?(this: ShikiTransformerContext, query: NodeQuery, targetNode?: Element | Text): ElementContent[];
-    lineCompletion?(this: ShikiTransformerContext, query: NodeCompletion): ElementContent[];
-    nodeStaticInfo(this: ShikiTransformerContext, info: NodeHover, node: Element | Text): Partial<ElementContent>;
-    nodeError?(this: ShikiTransformerContext, error: NodeError, node: Element | Text): Partial<ElementContent>;
-    nodeQuery?(this: ShikiTransformerContext, query: NodeQuery, node: Element | Text): Partial<ElementContent>;
-    nodeCompletion?(this: ShikiTransformerContext, query: NodeCompletion, node: Element | Text): Partial<ElementContent>;
-    nodesHighlight?(this: ShikiTransformerContext, highlight: NodeHighlight, nodes: ElementContent[]): ElementContent[];
+    lineError?: (this: ShikiTransformerContext, error: NodeError) => ElementContent[];
+    lineCustomTag?: (this: ShikiTransformerContext, tag: NodeTag) => ElementContent[];
+    lineQuery?: (this: ShikiTransformerContext, query: NodeQuery, targetNode?: Element | Text) => ElementContent[];
+    lineCompletion?: (this: ShikiTransformerContext, query: NodeCompletion) => ElementContent[];
+    nodeStaticInfo: (this: ShikiTransformerContext, info: NodeHover, node: Element | Text) => Partial<ElementContent>;
+    nodeError?: (this: ShikiTransformerContext, error: NodeError, node: Element | Text) => Partial<ElementContent>;
+    nodeQuery?: (this: ShikiTransformerContext, query: NodeQuery, node: Element | Text) => Partial<ElementContent>;
+    nodeCompletion?: (this: ShikiTransformerContext, query: NodeCompletion, node: Element | Text) => Partial<ElementContent>;
+    nodesHighlight?: (this: ShikiTransformerContext, highlight: NodeHighlight, nodes: ElementContent[]) => ElementContent[];
 }
 
 type CompletionItem = NonNullable<NodeCompletion['completions']>[number];
@@ -97,6 +100,15 @@ interface RendererRichOptions {
      * @default undefined
      */
     processHoverDocs?: (docs: string) => string;
+    /**
+     * The way errors should be rendered.
+     *
+     * - `'line'`: Render the error line after the line of code
+     * - `'hover'`: Render the error in the hover popup
+     *
+     * @default 'line'
+     */
+    errorRendering?: 'line' | 'hover';
     /**
      * Classes added to injected elements
      */
@@ -109,19 +121,19 @@ interface RendererRichOptions {
     /**
      * @deprecated Use `processHoverInfo` instead.
      */
-    formatInfo?(info: string): string;
+    formatInfo?: (info: string) => string;
     /**
      * Custom function to render markdown.
      *
      * By default it pass-through the markdown.
      */
-    renderMarkdown?(this: ShikiTransformerContextCommon, markdown: string): ElementContent[];
+    renderMarkdown?: (this: ShikiTransformerContextCommon, markdown: string) => ElementContent[];
     /**
      * Custom function to render inline markdown.
      *
      * By default it pass-through the markdown.
      */
-    renderMarkdownInline?(this: ShikiTransformerContextCommon, markdown: string, context: string): ElementContent[];
+    renderMarkdownInline?: (this: ShikiTransformerContextCommon, markdown: string, context: string) => ElementContent[];
     /**
      * Extensions for the genreated HAST tree.
      */
@@ -191,6 +203,19 @@ interface RendererRichOptions {
          * The token for the error informaton.
          */
         errorToken?: HastExtension;
+        /**
+         * The container of the error popup.
+         * Only used when `errorRendering` is set to `'hover'`.
+         */
+        errorPopup?: HastExtension;
+        /**
+         * Custom function to compose the error token.
+         * Only used when `errorRendering` is set to `'hover'`.
+         */
+        errorCompose?: (parts: {
+            popup: Element;
+            token: Text | Element;
+        }) => ElementContent[];
         /**
          * The wrapper for the highlighted nodes.
          */
@@ -228,7 +253,7 @@ declare class ShikiTwoslashError extends Error {
  */
 
 declare function defaultTwoslashOptions(): TwoslashExecuteOptions;
-type TwoslashFunction = (code: string, lang?: string, options?: TwoslashExecuteOptions) => TwoslashReturn;
+type TwoslashFunction = (code: string, lang?: string, options?: TwoslashExecuteOptions) => TwoslashShikiReturn;
 declare function createTransformerFactory(defaultTwoslasher: TwoslashFunction, defaultRenderer?: TwoslashRenderer): (options?: TransformerTwoslashOptions) => ShikiTransformer;
 
-export { type CompletionItem, type HastExtension, type RendererRichOptions, ShikiTwoslashError, type TransformerTwoslashOptions, type TwoslashRenderer, createTransformerFactory, defaultCompletionIcons, defaultCustomTagIcons, defaultHoverInfoProcessor, defaultTwoslashOptions, rendererClassic, rendererRich };
+export { type CompletionItem, type HastExtension, type RendererRichOptions, ShikiTwoslashError, type TransformerTwoslashOptions, type TwoslashFunction, type TwoslashRenderer, type TwoslashShikiReturn, createTransformerFactory, defaultCompletionIcons, defaultCustomTagIcons, defaultHoverInfoProcessor, defaultTwoslashOptions, rendererClassic, rendererRich };

package/dist/core.d.ts

@@ -2,9 +2,12 @@ import { TwoslashReturn, twoslasher, TwoslashOptions, NodeError, NodeTag, NodeQu
 import { CodeToHastOptions, ShikiTransformerContext, ShikiTransformerContextCommon, ShikiTransformer } from '@shikijs/core';
 import { ElementContent, Element, Text } from 'hast';
 
+type TwoslashShikiReturn = Pick<TwoslashReturn, 'nodes' | 'code'> & {
+    meta?: Partial<Pick<TwoslashReturn['meta'], 'extension'>>;
+};
 declare module '@shikijs/core' {
     interface ShikiTransformerContextMeta {
-        twoslash?: TwoslashReturn;
+        twoslash?: TwoslashShikiReturn;
     }
 }
 interface TransformerTwoslashOptions {
@@ -17,7 +20,7 @@ interface TransformerTwoslashOptions {
      *
      * @default false
      */
-    explicitTrigger?: boolean;
+    explicitTrigger?: boolean | RegExp;
     /**
      * Mapping from language alias to language name
      */
@@ -46,15 +49,15 @@ interface TransformerTwoslashOptions {
     throws?: boolean;
 }
 interface TwoslashRenderer {
-    lineError?(this: ShikiTransformerContext, error: NodeError): ElementContent[];
-    lineCustomTag?(this: ShikiTransformerContext, tag: NodeTag): ElementContent[];
-    lineQuery?(this: ShikiTransformerContext, query: NodeQuery, targetNode?: Element | Text): ElementContent[];
-    lineCompletion?(this: ShikiTransformerContext, query: NodeCompletion): ElementContent[];
-    nodeStaticInfo(this: ShikiTransformerContext, info: NodeHover, node: Element | Text): Partial<ElementContent>;
-    nodeError?(this: ShikiTransformerContext, error: NodeError, node: Element | Text): Partial<ElementContent>;
-    nodeQuery?(this: ShikiTransformerContext, query: NodeQuery, node: Element | Text): Partial<ElementContent>;
-    nodeCompletion?(this: ShikiTransformerContext, query: NodeCompletion, node: Element | Text): Partial<ElementContent>;
-    nodesHighlight?(this: ShikiTransformerContext, highlight: NodeHighlight, nodes: ElementContent[]): ElementContent[];
+    lineError?: (this: ShikiTransformerContext, error: NodeError) => ElementContent[];
+    lineCustomTag?: (this: ShikiTransformerContext, tag: NodeTag) => ElementContent[];
+    lineQuery?: (this: ShikiTransformerContext, query: NodeQuery, targetNode?: Element | Text) => ElementContent[];
+    lineCompletion?: (this: ShikiTransformerContext, query: NodeCompletion) => ElementContent[];
+    nodeStaticInfo: (this: ShikiTransformerContext, info: NodeHover, node: Element | Text) => Partial<ElementContent>;
+    nodeError?: (this: ShikiTransformerContext, error: NodeError, node: Element | Text) => Partial<ElementContent>;
+    nodeQuery?: (this: ShikiTransformerContext, query: NodeQuery, node: Element | Text) => Partial<ElementContent>;
+    nodeCompletion?: (this: ShikiTransformerContext, query: NodeCompletion, node: Element | Text) => Partial<ElementContent>;
+    nodesHighlight?: (this: ShikiTransformerContext, highlight: NodeHighlight, nodes: ElementContent[]) => ElementContent[];
 }
 
 type CompletionItem = NonNullable<NodeCompletion['completions']>[number];
@@ -97,6 +100,15 @@ interface RendererRichOptions {
      * @default undefined
      */
     processHoverDocs?: (docs: string) => string;
+    /**
+     * The way errors should be rendered.
+     *
+     * - `'line'`: Render the error line after the line of code
+     * - `'hover'`: Render the error in the hover popup
+     *
+     * @default 'line'
+     */
+    errorRendering?: 'line' | 'hover';
     /**
      * Classes added to injected elements
      */
@@ -109,19 +121,19 @@ interface RendererRichOptions {
     /**
      * @deprecated Use `processHoverInfo` instead.
      */
-    formatInfo?(info: string): string;
+    formatInfo?: (info: string) => string;
     /**
      * Custom function to render markdown.
      *
      * By default it pass-through the markdown.
      */
-    renderMarkdown?(this: ShikiTransformerContextCommon, markdown: string): ElementContent[];
+    renderMarkdown?: (this: ShikiTransformerContextCommon, markdown: string) => ElementContent[];
     /**
      * Custom function to render inline markdown.
      *
      * By default it pass-through the markdown.
      */
-    renderMarkdownInline?(this: ShikiTransformerContextCommon, markdown: string, context: string): ElementContent[];
+    renderMarkdownInline?: (this: ShikiTransformerContextCommon, markdown: string, context: string) => ElementContent[];
     /**
      * Extensions for the genreated HAST tree.
      */
@@ -191,6 +203,19 @@ interface RendererRichOptions {
          * The token for the error informaton.
          */
         errorToken?: HastExtension;
+        /**
+         * The container of the error popup.
+         * Only used when `errorRendering` is set to `'hover'`.
+         */
+        errorPopup?: HastExtension;
+        /**
+         * Custom function to compose the error token.
+         * Only used when `errorRendering` is set to `'hover'`.
+         */
+        errorCompose?: (parts: {
+            popup: Element;
+            token: Text | Element;
+        }) => ElementContent[];
         /**
          * The wrapper for the highlighted nodes.
          */
@@ -228,7 +253,7 @@ declare class ShikiTwoslashError extends Error {
  */
 
 declare function defaultTwoslashOptions(): TwoslashExecuteOptions;
-type TwoslashFunction = (code: string, lang?: string, options?: TwoslashExecuteOptions) => TwoslashReturn;
+type TwoslashFunction = (code: string, lang?: string, options?: TwoslashExecuteOptions) => TwoslashShikiReturn;
 declare function createTransformerFactory(defaultTwoslasher: TwoslashFunction, defaultRenderer?: TwoslashRenderer): (options?: TransformerTwoslashOptions) => ShikiTransformer;
 
-export { type CompletionItem, type HastExtension, type RendererRichOptions, ShikiTwoslashError, type TransformerTwoslashOptions, type TwoslashRenderer, createTransformerFactory, defaultCompletionIcons, defaultCustomTagIcons, defaultHoverInfoProcessor, defaultTwoslashOptions, rendererClassic, rendererRich };
+export { type CompletionItem, type HastExtension, type RendererRichOptions, ShikiTwoslashError, type TransformerTwoslashOptions, type TwoslashFunction, type TwoslashRenderer, type TwoslashShikiReturn, createTransformerFactory, defaultCompletionIcons, defaultCustomTagIcons, defaultHoverInfoProcessor, defaultTwoslashOptions, rendererClassic, rendererRich };

package/dist/core.mjs

@@ -404,6 +404,7 @@ function rendererRich(options = {}) {
     processHoverDocs = (docs) => docs,
     classExtra = "",
     jsdoc = true,
+    errorRendering = "line",
     renderMarkdown = renderMarkdownPassThrough,
     renderMarkdownInline = renderMarkdownPassThrough,
     hast
@@ -646,26 +647,61 @@ function rendererRich(options = {}) {
         }
       );
     },
-    nodeError(_, node) {
+    nodeError(error, node) {
+      if (errorRendering !== "hover") {
+        return extend(
+          hast?.errorToken,
+          {
+            type: "element",
+            tagName: "span",
+            properties: {
+              class: [`twoslash-error`, getErrorLevelClass(error)].filter(Boolean).join(" ")
+            },
+            children: [node]
+          }
+        );
+      }
+      const popup = extend(
+        hast?.errorPopup,
+        {
+          type: "element",
+          tagName: "span",
+          properties: {
+            class: ["twoslash-popup-container", classExtra].filter(Boolean).join(" ")
+          },
+          children: [
+            {
+              type: "element",
+              tagName: "div",
+              properties: {
+                class: "twoslash-popup-error"
+              },
+              children: renderMarkdown.call(this, error.text)
+            }
+          ]
+        }
+      );
       return extend(
         hast?.errorToken,
         {
           type: "element",
           tagName: "span",
           properties: {
-            class: "twoslash-error"
+            class: `twoslash-error twoslash-error-hover ${getErrorLevelClass(error)}`
           },
-          children: [node]
+          children: hast?.errorCompose ? hast?.errorCompose({ popup, token: node }) : [popup, node]
         }
       );
     },
     lineError(error) {
+      if (errorRendering !== "line")
+        return [];
       return [
         {
           type: "element",
           tagName: "div",
           properties: {
-            class: ["twoslash-meta-line twoslash-error-line", classExtra].filter(Boolean).join(" ")
+            class: ["twoslash-meta-line twoslash-error-line", getErrorLevelClass(error), classExtra].filter(Boolean).join(" ")
           },
           children: [
             {
@@ -728,6 +764,18 @@ function defaultHoverInfoProcessor(type) {
     content = `function ${content}`;
   return content;
 }
+function getErrorLevelClass(error) {
+  switch (error.level) {
+    case 0:
+      return "twoslash-error-level-warning";
+    case 1:
+      return "";
+    case 2:
+      return "twoslash-error-level-suggestion";
+    default:
+      return "twoslash-error-level-info";
+  }
+}
 
 function rendererClassic() {
   return {
@@ -926,9 +974,10 @@ function createTransformerFactory(defaultTwoslasher, defaultRenderer) {
       renderer = defaultRenderer,
       throws = true
     } = options;
+    const trigger = explicitTrigger instanceof RegExp ? explicitTrigger : /\btwoslash\b/;
     if (!renderer)
       throw new ShikiTwoslashError("Missing renderer");
-    const filter = options.filter || ((lang, _, options2) => langs.includes(lang) && (!explicitTrigger || /\btwoslash\b/.test(options2.meta?.__raw || "")));
+    const filter = options.filter || ((lang, _, options2) => langs.includes(lang) && (!explicitTrigger || trigger.test(options2.meta?.__raw || "")));
     return {
       preprocess(code) {
         let lang = this.options.lang;
@@ -937,7 +986,7 @@ function createTransformerFactory(defaultTwoslasher, defaultRenderer) {
         if (filter(lang, code, this.options)) {
           const twoslash = twoslasher(code, lang, twoslashOptions);
           this.meta.twoslash = twoslash;
-          this.options.lang = twoslash.meta.extension || lang;
+          this.options.lang = twoslash.meta?.extension || lang;
           return twoslash.code;
         }
       },

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 import * as _shikijs_core_dist_chunk_tokens_mjs from '@shikijs/core/dist/chunk-tokens.mjs';
 import { CreateTwoslashOptions } from 'twoslash';
 import { TransformerTwoslashOptions, RendererRichOptions } from './core.mjs';
-export { CompletionItem, HastExtension, ShikiTwoslashError, TwoslashRenderer, createTransformerFactory, defaultCompletionIcons, defaultCustomTagIcons, defaultHoverInfoProcessor, defaultTwoslashOptions, rendererClassic, rendererRich } from './core.mjs';
+export { CompletionItem, HastExtension, ShikiTwoslashError, TwoslashFunction, TwoslashRenderer, TwoslashShikiReturn, createTransformerFactory, defaultCompletionIcons, defaultCustomTagIcons, defaultHoverInfoProcessor, defaultTwoslashOptions, rendererClassic, rendererRich } from './core.mjs';
 import '@shikijs/core';
 import 'hast';
 
@@ -16,6 +16,6 @@ interface TransformerTwoslashIndexOptions extends TransformerTwoslashOptions, Pi
 /**
  * Factory function to create a Shiki transformer for twoslash integrations.
  */
-declare function transformerTwoslash(options?: TransformerTwoslashIndexOptions): _shikijs_core_dist_chunk_tokens_mjs.y;
+declare function transformerTwoslash(options?: TransformerTwoslashIndexOptions): _shikijs_core_dist_chunk_tokens_mjs.A;
 
 export { RendererRichOptions, type TransformerTwoslashIndexOptions, TransformerTwoslashOptions, transformerTwoslash };

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as _shikijs_core_dist_chunk_tokens_mjs from '@shikijs/core/dist/chunk-tokens.mjs';
 import { CreateTwoslashOptions } from 'twoslash';
 import { TransformerTwoslashOptions, RendererRichOptions } from './core.js';
-export { CompletionItem, HastExtension, ShikiTwoslashError, TwoslashRenderer, createTransformerFactory, defaultCompletionIcons, defaultCustomTagIcons, defaultHoverInfoProcessor, defaultTwoslashOptions, rendererClassic, rendererRich } from './core.js';
+export { CompletionItem, HastExtension, ShikiTwoslashError, TwoslashFunction, TwoslashRenderer, TwoslashShikiReturn, createTransformerFactory, defaultCompletionIcons, defaultCustomTagIcons, defaultHoverInfoProcessor, defaultTwoslashOptions, rendererClassic, rendererRich } from './core.js';
 import '@shikijs/core';
 import 'hast';
 
@@ -16,6 +16,6 @@ interface TransformerTwoslashIndexOptions extends TransformerTwoslashOptions, Pi
 /**
  * Factory function to create a Shiki transformer for twoslash integrations.
  */
-declare function transformerTwoslash(options?: TransformerTwoslashIndexOptions): _shikijs_core_dist_chunk_tokens_mjs.y;
+declare function transformerTwoslash(options?: TransformerTwoslashIndexOptions): _shikijs_core_dist_chunk_tokens_mjs.A;
 
 export { RendererRichOptions, type TransformerTwoslashIndexOptions, TransformerTwoslashOptions, transformerTwoslash };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shikijs/twoslash",
   "type": "module",
-  "version": "1.0.0-beta.5",
+  "version": "1.0.0-beta.6",
   "description": "Shiki transformer for twoslash",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -49,8 +49,8 @@
     "dist"
   ],
   "dependencies": {
-    "twoslash": "^0.1.0",
-    "@shikijs/core": "1.0.0-beta.5"
+    "twoslash": "^0.1.1",
+    "@shikijs/core": "1.0.0-beta.6"
   },
   "devDependencies": {
     "@iconify-json/carbon": "^1.1.28",

package/style-rich.css

@@ -6,7 +6,7 @@
   --twoslash-highlighted-bg: #c37d0d20;
   --twoslash-popup-bg: #f8f8f8;
   --twoslash-popup-color: inherit;
-  --twoslash-popup-shadow: rgba(0, 0, 0.08) 0px 1px 4px;
+  --twoslash-popup-shadow: rgba(0, 0, 0, 0.08) 0px 1px 4px;
   --twoslash-docs-color: #888;
   --twoslash-docs-font: sans-serif;
   --twoslash-code-font: inherit;
@@ -16,10 +16,12 @@
   --twoslash-cursor-color: #8888;
   --twoslash-error-color: #d45656;
   --twoslash-error-bg: #d4565620;
+  --twoslash-warn-color: #c37d0d;
+  --twoslash-warn-bg: #c37d0d20;
   --twoslash-tag-color: #3772cf;
   --twoslash-tag-bg: #3772cf20;
-  --twoslash-tag-warn-color: #c37d0d;
-  --twoslash-tag-warn-bg: #c37d0d20;
+  --twoslash-tag-warn-color: var(--twoslash-warn-color);
+  --twoslash-tag-warn-bg: var(--twoslash-warn-bg);
   --twoslash-tag-annotate-color: #1ba673;
   --twoslash-tag-annotate-bg: #1ba67320;
 }
@@ -67,6 +69,7 @@
 }
 
 .twoslash .twoslash-hover:hover .twoslash-popup-container,
+.twoslash .twoslash-error-hover:hover .twoslash-popup-container,
 .twoslash .twoslash-query-presisted .twoslash-popup-container {
   opacity: 1;
   pointer-events: auto;
@@ -90,6 +93,7 @@
 }
 
 .twoslash .twoslash-popup-code,
+.twoslash .twoslash-popup-error,
 .twoslash .twoslash-popup-docs {
   padding: 6px 8px !important;
 }
@@ -106,6 +110,13 @@
   border-top: 1px solid var(--twoslash-border-color);
 }
 
+.twoslash .twoslash-popup-error {
+  color: var(--twoslash-error-color);
+  background-color: var(--twoslash-error-bg);
+  font-family: var(--twoslash-docs-font);
+  font-size: 0.8em;
+}
+
 .twoslash .twoslash-popup-docs-tags {
   display: flex;
   flex-direction: column;
@@ -129,6 +140,14 @@
   color: var(--twoslash-error-color);
   padding: 6px 12px;
   margin: 0.2em 0;
+  min-width: 100%;
+  width: max-content;
+}
+
+.twoslash .twoslash-error-line.twoslash-error-level-warning {
+  background-color: var(--twoslash-warn-bg);
+  border-left: 3px solid var(--twoslash-warn-color);
+  color: var(--twoslash-warn-color);
 }
 
 .twoslash .twoslash-error {
@@ -137,6 +156,12 @@
   padding-bottom: 2px;
 }
 
+.twoslash .twoslash-error.twoslash-error-level-warning {
+  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'%23c37d0d'%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;
@@ -227,6 +252,8 @@
   display: flex;
   align-items: center;
   gap: 0.3em;
+  min-width: 100%;
+  width: max-content;
 }
 
 .twoslash .twoslash-tag-line .twoslash-tag-icon {