@mastra/playground-ui 68.0.0 → 69.0.0-alpha.1

package/dist/MarkdownRenderer-CDwlvw0Y.cjs

@@ -0,0 +1,490 @@
+require('./MarkdownRenderer.css');const require_rolldown_runtime = require("./rolldown-runtime-CmQyd0Gu.cjs");
+const require_tokens = require("./tokens.cjs.js");
+const require_Arrival = require("./Arrival-Cs1oWjo4.cjs");
+const require_Button = require("./Button-BfICfyxD.cjs");
+const require_buttons_group = require("./buttons-group-DM6_Kohs.cjs");
+const require_dropdown_menu = require("./dropdown-menu-D3D8USIY.cjs");
+const require_hooks_use_copy_to_clipboard = require("./hooks/use-copy-to-clipboard.cjs.js");
+const require_components_CodeBlock = require("./components/CodeBlock.cjs.js");
+const require_utils = require("./utils-uDc1ofX1.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
+let react_markdown = require("react-markdown");
+react_markdown = require_rolldown_runtime.__toESM(react_markdown, 1);
+let remark_gfm = require("remark-gfm");
+remark_gfm = require_rolldown_runtime.__toESM(remark_gfm, 1);
+let remend = require("remend");
+remend = require_rolldown_runtime.__toESM(remend, 1);
+let mdast_util_gfm = require("mdast-util-gfm");
+let mdast_util_to_markdown = require("mdast-util-to-markdown");
+// src/ds/components/MarkdownRenderer/arriving.ts
+/** Fades whole: a fence renders through `CodeBlock`, and inline code carries a background. */
+var UNBROKEN = /* @__PURE__ */ new Set(["pre", "code"]);
+var wrap = (value, arriving) => ({
+	type: "element",
+	tagName: "span",
+	properties: arriving ? { className: [require_tokens.ARRIVING_CLASS] } : {},
+	children: [{
+		type: "text",
+		value
+	}]
+});
+function markArriving(node) {
+	const classes = node.properties.className;
+	node.properties.className = Array.isArray(classes) ? [...classes, require_tokens.ARRIVING_CLASS] : [require_tokens.ARRIVING_CLASS];
+}
+function rebuild(nodes, arriving) {
+	const out = [];
+	for (const node of nodes) {
+		if (node.type === "text") {
+			for (const piece of node.value.match(/\S+|\s+/g) ?? []) if (/\S/.test(piece)) out.push(wrap(piece, arriving()));
+			else out.push({
+				type: "text",
+				value: piece
+			});
+			continue;
+		}
+		out.push(node);
+		if (node.type !== "element") continue;
+		if (!UNBROKEN.has(node.tagName)) node.children = rebuild(node.children, arriving);
+		else if (arriving()) markArriving(node);
+	}
+	return out;
+}
+/**
+* Gives every word of a block an element of its own, and the entrance class to
+* those past the first `settled` — the words that were not on screen yet when
+* the reader joined this reply.
+*
+* Every word, not just the arriving ones: react-markdown parses afresh on each
+* landing and React matches the children it already mounted by position, so a
+* wrapper that came and went would land where a bare text node used to be and
+* remount half the paragraph, replaying entrances that had long finished.
+* Wrapping the lot keeps every position fixed — a new word only ever appends —
+* and a word never gains the class it did not mount with, so nothing replays.
+*/
+function rehypeArriving(settled) {
+	return function attach() {
+		return (tree) => {
+			let word = 0;
+			tree.children = rebuild(tree.children, () => word++ >= settled);
+		};
+	};
+}
+// src/ds/components/MarkdownRenderer/blocks.ts
+var FENCE_OPEN = /^ {0,3}(`{3,}|~{3,})/;
+var FENCE_CLOSE = /^ {0,3}(`{3,}|~{3,})[ \t]*$/;
+var LIST_ITEM = /^ {0,3}(?:[-*+]|\d{1,9}[.)])(?:[ \t]|$)/;
+var INDENTED = /^(?:\t| {2,})/;
+var DEFINITION = /^ {0,3}\[[^\]]+\]:/;
+function fenceOpenedBy(line) {
+	return FENCE_OPEN.exec(line)?.[1];
+}
+function closesFence(line, marker) {
+	return FENCE_CLOSE.exec(line)?.[1]?.startsWith(marker) ?? false;
+}
+function startsBlock(line, inList) {
+	if (INDENTED.test(line)) return false;
+	return !(inList && LIST_ITEM.test(line));
+}
+/**
+* Cuts markdown into top-level blocks so a growing reply re-parses its last
+* block instead of all of them. Rejoining the result returns the input, and
+* every block renders as it would have inside the whole.
+*
+* Each rule only ever merges: over-merging costs a re-parse, while cutting a
+* construct in two changes what it renders as. Link reference and footnote
+* definitions resolve across blank lines, which no line-level rule can see, so
+* reaching one outside a fence abandons the split for the whole text.
+*/
+function splitBlocks(markdown) {
+	const lines = markdown.split("\n");
+	const starts = [0];
+	let fence;
+	let started = false;
+	let broken = false;
+	let inList = false;
+	for (const [index, line] of lines.entries()) {
+		if (fence) {
+			if (closesFence(line, fence)) fence = void 0;
+			continue;
+		}
+		if (line.trim() === "") {
+			broken = started;
+			continue;
+		}
+		if (DEFINITION.test(line)) return [markdown];
+		if (broken && startsBlock(line, inList)) {
+			starts.push(index);
+			started = false;
+		}
+		if (!started) inList = LIST_ITEM.test(line);
+		started = true;
+		broken = false;
+		fence = fenceOpenedBy(line);
+	}
+	return starts.map((start, position) => {
+		const end = starts[position + 1];
+		const block = lines.slice(start, end ?? lines.length).join("\n");
+		return end === void 0 ? block : `${block}\n`;
+	});
+}
+// src/ds/components/MarkdownRenderer/table-csv.ts
+function spreadsheetCell(value) {
+	const numeric = /^[+-]?(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?$/i.test(value.trim());
+	const formula = /^[\s\uFEFF]*[=+\-@＝＋－＠]/u.test(value);
+	return `"${(/^[\t\r\n]/.test(value) || formula && !numeric ? `'${value}` : value).replaceAll("\"", "\"\"")}"`;
+}
+function tableToCsv(rows) {
+	return rows.map((row) => row.map(spreadsheetCell).join(",")).join("\r\n");
+}
+function downloadTableCsv(csv) {
+	const blob = new Blob(["", csv], { type: "text/csv;charset=utf-8" });
+	const url = URL.createObjectURL(blob);
+	const anchor = document.createElement("a");
+	anchor.href = url;
+	anchor.download = "table.csv";
+	document.body.appendChild(anchor);
+	anchor.click();
+	anchor.remove();
+	URL.revokeObjectURL(url);
+}
+// src/ds/components/MarkdownRenderer/markdown-table.tsx
+function MarkdownTable({ node, children }) {
+	const markdown = node?.properties.tableMarkdown;
+	const csv = node?.properties.tableCsv;
+	const { isCopied, copyToClipboard } = require_hooks_use_copy_to_clipboard.useCopyToClipboard({ copyMessage: "Copied table markdown" });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "my-3 w-fit max-w-full min-w-0",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "flex justify-end",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_buttons_group.ButtonsGroup, {
+				size: "sm",
+				"aria-label": "Table actions",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Button.Button, {
+					type: "button",
+					variant: "ghost",
+					disabled: typeof markdown !== "string",
+					onClick: () => {
+						if (typeof markdown === "string") copyToClipboard(markdown);
+					},
+					"aria-label": "Copy table as markdown",
+					children: [isCopied ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CheckIcon, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CopyIcon, {}), isCopied ? "Copied!" : "Copy table as markdown"]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_dropdown_menu.DropdownMenu, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_dropdown_menu.DropdownMenu.Trigger, {
+					disabled: typeof csv !== "string",
+					render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+						type: "button",
+						size: "icon-sm",
+						variant: "ghost",
+						"aria-label": "More table options",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDownIcon, {})
+					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_dropdown_menu.DropdownMenu.Content, {
+					align: "end",
+					size: "sm",
+					className: "w-max min-w-0",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_dropdown_menu.DropdownMenu.Item, {
+						size: "sm",
+						onClick: () => {
+							if (typeof csv === "string") downloadTableCsv(csv);
+						},
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.DownloadIcon, {}), "Download CSV"]
+					})
+				})] })]
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "max-w-full overflow-x-auto",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("table", {
+				className: "table min-w-full",
+				children
+			})
+		})]
+	});
+}
+// src/ds/components/MarkdownRenderer/table-markdown.ts
+function cellText(node) {
+	if (node.type === "footnoteReference") return `[^${node.label ?? node.identifier}]`;
+	if ("value" in node) return node.value;
+	if (node.type === "image" || node.type === "imageReference") return node.alt ?? "";
+	return "children" in node ? node.children.map(cellText).join("") : "";
+}
+function walk(node, visit) {
+	visit(node);
+	if ("children" in node) node.children.forEach((child) => walk(child, visit));
+}
+var SERIALIZE_OPTIONS = { extensions: [(0, mdast_util_gfm.gfmToMarkdown)()] };
+/** Capture table exports before rehype replaces text with animation spans. */
+function remarkTableMarkdown() {
+	return (tree, file) => {
+		const source = String(file.value);
+		const definitions = /* @__PURE__ */ new Map();
+		const tables = [];
+		walk(tree, (node) => {
+			if (node.type === "definition" || node.type === "footnoteDefinition") {
+				const key = `${node.type}:${node.identifier}`;
+				if (!definitions.has(key)) definitions.set(key, node);
+			}
+			if (node.type === "table") tables.push(node);
+		});
+		const lines = source.split(/\r\n|\r|\n/);
+		for (const table of tables) {
+			const header = table.children[0];
+			if (!header?.position) continue;
+			const rows = table.children.map((row) => {
+				const start = row.position?.start.offset;
+				const end = row.position?.end.offset;
+				return start === void 0 || end === void 0 ? void 0 : source.slice(start, end);
+			});
+			if (!rows.every((row) => row !== void 0)) continue;
+			const delimiter = lines[header.position.start.line]?.replace(/^[\t >]*/, "");
+			if (delimiter === void 0) continue;
+			const markdown = [
+				rows[0],
+				delimiter,
+				...rows.slice(1)
+			];
+			const used = /* @__PURE__ */ new Set();
+			const collectReference = (node) => {
+				if (node.type === "linkReference" || node.type === "imageReference") used.add(`definition:${node.identifier}`);
+				else if (node.type === "footnoteReference") used.add(`footnoteDefinition:${node.identifier}`);
+			};
+			walk(table, collectReference);
+			for (const key of used) {
+				const definition = definitions.get(key);
+				if (!definition) continue;
+				markdown.push("", (0, mdast_util_to_markdown.toMarkdown)(definition, SERIALIZE_OPTIONS).trimEnd());
+				walk(definition, collectReference);
+			}
+			const cells = table.children.map((row) => Array.from({ length: header.children.length }, (_, index) => {
+				const cell = row.children[index];
+				return cell ? cellText(cell) : "";
+			}));
+			table.data = {
+				...table.data,
+				hProperties: {
+					...table.data?.hProperties,
+					tableMarkdown: markdown.join("\n"),
+					tableCsv: tableToCsv(cells)
+				}
+			};
+		}
+	};
+}
+// src/ds/components/MarkdownRenderer/use-settled.ts
+/**
+* How many of a reply's words have been on screen long enough that their entrance is over.
+*
+* The entrance plays on whatever mounts carrying the class, so it replays every time a
+* word's element is rebuilt — and markdown rebuilds a growing tail constantly: a `-`
+* turns a paragraph into a list item, a closing `**` splits it around a `<strong>`, the
+* stream ends and the mend comes off. Each of those swaps the element a settled word
+* lives in, which is what makes a word already read fade in again.
+*
+* Ageing them out is the whole answer: a word carries the class only while it is new,
+* so however often the tail is rebuilt, only what is genuinely arriving animates.
+*
+* What counts as new at mount is not this hook's call. A reply the reader was handed
+* is already there, and a block that mounts complete — a card's output, an expanded
+* body — enters with its container. Only a passage born streaming under the reader's
+* eyes is new from its first word: the reveal often lands several words in its first
+* commit, and they enter like every word after them.
+*/
+function useSettledWords(words, streaming) {
+	const watched = require_Arrival.useWatched();
+	const [settled, setSettled] = (0, react.useState)(() => watched && streaming ? 0 : words);
+	const landings = (0, react.useRef)([]);
+	const recorded = (0, react.useRef)(settled);
+	(0, react.useEffect)(() => {
+		if (recorded.current !== words) {
+			landings.current.push({
+				words,
+				at: performance.now()
+			});
+			recorded.current = words;
+		}
+		const waiting = landings.current[0];
+		if (!waiting) return;
+		const timer = setTimeout(() => {
+			landings.current.shift();
+			setSettled(waiting.words);
+		}, Math.max(0, waiting.at + 800 - performance.now()));
+		return () => clearTimeout(timer);
+	}, [settled, words]);
+	return Math.min(settled, words);
+}
+// src/ds/components/MarkdownRenderer/markdown-renderer.tsx
+/**
+* Renders a markdown string. Agent output can carry attacker-influenced text
+* (file contents, tool output, web pages): react-markdown escapes raw HTML and
+* drops dangerous link schemes, so nothing here reaches the DOM as markup.
+*
+* react-markdown re-parses on every render, and a streaming reply re-renders
+* its whole transcript on every delta. Memoizing spares the settled messages;
+* rendering block by block — streaming or not — spares every block of the live
+* one but the last, and lets a reply settle without remounting what is already
+* on screen.
+*
+* The text is drawn as given: pacing a stream is `useRevealedText`, and belongs to
+* whoever owns the whole of what is being laid down — a reply is prose, tool rows
+* and cards, and they have to arrive in the order they were written. Only what
+* lands after the reader joined plays an entrance, and only while it is still new:
+* a reply opened part-written is already there, and fading in what someone is
+* halfway through reading would be both a lie and a screenful of animations at
+* once.
+*/
+var MarkdownRenderer = (0, react.memo)(function MarkdownRenderer({ children, className, externalLinkTarget = "tab", streaming = false, tableActions = false, remarkPlugins: extraRemarkPlugins, components: extraComponents }) {
+	const shown = decodeEscapedNewlines(children);
+	const blocks = (0, react.useMemo)(() => splitBlocks(shown), [shown]);
+	const last = blocks.length - 1;
+	const baseComponents = (tableActions ? TABLE_COMPONENTS : DEFAULT_COMPONENTS)[externalLinkTarget];
+	const components = (0, react.useMemo)(() => extraComponents ? {
+		...baseComponents,
+		...extraComponents
+	} : baseComponents, [baseComponents, extraComponents]);
+	const spans = wordSpans(blocks);
+	const settled = useSettledWords(spans.at(-1)?.end ?? 0, streaming);
+	const settledWords = (span) => !span || settled >= span.end ? void 0 : Math.max(0, settled - span.start);
+	const tail = blocks[last] ?? "";
+	const mended = (0, react.useMemo)(() => streaming ? (0, remend.default)(tail, REMEND_OPTIONS) : tail, [streaming, tail]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_utils.cn("mastra-markdown", className),
+		children: blocks.map((block, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MarkdownBlock, {
+			content: index === last ? mended : block,
+			settledWords: settledWords(spans[index]),
+			components,
+			streaming,
+			tableActions,
+			extraRemarkPlugins
+		}, index))
+	});
+});
+/** Keyed by position at the call site: a content key remounts on every character. */
+var MarkdownBlock = (0, react.memo)(function MarkdownBlock({ components, content, settledWords, streaming, tableActions, extraRemarkPlugins }) {
+	const remarkPlugins = (0, react.useMemo)(() => {
+		const builtIn = tableActions && !streaming ? COPYABLE_REMARK_PLUGINS : REMARK_PLUGINS;
+		return extraRemarkPlugins ? [...builtIn, ...extraRemarkPlugins] : builtIn;
+	}, [
+		tableActions,
+		streaming,
+		extraRemarkPlugins
+	]);
+	const rehypePlugins = (0, react.useMemo)(() => settledWords === void 0 ? SETTLED : [rehypeArriving(settledWords)], [settledWords]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_markdown.default, {
+		remarkPlugins,
+		rehypePlugins,
+		components,
+		children: content
+	});
+});
+var SETTLED = [];
+/**
+* Where each block's words fall in the reply's own count, so one settled count covers
+* them all. Counting the source counts its markers too, so the boundary only ever errs
+* towards leaving a word unanimated.
+*/
+function wordSpans(blocks) {
+	let read = 0;
+	return blocks.map((block) => {
+		const span = {
+			start: read,
+			end: read + countWords(block)
+		};
+		read = span.end;
+		return span;
+	});
+}
+function countWords(text) {
+	return text.match(/\S+/g)?.length ?? 0;
+}
+function decodeEscapedNewlines(text) {
+	return text.includes("\n") ? text : text.replace(/\\n/g, "\n");
+}
+function languageOf(node) {
+	const classNames = node.properties.className;
+	if (!Array.isArray(classNames)) return void 0;
+	const language = classNames.find((entry) => typeof entry === "string" && entry.startsWith("language-"));
+	return typeof language === "string" ? language.slice(9) : void 0;
+}
+function fencedCode(node) {
+	const child = node?.children.find((entry) => entry.type === "element" && entry.tagName === "code");
+	if (child?.type !== "element") return void 0;
+	return {
+		code: child.children.map((entry) => entry.type === "text" ? entry.value : "").join("").replace(/\n$/, ""),
+		language: languageOf(child)
+	};
+}
+function MarkdownCodeBlock({ node, children, className }) {
+	const fenced = fencedCode(node);
+	if (!fenced) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
+		className,
+		children
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_CodeBlock.CodeBlock, {
+		code: fenced.code,
+		lang: fenced.language,
+		overflow: "scroll",
+		className: require_utils.cn("my-3 bg-sidebar", className),
+		copyMessage: "Copied code to clipboard"
+	});
+}
+var POPUP_WINDOW_FEATURES = "popup=yes,width=720,height=800,resizable=yes,scrollbars=yes";
+function isPlainLeftClick(event) {
+	return event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey;
+}
+function markdownLink(externalLinkTarget) {
+	return function MarkdownLink({ href, title, children }) {
+		const isExternal = /^https?:\/\//i.test(href ?? "");
+		const openInPopup = (event) => {
+			if (!isExternal || externalLinkTarget !== "window" || !isPlainLeftClick(event)) return;
+			const popup = window.open(href, "_blank", POPUP_WINDOW_FEATURES);
+			if (!popup) return;
+			popup.opener = null;
+			event.preventDefault();
+		};
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+			href,
+			title,
+			onClick: openInPopup,
+			target: isExternal ? "_blank" : void 0,
+			rel: isExternal ? "noopener noreferrer" : void 0,
+			children
+		});
+	};
+}
+var REMARK_PLUGINS = [remark_gfm.default];
+var COPYABLE_REMARK_PLUGINS = [remark_gfm.default, remarkTableMarkdown];
+var REMEND_OPTIONS = {
+	katex: false,
+	linkMode: "text-only"
+};
+var COMPONENTS = {
+	pre: MarkdownCodeBlock,
+	a: markdownLink("tab")
+};
+var WINDOW_COMPONENTS = {
+	...COMPONENTS,
+	a: markdownLink("window")
+};
+var DEFAULT_COMPONENTS = {
+	tab: COMPONENTS,
+	window: WINDOW_COMPONENTS
+};
+var TABLE_COMPONENTS = {
+	tab: {
+		...COMPONENTS,
+		table: MarkdownTable
+	},
+	window: {
+		...WINDOW_COMPONENTS,
+		table: MarkdownTable
+	}
+};
+Object.defineProperty(exports, "MarkdownRenderer", {
+	enumerable: true,
+	get: function() {
+		return MarkdownRenderer;
+	}
+});
+
+//# sourceMappingURL=MarkdownRenderer-CDwlvw0Y.cjs.map

package/dist/MarkdownRenderer-CDwlvw0Y.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownRenderer-CDwlvw0Y.cjs","names":["ARRIVING_CLASS","useCopyToClipboard","ButtonsGroup","Button","CheckIcon","CopyIcon","DropdownMenu","ChevronDownIcon","DownloadIcon","gfmToMarkdown","toMarkdown","useWatched","useState","useRef","memo","useMemo","cn","Markdown","CodeBlock","remarkGfm"],"sources":["../src/ds/components/MarkdownRenderer/arriving.ts","../src/ds/components/MarkdownRenderer/blocks.ts","../src/ds/components/MarkdownRenderer/table-csv.ts","../src/ds/components/MarkdownRenderer/markdown-table.tsx","../src/ds/components/MarkdownRenderer/table-markdown.ts","../src/ds/components/MarkdownRenderer/use-settled.ts","../src/ds/components/MarkdownRenderer/markdown-renderer.tsx"],"sourcesContent":["import type { ExtraProps } from 'react-markdown';\n\nimport { ARRIVING_CLASS } from '@/ds/tokens';\n\nimport '@/ds/components/Arrival/arrival.css';\n\ntype MarkdownElement = NonNullable<ExtraProps['node']>;\ntype MarkdownChild = MarkdownElement['children'][number];\n\n/** Fades whole: a fence renders through `CodeBlock`, and inline code carries a background. */\nconst UNBROKEN = new Set(['pre', 'code']);\n\nconst wrap = (value: string, arriving: boolean): MarkdownChild => ({\n  type: 'element',\n  tagName: 'span',\n  properties: arriving ? { className: [ARRIVING_CLASS] } : {},\n  children: [{ type: 'text', value }],\n});\n\nfunction markArriving(node: MarkdownElement): void {\n  const classes = node.properties.className;\n\n  node.properties.className = Array.isArray(classes) ? [...classes, ARRIVING_CLASS] : [ARRIVING_CLASS];\n}\n\nfunction rebuild(nodes: MarkdownChild[], arriving: () => boolean): MarkdownChild[] {\n  const out: MarkdownChild[] = [];\n\n  for (const node of nodes) {\n    if (node.type === 'text') {\n      for (const piece of node.value.match(/\\S+|\\s+/g) ?? []) {\n        if (/\\S/.test(piece)) out.push(wrap(piece, arriving()));\n        else out.push({ type: 'text', value: piece });\n      }\n\n      continue;\n    }\n\n    out.push(node);\n\n    if (node.type !== 'element') continue;\n\n    if (!UNBROKEN.has(node.tagName)) node.children = rebuild(node.children, arriving);\n    else if (arriving()) markArriving(node);\n  }\n\n  return out;\n}\n\n/**\n * Gives every word of a block an element of its own, and the entrance class to\n * those past the first `settled` — the words that were not on screen yet when\n * the reader joined this reply.\n *\n * Every word, not just the arriving ones: react-markdown parses afresh on each\n * landing and React matches the children it already mounted by position, so a\n * wrapper that came and went would land where a bare text node used to be and\n * remount half the paragraph, replaying entrances that had long finished.\n * Wrapping the lot keeps every position fixed — a new word only ever appends —\n * and a word never gains the class it did not mount with, so nothing replays.\n */\nexport function rehypeArriving(settled: number) {\n  return function attach() {\n    return (tree: { children: MarkdownChild[] }) => {\n      let word = 0;\n\n      tree.children = rebuild(tree.children, () => word++ >= settled);\n    };\n  };\n}\n","const FENCE_OPEN = /^ {0,3}(`{3,}|~{3,})/;\nconst FENCE_CLOSE = /^ {0,3}(`{3,}|~{3,})[ \\t]*$/;\nconst LIST_ITEM = /^ {0,3}(?:[-*+]|\\d{1,9}[.)])(?:[ \\t]|$)/;\nconst INDENTED = /^(?:\\t| {2,})/;\nconst DEFINITION = /^ {0,3}\\[[^\\]]+\\]:/;\n\nfunction fenceOpenedBy(line: string): string | undefined {\n  return FENCE_OPEN.exec(line)?.[1];\n}\n\n// Both are runs of one character, so `startsWith` is \"same marker, at least as long\".\nfunction closesFence(line: string, marker: string): boolean {\n  return FENCE_CLOSE.exec(line)?.[1]?.startsWith(marker) ?? false;\n}\n\nfunction startsBlock(line: string, inList: boolean): boolean {\n  if (INDENTED.test(line)) return false;\n\n  return !(inList && LIST_ITEM.test(line));\n}\n\n/**\n * Cuts markdown into top-level blocks so a growing reply re-parses its last\n * block instead of all of them. Rejoining the result returns the input, and\n * every block renders as it would have inside the whole.\n *\n * Each rule only ever merges: over-merging costs a re-parse, while cutting a\n * construct in two changes what it renders as. Link reference and footnote\n * definitions resolve across blank lines, which no line-level rule can see, so\n * reaching one outside a fence abandons the split for the whole text.\n */\nexport function splitBlocks(markdown: string): string[] {\n  const lines = markdown.split('\\n');\n  const starts = [0];\n  let fence: string | undefined;\n  let started = false;\n  let broken = false;\n  let inList = false;\n\n  for (const [index, line] of lines.entries()) {\n    if (fence) {\n      if (closesFence(line, fence)) fence = undefined;\n      continue;\n    }\n\n    if (line.trim() === '') {\n      broken = started;\n      continue;\n    }\n\n    if (DEFINITION.test(line)) return [markdown];\n\n    if (broken && startsBlock(line, inList)) {\n      starts.push(index);\n      started = false;\n    }\n\n    if (!started) inList = LIST_ITEM.test(line);\n\n    started = true;\n    broken = false;\n    fence = fenceOpenedBy(line);\n  }\n\n  return starts.map((start, position) => {\n    const end = starts[position + 1];\n    const block = lines.slice(start, end ?? lines.length).join('\\n');\n\n    return end === undefined ? block : `${block}\\n`;\n  });\n}\n","function spreadsheetCell(value: string): string {\n  // Quoting alone does not stop spreadsheet apps from evaluating formulas.\n  const numeric = /^[+-]?(?:\\d+(?:\\.\\d*)?|\\.\\d+)(?:e[+-]?\\d+)?$/i.test(value.trim());\n  const formula = /^[\\s\\uFEFF]*[=+\\-@＝＋－＠]/u.test(value);\n  const controlPrefix = /^[\\t\\r\\n]/.test(value);\n  const safe = controlPrefix || (formula && !numeric) ? `'${value}` : value;\n  return `\"${safe.replaceAll('\"', '\"\"')}\"`;\n}\n\nexport function tableToCsv(rows: string[][]): string {\n  return rows.map(row => row.map(spreadsheetCell).join(',')).join('\\r\\n');\n}\n\nexport function downloadTableCsv(csv: string): void {\n  const blob = new Blob(['\\uFEFF', csv], { type: 'text/csv;charset=utf-8' });\n  const url = URL.createObjectURL(blob);\n  const anchor = document.createElement('a');\n  anchor.href = url;\n  anchor.download = 'table.csv';\n  document.body.appendChild(anchor);\n  anchor.click();\n  anchor.remove();\n  URL.revokeObjectURL(url);\n}\n","import { CheckIcon, ChevronDownIcon, CopyIcon, DownloadIcon } from 'lucide-react';\nimport type { ComponentProps } from 'react';\nimport type { ExtraProps } from 'react-markdown';\nimport { downloadTableCsv } from './table-csv';\nimport { Button } from '@/ds/components/Button';\nimport { ButtonsGroup } from '@/ds/components/ButtonsGroup';\nimport { DropdownMenu } from '@/ds/components/DropdownMenu';\nimport { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard';\n\nexport function MarkdownTable({ node, children }: ComponentProps<'table'> & ExtraProps) {\n  const markdown = node?.properties.tableMarkdown;\n  const csv = node?.properties.tableCsv;\n  const { isCopied, copyToClipboard } = useCopyToClipboard({ copyMessage: 'Copied table markdown' });\n\n  return (\n    <div className=\"my-3 w-fit max-w-full min-w-0\">\n      <div className=\"flex justify-end\">\n        <ButtonsGroup size=\"sm\" aria-label=\"Table actions\">\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            disabled={typeof markdown !== 'string'}\n            onClick={() => {\n              if (typeof markdown === 'string') copyToClipboard(markdown);\n            }}\n            aria-label=\"Copy table as markdown\"\n          >\n            {isCopied ? <CheckIcon /> : <CopyIcon />}\n            {isCopied ? 'Copied!' : 'Copy table as markdown'}\n          </Button>\n          <DropdownMenu>\n            <DropdownMenu.Trigger\n              disabled={typeof csv !== 'string'}\n              render={\n                <Button type=\"button\" size=\"icon-sm\" variant=\"ghost\" aria-label=\"More table options\">\n                  <ChevronDownIcon />\n                </Button>\n              }\n            />\n            <DropdownMenu.Content align=\"end\" size=\"sm\" className=\"w-max min-w-0\">\n              <DropdownMenu.Item\n                size=\"sm\"\n                onClick={() => {\n                  if (typeof csv === 'string') downloadTableCsv(csv);\n                }}\n              >\n                <DownloadIcon />\n                Download CSV\n              </DropdownMenu.Item>\n            </DropdownMenu.Content>\n          </DropdownMenu>\n        </ButtonsGroup>\n      </div>\n      <div className=\"max-w-full overflow-x-auto\">\n        <table className=\"table min-w-full\">{children}</table>\n      </div>\n    </div>\n  );\n}\n","import type { Definition, FootnoteDefinition, Nodes, Root, Table } from 'mdast';\nimport { gfmToMarkdown } from 'mdast-util-gfm';\nimport { toMarkdown } from 'mdast-util-to-markdown';\nimport { tableToCsv } from './table-csv';\n\nfunction cellText(node: Nodes): string {\n  if (node.type === 'footnoteReference') return `[^${node.label ?? node.identifier}]`;\n  if ('value' in node) return node.value;\n  if (node.type === 'image' || node.type === 'imageReference') return node.alt ?? '';\n  return 'children' in node ? node.children.map(cellText).join('') : '';\n}\n\nfunction walk(node: Nodes, visit: (node: Nodes) => void): void {\n  visit(node);\n  if ('children' in node) node.children.forEach(child => walk(child, visit));\n}\n\nconst SERIALIZE_OPTIONS = { extensions: [gfmToMarkdown()] };\n\n/** Capture table exports before rehype replaces text with animation spans. */\nexport function remarkTableMarkdown() {\n  return (tree: Root, file: { value: unknown }) => {\n    const source = String(file.value);\n    const definitions = new Map<string, Definition | FootnoteDefinition>();\n    const tables: Table[] = [];\n    walk(tree, node => {\n      if (node.type === 'definition' || node.type === 'footnoteDefinition') {\n        const key = `${node.type}:${node.identifier}`;\n        if (!definitions.has(key)) definitions.set(key, node);\n      }\n      if (node.type === 'table') tables.push(node);\n    });\n\n    const lines = source.split(/\\r\\n|\\r|\\n/);\n    for (const table of tables) {\n      const header = table.children[0];\n      if (!header?.position) continue;\n      const rows = table.children.map(row => {\n        const start = row.position?.start.offset;\n        const end = row.position?.end.offset;\n        return start === undefined || end === undefined ? undefined : source.slice(start, end);\n      });\n      // Only offer exports when the parser supplied the original row locations.\n      if (!rows.every(row => row !== undefined)) continue;\n      // Row positions exclude list/blockquote prefixes. The delimiter has no AST node.\n      const delimiter = lines[header.position.start.line]?.replace(/^[\\t >]*/, '');\n      if (delimiter === undefined) continue;\n      const markdown = [rows[0], delimiter, ...rows.slice(1)];\n      const used = new Set<string>();\n      const collectReference = (node: Nodes) => {\n        if (node.type === 'linkReference' || node.type === 'imageReference') {\n          used.add(`definition:${node.identifier}`);\n        } else if (node.type === 'footnoteReference') {\n          used.add(`footnoteDefinition:${node.identifier}`);\n        }\n      };\n      walk(table, collectReference);\n      // Visiting appended definitions also collects links/footnotes they depend on.\n      // The set prevents duplicates and cycles, including self-referencing footnotes.\n      for (const key of used) {\n        const definition = definitions.get(key);\n        if (!definition) continue;\n        markdown.push('', toMarkdown(definition, SERIALIZE_OPTIONS).trimEnd());\n        walk(definition, collectReference);\n      }\n      const cells = table.children.map(row =>\n        Array.from({ length: header.children.length }, (_, index) => {\n          const cell = row.children[index];\n          return cell ? cellText(cell) : '';\n        }),\n      );\n      table.data = {\n        ...table.data,\n        hProperties: {\n          ...table.data?.hProperties,\n          tableMarkdown: markdown.join('\\n'),\n          tableCsv: tableToCsv(cells),\n        },\n      };\n    }\n  };\n}\n","import { useEffect, useRef, useState } from 'react';\n\nimport { useWatched } from '@/ds/components/Arrival';\nimport { ARRIVING_MS } from '@/ds/tokens';\n\ninterface Landing {\n  words: number;\n  at: number;\n}\n\n/**\n * How many of a reply's words have been on screen long enough that their entrance is over.\n *\n * The entrance plays on whatever mounts carrying the class, so it replays every time a\n * word's element is rebuilt — and markdown rebuilds a growing tail constantly: a `-`\n * turns a paragraph into a list item, a closing `**` splits it around a `<strong>`, the\n * stream ends and the mend comes off. Each of those swaps the element a settled word\n * lives in, which is what makes a word already read fade in again.\n *\n * Ageing them out is the whole answer: a word carries the class only while it is new,\n * so however often the tail is rebuilt, only what is genuinely arriving animates.\n *\n * What counts as new at mount is not this hook's call. A reply the reader was handed\n * is already there, and a block that mounts complete — a card's output, an expanded\n * body — enters with its container. Only a passage born streaming under the reader's\n * eyes is new from its first word: the reveal often lands several words in its first\n * commit, and they enter like every word after them.\n */\nexport function useSettledWords(words: number, streaming: boolean): number {\n  const watched = useWatched();\n  const [settled, setSettled] = useState(() => (watched && streaming ? 0 : words));\n  const landings = useRef<Landing[]>([]);\n  const recorded = useRef(settled);\n\n  useEffect(() => {\n    if (recorded.current !== words) {\n      landings.current.push({ words, at: performance.now() });\n      recorded.current = words;\n    }\n\n    const waiting = landings.current[0];\n    if (!waiting) return;\n\n    const timer = setTimeout(\n      () => {\n        landings.current.shift();\n        setSettled(waiting.words);\n      },\n      Math.max(0, waiting.at + ARRIVING_MS - performance.now()),\n    );\n\n    return () => clearTimeout(timer);\n  }, [settled, words]);\n\n  // A shorter reply replacing the one on screen settles at once: nothing of it is new.\n  return Math.min(settled, words);\n}\n","import { memo, useMemo } from 'react';\nimport type { MouseEvent, MouseEventHandler, ReactNode } from 'react';\nimport Markdown from 'react-markdown';\nimport type { Components, ExtraProps, Options } from 'react-markdown';\nimport remarkGfm from 'remark-gfm';\nimport remend from 'remend';\n\nimport { rehypeArriving } from './arriving';\nimport { splitBlocks } from './blocks';\nimport { MarkdownTable } from './markdown-table';\nimport { remarkTableMarkdown } from './table-markdown';\nimport { useSettledWords } from './use-settled';\nimport { CodeBlock } from '@/ds/components/CodeBlock';\nimport { cn } from '@/lib/utils';\n\nimport './markdown-renderer.css';\n\nexport type MarkdownExternalLinkTarget = 'tab' | 'window';\n\ntype RemarkPlugins = NonNullable<Options['remarkPlugins']>;\n\nexport interface MarkdownRendererProps {\n  children: string;\n  className?: string;\n  externalLinkTarget?: MarkdownExternalLinkTarget;\n  /** The text is a prefix of one still being written: close the markers the stream has not reached. */\n  streaming?: boolean;\n  /** Opt in to table copy/download controls; disabled while this text is streaming. */\n  tableActions?: boolean;\n  /** Remark plugins run after the built-in ones, e.g. to turn a syntax of the host's into elements. Keep it stable. */\n  remarkPlugins?: RemarkPlugins;\n  /** Element overrides merged over the built-in ones. Keep it stable: a new object re-renders every block. */\n  components?: Components;\n}\n\n/**\n * Renders a markdown string. Agent output can carry attacker-influenced text\n * (file contents, tool output, web pages): react-markdown escapes raw HTML and\n * drops dangerous link schemes, so nothing here reaches the DOM as markup.\n *\n * react-markdown re-parses on every render, and a streaming reply re-renders\n * its whole transcript on every delta. Memoizing spares the settled messages;\n * rendering block by block — streaming or not — spares every block of the live\n * one but the last, and lets a reply settle without remounting what is already\n * on screen.\n *\n * The text is drawn as given: pacing a stream is `useRevealedText`, and belongs to\n * whoever owns the whole of what is being laid down — a reply is prose, tool rows\n * and cards, and they have to arrive in the order they were written. Only what\n * lands after the reader joined plays an entrance, and only while it is still new:\n * a reply opened part-written is already there, and fading in what someone is\n * halfway through reading would be both a lie and a screenful of animations at\n * once.\n */\nexport const MarkdownRenderer = memo(function MarkdownRenderer({\n  children,\n  className,\n  externalLinkTarget = 'tab',\n  streaming = false,\n  tableActions = false,\n  remarkPlugins: extraRemarkPlugins,\n  components: extraComponents,\n}: MarkdownRendererProps) {\n  const shown = decodeEscapedNewlines(children);\n  const blocks = useMemo(() => splitBlocks(shown), [shown]);\n  const last = blocks.length - 1;\n  const baseComponents = (tableActions ? TABLE_COMPONENTS : DEFAULT_COMPONENTS)[externalLinkTarget];\n  const components = useMemo(\n    () => (extraComponents ? { ...baseComponents, ...extraComponents } : baseComponents),\n    [baseComponents, extraComponents],\n  );\n\n  const spans = wordSpans(blocks);\n  const settled = useSettledWords(spans.at(-1)?.end ?? 0, streaming);\n\n  // A block whose words have all finished their entrance has nothing left to play,\n  // which is what `undefined` says: leave it as plain text, no spans at all.\n  const settledWords = (span: WordSpan | undefined): number | undefined =>\n    !span || settled >= span.end ? undefined : Math.max(0, settled - span.start);\n\n  const tail = blocks[last] ?? '';\n  const mended = useMemo(() => (streaming ? remend(tail, REMEND_OPTIONS) : tail), [streaming, tail]);\n\n  return (\n    <div className={cn('mastra-markdown', className)}>\n      {blocks.map((block, index) => (\n        <MarkdownBlock\n          key={index}\n          content={index === last ? mended : block}\n          settledWords={settledWords(spans[index])}\n          components={components}\n          streaming={streaming}\n          tableActions={tableActions}\n          extraRemarkPlugins={extraRemarkPlugins}\n        />\n      ))}\n    </div>\n  );\n});\n\n/** Keyed by position at the call site: a content key remounts on every character. */\nconst MarkdownBlock = memo(function MarkdownBlock({\n  components,\n  content,\n  settledWords,\n  streaming,\n  tableActions,\n  extraRemarkPlugins,\n}: {\n  components: Components;\n  content: string;\n  settledWords?: number;\n  streaming: boolean;\n  tableActions: boolean;\n  extraRemarkPlugins?: RemarkPlugins;\n}) {\n  const remarkPlugins = useMemo(() => {\n    const builtIn = tableActions && !streaming ? COPYABLE_REMARK_PLUGINS : REMARK_PLUGINS;\n    return extraRemarkPlugins ? [...builtIn, ...extraRemarkPlugins] : builtIn;\n  }, [tableActions, streaming, extraRemarkPlugins]);\n  const rehypePlugins = useMemo(\n    () => (settledWords === undefined ? SETTLED : [rehypeArriving(settledWords)]),\n    [settledWords],\n  );\n\n  return (\n    <Markdown remarkPlugins={remarkPlugins} rehypePlugins={rehypePlugins} components={components}>\n      {content}\n    </Markdown>\n  );\n});\n\nconst SETTLED: Options['rehypePlugins'] = [];\n\ninterface WordSpan {\n  start: number;\n  end: number;\n}\n\n/**\n * Where each block's words fall in the reply's own count, so one settled count covers\n * them all. Counting the source counts its markers too, so the boundary only ever errs\n * towards leaving a word unanimated.\n */\nfunction wordSpans(blocks: string[]): WordSpan[] {\n  let read = 0;\n\n  return blocks.map(block => {\n    const span = { start: read, end: read + countWords(block) };\n    read = span.end;\n\n    return span;\n  });\n}\n\nfunction countWords(text: string): number {\n  return text.match(/\\S+/g)?.length ?? 0;\n}\n\n// Agent networks emit their text with literal `\\n`. Only unescape when the text\n// has no real newline, otherwise a `\"a\\nb\"` inside a code fence gets shredded.\nfunction decodeEscapedNewlines(text: string): string {\n  return text.includes('\\n') ? text : text.replace(/\\\\n/g, '\\n');\n}\n\ntype MarkdownNode = NonNullable<ExtraProps['node']>;\n\nfunction languageOf(node: MarkdownNode): string | undefined {\n  const classNames = node.properties.className;\n  if (!Array.isArray(classNames)) return undefined;\n\n  const language = classNames.find(entry => typeof entry === 'string' && entry.startsWith('language-'));\n  return typeof language === 'string' ? language.slice('language-'.length) : undefined;\n}\n\nfunction fencedCode(node: MarkdownNode | undefined): { code: string; language?: string } | undefined {\n  const child = node?.children.find(entry => entry.type === 'element' && entry.tagName === 'code');\n  if (child?.type !== 'element') return undefined;\n\n  const code = child.children.map(entry => (entry.type === 'text' ? entry.value : '')).join('');\n  return { code: code.replace(/\\n$/, ''), language: languageOf(child) };\n}\n\nfunction MarkdownCodeBlock({\n  node,\n  children,\n  className,\n}: {\n  node?: MarkdownNode;\n  children?: ReactNode;\n  className?: string;\n}) {\n  const fenced = fencedCode(node);\n  if (!fenced) return <pre className={className}>{children}</pre>;\n\n  return (\n    <CodeBlock\n      code={fenced.code}\n      lang={fenced.language}\n      overflow=\"scroll\"\n      className={cn('my-3 bg-sidebar', className)}\n      copyMessage=\"Copied code to clipboard\"\n    />\n  );\n}\n\nconst POPUP_WINDOW_FEATURES = 'popup=yes,width=720,height=800,resizable=yes,scrollbars=yes';\n\nfunction isPlainLeftClick(event: MouseEvent): boolean {\n  return event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey;\n}\n\nfunction markdownLink(externalLinkTarget: MarkdownExternalLinkTarget): NonNullable<Components['a']> {\n  return function MarkdownLink({ href, title, children }) {\n    const isExternal = /^https?:\\/\\//i.test(href ?? '');\n\n    const openInPopup: MouseEventHandler<HTMLAnchorElement> = event => {\n      if (!isExternal || externalLinkTarget !== 'window' || !isPlainLeftClick(event)) return;\n\n      const popup = window.open(href, '_blank', POPUP_WINDOW_FEATURES);\n      if (!popup) return;\n\n      popup.opener = null;\n      event.preventDefault();\n    };\n\n    return (\n      <a\n        href={href}\n        title={title}\n        onClick={openInPopup}\n        target={isExternal ? '_blank' : undefined}\n        rel={isExternal ? 'noopener noreferrer' : undefined}\n      >\n        {children}\n      </a>\n    );\n  };\n}\n\nconst REMARK_PLUGINS = [remarkGfm];\nconst COPYABLE_REMARK_PLUGINS = [remarkGfm, remarkTableMarkdown];\n\n// Links stay text until their URL lands: remend's placeholder href would render\n// a live anchor to nowhere. No math is rendered here, so pairing `$$` would only\n// turn one literal into another.\nconst REMEND_OPTIONS = { katex: false, linkMode: 'text-only' } as const;\n\n// Elements are listed one by one: react-markdown also passes its `node`, which\n// React would forward to the DOM as a stray attribute. Everything else is\n// styled from markdown-renderer.css.\nconst COMPONENTS: Components = {\n  pre: MarkdownCodeBlock,\n  a: markdownLink('tab'),\n};\n\nconst WINDOW_COMPONENTS: Components = {\n  ...COMPONENTS,\n  a: markdownLink('window'),\n};\n\nconst DEFAULT_COMPONENTS = { tab: COMPONENTS, window: WINDOW_COMPONENTS };\nconst TABLE_COMPONENTS = {\n  tab: { ...COMPONENTS, table: MarkdownTable },\n  window: { ...WINDOW_COMPONENTS, table: MarkdownTable },\n};\n"],"mappings":"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"}

package/dist/MarkdownRenderer.css

@@ -158,20 +158,91 @@
     width: max-content;
     max-width: 100%;
     margin: 0.9em 0;
-    border-collapse: collapse;
-    font-size: 0.95em;
+    border-collapse: separate;
+    border-spacing: 0;
+    font-size: var(--text-body-sm);
+    line-height: var(--text-body-sm--line-height);
   }
 
   .mastra-markdown :is(th, td) {
-    border: 1px solid var(--border);
-    padding: 0.4em 0.7em;
+    border: 0;
+    padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 3);
     text-align: left;
+    vertical-align: top;
   }
 
   .mastra-markdown th {
-    background: var(--fill-subtle);
+    background: var(--fill);
     color: var(--foreground);
-    font-weight: 500;
+    font-size: var(--text-column);
+    font-weight: var(--text-column--font-weight);
+  }
+
+  /* Keep the first row's rounded hover fill clear of the highlighted header. */
+  .mastra-markdown thead::after {
+    content: '';
+    display: table-row;
+    height: 1px;
+  }
+
+  .mastra-markdown :is(th, td):first-child {
+    border-top-left-radius: var(--radius-md);
+    border-bottom-left-radius: var(--radius-md);
+  }
+
+  .mastra-markdown :is(th, td):last-child {
+    border-top-right-radius: var(--radius-md);
+    border-bottom-right-radius: var(--radius-md);
+  }
+
+  /* Cell segments join into a straight divider. Only its outside ends fade,
+   * matching MetricsTable without introducing seams between columns. */
+  .mastra-markdown tbody tr:not(:last-child) td {
+    position: relative;
+  }
+
+  .mastra-markdown tbody tr:not(:last-child) td::after {
+    content: '';
+    position: absolute;
+    inset-inline: 0;
+    bottom: 0;
+    border-bottom: 1px solid var(--border);
+    pointer-events: none;
+    mask-image: linear-gradient(
+      to right,
+      transparent,
+      black var(--markdown-table-divider-start, 0px),
+      black calc(100% - var(--markdown-table-divider-end, 0px)),
+      transparent
+    );
+  }
+
+  .mastra-markdown tbody tr:not(:last-child) td:first-child::after {
+    --markdown-table-divider-start: calc(var(--spacing) * 1.5);
+  }
+
+  .mastra-markdown tbody tr:not(:last-child) td:last-child::after {
+    --markdown-table-divider-end: calc(var(--spacing) * 1.5);
+  }
+
+  @media (hover: hover) {
+    .mastra-markdown tbody tr:hover td {
+      background: var(--fill-subtle);
+    }
+
+    .mastra-markdown tbody tr:hover td::after,
+    .mastra-markdown tbody tr:has(+ tr:hover) td::after {
+      opacity: 0;
+    }
+  }
+
+  .mastra-markdown tbody tr:focus-within td {
+    background: var(--fill-subtle);
+  }
+
+  .mastra-markdown tbody tr:focus-within td::after,
+  .mastra-markdown tbody tr:has(+ tr:focus-within) td::after {
+    opacity: 0;
   }
 
   .mastra-markdown img {