svelte-streamdown 2.0.4 → 2.2.0

package/README.md

@@ -1,6 +1,6 @@
 # Svelte Streamdown
 
-[![npm version](https://badge.fury.io/js/svelte-streamdown.svg)](https://badge.fury.io/js/svelte-streamdown)
+![npm version](https://badge.fury.io/js/svelte-streamdown.svg)
 
 A **Svelte port** of [Streamdown](https://streamdown.ai/) by Vercel - an all in one markdown renderer, designed specifically for AI-powered streaming applications.
 
@@ -26,6 +26,8 @@ Perfect for AI-powered applications that need to stream and render markdown cont
 - **Incomplete Markdown Parsing**: Handles unterminated blocks gracefully
 - **Progressive Rendering**: Perfect for streaming AI responses
 - **Real-time Updates**: Optimized for dynamic content
+- **Smooth Animations**: Animate tokens and blocks as they are streamed.
+
 
 ### 🔒 Security Hardening
 
@@ -259,6 +261,46 @@ This Svelte port maintains feature parity with the original [Streamdown](https:/
 @source "../node_modules/svelte-streamdown/**/*";
 ```
 
+
+
+## 🎭 Animation System
+
+Streamdown includes a sophisticated animation system designed specifically for streaming AI content, providing smooth and engaging visual feedback as text appears on screen.
+
+### How It Works
+
+The animation system works by:
+
+1. **Tokenization**: Text is broken down into tokens (words or characters) based on your configuration
+2. **Sequential Animation**: Each token animates in sequence with configurable timing
+3. **Block-level Animation**: Entire blocks (paragraphs, headings, code blocks) animate as units
+
+### Animation Types
+
+Choose from five distinct animation styles:
+
+#### `fade`
+A clean fade-in effect where text smoothly appears from transparent to opaque.
+
+#### `blur`
+Text starts slightly blurred and comes into focus while fading in, creating a smooth reveal effect.
+
+#### `typewriter`
+A typewriter effect where text appears character by character, mimicking the look of someone typing.
+
+#### `slideUp`
+Text slides up from below while fading in, creating a dynamic upward motion.
+
+#### `slideDown`
+Text slides down from above while fading in, creating a dynamic downward motion.
+
+> [!TIP]
+> For production applications where the LLM is not streaming (static content), disable animations entirely by setting `animation.enabled = false` to minimize DOM elements and improve performance.
+
+> [!WARNING]
+> Character-level tokenization (`tokenize: 'char'`) creates significantly more DOM elements than word-level tokenization. Use character tokenization sparingly and only when the typewriter effect is essential for your user experience.
+
+
 ## 🚀 Quick Start
 
 ### Basic Usage
@@ -338,6 +380,12 @@ This heading will use a custom component!`;
 | `shikiTheme`              | `BundledTheme`                                        | `'github-light'` | Code highlighting theme                        |
 | `mermaidConfig`           | `MermaidConfig`                                       | -                | Mermaid diagram configuration                  |
 | `katexConfig`             | `KatexOptions \| ((inline: boolean) => KatexOptions)` | -                | KaTeX math rendering options                   |
+| `animation`               | `AnimationConfig`                                     | -                | Animation configuration for streaming content  |
+| `animation.enabled`       | `boolean`                                             | `false`          | Enable/disable animations                      |
+| `animation.type`          | `'fade' \| 'blur' \| 'typewriter' \| 'slideUp' \| 'slideDown'` | `'blur'`         | Animation style for text appearance           |
+| `animation.duration`      | `number`                                              | `500`            | Animation duration in milliseconds             |
+| `animation.timingFunction`| `'ease' \| 'ease-in' \| 'ease-out' \| 'ease-in-out' \| 'linear'` | `'ease-in'`      | CSS timing function for animations             |
+| `animation.tokenize`      | `'word' \| 'char'`                                    | `'word'`         | Tokenization method for text animations        |
 
 ### Custom Component Props
 

package/dist/AnimatedBlock.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { useStreamdown } from './streamdown.svelte.js';
+
+	let { children }: { children: Snippet } = $props();
+
+	const streamdown = useStreamdown();
+
+	const isMounted = streamdown.isMounted;
+</script>
+
+{#if isMounted}
+	<div style={streamdown.animationBlockStyle}>
+		{@render children()}
+	</div>
+{:else}
+	{@render children()}
+{/if}

package/dist/AnimatedBlock.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children: Snippet;
+};
+declare const AnimatedBlock: import("svelte").Component<$$ComponentProps, {}, "">;
+type AnimatedBlock = ReturnType<typeof AnimatedBlock>;
+export default AnimatedBlock;

package/dist/AnimatedText.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { useStreamdown } from './streamdown.svelte.js';
+
+	let { text }: { text: string } = $props();
+
+	const streamdown = useStreamdown();
+
+	const tokenizeNewContent = (text: string) => {
+		if (!text) return [];
+
+		let splitRegex;
+		if (streamdown.animation.tokenize === 'word') {
+			splitRegex = /(\s+)/;
+		} else {
+			splitRegex = /(.)/;
+		}
+
+		return text.split(splitRegex).filter((token) => token.length > 0);
+	};
+
+	let tokens = $derived.by(() => {
+		return tokenizeNewContent(text);
+	});
+
+	const isMounted = streamdown.isMounted;
+</script>
+
+{#if isMounted}
+	<span>
+		{#each tokens as token}
+			<span style={streamdown.animationTextStyle}>
+				{token}
+			</span>
+		{/each}
+	</span>
+{:else}
+	{text}
+{/if}

package/dist/AnimatedText.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    text: string;
+};
+declare const AnimatedText: import("svelte").Component<$$ComponentProps, {}, "">;
+type AnimatedText = ReturnType<typeof AnimatedText>;
+export default AnimatedText;

package/dist/Block.svelte

@@ -1,28 +1,33 @@
-<script lang="ts" module>
-</script>
-
 <script lang="ts">
 	import { parseIncompleteMarkdown } from './utils/parse-incomplete-markdown.js';
 	import Element from './Elements/Element.svelte';
 	import { lex, type StreamdownToken } from './marked/index.js';
+	import AnimatedText from './AnimatedText.svelte';
+	import { useStreamdown } from './streamdown.svelte.js';
+	import AnimatedBlock from './AnimatedBlock.svelte';
 
 	let {
 		block
 	}: {
 		block: string;
 	} = $props();
-
+	const id = $props.id();
 	const tokens = $derived(lex(parseIncompleteMarkdown(block.trim())));
+	const streamdown = useStreamdown();
 </script>
 
 {#snippet renderChildren(tokens: StreamdownToken[])}
-	{#each tokens as token}
+	{#each tokens as token, i (`${id}-block-${i}`)}
 		{#if token}
 			{@const children = (token as any)?.tokens || []}
 			{@const isTextOnlyNode = children.length === 0}
 			<Element {token}>
 				{#if isTextOnlyNode}
-					{'text' in token ? token.text : ''}
+					{#if streamdown.animation.enabled}
+						<AnimatedText text={'text' in token ? token.text : ''} />
+					{:else}
+						{'text' in token ? token.text : ''}
+					{/if}
 				{:else}
 					{@render renderChildren(children)}
 				{/if}
@@ -31,4 +36,10 @@
 	{/each}
 {/snippet}
 
-{@render renderChildren(tokens)}
+{#if streamdown.animation.enabled}
+	<AnimatedBlock>
+		{@render renderChildren(tokens)}
+	</AnimatedBlock>
+{:else}
+	{@render renderChildren(tokens)}
+{/if}

package/dist/Elements/Alert.svelte

@@ -13,7 +13,7 @@
 	/><path d="M12 17h.01" />`
 	};
 
-	import { useStreamdown } from '../Streamdown.js';
+	import { useStreamdown } from '../streamdown.svelte.js';
 	import Slot from './Slot.svelte';
 	import type { AlertToken } from '../marked/index.js';
 	import type { Snippet } from 'svelte';

package/dist/Elements/Code.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
-	import { useStreamdown } from '../Streamdown.js';
+	import { useStreamdown } from '../streamdown.svelte.js';
 	import { save } from '../utils/save.js';
 	import { useCopy } from '../utils/copy.svelte.js';
 	import { HighlighterManager, languageExtensionMap } from '../utils/hightlighter.svelte.js';
 	import type { Tokens } from 'marked';
-	import type { Snippet } from 'svelte';
 
 	const {
 		token
@@ -47,21 +46,23 @@
 <div class={streamdown.theme.code.base} data-language={language}>
 	<div class={streamdown.theme.code.header} data-code-block-header data-language={language}>
 		<span class={streamdown.theme.code.language}>{language}</span>
-		<div class="flex items-center gap-2">
-			<!-- Download button snippet -->
-			<button
-				class={streamdown.theme.code.button}
-				onclick={downloadCode}
-				title="Download file"
-				type="button"
-			>
-				{@render downloadIcon()}
-			</button>
+		{#if streamdown.controls.code}
+			<div class="flex items-center gap-2">
+				<!-- Download button snippet -->
+				<button
+					class={streamdown.theme.code.button}
+					onclick={downloadCode}
+					title="Download file"
+					type="button"
+				>
+					{@render downloadIcon()}
+				</button>
 
-			<button class={streamdown.theme.code.button} onclick={copy.copy} type="button">
-				{@render copyIcon()}
-			</button>
-		</div>
+				<button class={streamdown.theme.code.button} onclick={copy.copy} type="button">
+					{@render copyIcon()}
+				</button>
+			</div>
+		{/if}
 	</div>
 	<div style="height: fit-content; width: 100%;" class={streamdown.theme.code.container}>
 		<div>

package/dist/Elements/Element.svelte

@@ -8,16 +8,13 @@
 	import Alert from './Alert.svelte';
 	import type { StreamdownToken } from '../marked/index.js';
 	import Slot from './Slot.svelte';
-	import { useStreamdown } from '../Streamdown.js';
+	import { useStreamdown } from '../streamdown.svelte.js';
 	import FootnoteRef from './FootnoteRef.svelte';
 	let { token, children }: { token: StreamdownToken; children: Snippet } = $props();
-	const id = $props.id();
 	const streamdown = useStreamdown();
 </script>
 
 {#if token.type === 'heading'}
-	{@const level = `h${token.depth}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'}
-	{@const className = streamdown.theme[level].base}
 	<Slot
 		props={{
 			children,
@@ -25,9 +22,31 @@
 		}}
 		render={streamdown.snippets.heading}
 	>
-		<svelte:element this={level} class={className}>
-			{@render children()}
-		</svelte:element>
+		{#if token.depth === 1}
+			<h1 class={streamdown.theme[`h${token.depth}`].base}>
+				{@render children()}
+			</h1>
+		{:else if token.depth === 2}
+			<h2 class={streamdown.theme[`h${token.depth}`].base}>
+				{@render children()}
+			</h2>
+		{:else if token.depth === 3}
+			<h3 class={streamdown.theme[`h${token.depth}`].base}>
+				{@render children()}
+			</h3>
+		{:else if token.depth === 4}
+			<h4 class={streamdown.theme[`h${token.depth}`].base}>
+				{@render children()}
+			</h4>
+		{:else if token.depth === 5}
+			<h5 class={streamdown.theme[`h${token.depth}`].base}>
+				{@render children()}
+			</h5>
+		{:else if token.depth === 6}
+			<h6 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}>
@@ -52,7 +71,7 @@
 {:else if token.type === 'codespan'}
 	<Slot props={{ children, token }} render={streamdown.snippets.codespan}>
 		<code class={streamdown.theme.codespan.base}>
-			{token.text}
+			{@render children()}
 		</code>
 	</Slot>
 {:else if token.type === 'list'}
@@ -203,6 +222,12 @@
 	<Alert {token} {children} />
 {:else if token.type === 'footnoteRef'}
 	<FootnoteRef {token} />
+{:else if token.type === 'html'}
+	{#if streamdown.renderHtml}
+		{@const content =
+			typeof streamdown.renderHtml === 'function' ? streamdown.renderHtml(token) : token.raw}
+		{@html content}
+	{/if}
 {:else}
 	<!-- For tokens we don't handle specifically, render children or fallback -->
 	{@render children?.()}

package/dist/Elements/FootnoteRef.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { useStreamdown } from '../Streamdown.js';
+	import { useStreamdown } from '../streamdown.svelte.js';
 	import Slot from './Slot.svelte';
 	import type { FootnoteRef } from '../marked/marked-footnotes.js';
 	import {
@@ -52,7 +52,6 @@
 		const middleware = [
 			hide(),
 			offset(0),
-			,
 			shift({
 				mainAxis: true
 			}),
@@ -80,6 +79,7 @@
 			off();
 		};
 	};
+	const isMounted = streamdown.isMounted;
 </script>
 
 {#if isOpen}
@@ -113,6 +113,7 @@
 	render={streamdown.snippets.footnoteRef}
 >
 	<button
+		style={isMounted ? streamdown.animationBlockStyle : ''}
 		bind:this={reference}
 		class={streamdown.theme.footnoteRef.base}
 		onclick={() => (isOpen = !isOpen)}

package/dist/Elements/Image.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { useStreamdown } from '../Streamdown.js';
+	import { useStreamdown } from '../streamdown.svelte.js';
 	import { transformUrl } from '../utils/url.js';
 	import Slot from './Slot.svelte';
 	import type { Tokens } from 'marked';
@@ -30,9 +30,9 @@
 		}}
 		render={streamdown.snippets.image}
 	>
-		<div class={streamdown.theme.image.base}>
+		<span class={streamdown.theme.image.base}>
 			<img class={streamdown.theme.image.image} src={transformedUrl} alt={token.text} />
-		</div>
+		</span>
 	</Slot>
 {:else}
 	<span

package/dist/Elements/Link.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { useStreamdown } from '../Streamdown.js';
+	import { useStreamdown } from '../streamdown.svelte.js';
 	import { transformUrl } from '../utils/url.js';
 	import Slot from './Slot.svelte';
 	import type { Tokens } from 'marked';

package/dist/Elements/Math.svelte

@@ -1,9 +1,7 @@
 <script lang="ts">
 	import { onMount, untrack } from 'svelte';
-	import { useStreamdown } from '../Streamdown.js';
-	import Slot from './Slot.svelte';
+	import { useStreamdown } from '../streamdown.svelte.js';
 	import type { MathToken } from '../marked/index.js';
-	import type { Snippet } from 'svelte';
 	import type { KatexOptions } from 'katex';
 	import 'katex/dist/katex.min.css';
 
@@ -47,10 +45,16 @@
 			});
 		}
 	});
+
+	const isMounted = streamdown.isMounted;
 </script>
 
 {#if isInline}
-	<span bind:this={inner} class={streamdown.theme.math.inline}>
+	<span
+		style={isMounted ? streamdown.animationBlockStyle : ''}
+		bind:this={inner}
+		class={streamdown.theme.math.inline}
+	>
 		{@html html}
 	</span>
 {:else}

package/dist/Elements/Mermaid.svelte

@@ -1,9 +1,7 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { useStreamdown } from '../Streamdown.js';
-	import Slot from './Slot.svelte';
+	import { useStreamdown } from '../streamdown.svelte.js';
 	import type { Tokens } from 'marked';
-	import type { Snippet } from 'svelte';
 	import type { MermaidConfig } from 'mermaid';
 	import { on } from 'svelte/events';
 	import { usePanzoom } from '../utils/panzoom.svelte';
@@ -178,9 +176,7 @@
 			const mergedConfig = { ...defaultConfig };
 			mermaid.initialize(mergedConfig);
 
-			// Use a stable ID based on chart content hash and timestamp to ensure uniqueness
 			const chartHash = code.split('').reduce((acc, char) => {
-				// biome-ignore lint/suspicious/noBitwiseOperators: "Required for Mermaid"
 				return ((acc << 5) - acc + char.charCodeAt(0)) | 0;
 			}, 0);
 
@@ -196,7 +192,6 @@
 				svgTarget.setAttribute(attribute.name, attribute.value);
 			});
 			svgTarget.innerHTML = svg.innerHTML;
-			// After rendering, fit the SVG within its parent container
 
 			panzoom.zoomToFit();
 			panzoom.zoomToFit();
@@ -216,101 +211,103 @@
 		{@attach insider.attach}
 		data-expanded={'false'}
 	>
-		<div class={streamdown.theme.mermaid.buttons}>
-			<button
-				class={streamdown.theme.mermaid.button}
-				aria-label="Zoom to fit"
-				onclick={() => panzoom.zoomToFit()}
-				data-panzoom-ignore
-			>
-				<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
+		{#if streamdown.controls.mermaid}
+			<div class={streamdown.theme.mermaid.buttons}>
+				<button
+					class={streamdown.theme.mermaid.button}
+					aria-label="Zoom to fit"
+					onclick={() => panzoom.zoomToFit()}
+					data-panzoom-ignore
 				>
-			</button>
-			<button
-				class={streamdown.theme.mermaid.button}
-				aria-label="Zoom in"
-				onclick={() => panzoom.zoomIn()}
-				data-panzoom-ignore
-			>
-				<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"
-					><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
+					<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
+					>
+				</button>
+				<button
+					class={streamdown.theme.mermaid.button}
+					aria-label="Zoom in"
+					onclick={() => panzoom.zoomIn()}
+					data-panzoom-ignore
 				>
-			</button>
-			<button
-				class={streamdown.theme.mermaid.button}
-				aria-label="Zoom out"
-				onclick={() => panzoom.zoomOut()}
-				data-panzoom-ignore
-				><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"
-					><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
-				></button
-			>
-			<button
-				class={streamdown.theme.mermaid.button}
-				aria-label="Toggle expand"
-				onclick={() => panzoom.toggleExpand()}
-				data-panzoom-ignore
-			>
-				<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
+					<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"
+						><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
+					>
+				</button>
+				<button
+					class={streamdown.theme.mermaid.button}
+					aria-label="Zoom out"
+					onclick={() => panzoom.zoomOut()}
+					data-panzoom-ignore
+					><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"
+						><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
+					></button
 				>
-			</button>
-		</div>
+				<button
+					class={streamdown.theme.mermaid.button}
+					aria-label="Toggle expand"
+					onclick={() => panzoom.toggleExpand()}
+					data-panzoom-ignore
+				>
+					<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
+					>
+				</button>
+			</div>
+		{/if}
 		<svg {@attach panzoom.attach} data-mermaid-svg></svg>
 	</div>
 {:else}

package/dist/Elements/Table.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { useStreamdown } from '../Streamdown.js';
+	import { useStreamdown } from '../streamdown.svelte.js';
 	import Slot from './Slot.svelte';
 	import type { Tokens } from 'marked';
 	import type { Snippet } from 'svelte';

package/dist/Streamdown.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import Block from './Block.svelte';
-	import { StreamdownContext, type StreamdownProps } from './Streamdown.js';
-	import 'katex/dist/katex.min.css';
+	import { StreamdownContext, type StreamdownProps } from './streamdown.svelte.js';
 	import { mergeTheme, shadcnTheme } from './theme.js';
 	import { parseBlocks } from './marked/index.js';
 
@@ -21,10 +20,17 @@
 		baseTheme,
 		mergeTheme: shouldMergeTheme = true,
 		streamdown = $bindable(),
+		renderHtml,
+		controls,
+		animation,
+		element = $bindable(),
 		...snippets
 	}: StreamdownProps = $props();
 
 	streamdown = new StreamdownContext({
+		get element() {
+			return element;
+		},
 		get content() {
 			return content;
 		},
@@ -60,11 +66,36 @@
 		get katexConfig() {
 			return katexConfig;
 		},
+		get renderHtml() {
+			return renderHtml;
+		},
 		get translations() {
 			return translations;
 		},
 		get shikiPreloadThemes() {
 			return shikiPreloadThemes;
+		},
+
+		get animation() {
+			if (!animation?.enabled)
+				return {
+					enabled: false
+				};
+			return {
+				enabled: true,
+				type: animation.type || 'blur',
+				duration: animation.duration || 500,
+				timingFunction: animation.timingFunction || 'ease-in',
+				tokenize: animation.tokenize || 'word'
+			};
+		},
+		get controls() {
+			const codeControls = controls?.code ?? true;
+			const mermaidControls = controls?.mermaid ?? true;
+			return {
+				code: codeControls,
+				mermaid: mermaidControls
+			};
 		}
 	});
 
@@ -73,8 +104,64 @@
 	const blocks = $derived(parseBlocks(content));
 </script>
 
-<div class={className}>
+<div bind:this={element} class={className}>
 	{#each blocks as block, index (`${id}-block-${index}`)}
 		<Block {block} />
 	{/each}
 </div>
+
+<style global>
+	:global {
+		@keyframes sd-fade {
+			from {
+				opacity: 0;
+			}
+			to {
+				opacity: 1;
+			}
+		}
+
+		@keyframes sd-blur {
+			from {
+				opacity: 0;
+				filter: blur(5px);
+			}
+			to {
+				opacity: 1;
+				filter: blur(0px);
+			}
+		}
+
+		@keyframes sd-typewriter {
+			from {
+				width: 0;
+				overflow: hidden;
+			}
+			to {
+				width: fit-content;
+			}
+		}
+
+		@keyframes sd-slideUp {
+			from {
+				transform: translateY(10%);
+				opacity: 0;
+			}
+			to {
+				transform: translateY(0);
+				opacity: 1;
+			}
+		}
+
+		@keyframes sd-slideDown {
+			from {
+				transform: translateY(-10%);
+				opacity: 0;
+			}
+			to {
+				transform: translateY(0);
+				opacity: 1;
+			}
+		}
+	}
+</style>

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 export { default as Streamdown } from './Streamdown.svelte';
-export { useStreamdown } from './Streamdown.js';
-export * from './Elements/index.js';
-export { theme, shadcnTheme, mergeTheme, cn, type Theme } from './theme.js';
+export { useStreamdown, type StreamdownProps } from './streamdown.svelte.js';
+export { theme, shadcnTheme, mergeTheme, type Theme } from './theme.js';
+export { lex, parseBlocks, type StreamdownToken } from './marked/index.js';

package/dist/index.js

@@ -1,4 +1,4 @@
 export { default as Streamdown } from './Streamdown.svelte';
-export { useStreamdown } from './Streamdown.js';
-export * from './Elements/index.js';
-export { theme, shadcnTheme, mergeTheme, cn } from './theme.js';
+export { useStreamdown } from './streamdown.svelte.js';
+export { theme, shadcnTheme, mergeTheme } from './theme.js';
+export { lex, parseBlocks } from './marked/index.js';

package/dist/marked/marked-footnotes.js

@@ -1,5 +1,5 @@
 import {} from './index.js';
-import { StreamdownContext } from '../Streamdown.js';
+import { StreamdownContext } from '../streamdown.svelte.js';
 import { getContext } from 'svelte';
 const safeGetContext = () => {
     try {

package/dist/{Streamdown.d.ts → streamdown.svelte.d.ts}

@@ -7,12 +7,22 @@ export interface StreamdownContext extends Omit<StreamdownProps, keyof Snippets
     snippets: Snippets;
     shikiTheme: BundledTheme;
     theme: Theme;
+    controls: {
+        code: boolean;
+        mermaid: boolean;
+    };
+    animation: {
+        enabled: boolean;
+    } & StreamdownProps['animation'];
 }
 export declare class StreamdownContext {
     footnotes: {
         refs: Map<string, FootnoteRef>;
         footnotes: Map<string, Footnote>;
     };
+    isMounted: boolean;
+    animationTextStyle: string;
+    animationBlockStyle: string;
     constructor(props: Omit<StreamdownProps, keyof Snippets | 'class'> & {
         snippets: Snippets;
     });
@@ -64,6 +74,7 @@ export type Snippets = {
 };
 export type StreamdownProps = {
     streamdown?: StreamdownContext;
+    element?: HTMLElement;
     content: string;
     class?: string;
     parseIncompleteMarkdown?: boolean;
@@ -86,5 +97,17 @@ export type StreamdownProps = {
             important?: string;
         };
     };
+    controls?: {
+        code?: boolean;
+        mermaid?: boolean;
+    };
+    renderHtml?: boolean | ((token: Tokens.HTML | Tokens.Tag) => string);
+    animation?: {
+        enabled?: boolean;
+        type?: 'fade' | 'blur' | 'typewriter' | 'slideUp' | 'slideDown';
+        duration?: number;
+        timingFunction?: 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear';
+        tokenize?: 'word' | 'char';
+    };
 } & Partial<Snippets>;
 export {};

package/dist/streamdown.svelte.js

@@ -0,0 +1,38 @@
+import { getContext, onMount, setContext } from 'svelte';
+export class StreamdownContext {
+    footnotes = {
+        refs: new Map(),
+        footnotes: new Map()
+    };
+    isMounted = $state(false);
+    animationTextStyle = $derived(`animation-name: sd-${this.animation.type};
+animation-duration: ${this.animation.duration}ms;
+animation-timing-function: ${this.animation.timingFunction};
+animation-iteration-count: 1;
+animation-fill-mode: forwards;
+white-space: pre-wrap;
+display: inline-block;`);
+    animationBlockStyle = $derived(`animation-name: sd-${this.animation.type};
+animation-duration: ${this.animation.duration}ms;
+animation-timing-function: ${this.animation.timingFunction};
+animation-iteration-count: 1;
+animation-fill-mode: forwards;`);
+    constructor(props) {
+        bind(this, props);
+        setContext('streamdown', this);
+        onMount(() => {
+            this.isMounted = true;
+        });
+        $effect(() => {
+            this.isMounted = this.animation.enabled;
+        });
+    }
+}
+export const useStreamdown = () => {
+    const context = getContext('streamdown');
+    if (!context) {
+        throw new Error('Streamdown context not found');
+    }
+    return context;
+};
+import { bind } from './utils/bind.js';

package/dist/theme.js

@@ -3,7 +3,7 @@ import { twMerge } from 'tailwind-merge';
 export const cn = (...inputs) => twMerge(clsx(inputs));
 export const theme = {
     link: {
-        base: 'text-blue-600 font-medium underline',
+        base: 'text-blue-600 font-medium underline wrap-anywhere hover:text-blue-600/80',
         blocked: 'text-gray-500'
     },
     h1: {
@@ -39,8 +39,8 @@ export const theme = {
     },
     code: {
         base: 'my-4 w-full overflow-hidden rounded-xl border border-gray-200 flex flex-col',
-        container: ' relative overflow-visible bg-gray-100 rounded p-2 font-mono text-sm ',
-        header: 'flex items-center justify-between bg-gray-100/80 p-2 pb-0	 text-gray-600 text-xs',
+        container: ' relative overflow-visible bg-gray-100 p-2 font-mono text-sm ',
+        header: 'flex items-center justify-between bg-gray-100/80 p-2	 text-gray-600 text-xs',
         button: 'cursor-pointer size-6 p-1 text-gray-600 transition-all hover:text-gray-900 rounded hover:bg-gray-100',
         language: 'ml-1 font-mono lowercase',
         skeleton: 'rounded-md font-mono text-transparent bg-gray-200 scale-y-90 animate-pulse whitespace-nowrap inline-block',
@@ -130,7 +130,7 @@ export const theme = {
 };
 export const shadcnTheme = {
     link: {
-        base: 'text-primary font-medium underline hover:text-primary/80',
+        base: 'text-primary wrap-anywhere  font-medium underline hover:text-primary/80',
         blocked: 'text-muted-foreground'
     },
     h1: {
@@ -166,8 +166,8 @@ export const shadcnTheme = {
     },
     code: {
         base: 'my-4 w-full overflow-hidden rounded-lg border border-border flex flex-col',
-        container: 'relative overflow-visible bg-muted rounded p-2 font-mono text-sm',
-        header: 'flex items-center justify-between bg-muted/80 p-2 pb-0 text-muted-foreground text-xs',
+        container: 'relative overflow-visible bg-muted p-2 font-mono text-sm',
+        header: 'flex items-center justify-between bg-muted/80 px-2 py-1 text-muted-foreground text-xs',
         button: 'cursor-pointer size-6 p-1 text-muted-foreground transition-all hover:text-foreground rounded hover:bg-muted',
         language: 'ml-1 font-mono lowercase',
         skeleton: 'rounded-md font-mono text-transparent bg-border/80 scale-y-90 w-fit animate-pulse whitespace-nowrap inline-block',
@@ -261,11 +261,17 @@ export const mergeTheme = (customTheme, baseTheme) => {
         return base;
     const mergedTheme = { ...base };
     for (const key in customTheme) {
-        for (const subKey in customTheme[key]) {
-            Object.assign(mergedTheme[key], {
-                [subKey]: cn(mergedTheme[key], customTheme[key])
-            });
+        const origGroup = mergedTheme[key];
+        const customGroup = customTheme[key];
+        if (!origGroup || !customGroup)
+            continue;
+        const mergedGroup = { ...origGroup };
+        for (const subKey of Object.keys(customGroup)) {
+            const baseVal = origGroup[subKey];
+            const customVal = customGroup[subKey];
+            mergedGroup[subKey] = cn(baseVal, customVal);
         }
+        mergedTheme[key] = mergedGroup;
     }
     return mergedTheme;
 };

package/dist/utils/hightlighter.svelte.d.ts

@@ -3,7 +3,6 @@ import { SvelteSet } from 'svelte/reactivity';
 export declare const loadShiki: () => Promise<[any, import("shiki").CreateHighlighterFactory<BundledLanguage, BundledTheme>]>;
 declare class HighlighterManager {
     initialized: boolean;
-    private highlighter;
     private highlighters;
     private createHighlighter;
     private engine;

package/dist/utils/hightlighter.svelte.js

@@ -1,6 +1,9 @@
-import {} from 'shiki';
+import { bundledLanguages } from 'shiki';
 import { untrack } from 'svelte';
 import { SvelteMap, SvelteSet } from 'svelte/reactivity';
+const isLanguageSupported = (language) => {
+    return Object.hasOwn(bundledLanguages, language);
+};
 // Remove background styles from <pre> tags (inline style)
 const removePreBackground = (html) => {
     return html.replace(/<pre[^>]*style="[^"]*background[^";]*;?[^"]*"[^>]*>/g, (match) => match.replace(/style="[^"]*background[^";]*;?[^"]*"/, ''));
@@ -13,7 +16,6 @@ export const loadShiki = async () => {
 };
 class HighlighterManager {
     initialized = $state(false);
-    highlighter = null;
     highlighters = new SvelteMap();
     createHighlighter = null;
     engine = null;
@@ -47,7 +49,7 @@ class HighlighterManager {
             }
             const highlighter = await this.createHighlighter?.({
                 themes: [theme],
-                langs: [language],
+                langs: isLanguageSupported(language) ? [language] : ['text'],
                 engine: this.engine
             });
             this.highlighters.set(`${theme}:${language}`, highlighter);
@@ -66,7 +68,7 @@ class HighlighterManager {
             if (!this.highlighters.has(`${theme}:${language}`)) {
                 const highlighter = await this.createHighlighter({
                     themes: [theme],
-                    langs: [language],
+                    langs: isLanguageSupported(language) ? [language] : ['text'],
                     engine: this.engine
                 });
                 this.highlighters.set(`${theme}:${language}`, highlighter);
@@ -83,7 +85,7 @@ class HighlighterManager {
             return '';
         }
         let html = highlighter.codeToHtml(code, {
-            lang: language,
+            lang: isLanguageSupported(language) ? language : 'text',
             theme: theme
         });
         // Remove background and add custom class if needed

package/dist/utils/parse-incomplete-markdown.js

@@ -1,5 +1,5 @@
 const linkImagePattern = /(!?\[)([^\]]*?)$/;
-const boldPattern = /(\*\*)([^*]*?)$/;
+const boldPattern = /(\*\*)([^\n]*?)$/;
 const italicPattern = /(__)([^_]*?)$/;
 const boldItalicPattern = /(\*\*\*)([^*]*?)$/;
 const singleAsteriskPattern = /(\*)([^*]*?)$/;
@@ -37,20 +37,19 @@ const handleIncompleteBold = (text) => {
     }
     const boldMatch = text.match(boldPattern);
     if (boldMatch) {
+        // Find the position of the last ** marker
+        const lastDoubleAsteriskIndex = text.lastIndexOf('**');
+        const contentAfterMarker = text.substring(lastDoubleAsteriskIndex + 2);
         // Don't close if there's no meaningful content after the opening markers
-        // boldMatch[2] contains the content after **
         // Check if content is only whitespace or other emphasis markers
-        const contentAfterMarker = boldMatch[2];
         if (!contentAfterMarker || /^[\s_~*`]*$/.test(contentAfterMarker)) {
             return text;
         }
         // Check if the bold marker is in a list item context
-        // Find the position of the matched bold marker
-        const markerIndex = text.lastIndexOf(boldMatch[1]);
-        const beforeMarker = text.substring(0, markerIndex);
+        const beforeMarker = text.substring(0, lastDoubleAsteriskIndex);
         const lastNewlineBeforeMarker = beforeMarker.lastIndexOf('\n');
         const lineStart = lastNewlineBeforeMarker === -1 ? 0 : lastNewlineBeforeMarker + 1;
-        const lineBeforeMarker = text.substring(lineStart, markerIndex);
+        const lineBeforeMarker = text.substring(lineStart, lastDoubleAsteriskIndex);
         // Check if this line is a list item with just the bold marker
         if (/^[\s]*[-*+][\s]+$/.test(lineBeforeMarker)) {
             // This is a list item with just emphasis markers
@@ -61,8 +60,17 @@ const handleIncompleteBold = (text) => {
                 return text;
             }
         }
-        const asteriskPairs = (text.match(/\*\*/g) || []).length;
-        if (asteriskPairs % 2 === 1) {
+        // Check if the content after ** ends with a single * (incomplete closing marker)
+        if (contentAfterMarker.endsWith('*') && !contentAfterMarker.endsWith('**')) {
+            // The content ends with a single *, treat it as an incomplete closing marker
+            // Remove the trailing * and add complete closing **
+            const contentWithoutTrailingAsterisk = contentAfterMarker.slice(0, -1);
+            return text.substring(0, lastDoubleAsteriskIndex + 2) + contentWithoutTrailingAsterisk + '**';
+        }
+        // Count all ** sequences - if odd, we have an unmatched opening **
+        const doubleAsteriskMatches = text.match(/\*\*/g) || [];
+        const doubleAsteriskCount = doubleAsteriskMatches.length;
+        if (doubleAsteriskCount % 2 === 1) {
             return `${text}**`;
         }
     }
@@ -165,6 +173,19 @@ const handleIncompleteSingleAsteriskItalic = (text) => {
         if (!contentAfterFirstAsterisk || /^[\s_~*`]*$/.test(contentAfterFirstAsterisk)) {
             return text;
         }
+        // Additional check: be more conservative about single asterisks
+        // Only complete if the asterisk appears to be intended for formatting
+        const prevChar = firstSingleAsteriskIndex > 0 ? text[firstSingleAsteriskIndex - 1] : '';
+        const nextChar = firstSingleAsteriskIndex < text.length - 1 ? text[firstSingleAsteriskIndex + 1] : '';
+        // If asterisk is surrounded by word characters, it's likely literal (e.g., test*var)
+        if (/\w/.test(prevChar) && /\w/.test(nextChar)) {
+            return text;
+        }
+        // If asterisk is at the end of a word/phrase, be more cautious
+        // Only complete if there's clear whitespace before it (typical italic pattern)
+        if (/\w/.test(prevChar) && !/\s/.test(prevChar)) {
+            return text;
+        }
         const singleAsterisks = countSingleAsterisks(text);
         if (singleAsterisks % 2 === 1) {
             return `${text}*`;
@@ -244,6 +265,13 @@ const countSingleUnderscores = (text) => {
             if (isWithinMathBlock(text, index)) {
                 return acc;
             }
+            // Skip if underscore is word-internal (between word characters)
+            if (prevChar &&
+                nextChar &&
+                /[\p{L}\p{N}_]/u.test(prevChar) &&
+                /[\p{L}\p{N}_]/u.test(nextChar)) {
+                return acc;
+            }
             if (prevChar !== '_' && nextChar !== '_') {
                 return acc + 1;
             }
@@ -259,13 +287,23 @@ const handleIncompleteSingleUnderscoreItalic = (text) => {
     }
     const singleUnderscoreMatch = text.match(singleUnderscorePattern);
     if (singleUnderscoreMatch) {
-        // Find the first single underscore position (not part of __)
+        // Find the first single underscore position (not part of __ and not word-internal)
         let firstSingleUnderscoreIndex = -1;
         for (let i = 0; i < text.length; i++) {
             if (text[i] === '_' &&
                 text[i - 1] !== '_' &&
                 text[i + 1] !== '_' &&
+                text[i - 1] !== '\\' &&
                 !isWithinMathBlock(text, i)) {
+                // Check if underscore is word-internal (between word characters)
+                const prevChar = i > 0 ? text[i - 1] : '';
+                const nextChar = i < text.length - 1 ? text[i + 1] : '';
+                if (prevChar &&
+                    nextChar &&
+                    /[\p{L}\p{N}_]/u.test(prevChar) &&
+                    /[\p{L}\p{N}_]/u.test(nextChar)) {
+                    continue;
+                }
                 firstSingleUnderscoreIndex = i;
                 break;
             }
@@ -282,6 +320,12 @@ const handleIncompleteSingleUnderscoreItalic = (text) => {
         }
         const singleUnderscores = countSingleUnderscores(text);
         if (singleUnderscores % 2 === 1) {
+            // If text ends with newline(s), insert underscore before them
+            const trailingNewlineMatch = text.match(/\n+$/);
+            if (trailingNewlineMatch) {
+                const textBeforeNewlines = text.slice(0, -trailingNewlineMatch[0].length);
+                return `${textBeforeNewlines}_${trailingNewlineMatch[0]}`;
+            }
             return `${text}_`;
         }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svelte-streamdown",
-	"version": "2.0.4",
+	"version": "2.2.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",
@@ -47,6 +47,7 @@
 		"prettier-plugin-svelte": "^3.3.3",
 		"prettier-plugin-tailwindcss": "^0.6.11",
 		"publint": "^0.3.2",
+		"stick-to-bottom-svelte": "^1.0.1",
 		"svelte": "^5.0.0",
 		"svelte-check": "^4.0.0",
 		"svelte-themes": "^2.0.8",

package/dist/Streamdown.js

@@ -1,19 +0,0 @@
-import { getContext, setContext } from 'svelte';
-export class StreamdownContext {
-    footnotes = {
-        refs: new Map(),
-        footnotes: new Map()
-    };
-    constructor(props) {
-        bind(this, props);
-        setContext('streamdown', this);
-    }
-}
-export const useStreamdown = () => {
-    const context = getContext('streamdown');
-    if (!context) {
-        throw new Error('Streamdown context not found');
-    }
-    return context;
-};
-import { bind } from './utils/bind.js';

package/dist/Streamdown.svelte.d.ts

@@ -1,5 +0,0 @@
-import { type StreamdownProps } from './Streamdown.js';
-import 'katex/dist/katex.min.css';
-declare const Streamdown: import("svelte").Component<StreamdownProps, {}, "streamdown">;
-type Streamdown = ReturnType<typeof Streamdown>;
-export default Streamdown;