@antdv-next/x-markdown 0.0.1 → 0.0.2

package/dist/index.js

@@ -1,424 +1,609 @@
-import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, h as l, normalizeClass as u, normalizeStyle as d, onMounted as f, onUnmounted as p, openBlock as m, ref as h, renderList as g, shallowRef as _, toDisplayString as v, unref as y, watch as b } from "vue";
-import x from "dompurify";
-import { Marked as S } from "marked";
+import "./index.css";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, h, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, ref, renderList, shallowRef, toDisplayString, unref, watch } from "vue";
+import { Marked } from "marked";
+import DOMPurify from "dompurify";
 //#region src/XMarkdown/components/DebugPanel.vue?vue&type=script&setup=true&lang.ts
-var C = { class: "xmd-debug-content" }, w = { class: "xmd-debug-stat" }, T = { class: "xmd-debug-stat" }, E = {
+var _hoisted_1$1 = { class: "xmd-debug-content" };
+var _hoisted_2 = { class: "xmd-debug-stat" };
+var _hoisted_3 = { class: "xmd-debug-stat" };
+var _hoisted_4 = {
 	class: "xmd-debug-chart",
 	viewBox: "0 0 200 60"
-}, D = ["d"], O = 60, k = /* @__PURE__ */ c({
+};
+var _hoisted_5 = ["d"];
+var maxSnapshots = 60;
+var DebugPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "DebugPanel",
 	props: { className: {} },
-	setup(e) {
-		let t = h(!1), n = h({
+	setup(__props) {
+		const isDragging = ref(false);
+		const position = ref({
 			x: 20,
 			y: 20
-		}), r = h({
+		});
+		const dragOffset = ref({
 			x: 0,
 			y: 0
-		}), o = h(0), s = h(0), c = h([]), l = null, g = 0, _ = 0;
-		function y() {
-			g = performance.now(), _ = 0;
-			function e() {
-				_++;
-				let t = performance.now(), n = t - g;
-				if (n >= 1e3) {
-					if (o.value = Math.round(_ * 1e3 / n), _ = 0, g = t, "memory" in performance) {
-						let e = performance.memory;
-						s.value = e ? Math.round(e.usedJSHeapSize / 1024 / 1024) : 0;
+		});
+		const fps = ref(0);
+		const memory = ref(0);
+		const snapshots = ref([]);
+		let animationFrameId = null;
+		let lastFrameTime = 0;
+		let frameCount = 0;
+		function startMonitoring() {
+			lastFrameTime = performance.now();
+			frameCount = 0;
+			function monitor() {
+				frameCount++;
+				const now = performance.now();
+				const elapsed = now - lastFrameTime;
+				if (elapsed >= 1e3) {
+					fps.value = Math.round(frameCount * 1e3 / elapsed);
+					frameCount = 0;
+					lastFrameTime = now;
+					if ("memory" in performance) {
+						const memInfo = performance.memory;
+						memory.value = memInfo ? Math.round(memInfo.usedJSHeapSize / 1024 / 1024) : 0;
 					}
-					c.value.push({
-						fps: o.value,
-						memory: s.value,
+					snapshots.value.push({
+						fps: fps.value,
+						memory: memory.value,
 						timestamp: Date.now()
-					}), c.value.length > O && c.value.shift();
+					});
+					if (snapshots.value.length > maxSnapshots) snapshots.value.shift();
 				}
-				l = requestAnimationFrame(e);
+				animationFrameId = requestAnimationFrame(monitor);
 			}
-			l = requestAnimationFrame(e);
+			animationFrameId = requestAnimationFrame(monitor);
 		}
-		function b() {
-			l !== null && (cancelAnimationFrame(l), l = null);
+		function stopMonitoring() {
+			if (animationFrameId !== null) {
+				cancelAnimationFrame(animationFrameId);
+				animationFrameId = null;
+			}
 		}
-		function x(e) {
-			t.value = !0, r.value = {
-				x: e.clientX - n.value.x,
-				y: e.clientY - n.value.y
+		function handleMouseDown(e) {
+			isDragging.value = true;
+			dragOffset.value = {
+				x: e.clientX - position.value.x,
+				y: e.clientY - position.value.y
 			};
 		}
-		function S(e) {
-			t.value && (n.value = {
-				x: e.clientX - r.value.x,
-				y: e.clientY - r.value.y
-			});
+		function handleMouseMove(e) {
+			if (!isDragging.value) return;
+			position.value = {
+				x: e.clientX - dragOffset.value.x,
+				y: e.clientY - dragOffset.value.y
+			};
 		}
-		function k() {
-			t.value = !1;
+		function handleMouseUp() {
+			isDragging.value = false;
 		}
-		function A(e) {
-			return e >= 55 ? "#52c41a" : e >= 40 ? "#faad14" : "#ff4d4f";
+		function getFpsColor(fpsValue) {
+			if (fpsValue >= 55) return "#52c41a";
+			if (fpsValue >= 40) return "#faad14";
+			return "#ff4d4f";
 		}
-		function j() {
-			return c.value.length < 2 ? "" : `M ${c.value.map((e, t) => `${t / (O - 1) * 200},${60 - e.fps / 60 * 60}`).join(" L ")}`;
+		function getChartPath() {
+			if (snapshots.value.length < 2) return "";
+			const width = 200;
+			const height = 60;
+			const maxFps = 60;
+			return `M ${snapshots.value.map((s, i) => {
+				return `${i / (maxSnapshots - 1) * width},${height - s.fps / maxFps * height}`;
+			}).join(" L ")}`;
 		}
-		return f(() => {
-			y(), document.addEventListener("mousemove", S), document.addEventListener("mouseup", k);
-		}), p(() => {
-			b(), document.removeEventListener("mousemove", S), document.removeEventListener("mouseup", k);
-		}), (t, r) => (m(), i("div", {
-			class: u(["xmd-debug-panel", e.className]),
-			style: d({
-				left: `${n.value.x}px`,
-				top: `${n.value.y}px`
-			})
-		}, [a("div", {
-			class: "xmd-debug-header",
-			onMousedown: x
-		}, [...r[0] ||= [a("span", null, "Debug Panel", -1)]], 32), a("div", C, [
-			a("div", w, [r[1] ||= a("span", { class: "xmd-debug-label" }, "FPS:", -1), a("span", { style: d({ color: A(o.value) }) }, v(o.value), 5)]),
-			a("div", T, [r[2] ||= a("span", { class: "xmd-debug-label" }, "Memory:", -1), a("span", null, v(s.value) + " MB", 1)]),
-			(m(), i("svg", E, [a("path", {
-				d: j(),
-				fill: "none",
-				stroke: "#1890ff",
-				"stroke-width": "2"
-			}, null, 8, D)]))
-		])], 6));
-	}
-}), A = (e, t) => {
-	let n = e.__vccOpts || e;
-	for (let [e, r] of t) n[e] = r;
-	return n;
-}, j = /* @__PURE__ */ A(k, [["__scopeId", "data-v-d6923a13"]]), ee = { class: "xmd-tail" }, M = /* @__PURE__ */ A(/* @__PURE__ */ c({
+		onMounted(() => {
+			startMonitoring();
+			document.addEventListener("mousemove", handleMouseMove);
+			document.addEventListener("mouseup", handleMouseUp);
+		});
+		onUnmounted(() => {
+			stopMonitoring();
+			document.removeEventListener("mousemove", handleMouseMove);
+			document.removeEventListener("mouseup", handleMouseUp);
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(["xmd-debug-panel", __props.className]),
+				style: normalizeStyle({
+					left: `${position.value.x}px`,
+					top: `${position.value.y}px`
+				})
+			}, [createElementVNode("div", {
+				class: "xmd-debug-header",
+				onMousedown: handleMouseDown
+			}, [..._cache[0] || (_cache[0] = [createElementVNode("span", null, "Debug Panel", -1)])], 32), createElementVNode("div", _hoisted_1$1, [
+				createElementVNode("div", _hoisted_2, [_cache[1] || (_cache[1] = createElementVNode("span", { class: "xmd-debug-label" }, "FPS:", -1)), createElementVNode("span", { style: normalizeStyle({ color: getFpsColor(fps.value) }) }, toDisplayString(fps.value), 5)]),
+				createElementVNode("div", _hoisted_3, [_cache[2] || (_cache[2] = createElementVNode("span", { class: "xmd-debug-label" }, "Memory:", -1)), createElementVNode("span", null, toDisplayString(memory.value) + " MB", 1)]),
+				(openBlock(), createElementBlock("svg", _hoisted_4, [createElementVNode("path", {
+					d: getChartPath(),
+					fill: "none",
+					stroke: "#1890ff",
+					"stroke-width": "2"
+				}, null, 8, _hoisted_5)]))
+			])], 6);
+		};
+	}
+});
+//#endregion
+//#region \0plugin-vue:export-helper
+var _plugin_vue_export_helper_default = (sfc, props) => {
+	const target = sfc.__vccOpts || sfc;
+	for (const [key, val] of props) target[key] = val;
+	return target;
+};
+//#endregion
+//#region src/XMarkdown/components/DebugPanel.vue
+var DebugPanel_default = /* @__PURE__ */ _plugin_vue_export_helper_default(DebugPanel_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-d6923a13"]]);
+//#endregion
+//#region src/XMarkdown/components/TailIndicator.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "xmd-tail" };
+//#endregion
+//#region src/XMarkdown/components/TailIndicator.vue
+var TailIndicator_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
 	__name: "TailIndicator",
 	props: { content: { default: "▋" } },
-	setup(e) {
-		return (t, n) => (m(), i("span", ee, v(e.content), 1));
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(__props.content), 1);
+		};
 	}
-}), [["__scopeId", "data-v-802ace82"]]), N = /* @__PURE__ */ function(e) {
-	return e.Text = "text", e.Link = "link", e.Image = "image", e.Html = "html", e.Emphasis = "emphasis", e.List = "list", e.Table = "table", e.InlineCode = "inline-code", e;
-}({}), P = {
+}), [["__scopeId", "data-v-802ace82"]]);
+//#endregion
+//#region src/XMarkdown/interface.ts
+var StreamCacheTokenType = /* @__PURE__ */ function(StreamCacheTokenType) {
+	StreamCacheTokenType["Text"] = "text";
+	StreamCacheTokenType["Link"] = "link";
+	StreamCacheTokenType["Image"] = "image";
+	StreamCacheTokenType["Html"] = "html";
+	StreamCacheTokenType["Emphasis"] = "emphasis";
+	StreamCacheTokenType["List"] = "list";
+	StreamCacheTokenType["Table"] = "table";
+	StreamCacheTokenType["InlineCode"] = "inline-code";
+	return StreamCacheTokenType;
+}({});
+//#endregion
+//#region src/XMarkdown/composables/useStreaming.ts
+var STREAM_INCOMPLETE_REGEX = {
 	image: [/^!\[[^\]\r\n]{0,1000}$/, /^!\[[^\r\n]{0,1000}\]\(*[^)\r\n]{0,1000}$/],
 	link: [/^\[[^\]\r\n]{0,1000}$/, /^\[[^\r\n]{0,1000}\]\(*[^)\r\n]{0,1000}$/],
 	html: [/^<\/$/, /^<\/?[a-zA-Z][a-zA-Z0-9-]{0,100}[^>\r\n]{0,1000}$/],
 	commonEmphasis: [/^(\*{1,3}|_{1,3})(?!\s)(?!.*\1$)[^\r\n]{0,1000}$/],
 	list: [/^[-+*]\s{0,3}$/, /^[-+*]\s{1,3}(\*{1,3}|_{1,3})(?!\s)(?!.*\1$)[^\r\n]{0,1000}$/],
 	"inline-code": [/^`[^`\r\n]{0,300}$/]
-}, F = (e) => {
-	if (e.includes("\n\n")) return !1;
-	let t = e.split("\n");
-	if (t.length <= 1) return !0;
-	let [n, r] = t, i = n.trim();
-	if (!/^\|.*\|$/.test(i)) return !1;
-	let a = r.trim().split("|").map((e) => e.trim()).filter(Boolean), o = /^:?-+:?$/;
-	return a.every((e, t) => t === a.length - 1 && e === ":" || o.test(e));
-}, I = {
-	[N.Link]: {
-		tokenType: N.Link,
-		isStartOfToken: (e) => e.startsWith("["),
-		isStreamingValid: (e) => P.link.some((t) => t.test(e))
+};
+var isTableInComplete = (markdown) => {
+	if (markdown.includes("\n\n")) return false;
+	const lines = markdown.split("\n");
+	if (lines.length <= 1) return true;
+	const [header, separator] = lines;
+	const trimmedHeader = header.trim();
+	if (!/^\|.*\|$/.test(trimmedHeader)) return false;
+	const columns = separator.trim().split("|").map((col) => col.trim()).filter(Boolean);
+	const separatorRegex = /^:?-+:?$/;
+	return columns.every((col, index) => index === columns.length - 1 ? col === ":" || separatorRegex.test(col) : separatorRegex.test(col));
+};
+var tokenRecognizerMap = {
+	[StreamCacheTokenType.Link]: {
+		tokenType: StreamCacheTokenType.Link,
+		isStartOfToken: (markdown) => markdown.startsWith("["),
+		isStreamingValid: (markdown) => STREAM_INCOMPLETE_REGEX.link.some((re) => re.test(markdown))
 	},
-	[N.Image]: {
-		tokenType: N.Image,
-		isStartOfToken: (e) => e.startsWith("!"),
-		isStreamingValid: (e) => P.image.some((t) => t.test(e))
+	[StreamCacheTokenType.Image]: {
+		tokenType: StreamCacheTokenType.Image,
+		isStartOfToken: (markdown) => markdown.startsWith("!"),
+		isStreamingValid: (markdown) => STREAM_INCOMPLETE_REGEX.image.some((re) => re.test(markdown))
 	},
-	[N.Html]: {
-		tokenType: N.Html,
-		isStartOfToken: (e) => e.startsWith("<"),
-		isStreamingValid: (e) => P.html.some((t) => t.test(e))
+	[StreamCacheTokenType.Html]: {
+		tokenType: StreamCacheTokenType.Html,
+		isStartOfToken: (markdown) => markdown.startsWith("<"),
+		isStreamingValid: (markdown) => STREAM_INCOMPLETE_REGEX.html.some((re) => re.test(markdown))
 	},
-	[N.Emphasis]: {
-		tokenType: N.Emphasis,
-		isStartOfToken: (e) => e.startsWith("*") || e.startsWith("_"),
-		isStreamingValid: (e) => P.commonEmphasis.some((t) => t.test(e))
+	[StreamCacheTokenType.Emphasis]: {
+		tokenType: StreamCacheTokenType.Emphasis,
+		isStartOfToken: (markdown) => markdown.startsWith("*") || markdown.startsWith("_"),
+		isStreamingValid: (markdown) => STREAM_INCOMPLETE_REGEX.commonEmphasis.some((re) => re.test(markdown))
 	},
-	[N.List]: {
-		tokenType: N.List,
-		isStartOfToken: (e) => /^[-+*]/.test(e),
-		isStreamingValid: (e) => P.list.some((t) => t.test(e)),
-		getCommitPrefix: (e) => {
-			let t = e.match(/^([-+*]\s{0,3})/)?.[1], n = t ? e.slice(t.length) : "";
-			return t && n.startsWith("`") ? t : null;
+	[StreamCacheTokenType.List]: {
+		tokenType: StreamCacheTokenType.List,
+		isStartOfToken: (markdown) => /^[-+*]/.test(markdown),
+		isStreamingValid: (markdown) => STREAM_INCOMPLETE_REGEX.list.some((re) => re.test(markdown)),
+		getCommitPrefix: (pending) => {
+			const listPrefix = pending.match(/^([-+*]\s{0,3})/)?.[1];
+			const rest = listPrefix ? pending.slice(listPrefix.length) : "";
+			return listPrefix && rest.startsWith("`") ? listPrefix : null;
 		}
 	},
-	[N.Table]: {
-		tokenType: N.Table,
-		isStartOfToken: (e) => e.startsWith("|"),
-		isStreamingValid: F
+	[StreamCacheTokenType.Table]: {
+		tokenType: StreamCacheTokenType.Table,
+		isStartOfToken: (markdown) => markdown.startsWith("|"),
+		isStreamingValid: isTableInComplete
 	},
-	[N.InlineCode]: {
-		tokenType: N.InlineCode,
-		isStartOfToken: (e) => e.startsWith("`"),
-		isStreamingValid: (e) => P["inline-code"].some((t) => t.test(e))
-	}
-}, L = (e, t) => {
-	let n = I[t];
-	if (!n) return;
-	let { token: r, pending: i } = e;
-	if (r === N.Text && n.isStartOfToken(i)) {
-		e.token = t;
+	[StreamCacheTokenType.InlineCode]: {
+		tokenType: StreamCacheTokenType.InlineCode,
+		isStartOfToken: (markdown) => markdown.startsWith("`"),
+		isStreamingValid: (markdown) => STREAM_INCOMPLETE_REGEX["inline-code"].some((re) => re.test(markdown))
+	}
+};
+var recognize = (cache, tokenType) => {
+	const recognizer = tokenRecognizerMap[tokenType];
+	if (!recognizer) return;
+	const { token, pending } = cache;
+	if (token === StreamCacheTokenType.Text && recognizer.isStartOfToken(pending)) {
+		cache.token = tokenType;
 		return;
 	}
-	if (r === t && !n.isStreamingValid(i)) {
-		let t = n.getCommitPrefix?.(i);
-		if (t) {
-			e.completeMarkdown += t, e.pending = i.slice(t.length), e.token = N.Text;
+	if (token === tokenType && !recognizer.isStreamingValid(pending)) {
+		const prefix = recognizer.getCommitPrefix?.(pending);
+		if (prefix) {
+			cache.completeMarkdown += prefix;
+			cache.pending = pending.slice(prefix.length);
+			cache.token = StreamCacheTokenType.Text;
 			return;
 		}
-		B(e);
+		commitCache(cache);
 	}
-}, R = Object.values(I).filter((e) => !!e), z = () => ({
+};
+var recognizeHandlers = Object.values(tokenRecognizerMap).filter((recognizer) => Boolean(recognizer));
+var getInitialCache = () => ({
 	pending: "",
-	token: N.Text,
+	token: StreamCacheTokenType.Text,
 	processedLength: 0,
 	completeMarkdown: ""
-}), B = (e) => {
-	e.pending &&= (e.completeMarkdown += e.pending, ""), e.token = N.Text;
-}, te = (e, t = !1) => {
-	let n = e.split("\n"), r = !1, i = "", a = 0;
-	for (let e = 0; e < n.length; e++) {
-		let o = n[e], s = (o.endsWith("\r") ? o.slice(0, -1) : o).match(/^(`{3,}|~{3,})(.*)$/);
-		if (!s) continue;
-		let c = s[1], l = s[2], u = c[0], d = c.length;
-		if (!r) {
-			r = !0, i = u, a = d;
+});
+var commitCache = (cache) => {
+	if (cache.pending) {
+		cache.completeMarkdown += cache.pending;
+		cache.pending = "";
+	}
+	cache.token = StreamCacheTokenType.Text;
+};
+var isInCodeBlock = (text, isFinalChunk = false) => {
+	const lines = text.split("\n");
+	let inFenced = false;
+	let fenceChar = "";
+	let fenceLen = 0;
+	for (let i = 0; i < lines.length; i++) {
+		const rawLine = lines[i];
+		const match = (rawLine.endsWith("\r") ? rawLine.slice(0, -1) : rawLine).match(/^(`{3,}|~{3,})(.*)$/);
+		if (!match) continue;
+		const fence = match[1];
+		const after = match[2];
+		const char = fence[0];
+		const len = fence.length;
+		if (!inFenced) {
+			inFenced = true;
+			fenceChar = char;
+			fenceLen = len;
 			continue;
 		}
-		u === i && d >= a && /^\s*$/.test(l) && (t || e < n.length - 1) && (r = !1, i = "", a = 0);
+		if (char === fenceChar && len >= fenceLen && /^\s*$/.test(after) && (isFinalChunk || i < lines.length - 1)) {
+			inFenced = false;
+			fenceChar = "";
+			fenceLen = 0;
+		}
 	}
-	return r;
-}, ne = (e) => {
-	let t = "";
-	for (let n = 0; n < e.length; n++) {
-		let r = e.charCodeAt(n);
-		r >= 55296 && r <= 56319 ? n + 1 < e.length && e.charCodeAt(n + 1) >= 56320 && e.charCodeAt(n + 1) <= 57343 && (t += e[n] + e[n + 1], n++) : (r < 56320 || r > 57343) && (t += e[n]);
+	return inFenced;
+};
+var sanitizeForURIComponent = (input) => {
+	let result = "";
+	for (let i = 0; i < input.length; i++) {
+		const charCode = input.charCodeAt(i);
+		if (charCode >= 55296 && charCode <= 56319) {
+			if (i + 1 < input.length && input.charCodeAt(i + 1) >= 56320 && input.charCodeAt(i + 1) <= 57343) {
+				result += input[i] + input[i + 1];
+				i++;
+			}
+		} else if (charCode < 56320 || charCode > 57343) result += input[i];
 	}
-	return t;
-}, V = (e) => {
+	return result;
+};
+var safeEncodeURIComponent = (str) => {
 	try {
-		return encodeURIComponent(e);
-	} catch (t) {
-		return t instanceof URIError ? encodeURIComponent(ne(e)) : "";
+		return encodeURIComponent(str);
+	} catch (error) {
+		if (error instanceof URIError) return encodeURIComponent(sanitizeForURIComponent(str));
+		return "";
 	}
 };
-function H(e, t, n) {
-	let r = h(z()), i = h("");
-	function a(e, t) {
-		let { token: r, pending: i } = e;
-		if (r === N.Text || r === N.Image && i === "!") return;
-		if (r === N.Table && i.split("\n").length > 2) return i;
-		let a = t?.incompleteMarkdownComponentMap?.[r] ?? `incomplete-${r}`;
-		if (n?.value?.[a]) return `<${a} data-raw="${V(i)}" />`;
-	}
-	function o(e, t) {
-		if (!e) {
-			i.value = "", r.value = z();
+function useStreaming(content, streaming, components) {
+	const streamCache = ref(getInitialCache());
+	const processedContent = ref("");
+	function handleIncompleteMarkdown(cache, opts) {
+		const { token, pending } = cache;
+		if (token === StreamCacheTokenType.Text) return void 0;
+		if (token === StreamCacheTokenType.Image && pending === "!") return;
+		if (token === StreamCacheTokenType.Table && pending.split("\n").length > 2) return pending;
+		const componentName = opts?.incompleteMarkdownComponentMap?.[token] ?? `incomplete-${token}`;
+		if (!components?.value?.[componentName]) return;
+		return `<${componentName} data-raw="${safeEncodeURIComponent(pending)}" />`;
+	}
+	function processStreaming(text, opts) {
+		if (!text) {
+			processedContent.value = "";
+			streamCache.value = getInitialCache();
 			return;
 		}
-		let n = r.value.completeMarkdown + r.value.pending;
-		e.startsWith(n) || (r.value = z());
-		let o = r.value, s = e.slice(o.processedLength);
-		if (!s) {
-			let e = a(o, t);
-			i.value = o.completeMarkdown + (e || "");
+		const expectedPrefix = streamCache.value.completeMarkdown + streamCache.value.pending;
+		if (!text.startsWith(expectedPrefix)) streamCache.value = getInitialCache();
+		const cache = streamCache.value;
+		const chunk = text.slice(cache.processedLength);
+		if (!chunk) {
+			const incompletePlaceholder = handleIncompleteMarkdown(cache, opts);
+			processedContent.value = cache.completeMarkdown + (incompletePlaceholder || "");
 			return;
 		}
-		o.processedLength += s.length;
-		for (let e of s) {
-			if (o.pending += e, te(o.completeMarkdown + o.pending)) {
-				B(o);
+		cache.processedLength += chunk.length;
+		for (const char of chunk) {
+			cache.pending += char;
+			if (isInCodeBlock(cache.completeMarkdown + cache.pending)) {
+				commitCache(cache);
 				continue;
 			}
-			if (o.token === N.Text) for (let e of R) L(o, e.tokenType);
+			if (cache.token === StreamCacheTokenType.Text) for (const handler of recognizeHandlers) recognize(cache, handler.tokenType);
 			else {
-				let e = R.find((e) => e.tokenType === o.token);
-				if (e && L(o, e.tokenType), o.token === N.Text) for (let e of R) L(o, e.tokenType);
+				const currentHandler = recognizeHandlers.find((handler) => handler.tokenType === cache.token);
+				if (currentHandler) recognize(cache, currentHandler.tokenType);
+				if (cache.token === StreamCacheTokenType.Text) for (const handler of recognizeHandlers) recognize(cache, handler.tokenType);
 			}
-			o.token === N.Text && B(o);
+			if (cache.token === StreamCacheTokenType.Text) commitCache(cache);
 		}
-		let c = a(o, t);
-		i.value = o.completeMarkdown + (c || "");
+		const incompletePlaceholder = handleIncompleteMarkdown(cache, opts);
+		processedContent.value = cache.completeMarkdown + (incompletePlaceholder || "");
 	}
-	function s() {
-		r.value = z(), i.value = "";
+	function reset() {
+		streamCache.value = getInitialCache();
+		processedContent.value = "";
 	}
-	return b([e, () => t.value?.hasNextChunk], ([e, n]) => {
-		let a = t.value;
-		if (!n) {
-			i.value = e, r.value = {
+	watch([content, () => streaming.value?.hasNextChunk], ([newContent, hasNextChunk]) => {
+		const opts = streaming.value;
+		if (!Boolean(hasNextChunk)) {
+			processedContent.value = newContent;
+			streamCache.value = {
 				pending: "",
-				token: N.Text,
-				processedLength: e.length,
-				completeMarkdown: e
+				token: StreamCacheTokenType.Text,
+				processedLength: newContent.length,
+				completeMarkdown: newContent
 			};
 			return;
 		}
-		o(e, a);
-	}, { immediate: !0 }), {
-		processedContent: i,
-		reset: s
+		processStreaming(newContent, opts);
+	}, { immediate: true });
+	return {
+		processedContent,
+		reset
 	};
 }
 //#endregion
 //#region src/XMarkdown/composables/useTail.ts
-var U = "▋";
-function W(e) {
-	let n = t(() => {
-		let t = e.value?.tail;
-		return t ? typeof t == "boolean" ? U : t.content || U : null;
+var DEFAULT_TAIL_CONTENT$1 = "▋";
+function useTail(streaming) {
+	const tailContent = computed(() => {
+		const tail = streaming.value?.tail;
+		if (!tail) return null;
+		if (typeof tail === "boolean") return DEFAULT_TAIL_CONTENT$1;
+		return tail.content || DEFAULT_TAIL_CONTENT$1;
 	});
 	return {
-		tailContent: n,
-		tailComponent: t(() => {
-			let t = e.value?.tail;
-			return !t || typeof t == "boolean" ? null : t.component || null;
+		tailContent,
+		tailComponent: computed(() => {
+			const tail = streaming.value?.tail;
+			if (!tail) return null;
+			if (typeof tail === "boolean") return null;
+			return tail.component || null;
 		}),
-		showTail: t(() => e.value?.hasNextChunk && n.value !== null)
+		showTail: computed(() => {
+			return streaming.value?.hasNextChunk && tailContent.value !== null;
+		})
 	};
 }
 //#endregion
 //#region src/XMarkdown/core/Parser.ts
-var re = {
+var escapeReplacements = {
 	"&": "&amp;",
 	"<": "&lt;",
 	">": "&gt;",
 	"\"": "&quot;",
 	"'": "&#39;"
 };
-function G(e) {
-	return /[&<>"']/.test(e) ? e.replace(/[&<>"']/g, (e) => re[e] || e) : e;
+function escapeHtml(html) {
+	if (/[&<>"']/.test(html)) return html.replace(/[&<>"']/g, (ch) => escapeReplacements[ch] || ch);
+	return html;
 }
-var K = class {
+var Parser = class Parser {
+	static COMPLETE_FENCED_CODE = /^ {0,3}(`{3,}|~{3,})([\s\S]*?)\n {0,3}\1[ \n\t]*$/;
 	options;
 	markdownInstance;
-	injectTail = !1;
-	constructor(e = {}) {
+	injectTail = false;
+	codeBlockStates = [];
+	codeBlockStateIndex = 0;
+	constructor(options = {}) {
 		this.options = {
-			openLinksInNewTab: e.openLinksInNewTab ?? !0,
-			paragraphTag: e.paragraphTag ?? "p",
-			injectTail: e.injectTail ?? !1,
-			protectCustomTags: e.protectCustomTags ?? !0,
-			escapeRawHtml: e.escapeRawHtml ?? !1,
+			openLinksInNewTab: options.openLinksInNewTab ?? true,
+			paragraphTag: options.paragraphTag ?? "p",
+			injectTail: options.injectTail ?? false,
+			protectCustomTags: options.protectCustomTags ?? true,
+			escapeRawHtml: options.escapeRawHtml ?? false,
 			config: {
-				gfm: !0,
-				...e.config
+				gfm: true,
+				...options.config
 			},
-			components: e.components ?? {},
-			streamStatus: e.streamStatus ?? "done",
-			codeBlockStatus: e.codeBlockStatus ?? {}
-		}, this.markdownInstance = new S(this.options.config), this.configureRenderers();
+			components: options.components ?? {},
+			streamStatus: options.streamStatus ?? "done",
+			codeBlockStatus: options.codeBlockStatus ?? {}
+		};
+		this.markdownInstance = new Marked(this.options.config);
+		this.configureRenderers();
 	}
-	updateMarkedConfig(e) {
+	updateMarkedConfig(config) {
 		this.options.config = {
 			...this.options.config,
-			...e
-		}, this.markdownInstance = new S(this.options.config), this.configureRenderers();
+			...config
+		};
+		this.markdownInstance = new Marked(this.options.config);
+		this.configureRenderers();
 	}
 	configureRenderers() {
 		this.markdownInstance.use({ renderer: {
-			html: (e) => this.options.escapeRawHtml ? G(e) : e,
-			link: (e, t, n) => `<a href="${e}"${t ? ` title="${t}"` : ""}${this.options.openLinksInNewTab ? " target=\"_blank\" rel=\"noopener noreferrer\"" : ""}>${n}</a>`,
-			paragraph: (e) => this.options.paragraphTag === "p" ? `<p>${e}</p>` : `<${this.options.paragraphTag}>${e}</${this.options.paragraphTag}>`,
-			code: (e, t, n) => {
-				let r = t || "";
-				return `<pre><code class="language-${r}"${r ? ` data-lang="${r}"` : ""} data-block="true"${` data-state="${this.getCodeBlockState(r)}"`}>${n ? e : G(e)}</code></pre>`;
+			html: (html) => {
+				if (this.options.escapeRawHtml) return escapeHtml(html);
+				return html;
+			},
+			link: (href, title, text) => {
+				return `<a href="${href}"${title ? ` title="${title}"` : ""}${this.options.openLinksInNewTab ? ` target="_blank" rel="noopener noreferrer"` : ""}>${text}</a>`;
+			},
+			paragraph: (text) => {
+				if (this.options.paragraphTag === "p") return `<p>${text}</p>`;
+				return `<${this.options.paragraphTag}>${text}</${this.options.paragraphTag}>`;
+			},
+			code: (code, infostring, escaped) => {
+				const lang = infostring || "";
+				return `<pre><code class="language-${lang}"${lang ? ` data-lang="${lang}"` : ""} data-block="true"${` data-state="${this.consumeCodeBlockState(lang)}"`}>${escaped ? code : escapeHtml(code)}</code></pre>`;
 			}
 		} });
 	}
-	getCodeBlockState(e) {
-		return this.options.codeBlockStatus[e] ?? this.options.streamStatus;
+	prepareCodeBlockStates(markdown) {
+		this.codeBlockStates = [];
+		this.codeBlockStateIndex = 0;
+		const tokens = this.markdownInstance.lexer(markdown);
+		const walkTokens = (nodes) => {
+			for (const node of nodes) {
+				if (!node || typeof node !== "object") continue;
+				const token = node;
+				if (token.type === "code") {
+					const lang = typeof token.lang === "string" ? token.lang : "";
+					const codeBlockStyle = typeof token.codeBlockStyle === "string" ? token.codeBlockStyle : "";
+					const raw = typeof token.raw === "string" ? token.raw : "";
+					const inferredState = codeBlockStyle === "indented" || Parser.COMPLETE_FENCED_CODE.test(raw) ? "done" : "loading";
+					this.codeBlockStates.push(this.options.codeBlockStatus[lang] ?? inferredState);
+				}
+				const childTokens = token.tokens;
+				if (Array.isArray(childTokens)) walkTokens(childTokens);
+				const items = token.items;
+				if (Array.isArray(items)) for (const item of items) {
+					if (!item || typeof item !== "object") continue;
+					const itemTokens = item.tokens;
+					if (Array.isArray(itemTokens)) walkTokens(itemTokens);
+				}
+			}
+		};
+		walkTokens(tokens);
 	}
-	parse(e, t) {
-		this.injectTail = t?.injectTail ?? !1;
-		let n = e;
-		this.options.protectCustomTags && (n = this.protectCustomTags(n)), this.options.escapeRawHtml && (n = this.escapeRawHtml(n));
-		let r = this.markedParse(n), i = this.sanitize(r);
-		return this.injectTail ? this.injectTailMarker(i) : i;
+	consumeCodeBlockState(lang) {
+		const nextState = this.codeBlockStates[this.codeBlockStateIndex];
+		this.codeBlockStateIndex += 1;
+		return nextState ?? this.getCodeBlockState(lang);
 	}
-	markedParse(e) {
-		return this.markdownInstance.parse(e);
+	getCodeBlockState(lang) {
+		return this.options.codeBlockStatus[lang] ?? this.options.streamStatus;
 	}
-	sanitize(e) {
-		let t = Object.keys(this.options.components);
-		return x.sanitize(e, {
-			ADD_ATTR: [
-				"target",
-				"data-lang",
-				"data-block",
-				"data-state",
-				"data-raw",
-				"data-icon",
-				"data-description",
-				"icon",
-				"description",
-				"rel"
-			],
-			ADD_TAGS: ["xmd-tail", ...t]
+	parse(markdown, parseOptions) {
+		this.injectTail = parseOptions?.injectTail ?? false;
+		let processed = markdown;
+		if (this.options.protectCustomTags) processed = this.protectCustomTags(processed);
+		if (this.options.escapeRawHtml) processed = this.escapeRawHtml(processed);
+		this.prepareCodeBlockStates(processed);
+		const html = this.markedParse(processed);
+		if (this.injectTail) return this.injectTailMarker(html);
+		return html;
+	}
+	markedParse(markdown) {
+		return this.markdownInstance.parse(markdown);
+	}
+	protectCustomTags(markdown) {
+		const customTagPattern = /<[A-Z][a-zA-Z0-9]*[^>]*>[\s\S]*?<\/[A-Z][a-zA-Z0-9]*>/g;
+		let result = markdown;
+		let placeholderIndex = 0;
+		result = result.replace(customTagPattern, () => {
+			const placeholder = `__CUSTOM_TAG_${placeholderIndex}__`;
+			placeholderIndex++;
+			return placeholder;
+		});
+		return result;
+	}
+	escapeRawHtml(markdown) {
+		return markdown.replace(/<[^>]+>/g, (match) => {
+			return escapeHtml(match);
 		});
 	}
-	protectCustomTags(e) {
-		let t = /<[A-Z][a-zA-Z0-9]*[^>]*>[\s\S]*?<\/[A-Z][a-zA-Z0-9]*>/g, n = e, r = 0;
-		return n = n.replace(t, () => {
-			let e = `__CUSTOM_TAG_${r}__`;
-			return r++, e;
-		}), n;
-	}
-	escapeRawHtml(e) {
-		return e.replace(/<[^>]+>/g, (e) => G(e));
-	}
-	injectTailMarker(e) {
-		if (e.includes("<xmd-tail></xmd-tail>")) return e;
-		let t = document.createElement("div");
-		t.innerHTML = e;
-		let n = (e) => {
-			let t = Array.from(e.childNodes);
-			for (let e = t.length - 1; e >= 0; e--) {
-				let r = t[e];
-				if (r.nodeType === Node.TEXT_NODE) {
-					if ((r.textContent || "").trim()) return r;
+	injectTailMarker(html) {
+		if (html.includes("<xmd-tail></xmd-tail>")) return html;
+		const container = document.createElement("div");
+		container.innerHTML = html;
+		const findLastMeaningfulNode = (root) => {
+			const children = Array.from(root.childNodes);
+			for (let i = children.length - 1; i >= 0; i--) {
+				const node = children[i];
+				if (node.nodeType === Node.TEXT_NODE) {
+					if ((node.textContent || "").trim()) return node;
 					continue;
 				}
-				if (r.nodeType === Node.ELEMENT_NODE) return n(r) || r;
+				if (node.nodeType !== Node.ELEMENT_NODE) continue;
+				const nested = findLastMeaningfulNode(node);
+				if (nested) return nested;
+				return node;
 			}
 			return null;
-		}, r = n(t);
-		if (!r || r.nodeType !== Node.TEXT_NODE) return e;
-		let i = document.createElement("xmd-tail");
-		return r.parentNode?.insertBefore(i, r.nextSibling), t.innerHTML;
+		};
+		const lastMeaningfulNode = findLastMeaningfulNode(container);
+		if (!lastMeaningfulNode || lastMeaningfulNode.nodeType !== Node.TEXT_NODE) return html;
+		const marker = document.createElement("xmd-tail");
+		lastMeaningfulNode.parentNode?.insertBefore(marker, lastMeaningfulNode.nextSibling);
+		return container.innerHTML;
 	}
-	setOptions(e) {
-		let { config: t, ...n } = e;
-		Object.assign(this.options, n), t && this.updateMarkedConfig(t);
+	setOptions(options) {
+		const { config, ...rest } = options;
+		Object.assign(this.options, rest);
+		if (config) this.updateMarkedConfig(config);
 	}
-}, q = /* @__PURE__ */ c({
+};
+//#endregion
+//#region src/XMarkdown/components/AnimationText.vue
+var AnimationText_default = /* @__PURE__ */ defineComponent({
 	__name: "AnimationText",
 	props: {
 		text: {},
 		fadeDuration: { default: 200 },
 		easing: { default: "ease-in-out" }
 	},
-	setup(n) {
-		let r = n, a = h([]), o = h("");
-		function s(e) {
-			if (e === o.value) return;
-			if (!(o.value && e.startsWith(o.value))) {
-				a.value = [e], o.value = e;
+	setup(__props) {
+		const props = __props;
+		const chunks = ref([]);
+		const previousText = ref("");
+		function updateChunks(nextText) {
+			if (nextText === previousText.value) return;
+			if (!Boolean(previousText.value && nextText.startsWith(previousText.value))) {
+				chunks.value = [nextText];
+				previousText.value = nextText;
 				return;
 			}
-			let t = e.slice(o.value.length);
-			t && (a.value = [...a.value, t], o.value = e);
+			const delta = nextText.slice(previousText.value.length);
+			if (!delta) return;
+			chunks.value = [...chunks.value, delta];
+			previousText.value = nextText;
 		}
-		b(() => r.text, s, { immediate: !0 });
-		let c = t(() => ({
-			animation: `x-markdown-fade-in ${r.fadeDuration}ms ${r.easing} forwards`,
+		watch(() => props.text, updateChunks, { immediate: true });
+		const animationStyle = computed(() => ({
+			animation: `x-markdown-fade-in ${props.fadeDuration}ms ${props.easing} forwards`,
 			color: "inherit"
 		}));
-		return (t, n) => (m(!0), i(e, null, g(a.value, (e, t) => (m(), i("span", {
-			key: `animation-text-${t}`,
-			style: d(c.value)
-		}, v(e), 5))), 128));
+		return (_ctx, _cache) => {
+			return openBlock(true), createElementBlock(Fragment, null, renderList(chunks.value, (chunk, index) => {
+				return openBlock(), createElementBlock("span", {
+					key: `animation-text-${index}`,
+					style: normalizeStyle(animationStyle.value)
+				}, toDisplayString(chunk), 5);
+			}), 128);
+		};
 	}
-}), J = new Set([
+});
+//#endregion
+//#region src/XMarkdown/core/detectUnclosedComponentTags.ts
+var WHITESPACE_REGEX = /\s/;
+var TAG_NAME_CHAR_REGEX = /[a-zA-Z0-9-]/;
+var VOID_ELEMENTS = new Set([
 	"area",
 	"base",
 	"br",
@@ -433,56 +618,198 @@ var K = class {
 	"source",
 	"track",
 	"wbr"
-]), Y = /\/\s*>$/;
-function X(e, t) {
-	let n = /* @__PURE__ */ new Set(), r = [], i = {};
-	t.forEach((e) => {
-		i[e] = 0;
-	});
-	let a = /<\/?([a-zA-Z][a-zA-Z0-9-]*)[^>]*>/g, o;
-	for (; (o = a.exec(e)) !== null;) {
-		let e = o[0], n = o[1].toLowerCase();
-		if (!t.includes(n) || e.includes("<!--") || e.includes("<![CDATA[")) continue;
-		let a = Y.test(e), s = !e.startsWith("</");
-		if (!(a || !s) && !J.has(n)) if (s) {
-			i[n] = (i[n] || 0) + 1;
-			let e = `${n}-${i[n]}`;
-			r.push({
-				name: n,
-				instanceId: e
-			});
-		} else {
-			let e = r.findLast((e) => e.name === n);
-			if (e) {
-				let t = r.lastIndexOf(e);
-				r.splice(t, 1);
+]);
+var COMMENT_START = "<!--";
+var COMMENT_END = "-->";
+var CDATA_START = "<![CDATA[";
+var CDATA_END = "]]>";
+var getTagInstanceId = (tagName, instance) => `${tagName}-${instance}`;
+var skipComment = (html, pos) => {
+	if (!html.startsWith(COMMENT_START, pos)) return pos;
+	const endPos = html.indexOf(COMMENT_END, pos + 4);
+	return endPos === -1 ? html.length : endPos + 3;
+};
+var skipCDATA = (html, pos) => {
+	if (!html.startsWith(CDATA_START, pos)) return pos;
+	const endPos = html.indexOf(CDATA_END, pos + 9);
+	return endPos === -1 ? html.length : endPos + 3;
+};
+var parseClosingTag = (html, pos) => {
+	if (html[pos + 1] !== "/") return null;
+	let scanPos = pos + 2;
+	let tagName = "";
+	while (scanPos < html.length && WHITESPACE_REGEX.test(html[scanPos])) scanPos++;
+	while (scanPos < html.length && TAG_NAME_CHAR_REGEX.test(html[scanPos])) {
+		tagName += html[scanPos];
+		scanPos++;
+	}
+	while (scanPos < html.length && WHITESPACE_REGEX.test(html[scanPos])) scanPos++;
+	if (!tagName || html[scanPos] !== ">") return null;
+	return {
+		tagName: tagName.toLowerCase(),
+		endPos: scanPos + 1
+	};
+};
+var parseOpeningTag = (html, pos) => {
+	let scanPos = pos + 1;
+	let tagName = "";
+	while (scanPos < html.length && TAG_NAME_CHAR_REGEX.test(html[scanPos])) {
+		tagName += html[scanPos];
+		scanPos++;
+	}
+	if (!tagName) return null;
+	let foundEnd = false;
+	let isSelfClosing = false;
+	while (scanPos < html.length) {
+		if (html[scanPos] === ">") {
+			foundEnd = true;
+			isSelfClosing = html[scanPos - 1] === "/";
+			break;
+		}
+		if (html[scanPos] === "\"" || html[scanPos] === "'") {
+			const quoteChar = html[scanPos];
+			scanPos++;
+			while (scanPos < html.length) {
+				if (html[scanPos] === "\\" && scanPos + 1 < html.length) {
+					scanPos += 2;
+					continue;
+				}
+				if (html[scanPos] === quoteChar) {
+					scanPos++;
+					break;
+				}
+				scanPos++;
 			}
+			continue;
+		}
+		scanPos++;
+	}
+	return {
+		tagName: tagName.toLowerCase(),
+		endPos: foundEnd ? scanPos + 1 : html.length,
+		foundEnd,
+		isSelfClosing
+	};
+};
+function detectUnclosedComponentTags(html, componentNames) {
+	const trackedTags = new Set(Array.from(componentNames, (tagName) => tagName.toLowerCase()));
+	if (trackedTags.size === 0 || html.length === 0) return /* @__PURE__ */ new Set();
+	const unclosedTags = /* @__PURE__ */ new Set();
+	const tagCounts = {};
+	const openTagIndexes = {};
+	let pos = 0;
+	while (pos < html.length) {
+		const afterComment = skipComment(html, pos);
+		if (afterComment !== pos) {
+			pos = afterComment;
+			continue;
+		}
+		const afterCDATA = skipCDATA(html, pos);
+		if (afterCDATA !== pos) {
+			pos = afterCDATA;
+			continue;
+		}
+		if (html[pos] !== "<") {
+			pos++;
+			continue;
+		}
+		const closingTag = parseClosingTag(html, pos);
+		if (closingTag) {
+			const pendingIndexes = openTagIndexes[closingTag.tagName];
+			if (trackedTags.has(closingTag.tagName) && pendingIndexes?.length) pendingIndexes.pop();
+			pos = closingTag.endPos;
+			continue;
+		}
+		const openingTag = parseOpeningTag(html, pos);
+		if (!openingTag || !trackedTags.has(openingTag.tagName)) {
+			pos++;
+			continue;
+		}
+		tagCounts[openingTag.tagName] = (tagCounts[openingTag.tagName] ?? 0) + 1;
+		const instance = tagCounts[openingTag.tagName];
+		if (!openingTag.foundEnd) unclosedTags.add(getTagInstanceId(openingTag.tagName, instance));
+		else if (!openingTag.isSelfClosing && !VOID_ELEMENTS.has(openingTag.tagName)) {
+			openTagIndexes[openingTag.tagName] ??= [];
+			openTagIndexes[openingTag.tagName].push(instance);
 		}
+		pos = openingTag.endPos;
 	}
-	return r.forEach((e) => {
-		n.add(e.instanceId);
-	}), n;
+	for (const [tagName, pendingIndexes] of Object.entries(openTagIndexes)) pendingIndexes.forEach((instance) => {
+		unclosedTags.add(getTagInstanceId(tagName, instance));
+	});
+	return unclosedTags;
 }
 //#endregion
 //#region src/XMarkdown/core/VueRenderer.ts
-var ie = 200, ae = /[^\r\n\s]+/, oe = /* @__PURE__ */ "math.maction.maligngroup.malignmark.menclose.merror.mfenced.mfrac.mglyph.mi.mlabeledtr.mlongdiv.mmultiscripts.mn.mo.mover.mpadded.mphantom.mprescripts.mroot.mrow.ms.mscarries.mscarry.msgroup.msline.mspace.msqrt.msrow.mstack.mstyle.msub.msup.msubsup.mtable.mtd.mtext.mtr.munder.munderover.semantics.annotation.annotation-xml".split("."), Z = class {
+var DEFAULT_ANIMATION_DURATION = 200;
+var NON_WHITESPACE_REGEX = /[^\r\n\s]+/;
+var MATHML_TAGS = [
+	"math",
+	"maction",
+	"maligngroup",
+	"malignmark",
+	"menclose",
+	"merror",
+	"mfenced",
+	"mfrac",
+	"mglyph",
+	"mi",
+	"mlabeledtr",
+	"mlongdiv",
+	"mmultiscripts",
+	"mn",
+	"mo",
+	"mover",
+	"mpadded",
+	"mphantom",
+	"mprescripts",
+	"mroot",
+	"mrow",
+	"ms",
+	"mscarries",
+	"mscarry",
+	"msgroup",
+	"msline",
+	"mspace",
+	"msqrt",
+	"msrow",
+	"mstack",
+	"mstyle",
+	"msub",
+	"msup",
+	"msubsup",
+	"mtable",
+	"mtd",
+	"mtext",
+	"mtr",
+	"munder",
+	"munderover",
+	"semantics",
+	"annotation",
+	"annotation-xml"
+];
+var VueRenderer = class {
 	options;
-	constructor(e = {}) {
+	constructor(options = {}) {
 		this.options = {
-			components: e.components ?? {},
-			enableAnimation: e.enableAnimation ?? !0,
+			components: options.components ?? {},
+			enableAnimation: options.enableAnimation ?? true,
 			animationConfig: {
-				fadeDuration: e.animationConfig?.fadeDuration ?? ie,
-				easing: e.animationConfig?.easing ?? "ease-in-out"
+				fadeDuration: options.animationConfig?.fadeDuration ?? DEFAULT_ANIMATION_DURATION,
+				easing: options.animationConfig?.easing ?? "ease-in-out"
 			}
 		};
 	}
-	render(t) {
-		let n = this.sanitize(t), r = X(n, Object.keys(this.options.components)), i = this.parseToVNodes(n, r);
-		return i.length === 0 ? l("span", "") : i.length === 1 ? i[0] : l(e, i);
+	render(html) {
+		const unclosedTags = detectUnclosedComponentTags(html, Object.keys(this.options.components));
+		const sanitized = this.sanitize(html);
+		const nodes = this.parseToVNodes(sanitized, unclosedTags);
+		if (nodes.length === 0) return h("span", "");
+		if (nodes.length === 1) return nodes[0];
+		return h(Fragment, nodes);
 	}
-	sanitize(e) {
-		let t = [...new Set([
+	sanitize(html) {
+		const allowedTags = [...new Set([
 			...Object.keys(this.options.components),
 			"p",
 			"br",
@@ -514,10 +841,10 @@ var ie = 200, ae = /[^\r\n\s]+/, oe = /* @__PURE__ */ "math.maction.maligngroup.
 			"td",
 			"hr",
 			"xmd-tail",
-			...oe
+			...MATHML_TAGS
 		])];
-		return x.sanitize(e, {
-			ALLOWED_TAGS: t,
+		return DOMPurify.sanitize(html, {
+			ALLOWED_TAGS: allowedTags,
 			ALLOWED_ATTR: [
 				"class",
 				"style",
@@ -543,198 +870,269 @@ var ie = 200, ae = /[^\r\n\s]+/, oe = /* @__PURE__ */ "math.maction.maligngroup.
 			]
 		});
 	}
-	parseToVNodes(e, t) {
-		let n = `<div>${e}</div>`, r = document.createElement("div");
-		r.innerHTML = n;
-		let i = [];
-		return Array.from(r.childNodes).forEach((e) => {
-			let n = this.convertNode(e, t);
-			n && i.push(n);
-		}), i;
-	}
-	convertNode(e, t) {
-		if (e.nodeType === Node.TEXT_NODE) {
-			let t = e.textContent || "", n = e.parentNode instanceof Element ? e.parentNode.tagName.toLowerCase() : "", r = !!(n && this.options.components[n]);
-			return this.options.enableAnimation && ae.test(t) && !r ? this.wrapWithAnimation(t) : o(t);
+	parseToVNodes(html, unclosedTags) {
+		const template = `<div>${html}</div>`;
+		const container = document.createElement("div");
+		container.innerHTML = template;
+		const cidRef = { tagIndexes: {} };
+		const nodes = [];
+		Array.from(container.childNodes).forEach((node) => {
+			const vnode = this.convertNode(node, unclosedTags, cidRef);
+			if (vnode) nodes.push(vnode);
+		});
+		return nodes;
+	}
+	convertNode(domNode, unclosedTags, cidRef) {
+		if (domNode.nodeType === Node.TEXT_NODE) {
+			const text = domNode.textContent || "";
+			const parentTagName = domNode.parentNode instanceof Element ? domNode.parentNode.tagName.toLowerCase() : "";
+			const isParentCustomComponent = Boolean(parentTagName && this.options.components[parentTagName]);
+			if (this.options.enableAnimation && NON_WHITESPACE_REGEX.test(text) && !isParentCustomComponent) return this.wrapWithAnimation(text);
+			return createTextVNode(text);
 		}
-		if (e.nodeType !== Node.ELEMENT_NODE) return null;
-		let n = e, r = n.tagName.toLowerCase(), i = this.options.components[r];
-		if (i) {
-			let e = this.extractComponentProps(n, r, t), a = [];
-			return Array.from(n.childNodes).forEach((e) => {
-				let n = this.convertNode(e, t);
-				n && a.push(n);
-			}), a.length === 0 ? l(i, e) : l(i, e, { default: () => a });
+		if (domNode.nodeType !== Node.ELEMENT_NODE) return null;
+		const element = domNode;
+		const tagName = element.tagName.toLowerCase();
+		const customComponent = this.options.components[tagName];
+		if (customComponent) {
+			const componentProps = this.extractComponentProps(element, tagName, unclosedTags, cidRef);
+			const children = [];
+			Array.from(element.childNodes).forEach((child) => {
+				const childVNode = this.convertNode(child, unclosedTags, cidRef);
+				if (childVNode) children.push(childVNode);
+			});
+			if (children.length === 0) return h(customComponent, componentProps);
+			return h(customComponent, componentProps, { default: () => children });
 		}
-		return r === "xmd-tail" ? l("span", { class: "xmd-tail" }, "▋") : this.convertNativeElement(n, r, t);
-	}
-	convertNativeElement(e, t, n) {
-		let r = [], i = {};
-		return Array.from(e.attributes).forEach((e) => {
-			i[e.name] = e.value;
-		}), Array.from(e.childNodes).forEach((e) => {
-			let t = this.convertNode(e, n);
-			t && r.push(t);
-		}), l(t, i, r);
-	}
-	extractComponentProps(e, t, n) {
-		let r = {};
-		return r.streamStatus = Array.from(n).find((e) => e.startsWith(t)) ? "loading" : "done", Array.from(e.attributes).forEach((e) => {
-			r[e.name] = e.value;
-		}), r;
-	}
-	wrapWithAnimation(e) {
-		return l(q, {
-			text: e,
+		if (tagName === "xmd-tail") return h("span", { class: "xmd-tail" }, "▋");
+		return this.convertNativeElement(element, tagName, unclosedTags, cidRef);
+	}
+	convertNativeElement(element, tagName, unclosedTags, cidRef) {
+		const children = [];
+		const props = {};
+		Array.from(element.attributes).forEach((attr) => {
+			props[attr.name] = attr.value;
+		});
+		Array.from(element.childNodes).forEach((child) => {
+			const childVNode = this.convertNode(child, unclosedTags, cidRef);
+			if (childVNode) children.push(childVNode);
+		});
+		return h(tagName, props, children);
+	}
+	extractComponentProps(element, tagName, unclosedTags, cidRef) {
+		const props = {};
+		cidRef.tagIndexes[tagName] = (cidRef.tagIndexes[tagName] ?? 0) + 1;
+		const instanceId = getTagInstanceId(tagName, cidRef.tagIndexes[tagName]);
+		props.streamStatus = unclosedTags.has(instanceId) ? "loading" : "done";
+		Array.from(element.attributes).forEach((attr) => {
+			props[attr.name] = attr.value;
+		});
+		if (tagName === "code") {
+			props.block = element.getAttribute("data-block") === "true";
+			props.streamStatus = element.getAttribute("data-state") === "loading" ? "loading" : "done";
+			const langFromData = element.getAttribute("data-lang") || "";
+			const className = element.getAttribute("class") || "";
+			const langFromClass = className.match(/(?:^|\s)language-([^\s]+)/)?.[1] ?? className.match(/(?:^|\s)lang-([^\s]+)/)?.[1] ?? "";
+			const lang = langFromData || langFromClass;
+			if (lang) props.lang = lang;
+		}
+		return props;
+	}
+	wrapWithAnimation(text) {
+		return h(AnimationText_default, {
+			text,
 			fadeDuration: this.options.animationConfig.fadeDuration,
 			easing: this.options.animationConfig.easing
 		});
 	}
-	setOptions(e) {
-		e.components && (this.options.components = {
+	setOptions(options) {
+		if (options.components) this.options.components = {
 			...this.options.components,
-			...e.components
-		}), e.enableAnimation !== void 0 && (this.options.enableAnimation = e.enableAnimation), e.animationConfig && (this.options.animationConfig = {
+			...options.components
+		};
+		if (options.enableAnimation !== void 0) this.options.enableAnimation = options.enableAnimation;
+		if (options.animationConfig) this.options.animationConfig = {
 			...this.options.animationConfig,
-			...e.animationConfig
-		});
+			...options.animationConfig
+		};
 	}
-}, se = /* @__PURE__ */ c({
+};
+//#endregion
+//#region src/XMarkdown/index.vue
+var XMarkdown_default = /* @__PURE__ */ defineComponent({
 	__name: "index",
 	props: {
 		content: { default: "" },
 		components: { default: () => ({}) },
 		streaming: { default: void 0 },
-		config: { default: () => ({ gfm: !0 }) },
+		config: { default: () => ({ gfm: true }) },
 		debug: {
 			type: Boolean,
-			default: !1
+			default: false
 		},
 		protectCustomTagNewlines: {
 			type: Boolean,
-			default: !0
+			default: true
 		},
 		escapeRawHtml: {
 			type: Boolean,
-			default: !1
+			default: false
 		},
 		className: {},
 		style: {},
 		openLinksInNewTab: {
 			type: Boolean,
-			default: !0
+			default: true
 		},
 		paragraphTag: { default: "p" }
 	},
-	setup(e) {
-		let a = e, o = t(() => a.content || ""), f = t(() => a.streaming), { processedContent: p } = H(o, f, t(() => a.components)), { tailContent: g, tailComponent: v, showTail: x } = W(f), S = t(() => {
-			let e = { ...a.components };
-			if (!x.value || !g.value) return e;
-			let t = v.value || M, n = g.value, r = c({
+	setup(__props) {
+		const props = __props;
+		const contentRef = computed(() => props.content || "");
+		const streamingRef = computed(() => props.streaming);
+		const { processedContent } = useStreaming(contentRef, streamingRef, computed(() => props.components));
+		const { tailContent, tailComponent, showTail } = useTail(streamingRef);
+		const mergedComponents = computed(() => {
+			const baseComponents = { ...props.components };
+			if (!showTail.value || !tailContent.value) return baseComponents;
+			const resolvedTailComponent = tailComponent.value || TailIndicator_default;
+			const content = tailContent.value;
+			const TailBridge = defineComponent({
 				name: "XmdTailBridge",
 				setup() {
-					return () => l(t, { content: n });
+					return () => h(resolvedTailComponent, { content });
 				}
 			});
 			return {
-				...e,
-				"xmd-tail": r
+				...baseComponents,
+				"xmd-tail": TailBridge
 			};
-		}), C = c({
+		});
+		const VNodeRenderer = defineComponent({
 			name: "XmdVNodeRenderer",
 			props: { node: {
 				type: Object,
-				required: !0
+				required: true
 			} },
-			setup(e) {
-				return () => e.node;
+			setup(props) {
+				return () => props.node;
 			}
-		}), w = _(new K({
-			openLinksInNewTab: a.openLinksInNewTab,
-			paragraphTag: a.paragraphTag,
-			protectCustomTags: a.protectCustomTagNewlines,
-			escapeRawHtml: a.escapeRawHtml,
-			config: a.config,
-			components: a.components
-		})), T = _(new Z({
-			components: S.value,
-			enableAnimation: a.streaming?.enableAnimation ?? !0,
-			animationConfig: a.streaming?.animationConfig
-		})), E = h(0), D = () => {
-			E.value += 1;
-		}, O = t(() => (E.value, w.value.parse(p.value, { injectTail: x.value }))), k = t(() => (E.value, T.value.render(O.value)));
-		return b(() => [
-			a.openLinksInNewTab,
-			a.paragraphTag,
-			a.protectCustomTagNewlines,
-			a.escapeRawHtml
+		});
+		const parser = shallowRef(new Parser({
+			openLinksInNewTab: props.openLinksInNewTab,
+			paragraphTag: props.paragraphTag,
+			protectCustomTags: props.protectCustomTagNewlines,
+			escapeRawHtml: props.escapeRawHtml,
+			config: props.config,
+			components: props.components
+		}));
+		const renderer = shallowRef(new VueRenderer({
+			components: mergedComponents.value,
+			enableAnimation: props.streaming?.enableAnimation ?? true,
+			animationConfig: props.streaming?.animationConfig
+		}));
+		const optionsVersion = ref(0);
+		const bumpOptionsVersion = () => {
+			optionsVersion.value += 1;
+		};
+		const htmlOutput = computed(() => {
+			optionsVersion.value;
+			return parser.value.parse(processedContent.value, { injectTail: showTail.value });
+		});
+		const vNode = computed(() => {
+			optionsVersion.value;
+			return renderer.value.render(htmlOutput.value);
+		});
+		watch(() => [
+			props.openLinksInNewTab,
+			props.paragraphTag,
+			props.protectCustomTagNewlines,
+			props.escapeRawHtml
 		], () => {
-			w.value.setOptions({
-				openLinksInNewTab: a.openLinksInNewTab,
-				paragraphTag: a.paragraphTag,
-				protectCustomTags: a.protectCustomTagNewlines,
-				escapeRawHtml: a.escapeRawHtml
-			}), D();
-		}), b(() => a.config, (e) => {
-			w.value.setOptions({ config: e }), D();
-		}, { deep: !0 }), b(() => a.components, (e) => {
-			w.value.setOptions({ components: e }), D();
-		}, { deep: !0 }), b(S, (e) => {
-			T.value.setOptions({ components: e }), D();
-		}, { deep: !0 }), b(() => a.streaming, (e) => {
-			T.value.setOptions({
-				enableAnimation: e?.enableAnimation ?? !0,
-				animationConfig: e?.animationConfig
-			}), D();
-		}, { deep: !0 }), (t, a) => (m(), i("div", {
-			class: u(["x-markdown", e.className]),
-			style: d(e.style)
-		}, [s(y(C), { node: k.value }, null, 8, ["node"]), e.debug ? (m(), n(j, { key: 0 })) : r("", !0)], 6));
+			parser.value.setOptions({
+				openLinksInNewTab: props.openLinksInNewTab,
+				paragraphTag: props.paragraphTag,
+				protectCustomTags: props.protectCustomTagNewlines,
+				escapeRawHtml: props.escapeRawHtml
+			});
+			bumpOptionsVersion();
+		});
+		watch(() => props.config, (newConfig) => {
+			parser.value.setOptions({ config: newConfig });
+			bumpOptionsVersion();
+		}, { deep: true });
+		watch(() => props.components, (newComponents) => {
+			parser.value.setOptions({ components: newComponents });
+			bumpOptionsVersion();
+		}, { deep: true });
+		watch(mergedComponents, (newComponents) => {
+			renderer.value.setOptions({ components: newComponents });
+			bumpOptionsVersion();
+		}, { deep: true });
+		watch(() => props.streaming, (newStreaming) => {
+			renderer.value.setOptions({
+				enableAnimation: newStreaming?.enableAnimation ?? true,
+				animationConfig: newStreaming?.animationConfig
+			});
+			bumpOptionsVersion();
+		}, { deep: true });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(["x-markdown", __props.className]),
+				style: normalizeStyle(__props.style)
+			}, [createVNode(unref(VNodeRenderer), { node: vNode.value }, null, 8, ["node"]), __props.debug ? (openBlock(), createBlock(DebugPanel_default, { key: 0 })) : createCommentVNode("", true)], 6);
+		};
 	}
 });
 //#endregion
 //#region src/XMarkdown/composables/useParser.ts
-function Q(e) {
-	let t = _(null);
-	function n(e) {
-		return new K(e);
+function useParser(initialOptions) {
+	const parser = shallowRef(null);
+	function createParser(options) {
+		return new Parser(options);
 	}
-	function r(r, i) {
-		return t.value ||= n(i || e), i && t.value.setOptions(i), t.value.parse(r);
+	function parse(markdown, options) {
+		if (!parser.value) parser.value = createParser(options || initialOptions);
+		if (options) parser.value.setOptions(options);
+		return parser.value.parse(markdown);
 	}
-	function i(e) {
-		t.value = n(e);
+	function resetParser(options) {
+		parser.value = createParser(options);
 	}
 	return {
-		parser: t,
-		parse: r,
-		resetParser: i
+		parser,
+		parse,
+		resetParser
 	};
 }
 //#endregion
 //#region src/XMarkdown/composables/useRenderer.ts
-function ce(e) {
-	let t = _(null);
-	function n(e) {
-		return new Z(e);
+function useRenderer(initialOptions) {
+	const renderer = shallowRef(null);
+	function createRenderer(options) {
+		return new VueRenderer(options);
 	}
-	function r(r, i) {
-		return t.value ||= n(i || e), i && t.value.setOptions(i), t.value.render(r);
+	function render(html, options) {
+		if (!renderer.value) renderer.value = createRenderer(options || initialOptions);
+		if (options) renderer.value.setOptions(options);
+		return renderer.value.render(html);
 	}
-	function i(e) {
-		t.value = n(e);
+	function resetRenderer(options) {
+		renderer.value = createRenderer(options);
 	}
 	return {
-		renderer: t,
-		render: r,
-		resetRenderer: i
+		renderer,
+		render,
+		resetRenderer
 	};
 }
 //#endregion
 //#region src/XMarkdown/utils/tail.ts
-var $ = "▋";
-function le(e) {
-	return e ? e === !0 ? $ : e.content || $ : null;
+var DEFAULT_TAIL_CONTENT = "▋";
+function resolveTailContent(tail) {
+	if (!tail) return null;
+	if (tail === true) return DEFAULT_TAIL_CONTENT;
+	return tail.content || DEFAULT_TAIL_CONTENT;
 }
 //#endregion
-export { q as AnimationText, j as DebugPanel, K as Parser, M as TailIndicator, Z as VueRenderer, se as XMarkdown, X as detectUnclosedComponentTags, le as resolveTailContent, Q as useParser, ce as useRenderer, H as useStreaming, W as useTail };
+export { AnimationText_default as AnimationText, DebugPanel_default as DebugPanel, Parser, TailIndicator_default as TailIndicator, VueRenderer, XMarkdown_default as XMarkdown, detectUnclosedComponentTags, resolveTailContent, useParser, useRenderer, useStreaming, useTail };