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

package/dist/react/index.mjs

@@ -1,67 +1,8 @@
-import { Fragment, useMemo, useRef } from "react";
-import { createStreamingMarkdownParserState, finalizeStreamingMarkdown, parseStreamingMarkdownChunk } from "@copilotkit/markdown";
+import { STREAMING_MARKDOWN_CARET_ATTRS, STREAMING_MARKDOWN_CARET_STYLE, STREAMING_MARKDOWN_ROOT_CLASS, buildStreamingMarkdownRenderTree, findStreamingMarkdownOpenNode, getStreamingMarkdownStyles, updateStreamingMarkdownParserSession } from "@copilotkit/markdown";
+import { Fragment, createElement, useMemo, useRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/react/use-streaming-markdown-parser.tsx
-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 getSegmenterKey(segmenter) {
-	if (segmenter === true || segmenter === false) return String(segmenter);
-	return `object:${segmenter.locale ?? ""}:${segmenter.granularity ?? "word"}`;
-}
-function getOptionsKey(options) {
-	return `${getSegmenterKey(options.segmenter)}|tables:${String(options.enableTables)}|autolinks:${String(options.enableAutolinks)}`;
-}
-function parseFullText(text, options, isCompleteInput) {
-	const initialState = createStreamingMarkdownParserState(options);
-	const parsedState = text.length > 0 ? parseStreamingMarkdownChunk(initialState, text) : initialState;
-	return isCompleteInput ? finalizeStreamingMarkdown(parsedState) : parsedState;
-}
-function createSession(text, options, optionsKey, isCompleteInput) {
-	return {
-		parserState: parseFullText(text, options, isCompleteInput),
-		text,
-		optionsKey,
-		isCompleteInput
-	};
-}
-function resolveNextSession(previous, text, options, optionsKey, isCompleteInput) {
-	const optionsChanged = previous.optionsKey !== optionsKey;
-	const completionChanged = previous.isCompleteInput !== isCompleteInput;
-	if (optionsChanged) return createSession(text, options, optionsKey, isCompleteInput);
-	const textChanged = text !== previous.text;
-	if (!textChanged && !completionChanged) return previous;
-	if (!textChanged && completionChanged) {
-		const parserState = isCompleteInput ? finalizeStreamingMarkdown(previous.parserState) : parseStreamingMarkdownChunk(previous.parserState, "");
-		return {
-			...previous,
-			parserState,
-			isCompleteInput
-		};
-	}
-	let nextParserState;
-	if (text.startsWith(previous.text)) {
-		const suffix = text.slice(previous.text.length);
-		nextParserState = suffix.length > 0 ? parseStreamingMarkdownChunk(previous.parserState, suffix) : previous.parserState;
-	} else nextParserState = parseFullText(text, options, false);
-	if (isCompleteInput) nextParserState = finalizeStreamingMarkdown(nextParserState);
-	return {
-		parserState: nextParserState,
-		text,
-		optionsKey,
-		isCompleteInput
-	};
-}
 /**
 * Internal prop-driven hook for streaming markdown parsing in React.
 *
@@ -72,42 +13,19 @@ function resolveNextSession(previous, text, options, optionsKey, isCompleteInput
 */
 function useStreamingMarkdownParser(text, options, isCompleteInput = false) {
 	const sessionRef = useRef(null);
-	const segmenter = options?.segmenter;
-	const segmenterKind = typeof segmenter === "object" && segmenter !== null ? "object" : String(segmenter ?? true);
-	const segmenterLocale = typeof segmenter === "object" && segmenter !== null ? segmenter.locale ?? "" : "";
-	const segmenterGranularity = typeof segmenter === "object" && segmenter !== null ? segmenter.granularity ?? "word" : "";
-	const normalizedOptions = useMemo(() => normalizeOptions(options), [
-		options?.enableAutolinks,
-		options?.enableTables,
-		segmenterKind,
-		segmenterLocale,
-		segmenterGranularity
-	]);
-	const optionsKey = getOptionsKey(normalizedOptions);
 	return useMemo(() => {
-		const next = resolveNextSession(sessionRef.current ?? createSession(text, normalizedOptions, optionsKey, isCompleteInput), text, normalizedOptions, optionsKey, isCompleteInput);
+		const next = updateStreamingMarkdownParserSession(sessionRef.current, text, options, isCompleteInput);
 		sessionRef.current = next;
 		return next;
 	}, [
 		text,
-		normalizedOptions,
-		optionsKey,
+		options,
 		isCompleteInput
 	]).parserState;
 }
 
 //#endregion
 //#region src/react/streaming-markdown-renderer.tsx
-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;
-}
-function sanitizeImgSrc(src) {
-	if (!src) return void 0;
-	return SAFE_IMG_SRC.test(src.trim()) ? src : void 0;
-}
 /**
 * Helper for creating typed streaming markdown node renderer maps.
 *
@@ -116,128 +34,10 @@ function sanitizeImgSrc(src) {
 function createStreamingMarkdownNodeRenderers(renderers) {
 	return renderers;
 }
-const WORD_JOINER = "⁠";
-const DEFAULT_ROOT_CLASS = "cpk-streaming-markdown-root";
-const DEFAULT_CITATION_CLASS = "cpk-streaming-markdown-citation";
-const DEFAULT_CITATION_LABEL_CLASS = "cpk-streaming-markdown-citation-label";
-const DEFAULT_STYLES = `
-  .${DEFAULT_ROOT_CLASS} .cpk-streaming-markdown-segment {
-    opacity: 1;
-    transition: opacity 400ms ease-out;
-    @starting-style {
-      opacity: 0;
-    }
-  }
-
-  .${DEFAULT_ROOT_CLASS} .${DEFAULT_CITATION_CLASS} {
-    vertical-align: baseline;
-  }
-
-  .${DEFAULT_ROOT_CLASS} .${DEFAULT_CITATION_LABEL_CLASS} {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    inline-size: 1.4em;
-    block-size: 1.4em;
-    border-radius: 999px;
-    border: 1px solid hsl(0 0% 50% / 0.35);
-    background-color: hsl(0 0% 50% / 0.16);
-    color: inherit;
-    font-size: 0.7em;
-    line-height: 1;
-    font-variant-numeric: tabular-nums;
-    text-decoration: none;
-    transform: translateY(-0.15em);
-  }
-`;
-const DEFAULT_STYLES_FALLBACK = `
-  .${DEFAULT_ROOT_CLASS} .cpk-streaming-markdown-segment {
-    opacity: 1;
-    transition: opacity 400ms ease-out;
-  }
-
-  .${DEFAULT_ROOT_CLASS} .${DEFAULT_CITATION_CLASS} {
-    vertical-align: baseline;
-  }
-
-  .${DEFAULT_ROOT_CLASS} .${DEFAULT_CITATION_LABEL_CLASS} {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    inline-size: 1.4em;
-    block-size: 1.4em;
-    border-radius: 999px;
-    border: 1px solid hsl(0 0% 50% / 0.35);
-    background-color: hsl(0 0% 50% / 0.16);
-    color: inherit;
-    font-size: 0.7em;
-    line-height: 1;
-    font-variant-numeric: tabular-nums;
-    text-decoration: none;
-    transform: translateY(-0.15em);
-  }
-`;
-const NODE_TYPE_TO_RENDERER_KEY = {
-	document: "document",
-	paragraph: "paragraph",
-	heading: "heading",
-	blockquote: "blockquote",
-	list: "list",
-	"list-item": "listItem",
-	"code-block": "codeBlock",
-	table: "table",
-	"table-row": "tableRow",
-	"table-cell": "tableCell",
-	"thematic-break": "thematicBreak",
-	text: "text",
-	em: "em",
-	strong: "strong",
-	strikethrough: "strikethrough",
-	"inline-code": "inlineCode",
-	"soft-break": "softBreak",
-	"hard-break": "hardBreak",
-	image: "image",
-	link: "link",
-	autolink: "autolink",
-	citation: "citation"
-};
-function renderWithOverride(node, context, defaultNode, children = null, citation) {
-	const rendererKey = NODE_TYPE_TO_RENDERER_KEY[node.type];
-	const renderer = context.nodeRenderers?.[rendererKey] ?? context.nodeRenderers?.node;
-	if (!renderer) return defaultNode;
-	return renderer({
-		node,
-		children,
-		defaultNode,
-		citation
-	});
-}
-function renderChildren(node, context) {
-	return node.children.map((childId) => {
-		const childNode = context.nodeById.get(childId);
-		if (!childNode) return null;
-		return /* @__PURE__ */ jsx(Fragment, { children: renderNode(childNode, context) }, childId);
-	});
-}
-function renderCaret(nodeId, context) {
-	if (context.caretTargetNodeId !== nodeId) return null;
-	return /* @__PURE__ */ jsx(Fragment, { children: context.caretNode }, `caret-${nodeId}`);
-}
 function renderDefaultCaret() {
 	return /* @__PURE__ */ jsx("span", {
-		"aria-hidden": true,
-		className: "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: .55
-		}
+		...STREAMING_MARKDOWN_CARET_ATTRS,
+		style: STREAMING_MARKDOWN_CARET_STYLE
 	});
 }
 function resolveCaretNode(caret, props) {
@@ -246,289 +46,97 @@ function resolveCaretNode(caret, props) {
 	if (typeof caret === "function") return caret(props);
 	return caret;
 }
-function renderTextSegments(node) {
-	if (node.text.length === 0) return null;
-	if (node.segments.length === 0) return /* @__PURE__ */ jsx("span", {
-		className: "cpk-streaming-markdown-segment",
-		"data-streaming-markdown-segment-kind": "full",
-		"data-streaming-markdown-whitespace": "false",
-		children: node.text
-	}, `segment-${node.id}-full`);
-	return node.segments.map((segment) => /* @__PURE__ */ jsx("span", {
-		className: "cpk-streaming-markdown-segment",
-		"data-streaming-markdown-segment-kind": segment.kind,
-		"data-streaming-markdown-whitespace": String(segment.isWhitespace),
-		children: segment.noBreakBefore ? `${WORD_JOINER}${segment.text}` : segment.text
-	}, `segment-${node.id}-${segment.start}-${segment.kind}`));
-}
-function handleLinkClick(context, node, url) {
-	return (event) => {
-		context.onLinkClickRef.current?.(event, url, node);
+function toReactProps(element, context) {
+	const props = { key: element.key };
+	const entries = Object.entries(element.attrs);
+	for (const [name, value] of entries) props[name === "class" ? "className" : name] = value;
+	if (element.tag === "input") props.readOnly = true;
+	const action = element.action;
+	if (action?.type === "link") props.onClick = (event) => {
+		context.onLinkClickRef.current?.(event, action.url, action.node);
 	};
-}
-function getCitationRenderData(node, context) {
-	const number = node.number ?? context.citations.numbers[node.idRef] ?? node.idRef;
-	const definition = context.citations.definitions[node.idRef];
-	return {
-		id: node.idRef,
-		number,
-		definition
+	if (action?.type === "citation") props.onClick = (event) => {
+		context.onCitationClickRef.current?.(event, action.citation, action.node);
 	};
-}
-function renderDefaultCitation(node, context, citation) {
-	const label = String(citation.number);
-	const href = sanitizeHref(citation.definition?.url);
-	if (!href) return /* @__PURE__ */ jsx("sup", {
-		className: DEFAULT_CITATION_CLASS,
-		"data-streaming-markdown-node": node.type,
-		"data-node-open": String(!node.closed),
-		children: /* @__PURE__ */ jsx("span", {
-			role: "doc-noteref",
-			className: DEFAULT_CITATION_LABEL_CLASS,
-			children: label
-		})
-	}, node.id);
-	return /* @__PURE__ */ jsx("sup", {
-		className: DEFAULT_CITATION_CLASS,
-		"data-streaming-markdown-node": node.type,
-		"data-node-open": String(!node.closed),
-		children: /* @__PURE__ */ jsx("a", {
-			href,
-			target: "_blank",
-			rel: "noopener noreferrer",
-			role: "doc-noteref",
-			className: DEFAULT_CITATION_LABEL_CLASS,
-			onClick: (event) => {
-				context.onCitationClickRef.current?.(event, citation, node);
-			},
-			children: label
-		})
-	}, node.id);
-}
-function renderContainerNode(node, context) {
-	const children = /* @__PURE__ */ jsxs(Fragment$1, { children: [renderChildren(node, context), renderCaret(node.id, context)] });
-	if (node.type === "document") return renderWithOverride(node, context, /* @__PURE__ */ jsx(Fragment, { children }, node.id), children);
-	if (node.type === "paragraph") return renderWithOverride(node, context, /* @__PURE__ */ jsx("p", {
-		"data-streaming-markdown-node": node.type,
-		"data-node-open": String(!node.closed),
-		children
-	}, node.id), children);
-	if (node.type === "heading") {
-		const headingTag = `h${node.level}`;
-		return renderWithOverride(node, context, headingTag === "h1" ? /* @__PURE__ */ jsx("h1", {
-			"data-streaming-markdown-node": node.type,
-			"data-node-open": String(!node.closed),
-			children
-		}, node.id) : headingTag === "h2" ? /* @__PURE__ */ jsx("h2", {
-			"data-streaming-markdown-node": node.type,
-			"data-node-open": String(!node.closed),
-			children
-		}, node.id) : headingTag === "h3" ? /* @__PURE__ */ jsx("h3", {
-			"data-streaming-markdown-node": node.type,
-			"data-node-open": String(!node.closed),
-			children
-		}, node.id) : headingTag === "h4" ? /* @__PURE__ */ jsx("h4", {
-			"data-streaming-markdown-node": node.type,
-			"data-node-open": String(!node.closed),
-			children
-		}, node.id) : headingTag === "h5" ? /* @__PURE__ */ jsx("h5", {
-			"data-streaming-markdown-node": node.type,
-			"data-node-open": String(!node.closed),
-			children
-		}, node.id) : /* @__PURE__ */ jsx("h6", {
-			"data-streaming-markdown-node": node.type,
-			"data-node-open": String(!node.closed),
-			children
-		}, node.id), children);
-	}
-	if (node.type === "blockquote") return renderWithOverride(node, context, /* @__PURE__ */ jsx("blockquote", {
-		"data-streaming-markdown-node": node.type,
-		"data-node-open": String(!node.closed),
-		children
-	}, node.id), children);
-	if (node.type === "list") {
-		if (node.ordered) return renderWithOverride(node, context, /* @__PURE__ */ jsx("ol", {
-			start: node.start ?? void 0,
-			"data-streaming-markdown-node": node.type,
-			"data-node-open": String(!node.closed),
-			"data-list-tight": String(node.tight),
-			children
-		}, node.id), children);
-		return renderWithOverride(node, context, /* @__PURE__ */ jsx("ul", {
-			"data-streaming-markdown-node": node.type,
-			"data-node-open": String(!node.closed),
-			"data-list-tight": String(node.tight),
-			children
-		}, node.id), children);
-	}
-	if (node.type === "list-item") return renderWithOverride(node, context, /* @__PURE__ */ jsx("li", {
-		"data-streaming-markdown-node": node.type,
-		"data-node-open": String(!node.closed),
-		children
-	}, node.id), children);
-	if (node.type === "table") return renderWithOverride(node, context, /* @__PURE__ */ jsx("table", {
-		"data-streaming-markdown-node": node.type,
-		"data-node-open": String(!node.closed),
-		children: /* @__PURE__ */ jsx("tbody", { children })
-	}, node.id), children);
-	if (node.type === "table-row") return renderWithOverride(node, context, /* @__PURE__ */ jsx("tr", {
-		"data-streaming-markdown-node": node.type,
-		"data-node-open": String(!node.closed),
-		children
-	}, node.id), children);
-	if (node.type === "table-cell") {
-		const parent = node.parentId == null ? void 0 : context.nodeById.get(node.parentId);
-		if (parent?.type === "table-row" && parent.isHeader) return renderWithOverride(node, context, /* @__PURE__ */ jsx("th", {
-			"data-streaming-markdown-node": node.type,
-			"data-node-open": String(!node.closed),
-			children
-		}, node.id), children);
-		return renderWithOverride(node, context, /* @__PURE__ */ jsx("td", {
-			"data-streaming-markdown-node": node.type,
-			"data-node-open": String(!node.closed),
-			children
-		}, node.id), children);
+	return props;
+}
+const VOID_TAGS = new Set([
+	"br",
+	"hr",
+	"img",
+	"input"
+]);
+function renderList(children, context, slot) {
+	return children.map((child) => renderChild(child, context, slot));
+}
+/** Unwraps single-entry lists so overrides see `"text"` rather than `["text"]`. */
+function collapse(nodes) {
+	return nodes.length === 1 ? nodes[0] : nodes;
+}
+function renderChild(child, context, slot) {
+	switch (child.kind) {
+		case "node": return renderRenderNode(child, context);
+		case "element": {
+			const props = toReactProps(child, context);
+			return VOID_TAGS.has(child.tag) ? createElement(child.tag, props) : createElement(child.tag, props, ...renderList(child.children, context, slot));
+		}
+		case "text": return child.text;
+		case "caret": return /* @__PURE__ */ jsx(Fragment, { children: context.caretNode }, child.key);
+		case "slot": return /* @__PURE__ */ jsx(Fragment, { children: slot }, child.key);
+		default: return child;
 	}
-	if (node.type === "em") return renderWithOverride(node, context, /* @__PURE__ */ jsx("em", {
-		"data-streaming-markdown-node": node.type,
-		"data-node-open": String(!node.closed),
-		children
-	}, node.id), children);
-	if (node.type === "strong") return renderWithOverride(node, context, /* @__PURE__ */ jsx("strong", {
-		"data-streaming-markdown-node": node.type,
-		"data-node-open": String(!node.closed),
-		children
-	}, node.id), children);
-	if (node.type === "strikethrough") return renderWithOverride(node, context, /* @__PURE__ */ jsx("s", {
-		"data-streaming-markdown-node": node.type,
-		"data-node-open": String(!node.closed),
-		children
-	}, node.id), children);
-	const href = sanitizeHref(node.url);
-	return renderWithOverride(node, context, /* @__PURE__ */ jsx("a", {
-		href,
-		target: "_blank",
-		rel: "noopener noreferrer",
-		title: node.title,
-		onClick: href ? handleLinkClick(context, node, href) : void 0,
-		"data-streaming-markdown-node": node.type,
-		"data-node-open": String(!node.closed),
-		children
-	}, node.id), children);
 }
-function renderNode(node, context) {
-	if (node.type === "document" || node.type === "paragraph" || node.type === "heading" || node.type === "blockquote" || node.type === "list" || node.type === "list-item" || node.type === "table" || node.type === "table-row" || node.type === "table-cell" || node.type === "em" || node.type === "strong" || node.type === "strikethrough" || node.type === "link") return renderContainerNode(node, context);
-	if (node.type === "code-block") return renderWithOverride(node, context, /* @__PURE__ */ jsx("pre", {
-		"data-streaming-markdown-node": node.type,
-		"data-node-open": String(!node.closed),
-		children: /* @__PURE__ */ jsxs("code", {
-			"data-code-info": node.info ?? void 0,
-			children: [node.text, renderCaret(node.id, context)]
-		})
-	}, node.id));
-	if (node.type === "thematic-break") return renderWithOverride(node, context, /* @__PURE__ */ jsx("hr", {
-		"data-streaming-markdown-node": node.type,
-		"data-node-open": String(!node.closed)
-	}, node.id));
-	if (node.type === "text") {
-		const children = renderTextSegments(node);
-		return renderWithOverride(node, context, /* @__PURE__ */ jsx(Fragment, { children }, node.id), children);
-	}
-	if (node.type === "inline-code") return renderWithOverride(node, context, /* @__PURE__ */ jsx("code", {
-		"data-streaming-markdown-node": node.type,
-		"data-node-open": String(!node.closed),
-		children: node.text
-	}, node.id), node.text);
-	if (node.type === "soft-break") {
-		const children = "\n";
-		return renderWithOverride(node, context, /* @__PURE__ */ jsx(Fragment, { children }, node.id), children);
-	}
-	if (node.type === "hard-break") return renderWithOverride(node, context, /* @__PURE__ */ jsx("br", {
-		"data-streaming-markdown-node": node.type,
-		"data-node-open": String(!node.closed)
-	}, node.id));
-	if (node.type === "image") return renderWithOverride(node, context, /* @__PURE__ */ jsx("img", {
-		src: sanitizeImgSrc(node.url),
-		alt: node.alt,
-		title: node.title,
-		"data-streaming-markdown-node": node.type,
-		"data-node-open": String(!node.closed)
-	}, node.id));
-	if (node.type === "autolink") {
-		const href = sanitizeHref(node.url);
-		return renderWithOverride(node, context, /* @__PURE__ */ jsx("a", {
-			href,
-			target: "_blank",
-			rel: "noopener noreferrer",
-			onClick: href ? handleLinkClick(context, node, href) : void 0,
-			"data-streaming-markdown-node": node.type,
-			"data-node-open": String(!node.closed),
-			children: node.text
-		}, node.id), node.text);
-	}
-	const citation = getCitationRenderData(node, context);
-	return renderWithOverride(node, context, renderDefaultCitation(node, context, citation), null, citation);
+function renderRenderNode(renderNode, context) {
+	const children = renderNode.children === null ? null : collapse(renderList(renderNode.children, context, null));
+	const defaultNode = collapse(renderList(renderNode.output, context, children));
+	const renderer = context.nodeRenderers?.[renderNode.rendererKey] ?? context.nodeRenderers?.node;
+	return /* @__PURE__ */ jsx(Fragment, { children: renderer ? renderer({
+		node: renderNode.node,
+		children,
+		defaultNode,
+		citation: renderNode.citation
+	}) : defaultNode }, renderNode.key);
 }
 /**
 * React renderer for streaming markdown parser output.
 *
 * @public
 */
-function StreamingMarkdownRenderer({ children, options, isComplete = false, caret, className, onLinkClick, onCitationClick, nodeRenderers }) {
+function StreamingMarkdownRenderer({ children, options, isComplete = false, caret, className, onLinkClick, onCitationClick, nodeRenderers, nodeClassNames }) {
 	const parserState = useStreamingMarkdownParser(children ?? "", options, isComplete);
 	const onLinkClickRef = useRef(onLinkClick);
 	const onCitationClickRef = useRef(onCitationClick);
 	onLinkClickRef.current = onLinkClick;
 	onCitationClickRef.current = onCitationClick;
-	const nodeById = useMemo(() => {
-		const map = /* @__PURE__ */ new Map();
-		for (const node of parserState.nodes) map.set(node.id, node);
-		return map;
-	}, [parserState.nodes]);
-	const context = useMemo(() => {
-		const openNode = findDeepestOpenRenderableNode(parserState.stack, nodeById);
+	const content = useMemo(() => {
 		const caretNode = resolveCaretNode(caret, {
 			isComplete: parserState.isComplete,
-			openNode
+			openNode: findStreamingMarkdownOpenNode(parserState)
+		});
+		const tree = buildStreamingMarkdownRenderTree(parserState, {
+			caret: caretNode != null,
+			nodeClassNames
 		});
-		const caretTargetNodeId = !parserState.isComplete && openNode != null && caretNode != null ? openNode.id : null;
-		return {
-			nodeById,
-			citations: parserState.citations,
+		if (!tree.root) return null;
+		return renderRenderNode(tree.root, {
 			onLinkClickRef,
 			onCitationClickRef,
 			nodeRenderers,
-			caretTargetNodeId,
 			caretNode
-		};
+		});
 	}, [
-		nodeById,
-		parserState.citations,
-		parserState.isComplete,
-		parserState.stack,
+		parserState,
 		nodeRenderers,
+		nodeClassNames,
 		caret
 	]);
-	const rootNode = parserState.rootId == null ? void 0 : nodeById.get(parserState.rootId);
-	const rootClassName = className ? `${DEFAULT_ROOT_CLASS} ${className}` : DEFAULT_ROOT_CLASS;
-	const styleText = typeof navigator !== "undefined" && /jsdom/i.test(navigator.userAgent) ? DEFAULT_STYLES_FALLBACK : DEFAULT_STYLES;
-	if (!rootNode) return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("style", { children: styleText }), /* @__PURE__ */ jsx("div", {
-		className: rootClassName,
-		"data-streaming-markdown-root": true
-	})] });
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("style", { children: styleText }), /* @__PURE__ */ jsx("div", {
+	const rootClassName = className ? `${STREAMING_MARKDOWN_ROOT_CLASS} ${className}` : STREAMING_MARKDOWN_ROOT_CLASS;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("style", { children: getStreamingMarkdownStyles() }), /* @__PURE__ */ jsx("div", {
 		className: rootClassName,
 		"data-streaming-markdown-root": true,
-		children: renderNode(rootNode, context)
+		children: content
 	})] });
 }
-function findDeepestOpenRenderableNode(stack, nodeById) {
-	for (let index = stack.length - 1; index >= 0; index -= 1) {
-		const candidate = nodeById.get(stack[index]) ?? null;
-		if (candidate && candidate.type !== "document") return candidate;
-	}
-	return null;
-}
 
 //#endregion
 export { StreamingMarkdownRenderer, createStreamingMarkdownNodeRenderers, useStreamingMarkdownParser };