@simon_he/vue-tui 1.0.2 → 1.1.0

package/dist/markdown.d.cts

@@ -6,6 +6,6 @@ export { layoutMarkdownBlocks } from "./vue/markdown/layout.js";
 export { createTuiMarkdownParser, isSafeMarkdownLink } from "./vue/markdown/parser.js";
 export type { TuiMarkdownBlockSource, TuiMarkdownBlockSourceOptions, TuiMarkdownBlockSourceSnapshot, } from "./vue/markdown/block-source.js";
 export type { TuiMarkdownLayoutOptions } from "./vue/markdown/layout.js";
-export type { TuiMarkdownBlock, TuiMarkdownInlineSegment, TuiMarkdownNode, TuiMarkdownTableCell, TuiMarkdownTableCellAlign, TuiMarkdownVisualRow, TuiMarkdownVisualSegment, } from "./vue/markdown/types.js";
+export type { TuiMarkdownBlock, TuiMarkdownGraphicSegment, TuiMarkdownImageActionPayload, TuiMarkdownImageResolver, TuiMarkdownImageResolverResult, TuiMarkdownImageSize, TuiMarkdownInlineSegment, TuiMarkdownLinkActionPayload, TuiMarkdownMathActionPayload, TuiMarkdownMathSegment, TuiMarkdownNode, TuiMarkdownTableCell, TuiMarkdownTableCellAlign, TuiMarkdownVisualRow, TuiMarkdownVisualSegment, } from "./vue/markdown/types.js";
 export type { TuiMarkdownParseConfig, TuiMarkdownParser } from "./vue/markdown/parser.js";
 export type { TuiMarkdownTheme, TuiMarkdownThemeOverrides } from "./vue/markdown/theme.js";

package/dist/markdown.d.ts

@@ -6,6 +6,6 @@ export { layoutMarkdownBlocks } from "./vue/markdown/layout.js";
 export { createTuiMarkdownParser, isSafeMarkdownLink } from "./vue/markdown/parser.js";
 export type { TuiMarkdownBlockSource, TuiMarkdownBlockSourceOptions, TuiMarkdownBlockSourceSnapshot, } from "./vue/markdown/block-source.js";
 export type { TuiMarkdownLayoutOptions } from "./vue/markdown/layout.js";
-export type { TuiMarkdownBlock, TuiMarkdownInlineSegment, TuiMarkdownNode, TuiMarkdownTableCell, TuiMarkdownTableCellAlign, TuiMarkdownVisualRow, TuiMarkdownVisualSegment, } from "./vue/markdown/types.js";
+export type { TuiMarkdownBlock, TuiMarkdownGraphicSegment, TuiMarkdownImageActionPayload, TuiMarkdownImageResolver, TuiMarkdownImageResolverResult, TuiMarkdownImageSize, TuiMarkdownInlineSegment, TuiMarkdownLinkActionPayload, TuiMarkdownMathActionPayload, TuiMarkdownMathSegment, TuiMarkdownNode, TuiMarkdownTableCell, TuiMarkdownTableCellAlign, TuiMarkdownVisualRow, TuiMarkdownVisualSegment, } from "./vue/markdown/types.js";
 export type { TuiMarkdownParseConfig, TuiMarkdownParser } from "./vue/markdown/parser.js";
 export type { TuiMarkdownTheme, TuiMarkdownThemeOverrides } from "./vue/markdown/theme.js";

package/dist/markdown.js

@@ -1,8 +1,13 @@
-import "./hyperlink-Bn02UXJb.js";
-import { intersectRect, translateRect, useLayout, useRenderNode, useTerminal, useVisibility, withTextWidthProvider } from "./wheel-scroll-vBRaQ7p-.js";
-import "./terminal-selection-DBinO6p5.js";
-import { TVirtualMarkdown, buildMarkdownBlocks, buildMarkdownVisualRows, createMarkdownBlockSource, createTuiMarkdownParser, isSafeMarkdownLink, layoutMarkdownBlocks, markdownThemeSignature, paintMarkdownVisualRow } from "./block-source-CKUOnkgT.js";
-import { computed, defineComponent, getCurrentInstance, h, markRaw, onBeforeUnmount, shallowRef, watch } from "vue";
+import "./hyperlink-_1FAj7Wq.js";
+import "./width-GqllnV8C.js";
+import { EventZIndexContextKey, intersectRect, translateRect, useLayout, useRenderNode, useTerminal, useTerminalNode, useVisibility, withTextWidthProvider } from "./rect-DUpeDfBg.js";
+import "./env-Cl8qmNFN.js";
+import "./terminal-selection-4W1SJj4c.js";
+import "./debug-logger-CmsGI4of.js";
+import "./wheel-scroll-DASkEZr-.js";
+import { getTerminalGraphicsOutputVersion, subscribeTerminalGraphicsOutput } from "./terminal-graphics-Bbe83wSr.js";
+import { TVirtualMarkdown, buildMarkdownBlocks, buildMarkdownVisualRows, clearMarkdownImageGraphics, collectVisibleMarkdownImageGraphicIds, createMarkdownBlockSource, createTuiMarkdownParser, findMarkdownImageActionAt, findMarkdownLinkActionAt, findMarkdownMathActionAt, isSafeMarkdownLink, layoutMarkdownBlocks, markdownThemeSignature, paintMarkdownVisualRow } from "./block-source-CrlmaBM5.js";
+import { computed, defineComponent, getCurrentInstance, h, inject, markRaw, onBeforeUnmount, shallowRef, watch } from "vue";
 
 //#region src/vue/components/TMarkdownText.ts
 const TMarkdownText = defineComponent({
@@ -55,13 +60,60 @@ const TMarkdownText = defineComponent({
 		theme: {
 			type: Object,
 			default: void 0
+		},
+		imageRenderer: {
+			type: Function,
+			default: void 0
+		},
+		imageMinWidth: {
+			type: Number,
+			default: void 0
+		},
+		imageMaxWidth: {
+			type: Number,
+			default: void 0
+		},
+		imageMinHeight: {
+			type: Number,
+			default: void 0
+		},
+		imageMaxHeight: {
+			type: Number,
+			default: void 0
+		},
+		imagePreserveAspectRatio: {
+			type: Boolean,
+			default: true
+		},
+		imageActions: {
+			type: Boolean,
+			default: false
+		},
+		mathActions: {
+			type: Boolean,
+			default: false
+		},
+		linkActions: {
+			type: Boolean,
+			default: false
+		},
+		imageOcclusionRects: {
+			type: Array,
+			default: void 0
 		}
 	},
-	setup(props) {
+	emits: {
+		imageAction: (_payload) => true,
+		mathAction: (_payload) => true,
+		linkAction: (_payload) => true
+	},
+	setup(props, { emit }) {
 		const instance = getCurrentInstance();
 		const { terminal, defaultStyle, scheduler, widthProvider } = useTerminal();
 		const layout = useLayout();
 		const { visible, rootProps } = useVisibility();
+		const parentEventZ = inject(EventZIndexContextKey, computed(() => 0));
+		const eventZ = computed(() => (parentEventZ.value ?? 0) + (props.zIndex ?? 0));
 		const rows = shallowRef(markRaw([]));
 		const documentVersion = shallowRef(0);
 		let builtOnce = false;
@@ -71,6 +123,10 @@ const TMarkdownText = defineComponent({
 			streaming: props.streaming,
 			customHtmlTags: props.customHtmlTags
 		})));
+		const graphicsOutputVersion = shallowRef(getTerminalGraphicsOutputVersion(terminal));
+		const unsubscribeGraphicsOutput = subscribeTerminalGraphicsOutput(terminal, () => {
+			graphicsOutputVersion.value = getTerminalGraphicsOutputVersion(terminal);
+		});
 		watch(() => `${props.streaming ? 1 : 0}:${(props.customHtmlTags ?? []).join("\0")}`, () => {
 			parser.value = markRaw(createTuiMarkdownParser({
 				streaming: props.streaming,
@@ -80,7 +136,15 @@ const TMarkdownText = defineComponent({
 		function rebuildRows() {
 			rows.value = markRaw(withTextWidthProvider(widthProvider, () => buildMarkdownVisualRows(props.content, props.w, parser.value, {
 				final: props.final,
-				theme: props.theme
+				theme: props.theme,
+				imageResolver: props.imageRenderer,
+				imageSize: {
+					minWidth: props.imageMinWidth,
+					maxWidth: props.imageMaxWidth,
+					minHeight: props.imageMinHeight,
+					maxHeight: props.imageMaxHeight,
+					preserveAspectRatio: props.imagePreserveAspectRatio
+				}
 			})));
 			documentVersion.value++;
 		}
@@ -108,13 +172,21 @@ const TMarkdownText = defineComponent({
 			() => props.w,
 			() => parser.value,
 			() => props.final,
-			() => markdownThemeSignature(props.theme)
+			() => props.imageRenderer,
+			() => markdownThemeSignature(props.theme),
+			() => props.imageMinWidth,
+			() => props.imageMaxWidth,
+			() => props.imageMinHeight,
+			() => props.imageMaxHeight,
+			() => props.imagePreserveAspectRatio
 		], () => {
 			scheduleRebuild();
 		}, { immediate: true });
 		onBeforeUnmount(() => {
 			alive = false;
 			rebuildVersion++;
+			unsubscribeGraphicsOutput();
+			clearMarkdownImageGraphics(terminal, fullRect.value);
 		});
 		const fullRect = computed(() => {
 			const height = props.h ?? Math.max(1, rows.value.length);
@@ -135,53 +207,141 @@ const TMarkdownText = defineComponent({
 				h: 0
 			};
 		});
-		useRenderNode(() => ({
-			zIndex: props.zIndex,
-			rect: visible.value ? absRect.value : {
-				x: 0,
-				y: 0,
-				w: 0,
-				h: 0
-			},
-			deps: [
-				visible.value,
-				absRect.value,
-				fullRect.value,
-				props.style,
-				props.clear,
-				documentVersion.value,
-				defaultStyle.value
-			],
-			paint: (dirtyRows) => {
-				withTextWidthProvider(widthProvider, () => {
-					if (!visible.value) return;
-					const r = absRect.value;
-					const full = fullRect.value;
-					if (r.w <= 0 || r.h <= 0) return;
-					const baseStyle = props.style ?? defaultStyle.value;
-					const clipStart = Math.max(0, Math.floor(r.x - full.x));
-					const paintRow = (y) => {
-						if (y < r.y || y >= r.y + r.h) return;
-						const rowIndex = Math.floor(y - full.y);
-						const row = rows.value[rowIndex];
-						if (!row && !props.clear) return;
-						paintMarkdownVisualRow(terminal, row, {
+		function imageActionAt(event) {
+			const r = absRect.value;
+			const full = fullRect.value;
+			return findMarkdownImageActionAt(rows.value, {
+				cellX: event.cellX,
+				cellY: event.cellY
+			}, {
+				screenRect: r,
+				rowOffset: Math.max(0, Math.floor(r.y - full.y)),
+				clipStart: Math.max(0, Math.floor(r.x - full.x))
+			});
+		}
+		function linkActionAt(event) {
+			const r = absRect.value;
+			const full = fullRect.value;
+			return findMarkdownLinkActionAt(rows.value, {
+				cellX: event.cellX,
+				cellY: event.cellY
+			}, {
+				screenRect: r,
+				rowOffset: Math.max(0, Math.floor(r.y - full.y)),
+				clipStart: Math.max(0, Math.floor(r.x - full.x))
+			});
+		}
+		function mathActionAt(event) {
+			const r = absRect.value;
+			const full = fullRect.value;
+			return findMarkdownMathActionAt(rows.value, {
+				cellX: event.cellX,
+				cellY: event.cellY
+			}, {
+				screenRect: r,
+				rowOffset: Math.max(0, Math.floor(r.y - full.y)),
+				clipStart: Math.max(0, Math.floor(r.x - full.x))
+			});
+		}
+		useTerminalNode(() => ({
+			rect: absRect.value,
+			zIndex: eventZ.value,
+			visible: visible.value && (props.imageActions || props.mathActions || props.linkActions),
+			focusable: false,
+			selectable: false,
+			handlers: { click: (event) => {
+				if (props.imageActions) {
+					const hit = imageActionAt(event);
+					if (hit) {
+						event.preventDefault();
+						emit("imageAction", hit);
+						return;
+					}
+				}
+				if (props.mathActions) {
+					const math = mathActionAt(event);
+					if (math) {
+						event.preventDefault();
+						emit("mathAction", math);
+						return;
+					}
+				}
+				if (!props.linkActions) return;
+				const link = linkActionAt(event);
+				if (!link) return;
+				event.preventDefault();
+				emit("linkAction", link);
+			} }
+		}));
+		useRenderNode(() => {
+			const full = fullRect.value;
+			return {
+				zIndex: props.zIndex,
+				rect: visible.value ? full : {
+					x: 0,
+					y: 0,
+					w: 0,
+					h: 0
+				},
+				deps: [
+					visible.value,
+					full.x,
+					full.y,
+					full.w,
+					full.h,
+					props.style,
+					props.clear,
+					documentVersion.value,
+					graphicsOutputVersion.value,
+					defaultStyle.value,
+					props.imageOcclusionRects
+				],
+				paint: (dirtyRows) => {
+					withTextWidthProvider(widthProvider, () => {
+						if (!visible.value) return;
+						const r = absRect.value;
+						const full$1 = fullRect.value;
+						if (r.w <= 0 || r.h <= 0) return;
+						const baseStyle = props.style ?? defaultStyle.value;
+						const clipStart = Math.max(0, Math.floor(r.x - full$1.x));
+						const rowOffset = Math.max(0, Math.floor(r.y - full$1.y));
+						const isGraphicCovered = (rect) => {
+							return props.imageOcclusionRects?.some((item) => intersectRect(rect, item)) === true;
+						};
+						const keepGraphicIds = collectVisibleMarkdownImageGraphicIds(rows.value, {
 							x: r.x,
-							y,
+							y: r.y,
 							w: r.w,
+							h: r.h,
+							rowOffset,
 							clipStart,
-							baseStyle,
-							clear: props.clear
+							isGraphicCovered
 						});
-					};
-					if (dirtyRows?.length) {
-						for (const y of dirtyRows) paintRow(y);
-						return;
-					}
-					for (let y = r.y; y < r.y + r.h; y++) paintRow(y);
-				});
-			}
-		}));
+						const paintRow = (y) => {
+							if (y < r.y || y >= r.y + r.h) return;
+							const rowIndex = Math.floor(y - full$1.y);
+							const row = rows.value[rowIndex];
+							if (!row && !props.clear) return;
+							paintMarkdownVisualRow(terminal, row, {
+								x: r.x,
+								y,
+								w: r.w,
+								clipStart,
+								baseStyle,
+								clear: props.clear,
+								keepGraphicIds,
+								isGraphicCovered
+							});
+						};
+						if (dirtyRows?.length) {
+							for (const y of dirtyRows) paintRow(y);
+							return;
+						}
+						for (let y = r.y; y < r.y + r.h; y++) paintRow(y);
+					});
+				}
+			};
+		});
 		return () => h("span", rootProps);
 	}
 });

package/dist/mermaid-BNhM1jAZ.js

@@ -0,0 +1,123 @@
+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 };