svelte-streamdown 2.6.0 → 3.0.0

package/README.md

@@ -462,6 +462,45 @@ This heading will use a custom component!`;
 />
 ```
 
+## 📦 Bundle Optimization
+
+Streamdown is optimized for minimal bundle size by making heavy components **opt-in**. By default, Code blocks, Mermaid diagrams, and Math expressions render as lightweight fallbacks (plain text). To enable full functionality, import and pass the components you need:
+
+### Enabling Heavy Components
+
+```svelte
+<script>
+	import { Streamdown } from 'svelte-streamdown';
+	// Import only the components you need
+	import Code from 'svelte-streamdown/code';       // Shiki syntax highlighting
+	import Mermaid from 'svelte-streamdown/mermaid'; // Mermaid diagrams
+	import Math from 'svelte-streamdown/math';       // KaTeX math rendering
+</script>
+
+<Streamdown
+	{content}
+	components={{ code: Code, mermaid: Mermaid, math: Math }}
+/>
+```
+
+### Component Dependencies
+
+| Component | Import Path | Dependency | Size Impact |
+|-----------|-------------|------------|-------------|
+| `Code` | `svelte-streamdown/code` | Shiki | ~2MB (languages + themes) |
+| `Mermaid` | `svelte-streamdown/mermaid` | Mermaid.js | ~1.5MB |
+| `Math` | `svelte-streamdown/math` | KaTeX | ~300KB |
+
+> [!TIP]
+> Only import the components your application actually uses. If your content doesn't include code blocks, mermaid diagrams, or math expressions, you can skip those imports entirely for a much smaller bundle.
+
+### Fallback Behavior
+
+When a heavy component is not provided:
+- **Code blocks**: Render as plain `<pre><code>` without syntax highlighting
+- **Mermaid**: Renders the mermaid source as a code block
+- **Math**: Renders the raw LaTeX/math text
+
 ## 📋 Props API
 
 | Prop                       | Type                                                                             | Default          | Description                                                                                                                                        |
@@ -479,7 +518,9 @@ This heading will use a custom component!`;
 | `theme`                    | `DeepPartial<Theme>`                                                             | -                | Custom theme overrides                                                                                                                             |
 | `baseTheme`                | `'tailwind' \| 'shadcn'`                                                         | `'tailwind'`     | Base theme to use before applying overrides                                                                                                        |
 | `mergeTheme`               | `boolean`                                                                        | `true`           | Whether to merge theme with base theme                                                                                                             |
-| `shikiTheme`               | `BundledTheme`                                                                   | `'github-light'` | Code highlighting theme                                                                                                                            |
+| `shikiTheme`               | `string`                                                                         | `'github-light'` | Code highlighting theme (`github-dark` or `github-light` by default, or custom theme key)                                                          |
+| `shikiThemes`              | `Record<string, ThemeRegistration>`                                              | -                | Additional themes as pre-imported objects (e.g., `{ nord: nordTheme }`)                                                                            |
+| `shikiLanguages`           | `LanguageInfo[]`                                                                 | -                | Additional syntax highlighting languages (merged with defaults)                                                                                    |
 | `mermaidConfig`            | `MermaidConfig`                                                                  | -                | Mermaid diagram configuration                                                                                                                      |
 | `katexConfig`              | `KatexOptions \| ((inline: boolean) => KatexOptions)`                            | -                | KaTeX math rendering options                                                                                                                       |
 | `animation`                | `AnimationConfig`                                                                | -                | Animation configuration for streaming content                                                                                                      |
@@ -490,6 +531,8 @@ This heading will use a custom component!`;
 | `animation.tokenize`       | `'word' \| 'char'`                                                               | `'word'`         | Tokenization method for text animations                                                                                                            |
 | `animation.animateOnMount` | `boolean`                                                                        | `false`          | Run the token animation on mount or not, useful if you render the Streamdown component in the same time as the first token is receive from the LLM |
 | `extensions`               | `Array<Extension>`                                                               | `[]`             | Custom marked tokenizers to render special markdown blocks or inline tokens                                                                        |
+| `mdxComponents`            | `Record<string, Component>`                                                      | `{}`             | Map of MDX component names to Svelte components (e.g., `{ Card, Button }`)                                                                         |
+| `components`               | `{ code?, mermaid?, math? }`                                                     | -                | Optional heavy components for syntax highlighting, diagrams, and math rendering                                                                    |
 | `children`                 | `Snippet<[{token:GenericToken, streamdown: StreamdownContext, children: Snippet` | `undefined`      | Snippet used to render elements not supported by Streamdown, custom extensions, and MDX components                                                 |
 
 #### All Available Customizable Elements:
@@ -506,9 +549,9 @@ This heading will use a custom component!`;
 
 **Special Content**: `blockquote`, `hr`, `alert`, `mermaid`, `math`, `footnoteRef`, `inlineCitation`
 
-**MDX Components**: Any PascalCase component (e.g., `Card`, `Button`, `MyComponent`) - pass as snippets with the component name
+**MDX Components**: Handled via a single `mdx` snippet that receives `token`, `props`, and `children`. Use `token.tagName` to differentiate between components.
 
-**Note**: The above elements are **supported by Streamdown** and should be customized using individual props or the theme system.
+**Note**: The above elements are **supported by Streamdown** and should be customized using individual props or the theme system. MDX components require the `mdx` snippet.
 
 ## 🎨 Theming System
 
@@ -637,24 +680,80 @@ This is **markdown content** inside a component!
 </script>
 
 <Streamdown {content}>
-  {#snippet Card({ title, count, children })}
-    <div class="rounded-lg border border-gray-200 p-4 shadow-sm">
-      <h3 class="text-xl font-bold">{title}</h3>
-      <p class="text-gray-600">Count: {count}</p>
-      <div class="mt-2">
-        {@render children()}
+  {#snippet mdx({ token, props, children })}
+    {#if token.tagName === 'Card'}
+      <div class="rounded-lg border border-gray-200 p-4 shadow-sm">
+        <h3 class="text-xl font-bold">{props.title}</h3>
+        <p class="text-gray-600">Count: {props.count}</p>
+        <div class="mt-2">
+          {@render children()}
+        </div>
       </div>
-    </div>
-  {/snippet}
-  
-  {#snippet Button({ label, active })}
-    <button class="rounded px-4 py-2 {active ? 'bg-blue-500 text-white' : 'bg-gray-200'}">
-      {label}
-    </button>
+    {:else if token.tagName === 'Button'}
+      <button class="rounded px-4 py-2 {props.active ? 'bg-blue-500 text-white' : 'bg-gray-200'}">
+        {props.label}
+      </button>
+    {:else}
+      {@render children()}
+    {/if}
   {/snippet}
 </Streamdown>
 ```
 
+### Alternative: Using Svelte Components Directly
+
+Instead of using the `mdx` snippet with conditional logic, you can pass Svelte components directly using the `mdxComponents` prop:
+
+```svelte
+<script>
+  import { Streamdown } from 'svelte-streamdown';
+  import Card from './Card.svelte';
+  import Button from './Button.svelte';
+  
+  let content = `
+# Using MDX Components
+
+<Card title="Hello" count={42}>
+This is **markdown content** inside a component!
+</Card>
+
+<Button label="Click me" active={true} />
+`;
+</script>
+
+<Streamdown {content} mdxComponents={{ Card, Button }} />
+```
+
+**Your Svelte components** (`Card.svelte`, `Button.svelte`) should accept props and a `children` snippet:
+
+```svelte
+<!-- Card.svelte -->
+<script>
+  let { title, count, children } = $props();
+</script>
+
+<div class="rounded-lg border border-gray-200 p-4 shadow-sm">
+  <h3 class="text-xl font-bold">{title}</h3>
+  <p class="text-gray-600">Count: {count}</p>
+  <div class="mt-2">
+    {@render children()}
+  </div>
+</div>
+```
+
+```svelte
+<!-- Button.svelte -->
+<script>
+  let { label, active } = $props();
+</script>
+
+<button class="rounded px-4 py-2 {active ? 'bg-blue-500 text-white' : 'bg-gray-200'}">
+  {label}
+</button>
+```
+
+This approach is cleaner when you have standalone component files, while the `mdx` snippet approach is better for inline component definitions or when you need shared logic across components.
+
 ### Supported Syntax
 
 **Self-closing components:**
@@ -689,7 +788,7 @@ MDX components support three attribute value types:
 
 MDX components are streaming-safe. Incomplete components are automatically handled during AI streaming:
 
-- Incomplete tags like `<Component attr` are escaped with backticks
+- Incomplete tags like `<Component attr` not rendered to prevent runtime errors
 - Unclosed components like `<Card>content` are auto-closed with `</Card>`
 - Malformed attributes are escaped to prevent rendering errors
 
@@ -697,21 +796,31 @@ This ensures your UI remains stable even when receiving partial markdown from st
 
 ### Component Props
 
-MDX component snippets receive:
-- `token`: The full MdxToken with `tagName`, `attributes`, etc.
+The `mdx` snippet receives three parameters:
+- `token`: The full MdxToken with `tagName`, `attributes`, `selfClosing`, etc.
+- `props`: Object containing all parsed attributes (e.g., `props.title`, `props.count`)
 - `children`: Snippet containing parsed markdown content
-- **All attributes spread directly**: Access attributes by name (e.g., `title`, `count`, `active`)
 
-Example:
+Use `token.tagName` to determine which component is being rendered:
+
 ```svelte
 <!-- Markdown: <Card title="Hello" count={5}>Content</Card> -->
 <Streamdown {content}>
-  {#snippet Card({ title, count, children })}
-    <div>
-      <h3>{title}</h3>
-      <span>Count: {count}</span>
+  {#snippet mdx({ token, props, children })}
+    {#if token.tagName === 'Card'}
+      <div>
+        <h3>{props.title}</h3>
+        <span>Count: {props.count}</span>
+        {@render children()}
+      </div>
+    {:else if token.tagName === 'Alert'}
+      <div class="alert alert-{props.type}">
+        {@render children()}
+      </div>
+    {:else}
+      <!-- Fallback for unknown components -->
       {@render children()}
-    </div>
+    {/if}
   {/snippet}
 </Streamdown>
 ```

package/dist/Block.svelte

@@ -7,13 +7,17 @@
 	import { getContext } from 'svelte';
 
 	let {
-		block
+		block,
+		static: isStatic = false
 	}: {
 		block: string;
+		static?: boolean;
 	} = $props();
 
 	const streamdown = useStreamdown();
-	const tokens = $derived(lex(parseIncompleteMarkdown(block.trim()), streamdown.extensions));
+	const tokens = $derived(
+		lex(isStatic ? block : parseIncompleteMarkdown(block.trim()), streamdown.extensions)
+	);
 	const insidePopover = getContext('POPOVER');
 </script>
 
@@ -24,8 +28,8 @@
 			{@const isTextOnlyNode = children.length === 0}
 			<Element {token}>
 				{#if isTextOnlyNode}
-					{#if streamdown.animation.enabled && !insidePopover}
-						<AnimatedText text={'text' in token ? token.text : ''} />
+					{#if streamdown.animation.enabled && !insidePopover && !isStatic}
+						<AnimatedText text={'text' in token ? token.text || '' : ''} />
 					{:else}
 						{'text' in token ? token.text : ''}
 					{/if}

package/dist/Block.svelte.d.ts

@@ -1,5 +1,6 @@
 type $$ComponentProps = {
     block: string;
+    static?: boolean;
 };
 declare const Block: import("svelte").Component<$$ComponentProps, {}, "">;
 type Block = ReturnType<typeof Block>;

package/dist/Elements/Code.svelte

@@ -3,6 +3,7 @@
 	import { save } from '../utils/save.js';
 	import { useCopy } from '../utils/copy.svelte.js';
 	import { HighlighterManager, languageExtensionMap } from '../utils/hightlighter.svelte.js';
+	import { bundledLanguagesInfo } from '../utils/bundledLanguages.js';
 	import type { Tokens } from 'marked';
 	import { type ThemedToken } from 'shiki';
 	import { untrack } from 'svelte';
@@ -17,7 +18,11 @@
 	} = $props();
 
 	const streamdown = useStreamdown();
-	const highlighter = HighlighterManager.create(streamdown.shikiPreloadThemes);
+	const highlighter = HighlighterManager.create(
+		bundledLanguagesInfo,
+		streamdown.shikiThemes,
+		streamdown.shikiLanguages
+	);
 
 	const copy = useCopy({
 		get content() {

package/dist/Elements/Element.svelte

@@ -1,10 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import Link from './Link.svelte';
-	import Code from './Code.svelte';
 	import Image from './Image.svelte';
-	import Mermaid from './Mermaid.svelte';
-	import Math from './Math.svelte';
 	import Alert from './Alert.svelte';
 	import type { StreamdownToken } from '../marked/index.js';
 	import Slot from './Slot.svelte';
@@ -12,9 +9,16 @@
 	import FootnoteRef from './FootnoteRef.svelte';
 	import Citation from './Citation.svelte';
 	import TableDownload from './TableDownload.svelte';
+	// Import fallback components
+	import { CodeFallback, MermaidFallback, MathFallback } from './fallbacks/index.js';
 	let { token, children }: { token: StreamdownToken; children: Snippet } = $props();
 	const streamdown = useStreamdown();
 
+	// Use provided components or fallback to lightweight versions
+	const CodeComponent = $derived(streamdown.components?.code ?? CodeFallback);
+	const MermaidComponent = $derived(streamdown.components?.mermaid ?? MermaidFallback);
+	const MathComponent = $derived(streamdown.components?.math ?? MathFallback);
+
 	// Only apply animation on block level elements. Leaves text elements to be animated by their text children.
 	const style = $derived(streamdown.isMounted ? streamdown.animationBlockStyle : '');
 	const id = $props.id();
@@ -68,11 +72,11 @@
 	</Slot>
 {:else if token.type === 'code' && token.lang === 'mermaid'}
 	<Slot props={{ children, token }} render={streamdown.snippets.code}>
-		<Mermaid {id} {token} />
+		<MermaidComponent {id} {token} />
 	</Slot>
 {:else if token.type === 'code'}
 	<Slot props={{ children, token }} render={streamdown.snippets.code}>
-		<Code {id} {token} />
+		<CodeComponent {id} {token} />
 	</Slot>
 {:else if token.type === 'codespan'}
 	<Slot props={{ children, token }} render={streamdown.snippets.codespan}>
@@ -240,7 +244,7 @@
 		}}
 		render={streamdown.snippets.math}
 	>
-		<Math {id} {token} />
+		<MathComponent {id} {token} />
 	</Slot>
 {:else if token.type === 'alert'}
 	<Alert {id} {token} {children} />
@@ -299,16 +303,13 @@
 		{@html content}
 	{/if}
 {:else if token.type === 'mdx'}
-	{#if token.tagName in streamdown.snippets}
-		<Slot
-			props={{ token, children, ...token.attributes }}
-			render={streamdown.snippets[token.tagName as keyof typeof streamdown.snippets]}
-		>
+	{@const Component = streamdown.mdxComponents?.[token.tagName]}
+	{#if Component}
+		<Component {token} {children} props={token.attributes} />
+	{:else}
+		<Slot props={{ token, children, props: token.attributes }} render={streamdown.snippets.mdx}>
 			{@render children()}
 		</Slot>
-	{:else}
-		<!-- Fallback if no snippet provided for this component -->
-		{@render children()}
 	{/if}
 {:else}
 	<!-- For tokens we don't handle specifically, it may certainely be a custom extension to to the children props to handle -->

package/dist/Elements/Mermaid.svelte

@@ -6,6 +6,7 @@
 	import { on } from 'svelte/events';
 	import { usePanzoom } from '../utils/panzoom.svelte';
 	import { fitViewIcon, fullscreenIcon, zoomInIcon, zoomOutIcon } from './icons.js';
+	import MermaidDownload from './MermaidDownload.svelte';
 
 	const streamdown = useStreamdown();
 
@@ -254,6 +255,7 @@
 					>
 						{@render (streamdown.icons?.fullscreen || fullscreenIcon)()}
 					</button>
+					<MermaidDownload {id} />
 				</div>
 			{/if}
 			<svg {@attach panzoom.attach} data-mermaid-svg></svg>

package/dist/Elements/MermaidDownload.svelte

@@ -0,0 +1,196 @@
+<script lang="ts">
+	import { useStreamdown } from '../context.svelte.js';
+	import { scale } from 'svelte/transition';
+	import { downloadIcon } from './icons.js';
+	import { Popover } from './popover.svelte.js';
+	import { useClickOutside } from '../utils/useClickOutside.svelte.js';
+	import { useKeyDown } from '../utils/useKeyDown.svelte.js';
+	import { save } from '../utils/save.js';
+
+	let {
+		id
+	}: {
+		id: string;
+	} = $props();
+
+	const streamdown = useStreamdown();
+	const popover = new Popover();
+
+	useKeyDown({
+		keys: ['Escape'],
+		get isActive() {
+			return popover.isOpen;
+		},
+		callback: () => {
+			popover.isOpen = false;
+		}
+	});
+
+	const clickOutside = useClickOutside({
+		get isActive() {
+			return popover.isOpen;
+		},
+		callback: () => {
+			popover.isOpen = false;
+		}
+	});
+
+	const getSvgElement = (): SVGSVGElement | null => {
+		const container = document.querySelector(`[data-streamdown-mermaid="${id}"]`);
+		if (!container) return null;
+
+		const svgContainer = container.querySelector('[data-mermaid-svg]');
+		if (!svgContainer) return null;
+
+		// The actual SVG is rendered inside the data-mermaid-svg container
+		const svg = svgContainer.querySelector('svg');
+		return svg;
+	};
+
+	const downloadSvg = () => {
+		const svg = getSvgElement();
+		if (!svg) return;
+
+		// Clone the SVG to avoid modifying the original
+		const clonedSvg = svg.cloneNode(true) as SVGSVGElement;
+
+		// Ensure the SVG has proper xmlns
+		clonedSvg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+		clonedSvg.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
+
+		// Get computed styles and inline them for standalone SVG
+		const styles = getComputedStyle(svg);
+		if (!clonedSvg.getAttribute('width')) {
+			clonedSvg.setAttribute('width', styles.width);
+		}
+		if (!clonedSvg.getAttribute('height')) {
+			clonedSvg.setAttribute('height', styles.height);
+		}
+
+		const svgString = new XMLSerializer().serializeToString(clonedSvg);
+		save('mermaid-diagram.svg', svgString, 'image/svg+xml');
+		popover.isOpen = false;
+	};
+
+	const downloadPng = async () => {
+		const svg = getSvgElement();
+		if (!svg) return;
+
+		// Clone the SVG to avoid modifying the original
+		const clonedSvg = svg.cloneNode(true) as SVGSVGElement;
+
+		// Ensure the SVG has proper xmlns
+		clonedSvg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+		clonedSvg.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
+
+		// Get dimensions
+		const bbox = svg.getBBox();
+		const styles = getComputedStyle(svg);
+		const width = parseFloat(styles.width) || bbox.width || 800;
+		const height = parseFloat(styles.height) || bbox.height || 600;
+
+		// Set explicit dimensions on the cloned SVG
+		clonedSvg.setAttribute('width', String(width));
+		clonedSvg.setAttribute('height', String(height));
+
+		// Serialize SVG to string
+		const svgString = new XMLSerializer().serializeToString(clonedSvg);
+
+		// Use data URL instead of blob URL to avoid tainted canvas issues
+		const svgDataUrl = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgString)));
+
+		// Create an image to load the SVG
+		const img = new Image();
+
+		img.onload = () => {
+			// Create a canvas with 2x scale for better quality
+			const scale = 2;
+			const canvas = document.createElement('canvas');
+			canvas.width = width * scale;
+			canvas.height = height * scale;
+
+			const ctx = canvas.getContext('2d');
+			if (!ctx) {
+				return;
+			}
+
+			// Fill with white background (optional, remove for transparent)
+			ctx.fillStyle = '#ffffff';
+			ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+			// Scale and draw the image
+			ctx.scale(scale, scale);
+			ctx.drawImage(img, 0, 0);
+
+			// Convert to PNG and download
+			canvas.toBlob((blob) => {
+				if (blob) {
+					const url = URL.createObjectURL(blob);
+					const link = document.createElement('a');
+					link.href = url;
+					link.download = 'mermaid-diagram.png';
+					document.body.appendChild(link);
+					link.click();
+					document.body.removeChild(link);
+					URL.revokeObjectURL(url);
+				}
+			}, 'image/png');
+		};
+
+		img.onerror = () => {
+			console.error('Failed to load SVG for PNG conversion');
+		};
+
+		img.src = svgDataUrl;
+		popover.isOpen = false;
+	};
+
+	const download = (type: 'SVG' | 'PNG') => {
+		if (type === 'SVG') {
+			downloadSvg();
+		} else {
+			downloadPng();
+		}
+	};
+</script>
+
+{#if popover.isOpen}
+	<dialog
+		id={'mermaid-download-popover'}
+		aria-modal="false"
+		transition:scale|global={{ start: 0.95, duration: 100 }}
+		{@attach clickOutside.attachment}
+		{@attach popover.popoverAttachment}
+		open
+		style:width="fit-content !important"
+		style:min-width="fit-content !important"
+		class={streamdown.theme.components.popover}
+	>
+		{#each ['PNG', 'SVG'] as type}
+			<button
+				style="width: 100%; text-align: left; justify-content: flex-start; padding: 1rem 1rem; margin: 0.2rem 0;"
+				onclick={() => download(type as 'SVG' | 'PNG')}
+				class={streamdown.theme.components.button}
+			>
+				{type}
+			</button>
+		{/each}
+	</dialog>
+{/if}
+
+<button
+	class={streamdown.theme.components.button}
+	onclick={(e: MouseEvent) => {
+		if (popover.isOpen) {
+			popover.isOpen = false;
+			return;
+		}
+		popover.reference = e.target as HTMLButtonElement;
+		popover.isOpen = true;
+	}}
+	{@attach clickOutside.attachment}
+	title="Download diagram"
+	data-panzoom-ignore
+>
+	{@render (streamdown.icons?.download || downloadIcon)()}
+</button>

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

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

package/dist/Elements/fallbacks/CodeFallback.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { useStreamdown } from '../../context.svelte.js';
+	import type { Tokens } from 'marked';
+
+	const {
+		token,
+		id
+	}: {
+		token: Tokens.Code;
+		id: string;
+	} = $props();
+
+	const streamdown = useStreamdown();
+</script>
+
+<div
+	data-streamdown-code={id}
+	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>
+	</div>
+	<div style="height: fit-content; width: 100%;" class={streamdown.theme.code.container}>
+		<pre class={streamdown.theme.code.pre}><code
+				>{#each token.text.split('\n') as line}<span class={streamdown.theme.code.line}
+						><span style={streamdown.isMounted ? streamdown.animationTextStyle : ''}
+							>{line.trim().length > 0 ? line : '\u200B'}</span
+						></span
+					>{/each}</code
+			></pre>
+	</div>
+</div>

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

@@ -0,0 +1,8 @@
+import type { Tokens } from 'marked';
+type $$ComponentProps = {
+    token: Tokens.Code;
+    id: string;
+};
+declare const CodeFallback: import("svelte").Component<$$ComponentProps, {}, "">;
+type CodeFallback = ReturnType<typeof CodeFallback>;
+export default CodeFallback;

package/dist/Elements/fallbacks/MathFallback.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { useStreamdown } from '../../context.svelte.js';
+	import type { MathToken } from '../../marked/index.js';
+
+	const {
+		token,
+		id
+	}: {
+		token: MathToken;
+		id: string;
+	} = $props();
+
+	const streamdown = useStreamdown();
+</script>
+
+{#if token.isInline}
+	<span
+		data-streamdown-inline-math={id}
+		style={streamdown.isMounted ? streamdown.animationBlockStyle : ''}
+		class={streamdown.theme.math.inline}
+	>
+		<code>{token.text}</code>
+	</span>
+{:else}
+	<div
+		data-streamdown-block-math={id}
+		style={streamdown.isMounted ? streamdown.animationBlockStyle : ''}
+		style:height="fit-content"
+		style:width="100%"
+	>
+		<div class="overflow-x-auto">
+			<pre class={streamdown.theme.math.block}><code>{token.text}</code></pre>
+		</div>
+	</div>
+{/if}

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

@@ -0,0 +1,8 @@
+import type { MathToken } from '../../marked/index.js';
+type $$ComponentProps = {
+    token: MathToken;
+    id: string;
+};
+declare const MathFallback: import("svelte").Component<$$ComponentProps, {}, "">;
+type MathFallback = ReturnType<typeof MathFallback>;
+export default MathFallback;