@simon_he/vue-tui 1.1.2 → 1.1.4

package/dist/vue/components/TMermaidText.d.ts

@@ -522,10 +522,10 @@ export declare const TMermaidText: import("vue").DefineComponent<import("vue").E
     }>;
     readonly final: boolean;
     readonly streaming: boolean;
+    readonly ascii: boolean;
     readonly paddingX: number;
     readonly paddingY: number;
     readonly boxBorderPadding: number;
-    readonly ascii: boolean;
     readonly isTransientError: TMermaidTransientErrorClassifier;
     readonly shouldRenderSource: TMermaidRenderEligibility;
     readonly incompleteText: string;
@@ -880,10 +880,10 @@ export declare const TMermaid: import("vue").DefineComponent<import("vue").Extra
     }>;
     readonly final: boolean;
     readonly streaming: boolean;
+    readonly ascii: boolean;
     readonly paddingX: number;
     readonly paddingY: number;
     readonly boxBorderPadding: number;
-    readonly ascii: boolean;
     readonly isTransientError: TMermaidTransientErrorClassifier;
     readonly shouldRenderSource: TMermaidRenderEligibility;
     readonly incompleteText: string;

package/dist/vue/components/TVirtualMarkdown.d.ts

@@ -88,6 +88,34 @@ export declare const TVirtualMarkdown: import("vue").DefineComponent<import("vue
         type: BooleanConstructor;
         default: boolean;
     };
+    mathImages: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    mathCellWidthPx: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    mathCellHeightPx: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    mathScale: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    mathColor: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    mathMaxWidthCells: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    mathBaselineRatio: {
+        type: NumberConstructor;
+        default: undefined;
+    };
     imageActions: {
         type: BooleanConstructor;
         default: boolean;
@@ -200,6 +228,34 @@ export declare const TVirtualMarkdown: import("vue").DefineComponent<import("vue
         type: BooleanConstructor;
         default: boolean;
     };
+    mathImages: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    mathCellWidthPx: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    mathCellHeightPx: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    mathScale: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    mathColor: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    mathMaxWidthCells: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    mathBaselineRatio: {
+        type: NumberConstructor;
+        default: undefined;
+    };
     imageActions: {
         type: BooleanConstructor;
         default: boolean;
@@ -227,6 +283,8 @@ export declare const TVirtualMarkdown: import("vue").DefineComponent<import("vue
             source: string;
             raw: string;
             rendered: boolean;
+            pendingImage?: boolean;
+            mode?: "inline" | "display";
         }>;
         rect: Readonly<{
             x: number;
@@ -241,9 +299,11 @@ export declare const TVirtualMarkdown: import("vue").DefineComponent<import("vue
     }>) => any) | undefined;
     onImageAction?: ((_payload: Readonly<{
         image: Readonly<{
-            kind: "image";
-            src: string;
+            kind: "image" | "math";
+            src?: string;
             alt?: string;
+            tex?: string;
+            raw?: string;
             mime?: string;
             base64?: string;
             originalBase64?: string;
@@ -309,6 +369,7 @@ export declare const TVirtualMarkdown: import("vue").DefineComponent<import("vue
         codeBlock: Partial<Style>;
         thematicBreak: Partial<Style>;
         html: Partial<Style>;
+        math: Partial<Style>;
     }>>;
     blocks: readonly TuiMarkdownBlock[];
     imageRenderer: TuiMarkdownImageResolver;
@@ -317,6 +378,13 @@ export declare const TVirtualMarkdown: import("vue").DefineComponent<import("vue
     imageMinHeight: number;
     imageMaxHeight: number;
     imagePreserveAspectRatio: boolean;
+    mathImages: boolean;
+    mathCellWidthPx: number;
+    mathCellHeightPx: number;
+    mathScale: number;
+    mathColor: string;
+    mathMaxWidthCells: number;
+    mathBaselineRatio: number;
     imageActions: boolean;
     mathActions: boolean;
     linkActions: boolean;

package/dist/vue/markdown/ast.d.ts

@@ -1,6 +1,11 @@
+import { type TuiMarkdownMathImageOptions } from "./math-image.js";
 import { type TuiMarkdownTheme } from "./theme.js";
 import type { TuiMarkdownBlock, TuiMarkdownImageResolver, TuiMarkdownImageSize, TuiMarkdownNode } from "./types.js";
+export type TuiMarkdownMathOptions = Readonly<{
+    enabled?: boolean;
+} & TuiMarkdownMathImageOptions>;
 export declare function markdownAstToBlocks(nodes: readonly TuiMarkdownNode[], theme: TuiMarkdownTheme, options?: Readonly<{
     imageResolver?: TuiMarkdownImageResolver;
     imageSize?: TuiMarkdownImageSize;
+    math?: TuiMarkdownMathOptions;
 }>): readonly TuiMarkdownBlock[];

package/dist/vue/markdown/document.d.ts

@@ -1,4 +1,5 @@
 import type { TuiMarkdownImageResolver, TuiMarkdownImageSize } from "./types.js";
+import { type TuiMarkdownMathOptions } from "./ast.js";
 import { type TuiMarkdownParser } from "./parser.js";
 import { type TuiMarkdownThemeOverrides } from "./theme.js";
 import type { TuiMarkdownBlock, TuiMarkdownNode, TuiMarkdownVisualRow } from "./types.js";
@@ -12,6 +13,7 @@ export declare function buildMarkdownBlocks(content: string, parser: TuiMarkdown
     theme?: TuiMarkdownThemeOverrides;
     imageResolver?: TuiMarkdownImageResolver;
     imageSize?: TuiMarkdownImageSize;
+    math?: TuiMarkdownMathOptions;
 }>): Readonly<{
     nodes: readonly TuiMarkdownNode[];
     blocks: readonly TuiMarkdownBlock[];
@@ -22,4 +24,5 @@ export declare function buildMarkdownVisualRows(content: string, width: number,
     widthProvider?: WidthProvider;
     imageResolver?: TuiMarkdownImageResolver;
     imageSize?: TuiMarkdownImageSize;
+    math?: TuiMarkdownMathOptions;
 }>): readonly TuiMarkdownVisualRow[];

package/dist/vue/markdown/math-image.d.ts

@@ -0,0 +1,68 @@
+import type { TuiMarkdownVisualRow } from "./types.js";
+export type TuiMarkdownMathMode = "inline" | "display";
+export type TuiMarkdownMathImageCells = Readonly<{
+    base64: string;
+    widthCells: number;
+    heightCells: number;
+}>;
+export type TuiMarkdownMathImageOptions = Readonly<{
+    cellWidthPx?: number;
+    cellHeightPx?: number;
+    scale?: number;
+    color?: string;
+    maxWidthCells?: number;
+    /**
+     * Vertical position of the text baseline inside a terminal cell, as a
+     * fraction of the cell height (0 = top, 1 = bottom). Inline formula images
+     * are padded so their baseline lands here. Defaults to 0.78.
+     */
+    baselineRatio?: number;
+}>;
+export type TuiMarkdownMathRasterizer = (tex: string, mode: TuiMarkdownMathMode, options: Required<TuiMarkdownMathImageOptions>) => Promise<TuiMarkdownMathImageCells | null>;
+type RequiredMathImageOptions = Required<TuiMarkdownMathImageOptions>;
+export declare function resolveMarkdownMathColor(fg: unknown): string | undefined;
+export declare function normalizeMathImageOptions(options?: TuiMarkdownMathImageOptions): RequiredMathImageOptions;
+/**
+ * Install a custom TeX -> PNG rasterizer (e.g. consumers that already have a
+ * katex/mathjax pipeline). Passing `null` restores the built-in lazy loader.
+ */
+export declare function setMarkdownMathRasterizer(rasterizer: TuiMarkdownMathRasterizer | null): void;
+export declare function subscribeMarkdownMathImage(listener: () => void): () => void;
+/**
+ * True when a rasterizer is confirmed available (a custom one was installed or
+ * the built-in MathJax+resvg stack finished loading). Components should gate
+ * image production on this so they never spend time rasterizing formulas while
+ * the math engine is still loading or missing.
+ */
+export declare function isMarkdownMathImageRendererReady(): boolean;
+/**
+ * Ensure the math image rasterizer is loaded (or resolved as unavailable).
+ * Resolves `true` once a rasterizer is usable. Safe to call repeatedly; the
+ * underlying load is shared and its outcome is cached.
+ */
+export declare function loadMarkdownMathImageRenderer(): Promise<boolean>;
+/** Synchronous cache lookup used by the markdown AST/layout phase. */
+export declare function getCachedMarkdownMathImage(tex: string, mode: TuiMarkdownMathMode, options?: TuiMarkdownMathImageOptions): TuiMarkdownMathImageCells | null;
+/**
+ * Drop all cached rasterized formulas (PNG + failed lookups). Useful for long
+ * running processes that change cell metrics, and for tests.
+ */
+export declare function clearMarkdownMathImageCache(): void;
+/**
+ * Resolve a TeX formula to a PNG base64 + cell size. Cached per
+ * (tex, mode, cell metrics, color). In-flight requests are deduped. When a new
+ * image finishes, `subscribeMarkdownMathImage` listeners are notified so
+ * components can rebuild/re-paint with the real size.
+ */
+export declare function getMarkdownMathImage(tex: string, mode: TuiMarkdownMathMode, options?: TuiMarkdownMathImageOptions): Promise<TuiMarkdownMathImageCells | null>;
+/**
+ * Kick off rasterization for every math graphic segment in the given row range
+ * that does not have a cached PNG yet. Safe to call after every row rebuild;
+ * in-flight and cached requests are deduped inside getMarkdownMathImage. Pass a
+ * viewport to avoid rasterizing off-screen formulas (e.g. virtualized views).
+ */
+export declare function enqueueMarkdownMathImages(rows: readonly TuiMarkdownVisualRow[], options?: TuiMarkdownMathImageOptions, viewport?: Readonly<{
+    firstRow: number;
+    lastRow: number;
+}>): void;
+export {};

package/dist/vue/markdown/math.d.ts

@@ -2,5 +2,7 @@ export type TuiMarkdownInlineMathRender = Readonly<{
     text: string;
     supported: boolean;
 }>;
+export declare function subscribeMarkdownMathRenderer(listener: () => void): () => void;
+export declare function loadMarkdownMathRenderer(): Promise<boolean>;
 export declare function renderMarkdownInlineMathSegment(tex: string): TuiMarkdownInlineMathRender;
 export declare function renderMarkdownInlineMath(tex: string): string;

package/dist/vue/markdown/theme.d.ts

@@ -11,6 +11,7 @@ export type TuiMarkdownTheme = Readonly<{
     codeBlock: Style;
     thematicBreak: Style;
     html: Style;
+    math: Style;
 }>;
 export type TuiMarkdownThemeOverrides = Readonly<Partial<{
     heading: readonly Partial<Style>[];
@@ -24,6 +25,7 @@ export type TuiMarkdownThemeOverrides = Readonly<Partial<{
     codeBlock: Partial<Style>;
     thematicBreak: Partial<Style>;
     html: Partial<Style>;
+    math: Partial<Style>;
 }>>;
 export declare const DEFAULT_TUI_MARKDOWN_THEME: Readonly<{
     heading: readonly [Readonly<{
@@ -181,6 +183,16 @@ export declare const DEFAULT_TUI_MARKDOWN_THEME: Readonly<{
         inverse?: boolean;
         href?: string;
     }>;
+    math: Readonly<{
+        fg?: string;
+        bg?: string;
+        bold?: boolean;
+        dim?: boolean;
+        italic?: boolean;
+        underline?: boolean;
+        inverse?: boolean;
+        href?: string;
+    }>;
 }>;
 export declare function markdownThemeSignature(overrides?: TuiMarkdownThemeOverrides): string;
 export declare function resolveTuiMarkdownTheme(overrides?: TuiMarkdownThemeOverrides): TuiMarkdownTheme;

package/dist/vue/markdown/types.d.ts

@@ -13,9 +13,11 @@ export type TuiMarkdownImageSize = Readonly<{
     preserveAspectRatio?: boolean;
 }>;
 export type TuiMarkdownGraphicSegment = Readonly<{
-    kind: "image";
-    src: string;
+    kind: "image" | "math";
+    src?: string;
     alt?: string;
+    tex?: string;
+    raw?: string;
     mime?: string;
     base64?: string;
     originalBase64?: string;
@@ -63,6 +65,14 @@ export type TuiMarkdownMathSegment = Readonly<{
     source: string;
     raw: string;
     rendered: boolean;
+    /**
+     * Set on the boxed fallback of block-level math / raw inline math: the
+     * formula still needs to be rasterized once the graphics/raster stack is
+     * available. `mode` tells the rasterizer whether to render inline (fits one
+     * line, baseline-aligned) or display style.
+     */
+    pendingImage?: boolean;
+    mode?: "inline" | "display";
 }>;
 export type TuiMarkdownMathActionPayload = Readonly<{
     math: TuiMarkdownMathSegment;

package/dist/vue/mermaid/beautiful-mermaid.d.ts

@@ -342,10 +342,10 @@ export declare const TMermaidText: import("vue").DefineComponent<import("vue").E
     }>;
     readonly final: boolean;
     readonly streaming: boolean;
+    readonly ascii: boolean;
     readonly paddingX: number;
     readonly paddingY: number;
     readonly boxBorderPadding: number;
-    readonly ascii: boolean;
     readonly isTransientError: TMermaidTransientErrorClassifier;
     readonly shouldRenderSource: import("../index.js").TMermaidRenderEligibility;
     readonly incompleteText: string;
@@ -700,10 +700,10 @@ export declare const TMermaid: import("vue").DefineComponent<import("vue").Extra
     }>;
     readonly final: boolean;
     readonly streaming: boolean;
+    readonly ascii: boolean;
     readonly paddingX: number;
     readonly paddingY: number;
     readonly boxBorderPadding: number;
-    readonly ascii: boolean;
     readonly isTransientError: TMermaidTransientErrorClassifier;
     readonly shouldRenderSource: import("../index.js").TMermaidRenderEligibility;
     readonly incompleteText: string;
@@ -1058,10 +1058,10 @@ export declare const TBeautifulMermaidText: import("vue").DefineComponent<import
     }>;
     readonly final: boolean;
     readonly streaming: boolean;
+    readonly ascii: boolean;
     readonly paddingX: number;
     readonly paddingY: number;
     readonly boxBorderPadding: number;
-    readonly ascii: boolean;
     readonly isTransientError: TMermaidTransientErrorClassifier;
     readonly shouldRenderSource: import("../index.js").TMermaidRenderEligibility;
     readonly incompleteText: string;
@@ -1416,10 +1416,10 @@ export declare const TBeautifulMermaid: import("vue").DefineComponent<import("vu
     }>;
     readonly final: boolean;
     readonly streaming: boolean;
+    readonly ascii: boolean;
     readonly paddingX: number;
     readonly paddingY: number;
     readonly boxBorderPadding: number;
-    readonly ascii: boolean;
     readonly isTransientError: TMermaidTransientErrorClassifier;
     readonly shouldRenderSource: import("../index.js").TMermaidRenderEligibility;
     readonly incompleteText: string;

package/dist/vue/mermaid/mermaid-image.d.ts

@@ -0,0 +1,65 @@
+export type TuiMermaidImageCells = Readonly<{
+    base64: string;
+    widthCells: number;
+    heightCells: number;
+    naturalWidth?: number;
+    naturalHeight?: number;
+}>;
+export type TuiMermaidImageOptions = Readonly<{
+    cellWidthPx?: number;
+    cellHeightPx?: number;
+    scale?: number;
+    /** Diagram background color; the raster stays transparent and this is only
+     *  used to derive the theme. Pass a CSS color (hex or named). */
+    bg?: string;
+    /** Diagram foreground color (nodes/edge labels). Resolved from the terminal
+     *  style when the caller does not pass one. */
+    fg?: string;
+    maxWidthCells?: number;
+    maxHeightCells?: number;
+    /** Canvas padding in px (beautiful-mermaid default). */
+    padding?: number;
+}>;
+export type TuiMermaidImageRasterizer = (code: string, options: Required<TuiMermaidImageOptions>) => Promise<TuiMermaidImageCells | null>;
+type RequiredMermaidImageOptions = Required<TuiMermaidImageOptions>;
+export declare function normalizeMermaidImageOptions(options?: TuiMermaidImageOptions): RequiredMermaidImageOptions;
+/**
+ * Resolve a diagram foreground/background from a terminal style value.
+ * Reuses the named-color table shared with the math rasterizer.
+ */
+export declare function resolveMermaidImageColor(fg: unknown): string | undefined;
+/**
+ * Install a custom mermaid -> PNG rasterizer (e.g. consumers that render
+ * mermaid through their own pipeline). Passing `null` restores the built-in
+ * lazy loader (beautiful-mermaid SVG + @resvg/resvg-js).
+ */
+export declare function setMermaidImageRasterizer(rasterizer: TuiMermaidImageRasterizer | null): void;
+export declare function subscribeMermaidImage(listener: () => void): () => void;
+/**
+ * True when a rasterizer is confirmed available (custom one installed, or the
+ * built-in beautiful-mermaid + resvg stack finished loading). Components gate
+ * image production on this so they never re-rasterize while the engine is
+ * still loading or missing.
+ */
+export declare function isMermaidImageRendererReady(): boolean;
+/**
+ * Ensure the mermaid rasterizer is loaded (or resolved as unavailable).
+ * Resolves `true` once a rasterizer is usable. Safe to call repeatedly; the
+ * underlying load is shared and its outcome is cached.
+ */
+export declare function loadMermaidImageRenderer(): Promise<boolean>;
+/** Synchronous cache lookup used by components before deciding to re-render. */
+export declare function getCachedMermaidImage(code: string, options?: TuiMermaidImageOptions): TuiMermaidImageCells | null;
+/**
+ * Drop all cached mermaid images (PNG + failed lookups). Useful for long
+ * running processes that change cell metrics, and for tests.
+ */
+export declare function clearMermaidImageCache(): void;
+/**
+ * Resolve a mermaid diagram to a PNG base64 + cell size. Cached per
+ * (code, cell metrics, colors). In-flight requests are deduped. When a new
+ * image finishes, `subscribeMermaidImage` listeners are notified so components
+ * can rebuild/re-paint with the real size.
+ */
+export declare function getMermaidImage(code: string, options?: TuiMermaidImageOptions): Promise<TuiMermaidImageCells | null>;
+export {};

package/dist/vue.js

@@ -1,21 +1,21 @@
-import "./hyperlink-_1FAj7Wq.js";
-import { charCellWidth } from "./width-GqllnV8C.js";
-import "./ansi-palette-CH6jc2Z7.js";
-import "./dom-renderer-DXx8fWzD.js";
-import { EventZIndexContextKey, LayoutContextKey, RenderStackKey, TInputPluginsContextKey, TPathPickerProviderContextKey, VisibilityContextKey, injectionKey, intersectRect, padEndByCells$1 as padEndByCells, repeatChar, sanitizeInlineText, sanitizeTextBlock, sliceByCells, sliceByCellsRange, spaces, textCellWidth$1 as textCellWidth, translateRect, useLayout, useRenderNode, useRenderStack, useTerminal, useTerminalNode, useVisibility, wrapByCells } from "./rect-DUpeDfBg.js";
-import { TText, TView, clamp, createTheme, fitCellText, linkifyTextSegments, mergeStyle, tuiDefaultTheme } from "./linkify-D68T7rdW.js";
+import { charCellWidth } from "./create-terminal-Db_-UGVQ.js";
+import "./ansi-palette-BHF1rN7R.js";
+import "./hyperlink-clbb_ha_.js";
+import "./dom-renderer-BfwAEQMf.js";
+import { EventZIndexContextKey, LayoutContextKey, RenderStackKey, TInputPluginsContextKey, TPathPickerProviderContextKey, VisibilityContextKey, injectionKey, intersectRect, padEndByCells$1 as padEndByCells, repeatChar, sanitizeInlineText, sanitizeTextBlock, sliceByCells, sliceByCellsRange, spaces, textCellWidth$1 as textCellWidth, translateRect, useLayout, useRenderNode, useRenderStack, useTerminal, useTerminalNode, useVisibility, wrapByCells } from "./rect-JzWMJxxc.js";
+import { TText, TView, clamp, createTheme, fitCellText, linkifyTextSegments, mergeStyle, tuiDefaultTheme } from "./linkify-CL9wwnZN.js";
 import "./runtime-Byf8XXOT.js";
 import "./frame-perf-CHpWhbC4.js";
 import "./trace-Bh8WnoMo.js";
 import "./env-Cl8qmNFN.js";
-import { TAutocompleteInput, TBadge, TCheckbox, TCode, TDataTable, TDivider, TForm, TFormContextKey, TFormField, TLink, TLinkifyText, TList, TPasswordInput, TProgress, TRadioGroup, TSlider, TSpinner, TSwitch, TTable, TTag, TToastViewport, TTree, TerminalProvider, createTInputHostPlugin, useTForm } from "./TTree-CGdE-CYu.js";
+import { TAutocompleteInput, TBadge, TCheckbox, TCode, TDataTable, TDivider, TForm, TFormContextKey, TFormField, TLink, TLinkifyText, TList, TPasswordInput, TProgress, TRadioGroup, TSlider, TSpinner, TSwitch, TTable, TTag, TToastViewport, TTree, TerminalProvider, createTInputHostPlugin, useTForm } from "./TTree-kk8ntrpg.js";
 import "./terminal-selection-4W1SJj4c.js";
 import "./debug-logger-CmsGI4of.js";
-import { TBox, TCommandPalette, TDialog, TInput, TRenderPlane, TSelect, clamp$1, computeCommandPaletteMatchRanges, createOverlayFocusStack, isCommitMention, isWhitespace, mentionChipStyle, padEndByCells as padEndByCells$1, resolveOverlayPlacement, sliceByCellsWindow, textCellWidth as textCellWidth$1 } from "./TSelect-tJ87rKPM.js";
+import { TBox, TCommandPalette, TDialog, TInput, TRenderPlane, TSelect, clamp$1, computeCommandPaletteMatchRanges, createOverlayFocusStack, isCommitMention, isWhitespace, mentionChipStyle, padEndByCells as padEndByCells$1, resolveOverlayPlacement, sliceByCellsWindow, textCellWidth as textCellWidth$1 } from "./TSelect-CMBOOFwK.js";
 import { normalizePath, stripTrailingSlash } from "./path-mnSgEpCm.js";
 import { applyWheelScroll, createWheelScrollState } from "./wheel-scroll-DASkEZr-.js";
 import { parsePathQuery, resolveUserPath, suggestPaths } from "./path-suggest-Dndu4dTi.js";
-import { TMermaid$1 as TMermaid, TMermaidText$1 as TMermaidText, isSimpleMermaidFlowchartSource, markMermaidRenderErrorFatal } from "./TMermaidText-frVr8Ysb.js";
+import { TMermaid$1 as TMermaid, TMermaidText$1 as TMermaidText, isSimpleMermaidFlowchartSource, markMermaidRenderErrorFatal } from "./TMermaidText-wLnMMvVS.js";
 import { Comment, Fragment, computed, defineComponent, h, inject, onBeforeUnmount, onMounted, onUnmounted, provide, reactive, ref, shallowReactive, shallowRef, watch, watchEffect } from "vue";
 
 //#region src/observability/cli-latency.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simon_he/vue-tui",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "description": "Vue 3 terminal UI components and renderers for browser DOM, CLI stdout, logs, markdown transcripts, and agent consoles",
   "keywords": [
     "agent-console",
@@ -246,12 +246,12 @@
     "access": "public"
   },
   "dependencies": {
-    "katex": "^0.16.47",
-    "stream-markdown-parser": "1.0.7"
+    "stream-markdown-parser": "1.1.9"
   },
   "devDependencies": {
     "@arethetypeswrong/core": "^0.18.3",
     "@playwright/test": "^1.61.0",
+    "@resvg/resvg-js": "^2.6.2",
     "@types/node": "^18.19.130",
     "@vitest/coverage-v8": "^4.1.9",
     "beautiful-mermaid": "^1.1.3",
@@ -259,7 +259,9 @@
     "bun-webgpu": "0.1.7",
     "esbuild": "^0.20.2",
     "happy-dom": "^17.6.3",
+    "katex": "^0.16.47",
     "lint-staged": "^13.3.0",
+    "mathjax-full": "^3.2.2",
     "oxfmt": "^0.47.0",
     "oxlint": "^1.70.0",
     "picocolors": "^1.1.1",
@@ -275,8 +277,11 @@
     "vue": "^3.5.38"
   },
   "peerDependencies": {
+    "@resvg/resvg-js": "^2.6.2",
     "beautiful-mermaid": "^1.1.3",
     "bun-webgpu": "^0.1.7",
+    "katex": "^0.16.47",
+    "mathjax-full": "^3.2.2",
     "vue": ">=3.3.0 <4"
   },
   "peerDependenciesMeta": {
@@ -285,6 +290,15 @@
     },
     "bun-webgpu": {
       "optional": true
+    },
+    "katex": {
+      "optional": true
+    },
+    "mathjax-full": {
+      "optional": true
+    },
+    "@resvg/resvg-js": {
+      "optional": true
     }
   },
   "lint-staged": {
@@ -317,6 +331,8 @@
     "profile:agent-console:abc": "tsx scripts/profile-agent-console-abc.ts",
     "profile:agent-console:abc:smoke": "AGENT_CONSOLE_PROFILE_SMOKE=1 tsx scripts/profile-agent-console-abc.ts",
     "example:tlog-view-lab": "pnpm run build && VT_SMOKE=1 tsx examples/tlog-view-lab.ts",
+    "example:chat-cli:smoke": "VT_SMOKE=1 tsx examples/chat-cli.ts",
+    "run:chat-cli:terminal": "pnpm run build && VT_INTERACTIVE=1 tsx examples/chat-cli.ts",
     "run:basic:terminal": "pnpm run build && pnpm -C examples/basic terminal",
     "run:agent-console:terminal": "pnpm run build && pnpm -C examples/agent-console terminal",
     "run:basic:multi-select:terminal": "pnpm run build && pnpm -C examples/basic build:terminal:multi-select && pnpm -C examples/basic terminal:multi-select",
@@ -333,6 +349,7 @@
     "test:3d:bun": "bun scripts/smoke-bun-3d.ts",
     "run:image-showcase:terminal": "tsx examples/image-showcase.ts",
     "run:katex-showcase:terminal": "tsx examples/katex-showcase.ts",
+    "run:mermaid-image-showcase:terminal": "tsx examples/mermaid-image-showcase.ts",
     "trace:terminal-resize": "node scripts/trace-terminal-resize.mjs",
     "test:component-terminal:smoke": "VT_SMOKE=1 tsx scripts/run-component-terminal.ts --all",
     "e2e:component-terminal-charts": "tsx scripts/run-component-terminal.ts --capture-charts",

package/dist/mermaid-BNhM1jAZ.js

@@ -1,123 +0,0 @@
-import { TMermaidText$1 as TMermaidText, isSimpleMermaidFlowchartSource, markMermaidRenderErrorFatal, tMermaidTextProps } from "./TMermaidText-frVr8Ysb.js";
-import { defineComponent, h } from "vue";
-
-//#region src/vue/mermaid/beautiful-mermaid.ts
-const BEAUTIFUL_MERMAID_INSTALL_HINT = "Install beautiful-mermaid and use TMermaidText from @simon_he/vue-tui/mermaid or @simon_he/vue-tui/agent/mermaid, or pass a custom renderer prop.";
-const MISSING_BEAUTIFUL_MERMAID_ERROR_CODE = "VUE_TUI_MISSING_BEAUTIFUL_MERMAID";
-const INVALID_BEAUTIFUL_MERMAID_EXPORT_ERROR_CODE = "VUE_TUI_INVALID_BEAUTIFUL_MERMAID_EXPORT";
-let cachedBeautifulMermaid = null;
-function functionValue(value) {
-	return typeof value === "function" ? value : null;
-}
-function functionProp(target, key) {
-	if (!target || typeof target !== "object") return null;
-	if (!(key in target)) return null;
-	const value = target[key];
-	return typeof value === "function" ? value : null;
-}
-function errorMessage(error) {
-	return error instanceof Error ? error.message : String(error);
-}
-function codedError(message, code) {
-	const error = new Error(message);
-	error.code = code;
-	return error;
-}
-function missingBeautifulMermaidError(error) {
-	if (error && typeof error === "object" && errorCode(error) === MISSING_BEAUTIFUL_MERMAID_ERROR_CODE) return markMermaidRenderErrorFatal(error);
-	const detail = errorMessage(error);
-	return markMermaidRenderErrorFatal(codedError(`${BEAUTIFUL_MERMAID_INSTALL_HINT} (${detail})`, MISSING_BEAUTIFUL_MERMAID_ERROR_CODE));
-}
-function errorCode(error) {
-	if (!error || typeof error !== "object") return "";
-	const value = error.code;
-	return typeof value === "string" ? value : "";
-}
-function errorCause(error) {
-	if (!error || typeof error !== "object") return void 0;
-	return error.cause;
-}
-function isMissingBeautifulMermaid(error) {
-	return isMissingBeautifulMermaidWithSeen(error, new WeakSet());
-}
-function isMissingBeautifulMermaidWithSeen(error, seen) {
-	if (error && typeof error === "object") {
-		if (seen.has(error)) return false;
-		seen.add(error);
-	}
-	const message = errorMessage(error);
-	const code = errorCode(error);
-	if (code === MISSING_BEAUTIFUL_MERMAID_ERROR_CODE) return true;
-	const mentionsBeautifulMermaid = /Cannot find package ['"]beautiful-mermaid['"]/.test(message) || /Cannot find module ['"]beautiful-mermaid['"]/.test(message) || /Cannot resolve module ['"]beautiful-mermaid['"]/.test(message) || /Can't resolve ['"]beautiful-mermaid['"]/.test(message) || /Failed to resolve module specifier ['"]beautiful-mermaid['"]/.test(message) || /Failed to resolve import ['"]beautiful-mermaid['"]/.test(message) || /Could not resolve ['"]beautiful-mermaid['"]/.test(message);
-	if (mentionsBeautifulMermaid && (code === "" || code === "ERR_MODULE_NOT_FOUND" || code === "MODULE_NOT_FOUND" || code === "UNRESOLVED_IMPORT")) return true;
-	const cause = errorCause(error);
-	return cause !== void 0 && isMissingBeautifulMermaidWithSeen(cause, seen);
-}
-function resolveBeautifulMermaidRenderer(mod) {
-	const renderer = functionProp(mod, "renderMermaidASCII") ?? functionProp(mod, "renderMermaidAscii") ?? functionValue(mod.default) ?? functionProp(mod.default, "renderMermaidASCII") ?? functionProp(mod.default, "renderMermaidAscii");
-	if (!renderer) throw markMermaidRenderErrorFatal(codedError("beautiful-mermaid is installed but does not export renderMermaidASCII.", INVALID_BEAUTIFUL_MERMAID_EXPORT_ERROR_CODE));
-	return renderer;
-}
-function hasErrorCode(error, code, seen = new WeakSet()) {
-	if (!error || typeof error !== "object") return false;
-	if (seen.has(error)) return false;
-	seen.add(error);
-	if (errorCode(error) === code) return true;
-	const cause = errorCause(error);
-	return cause !== void 0 && hasErrorCode(cause, code, seen);
-}
-function isBeautifulMermaidExportError(error) {
-	return hasErrorCode(error, INVALID_BEAUTIFUL_MERMAID_EXPORT_ERROR_CODE);
-}
-const isTransientBeautifulMermaidRenderError = (error) => {
-	if (isMissingBeautifulMermaid(error)) return false;
-	if (isBeautifulMermaidExportError(error)) return false;
-	return true;
-};
-async function loadBeautifulMermaid() {
-	if (!cachedBeautifulMermaid) cachedBeautifulMermaid = import("beautiful-mermaid").then((mod) => mod).catch((error) => {
-		cachedBeautifulMermaid = null;
-		if (isMissingBeautifulMermaid(error)) throw missingBeautifulMermaidError(error);
-		throw markMermaidRenderErrorFatal(error);
-	});
-	return cachedBeautifulMermaid;
-}
-const beautifulMermaidRenderer = async (code, options) => {
-	try {
-		const mod = await loadBeautifulMermaid();
-		const renderer = resolveBeautifulMermaidRenderer(mod);
-		return await renderer(code, options);
-	} catch (error) {
-		if (isMissingBeautifulMermaid(error)) throw missingBeautifulMermaidError(error);
-		throw error;
-	}
-};
-function createBeautifulMermaidRenderer() {
-	return beautifulMermaidRenderer;
-}
-const TMermaidText$1 = defineComponent({
-	name: "TMermaidText",
-	inheritAttrs: false,
-	props: tMermaidTextProps,
-	emits: { copy: (_payload) => true },
-	setup(props, { attrs, emit, slots }) {
-		return () => {
-			const renderer = props.renderer ?? beautifulMermaidRenderer;
-			const shouldRenderSource = props.shouldRenderSource ?? isSimpleMermaidFlowchartSource;
-			return h(TMermaidText, {
-				...attrs,
-				...props,
-				renderer,
-				shouldRenderSource,
-				isTransientError: props.isTransientError ?? isTransientBeautifulMermaidRenderError,
-				onCopy: (payload) => emit("copy", payload)
-			}, slots);
-		};
-	}
-});
-const TMermaid = TMermaidText$1;
-const TBeautifulMermaidText = TMermaidText$1;
-const TBeautifulMermaid = TMermaidText$1;
-
-//#endregion
-export { TBeautifulMermaid, TBeautifulMermaidText, TMermaid, TMermaidText$1 as TMermaidText, beautifulMermaidRenderer, createBeautifulMermaidRenderer };