@simon_he/vue-tui 1.1.3 → 1.1.5

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

@@ -0,0 +1,73 @@
+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>;
+/**
+ * @resvg/resvg-js (usvg) does not support CSS custom properties (`var()`) or
+ * `color-mix()`. beautiful-mermaid 1.x emits both, so feeding the raw SVG to
+ * resvg renders every shape black. This resolver inlines all `var(--x)` /
+ * `color-mix(in srgb, ...)` color expressions into concrete hex values before
+ * rasterization. Exported for tests.
+ */
+export declare function resolveMermaidSvgForResvg(svg: string, fallbackBg: string, fallbackFg: string): string;
+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$1 as clamp, createTheme, fitCellText, linkifyTextSegments, mergeStyle, tuiDefaultTheme } from "./linkify-BjI4zVfY.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-DdAjCPHu.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 as clamp$1, computeCommandPaletteMatchRanges, createOverlayFocusStack, isCommitMention, isWhitespace, mentionChipStyle, padEndByCells as padEndByCells$1, resolveOverlayPlacement, sliceByCellsWindow, textCellWidth as textCellWidth$1 } from "./TSelect-Dx34M1pF.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.3",
+  "version": "1.1.5",
   "description": "Vue 3 terminal UI components and renderers for browser DOM, CLI stdout, logs, markdown transcripts, and agent consoles",
   "keywords": [
     "agent-console",
@@ -246,13 +246,14 @@
     "access": "public"
   },
   "dependencies": {
-    "stream-markdown-parser": "1.1.9"
+    "stream-markdown-parser": "1.2.3"
   },
   "devDependencies": {
-    "@arethetypeswrong/core": "^0.18.3",
-    "@playwright/test": "^1.61.0",
+    "@arethetypeswrong/core": "^0.18.5",
+    "@playwright/test": "^1.62.1",
+    "@resvg/resvg-js": "^2.6.2",
     "@types/node": "^18.19.130",
-    "@vitest/coverage-v8": "^4.1.9",
+    "@vitest/coverage-v8": "^4.1.10",
     "beautiful-mermaid": "^1.1.3",
     "bumpp": "^8.2.1",
     "bun-webgpu": "0.1.7",
@@ -260,24 +261,27 @@
     "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",
+    "oxlint": "^1.77.0",
     "picocolors": "^1.1.1",
     "pinia": "^3.0.4",
-    "publint": "^0.3.21",
+    "publint": "^0.3.23",
     "rimraf": "^3.0.2",
     "tsdown": "^0.9.9",
-    "tsx": "^4.22.4",
+    "tsx": "^4.23.11",
     "typescript": "^5.9.3",
     "vite": "8.0.16",
     "vitepress": "^1.6.4",
-    "vitest": "^4.1.9",
-    "vue": "^3.5.38"
+    "vitest": "^4.1.10",
+    "vue": "^3.5.41"
   },
   "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": {
@@ -289,6 +293,12 @@
     },
     "katex": {
       "optional": true
+    },
+    "mathjax-full": {
+      "optional": true
+    },
+    "@resvg/resvg-js": {
+      "optional": true
     }
   },
   "lint-staged": {
@@ -321,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",
@@ -337,6 +349,8 @@
     "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",
+    "run:mermaid-adaptive-showcase:terminal": "tsx examples/mermaid-adaptive-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 };