svelte-streamdown 2.1.0 → 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

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'}

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 { flushSync, onMount, tick } from 'svelte';
-	import { useStreamdown } from '../Streamdown.js';
-	import Slot from './Slot.svelte';
+	import { onMount } from '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';

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';
 
@@ -23,10 +22,15 @@
 		streamdown = $bindable(),
 		renderHtml,
 		controls,
+		animation,
+		element = $bindable(),
 		...snippets
 	}: StreamdownProps = $props();
 
 	streamdown = new StreamdownContext({
+		get element() {
+			return element;
+		},
 		get content() {
 			return content;
 		},
@@ -71,6 +75,20 @@
 		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;
@@ -86,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, type StreamdownProps } from './Streamdown.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 { 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}

@@ -11,12 +11,18 @@ export interface StreamdownContext extends Omit<StreamdownProps, keyof Snippets
         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;
     });
@@ -68,6 +74,7 @@ export type Snippets = {
 };
 export type StreamdownProps = {
     streamdown?: StreamdownContext;
+    element?: HTMLElement;
     content: string;
     class?: string;
     parseIncompleteMarkdown?: boolean;
@@ -95,5 +102,12 @@ export type StreamdownProps = {
         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

@@ -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/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}*`;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svelte-streamdown",
-	"version": "2.1.0",
+	"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;