svelte-streamdown 4.1.0 → 4.2.0

package/dist/Elements/TableDownload.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
 	import { useStreamdown } from '../context.svelte.js';
 	import { scale } from 'svelte/transition';
-	import { checkIcon, copyIcon, downloadIcon } from './icons.js';
+	import { checkIcon, closeIcon, copyIcon, downloadIcon, fullscreenIcon } from './icons.js';
 	import { Popover } from './popover.svelte.js';
 	import { useClickOutside } from '../utils/useClickOutside.svelte.js';
 	import { useKeyDown } from '../utils/useKeyDown.svelte.js';
+	import { useExpand } from '../utils/expand.svelte.js';
 	import type { TableToken } from '../marked/marked-table.js';
 	import { useCopy } from '../utils/copy.svelte.js';
 	import { save } from '../utils/save.js';
@@ -15,10 +16,13 @@
 
 	let {
 		token,
-		id
+		id,
+		expanded = $bindable(false)
 	}: {
 		token: TableToken;
 		id: string;
+		/** Owned by the caller: the wrapper it renders is what expands. */
+		expanded?: boolean;
 	} = $props();
 	const streamdown = useStreamdown();
 	const popover = new Popover();
@@ -76,7 +80,22 @@
 		}
 	};
 
-	const tableElement = () => document.querySelector(`[data-streamdown-table="${id}"]`);
+	const tableElement = () => document.querySelector<HTMLElement>(`[data-streamdown-table="${id}"]`);
+
+	const expand = useExpand({
+		get expanded() {
+			return expanded;
+		},
+		set expanded(value: boolean) {
+			expanded = value;
+		},
+		getTarget: tableElement
+	});
+	const expandLabel = $derived(
+		expanded
+			? streamdown.translations.controls.exitTableFullscreen
+			: streamdown.translations.controls.tableFullscreen
+	);
 
 	const copyOrDownload = (type: Format) => {
 		if (type === 'Markdown') {
@@ -145,9 +164,15 @@
 	</dialog>
 {/if}
 
+<!-- The wrapper this toolbar controls becomes `position: fixed` when expanded,
+     so the buttons have to leave the flow with it or they end up underneath. -->
 <div
 	data-streamdown-table-download
 	class=" right-0 ml-auto flex items-center justify-end gap-2 p-1"
+	style:position={expanded ? 'fixed' : undefined}
+	style:top={expanded ? '24px' : undefined}
+	style:right={expanded ? '32px' : undefined}
+	style:z-index={expanded ? 2147483647 : undefined}
 >
 	{#each modes as mode (mode)}
 		<button
@@ -186,6 +211,22 @@
 			{/if}
 		</button>
 	{/each}
+	{#if streamdown.controls.tableFullscreen}
+		<button
+			class={streamdown.theme.components.button}
+			onclick={(e) => expand.toggle(e.currentTarget)}
+			type="button"
+			title={expandLabel}
+			aria-label={expandLabel}
+			aria-pressed={expanded}
+		>
+			{#if expanded}
+				{@render (streamdown.icons?.close || closeIcon)()}
+			{:else}
+				{@render (streamdown.icons?.fullscreen || fullscreenIcon)()}
+			{/if}
+		</button>
+	{/if}
 	<span aria-live="polite" style={srOnly}
 		>{copy.isCopied ? streamdown.translations.controls.copiedTable : ''}</span
 	>

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

@@ -2,7 +2,9 @@ import type { TableToken } from '../marked/marked-table.js';
 type $$ComponentProps = {
     token: TableToken;
     id: string;
+    /** Owned by the caller: the wrapper it renders is what expands. */
+    expanded?: boolean;
 };
-declare const TableDownload: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const TableDownload: import("svelte").Component<$$ComponentProps, {}, "expanded">;
 type TableDownload = ReturnType<typeof TableDownload>;
 export default TableDownload;

package/dist/Elements/fallbacks/CodeFallback.svelte

@@ -1,17 +1,20 @@
 <script lang="ts">
 	import { useStreamdown } from '../../context.svelte.js';
 	import { usePinnedScroll } from '../../utils/usePinnedScroll.svelte.js';
-	import type { Tokens } from 'marked';
+	import { resolveLineNumbers } from '../../utils/line-numbers.js';
+	import type { CodeToken } from '../../marked/index.js';
 
 	const {
 		token,
 		id,
-		incomplete = false
+		incomplete = false,
+		animate = true
 	}: {
-		token: Tokens.Code;
+		token: CodeToken;
 		id: string;
 		/** The fence is still being streamed; nothing below it is final yet. */
 		incomplete?: boolean;
+		animate?: boolean;
 	} = $props();
 
 	const streamdown = useStreamdown();
@@ -22,6 +25,8 @@
 	// too.
 	const code = $derived(token.text.replace(/\n+$/, ''));
 
+	const lineNumbers = $derived(resolveLineNumbers(token.meta, streamdown.lineNumbers ?? false));
+
 	// Same scroll container as Code.svelte: `pre` already scrolls horizontally.
 	const pinnedScroll = usePinnedScroll({
 		get maxHeight() {
@@ -36,7 +41,7 @@
 <div
 	data-streamdown-code={id}
 	data-incomplete={incomplete || undefined}
-	style={streamdown.isMounted ? streamdown.animationBlockStyle : ''}
+	style={animate && streamdown.isMounted ? streamdown.animationBlockStyle : ''}
 	class={streamdown.theme.code.base}
 >
 	<div class={streamdown.theme.code.header}>
@@ -45,11 +50,16 @@
 	<div style="height: fit-content; width: 100%;" class={streamdown.theme.code.container}>
 		<pre
 			class={streamdown.theme.code.pre}
+			data-line-numbers={lineNumbers.enabled || undefined}
+			style:counter-reset={lineNumbers.enabled ? `sd-line ${lineNumbers.start - 1}` : undefined}
 			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 : ''}
+				>{#each code.split('\n') as line}<span
+						class="{streamdown.theme.code.line}{lineNumbers.enabled
+							? ` ${streamdown.theme.code.lineNumber}`
+							: ''}"
+						><span style={animate && streamdown.isMounted ? streamdown.animationTextStyle : ''}
 							>{line.trim().length > 0 ? line : '\u200B'}</span
 						></span
 					>{/each}</code

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

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

package/dist/Elements/icons.d.ts

@@ -5,5 +5,6 @@ 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 closeIcon: import("svelte").Snippet<[]>;
 export declare const chevronRight: import("svelte").Snippet<[]>;
 export declare const chevronLeft: import("svelte").Snippet<[]>;

package/dist/Elements/icons.js

@@ -142,6 +142,14 @@ export const fullscreenIcon = createRawSnippet(() => {
 		`
     };
 });
+export const closeIcon = createRawSnippet(() => {
+    return {
+        render: () => `
+		<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="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+		`
+    };
+});
 export const chevronRight = createRawSnippet(() => {
     return {
         render: () => `

package/dist/Streamdown.svelte

@@ -6,7 +6,13 @@
 		type StreamdownProps
 	} from './context.svelte.js';
 	import { mergeTheme, shadcnTheme } from './theme.js';
-	import { parseBlocks, createParseBlocksCache } from './marked/index.js';
+	import {
+		parseBlocks,
+		createParseBlocksCache,
+		compileTags,
+		DEFAULT_TAGS
+	} from './marked/index.js';
+	import { normalizeHtmlIndentation as dedentHtml } from './utils/normalize-html-indentation.js';
 	import { hasUnclosedFence } from './utils/fence.js';
 
 	let {
@@ -30,6 +36,7 @@
 		controls,
 		codeBlockMaxHeight,
 		tableMaxHeight,
+		lineNumbers = false,
 		animation,
 		element = $bindable(),
 		icons,
@@ -38,6 +45,9 @@
 		sources,
 		inlineCitationsMode = 'carousel',
 		mdxComponents,
+		customTags,
+		literalTagContent,
+		normalizeHtmlIndentation = false,
 		components,
 		static: isStatic,
 		...snippets
@@ -55,6 +65,24 @@
 		mermaidConfig?.theme ? mermaidConfig.theme : darkMode.current ? 'dark' : 'default'
 	);
 
+	// Per-instance incremental state: append-only content updates re-lex only
+	// the last couple of blocks instead of the whole document.
+	const blocksCache = createParseBlocksCache();
+
+	// One compile per allowlist identity, shared by the lexer and the streaming
+	// completer so the two can never disagree about what counts as a tag.
+	const tags = $derived.by(() => {
+		const names = [...(customTags ?? []), ...Object.keys(mdxComponents ?? {})];
+		// With nothing to compile, share DEFAULT_TAGS: the lexer options cache is
+		// keyed on this object, so a private copy per instance would rebuild and
+		// retain its own ~20 tokenizer registrations for no reason.
+		return names.length === 0 && !literalTagContent?.length
+			? DEFAULT_TAGS
+			: compileTags(names, literalTagContent);
+	});
+
+	const source = $derived(normalizeHtmlIndentation ? dedentHtml(content) : content);
+
 	streamdown = new StreamdownContext({
 		get element() {
 			return element;
@@ -77,6 +105,12 @@
 		get highlightTheme() {
 			return resolvedHighlightTheme;
 		},
+		get animateUpdate() {
+			// A streamed chunk keeps animating; a replacement or a bulk append (the
+			// demo's "Show All" is an append of 95% of the document) renders plain.
+			// The first parse stays animatable so `animateOnMount` keeps its meaning.
+			return blocksCache.lastUpdate !== 'bulk';
+		},
 		get snippets() {
 			return snippets;
 		},
@@ -166,6 +200,7 @@
 				tableCopy: table.copy,
 				tableDownload: table.download,
 				tableDownloadFilename: table.filename ?? 'table',
+				tableFullscreen: table.enabled && tableSection.fullscreen !== false,
 				tableCsvSeparator: tableSection.csvSeparator ?? ',',
 				mermaid: mermaid.enabled,
 				mermaidDownload: mermaid.download,
@@ -178,6 +213,9 @@
 		get codeBlockMaxHeight() {
 			return codeBlockMaxHeight;
 		},
+		get lineNumbers() {
+			return lineNumbers;
+		},
 		get tableMaxHeight() {
 			return tableMaxHeight;
 		},
@@ -193,6 +231,9 @@
 		get mdxComponents() {
 			return mdxComponents;
 		},
+		get tags() {
+			return tags;
+		},
 		get components() {
 			return components;
 		}
@@ -200,11 +241,8 @@
 
 	const id = $props.id();
 
-	// Per-instance incremental state: append-only content updates re-lex only
-	// the last couple of blocks instead of the whole document.
-	const blocksCache = createParseBlocksCache();
 	const blocks = $derived(
-		isStatic ? content : parseBlocks(content, streamdown.extensions, blocksCache)
+		isStatic ? source : parseBlocks(source, streamdown.extensions, blocksCache, tags)
 	);
 
 	// Only the tail of a live stream can be mid-fence — a static render is finished
@@ -216,12 +254,13 @@
 
 <div bind:this={element} class={className}>
 	{#if isStatic}
-		<Block static={isStatic} block={content} />
+		<Block static={isStatic} block={source} />
 	{:else}
 		{#each blocks as block, index (`${id}-block-${index}`)}
 			<Block
 				static={isStatic}
 				{block}
+				live={index === blocks.length - 1}
 				incomplete={lastBlockIncomplete && index === blocks.length - 1}
 			/>
 		{/each}
@@ -230,6 +269,29 @@
 
 <style global>
 	:global {
+		/* Line numbers: a counter on the line span that already exists (why it is
+		   here and not in the theme: see resolveLineNumbers). CSS ships as a string
+		   at runtime, so keep this short. */
+		[data-streamdown-code] pre[data-line-numbers] > code > span {
+			counter-increment: sd-line;
+		}
+
+		[data-streamdown-code] pre[data-line-numbers] > code > span::before {
+			content: counter(sd-line);
+		}
+
+		/* Lives here, not in Mermaid.svelte: the table overlay needs it on pages
+		   that never render a diagram. */
+		[data-expanded='true'] {
+			position: fixed;
+			top: 16px;
+			left: 16px;
+			width: calc(100vw - 32px);
+			height: calc(100vh - 32px);
+			z-index: 2147483647;
+			margin: 0px;
+		}
+
 		@keyframes sd-fade {
 			from {
 				opacity: 0;

package/dist/context.svelte.d.ts

@@ -28,6 +28,9 @@ export type Translations = {
         tableFormatHtml: string;
         tableFormatCsv: string;
         tableFormatTsv: string;
+        tableFullscreen: string;
+        exitTableFullscreen: string;
+        table: string;
         downloadDiagram: string;
         downloadDiagramPng: string;
         downloadDiagramSvg: string;
@@ -48,8 +51,12 @@ export type Translations = {
 };
 export declare const defaultTranslations: Translations;
 export interface StreamdownContext extends Omit<StreamdownProps, keyof Snippets | 'class' | 'theme' | 'highlightTheme' | 'inlineCitationsMode'> {
+    /** `customTags` + `mdxComponents` keys compiled once; lexer and completer share it. */
+    tags: TagMatchers;
     snippets: Snippets;
     highlightTheme: HighlightTheme;
+    /** False while rendering a bulk update (a replacement or a paste-sized append); Block captures it per update. */
+    animateUpdate: boolean;
     theme: Theme;
     translations: Translations;
     controls: ResolvedControls;
@@ -69,10 +76,12 @@ export declare class StreamdownContext<Source extends Record<string, any> = Reco
     constructor(props: Omit<StreamdownProps, keyof Snippets | 'class' | 'highlightTheme'> & {
         snippets: Snippets<Source>;
         highlightTheme: HighlightTheme;
+        animateUpdate: boolean;
+        tags: TagMatchers;
     });
 }
 export declare const useStreamdown: () => StreamdownContext<Record<string, any>>;
-import type { AlertToken, CodeToken, 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, TagMatchers } 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';
@@ -148,6 +157,7 @@ export type TableControls = boolean | {
     enabled?: boolean;
     copy?: boolean;
     download?: DownloadControl<TableToken>;
+    fullscreen?: boolean;
     csvSeparator?: CsvSeparator;
 };
 export type MermaidControls = boolean | {
@@ -170,6 +180,7 @@ export type ResolvedControls = {
     tableCopy: boolean;
     tableDownload: boolean;
     tableDownloadFilename: string | ((token: TableToken) => string);
+    tableFullscreen: boolean;
     tableCsvSeparator: CsvSeparator;
     mermaid: boolean;
     mermaidDownload: boolean;
@@ -203,6 +214,13 @@ export type StreamdownProps<Source extends Record<string, any> = Record<string,
         [K in keyof Translations]?: Partial<Translations[K]>;
     };
     controls?: Controls;
+    /**
+     * Number the lines of every code block. Default false — upstream defaults it on,
+     * but turning it on here would change every existing render. A fence can flip it
+     * either way with a `lineNumbers` / `noLineNumbers` meta word, and start at N with
+     * `startLine=N`.
+     */
+    lineNumbers?: boolean;
     codeBlockMaxHeight?: string;
     tableMaxHeight?: string;
     renderHtml?: boolean | ((token: Tokens.HTML | Tokens.Tag) => string);
@@ -218,6 +236,7 @@ export type StreamdownProps<Source extends Record<string, any> = Record<string,
         copy?: Snippet;
         download?: Snippet;
         fullscreen?: Snippet;
+        close?: Snippet;
         zoomIn?: Snippet;
         zoomOut?: Snippet;
         fitView?: Snippet;
@@ -231,6 +250,21 @@ export type StreamdownProps<Source extends Record<string, any> = Record<string,
         check?: Snippet;
     };
     extensions?: Extension[];
+    /**
+     * Extra tag names the MDX tokenizer accepts on top of PascalCase, so
+     * `<ai-thinking>**bold**</ai-thinking>` becomes a component with parsed
+     * children instead of a literal html block. Keys of `mdxComponents` are
+     * allowed automatically; nothing else lowercase is, so real HTML is untouched.
+     */
+    customTags?: string[];
+    /** Tags whose children render verbatim — no Markdown, `**` and `_` left alone. */
+    literalTagContent?: string[];
+    /**
+     * Dedent pretty-printed HTML before parsing, so a nested `<div>` indented four
+     * spaces after a blank line is not read as an indented code block. Off by
+     * default: dedenting is lossy, and `<pre>`/`<code>` bodies are never touched.
+     */
+    normalizeHtmlIndentation?: boolean;
     children?: Snippet<[{
         streamdown: StreamdownContext;
         token: GenericToken;
@@ -246,11 +280,13 @@ export type StreamdownProps<Source extends Record<string, any> = Record<string,
             token: Tokens.Code;
             id: string;
             incomplete: boolean;
+            animate: boolean;
         }, any, any>;
         mermaid?: Component<{
             token: Tokens.Code;
             id: string;
             incomplete: boolean;
+            animate: boolean;
         }, any, any>;
         math?: Component<{
             token: MathToken;

package/dist/context.svelte.js

@@ -19,6 +19,9 @@ export const defaultTranslations = {
         tableFormatHtml: 'HTML',
         tableFormatCsv: 'CSV',
         tableFormatTsv: 'TSV',
+        tableFullscreen: 'Expand table',
+        exitTableFullscreen: 'Collapse table',
+        table: 'Table',
         downloadDiagram: 'Download diagram',
         downloadDiagramPng: 'PNG',
         downloadDiagramSvg: 'SVG',

package/dist/index.d.ts

@@ -2,7 +2,8 @@ export { default as Streamdown } from './Streamdown.svelte';
 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 CodeToken, type Extension, type StreamdownToken, lex, parseBlocks } from './marked/index.js';
-export { parseIncompleteMarkdown, type Plugin, IncompleteMarkdownParser } from './utils/parse-incomplete-markdown.js';
+export { type CodeToken, type Extension, type StreamdownToken, type TagMatchers, compileTags, lex, parseBlocks } from './marked/index.js';
+export { normalizeHtmlIndentation } from './utils/normalize-html-indentation.js';
+export { parseIncompleteMarkdown, type Plugin, type CompleterOptions, 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

@@ -2,6 +2,7 @@ export { default as Streamdown } from './Streamdown.svelte';
 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 { compileTags, lex, parseBlocks } from './marked/index.js';
+export { normalizeHtmlIndentation } from './utils/normalize-html-indentation.js';
 export { parseIncompleteMarkdown, IncompleteMarkdownParser } from './utils/parse-incomplete-markdown.js';
 export { defineLanguage } from '@tanstack/highlight';

package/dist/marked/index.d.ts

@@ -10,7 +10,7 @@ import { type TableToken, type THead, type TBody, type TFoot, type THeadRow, typ
 import { type DescriptionDetailToken, type DescriptionListToken, type DescriptionTermToken, type DescriptionToken } from './marked-dl.js';
 import { type AlignToken } from './marked-align.js';
 import { type CitationToken } from './marked-citations.js';
-import { type MdxToken } from './marked-mdx.js';
+import { type MdxToken, type TagMatchers } from './marked-mdx.js';
 export type GenericToken = {
     type: string;
     raw: string;
@@ -32,7 +32,7 @@ export type CodeToken = Tokens.Code & {
 };
 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[];
+export declare const lex: (markdown: string, extensions?: Extension[], tags?: TagMatchers) => StreamdownToken[];
 /**
  * Opaque incremental state for `parseBlocks`. Create one per Streamdown
  * instance (or per simulated stream) and pass it on every call: append-only
@@ -57,7 +57,14 @@ export type ParseBlocksCache = {
     keptBefore: number[];
     /** persistent list of kept raws; only its tail is rewritten on append */
     blocks: string[];
+    /**
+     * What kind of update the last call was. Rendering skips the streaming
+     * animation on a `bulk` one — a replacement, or an append far larger than any
+     * streamed chunk — where ~10k spans would otherwise all animate in one frame.
+     */
+    lastUpdate: 'first' | 'stream' | 'bulk';
 };
 export declare const createParseBlocksCache: () => ParseBlocksCache;
-export declare const parseBlocks: (markdown: string, extensions?: Extension[], cache?: ParseBlocksCache) => string[];
-export type { MathToken, AlertToken, FootnoteToken, SubSupToken, BrToken, HrToken, AlignToken, CitationToken, MdxToken };
+export declare const parseBlocks: (markdown: string, extensions?: Extension[], cache?: ParseBlocksCache, tags?: TagMatchers) => string[];
+export { compileTags, DEFAULT_TAGS } from './marked-mdx.js';
+export type { TagMatchers, MathToken, AlertToken, FootnoteToken, SubSupToken, BrToken, HrToken, AlignToken, CitationToken, MdxToken };