svelte-streamdown 2.5.0 → 2.5.1

package/dist/Elements/Alert.svelte

@@ -22,8 +22,10 @@
 
 	const {
 		children,
-		token
+		token,
+		id
 	}: {
+		id: string;
 		children: Snippet;
 		token: AlertToken;
 	} = $props();
@@ -37,6 +39,7 @@
 	render={streamdown.snippets.alert}
 >
 	<div
+		data-streamdown-alert={id}
 		style={streamdown.isMounted ? streamdown.animationBlockStyle : ''}
 		class={`${streamdown.theme.alert.base} ${streamdown.theme.alert[token.variant]}`}
 	>

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

@@ -1,6 +1,7 @@
 import type { AlertToken } from '../marked/index.js';
 import type { Snippet } from 'svelte';
 type $$ComponentProps = {
+    id: string;
     children: Snippet;
     token: AlertToken;
 };

package/dist/Elements/Citation.svelte

@@ -9,6 +9,7 @@
 	import { StepperState } from './stepperState.svelte.js';
 	import { Popover } from './popover.svelte.js';
 	import { get } from '../utils/get.js';
+	import { chevronLeft, chevronRight } from './icons.js';
 
 	const {
 		token
@@ -82,6 +83,7 @@
 
 {#if popover.isOpen}
 	<dialog
+		data-streamdown-citation-popover={id}
 		id={'citation-popover-' + id}
 		aria-modal="false"
 		transition:scale|global={{ start: 0.95, duration: 200 }}
@@ -231,36 +233,9 @@
 	</div>
 {/snippet}
 
-{#snippet chevronRight()}
-	<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
-	>
-{/snippet}
-
-{#snippet chevronLeft()}
-	<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
-	>
-{/snippet}
-
 {#if citationWithSources.length > 0}
 	<button
+		data-streamdown-citation-preview={id}
 		style={streamdown.animationBlockStyle}
 		bind:this={popover.reference}
 		class={streamdown.theme.inlineCitation.preview}

package/dist/Elements/Code.svelte

@@ -6,11 +6,14 @@
 	import type { Tokens } from 'marked';
 	import { type ThemedToken } from 'shiki';
 	import { untrack } from 'svelte';
+	import { checkIcon, copyIcon, downloadIcon } from './icons.js';
 
 	const {
-		token
+		token,
+		id
 	}: {
 		token: Tokens.Code;
+		id: string;
 	} = $props();
 
 	const streamdown = useStreamdown();
@@ -48,6 +51,7 @@
 </script>
 
 <div
+	data-streamdown-code={id}
 	style={streamdown.isMounted ? streamdown.animationBlockStyle : ''}
 	class={streamdown.theme.code.base}
 >
@@ -58,14 +62,18 @@
 				<button
 					class={streamdown.theme.components.button}
 					onclick={downloadCode}
-					title="Download file"
+					title="Download code"
 					type="button"
 				>
 					{@render (streamdown.icons?.download || downloadIcon)()}
 				</button>
 
 				<button class={streamdown.theme.components.button} onclick={copy.copy} type="button">
-					{@render (streamdown.icons?.copy || copyIcon)()}
+					{#if copy.isCopied}
+						{@render (streamdown.icons?.check || checkIcon)()}
+					{:else}
+						{@render (streamdown.icons?.copy || copyIcon)()}
+					{/if}
 				</button>
 			</div>
 		{/if}
@@ -107,37 +115,3 @@
 		</span>
 	{/each}
 {/snippet}
-
-{#snippet copyIcon()}
-	<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
-	>
-{/snippet}
-
-{#snippet downloadIcon()}
-	<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
-	>
-{/snippet}

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

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

package/dist/Elements/Element.svelte

@@ -11,11 +11,13 @@
 	import { useStreamdown } from '../context.svelte.js';
 	import FootnoteRef from './FootnoteRef.svelte';
 	import Citation from './Citation.svelte';
+	import TableDownload from './TableDownload.svelte';
 	let { token, children }: { token: StreamdownToken; children: Snippet } = $props();
 	const streamdown = useStreamdown();
 
 	// Only apply animation on block level elements. Leaves text elements to be animated by their text children.
 	const style = $derived(streamdown.isMounted ? streamdown.animationBlockStyle : '');
+	const id = $props.id();
 </script>
 
 {#if token.type === 'heading'}
@@ -27,67 +29,71 @@
 		render={streamdown.snippets.heading}
 	>
 		{#if token.depth === 1}
-			<h1 {style} class={streamdown.theme[`h${token.depth}`].base}>
+			<h1 data-streamdown-heading-1={id} {style} class={streamdown.theme[`h${token.depth}`].base}>
 				{@render children()}
 			</h1>
 		{:else if token.depth === 2}
-			<h2 {style} class={streamdown.theme[`h${token.depth}`].base}>
+			<h2 data-streamdown-heading-2={id} {style} class={streamdown.theme[`h${token.depth}`].base}>
 				{@render children()}
 			</h2>
 		{:else if token.depth === 3}
-			<h3 {style} class={streamdown.theme[`h${token.depth}`].base}>
+			<h3 data-streamdown-heading-3={id} {style} class={streamdown.theme[`h${token.depth}`].base}>
 				{@render children()}
 			</h3>
 		{:else if token.depth === 4}
-			<h4 {style} class={streamdown.theme[`h${token.depth}`].base}>
+			<h4 data-streamdown-heading-4={id} {style} class={streamdown.theme[`h${token.depth}`].base}>
 				{@render children()}
 			</h4>
 		{:else if token.depth === 5}
-			<h5 {style} class={streamdown.theme[`h${token.depth}`].base}>
+			<h5 data-streamdown-heading-5={id} {style} class={streamdown.theme[`h${token.depth}`].base}>
 				{@render children()}
 			</h5>
 		{:else if token.depth === 6}
-			<h6 {style} class={streamdown.theme[`h${token.depth}`].base}>
+			<h6 data-streamdown-heading-6={id} {style} class={streamdown.theme[`h${token.depth}`].base}>
 				{@render children()}
 			</h6>
 		{/if}
 	</Slot>
 {:else if token.type === 'paragraph'}
 	<Slot props={{ children, token }} render={streamdown.snippets.paragraph}>
-		<p {style} class={streamdown.theme.paragraph.base}>
+		<p data-streamdown-paragraph={id} {style} class={streamdown.theme.paragraph.base}>
 			{@render children()}
 		</p>
 	</Slot>
 {:else if token.type === 'blockquote'}
 	<Slot props={{ children, token }} render={streamdown.snippets.blockquote}>
-		<blockquote {style} class={streamdown.theme.blockquote.base}>
+		<blockquote data-streamdown-blockquote={id} {style} class={streamdown.theme.blockquote.base}>
 			{@render children()}
 		</blockquote>
 	</Slot>
 {:else if token.type === 'code' && token.lang === 'mermaid'}
 	<Slot props={{ children, token }} render={streamdown.snippets.code}>
-		<Mermaid {token} />
+		<Mermaid {id} {token} />
 	</Slot>
 {:else if token.type === 'code'}
 	<Slot props={{ children, token }} render={streamdown.snippets.code}>
-		<Code {token} />
+		<Code {id} {token} />
 	</Slot>
 {:else if token.type === 'codespan'}
 	<Slot props={{ children, token }} render={streamdown.snippets.codespan}>
-		<code class={streamdown.theme.codespan.base}>
+		<code data-streamdown-codespan={id} class={streamdown.theme.codespan.base}>
 			{@render children()}
 		</code>
 	</Slot>
 {:else if token.type === 'list'}
 	{#if token.ordered}
 		<Slot props={{ children, token }} render={streamdown.snippets.ol}>
-			<ol style:list-style-type={token.listType} class={streamdown.theme.ol.base}>
+			<ol
+				data-streamdown-ol={id}
+				style:list-style-type={token.listType}
+				class={streamdown.theme.ol.base}
+			>
 				{@render children()}
 			</ol>
 		</Slot>
 	{:else}
 		<Slot props={{ children, token }} render={streamdown.snippets.ul}>
-			<ul class={streamdown.theme.ul.base}>
+			<ul data-streamdown-ul={id} class={streamdown.theme.ul.base}>
 				{@render children()}
 			</ul>
 		</Slot>
@@ -95,6 +101,7 @@
 {:else if token.type === 'list_item'}
 	<Slot props={{ children, token }} render={streamdown.snippets.li}>
 		<li
+			data-streamdown-li={id}
 			{style}
 			style:list-style-type={token.task ? 'none' : undefined}
 			{...token.value && !token.task ? { value: token.value } : {}}
@@ -113,7 +120,15 @@
 	</Slot>
 {:else if token.type === 'table'}
 	<Slot props={{ token, children }} render={streamdown.snippets.table}>
-		<div {style} class={streamdown.theme.table.base} style:overscroll-behavior-x="none">
+		{#if streamdown.controls.table}
+			<TableDownload {id} {token} />
+		{/if}
+		<div
+			data-streamdown-table={id}
+			{style}
+			class={`${streamdown.theme.table.base} group`}
+			style:overscroll-behavior-x="none"
+		>
 			<table class={streamdown.theme.table.table}>
 				{@render children()}
 			</table>
@@ -121,25 +136,25 @@
 	</Slot>
 {:else if token.type === 'thead'}
 	<Slot props={{ token, children }} render={streamdown.snippets.thead}>
-		<thead {style} class={streamdown.theme.thead.base}>
+		<thead data-streamdown-thead={id} {style} class={streamdown.theme.thead.base}>
 			{@render children?.()}
 		</thead>
 	</Slot>
 {:else if token.type === 'tbody'}
 	<Slot props={{ token, children }} render={streamdown.snippets.tbody}>
-		<tbody {style} class={streamdown.theme.tbody.base}>
+		<tbody data-streamdown-tbody={id} {style} class={streamdown.theme.tbody.base}>
 			{@render children?.()}
 		</tbody>
 	</Slot>
 {:else if token.type === 'tfoot'}
 	<Slot props={{ token, children }} render={streamdown.snippets.tfoot}>
-		<tfoot {style} class={streamdown.theme.tfoot.base}>
+		<tfoot data-streamdown-tfoot={id} {style} class={streamdown.theme.tfoot.base}>
 			{@render children?.()}
 		</tfoot>
 	</Slot>
 {:else if token.type === 'tr'}
 	<Slot props={{ token, children }} render={streamdown.snippets.tr}>
-		<tr {style} class={streamdown.theme.tr.base}>
+		<tr data-streamdown-tr={id} {style} class={streamdown.theme.tr.base}>
 			{@render children?.()}
 		</tr>
 	</Slot>
@@ -148,6 +163,7 @@
 		<Slot props={{ children, token }} render={streamdown.snippets.td}>
 			<td
 				{style}
+				data-streamdown-td={id}
 				class={streamdown.theme.td.base}
 				{...token.colspan > 1 ? { colspan: token.colspan } : {}}
 				{...token.rowspan > 1 ? { rowspan: token.rowspan } : {}}
@@ -164,6 +180,7 @@
 		<Slot props={{ children, token }} render={streamdown.snippets.th}>
 			<th
 				{style}
+				data-streamdown-th={id}
 				class={streamdown.theme.th.base}
 				{...token.colspan > 1 ? { colspan: token.colspan } : {}}
 				{...token.rowspan > 1 ? { rowspan: token.rowspan } : {}}
@@ -176,45 +193,45 @@
 		</Slot>
 	{/if}
 {:else if token.type === 'image'}
-	<Image {token} {children} />
+	<Image {id} {token} {children} />
 {:else if token.type === 'link'}
-	<Link {token} {children} />
+	<Link {id} {token} {children} />
 {:else if token.type === 'sub'}
 	<Slot props={{ children, token }} render={streamdown.snippets.sub}>
-		<sub class={streamdown.theme.sub.base}>
+		<sub data-streamdown-sub={id} class={streamdown.theme.sub.base}>
 			{@render children()}
 		</sub>
 	</Slot>
 {:else if token.type === 'sup'}
 	<Slot props={{ children, token }} render={streamdown.snippets.sup}>
-		<sup class={streamdown.theme.sup.base}>
+		<sup data-streamdown-sup={id} class={streamdown.theme.sup.base}>
 			{@render children()}
 		</sup>
 	</Slot>
 {:else if token.type === 'strong'}
 	<Slot props={{ children, token }} render={streamdown.snippets.strong}>
-		<strong class={streamdown.theme.strong.base}>
+		<strong data-streamdown-strong={id} class={streamdown.theme.strong.base}>
 			{@render children()}
 		</strong>
 	</Slot>
 {:else if token.type === 'em'}
 	<Slot props={{ children, token }} render={streamdown.snippets.em}>
-		<em class={streamdown.theme.em.base}>
+		<em data-streamdown-em={id} class={streamdown.theme.em.base}>
 			{@render children()}
 		</em>
 	</Slot>
 {:else if token.type === 'del'}
 	<Slot props={{ children, token }} render={streamdown.snippets.del}>
-		<del class={streamdown.theme.del.base}>
+		<del data-streamdown-del={id} class={streamdown.theme.del.base}>
 			{@render children()}
 		</del>
 	</Slot>
 {:else if token.type === 'hr'}
 	<Slot props={{ children, token }} render={streamdown.snippets.hr}>
-		<hr {style} class={streamdown.theme.hr.base} />
+		<hr data-streamdown-hr={id} {style} class={streamdown.theme.hr.base} />
 	</Slot>
 {:else if token.type === 'br'}
-	<br />
+	<br data-streamdown-br={id} />
 {:else if token.type === 'math'}
 	<Slot
 		props={{
@@ -223,10 +240,10 @@
 		}}
 		render={streamdown.snippets.math}
 	>
-		<Math {token} />
+		<Math {id} {token} />
 	</Slot>
 {:else if token.type === 'alert'}
-	<Alert {token} {children} />
+	<Alert {id} {token} {children} />
 {:else if token.type === 'footnoteRef'}
 	<Slot props={{ token }} render={streamdown.snippets.footnoteRef}>
 		<FootnoteRef {token} />
@@ -239,7 +256,11 @@
 	<!-- TODO Footnotes are rendered inside the FootnoteRef popover -->
 {:else if token.type === 'descriptionList'}
 	<Slot props={{ children, token }} render={streamdown.snippets.descriptionList}>
-		<dl style={streamdown.animationBlockStyle} class={streamdown.theme.descriptionList.base}>
+		<dl
+			data-streamdown-description-list={id}
+			style={streamdown.animationBlockStyle}
+			class={streamdown.theme.descriptionList.base}
+		>
 			{@render children()}
 		</dl>
 	</Slot>
@@ -249,13 +270,17 @@
 	</Slot>
 {:else if token.type === 'descriptionTerm'}
 	<Slot props={{ children, token }} render={streamdown.snippets.descriptionTerm}>
-		<dt {style} class={streamdown.theme.descriptionTerm.base}>
+		<dt data-streamdown-description-term={id} {style} class={streamdown.theme.descriptionTerm.base}>
 			{@render children()}
 		</dt>
 	</Slot>
 {:else if token.type === 'descriptionDetail'}
 	<Slot props={{ children, token }} render={streamdown.snippets.descriptionDetail}>
-		<dd {style} class={streamdown.theme.descriptionDetail.base}>
+		<dd
+			data-streamdown-description-detail={id}
+			{style}
+			class={streamdown.theme.descriptionDetail.base}
+		>
 			{@render children()}
 		</dd>
 	</Slot>

package/dist/Elements/FootnoteRef.svelte

@@ -41,6 +41,7 @@
 
 {#if popover.isOpen}
 	<dialog
+		data-streamdown-footnote-popover={id}
 		id={'footnote-popover-' + id}
 		aria-modal="false"
 		transition:scale|global={{ start: 0.95, duration: 100 }}
@@ -65,6 +66,7 @@
 
 {#if token.label !== 'streamdown:footnote'}
 	<button
+		data-streamdown-footnote-ref={id}
 		style={streamdown.animationBlockStyle}
 		bind:this={popover.reference}
 		class={streamdown.theme.footnoteRef.base}

package/dist/Elements/Image.svelte

@@ -9,10 +9,12 @@
 
 	const {
 		children,
-		token
+		token,
+		id
 	}: {
 		children: Snippet;
 		token: Tokens.Image;
+		id: string;
 	} = $props();
 
 	const transformedUrl = $derived(
@@ -32,6 +34,7 @@
 			render={streamdown.snippets.image}
 		>
 			<span
+				data-streamdown-image={id}
 				style={streamdown.isMounted ? streamdown.animationBlockStyle : ''}
 				class={streamdown.theme.image.base}
 			>
@@ -40,6 +43,7 @@
 		</Slot>
 	{:else}
 		<span
+			data-streamdown-image-blocked={id}
 			class="inline-block rounded bg-gray-200 px-3 py-1 text-sm text-gray-600 dark:bg-gray-700 dark:text-gray-400"
 			title={`Blocked URL: ${token.href}`}
 		>

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

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

package/dist/Elements/Link.svelte

@@ -9,10 +9,12 @@
 
 	const {
 		children,
-		token
+		token,
+		id
 	}: {
 		children: Snippet;
 		token: Tokens.Link;
+		id: string;
 	} = $props();
 
 	const transformedUrl = $derived(
@@ -33,6 +35,7 @@
 		render={streamdown.snippets.link}
 	>
 		<a
+			data-streamdown-link={id}
 			class={streamdown.theme.link.base}
 			href={transformedUrl}
 			target="_blank"
@@ -43,6 +46,7 @@
 	</Slot>
 {:else}
 	<span
+		data-streamdown-link-blocked={id}
 		class={streamdown.theme.link.blocked}
 		title={token.title ? `Blocked URL: ${token.href}` : undefined}
 	>

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

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

package/dist/Elements/Math.svelte

@@ -6,9 +6,11 @@
 	import 'katex/dist/katex.min.css';
 
 	const {
-		token
+		token,
+		id
 	}: {
 		token: MathToken;
+		id: string;
 	} = $props();
 
 	const streamdown = useStreamdown();
@@ -46,6 +48,7 @@
 
 {#if token.isInline}
 	<span
+		data-streamdown-inline-math={id}
 		style={streamdown.isMounted ? streamdown.animationBlockStyle : ''}
 		bind:this={inner}
 		class={streamdown.theme.math.inline}
@@ -53,7 +56,12 @@
 		{@html html}
 	</span>
 {:else}
-	<div style={streamdown.isMounted ? streamdown.animationBlockStyle : ''} class="h-fit w-full">
+	<div
+		data-streamdown-block-math={id}
+		style={streamdown.isMounted ? streamdown.animationBlockStyle : ''}
+		style:height="fit-content"
+		style:width="100%"
+	>
 		<div class="overflow-x-auto">
 			<div bind:this={inner} class={streamdown.theme.math.block}>
 				{@html html}

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

@@ -2,6 +2,7 @@ import type { MathToken } from '../marked/index.js';
 import 'katex/dist/katex.min.css';
 type $$ComponentProps = {
     token: MathToken;
+    id: string;
 };
 declare const Math: import("svelte").Component<$$ComponentProps, {}, "">;
 type Math = ReturnType<typeof Math>;

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

@@ -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 = {
@@ -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) => {

package/dist/utils/panzoom.svelte.js

@@ -198,6 +198,11 @@ export const usePanzoom = (opts = {}) => {
         dragOffMove = dragOffUp = null;
     }
     function onTouchStart(e) {
+        const hasButton = e
+            .composedPath()
+            .some((el) => el.tagName?.toLowerCase?.() === 'button');
+        if (hasButton)
+            return;
         if (!node)
             return;
         if (animating) {
@@ -352,7 +357,15 @@ export const usePanzoom = (opts = {}) => {
         const first = eventTarget.getBoundingClientRect();
         if (expand) {
             // Expanding: immediately apply expanded state
-            eventTarget.parentElement.style.height = eventTarget.clientHeight + 'px';
+            // We should add margin to the parent element to account for the expanded height
+            if (eventTarget.parentElement) {
+                const styleAttributes = ['margin-block', 'height'];
+                styleAttributes.forEach((attribute) => {
+                    if (eventTarget?.parentElement) {
+                        eventTarget.parentElement.style.setProperty(attribute, getComputedStyle(eventTarget).getPropertyValue(attribute));
+                    }
+                });
+            }
             eventTarget.dataset.expanded = 'true';
             isExpanded = true;
             zoomToFit();

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svelte-streamdown",
-	"version": "2.5.0",
+	"version": "2.5.1",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",