@copilotkit/markdown 2.0.0-rc.20 → 2.0.0-rc.22

package/dist/vue/index.d.mts

@@ -1,6 +1,6 @@
 import * as vue from "vue";
 import { PropType, VNode } from "vue";
-import { StreamingMarkdownAstNode, StreamingMarkdownParserOptions } from "@copilotkit/markdown";
+import { StreamingMarkdownAstNode, StreamingMarkdownCitationRenderData, StreamingMarkdownNodeClassNames, StreamingMarkdownParserOptions } from "@copilotkit/markdown";
 
 //#region src/vue/streaming-markdown-renderer.d.ts
 /**
@@ -14,17 +14,28 @@ type VueStreamingMarkdownNodeRenderer = (node: StreamingMarkdownAstNode, default
  *
  * @public
  */
-type VueStreamingMarkdownNodeRendererKey = "paragraph" | "heading" | "blockquote" | "list" | "listItem" | "codeBlock" | "table" | "tableRow" | "tableCell" | "thematicBreak" | "em" | "strong" | "strikethrough" | "inlineCode" | "hardBreak" | "image" | "link" | "autolink" | "citation";
+type VueStreamingMarkdownNodeRendererKey = "paragraph" | "heading" | "blockquote" | "list" | "listItem" | "codeBlock" | "table" | "tableRow" | "tableCell" | "thematicBreak" | "em" | "strong" | "strikethrough" | "inlineCode" | "hardBreak" | "image" | "link" | "autolink" | "citation" | "math";
 /**
  * Optional map of node-type renderer keys to custom Vue render functions.
  * @public
  */
 type VueStreamingMarkdownNodeRenderers = Partial<Record<VueStreamingMarkdownNodeRendererKey, VueStreamingMarkdownNodeRenderer>>;
+/**
+ * Called when a link or autolink is clicked.
+ * @public
+ */
+type VueStreamingMarkdownLinkClickHandler = (event: MouseEvent, url: string, node: StreamingMarkdownAstNode) => void;
+/**
+ * Called when a citation reference is clicked.
+ * @public
+ */
+type VueStreamingMarkdownCitationClickHandler = (event: MouseEvent, citation: StreamingMarkdownCitationRenderData, node: StreamingMarkdownAstNode) => void;
 /**
  * Vue 3 streaming markdown renderer.
  *
- * Drives the `@copilotkit/markdown` zero-dep parser and walks the
- * resulting AST into VNodes via `h()`.
+ * Parses with `@copilotkit/markdown` and renders the shared render tree with
+ * `h()`, so markup, sanitization, caret placement, and the per-token fade-in
+ * match the React and DOM renderers.
  *
  * @public
  */
@@ -46,8 +57,7 @@ declare const StreamingMarkdownRenderer: vue.DefineComponent<vue.ExtractPropType
     default: undefined;
   };
   /**
-   * When true, renders a trailing cursor span after the last open node.
-   * Animation niceties are left to CSS; this just inserts the element.
+   * When true, renders a caret inside the deepest open node while streaming.
    */
   caret: {
     type: PropType<boolean>;
@@ -57,17 +67,26 @@ declare const StreamingMarkdownRenderer: vue.DefineComponent<vue.ExtractPropType
    * Optional map of node-type keys to custom Vue render functions.
    * Each function receives the AST node and the default VNode and can return
    * a replacement VNode (or the defaultVNode to keep the default).
-   * Supported keys: paragraph, heading, blockquote, list, listItem, codeBlock,
-   * table, tableRow, tableCell, thematicBreak, em, strong, strikethrough,
-   * inlineCode, hardBreak, link, image, autolink, citation.
    */
   nodeRenderers: {
     type: PropType<VueStreamingMarkdownNodeRenderers>;
     default: undefined;
+  }; /** Extra classes for the default element of a node type. */
+  nodeClassNames: {
+    type: PropType<StreamingMarkdownNodeClassNames>;
+    default: undefined;
+  }; /** Called when a link or autolink is clicked. */
+  onLinkClick: {
+    type: PropType<VueStreamingMarkdownLinkClickHandler>;
+    default: undefined;
+  }; /** Called when a citation reference with a URL is clicked. */
+  onCitationClick: {
+    type: PropType<VueStreamingMarkdownCitationClickHandler>;
+    default: undefined;
   };
 }>, () => VNode<vue.RendererNode, vue.RendererElement, {
   [key: string]: any;
-}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+}>[], {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
   /** The full markdown source string, which may grow over time during streaming. */content: {
     type: PropType<string>;
     required: true;
@@ -85,8 +104,7 @@ declare const StreamingMarkdownRenderer: vue.DefineComponent<vue.ExtractPropType
     default: undefined;
   };
   /**
-   * When true, renders a trailing cursor span after the last open node.
-   * Animation niceties are left to CSS; this just inserts the element.
+   * When true, renders a caret inside the deepest open node while streaming.
    */
   caret: {
     type: PropType<boolean>;
@@ -96,13 +114,22 @@ declare const StreamingMarkdownRenderer: vue.DefineComponent<vue.ExtractPropType
    * Optional map of node-type keys to custom Vue render functions.
    * Each function receives the AST node and the default VNode and can return
    * a replacement VNode (or the defaultVNode to keep the default).
-   * Supported keys: paragraph, heading, blockquote, list, listItem, codeBlock,
-   * table, tableRow, tableCell, thematicBreak, em, strong, strikethrough,
-   * inlineCode, hardBreak, link, image, autolink, citation.
    */
   nodeRenderers: {
     type: PropType<VueStreamingMarkdownNodeRenderers>;
     default: undefined;
+  }; /** Extra classes for the default element of a node type. */
+  nodeClassNames: {
+    type: PropType<StreamingMarkdownNodeClassNames>;
+    default: undefined;
+  }; /** Called when a link or autolink is clicked. */
+  onLinkClick: {
+    type: PropType<VueStreamingMarkdownLinkClickHandler>;
+    default: undefined;
+  }; /** Called when a citation reference with a URL is clicked. */
+  onCitationClick: {
+    type: PropType<VueStreamingMarkdownCitationClickHandler>;
+    default: undefined;
   };
 }>> & Readonly<{}>, {
   isComplete: boolean;
@@ -110,7 +137,10 @@ declare const StreamingMarkdownRenderer: vue.DefineComponent<vue.ExtractPropType
   class: string;
   caret: boolean;
   nodeRenderers: Partial<Record<VueStreamingMarkdownNodeRendererKey, VueStreamingMarkdownNodeRenderer>>;
+  nodeClassNames: StreamingMarkdownNodeClassNames;
+  onLinkClick: VueStreamingMarkdownLinkClickHandler;
+  onCitationClick: VueStreamingMarkdownCitationClickHandler;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 //#endregion
-export { StreamingMarkdownRenderer, type VueStreamingMarkdownNodeRenderer, type VueStreamingMarkdownNodeRendererKey, type VueStreamingMarkdownNodeRenderers };
+export { StreamingMarkdownRenderer, type VueStreamingMarkdownCitationClickHandler, type VueStreamingMarkdownLinkClickHandler, type VueStreamingMarkdownNodeRenderer, type VueStreamingMarkdownNodeRendererKey, type VueStreamingMarkdownNodeRenderers };
 //# sourceMappingURL=index.d.mts.map

package/dist/vue/index.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","names":[],"sources":["../../src/vue/streaming-markdown-renderer.ts"],"mappings":";;;;;;;;AAwZA;KAAY,gCAAA,IACV,IAAA,EAAM,wBAAA,EACN,YAAA,EAAc,KAAA,qBACX,KAAA;;;;;;;KAQO,mCAAA;;;;;KAyBA,iCAAA,GAAoC,OAAA,CAC9C,MAAA,CAAO,mCAAA,EAAqC,gCAAA;;AA1B9C;;;;;AAyBA;;cAgBa,yBAAA,MAAyB,eAAA,CAyCR,GAAA,CAzCQ,gBAAA;EAf7B;UAqBa,QAAA;;KAtBiC;;UA2BhC,QAAA;;KA1BuD;;UA+BxD,QAAA,CAAS,OAAA,CAAQ,8BAAA;;KAVjB;;UAeA,QAAA;;;EAAA;;;;;UAQC,QAAA;;;;;;;;;;;;UAYD,QAAA,CAAS,iCAAA;;;gBAzCO,GAAA,CAAA,YAAA;;4GAyCR,GAAA,CAAA,gBAAA;;UAnCR,QAAA;;;;UAKC,QAAA;;KAXe;;UAgBhB,QAAA,CAAS,OAAA,CAAQ,8BAAA;;;;UAKjB,QAAA;;;;;;;;UAQC,QAAA;;;;;;;;;;;;UAYD,QAAA,CAAS,iCAAA"}
+{"version":3,"file":"index.d.mts","names":[],"sources":["../../src/vue/streaming-markdown-renderer.ts"],"mappings":";;;;;;;;AA6BA;KAAY,gCAAA,IACV,IAAA,EAAM,wBAAA,EACN,YAAA,EAAc,KAAA,qBACX,KAAA;;;;;;;KAQO,mCAAA;;;;;KA0BA,iCAAA,GAAoC,OAAA,CAC9C,MAAA,CAAO,mCAAA,EAAqC,gCAAA;;AA3B9C;;;KAkCY,oCAAA,IACV,KAAA,EAAO,UAAA,EACP,GAAA,UACA,IAAA,EAAM,wBAAA;;AAXR;;;KAkBY,wCAAA,IACV,KAAA,EAAO,UAAA,EACP,QAAA,EAAU,mCAAA,EACV,IAAA,EAAM,wBAAA;;;;;;;;;;cA8HK,yBAAA,MAAyB,eAAA,CAqDN,GAAA,CArDM,gBAAA;EAlJwC;UAyJxD,QAAA;;KAjJb;;UAsJc,QAAA;;KApJS;;UAyJV,QAAA,CAAS,OAAA,CAAQ,8BAAA;;KAjJ9B;;UAsJa,QAAA;;;EAtJb;;;;UA6Jc,QAAA;;;EA3JS;AA8HhC;;;;;UAsCsB,QAAA,CAAS,iCAAA;;KAhBT;;UAqBA,QAAA,CAAS,+BAAA;;KAAT;;UAKE,QAAA,CAAS,oCAAA;;KAKD;;UAAR,QAAA,CAAS,wCAAA;;;gBArDK,GAAA,CAAA,YAAA;;8GAqDN,GAAA,CAAA,gBAAA;EAzCT;UALD,QAAA;;KAsBC;;UAjBA,QAAA;;KAoCU;;UA/BX,QAAA,CAAS,OAAA,CAAQ,8BAAA;;;;UAKjB,QAAA;;;;;;;UAOC,QAAA;;;EA7Be;;;;;;UAsChB,QAAA,CAAS,iCAAA;;;;UAKT,QAAA,CAAS,+BAAA;;KA1BT;;UA+BE,QAAA,CAAS,oCAAA;;;;UAKT,QAAA,CAAS,wCAAA"}

package/dist/vue/index.mjs

@@ -1,182 +1,78 @@
-import { computed, defineComponent, h } from "vue";
-import { createStreamingMarkdownParserState, finalizeStreamingMarkdown, parseStreamingMarkdownChunk } from "@copilotkit/markdown";
+import { computed, defineComponent, h, isVNode } from "vue";
+import { STREAMING_MARKDOWN_CARET_ATTRS, STREAMING_MARKDOWN_CARET_STYLE, STREAMING_MARKDOWN_ROOT_CLASS, buildStreamingMarkdownRenderTree, getStreamingMarkdownStyles, updateStreamingMarkdownParserSession } from "@copilotkit/markdown";
 
 //#region src/vue/streaming-markdown-renderer.ts
-const SAFE_HREF = /^(https?:|mailto:|tel:|#|\/|\.\/|\.\.\/)/i;
-const SAFE_IMG_SRC = /^(https?:|data:image\/(?!svg)|\/|\.\/|\.\.\/)/i;
-function sanitizeHref(href) {
-	if (!href) return void 0;
-	return SAFE_HREF.test(href.trim()) ? href : void 0;
+const VUE_RENDERER_KEYS = new Set([
+	"paragraph",
+	"heading",
+	"blockquote",
+	"list",
+	"listItem",
+	"codeBlock",
+	"table",
+	"tableRow",
+	"tableCell",
+	"thematicBreak",
+	"em",
+	"strong",
+	"strikethrough",
+	"inlineCode",
+	"hardBreak",
+	"image",
+	"link",
+	"autolink",
+	"citation",
+	"math"
+]);
+function isVueRendererKey(key) {
+	return VUE_RENDERER_KEYS.has(key);
 }
-function sanitizeImgSrc(src) {
-	if (!src) return void 0;
-	return SAFE_IMG_SRC.test(src.trim()) ? src : void 0;
-}
-const DEFAULT_OPTIONS = {
-	segmenter: true,
-	enableTables: true,
-	enableAutolinks: true
-};
-function normalizeOptions(options) {
-	return {
-		segmenter: options?.segmenter ?? DEFAULT_OPTIONS.segmenter,
-		enableTables: options?.enableTables ?? DEFAULT_OPTIONS.enableTables,
-		enableAutolinks: options?.enableAutolinks ?? DEFAULT_OPTIONS.enableAutolinks
+function elementProps(element, context) {
+	const props = {
+		key: element.key,
+		...element.attrs
 	};
+	const action = element.action;
+	if (action?.type === "link") props.onClick = (event) => context.onLinkClick?.(event, action.url, action.node);
+	if (action?.type === "citation") props.onClick = (event) => context.onCitationClick?.(event, action.citation, action.node);
+	return props;
 }
-function buildParserState(content, options, isComplete) {
-	const state = createStreamingMarkdownParserState(options);
-	const parsed = content.length > 0 ? parseStreamingMarkdownChunk(state, content) : state;
-	return isComplete ? finalizeStreamingMarkdown(parsed) : parsed;
-}
-function renderTextSegments(node) {
-	if (node.text.length === 0) return [];
-	if (node.segments.length === 0) return [h("span", { class: "cpk-streaming-markdown-segment" }, node.text)];
-	return node.segments.map((segment) => h("span", {
-		class: "cpk-streaming-markdown-segment",
-		"data-streaming-markdown-segment-kind": segment.kind,
-		"data-streaming-markdown-whitespace": String(segment.isWhitespace)
-	}, segment.noBreakBefore ? `⁠${segment.text}` : segment.text));
-}
-function renderChildren(childIds, nodeById, nodeRenderers) {
-	return childIds.map((id) => {
-		const child = nodeById.get(id);
-		return child ? renderNode(child, nodeById, nodeRenderers) : null;
-	});
-}
-function renderNode(node, nodeById, nodeRenderers) {
-	function withOverride(key, defaultVNode) {
-		const override = nodeRenderers?.[key];
-		return override ? override(node, defaultVNode) : defaultVNode;
-	}
-	switch (node.type) {
-		case "document": return h("span", { style: "display:contents" }, renderChildren(node.children, nodeById, nodeRenderers));
-		case "paragraph": return withOverride("paragraph", h("p", {
-			"data-streaming-markdown-node": "paragraph",
-			"data-node-open": String(!node.closed)
-		}, renderChildren(node.children, nodeById, nodeRenderers)));
-		case "heading": return withOverride("heading", h(`h${node.level}`, {
-			"data-streaming-markdown-node": "heading",
-			"data-node-open": String(!node.closed)
-		}, renderChildren(node.children, nodeById, nodeRenderers)));
-		case "blockquote": return withOverride("blockquote", h("blockquote", {
-			"data-streaming-markdown-node": "blockquote",
-			"data-node-open": String(!node.closed)
-		}, renderChildren(node.children, nodeById, nodeRenderers)));
-		case "list": {
-			const tag = node.ordered ? "ol" : "ul";
-			const attrs = {
-				"data-streaming-markdown-node": "list",
-				"data-node-open": String(!node.closed),
-				"data-list-tight": String(node.tight)
-			};
-			if (node.ordered && node.start != null) attrs.start = node.start;
-			return withOverride("list", h(tag, attrs, renderChildren(node.children, nodeById, nodeRenderers)));
-		}
-		case "list-item": return withOverride("listItem", h("li", {
-			"data-streaming-markdown-node": "list-item",
-			"data-node-open": String(!node.closed)
-		}, renderChildren(node.children, nodeById, nodeRenderers)));
-		case "code-block": return withOverride("codeBlock", h("pre", {
-			"data-streaming-markdown-node": "code-block",
-			"data-node-open": String(!node.closed)
-		}, [h("code", { "data-code-info": node.info ?? void 0 }, node.text)]));
-		case "table": return withOverride("table", h("table", {
-			"data-streaming-markdown-node": "table",
-			"data-node-open": String(!node.closed)
-		}, [h("tbody", renderChildren(node.children, nodeById, nodeRenderers))]));
-		case "table-row": return withOverride("tableRow", h("tr", {
-			"data-streaming-markdown-node": "table-row",
-			"data-node-open": String(!node.closed)
-		}, renderChildren(node.children, nodeById, nodeRenderers)));
-		case "table-cell": {
-			const parent = node.parentId != null ? nodeById.get(node.parentId) : void 0;
-			return withOverride("tableCell", h(parent?.type === "table-row" && parent.isHeader ? "th" : "td", {
-				"data-streaming-markdown-node": "table-cell",
-				"data-node-open": String(!node.closed)
-			}, renderChildren(node.children, nodeById, nodeRenderers)));
-		}
-		case "thematic-break": return withOverride("thematicBreak", h("hr", {
-			"data-streaming-markdown-node": "thematic-break",
-			"data-node-open": String(!node.closed)
-		}));
-		case "text": return h("span", { style: "display:contents" }, renderTextSegments(node));
-		case "em": return withOverride("em", h("em", {
-			"data-streaming-markdown-node": "em",
-			"data-node-open": String(!node.closed)
-		}, renderChildren(node.children, nodeById, nodeRenderers)));
-		case "strong": return withOverride("strong", h("strong", {
-			"data-streaming-markdown-node": "strong",
-			"data-node-open": String(!node.closed)
-		}, renderChildren(node.children, nodeById, nodeRenderers)));
-		case "strikethrough": return withOverride("strikethrough", h("del", {
-			"data-streaming-markdown-node": "strikethrough",
-			"data-node-open": String(!node.closed)
-		}, renderChildren(node.children, nodeById, nodeRenderers)));
-		case "inline-code": return withOverride("inlineCode", h("code", {
-			"data-streaming-markdown-node": "inline-code",
-			"data-node-open": String(!node.closed)
-		}, node.text));
-		case "soft-break": return "\n";
-		case "hard-break": return withOverride("hardBreak", h("br", {
-			"data-streaming-markdown-node": "hard-break",
-			"data-node-open": String(!node.closed)
-		}));
-		case "link": {
-			const safeHref = sanitizeHref(node.url);
-			const attrs = {
-				"data-streaming-markdown-node": "link",
-				"data-node-open": String(!node.closed),
-				target: "_blank",
-				rel: "noopener noreferrer"
-			};
-			if (safeHref != null) attrs.href = safeHref;
-			if (node.title) attrs.title = node.title;
-			return withOverride("link", h("a", attrs, renderChildren(node.children, nodeById, nodeRenderers)));
-		}
-		case "image": {
-			const safeSrc = sanitizeImgSrc(node.url);
-			const attrs = {
-				"data-streaming-markdown-node": "image",
-				"data-node-open": String(!node.closed),
-				alt: node.alt
-			};
-			if (safeSrc != null) attrs.src = safeSrc;
-			if (node.title) attrs.title = node.title;
-			return withOverride("image", h("img", attrs));
-		}
-		case "autolink": {
-			const safeHref = sanitizeHref(node.url);
-			const attrs = {
-				"data-streaming-markdown-node": "autolink",
-				"data-node-open": String(!node.closed),
-				target: "_blank",
-				rel: "noopener noreferrer"
-			};
-			if (safeHref != null) attrs.href = safeHref;
-			return withOverride("autolink", h("a", attrs, node.text));
-		}
-		case "citation": return withOverride("citation", h("sup", {
-			"data-streaming-markdown-node": "citation",
-			"data-node-open": String(!node.closed),
-			class: "cpk-streaming-markdown-citation"
-		}, [h("span", {
-			role: "doc-noteref",
-			class: "cpk-streaming-markdown-citation-label"
-		}, String(node.number ?? node.idRef))]));
-		default: return null;
+function renderChild(child, context, slot) {
+	switch (child.kind) {
+		case "node": return renderRenderNode(child, context);
+		case "element": return h(child.tag, elementProps(child, context), child.children.flatMap((entry) => renderChild(entry, context, slot)));
+		case "text": return child.text;
+		case "caret": return h("span", {
+			key: child.key,
+			...STREAMING_MARKDOWN_CARET_ATTRS,
+			style: STREAMING_MARKDOWN_CARET_STYLE
+		});
+		case "slot": return slot;
+		default: return child;
 	}
 }
+function renderRenderNode(renderNode, context) {
+	const children = (renderNode.children ?? []).flatMap((entry) => renderChild(entry, context, []));
+	const output = renderNode.output.flatMap((entry) => renderChild(entry, context, children));
+	const key = renderNode.rendererKey;
+	const override = isVueRendererKey(key) ? context.nodeRenderers?.[key] : void 0;
+	if (!override) return output;
+	const [first] = output;
+	const defaultVNode = isVNode(first) || typeof first === "string" ? first : null;
+	return [override(renderNode.node, defaultVNode)];
+}
 /**
 * Vue 3 streaming markdown renderer.
 *
-* Drives the `@copilotkit/markdown` zero-dep parser and walks the
-* resulting AST into VNodes via `h()`.
+* Parses with `@copilotkit/markdown` and renders the shared render tree with
+* `h()`, so markup, sanitization, caret placement, and the per-token fade-in
+* match the React and DOM renderers.
 *
 * @public
 */
 const StreamingMarkdownRenderer = defineComponent({
 	name: "StreamingMarkdownRenderer",
+	inheritAttrs: false,
 	props: {
 		content: {
 			type: String,
@@ -201,51 +97,42 @@ const StreamingMarkdownRenderer = defineComponent({
 		nodeRenderers: {
 			type: Object,
 			default: void 0
+		},
+		nodeClassNames: {
+			type: Object,
+			default: void 0
+		},
+		onLinkClick: {
+			type: Function,
+			default: void 0
+		},
+		onCitationClick: {
+			type: Function,
+			default: void 0
 		}
 	},
-	setup(props) {
+	setup(props, { attrs }) {
+		let session = null;
 		const parserState = computed(() => {
-			const opts = normalizeOptions(props.options);
-			return buildParserState(props.content ?? "", opts, props.isComplete);
-		});
-		const nodeById = computed(() => {
-			const map = /* @__PURE__ */ new Map();
-			for (const node of parserState.value.nodes) map.set(node.id, node);
-			return map;
+			session = updateStreamingMarkdownParserSession(session, props.content ?? "", props.options, props.isComplete);
+			return session.parserState;
 		});
 		return () => {
-			const state = parserState.value;
-			const byId = nodeById.value;
-			const rootNode = state.rootId != null ? byId.get(state.rootId) : void 0;
-			const renderers = props.nodeRenderers;
-			const rootClass = props.class ? `cpk-streaming-markdown-root ${props.class}` : "cpk-streaming-markdown-root";
-			if (!rootNode) return h("div", {
-				class: rootClass,
-				"data-streaming-markdown-root": true
+			const tree = buildStreamingMarkdownRenderTree(parserState.value, {
+				caret: props.caret,
+				nodeClassNames: props.nodeClassNames
 			});
-			const children = rootNode.type === "document" ? rootNode.children.map((id) => {
-				const child = byId.get(id);
-				return child ? renderNode(child, byId, renderers) : null;
-			}) : [renderNode(rootNode, byId, renderers)];
-			if (props.caret && !state.isComplete) children.push(h("span", {
-				"aria-hidden": true,
-				class: "cpk-streaming-markdown-caret",
-				"data-streaming-markdown-caret": true,
-				style: {
-					display: "inline-block",
-					width: "0.48em",
-					height: "0.48em",
-					marginInlineStart: "0.08em",
-					verticalAlign: "-0.08em",
-					borderRadius: "999px",
-					backgroundColor: "currentColor",
-					opacity: "0.55"
-				}
-			}));
-			return h("div", {
+			const content = tree.root ? renderRenderNode(tree.root, {
+				nodeRenderers: props.nodeRenderers,
+				onLinkClick: props.onLinkClick,
+				onCitationClick: props.onCitationClick
+			}) : [];
+			const rootClass = props.class ? `${STREAMING_MARKDOWN_ROOT_CLASS} ${props.class}` : STREAMING_MARKDOWN_ROOT_CLASS;
+			return [h("style", getStreamingMarkdownStyles()), h("div", {
+				...attrs,
 				class: rootClass,
 				"data-streaming-markdown-root": true
-			}, children);
+			}, content)];
 		};
 	}
 });

package/dist/vue/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/vue/streaming-markdown-renderer.ts"],"sourcesContent":["import { computed, defineComponent, h } from \"vue\";\nimport type { PropType, VNode } from \"vue\";\nimport {\n  createStreamingMarkdownParserState,\n  finalizeStreamingMarkdown,\n  parseStreamingMarkdownChunk,\n} from \"@copilotkit/markdown\";\nimport type {\n  StreamingMarkdownAstNode,\n  StreamingMarkdownParserOptions,\n  StreamingMarkdownParserState,\n  TextSegment,\n} from \"@copilotkit/markdown\";\n\n// ---------------------------------------------------------------------------\n// URL sanitization (allowlisted href and image src schemes)\n// ---------------------------------------------------------------------------\n\nconst SAFE_HREF = /^(https?:|mailto:|tel:|#|\\/|\\.\\/|\\.\\.\\/)/i;\nconst SAFE_IMG_SRC = /^(https?:|data:image\\/(?!svg)|\\/|\\.\\/|\\.\\.\\/)/i;\n\nfunction sanitizeHref(href: string | undefined): string | undefined {\n  if (!href) return undefined;\n  return SAFE_HREF.test(href.trim()) ? href : undefined;\n}\n\nfunction sanitizeImgSrc(src: string | undefined): string | undefined {\n  if (!src) return undefined;\n  return SAFE_IMG_SRC.test(src.trim()) ? src : undefined;\n}\n\n// ---------------------------------------------------------------------------\n// Parser helpers (full re-parse approach — simple and correct)\n// ---------------------------------------------------------------------------\n\nconst DEFAULT_OPTIONS: StreamingMarkdownParserOptions = {\n  segmenter: true,\n  enableTables: true,\n  enableAutolinks: true,\n};\n\nfunction normalizeOptions(\n  options?: Partial<StreamingMarkdownParserOptions>,\n): StreamingMarkdownParserOptions {\n  return {\n    segmenter: options?.segmenter ?? DEFAULT_OPTIONS.segmenter,\n    enableTables: options?.enableTables ?? DEFAULT_OPTIONS.enableTables,\n    enableAutolinks:\n      options?.enableAutolinks ?? DEFAULT_OPTIONS.enableAutolinks,\n  };\n}\n\nfunction buildParserState(\n  content: string,\n  options: StreamingMarkdownParserOptions,\n  isComplete: boolean,\n): StreamingMarkdownParserState {\n  const state = createStreamingMarkdownParserState(options);\n  const parsed =\n    content.length > 0 ? parseStreamingMarkdownChunk(state, content) : state;\n  return isComplete ? finalizeStreamingMarkdown(parsed) : parsed;\n}\n\n// ---------------------------------------------------------------------------\n// AST → VNode walker\n// ---------------------------------------------------------------------------\n\ntype NodeById = Map<number, StreamingMarkdownAstNode>;\n\ntype TextNode = Extract<StreamingMarkdownAstNode, { type: \"text\" }>;\n\nfunction renderTextSegments(node: TextNode): (VNode | string)[] {\n  if (node.text.length === 0) return [];\n  if (node.segments.length === 0) {\n    return [h(\"span\", { class: \"cpk-streaming-markdown-segment\" }, node.text)];\n  }\n  return node.segments.map((segment: TextSegment) =>\n    h(\n      \"span\",\n      {\n        class: \"cpk-streaming-markdown-segment\",\n        \"data-streaming-markdown-segment-kind\": segment.kind,\n        \"data-streaming-markdown-whitespace\": String(segment.isWhitespace),\n      },\n      segment.noBreakBefore ? `⁠${segment.text}` : segment.text,\n    ),\n  );\n}\n\nfunction renderChildren(\n  childIds: number[],\n  nodeById: NodeById,\n  nodeRenderers?: VueStreamingMarkdownNodeRenderers,\n): (VNode | string | null)[] {\n  return childIds.map((id) => {\n    const child = nodeById.get(id);\n    return child ? renderNode(child, nodeById, nodeRenderers) : null;\n  });\n}\n\nfunction renderNode(\n  node: StreamingMarkdownAstNode,\n  nodeById: NodeById,\n  nodeRenderers?: VueStreamingMarkdownNodeRenderers,\n): VNode | string | null {\n  // Helper: apply a nodeRenderers override if one is registered for this node type.\n  function withOverride(\n    key: VueStreamingMarkdownNodeRendererKey,\n    defaultVNode: VNode | string | null,\n  ): VNode | string | null {\n    const override = nodeRenderers?.[key];\n    return override ? override(node, defaultVNode) : defaultVNode;\n  }\n\n  switch (node.type) {\n    case \"document\": {\n      // Document is transparent — render children directly as a Fragment via array\n      // We wrap in a div for the root element, handled at the top level.\n      // Here just return children inlined (will be wrapped by root div).\n      return h(\n        \"span\",\n        { style: \"display:contents\" },\n        renderChildren(node.children, nodeById, nodeRenderers),\n      );\n    }\n\n    case \"paragraph\": {\n      const defaultVNode = h(\n        \"p\",\n        {\n          \"data-streaming-markdown-node\": \"paragraph\",\n          \"data-node-open\": String(!node.closed),\n        },\n        renderChildren(node.children, nodeById, nodeRenderers),\n      );\n      return withOverride(\"paragraph\", defaultVNode);\n    }\n\n    case \"heading\": {\n      const tag = `h${node.level}` as \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n      const defaultVNode = h(\n        tag,\n        {\n          \"data-streaming-markdown-node\": \"heading\",\n          \"data-node-open\": String(!node.closed),\n        },\n        renderChildren(node.children, nodeById, nodeRenderers),\n      );\n      return withOverride(\"heading\", defaultVNode);\n    }\n\n    case \"blockquote\": {\n      const defaultVNode = h(\n        \"blockquote\",\n        {\n          \"data-streaming-markdown-node\": \"blockquote\",\n          \"data-node-open\": String(!node.closed),\n        },\n        renderChildren(node.children, nodeById, nodeRenderers),\n      );\n      return withOverride(\"blockquote\", defaultVNode);\n    }\n\n    case \"list\": {\n      const tag = node.ordered ? \"ol\" : \"ul\";\n      const attrs: Record<string, unknown> = {\n        \"data-streaming-markdown-node\": \"list\",\n        \"data-node-open\": String(!node.closed),\n        \"data-list-tight\": String(node.tight),\n      };\n      if (node.ordered && node.start != null) {\n        attrs.start = node.start;\n      }\n      const defaultVNode = h(\n        tag,\n        attrs,\n        renderChildren(node.children, nodeById, nodeRenderers),\n      );\n      return withOverride(\"list\", defaultVNode);\n    }\n\n    case \"list-item\": {\n      const defaultVNode = h(\n        \"li\",\n        {\n          \"data-streaming-markdown-node\": \"list-item\",\n          \"data-node-open\": String(!node.closed),\n        },\n        renderChildren(node.children, nodeById, nodeRenderers),\n      );\n      return withOverride(\"listItem\", defaultVNode);\n    }\n\n    case \"code-block\": {\n      const defaultVNode = h(\n        \"pre\",\n        {\n          \"data-streaming-markdown-node\": \"code-block\",\n          \"data-node-open\": String(!node.closed),\n        },\n        [h(\"code\", { \"data-code-info\": node.info ?? undefined }, node.text)],\n      );\n      return withOverride(\"codeBlock\", defaultVNode);\n    }\n\n    case \"table\": {\n      const defaultVNode = h(\n        \"table\",\n        {\n          \"data-streaming-markdown-node\": \"table\",\n          \"data-node-open\": String(!node.closed),\n        },\n        [h(\"tbody\", renderChildren(node.children, nodeById, nodeRenderers))],\n      );\n      return withOverride(\"table\", defaultVNode);\n    }\n\n    case \"table-row\": {\n      const defaultVNode = h(\n        \"tr\",\n        {\n          \"data-streaming-markdown-node\": \"table-row\",\n          \"data-node-open\": String(!node.closed),\n        },\n        renderChildren(node.children, nodeById, nodeRenderers),\n      );\n      return withOverride(\"tableRow\", defaultVNode);\n    }\n\n    case \"table-cell\": {\n      const parent =\n        node.parentId != null ? nodeById.get(node.parentId) : undefined;\n      const isHeader = parent?.type === \"table-row\" && parent.isHeader;\n      const tag = isHeader ? \"th\" : \"td\";\n      const defaultVNode = h(\n        tag,\n        {\n          \"data-streaming-markdown-node\": \"table-cell\",\n          \"data-node-open\": String(!node.closed),\n        },\n        renderChildren(node.children, nodeById, nodeRenderers),\n      );\n      return withOverride(\"tableCell\", defaultVNode);\n    }\n\n    case \"thematic-break\": {\n      const defaultVNode = h(\"hr\", {\n        \"data-streaming-markdown-node\": \"thematic-break\",\n        \"data-node-open\": String(!node.closed),\n      });\n      return withOverride(\"thematicBreak\", defaultVNode);\n    }\n\n    case \"text\": {\n      return h(\"span\", { style: \"display:contents\" }, renderTextSegments(node));\n    }\n\n    case \"em\": {\n      const defaultVNode = h(\n        \"em\",\n        {\n          \"data-streaming-markdown-node\": \"em\",\n          \"data-node-open\": String(!node.closed),\n        },\n        renderChildren(node.children, nodeById, nodeRenderers),\n      );\n      return withOverride(\"em\", defaultVNode);\n    }\n\n    case \"strong\": {\n      const defaultVNode = h(\n        \"strong\",\n        {\n          \"data-streaming-markdown-node\": \"strong\",\n          \"data-node-open\": String(!node.closed),\n        },\n        renderChildren(node.children, nodeById, nodeRenderers),\n      );\n      return withOverride(\"strong\", defaultVNode);\n    }\n\n    case \"strikethrough\": {\n      const defaultVNode = h(\n        \"del\",\n        {\n          \"data-streaming-markdown-node\": \"strikethrough\",\n          \"data-node-open\": String(!node.closed),\n        },\n        renderChildren(node.children, nodeById, nodeRenderers),\n      );\n      return withOverride(\"strikethrough\", defaultVNode);\n    }\n\n    case \"inline-code\": {\n      const defaultVNode = h(\n        \"code\",\n        {\n          \"data-streaming-markdown-node\": \"inline-code\",\n          \"data-node-open\": String(!node.closed),\n        },\n        node.text,\n      );\n      return withOverride(\"inlineCode\", defaultVNode);\n    }\n\n    case \"soft-break\": {\n      return \"\\n\";\n    }\n\n    case \"hard-break\": {\n      const defaultVNode = h(\"br\", {\n        \"data-streaming-markdown-node\": \"hard-break\",\n        \"data-node-open\": String(!node.closed),\n      });\n      return withOverride(\"hardBreak\", defaultVNode);\n    }\n\n    case \"link\": {\n      const safeHref = sanitizeHref(node.url);\n      const attrs: Record<string, unknown> = {\n        \"data-streaming-markdown-node\": \"link\",\n        \"data-node-open\": String(!node.closed),\n        target: \"_blank\",\n        rel: \"noopener noreferrer\",\n      };\n      if (safeHref != null) {\n        attrs.href = safeHref;\n      }\n      if (node.title) {\n        attrs.title = node.title;\n      }\n      const defaultVNode = h(\n        \"a\",\n        attrs,\n        renderChildren(node.children, nodeById, nodeRenderers),\n      );\n      return withOverride(\"link\", defaultVNode);\n    }\n\n    case \"image\": {\n      const safeSrc = sanitizeImgSrc(node.url);\n      const attrs: Record<string, unknown> = {\n        \"data-streaming-markdown-node\": \"image\",\n        \"data-node-open\": String(!node.closed),\n        alt: node.alt,\n      };\n      if (safeSrc != null) {\n        attrs.src = safeSrc;\n      }\n      if (node.title) {\n        attrs.title = node.title;\n      }\n      const defaultVNode = h(\"img\", attrs);\n      return withOverride(\"image\", defaultVNode);\n    }\n\n    case \"autolink\": {\n      const safeHref = sanitizeHref(node.url);\n      const attrs: Record<string, unknown> = {\n        \"data-streaming-markdown-node\": \"autolink\",\n        \"data-node-open\": String(!node.closed),\n        target: \"_blank\",\n        rel: \"noopener noreferrer\",\n      };\n      if (safeHref != null) {\n        attrs.href = safeHref;\n      }\n      const defaultVNode = h(\"a\", attrs, node.text);\n      return withOverride(\"autolink\", defaultVNode);\n    }\n\n    case \"citation\": {\n      // Render as a superscript with the citation reference\n      const defaultVNode = h(\n        \"sup\",\n        {\n          \"data-streaming-markdown-node\": \"citation\",\n          \"data-node-open\": String(!node.closed),\n          class: \"cpk-streaming-markdown-citation\",\n        },\n        [\n          h(\n            \"span\",\n            {\n              role: \"doc-noteref\",\n              class: \"cpk-streaming-markdown-citation-label\",\n            },\n            String(node.number ?? node.idRef),\n          ),\n        ],\n      );\n      return withOverride(\"citation\", defaultVNode);\n    }\n\n    default: {\n      return null;\n    }\n  }\n}\n\n// ---------------------------------------------------------------------------\n// Vue component props types (exported for consumer use)\n// ---------------------------------------------------------------------------\n\n/**\n * Custom Vue render function for a specific AST node.\n * @public\n */\nexport type VueStreamingMarkdownNodeRenderer = (\n  node: StreamingMarkdownAstNode,\n  defaultVNode: VNode | string | null,\n) => VNode | string | null;\n\n/**\n * Supported key names for Vue `nodeRenderers`.\n * CamelCase, matching `StreamingMarkdownNodeRendererKey` on the React renderer.\n *\n * @public\n */\nexport type VueStreamingMarkdownNodeRendererKey =\n  | \"paragraph\"\n  | \"heading\"\n  | \"blockquote\"\n  | \"list\"\n  | \"listItem\"\n  | \"codeBlock\"\n  | \"table\"\n  | \"tableRow\"\n  | \"tableCell\"\n  | \"thematicBreak\"\n  | \"em\"\n  | \"strong\"\n  | \"strikethrough\"\n  | \"inlineCode\"\n  | \"hardBreak\"\n  | \"image\"\n  | \"link\"\n  | \"autolink\"\n  | \"citation\";\n\n/**\n * Optional map of node-type renderer keys to custom Vue render functions.\n * @public\n */\nexport type VueStreamingMarkdownNodeRenderers = Partial<\n  Record<VueStreamingMarkdownNodeRendererKey, VueStreamingMarkdownNodeRenderer>\n>;\n\n// ---------------------------------------------------------------------------\n// StreamingMarkdownRenderer — Vue 3 Composition API component (.ts)\n// ---------------------------------------------------------------------------\n\n/**\n * Vue 3 streaming markdown renderer.\n *\n * Drives the `@copilotkit/markdown` zero-dep parser and walks the\n * resulting AST into VNodes via `h()`.\n *\n * @public\n */\nexport const StreamingMarkdownRenderer = defineComponent({\n  name: \"StreamingMarkdownRenderer\",\n\n  props: {\n    /** The full markdown source string, which may grow over time during streaming. */\n    content: {\n      type: String as PropType<string>,\n      required: true,\n    },\n    /** When true, finalizes the parser state (end of stream). */\n    isComplete: {\n      type: Boolean as PropType<boolean>,\n      default: false,\n    },\n    /** Optional parser option overrides. */\n    options: {\n      type: Object as PropType<Partial<StreamingMarkdownParserOptions>>,\n      default: undefined,\n    },\n    /** Optional CSS class applied to the root wrapper element. */\n    class: {\n      type: String as PropType<string>,\n      default: undefined,\n    },\n    /**\n     * When true, renders a trailing cursor span after the last open node.\n     * Animation niceties are left to CSS; this just inserts the element.\n     */\n    caret: {\n      type: Boolean as PropType<boolean>,\n      default: false,\n    },\n    /**\n     * Optional map of node-type keys to custom Vue render functions.\n     * Each function receives the AST node and the default VNode and can return\n     * a replacement VNode (or the defaultVNode to keep the default).\n     * Supported keys: paragraph, heading, blockquote, list, listItem, codeBlock,\n     * table, tableRow, tableCell, thematicBreak, em, strong, strikethrough,\n     * inlineCode, hardBreak, link, image, autolink, citation.\n     */\n    nodeRenderers: {\n      type: Object as PropType<VueStreamingMarkdownNodeRenderers>,\n      default: undefined,\n    },\n  },\n\n  setup(props) {\n    const parserState = computed<StreamingMarkdownParserState>(() => {\n      const opts = normalizeOptions(props.options);\n      return buildParserState(props.content ?? \"\", opts, props.isComplete);\n    });\n\n    const nodeById = computed<NodeById>(() => {\n      const map = new Map<number, StreamingMarkdownAstNode>();\n      for (const node of parserState.value.nodes) {\n        map.set(node.id, node);\n      }\n      return map;\n    });\n\n    return () => {\n      const state = parserState.value;\n      const byId = nodeById.value;\n      const rootNode =\n        state.rootId != null ? byId.get(state.rootId) : undefined;\n      const renderers = props.nodeRenderers;\n\n      const rootClass = props.class\n        ? `cpk-streaming-markdown-root ${props.class}`\n        : \"cpk-streaming-markdown-root\";\n\n      if (!rootNode) {\n        return h(\"div\", {\n          class: rootClass,\n          \"data-streaming-markdown-root\": true,\n        });\n      }\n\n      // Render children of document directly (skip the transparent document wrapper)\n      const children: (VNode | string | null)[] =\n        rootNode.type === \"document\"\n          ? rootNode.children.map((id) => {\n              const child = byId.get(id);\n              return child ? renderNode(child, byId, renderers) : null;\n            })\n          : [renderNode(rootNode, byId, renderers)];\n\n      // Append caret if requested and not complete\n      if (props.caret && !state.isComplete) {\n        children.push(\n          h(\"span\", {\n            \"aria-hidden\": true,\n            class: \"cpk-streaming-markdown-caret\",\n            \"data-streaming-markdown-caret\": true,\n            style: {\n              display: \"inline-block\",\n              width: \"0.48em\",\n              height: \"0.48em\",\n              marginInlineStart: \"0.08em\",\n              verticalAlign: \"-0.08em\",\n              borderRadius: \"999px\",\n              backgroundColor: \"currentColor\",\n              opacity: \"0.55\",\n            },\n          }),\n        );\n      }\n\n      return h(\n        \"div\",\n        {\n          class: rootClass,\n          \"data-streaming-markdown-root\": true,\n        },\n        children,\n      );\n    };\n  },\n});\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/vue/streaming-markdown-renderer.ts"],"sourcesContent":["import { computed, defineComponent, h, isVNode } from \"vue\";\nimport type { PropType, VNode, VNodeChild } from \"vue\";\nimport {\n  STREAMING_MARKDOWN_CARET_ATTRS,\n  STREAMING_MARKDOWN_CARET_STYLE,\n  STREAMING_MARKDOWN_ROOT_CLASS,\n  buildStreamingMarkdownRenderTree,\n  getStreamingMarkdownStyles,\n  updateStreamingMarkdownParserSession,\n} from \"@copilotkit/markdown\";\nimport type {\n  StreamingMarkdownAstNode,\n  StreamingMarkdownCitationRenderData,\n  StreamingMarkdownNodeClassNames,\n  StreamingMarkdownParserOptions,\n  StreamingMarkdownParserSession,\n  StreamingMarkdownRenderChild,\n  StreamingMarkdownRenderElement,\n  StreamingMarkdownRenderNode,\n} from \"@copilotkit/markdown\";\n\n// ---------------------------------------------------------------------------\n// Vue component props types (exported for consumer use)\n// ---------------------------------------------------------------------------\n\n/**\n * Custom Vue render function for a specific AST node.\n * @public\n */\nexport type VueStreamingMarkdownNodeRenderer = (\n  node: StreamingMarkdownAstNode,\n  defaultVNode: VNode | string | null,\n) => VNode | string | null;\n\n/**\n * Supported key names for Vue `nodeRenderers`.\n * CamelCase, matching `StreamingMarkdownNodeRendererKey` on the React renderer.\n *\n * @public\n */\nexport type VueStreamingMarkdownNodeRendererKey =\n  | \"paragraph\"\n  | \"heading\"\n  | \"blockquote\"\n  | \"list\"\n  | \"listItem\"\n  | \"codeBlock\"\n  | \"table\"\n  | \"tableRow\"\n  | \"tableCell\"\n  | \"thematicBreak\"\n  | \"em\"\n  | \"strong\"\n  | \"strikethrough\"\n  | \"inlineCode\"\n  | \"hardBreak\"\n  | \"image\"\n  | \"link\"\n  | \"autolink\"\n  | \"citation\"\n  | \"math\";\n\n/**\n * Optional map of node-type renderer keys to custom Vue render functions.\n * @public\n */\nexport type VueStreamingMarkdownNodeRenderers = Partial<\n  Record<VueStreamingMarkdownNodeRendererKey, VueStreamingMarkdownNodeRenderer>\n>;\n\n/**\n * Called when a link or autolink is clicked.\n * @public\n */\nexport type VueStreamingMarkdownLinkClickHandler = (\n  event: MouseEvent,\n  url: string,\n  node: StreamingMarkdownAstNode,\n) => void;\n\n/**\n * Called when a citation reference is clicked.\n * @public\n */\nexport type VueStreamingMarkdownCitationClickHandler = (\n  event: MouseEvent,\n  citation: StreamingMarkdownCitationRenderData,\n  node: StreamingMarkdownAstNode,\n) => void;\n\n// ---------------------------------------------------------------------------\n// Render tree → VNodes\n// ---------------------------------------------------------------------------\n\ntype RenderContext = {\n  nodeRenderers: VueStreamingMarkdownNodeRenderers | undefined;\n  onLinkClick: VueStreamingMarkdownLinkClickHandler | undefined;\n  onCitationClick: VueStreamingMarkdownCitationClickHandler | undefined;\n};\n\nconst VUE_RENDERER_KEYS = new Set<string>([\n  \"paragraph\",\n  \"heading\",\n  \"blockquote\",\n  \"list\",\n  \"listItem\",\n  \"codeBlock\",\n  \"table\",\n  \"tableRow\",\n  \"tableCell\",\n  \"thematicBreak\",\n  \"em\",\n  \"strong\",\n  \"strikethrough\",\n  \"inlineCode\",\n  \"hardBreak\",\n  \"image\",\n  \"link\",\n  \"autolink\",\n  \"citation\",\n  \"math\",\n] satisfies VueStreamingMarkdownNodeRendererKey[]);\n\nfunction isVueRendererKey(\n  key: string,\n): key is VueStreamingMarkdownNodeRendererKey {\n  return VUE_RENDERER_KEYS.has(key);\n}\n\nfunction elementProps(\n  element: StreamingMarkdownRenderElement,\n  context: RenderContext,\n) {\n  const props: Record<string, unknown> = { key: element.key, ...element.attrs };\n  const action = element.action;\n  if (action?.type === \"link\") {\n    props.onClick = (event: MouseEvent) =>\n      context.onLinkClick?.(event, action.url, action.node);\n  }\n  if (action?.type === \"citation\") {\n    props.onClick = (event: MouseEvent) =>\n      context.onCitationClick?.(event, action.citation, action.node);\n  }\n  return props;\n}\n\nfunction renderChild(\n  child: StreamingMarkdownRenderChild,\n  context: RenderContext,\n  slot: VNodeChild[],\n): VNodeChild | VNodeChild[] {\n  switch (child.kind) {\n    case \"node\":\n      return renderRenderNode(child, context);\n    case \"element\":\n      return h(\n        child.tag,\n        elementProps(child, context),\n        child.children.flatMap((entry) => renderChild(entry, context, slot)),\n      );\n    case \"text\":\n      return child.text;\n    case \"caret\":\n      return h(\"span\", {\n        key: child.key,\n        ...STREAMING_MARKDOWN_CARET_ATTRS,\n        style: STREAMING_MARKDOWN_CARET_STYLE,\n      });\n    case \"slot\":\n      return slot;\n    default: {\n      const unreachable: never = child;\n      return unreachable;\n    }\n  }\n}\n\nfunction renderRenderNode(\n  renderNode: StreamingMarkdownRenderNode,\n  context: RenderContext,\n): VNodeChild[] {\n  const children = (renderNode.children ?? []).flatMap((entry) =>\n    renderChild(entry, context, []),\n  );\n  const output = renderNode.output.flatMap((entry) =>\n    renderChild(entry, context, children),\n  );\n  const key = renderNode.rendererKey;\n  const override = isVueRendererKey(key)\n    ? context.nodeRenderers?.[key]\n    : undefined;\n  if (!override) {\n    return output;\n  }\n  const [first] = output;\n  const defaultVNode =\n    isVNode(first) || typeof first === \"string\" ? first : null;\n  return [override(renderNode.node, defaultVNode)];\n}\n\n// ---------------------------------------------------------------------------\n// StreamingMarkdownRenderer — Vue 3 Composition API component (.ts)\n// ---------------------------------------------------------------------------\n\n/**\n * Vue 3 streaming markdown renderer.\n *\n * Parses with `@copilotkit/markdown` and renders the shared render tree with\n * `h()`, so markup, sanitization, caret placement, and the per-token fade-in\n * match the React and DOM renderers.\n *\n * @public\n */\nexport const StreamingMarkdownRenderer = defineComponent({\n  name: \"StreamingMarkdownRenderer\",\n  inheritAttrs: false,\n\n  props: {\n    /** The full markdown source string, which may grow over time during streaming. */\n    content: {\n      type: String as PropType<string>,\n      required: true,\n    },\n    /** When true, finalizes the parser state (end of stream). */\n    isComplete: {\n      type: Boolean as PropType<boolean>,\n      default: false,\n    },\n    /** Optional parser option overrides. */\n    options: {\n      type: Object as PropType<Partial<StreamingMarkdownParserOptions>>,\n      default: undefined,\n    },\n    /** Optional CSS class applied to the root wrapper element. */\n    class: {\n      type: String as PropType<string>,\n      default: undefined,\n    },\n    /**\n     * When true, renders a caret inside the deepest open node while streaming.\n     */\n    caret: {\n      type: Boolean as PropType<boolean>,\n      default: false,\n    },\n    /**\n     * Optional map of node-type keys to custom Vue render functions.\n     * Each function receives the AST node and the default VNode and can return\n     * a replacement VNode (or the defaultVNode to keep the default).\n     */\n    nodeRenderers: {\n      type: Object as PropType<VueStreamingMarkdownNodeRenderers>,\n      default: undefined,\n    },\n    /** Extra classes for the default element of a node type. */\n    nodeClassNames: {\n      type: Object as PropType<StreamingMarkdownNodeClassNames>,\n      default: undefined,\n    },\n    /** Called when a link or autolink is clicked. */\n    onLinkClick: {\n      type: Function as PropType<VueStreamingMarkdownLinkClickHandler>,\n      default: undefined,\n    },\n    /** Called when a citation reference with a URL is clicked. */\n    onCitationClick: {\n      type: Function as PropType<VueStreamingMarkdownCitationClickHandler>,\n      default: undefined,\n    },\n  },\n\n  setup(props, { attrs }) {\n    // Not reactive on purpose: the previous session only seeds the next parse.\n    let session: StreamingMarkdownParserSession | null = null;\n    const parserState = computed(() => {\n      session = updateStreamingMarkdownParserSession(\n        session,\n        props.content ?? \"\",\n        props.options,\n        props.isComplete,\n      );\n      return session.parserState;\n    });\n\n    return () => {\n      const tree = buildStreamingMarkdownRenderTree(parserState.value, {\n        caret: props.caret,\n        nodeClassNames: props.nodeClassNames,\n      });\n      const content = tree.root\n        ? renderRenderNode(tree.root, {\n            nodeRenderers: props.nodeRenderers,\n            onLinkClick: props.onLinkClick,\n            onCitationClick: props.onCitationClick,\n          })\n        : [];\n\n      const rootClass = props.class\n        ? `${STREAMING_MARKDOWN_ROOT_CLASS} ${props.class}`\n        : STREAMING_MARKDOWN_ROOT_CLASS;\n\n      return [\n        h(\"style\", getStreamingMarkdownStyles()),\n        h(\n          \"div\",\n          { ...attrs, class: rootClass, \"data-streaming-markdown-root\": true },\n          content,\n        ),\n      ];\n    };\n  },\n});\n"],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@copilotkit/markdown",
-  "version": "2.0.0-rc.20",
-  "description": "Zero-dependency streaming markdown parser and renderer for CopilotKit",
+  "version": "2.0.0-rc.22",
+  "description": "Zero-dependency streaming markdown parser and renderers (React, Vue, React Native, DOM) for CopilotKit",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -28,6 +28,10 @@
       "import": "./dist/vue/index.mjs",
       "require": "./dist/vue/index.cjs"
     },
+    "./dom": {
+      "import": "./dist/dom/index.mjs",
+      "require": "./dist/dom/index.cjs"
+    },
     "./package.json": "./package.json"
   },
   "publishConfig": {