svelte-streamdown 4.0.0 → 4.1.0

package/dist/Elements/fallbacks/CodeFallback.svelte

@@ -1,20 +1,41 @@
 <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();
+
+	// Same trim as Code.svelte/Mermaid.svelte: marked keeps the fence's trailing
+	// blank lines in `text`, so they render as empty lines and flicker in and out
+	// 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}
 >
@@ -22,8 +43,12 @@
 		<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
-				>{#each token.text.split('\n') as line}<span class={streamdown.theme.code.line}
+		<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
 						></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,16 +4,25 @@
 
 	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();
+
+	// Same trim as Code.svelte/Mermaid.svelte: marked keeps the fence's trailing
+	// blank lines in `text`, so they render as empty lines and flicker in and out
+	// on nearly every streamed chunk. This is the default renderer, so it needs it
+	// too.
+	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}
@@ -23,7 +32,7 @@
 		</div>
 		<div style="height: fit-content; width: 100%;" class={streamdown.theme.code.container}>
 			<pre class={streamdown.theme.code.pre}><code
-					>{#each token.text.split('\n') as line}<span class={streamdown.theme.code.line}
+					>{#each chart.split('\n') as line}<span class={streamdown.theme.code.line}
 							><span style={streamdown.isMounted ? streamdown.animationTextStyle : ''}
 								>{line.trim().length > 0 ? line : '\u200B'}</span
 							></span

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>;

package/dist/Elements/icons.js

@@ -4,6 +4,7 @@ export const copyIcon = createRawSnippet(() => {
         render: () => {
             return `
             <svg
+	aria-hidden="true"
 	xmlns="http://www.w3.org/2000/svg"
 	width="100%"
 	height="100%"
@@ -24,6 +25,7 @@ export const downloadIcon = createRawSnippet(() => {
     return {
         render: () => {
             return `<svg
+	aria-hidden="true"
 		xmlns="http://www.w3.org/2000/svg"
 		width="100%"
 		height="100%"
@@ -44,7 +46,8 @@ 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>
+            <svg
+	aria-hidden="true" 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>
             `;
         }
     };
@@ -53,6 +56,7 @@ export const zoomInIcon = createRawSnippet(() => {
     return {
         render: () => `
 			<svg
+	aria-hidden="true"
 				width="100%"
 				height="100%"
 				viewBox="0 0 24 24"
@@ -75,6 +79,7 @@ export const zoomOutIcon = createRawSnippet(() => {
     return {
         render: () => `
 		<svg
+	aria-hidden="true"
 			width="100%"
 			height="100%"
 			viewBox="0 0 24 24"
@@ -96,6 +101,7 @@ export const fitViewIcon = createRawSnippet(() => {
     return {
         render: () => `
 		<svg
+	aria-hidden="true"
 			width="100%"
 			height="100%"
 			viewBox="0 0 24 24"
@@ -119,6 +125,7 @@ export const fullscreenIcon = createRawSnippet(() => {
     return {
         render: () => `
 		<svg
+	aria-hidden="true"
 			width="100%"
 			height="100%"
 			viewBox="0 0 24 24"
@@ -139,6 +146,7 @@ export const chevronRight = createRawSnippet(() => {
     return {
         render: () => `
 			<svg
+	aria-hidden="true"
 				xmlns="http://www.w3.org/2000/svg"
 				width="100%"
 				height="100%"
@@ -158,6 +166,7 @@ export const chevronLeft = createRawSnippet(() => {
     return {
         render: () => `
 			<svg
+	aria-hidden="true"
 				xmlns="http://www.w3.org/2000/svg"
 				width="100%"
 				height="100%"

package/dist/Elements/srOnly.d.ts

@@ -0,0 +1 @@
+export declare const srOnly = "position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;";

package/dist/Elements/srOnly.js

@@ -0,0 +1,3 @@
+// Visually hidden but announced. Inline rather than a theme class: a live region
+// must keep working in apps that do not ship Tailwind's `sr-only`.
+export const srOnly = 'position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;';

package/dist/Streamdown.svelte

@@ -1,8 +1,13 @@
 <script lang="ts" generics="Source extends Record<string, any> = Record<string, any>">
 	import Block from './Block.svelte';
-	import { StreamdownContext, type StreamdownProps } from './context.svelte.js';
+	import {
+		StreamdownContext,
+		defaultTranslations,
+		type StreamdownProps
+	} from './context.svelte.js';
 	import { mergeTheme, shadcnTheme } from './theme.js';
 	import { parseBlocks, createParseBlocksCache } from './marked/index.js';
+	import { hasUnclosedFence } from './utils/fence.js';
 
 	let {
 		content = '',
@@ -23,6 +28,8 @@
 		streamdown = $bindable(),
 		renderHtml,
 		controls,
+		codeBlockMaxHeight,
+		tableMaxHeight,
 		animation,
 		element = $bindable(),
 		icons,
@@ -94,7 +101,11 @@
 			return renderHtml;
 		},
 		get translations() {
-			return translations;
+			// Resolved once, like the theme, so components never fall back themselves.
+			return {
+				alert: { ...defaultTranslations.alert, ...translations?.alert },
+				controls: { ...defaultTranslations.controls, ...translations?.controls }
+			};
 		},
 		get highlightLanguages() {
 			return highlightLanguages;
@@ -123,19 +134,53 @@
 			};
 		},
 		get controls() {
-			const codeControls = controls?.code ?? true;
-			const mermaid = controls?.mermaid;
-			const isMermaidObject = typeof mermaid === 'object' && mermaid !== null;
-			const mermaidControls = isMermaidObject ? (mermaid.enabled ?? true) : (mermaid ?? true);
-			const mermaidMouseWheelZoom = isMermaidObject ? (mermaid.mouseWheelZoom ?? true) : true;
-			const tableControls = controls?.table ?? true;
+			// `controls` is sugar: `false` turns every control off, `true`/undefined
+			// turns them all on, and each section is a boolean or an object of the
+			// same shape. Flatten it once here so components stay boolean lookups.
+			const sections = typeof controls === 'object' && controls !== null ? controls : {};
+			const resolve = (section: boolean | Record<string, any> | undefined) => {
+				const config = typeof section === 'object' && section !== null ? section : {};
+				const enabled = controls === false || section === false ? false : (config.enabled ?? true);
+				const download = config.download;
+				return {
+					enabled,
+					copy: enabled && config.copy !== false,
+					download: enabled && download !== false,
+					filename:
+						typeof download === 'object' && download !== null ? download.filename : undefined
+				};
+			};
+			const code = resolve(sections.code);
+			const table = resolve(sections.table);
+			const mermaid = resolve(sections.mermaid);
+			const tableSection =
+				typeof sections.table === 'object' && sections.table ? sections.table : {};
+			const mermaidSection =
+				typeof sections.mermaid === 'object' && sections.mermaid ? sections.mermaid : {};
 			return {
-				code: codeControls,
-				mermaid: mermaidControls,
-				mermaidMouseWheelZoom,
-				table: tableControls
+				code: code.enabled,
+				codeCopy: code.copy,
+				codeDownload: code.download,
+				codeDownloadFilename: code.filename ?? 'file',
+				table: table.enabled,
+				tableCopy: table.copy,
+				tableDownload: table.download,
+				tableDownloadFilename: table.filename ?? 'table',
+				tableCsvSeparator: tableSection.csvSeparator ?? ',',
+				mermaid: mermaid.enabled,
+				mermaidDownload: mermaid.download,
+				mermaidDownloadFilename: mermaid.filename ?? 'diagram',
+				// Wheel zoom is a gesture, not a button: it stays on unless it is
+				// turned off explicitly or every control is.
+				mermaidMouseWheelZoom: controls !== false && mermaidSection.mouseWheelZoom !== false
 			};
 		},
+		get codeBlockMaxHeight() {
+			return codeBlockMaxHeight;
+		},
+		get tableMaxHeight() {
+			return tableMaxHeight;
+		},
 		get children() {
 			return children;
 		},
@@ -161,6 +206,12 @@
 	const blocks = $derived(
 		isStatic ? content : parseBlocks(content, streamdown.extensions, blocksCache)
 	);
+
+	// Only the tail of a live stream can be mid-fence — a static render is finished
+	// by definition. Computed once here, not per block or per token.
+	const lastBlockIncomplete = $derived(
+		!isStatic && blocks.length > 0 && hasUnclosedFence(blocks[blocks.length - 1])
+	);
 </script>
 
 <div bind:this={element} class={className}>
@@ -168,7 +219,11 @@
 		<Block static={isStatic} block={content} />
 	{:else}
 		{#each blocks as block, index (`${id}-block-${index}`)}
-			<Block static={isStatic} {block} />
+			<Block
+				static={isStatic}
+				{block}
+				incomplete={lastBlockIncomplete && index === blocks.length - 1}
+			/>
 		{/each}
 	{/if}
 </div>

package/dist/context.svelte.d.ts

@@ -4,16 +4,55 @@ import type { MermaidConfig } from 'mermaid';
 import type { KatexOptions } from 'katex';
 import type { HighlightTheme } from '@tanstack/highlight/theme';
 import type { LanguageDefinition } from '@tanstack/highlight';
+/**
+ * Every user-visible string the components render themselves. Nested by area,
+ * like the theme; `Streamdown` merges the `translations` prop over
+ * `defaultTranslations` once so components always read a complete object.
+ */
+export type Translations = {
+    alert: {
+        note: string;
+        tip: string;
+        warning: string;
+        caution: string;
+        important: string;
+    };
+    controls: {
+        copyCode: string;
+        copiedCode: string;
+        downloadCode: string;
+        copyTable: string;
+        copiedTable: string;
+        downloadTable: string;
+        tableFormatMarkdown: string;
+        tableFormatHtml: string;
+        tableFormatCsv: string;
+        tableFormatTsv: string;
+        downloadDiagram: string;
+        downloadDiagramPng: string;
+        downloadDiagramSvg: string;
+        downloadDiagramMmd: string;
+        zoomIn: string;
+        zoomOut: string;
+        resetView: string;
+        fullscreen: string;
+        exitFullscreen: string;
+        diagram: string;
+        previousCitation: string;
+        nextCitation: string;
+        blockedUrl: string;
+        imageBlocked: string;
+        imageNoDescription: string;
+        linkBlocked: string;
+    };
+};
+export declare const defaultTranslations: Translations;
 export interface StreamdownContext extends Omit<StreamdownProps, keyof Snippets | 'class' | 'theme' | 'highlightTheme' | 'inlineCitationsMode'> {
     snippets: Snippets;
     highlightTheme: HighlightTheme;
     theme: Theme;
-    controls: {
-        code: boolean;
-        mermaid: boolean;
-        mermaidMouseWheelZoom: boolean;
-        table: boolean;
-    };
+    translations: Translations;
+    controls: ResolvedControls;
     inlineCitationsMode: 'list' | 'carousel';
     animation: {
         enabled: boolean;
@@ -33,8 +72,9 @@ export declare class StreamdownContext<Source extends Record<string, any> = Reco
     });
 }
 export declare const useStreamdown: () => StreamdownContext<Record<string, any>>;
-import type { AlertToken, MathToken, SubSupToken, TableToken, THead, TBody, TFoot, THeadRow, TRow, TD, TH, Extension, GenericToken, CitationToken, MdxToken } from './marked/index.js';
+import type { AlertToken, CodeToken, MathToken, SubSupToken, TableToken, THead, TBody, TFoot, THeadRow, TRow, TD, TH, Extension, GenericToken, CitationToken, MdxToken } from './marked/index.js';
 import type { Tokens } from 'marked';
+import type { CsvSeparator } from './utils/table-export.js';
 import type { ListItemToken, ListToken } from './marked/marked-list.js';
 import type { Footnote, FootnoteRef, FootnoteToken } from './marked/marked-footnotes.js';
 import type { DescriptionDetailToken, DescriptionListToken, DescriptionTermToken, DescriptionToken } from './marked/marked-dl.js';
@@ -89,9 +129,53 @@ export type Snippets<Source extends Record<string, any> = Record<string, any>> =
             key: string;
         } : K extends 'mdx' ? {
             props: Record<string, number | string | boolean | null | undefined>;
+        } : K extends 'code' | 'mermaid' ? {
+            /** The fence is still streaming: defer expensive work. */
+            incomplete: boolean;
         } : {})
     ]>;
 };
+/** `filename` is the base name; the extension comes from the format. */
+type DownloadControl<Token> = boolean | {
+    filename?: string | ((token: Token) => string);
+};
+export type CodeControls = boolean | {
+    enabled?: boolean;
+    copy?: boolean;
+    download?: DownloadControl<CodeToken>;
+};
+export type TableControls = boolean | {
+    enabled?: boolean;
+    copy?: boolean;
+    download?: DownloadControl<TableToken>;
+    csvSeparator?: CsvSeparator;
+};
+export type MermaidControls = boolean | {
+    enabled?: boolean;
+    download?: DownloadControl<CodeToken>;
+    mouseWheelZoom?: boolean;
+};
+export type Controls = boolean | {
+    code?: CodeControls;
+    table?: TableControls;
+    mermaid?: MermaidControls;
+};
+/** What `Streamdown.svelte` flattens `controls` into, so components stay dumb. */
+export type ResolvedControls = {
+    code: boolean;
+    codeCopy: boolean;
+    codeDownload: boolean;
+    codeDownloadFilename: string | ((token: CodeToken) => string);
+    table: boolean;
+    tableCopy: boolean;
+    tableDownload: boolean;
+    tableDownloadFilename: string | ((token: TableToken) => string);
+    tableCsvSeparator: CsvSeparator;
+    mermaid: boolean;
+    mermaidDownload: boolean;
+    mermaidDownloadFilename: string | ((token: CodeToken) => string);
+    mermaidMouseWheelZoom: boolean;
+};
 export type StreamdownProps<Source extends Record<string, any> = Record<string, any>> = {
     streamdown?: StreamdownContext;
     static?: boolean;
@@ -114,23 +198,13 @@ export type StreamdownProps<Source extends Record<string, any> = Record<string,
     highlightThemes?: Record<string, HighlightTheme>;
     mermaidConfig?: MermaidConfig;
     katexConfig?: KatexOptions | ((inline: boolean) => KatexOptions);
+    /** Partial overrides; unset keys fall back to `defaultTranslations`. */
     translations?: {
-        alert?: {
-            note?: string;
-            tip?: string;
-            warning?: string;
-            caution?: string;
-            important?: string;
-        };
-    };
-    controls?: {
-        code?: boolean;
-        mermaid?: boolean | {
-            enabled?: boolean;
-            mouseWheelZoom?: boolean;
-        };
-        table?: boolean;
+        [K in keyof Translations]?: Partial<Translations[K]>;
     };
+    controls?: Controls;
+    codeBlockMaxHeight?: string;
+    tableMaxHeight?: string;
     renderHtml?: boolean | ((token: Tokens.HTML | Tokens.Tag) => string);
     animation?: {
         animateOnMount?: boolean;
@@ -171,10 +245,12 @@ export type StreamdownProps<Source extends Record<string, any> = Record<string,
         code?: Component<{
             token: Tokens.Code;
             id: string;
+            incomplete: boolean;
         }, any, any>;
         mermaid?: Component<{
             token: Tokens.Code;
             id: string;
+            incomplete: boolean;
         }, any, any>;
         math?: Component<{
             token: MathToken;

package/dist/context.svelte.js

@@ -1,4 +1,42 @@
 import { getContext, onMount, setContext } from 'svelte';
+// Alert titles stay lowercase: the theme capitalizes them with CSS.
+export const defaultTranslations = {
+    alert: {
+        note: 'note',
+        tip: 'tip',
+        warning: 'warning',
+        caution: 'caution',
+        important: 'important'
+    },
+    controls: {
+        copyCode: 'Copy code',
+        copiedCode: 'Code copied',
+        downloadCode: 'Download code',
+        copyTable: 'Copy table',
+        copiedTable: 'Table copied',
+        downloadTable: 'Download table',
+        tableFormatMarkdown: 'Markdown',
+        tableFormatHtml: 'HTML',
+        tableFormatCsv: 'CSV',
+        tableFormatTsv: 'TSV',
+        downloadDiagram: 'Download diagram',
+        downloadDiagramPng: 'PNG',
+        downloadDiagramSvg: 'SVG',
+        downloadDiagramMmd: 'MMD',
+        zoomIn: 'Zoom in',
+        zoomOut: 'Zoom out',
+        resetView: 'Zoom to fit',
+        fullscreen: 'Expand diagram',
+        exitFullscreen: 'Collapse diagram',
+        diagram: 'Diagram',
+        previousCitation: 'Previous citation',
+        nextCitation: 'Next citation',
+        blockedUrl: 'Blocked URL',
+        imageBlocked: 'Image blocked',
+        imageNoDescription: 'No description',
+        linkBlocked: 'blocked'
+    }
+};
 export class StreamdownContext {
     footnotes = {
         refs: new Map(),

package/dist/index.d.ts

@@ -1,7 +1,8 @@
 export { default as Streamdown } from './Streamdown.svelte';
-export { useStreamdown, type StreamdownProps } from './context.svelte.js';
+export { useStreamdown, defaultTranslations, type StreamdownProps, type Translations, type Controls, type CodeControls, type TableControls, type MermaidControls, type ResolvedControls } from './context.svelte.js';
+export { extractTableData, tableDataToCSV, tableDataToTSV, tableDataToMarkdown, tableDataToHTML, type TableData, type CsvSeparator } from './utils/table-export.js';
 export { theme, shadcnTheme, mergeTheme, type Theme } from './theme.js';
-export { type Extension, type StreamdownToken, lex, parseBlocks } from './marked/index.js';
+export { type CodeToken, type Extension, type StreamdownToken, lex, parseBlocks } from './marked/index.js';
 export { parseIncompleteMarkdown, type Plugin, IncompleteMarkdownParser } from './utils/parse-incomplete-markdown.js';
 export { defineLanguage, type LanguageDefinition } from '@tanstack/highlight';
 export type { HighlightTheme } from '@tanstack/highlight/theme';

package/dist/index.js

@@ -1,5 +1,6 @@
 export { default as Streamdown } from './Streamdown.svelte';
-export { useStreamdown } from './context.svelte.js';
+export { useStreamdown, defaultTranslations } from './context.svelte.js';
+export { extractTableData, tableDataToCSV, tableDataToTSV, tableDataToMarkdown, tableDataToHTML } from './utils/table-export.js';
 export { theme, shadcnTheme, mergeTheme } from './theme.js';
 export { lex, parseBlocks } from './marked/index.js';
 export { parseIncompleteMarkdown, IncompleteMarkdownParser } from './utils/parse-incomplete-markdown.js';

package/dist/marked/index.d.ts

@@ -23,7 +23,14 @@ export type Extension = {
     start?: TokenizerStartFunction;
     applyInBlockParsing?: boolean;
 };
-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 | MdxToken;
+/**
+ * A fenced code block. `lang` is the first word of the info string; everything
+ * after it is `meta` (`undefined` when there is none).
+ */
+export type CodeToken = Tokens.Code & {
+    meta?: string;
+};
+export type StreamdownToken = Exclude<MarkedToken, Tokens.List | Tokens.ListItem | Tokens.Table | Tokens.Code> | CodeToken | ListToken | ListItemToken | MathToken | AlertToken | FootnoteToken | SubSupToken | BrToken | HrToken | TableToken | THead | TBody | TFoot | THeadRow | TRow | TH | TD | DescriptionListToken | DescriptionToken | DescriptionDetailToken | DescriptionTermToken | AlignToken | CitationToken | MdxToken;
 export type { TableToken, THead, TBody, TFoot, THeadRow, TRow, TH, TD } from './marked-table.js';
 export declare const lex: (markdown: string, extensions?: Extension[]) => StreamdownToken[];
 /**