svelte-streamdown 2.3.3 → 2.4.0

package/dist/Block.svelte

@@ -4,7 +4,6 @@
 	import { lex, type StreamdownToken } from './marked/index.js';
 	import AnimatedText from './AnimatedText.svelte';
 	import { useStreamdown } from './context.svelte.js';
-	import AnimatedBlock from './AnimatedBlock.svelte';
 
 	let {
 		block,
@@ -38,10 +37,4 @@
 	{/each}
 {/snippet}
 
-{#if streamdown.animation.enabled && !insideFootnote}
-	<AnimatedBlock>
-		{@render renderChildren(tokens)}
-	</AnimatedBlock>
-{:else}
-	{@render renderChildren(tokens)}
-{/if}
+{@render renderChildren(tokens)}

package/dist/Elements/Alert.svelte

@@ -36,7 +36,10 @@
 	}}
 	render={streamdown.snippets.alert}
 >
-	<div class={`${streamdown.theme.alert.base} ${streamdown.theme.alert[token.variant]}`}>
+	<div
+		style={streamdown.isMounted ? streamdown.animationBlockStyle : ''}
+		class={`${streamdown.theme.alert.base} ${streamdown.theme.alert[token.variant]}`}
+	>
 		<div data-alert-title class={streamdown.theme.alert.title}>
 			{@render (streamdown.icons?.[token.variant] || icon)()}
 			{streamdown.translations?.alert?.[token.variant] || token.variant}

package/dist/Elements/Code.svelte

@@ -14,7 +14,8 @@
 	} = $props();
 
 	const streamdown = useStreamdown();
-	const highlighter = HighlighterManager.create(streamdown.shikiPreloadThemes || []);
+	const highlighter = HighlighterManager.create(streamdown.shikiPreloadThemes);
+
 	const copy = useCopy({
 		get content() {
 			return token.text;
@@ -44,11 +45,12 @@
 			void highlighter.load(theme, lang);
 		});
 	});
-
-	const isMounted = streamdown.isMounted;
 </script>
 
-<div class={streamdown.theme.code.base}>
+<div
+	style={streamdown.isMounted ? streamdown.animationBlockStyle : ''}
+	class={streamdown.theme.code.base}
+>
 	<div class={streamdown.theme.code.header}>
 		<span class={streamdown.theme.code.language}>{token.lang}</span>
 		{#if streamdown.controls.code}
@@ -84,7 +86,7 @@
 		<span class={streamdown.theme.code.line}>
 			{#each line as token}
 				<span
-					style={isMounted ? streamdown.animationTextStyle : undefined}
+					style={streamdown.animationTextStyle}
 					style:color={token.color}
 					style:background-color={token.bgColor}
 				>
@@ -97,7 +99,7 @@
 
 {#snippet Skeleton(lines: string[])}
 	{#each lines as line}
-		<span class={streamdown.theme.code.skeleton}>
+		<span style={streamdown.animationTextStyle} class={streamdown.theme.code.skeleton}>
 			{line.trim().length > 0 ? line : '\u200B'}
 		</span>
 	{/each}

package/dist/Elements/Element.svelte

@@ -12,6 +12,9 @@
 	import FootnoteRef from './FootnoteRef.svelte';
 	let { token, children }: { token: StreamdownToken; children: Snippet } = $props();
 	const streamdown = useStreamdown();
+
+	// Only apply animation on block level elements. Leaves text elements to be animated by their text children.
+	const style = $derived(streamdown.isMounted ? streamdown.animationBlockStyle : '');
 </script>
 
 {#if token.type === 'heading'}
@@ -23,40 +26,40 @@
 		render={streamdown.snippets.heading}
 	>
 		{#if token.depth === 1}
-			<h1 class={streamdown.theme[`h${token.depth}`].base}>
+			<h1 {style} class={streamdown.theme[`h${token.depth}`].base}>
 				{@render children()}
 			</h1>
 		{:else if token.depth === 2}
-			<h2 class={streamdown.theme[`h${token.depth}`].base}>
+			<h2 {style} class={streamdown.theme[`h${token.depth}`].base}>
 				{@render children()}
 			</h2>
 		{:else if token.depth === 3}
-			<h3 class={streamdown.theme[`h${token.depth}`].base}>
+			<h3 {style} class={streamdown.theme[`h${token.depth}`].base}>
 				{@render children()}
 			</h3>
 		{:else if token.depth === 4}
-			<h4 class={streamdown.theme[`h${token.depth}`].base}>
+			<h4 {style} class={streamdown.theme[`h${token.depth}`].base}>
 				{@render children()}
 			</h4>
 		{:else if token.depth === 5}
-			<h5 class={streamdown.theme[`h${token.depth}`].base}>
+			<h5 {style} class={streamdown.theme[`h${token.depth}`].base}>
 				{@render children()}
 			</h5>
 		{:else if token.depth === 6}
-			<h6 class={streamdown.theme[`h${token.depth}`].base}>
+			<h6 {style} 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}>
-		<p class={streamdown.theme.paragraph.base}>
+		<p {style} class={streamdown.theme.paragraph.base}>
 			{@render children()}
 		</p>
 	</Slot>
 {:else if token.type === 'blockquote'}
 	<Slot props={{ children, token }} render={streamdown.snippets.blockquote}>
-		<blockquote class={streamdown.theme.blockquote.base}>
+		<blockquote {style} class={streamdown.theme.blockquote.base}>
 			{@render children()}
 		</blockquote>
 	</Slot>
@@ -91,7 +94,7 @@
 {:else if token.type === 'list_item'}
 	<Slot props={{ children, token }} render={streamdown.snippets.li}>
 		<li
-			style={streamdown.isMounted ? streamdown.animationBlockStyle : undefined}
+			{style}
 			style:list-style-type={token.task ? 'none' : undefined}
 			{...token.value && !token.task ? { value: token.value } : {}}
 			class={streamdown.theme.li.base}
@@ -109,7 +112,7 @@
 	</Slot>
 {:else if token.type === 'table'}
 	<Slot props={{ token, children }} render={streamdown.snippets.table}>
-		<div class={streamdown.theme.table.base}>
+		<div {style} class={streamdown.theme.table.base}>
 			<table class={streamdown.theme.table.table}>
 				{@render children()}
 			</table>
@@ -117,25 +120,25 @@
 	</Slot>
 {:else if token.type === 'thead'}
 	<Slot props={{ token, children }} render={streamdown.snippets.thead}>
-		<thead class={streamdown.theme.thead.base}>
+		<thead {style} class={streamdown.theme.thead.base}>
 			{@render children?.()}
 		</thead>
 	</Slot>
 {:else if token.type === 'tbody'}
 	<Slot props={{ token, children }} render={streamdown.snippets.tbody}>
-		<tbody class={streamdown.theme.tbody.base}>
+		<tbody {style} class={streamdown.theme.tbody.base}>
 			{@render children?.()}
 		</tbody>
 	</Slot>
 {:else if token.type === 'tfoot'}
 	<Slot props={{ token, children }} render={streamdown.snippets.tfoot}>
-		<tfoot class={streamdown.theme.tfoot.base}>
+		<tfoot {style} class={streamdown.theme.tfoot.base}>
 			{@render children?.()}
 		</tfoot>
 	</Slot>
 {:else if token.type === 'tr'}
 	<Slot props={{ token, children }} render={streamdown.snippets.tr}>
-		<tr class={streamdown.theme.tr.base}>
+		<tr {style} class={streamdown.theme.tr.base}>
 			{@render children?.()}
 		</tr>
 	</Slot>
@@ -143,6 +146,7 @@
 	{#if token.rowspan > 0}
 		<Slot props={{ children, token }} render={streamdown.snippets.td}>
 			<td
+				{style}
 				class={streamdown.theme.td.base}
 				{...token.colspan > 1 ? { colspan: token.colspan } : {}}
 				{...token.rowspan > 1 ? { rowspan: token.rowspan } : {}}
@@ -158,6 +162,7 @@
 	{#if token.rowspan > 0}
 		<Slot props={{ children, token }} render={streamdown.snippets.th}>
 			<th
+				{style}
 				class={streamdown.theme.th.base}
 				{...token.colspan > 1 ? { colspan: token.colspan } : {}}
 				{...token.rowspan > 1 ? { rowspan: token.rowspan } : {}}
@@ -205,7 +210,7 @@
 	</Slot>
 {:else if token.type === 'hr'}
 	<Slot props={{ children, token }} render={streamdown.snippets.hr}>
-		<hr class={streamdown.theme.hr.base} />
+		<hr {style} class={streamdown.theme.hr.base} />
 	</Slot>
 {:else if token.type === 'br'}
 	<br />
@@ -227,25 +232,23 @@
 	<!-- TODO Footnotes are rendered inside the FootnoteRef popover -->
 {:else if token.type === 'descriptionList'}
 	<Slot props={{ children, token }} render={streamdown.snippets.descriptionList}>
-		<dl class={streamdown.theme.descriptionList.base}>
+		<dl style={streamdown.animationBlockStyle} class={streamdown.theme.descriptionList.base}>
 			{@render children()}
 		</dl>
 	</Slot>
 {:else if token.type === 'description'}
 	<Slot props={{ children, token }} render={streamdown.snippets.description}>
-		<div class={streamdown.theme.description.base}>
-			{@render children()}
-		</div>
+		{@render children()}
 	</Slot>
 {:else if token.type === 'descriptionTerm'}
 	<Slot props={{ children, token }} render={streamdown.snippets.descriptionTerm}>
-		<dt class={streamdown.theme.descriptionTerm.base}>
+		<dt {style} class={streamdown.theme.descriptionTerm.base}>
 			{@render children()}
 		</dt>
 	</Slot>
 {:else if token.type === 'descriptionDetail'}
 	<Slot props={{ children, token }} render={streamdown.snippets.descriptionDetail}>
-		<dd class={streamdown.theme.descriptionDetail.base}>
+		<dd {style} class={streamdown.theme.descriptionDetail.base}>
 			{@render children()}
 		</dd>
 	</Slot>

package/dist/Elements/FootnoteRef.svelte

@@ -90,12 +90,14 @@
 		render={streamdown.snippets.footnotePopover}
 	>
 		<dialog
+			style="z-index: 1000; position: fixed;"
 			id={'footnote-popover-' + id}
 			aria-modal="false"
 			transition:scale|global={{ start: 0.95, duration: 100 }}
 			{@attach clickOutside.attachment}
 			{@attach popoverAttachment}
 			open
+			popover="auto"
 			class={`${streamdown.theme.footnotePopover.base}`}
 		>
 			{#each token.content.lines as line}
@@ -112,7 +114,7 @@
 	render={streamdown.snippets.footnoteRef}
 >
 	<button
-		style={streamdown.isMounted ? streamdown.animationBlockStyle : ''}
+		style={streamdown.animationBlockStyle}
 		bind:this={reference}
 		class={streamdown.theme.footnoteRef.base}
 		onclick={() => (isOpen = !isOpen)}

package/dist/Elements/Image.svelte

@@ -31,7 +31,10 @@
 			}}
 			render={streamdown.snippets.image}
 		>
-			<span class={streamdown.theme.image.base}>
+			<span
+				style={streamdown.isMounted ? streamdown.animationBlockStyle : ''}
+				class={streamdown.theme.image.base}
+			>
 				<img class={streamdown.theme.image.image} src={transformedUrl} alt={token.text} />
 			</span>
 		</Slot>

package/dist/Elements/Math.svelte

@@ -53,7 +53,7 @@
 		{@html html}
 	</span>
 {:else}
-	<div class="h-fit w-full">
+	<div style={streamdown.isMounted ? streamdown.animationBlockStyle : ''} class="h-fit w-full">
 		<div class="overflow-x-auto">
 			<div bind:this={inner} class={streamdown.theme.math.block}>
 				{@html html}

package/dist/Elements/Mermaid.svelte

@@ -202,6 +202,7 @@
 
 {#if mermaid}
 	<div
+		style={streamdown.isMounted ? streamdown.animationBlockStyle : ''}
 		class={streamdown.theme.mermaid.base}
 		{@attach (node) => renderMermaid(token.text, node)}
 		{@attach insider.attach}

package/dist/theme.d.ts

@@ -131,9 +131,6 @@ export declare const theme: {
     descriptionList: {
         base: string;
     };
-    description: {
-        base: string;
-    };
     descriptionTerm: {
         base: string;
     };
@@ -272,9 +269,6 @@ export declare const shadcnTheme: {
     descriptionList: {
         base: string;
     };
-    description: {
-        base: string;
-    };
     descriptionTerm: {
         base: string;
     };
@@ -418,9 +412,6 @@ export declare const mergeTheme: (customTheme?: DeepPartialTheme, baseTheme?: "t
     descriptionList: {
         base: string;
     };
-    description: {
-        base: string;
-    };
     descriptionTerm: {
         base: string;
     };

package/dist/theme.js

@@ -132,11 +132,8 @@ export const theme = {
     descriptionList: {
         base: 'my-4 space-y-2'
     },
-    description: {
-        base: 'border-l-2 border-gray-200 pl-4'
-    },
     descriptionTerm: {
-        base: 'font-semibold text-gray-900'
+        base: 'font-semibold text-gray-900 border-l-2 border-gray-200 pl-4'
     },
     descriptionDetail: {
         base: 'text-gray-700 ml-4 leading-relaxed'
@@ -273,11 +270,8 @@ export const shadcnTheme = {
     descriptionList: {
         base: 'my-4 space-y-2'
     },
-    description: {
-        base: 'border-l-2 border-border pl-4'
-    },
     descriptionTerm: {
-        base: 'font-semibold text-foreground'
+        base: 'font-semibold text-foreground border-l-2 border-border pl-4'
     },
     descriptionDetail: {
         base: 'text-muted-foreground ml-4 leading-relaxed'

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

@@ -26,7 +26,7 @@ declare class HighlighterManager {
      * Highlights code synchronously. Must call isReady() first.
      */
     highlightCode(code: string, language: string | undefined, theme: BundledTheme): ThemedToken[][];
-    static create(preloadedThemes: BundledTheme[]): HighlighterManager;
+    static create(preloadedThemes?: BundledTheme[]): HighlighterManager;
 }
 export { HighlighterManager };
 export declare const languageExtensionMap: Record<string, string>;

package/dist/utils/hightlighter.svelte.js

@@ -23,7 +23,7 @@ class HighlighterManager {
         if (this.highlighter instanceof Promise) {
             return this.highlighter;
         }
-        else {
+        else if (!this.highlighter) {
             this.highlighter = new Promise((resolve, reject) => {
                 loadShiki().then(([engine, createHighlighter]) => {
                     return createHighlighter({
@@ -38,6 +38,9 @@ class HighlighterManager {
             });
             return this.highlighter;
         }
+        else {
+            return this.highlighter;
+        }
     }
     async loadTheme(theme, highlighter) {
         const themeLoader = this.loadedThemes.get(theme);
@@ -69,27 +72,17 @@ class HighlighterManager {
         return Object.hasOwn(bundledLanguages, language);
     };
     isReady(theme, language = 'bash') {
-        return (!(this.highlighter instanceof Promise) &&
-            this.loadedLanguages.get(this.isLanguageSupported(language) ? language : 'bash') === true &&
-            this.loadedThemes.get(theme) === true);
+        return (!!this.highlighter &&
+            !(this.highlighter instanceof Promise) &&
+            this.loadedThemes.get(theme) === true &&
+            this.loadedLanguages.get(this.isLanguageSupported(language) ? language : 'bash') === true);
     }
     /**
      * Preloads themes by creating minimal highlighter instances.
      * This reduces flickering when switching themes.
      */
     async preloadThemes(highlighter) {
-        for (const theme of this.preloadedThemes) {
-            const themeLoader = this.loadedThemes.get(theme);
-            if (themeLoader === true) {
-                return;
-            }
-            else if (themeLoader instanceof Promise) {
-                await themeLoader;
-            }
-            else {
-                await this.loadTheme(theme, highlighter);
-            }
-        }
+        await Promise.all(Array.from(this.preloadedThemes).map((theme) => this.loadTheme(theme, highlighter)));
     }
     /**
      * Ensures the highlighter is ready for the given theme and language.
@@ -101,7 +94,6 @@ class HighlighterManager {
             !(this.highlighter instanceof Promise) &&
             themeLoader === true &&
             languageLoader === true) {
-            // already loaded
             return;
         }
         const highlighter = await this.loadHighlighter();
@@ -131,7 +123,7 @@ class HighlighterManager {
             return [];
         }
     }
-    static create(preloadedThemes) {
+    static create(preloadedThemes = []) {
         if (typeof window !== 'undefined' && 'STREAMDOWN_HIGHLIGHTER' in window) {
             const previousHighlighter = window.STREAMDOWN_HIGHLIGHTER;
             preloadedThemes.forEach((theme) => previousHighlighter.preloadedThemes.add(theme));

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

@@ -807,6 +807,67 @@ const handleIncompleteFootnotes = (text) => {
     }
     return result;
 };
+// Completes incomplete description list items (:term -> :term:)
+// Also processes incomplete inline formatting within the description content
+const handleIncompleteDescriptionList = (text) => {
+    const lines = text.split('\n');
+    let inFence = false;
+    let fenceChar = '';
+    let fenceIndent = '';
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        // Check for fence open/close
+        const fenceMatch = line.match(/^(\s*)(`{3,}|~{3,})(.*)$/);
+        if (fenceMatch) {
+            const indent = fenceMatch[1];
+            const fence = fenceMatch[2];
+            const lang = fenceMatch[3];
+            if (!inFence) {
+                // Opening fence
+                inFence = true;
+                fenceChar = fence.substring(0, 1); // Store just the first character
+                fenceIndent = indent;
+                continue;
+            }
+            else if (fence.startsWith(fenceChar) && indent === fenceIndent) {
+                // Closing fence - match the fence character type and indentation
+                inFence = false;
+                fenceChar = '';
+                fenceIndent = '';
+                continue;
+            }
+        }
+        // Skip processing if inside a fence
+        if (inFence) {
+            continue;
+        }
+        // Detect description-list lines with /^\s*:[^:]+$/
+        const descriptionMatch = line.match(/^(\s*:[^:]+)$/);
+        if (descriptionMatch) {
+            const fullMatch = descriptionMatch[1];
+            const colonIndex = fullMatch.indexOf(':');
+            const beforeColon = fullMatch.substring(0, colonIndex + 1);
+            const content = fullMatch.substring(colonIndex + 1);
+            // Apply formatters in this order
+            let processedContent = content;
+            processedContent = handleIncompleteBoldItalic(processedContent); // ***
+            processedContent = handleIncompleteBold(processedContent); // **
+            processedContent = handleIncompleteDoubleUnderscoreItalic(processedContent); // __
+            processedContent = handleIncompleteStrikethrough(processedContent); // ~~
+            processedContent = handleIncompleteInlineCode(processedContent); // `
+            processedContent = handleIncompleteSingleAsteriskItalic(processedContent); // *
+            processedContent = handleIncompleteSingleUnderscoreItalic(processedContent); // _
+            processedContent = handleIncompleteSub(processedContent); // ~
+            processedContent = handleIncompleteSup(processedContent); // ^
+            processedContent = handleIncompleteBlockKatex(processedContent);
+            processedContent = handleIncompleteInlineMath(processedContent);
+            processedContent = handleIncompleteLinksAndImages(processedContent);
+            // Set the line to beforeColon + processedContent + ':'
+            lines[i] = beforeColon + processedContent + ':';
+        }
+    }
+    return lines.join('\n');
+};
 // Parses markdown text and removes incomplete tokens to prevent partial rendering
 export const parseIncompleteMarkdown = (text) => {
     if (!text || typeof text !== 'string') {
@@ -818,6 +879,8 @@ export const parseIncompleteMarkdown = (text) => {
     result = handleIncompleteCodeBlock(result);
     // Handle incomplete footnotes FIRST (before any other processing to avoid conflicts)
     result = handleIncompleteFootnotes(result);
+    // Handle incomplete description lists (block-level elements)
+    result = handleIncompleteDescriptionList(result);
     // Handle various formatting completions ONLY if not inside a code block
     // Handle double patterns before single patterns for proper priority
     result = handleIncompleteBoldItalic(result); // ***

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svelte-streamdown",
-	"version": "2.3.3",
+	"version": "2.4.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",

package/dist/AnimatedBlock.svelte

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

package/dist/AnimatedBlock.svelte.d.ts

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