svelte-streamdown 4.0.1 → 4.1.0

package/dist/Elements/FootnoteRef.svelte

@@ -74,6 +74,7 @@
 		aria-expanded={popover.isOpen}
 		aria-haspopup="dialog"
 		aria-controls={'footnote-popover-' + id}
+		type="button"
 		{@attach clickOutside.attachment}
 	>
 		{token.label.replace('^', '')}

package/dist/Elements/Image.svelte

@@ -51,9 +51,10 @@
 		<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}`}
+			title={`${streamdown.translations.controls.blockedUrl}: ${token.href}`}
 		>
-			[Image blocked: {token.text || 'No description'}]
+			[{streamdown.translations.controls.imageBlocked}: {token.text ||
+				streamdown.translations.controls.imageNoDescription}]
 		</span>
 	{/if}
 {/if}

package/dist/Elements/Link.svelte

@@ -51,8 +51,8 @@
 	<span
 		data-streamdown-link-blocked={id}
 		class={streamdown.theme.link.blocked}
-		title={`Blocked URL: ${token.href}`}
+		title={`${streamdown.translations.controls.blockedUrl}: ${token.href}`}
 	>
-		{@render children()} [blocked]
+		{@render children()} [{streamdown.translations.controls.linkBlocked}]
 	</span>
 {/if}

package/dist/Elements/Mermaid.svelte

@@ -12,10 +12,13 @@
 
 	const {
 		token,
-		id
+		id,
+		incomplete = false
 	}: {
 		token: CodeToken;
 		id: string;
+		/** The fence is still being streamed; nothing below it is final yet. */
+		incomplete?: boolean;
 	} = $props();
 
 	// Trailing blank lines are noise for mermaid but they still changed `token.text`
@@ -23,6 +26,15 @@
 	// Code.svelte.
 	const chart = $derived(token.text.replace(/\n+$/, ''));
 
+	// Screen readers get the diagram's declaration line ('flowchart TD', 'sequenceDiagram'),
+	// which is the only human-readable summary the source offers.
+	const firstLine = $derived(chart.split('\n', 1)[0].trim());
+	const diagramLabel = $derived(
+		firstLine
+			? `${streamdown.translations.controls.diagram}: ${firstLine}`
+			: streamdown.translations.controls.diagram
+	);
+
 	let mermaid = $state<any>(null);
 	onMount(async () => {
 		mermaid = (await import('mermaid')).default;
@@ -30,7 +42,7 @@
 
 	const useIsInsideForMoreThanAQuarterSecond = () => {
 		let isInside = $state(false);
-		let timeout: number | undefined = undefined;
+		let timeout: ReturnType<typeof setTimeout> | undefined = undefined;
 
 		return {
 			get isInside() {
@@ -67,6 +79,19 @@
 		}
 	});
 
+	const expandLabel = $derived(
+		panzoom.expanded
+			? streamdown.translations.controls.exitFullscreen
+			: streamdown.translations.controls.fullscreen
+	);
+
+	let container = $state<HTMLDivElement>();
+	$effect(() => {
+		// Expanding covers the page: move focus in so Escape (handled by panzoom)
+		// and the toolbar are reachable from the keyboard.
+		if (panzoom.expanded) container?.focus();
+	});
+
 	const sanitizeMermaidCode = (code: string): string => {
 		try {
 			let sanitized = code;
@@ -199,10 +224,15 @@
 				svgTarget.innerHTML = svgString;
 				svgTarget.id = uniqueId;
 
-				// Apply any additional attributes from the rendered SVG
+				// Apply any additional attributes from the rendered SVG. The accessibility
+				// attributes are ours: mermaid's root carries role="graphics-document" and
+				// an aria-roledescription, which would overwrite the label a screen reader
+				// needs (and did, non-deterministically, depending on when the lazy import
+				// resolved).
+				const keepOwn = new Set(['id', 'role', 'aria-label', 'aria-roledescription']);
 				const tempSvg = new DOMParser().parseFromString(svgString, 'image/svg+xml').documentElement;
 				Array.from(tempSvg.attributes).forEach((attribute) => {
-					if (attribute.name !== 'id') {
+					if (!keepOwn.has(attribute.name)) {
 						svgTarget.setAttribute(attribute.name, attribute.value);
 					}
 				});
@@ -217,20 +247,31 @@
 	};
 </script>
 
-<div data-streamdown-mermaid={id}>
+<div data-streamdown-mermaid={id} data-incomplete={incomplete || undefined}>
 	{#if mermaid}
 		<div
+			bind:this={container}
 			style={streamdown.isMounted ? streamdown.animationBlockStyle : ''}
 			class={streamdown.theme.mermaid.base}
-			{@attach (node) => renderMermaid(chart, node)}
+			{@attach (node) => {
+				// A half-written diagram makes mermaid throw and log on every chunk, so
+				// skip the render entirely and keep showing whatever rendered last.
+				if (!incomplete) renderMermaid(chart, node);
+			}}
 			{@attach insider.attach}
 			data-expanded={'false'}
+			role={panzoom.expanded ? 'dialog' : undefined}
+			aria-modal={panzoom.expanded ? 'true' : undefined}
+			aria-label={panzoom.expanded ? diagramLabel : undefined}
+			tabindex="-1"
 		>
 			{#if streamdown.controls.mermaid}
 				<div class={streamdown.theme.mermaid.buttons}>
 					<button
 						class={streamdown.theme.components.button}
-						aria-label="Zoom to fit"
+						aria-label={streamdown.translations.controls.resetView}
+						title={streamdown.translations.controls.resetView}
+						type="button"
 						onclick={() => panzoom.zoomToFit()}
 						data-panzoom-ignore
 					>
@@ -238,7 +279,9 @@
 					</button>
 					<button
 						class={streamdown.theme.components.button}
-						aria-label="Zoom in"
+						aria-label={streamdown.translations.controls.zoomIn}
+						title={streamdown.translations.controls.zoomIn}
+						type="button"
 						onclick={() => panzoom.zoomIn()}
 						data-panzoom-ignore
 					>
@@ -246,7 +289,9 @@
 					</button>
 					<button
 						class={streamdown.theme.components.button}
-						aria-label="Zoom out"
+						aria-label={streamdown.translations.controls.zoomOut}
+						title={streamdown.translations.controls.zoomOut}
+						type="button"
 						onclick={() => panzoom.zoomOut()}
 						data-panzoom-ignore
 					>
@@ -254,16 +299,21 @@
 					</button>
 					<button
 						class={streamdown.theme.components.button}
-						aria-label="Toggle expand"
+						aria-label={expandLabel}
+						title={expandLabel}
+						aria-pressed={panzoom.expanded}
+						type="button"
 						onclick={() => panzoom.toggleExpand()}
 						data-panzoom-ignore
 					>
 						{@render (streamdown.icons?.fullscreen || fullscreenIcon)()}
 					</button>
-					<MermaidDownload {id} />
+					{#if streamdown.controls.mermaidDownload}
+						<MermaidDownload {token} {id} />
+					{/if}
 				</div>
 			{/if}
-			<svg {@attach panzoom.attach} data-mermaid-svg></svg>
+			<svg {@attach panzoom.attach} data-mermaid-svg role="img" aria-label={diagramLabel}></svg>
 		</div>
 	{:else}
 		<div class={streamdown.theme.mermaid.base}></div>

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

@@ -2,6 +2,8 @@ import type { CodeToken } from '../marked/index.js';
 type $$ComponentProps = {
     token: CodeToken;
     id: string;
+    /** The fence is still being streamed; nothing below it is final yet. */
+    incomplete?: boolean;
 };
 declare const Mermaid: import("svelte").Component<$$ComponentProps, {}, "">;
 type Mermaid = ReturnType<typeof Mermaid>;

package/dist/Elements/MermaidDownload.svelte

@@ -6,16 +6,24 @@
 	import { useClickOutside } from '../utils/useClickOutside.svelte.js';
 	import { useKeyDown } from '../utils/useKeyDown.svelte.js';
 	import { save } from '../utils/save.js';
+	import type { CodeToken } from '../marked/index.js';
 
 	let {
+		token,
 		id
 	}: {
+		token: CodeToken;
 		id: string;
 	} = $props();
 
 	const streamdown = useStreamdown();
 	const popover = new Popover();
 
+	const filename = (extension: string) => {
+		const base = streamdown.controls.mermaidDownloadFilename;
+		return `${typeof base === 'function' ? base(token) : base}.${extension}`;
+	};
+
 	useKeyDown({
 		keys: ['Escape'],
 		get isActive() {
@@ -68,7 +76,7 @@
 		}
 
 		const svgString = new XMLSerializer().serializeToString(clonedSvg);
-		save('mermaid-diagram.svg', svgString, 'image/svg+xml');
+		save(filename('svg'), svgString, 'image/svg+xml');
 		popover.isOpen = false;
 	};
 
@@ -128,7 +136,7 @@
 					const url = URL.createObjectURL(blob);
 					const link = document.createElement('a');
 					link.href = url;
-					link.download = 'mermaid-diagram.png';
+					link.download = filename('png');
 					document.body.appendChild(link);
 					link.click();
 					document.body.removeChild(link);
@@ -145,11 +153,21 @@
 		popover.isOpen = false;
 	};
 
-	const download = (type: 'SVG' | 'PNG') => {
+	const formats = $derived([
+		{ type: 'PNG', label: streamdown.translations.controls.downloadDiagramPng },
+		{ type: 'SVG', label: streamdown.translations.controls.downloadDiagramSvg },
+		{ type: 'MMD', label: streamdown.translations.controls.downloadDiagramMmd }
+	] as const);
+
+	const download = (type: 'SVG' | 'PNG' | 'MMD') => {
 		if (type === 'SVG') {
 			downloadSvg();
-		} else {
+		} else if (type === 'PNG') {
 			downloadPng();
+		} else {
+			// The diagram source, same trailing-newline trim as the rendered chart.
+			save(filename('mmd'), token.text.replace(/\n+$/, ''), 'text/plain');
+			popover.isOpen = false;
 		}
 	};
 </script>
@@ -166,13 +184,14 @@
 		style:min-width="fit-content !important"
 		class={streamdown.theme.components.popover}
 	>
-		{#each ['PNG', 'SVG'] as type}
+		{#each formats as { type, label } (type)}
 			<button
 				style="width: 100%; text-align: left; justify-content: flex-start; padding: 1rem 1rem; margin: 0.2rem 0;"
-				onclick={() => download(type as 'SVG' | 'PNG')}
+				onclick={() => download(type)}
 				class={streamdown.theme.components.button}
+				type="button"
 			>
-				{type}
+				{label}
 			</button>
 		{/each}
 	</dialog>
@@ -189,7 +208,9 @@
 		popover.isOpen = true;
 	}}
 	{@attach clickOutside.attachment}
-	title="Download diagram"
+	type="button"
+	title={streamdown.translations.controls.downloadDiagram}
+	aria-label={streamdown.translations.controls.downloadDiagram}
 	data-panzoom-ignore
 >
 	{@render (streamdown.icons?.download || downloadIcon)()}

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

@@ -1,4 +1,6 @@
+import type { CodeToken } from '../marked/index.js';
 type $$ComponentProps = {
+    token: CodeToken;
     id: string;
 };
 declare const MermaidDownload: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/Elements/TableDownload.svelte

@@ -8,6 +8,10 @@
 	import type { TableToken } from '../marked/marked-table.js';
 	import { useCopy } from '../utils/copy.svelte.js';
 	import { save } from '../utils/save.js';
+	import { srOnly } from './srOnly.js';
+	import { extractTableData, tableDataToCSV, tableDataToTSV } from '../utils/table-export.js';
+
+	type Format = 'Markdown' | 'HTML' | 'CSV' | 'TSV';
 
 	let {
 		token,
@@ -19,6 +23,11 @@
 	const streamdown = useStreamdown();
 	const popover = new Popover();
 	let modeState = $state<'download' | 'copy'>('download');
+	const modes = $derived(
+		(['download', 'copy'] as const).filter((mode) =>
+			mode === 'download' ? streamdown.controls.tableDownload : streamdown.controls.tableCopy
+		)
+	);
 
 	useKeyDown({
 		keys: ['Escape'],
@@ -46,31 +55,41 @@
 		}
 	});
 
-	// textContent flattens a real <br> element, so a multiline cell collapses to
-	// 'Paragraph one.Paragraph two.'. Walk the cell instead and keep the breaks;
-	// the quoting below then quotes the newline for us.
-	const extractCellText = (node: Node): string => {
-		if (node.nodeType === 3) return node.textContent || '';
-		if ((node as Element).tagName === 'BR') return '\n';
-		return Array.from(node.childNodes).map(extractCellText).join('');
+	const filename = (extension: string) => {
+		const base = streamdown.controls.tableDownloadFilename;
+		return `${typeof base === 'function' ? base(token) : base}.${extension}`;
+	};
+
+	const formats = $derived([
+		{ type: 'Markdown', label: streamdown.translations.controls.tableFormatMarkdown },
+		{ type: 'HTML', label: streamdown.translations.controls.tableFormatHtml },
+		{ type: 'CSV', label: streamdown.translations.controls.tableFormatCsv },
+		{ type: 'TSV', label: streamdown.translations.controls.tableFormatTsv }
+	] as const satisfies readonly { type: Format; label: string }[]);
+
+	const emit = (content: string, extension: string, mimeType: string) => {
+		copyValue = content;
+		if (modeState === 'copy') {
+			copy.copy();
+		} else {
+			save(filename(extension), content, mimeType);
+		}
 	};
 
-	const copyOrDownload = (type: 'Markdown' | 'HTML' | 'CSV') => {
+	const tableElement = () => document.querySelector(`[data-streamdown-table="${id}"]`);
+
+	const copyOrDownload = (type: Format) => {
 		if (type === 'Markdown') {
-			copyValue = token.raw;
-			if (modeState === 'copy') {
-				copy.copy();
-			} else {
-				save('table.md', copyValue, 'text/markdown');
-			}
+			// `token.raw` is the author's own markdown; a DOM round-trip through
+			// tableDataToMarkdown() would lose the inline formatting.
+			emit(token.raw, 'md', 'text/markdown');
 		} else if (type === 'HTML') {
-			const table = document.querySelector(`[data-streamdown-table="${id}"]`);
+			const table = tableElement();
 
 			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, '');
@@ -83,72 +102,17 @@
 				// 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');
-				}
+				emit(html, 'html', 'text/html');
 			}
-		} else if (type === 'CSV') {
-			const table = document.querySelector(`[data-streamdown-table="${id}"]`);
+		} else {
+			const table = tableElement();
 
 			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, quoting if it contains commas, quotes, or newlines
-						const content = extractCellText(cell);
-						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();
+				const data = extractTableData(table);
+				if (type === 'CSV') {
+					emit(tableDataToCSV(data, streamdown.controls.tableCsvSeparator), 'csv', 'text/csv');
 				} else {
-					save('table.csv', copyValue, 'text/csv');
+					emit(tableDataToTSV(data), 'tsv', 'text/tab-separated-values');
 				}
 			}
 		}
@@ -168,13 +132,14 @@
 		style:min-width="fit-content !important"
 		class={streamdown.theme.components.popover}
 	>
-		{#each ['Markdown', 'HTML', 'CSV'] as type}
+		{#each formats as { type, label } (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')}
+				onclick={() => copyOrDownload(type)}
 				class={streamdown.theme.components.button}
+				type="button"
 			>
-				{type}
+				{label}
 			</button>
 		{/each}
 	</dialog>
@@ -184,7 +149,7 @@
 	data-streamdown-table-download
 	class=" right-0 ml-auto flex items-center justify-end gap-2 p-1"
 >
-	{#each ['download', 'copy'] as mode (mode)}
+	{#each modes as mode (mode)}
 		<button
 			class={streamdown.theme.components.button}
 			onclick={async (e: MouseEvent) => {
@@ -204,7 +169,13 @@
 				modeState = mode as 'download' | 'copy';
 			}}
 			{@attach clickOutside.attachment}
-			title={mode === 'download' ? 'Download table' : 'Copy table'}
+			type="button"
+			title={mode === 'download'
+				? streamdown.translations.controls.downloadTable
+				: streamdown.translations.controls.copyTable}
+			aria-label={mode === 'download'
+				? streamdown.translations.controls.downloadTable
+				: streamdown.translations.controls.copyTable}
 		>
 			{#if mode === 'download'}
 				{@render (streamdown.icons?.download || downloadIcon)()}
@@ -215,6 +186,9 @@
 			{/if}
 		</button>
 	{/each}
+	<span aria-live="polite" style={srOnly}
+		>{copy.isCopied ? streamdown.translations.controls.copiedTable : ''}</span
+	>
 </div>
 
 <style>

package/dist/Elements/fallbacks/CodeFallback.svelte

@@ -1,13 +1,17 @@
 <script lang="ts">
 	import { useStreamdown } from '../../context.svelte.js';
+	import { usePinnedScroll } from '../../utils/usePinnedScroll.svelte.js';
 	import type { Tokens } from 'marked';
 
 	const {
 		token,
-		id
+		id,
+		incomplete = false
 	}: {
 		token: Tokens.Code;
 		id: string;
+		/** The fence is still being streamed; nothing below it is final yet. */
+		incomplete?: boolean;
 	} = $props();
 
 	const streamdown = useStreamdown();
@@ -17,10 +21,21 @@
 	// on nearly every streamed chunk. This is the default renderer, so it needs it
 	// too.
 	const code = $derived(token.text.replace(/\n+$/, ''));
+
+	// Same scroll container as Code.svelte: `pre` already scrolls horizontally.
+	const pinnedScroll = usePinnedScroll({
+		get maxHeight() {
+			return streamdown.codeBlockMaxHeight;
+		},
+		get content() {
+			return code;
+		}
+	});
 </script>
 
 <div
 	data-streamdown-code={id}
+	data-incomplete={incomplete || undefined}
 	style={streamdown.isMounted ? streamdown.animationBlockStyle : ''}
 	class={streamdown.theme.code.base}
 >
@@ -28,7 +43,11 @@
 		<span class={streamdown.theme.code.language}>{token.lang}</span>
 	</div>
 	<div style="height: fit-content; width: 100%;" class={streamdown.theme.code.container}>
-		<pre class={streamdown.theme.code.pre}><code
+		<pre
+			class={streamdown.theme.code.pre}
+			style:max-height={streamdown.codeBlockMaxHeight}
+			style:overflow-y={streamdown.codeBlockMaxHeight ? 'auto' : undefined}
+			{@attach pinnedScroll}><code
 				>{#each code.split('\n') as line}<span class={streamdown.theme.code.line}
 						><span style={streamdown.isMounted ? streamdown.animationTextStyle : ''}
 							>{line.trim().length > 0 ? line : '\u200B'}</span

package/dist/Elements/fallbacks/CodeFallback.svelte.d.ts

@@ -2,6 +2,8 @@ import type { Tokens } from 'marked';
 type $$ComponentProps = {
     token: Tokens.Code;
     id: string;
+    /** The fence is still being streamed; nothing below it is final yet. */
+    incomplete?: boolean;
 };
 declare const CodeFallback: import("svelte").Component<$$ComponentProps, {}, "">;
 type CodeFallback = ReturnType<typeof CodeFallback>;

package/dist/Elements/fallbacks/MermaidFallback.svelte

@@ -4,10 +4,13 @@
 
 	const {
 		token,
-		id
+		id,
+		incomplete = false
 	}: {
 		token: Tokens.Code;
 		id: string;
+		/** The fence is still being streamed; nothing below it is final yet. */
+		incomplete?: boolean;
 	} = $props();
 
 	const streamdown = useStreamdown();
@@ -19,7 +22,7 @@
 	const chart = $derived(token.text.replace(/\n+$/, ''));
 </script>
 
-<div data-streamdown-mermaid={id}>
+<div data-streamdown-mermaid={id} data-incomplete={incomplete || undefined}>
 	<div
 		style={streamdown.isMounted ? streamdown.animationBlockStyle : ''}
 		class={streamdown.theme.code.base}

package/dist/Elements/fallbacks/MermaidFallback.svelte.d.ts

@@ -2,6 +2,8 @@ import type { Tokens } from 'marked';
 type $$ComponentProps = {
     token: Tokens.Code;
     id: string;
+    /** The fence is still being streamed; nothing below it is final yet. */
+    incomplete?: boolean;
 };
 declare const MermaidFallback: import("svelte").Component<$$ComponentProps, {}, "">;
 type MermaidFallback = ReturnType<typeof MermaidFallback>;