svelte-streamdown 2.5.0 → 2.5.2

package/dist/Elements/Mermaid.svelte

@@ -5,13 +5,16 @@
 	import type { MermaidConfig } from 'mermaid';
 	import { on } from 'svelte/events';
 	import { usePanzoom } from '../utils/panzoom.svelte';
+	import { fitViewIcon, fullscreenIcon, zoomInIcon, zoomOutIcon } from './icons.js';
 
 	const streamdown = useStreamdown();
 
 	const {
-		token
+		token,
+		id
 	}: {
 		token: Tokens.Code;
+		id: string;
 	} = $props();
 
 	let mermaid = $state<any>(null);
@@ -154,6 +157,7 @@
 	const renderMermaid = async (code: string, element: HTMLElement) => {
 		try {
 			// Sanitize the code first
+			const sanitizedCode = sanitizeMermaidCode(code);
 
 			// Default configuration
 			const defaultConfig: MermaidConfig = {
@@ -172,8 +176,7 @@
 			};
 
 			// Initialize mermaid with merged config
-			const mergedConfig = { ...defaultConfig };
-			mermaid.initialize(mergedConfig);
+			mermaid.initialize(defaultConfig);
 
 			const chartHash = code.split('').reduce((acc, char) => {
 				return ((acc << 5) - acc + char.charCodeAt(0)) | 0;
@@ -182,25 +185,33 @@
 			const uniqueId = `mermaid-${Math.abs(chartHash)}-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
 
 			// Render the diagram
-			const { svg: svgString } = await mermaid.render(uniqueId, sanitizeMermaidCode(code));
-			const svg = new DOMParser().parseFromString(svgString, 'image/svg+xml').documentElement;
-
-			const svgTarget = element.querySelector('[data-mermaid-svg]')!;
-			svg.id = uniqueId;
-			Array.from(svg.attributes).forEach((attribute) => {
-				svgTarget.setAttribute(attribute.name, attribute.value);
-			});
-			svgTarget.innerHTML = svg.innerHTML;
-
-			panzoom.zoomToFit();
-			panzoom.zoomToFit();
+			const { svg: svgString } = await mermaid.render(uniqueId, sanitizedCode);
+
+			// Insert the SVG into the target element
+			const svgTarget = element.querySelector('[data-mermaid-svg]') as SVGElement;
+			if (svgTarget) {
+				svgTarget.innerHTML = svgString;
+				svgTarget.id = uniqueId;
+
+				// Apply any additional attributes from the rendered SVG
+				const tempSvg = new DOMParser().parseFromString(svgString, 'image/svg+xml').documentElement;
+				Array.from(tempSvg.attributes).forEach((attribute) => {
+					if (attribute.name !== 'id') {
+						svgTarget.setAttribute(attribute.name, attribute.value);
+					}
+				});
+
+				panzoom.zoomToFit();
+				panzoom.zoomToFit();
+			}
 		} catch (err) {
-			const sanitizedCode = sanitizeMermaidCode(code);
+			console.warn('Mermaid rendering error:', err);
+			// Could show error state in UI here
 		}
 	};
 </script>
 
-<div>
+<div data-streamdown-mermaid={id}>
 	{#if mermaid}
 		<div
 			style={streamdown.isMounted ? streamdown.animationBlockStyle : ''}
@@ -251,79 +262,6 @@
 		<div class={streamdown.theme.mermaid.base}></div>
 	{/if}
 </div>
-{#snippet zoomInIcon()}
-	<svg
-		class={streamdown.theme.mermaid.icon}
-		xmlns="http://www.w3.org/2000/svg"
-		width="100%"
-		height="100%"
-		viewBox="0 0 24 24"
-		fill="none"
-		stroke="currentColor"
-		stroke-width="2"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-	>
-		<circle cx="11" cy="11" r="8" /><line x1="21" x2="16.65" y1="21" y2="16.65" />
-		<line x1="11" x2="11" y1="8" y2="14" />
-		<line x1="8" x2="14" y1="11" y2="11" />
-	</svg>
-{/snippet}
-
-{#snippet zoomOutIcon()}
-	<svg
-		class={streamdown.theme.mermaid.icon}
-		xmlns="http://www.w3.org/2000/svg"
-		width="100%"
-		height="100%"
-		viewBox="0 0 24 24"
-		fill="none"
-		stroke="currentColor"
-		stroke-width="2"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-	>
-		<circle cx="11" cy="11" r="8" /><line x1="21" x2="16.65" y1="21" y2="16.65" /><line
-			x1="8"
-			x2="14"
-			y1="11"
-			y2="11"
-		/>
-	</svg>
-{/snippet}
-
-{#snippet fitViewIcon()}
-	<svg
-		class={streamdown.theme.mermaid.icon}
-		xmlns="http://www.w3.org/2000/svg"
-		viewBox="0 0 24 24"
-		fill="none"
-		stroke="currentColor"
-		stroke-width="2"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-	>
-		<path d="M3 7V5a2 2 0 0 1 2-2h2" />
-		<path d="M17 3h2a2 2 0 0 1 2 2v2" /><path d="M21 17v2a2 2 0 0 1-2 2h-2" />
-		<path d="M7 21H5a2 2 0 0 1-2-2v-2" /><rect width="10" height="8" x="7" y="8" rx="1" />
-	</svg>
-{/snippet}
-
-{#snippet fullscreenIcon()}
-	<svg
-		class={streamdown.theme.mermaid.icon}
-		xmlns="http://www.w3.org/2000/svg"
-		viewBox="0 0 24 24"
-		fill="none"
-		stroke="currentColor"
-		stroke-width="2"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-	>
-		<path d="m15 15 6 6" /><path d="m15 9 6-6" /><path d="M21 16v5h-5" /><path d="M21 8V3h-5" />
-		<path d="M3 16v5h5" /><path d="m3 21 6-6" /><path d="M3 8V3h5" /><path d="M9 9 3 3" />
-	</svg>
-{/snippet}
 
 <style>
 	:global([data-expanded='true']) {
@@ -335,4 +273,13 @@
 		z-index: 2147483647;
 		margin: 0px;
 	}
+
+	/* Hide Mermaid's temporary rendering containers */
+	:global(div[id^='dmermaid-']) {
+		position: absolute !important;
+		left: -9999px !important;
+		top: -9999px !important;
+		visibility: hidden !important;
+		pointer-events: none !important;
+	}
 </style>

package/dist/Elements/Mermaid.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { Tokens } from 'marked';
 type $$ComponentProps = {
     token: Tokens.Code;
+    id: string;
 };
 declare const Mermaid: import("svelte").Component<$$ComponentProps, {}, "">;
 type Mermaid = ReturnType<typeof Mermaid>;

package/dist/Elements/TableDownload.svelte

@@ -0,0 +1,216 @@
+<script lang="ts">
+	import { useStreamdown } from '../context.svelte.js';
+	import { scale } from 'svelte/transition';
+	import { checkIcon, copyIcon, downloadIcon } from './icons.js';
+	import { Popover } from './popover.svelte.js';
+	import { useClickOutside } from '../utils/useClickOutside.svelte.js';
+	import { useKeyDown } from '../utils/useKeyDown.svelte.js';
+	import type { TableToken } from '../marked/marked-table.js';
+	import { useCopy } from '../utils/copy.svelte.js';
+	import { save } from '../utils/save.js';
+
+	let {
+		token,
+		id
+	}: {
+		token: TableToken;
+		id: string;
+	} = $props();
+	const streamdown = useStreamdown();
+	const popover = new Popover();
+	let modeState = $state<'download' | 'copy'>('download');
+
+	useKeyDown({
+		keys: ['Escape'],
+		get isActive() {
+			return popover.isOpen;
+		},
+		callback: () => {
+			popover.isOpen = false;
+		}
+	});
+	const clickOutside = useClickOutside({
+		get isActive() {
+			return popover.isOpen;
+		},
+		callback: () => {
+			popover.isOpen = false;
+		}
+	});
+
+	let copyValue = $state(token.raw);
+
+	const copy = useCopy({
+		get content() {
+			return copyValue;
+		}
+	});
+
+	const copyOrDownload = (type: 'Markdown' | 'HTML' | 'CSV') => {
+		if (type === 'Markdown') {
+			copyValue = token.raw;
+			if (modeState === 'copy') {
+				copy.copy();
+			} else {
+				save('table.md', copyValue, 'text/markdown');
+			}
+		} else if (type === 'HTML') {
+			const table = document.querySelector(`[data-streamdown-table=${id}]`);
+
+			if (table) {
+				let html = (table.cloneNode(true) as HTMLElement).outerHTML;
+				// remove comments
+				html = html.replace(/<!--[\s\S]*?-->/g, '');
+				copyValue = html;
+				// Remove class and style attributes
+				html = html.replace(/class="[^"]*"/g, '');
+				html = html.replace(/style="[^"]*"/g, '');
+				// remove space between the tag name and the closing chrevron like <table  > -> <table> for every tagnmae
+				html = html.replace(/<([^>]+)>\s+</g, '<$1><');
+				// Remove spaces before closing bracket >
+				html = html.replace(/\s+>/g, '>');
+				// Remove spaces after opening bracket <
+				html = html.replace(/<\s+/g, '<');
+				// Collapse multiple spaces within tags to single space
+				html = html.replace(/<([^>]+)>/g, (match) => match.replace(/\s+/g, ' '));
+
+				copyValue = html;
+
+				if (modeState === 'copy') {
+					copy.copy();
+				} else {
+					save('table.html', copyValue, 'text/html');
+				}
+			}
+		} else if (type === 'CSV') {
+			const table = document.querySelector(`[data-streamdown-table=${id}]`);
+
+			if (table) {
+				const rows = table.querySelectorAll('tr');
+				const rowSpanFills: Array<{ rowIndex: number; colIndex: number; colSpan: number }> = [];
+
+				const matrix = Array.from(rows).reduce((acc, row, rowIndex) => {
+					const cells = row.querySelectorAll('td, th');
+					const rowData: string[] = [];
+					let actualCol = 0; // Track actual column position in the output matrix
+
+					Array.from(cells).forEach((cell) => {
+						const colSpan = parseInt(cell.getAttribute('colspan') || '1');
+						const rowSpan = parseInt(cell.getAttribute('rowspan') || '1');
+
+						// Add the cell content
+						// Add the cell content, quoting if it contains commas, quotes, or newlines
+						const content = cell.textContent || '';
+						const needsQuoting = /[,"\n]/.test(content);
+						const escapedContent = content.replace(/"/g, '""');
+						rowData.push(needsQuoting ? `"${escapedContent}"` : content);
+
+						// Add empty cells for colspan
+						for (let i = 0; i < colSpan - 1; i++) {
+							rowData.push('');
+						}
+
+						// Track rowspan fills needed in future rows
+						if (rowSpan > 1) {
+							for (let r = 1; r < rowSpan; r++) {
+								rowSpanFills.push({
+									rowIndex: rowIndex + r,
+									colIndex: actualCol,
+									colSpan: colSpan
+								});
+							}
+						}
+
+						actualCol += colSpan;
+					});
+
+					acc.push(rowData);
+					return acc;
+				}, [] as string[][]);
+
+				// Process rowspan fills - insert empty cells at correct positions
+				rowSpanFills.forEach(({ rowIndex, colIndex, colSpan }) => {
+					if (matrix[rowIndex]) {
+						matrix[rowIndex].splice(colIndex, 0, ...Array(colSpan).fill(''));
+					}
+				});
+
+				const csv = matrix.map((row) => row.join(',')).join('\n');
+				copyValue = csv;
+				if (modeState === 'copy') {
+					copy.copy();
+				} else {
+					save('table.csv', copyValue, 'text/csv');
+				}
+			}
+		}
+		popover.isOpen = false;
+	};
+</script>
+
+{#if popover.isOpen}
+	<dialog
+		id={'table-download-popover'}
+		aria-modal="false"
+		transition:scale|global={{ start: 0.95, duration: 100 }}
+		{@attach clickOutside.attachment}
+		{@attach popover.popoverAttachment}
+		open
+		style:width="fit-content !important"
+		style:min-width="fit-content !important"
+		class={streamdown.theme.components.popover}
+	>
+		{#each ['Markdown', 'HTML', 'CSV'] as type}
+			<button
+				style="width: 100%; text-align: left; justify-content: flex-start; padding: 1rem 1rem; margin: 0.2rem 0;"
+				onclick={() => copyOrDownload(type as 'Markdown' | 'HTML' | 'CSV')}
+				class={streamdown.theme.components.button}
+			>
+				{type}
+			</button>
+		{/each}
+	</dialog>
+{/if}
+
+<div
+	data-streamdown-table-download
+	class=" right-0 ml-auto flex items-center justify-end gap-2 p-1"
+>
+	{#each ['download', 'copy'] as mode (mode)}
+		<button
+			class={streamdown.theme.components.button}
+			onclick={async (e: MouseEvent) => {
+				if (modeState === mode && popover.isOpen) {
+					popover.isOpen = false;
+					return;
+				}
+				if (popover.isOpen && modeState !== mode) {
+					popover.isOpen = false;
+					const wait = new Promise((resolve) => {
+						setTimeout(resolve, 80);
+					});
+					await wait;
+				}
+				popover.reference = e.target as HTMLButtonElement;
+				popover.isOpen = true;
+				modeState = mode as 'download' | 'copy';
+			}}
+			{@attach clickOutside.attachment}
+			title={mode === 'download' ? 'Download table' : 'Copy table'}
+		>
+			{#if mode === 'download'}
+				{@render (streamdown.icons?.download || downloadIcon)()}
+			{:else if copy.isCopied}
+				{@render (streamdown.icons?.check || checkIcon)()}
+			{:else}
+				{@render (streamdown.icons?.copy || copyIcon)()}
+			{/if}
+		</button>
+	{/each}
+</div>
+
+<style>
+	:global([data-streamdown-table-download] + div) {
+		margin-top: 0px;
+	}
+</style>

package/dist/Elements/TableDownload.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { TableToken } from '../marked/marked-table.js';
+type $$ComponentProps = {
+    token: TableToken;
+    id: string;
+};
+declare const TableDownload: import("svelte").Component<$$ComponentProps, {}, "">;
+type TableDownload = ReturnType<typeof TableDownload>;
+export default TableDownload;

package/dist/Elements/icons.d.ts

@@ -0,0 +1,9 @@
+export declare const copyIcon: import("svelte").Snippet<[]>;
+export declare const downloadIcon: import("svelte").Snippet<[]>;
+export declare const checkIcon: import("svelte").Snippet<[]>;
+export declare const zoomInIcon: import("svelte").Snippet<[]>;
+export declare const zoomOutIcon: import("svelte").Snippet<[]>;
+export declare const fitViewIcon: import("svelte").Snippet<[]>;
+export declare const fullscreenIcon: import("svelte").Snippet<[]>;
+export declare const chevronRight: import("svelte").Snippet<[]>;
+export declare const chevronLeft: import("svelte").Snippet<[]>;

package/dist/Elements/icons.js

@@ -0,0 +1,175 @@
+import { createRawSnippet } from 'svelte';
+export const copyIcon = createRawSnippet(() => {
+    return {
+        render: () => {
+            return `
+            <svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="100%"
+	height="100%"
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="2"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	><rect width="8" height="4" x="8" y="2" rx="1" ry="1" /><path
+		d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"
+	/></svg>
+            `;
+        }
+    };
+});
+export const downloadIcon = createRawSnippet(() => {
+    return {
+        render: () => {
+            return `<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width="100%"
+		height="100%"
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		><path d="M12 15V3" /><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><path
+			d="m7 10 5 5 5-5"
+		/></svg
+	>`;
+        }
+    };
+});
+export const checkIcon = createRawSnippet(() => {
+    return {
+        render: () => {
+            return `
+            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
+            `;
+        }
+    };
+});
+export const zoomInIcon = createRawSnippet(() => {
+    return {
+        render: () => `
+			<svg
+				width="100%"
+				height="100%"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<circle cx="11" cy="11" r="8" />
+				<line x1="21" x2="16.65" y1="21" y2="16.65" />
+				<line x1="11" x2="11" y1="8" y2="14" />
+				<line x1="8" x2="14" y1="11" y2="11" />
+			</svg>
+		`
+    };
+});
+export const zoomOutIcon = createRawSnippet(() => {
+    return {
+        render: () => `
+		<svg
+			width="100%"
+			height="100%"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<circle cx="11" cy="11" r="8" />
+			<line x1="21" x2="16.65" y1="21" y2="16.65" />
+			<line x1="8" x2="14" y1="11" y2="11" />
+		</svg>
+		`
+    };
+});
+export const fitViewIcon = createRawSnippet(() => {
+    return {
+        render: () => `
+		<svg
+			width="100%"
+			height="100%"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path d="M3 7V5a2 2 0 0 1 2-2h2" />
+			<path d="M17 3h2a2 2 0 0 1 2 2v2" />
+			<path d="M21 17v2a2 2 0 0 1-2 2h-2" />
+			<path d="M7 21H5a2 2 0 0 1-2-2v-2" />
+			<rect width="10" height="8" x="7" y="8" rx="1" />
+		</svg>
+		`
+    };
+});
+export const fullscreenIcon = createRawSnippet(() => {
+    return {
+        render: () => `
+		<svg
+			width="100%"
+			height="100%"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path d="m15 15 6 6" /><path d="m15 9 6-6" /><path d="M21 16v5h-5" /><path d="M21 8V3h-5" />
+			<path d="M3 16v5h5" /><path d="m3 21 6-6" /><path d="M3 8V3h5" /><path d="M9 9 3 3" />
+		</svg>
+		`
+    };
+});
+export const chevronRight = createRawSnippet(() => {
+    return {
+        render: () => `
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="100%"
+				height="100%"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<path d="m9 18 6-6-6-6" />
+			</svg>
+		`
+    };
+});
+export const chevronLeft = createRawSnippet(() => {
+    return {
+        render: () => `
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="100%"
+				height="100%"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<path d="m15 18-6-6 6-6" />
+			</svg>
+		`
+    };
+});

package/dist/Streamdown.svelte

@@ -103,9 +103,11 @@
 		get controls() {
 			const codeControls = controls?.code ?? true;
 			const mermaidControls = controls?.mermaid ?? true;
+			const tableControls = controls?.table ?? true;
 			return {
 				code: codeControls,
-				mermaid: mermaidControls
+				mermaid: mermaidControls,
+				table: tableControls
 			};
 		},
 		get children() {

package/dist/context.svelte.d.ts

@@ -10,6 +10,7 @@ export interface StreamdownContext extends Omit<StreamdownProps, keyof Snippets
     controls: {
         code: boolean;
         mermaid: boolean;
+        table: boolean;
     };
     inlineCitationsMode: 'list' | 'carousel';
     animation: {
@@ -117,6 +118,7 @@ export type StreamdownProps<Source extends Record<string, any> = Record<string,
     controls?: {
         code?: boolean;
         mermaid?: boolean;
+        table?: boolean;
     };
     renderHtml?: boolean | ((token: Tokens.HTML | Tokens.Tag) => string);
     animation?: {
@@ -141,6 +143,7 @@ export type StreamdownProps<Source extends Record<string, any> = Record<string,
         important?: Snippet;
         chevronLeft?: Snippet;
         chevronRight?: Snippet;
+        check?: Snippet;
     };
     extensions?: Extension[];
     children?: Snippet<[{

package/dist/marked/index.d.ts

@@ -22,7 +22,7 @@ export type Extension = {
     start?: TokenizerStartFunction;
     applyInBlockParsing?: boolean;
 };
-export type StreamdownToken = Exclude<MarkedToken, Tokens.List | Tokens.ListItem> | ListToken | ListItemToken | MathToken | AlertToken | FootnoteToken | SubSupToken | BrToken | HrToken | TableToken | THead | TBody | TFoot | THeadRow | TRow | TH | TD | DescriptionListToken | DescriptionToken | DescriptionDetailToken | DescriptionTermToken | AlignToken | CitationToken;
+export type StreamdownToken = Exclude<MarkedToken, Tokens.List | Tokens.ListItem | Tokens.Table> | ListToken | ListItemToken | MathToken | AlertToken | FootnoteToken | SubSupToken | BrToken | HrToken | TableToken | THead | TBody | TFoot | THeadRow | TRow | TH | TD | DescriptionListToken | DescriptionToken | DescriptionDetailToken | DescriptionTermToken | AlignToken | CitationToken;
 export type { TableToken, THead, TBody, TFoot, THeadRow, TRow, TH, TD } from './marked-table.js';
 export declare const lex: (markdown: string, extensions?: Extension[]) => StreamdownToken[];
 export declare const parseBlocks: (markdown: string, extensions?: Extension[]) => string[];

package/dist/theme.js

@@ -104,7 +104,7 @@ export const theme = {
     mermaid: {
         base: 'group relative my-4 h-auto rounded-xl border border-gray-200 bg-white overflow-hidden items-center min-h-[500px]',
         icon: 'size-5',
-        buttons: 'absolute right-1 top-1 z-10 flex h-fit w-fit items-center gap-1'
+        buttons: 'absolute right-1 top-1 flex h-fit w-fit items-center gap-1'
     },
     math: {
         block: '',
@@ -151,7 +151,7 @@ export const theme = {
     },
     components: {
         button: 'disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer p-1 text-gray-600 transition-all hover:text-gray-900 rounded hover:bg-gray-100 w-6 h-6',
-        popover: 'fixed z-[1000] max-h-[30vh] max-w-3xl overflow-y-auto rounded-lg bg-white p-4 shadow'
+        popover: 'min-w-[250px] max-w-md  fixed z-[1000] max-h-md overflow-y-auto rounded-lg bg-white p-4 shadow'
     }
 };
 export const shadcnTheme = {
@@ -257,7 +257,7 @@ export const shadcnTheme = {
     mermaid: {
         base: 'group relative my-4 h-auto rounded-lg border border-border bg-card overflow-hidden items-center min-h-[500px]',
         icon: 'size-5',
-        buttons: 'absolute right-1 top-1 z-10 flex h-fit w-fit items-center gap-1'
+        buttons: 'absolute right-1 top-1 flex h-fit w-fit items-center gap-1'
     },
     math: {
         block: 'text-foreground',
@@ -304,7 +304,7 @@ export const shadcnTheme = {
     },
     components: {
         button: 'disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer p-1 text-muted-foreground transition-all hover:text-foreground rounded hover:bg-border flex items-center justify-center w-6 h-6',
-        popover: 'fixed z-[1000] max-h-[30vh] max-w-3xl overflow-y-auto rounded-lg bg-popover border border-border p-2 shadow'
+        popover: 'min-w-[250px] max-w-md fixed z-[1000] max-h-md overflow-y-auto rounded-lg bg-popover border border-border p-2 shadow'
     }
 };
 export const mergeTheme = (customTheme, baseTheme) => {