svelte-streamdown 4.0.0 → 4.0.1

package/README.md

@@ -512,7 +512,7 @@ Prefixes can also be **protocol-only**, which allows any URL using that protocol
 ```
 
 > [!NOTE]
-> `'*'` allows all `http://` and `https://` URLs. A protocol-only prefix only allows that exact protocol, so list each one you want to permit. Only add a protocol you trust — e.g. do not add `'javascript:'`.
+> `'*'` allows every `http:`, `https:`, `mailto:` and `tel:` URL — the protocols a document can legitimately link to. `javascript:`, `data:` and `vbscript:` stay blocked under the wildcard because they execute in the page's origin. A protocol-only prefix only allows that exact protocol, so list each one you want to permit. Only add a protocol you trust — e.g. do not add `'javascript:'`.
 
 ## 📦 Bundle Optimization
 
@@ -707,9 +707,13 @@ v4 replaces shiki with `@tanstack/highlight`. Highlighting is now synchronous, r
 | `defaultOrigin`            | `string`                                                                                                    | -                      | Default origin for relative URLs                                                                                                                                                                                             |
 | `allowedLinkPrefixes`      | `string[]`                                                                                                  | `['*']`                | Allowed URL prefixes for links                                                                                                                                                                                               |
 | `allowedImagePrefixes`     | `string[]`                                                                                                  | `['*']`                | Allowed URL prefixes for images                                                                                                                                                                                              |
-| `skipHtml`                 | `boolean`                                                                                                   | -                      | Skip HTML parsing entirely                                                                                                                                                                                                   |
-| `unwrapDisallowed`         | `boolean`                                                                                                   | -                      | Unwrap instead of removing disallowed elements                                                                                                                                                                               |
-| `urlTransform`             | `UrlTransform \| null`                                                                                      | -                      | Custom URL transformation function                                                                                                                                                                                           |
+| `renderHtml`               | `boolean \| ((token) => string)`                                                                            | `false`                | Render raw HTML blocks and inline tags. When off, the HTML source is shown as literal text instead of being dropped. Pass a function to sanitize and return the HTML string yourself.                                        |
+| `inlineCitationsMode`      | `'list' \| 'carousel'`                                                                                      | `'carousel'`           | How an inline citation popover presents its sources                                                                                                                                                                          |
+| `translations`             | `{ alert?: { note?, tip?, warning?, caution?, important? } }`                                               | -                      | Override the built-in alert titles                                                                                                                                                                                           |
+| `icons`                    | `Partial<Record<IconName, Snippet>>`                                                                        | -                      | Replace any built-in icon (`copy`, `check`, `download`, `fullscreen`, `zoomIn`, `zoomOut`, `fitView`, `chevronLeft`, `chevronRight`, `note`, `tip`, `warning`, `caution`, `important`) with your own snippet                 |
+| `static`                   | `boolean`                                                                                                   | `false`                | Render finished content: skips the incomplete-markdown pass and the streaming animation                                                                                                                                      |
+| `element`                  | `HTMLElement`                                                                                               | -                      | `bind:element` to get the wrapper node                                                                                                                                                                                       |
+| `streamdown`               | `StreamdownContext`                                                                                         | -                      | `bind:streamdown` to read the resolved context (theme, controls, footnotes, sources)                                                                                                                                         |
 | `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                                                                                                                                                                                       |
@@ -720,7 +724,7 @@ v4 replaces shiki with `@tanstack/highlight`. Highlighting is now synchronous, r
 | `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.type`           | `'fade' \| 'blur' \| '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                                                                                                                                                                                      |
@@ -739,7 +743,7 @@ v4 replaces shiki with `@tanstack/highlight`. Highlighting is now synchronous, r
 
 **Lists**: `ul`, `ol`, `li`
 
-**Code**: `code`, `codeSpan`
+**Code**: `code`, `codespan`
 
 **Tables**: `table`, `thead`, `tbody`, `tr`, `th`, `td`, `tfoot`
 
@@ -1103,6 +1107,10 @@ pnpm dev
 # Run tests
 pnpm test
 
+# Run the browser (component) tests — needs a Chromium binary:
+# pnpm exec playwright install chromium
+pnpm test:browser
+
 # Build for production
 pnpm build
 ```

package/dist/Block.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { parseIncompleteMarkdown } from './utils/parse-incomplete-markdown.js';
+	import { parseIncompleteMarkdown as completeMarkdown } 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';
@@ -15,8 +15,11 @@
 	} = $props();
 
 	const streamdown = useStreamdown();
+	// The old code never consulted `streamdown.parseIncompleteMarkdown`; the import
+	// is aliased so the context flag and the helper cannot be confused.
+	const complete = $derived(!isStatic && streamdown.parseIncompleteMarkdown !== false);
 	const tokens = $derived(
-		lex(isStatic ? block : parseIncompleteMarkdown(block.trim()), streamdown.extensions)
+		lex(complete ? completeMarkdown(block.trim()) : block, streamdown.extensions)
 	);
 	const insidePopover = getContext('POPOVER');
 </script>

package/dist/Elements/Citation.svelte

@@ -174,7 +174,7 @@
 		style:position="relative"
 		style:transition-duration="200ms"
 		style:transition-timing-function="ease-in-out"
-		aria-label="Citations-${id}"
+		aria-label={'Citations-' + id}
 	>
 		<div
 			bind:this={stepper.stepContainer}
@@ -193,7 +193,7 @@
 					style:height="fit-content"
 					style:width="100%"
 					style:flex-grow="1"
-					aria-label="Citation-${id}"
+					aria-label={'Citation-' + id}
 				>
 					<Slot render={streamdown.snippets.inlineCitationContent} props={{ source, key, token }}>
 						{#if url || title}

package/dist/Elements/Code.svelte

@@ -3,22 +3,27 @@
 	import { save } from '../utils/save.js';
 	import { useCopy } from '../utils/copy.svelte.js';
 	import { highlightLines, languageExtensionMap } from '../utils/hightlighter.svelte.js';
-	import type { Tokens } from 'marked';
+	import type { CodeToken } from '../marked/index.js';
 	import { checkIcon, copyIcon, downloadIcon } from './icons.js';
 
 	const {
 		token,
 		id
 	}: {
-		token: Tokens.Code;
+		token: CodeToken;
 		id: string;
 	} = $props();
 
 	const streamdown = useStreamdown();
 
+	// marked keeps the fence's trailing blank lines in `text`; they render as empty
+	// lines and, while streaming, flicker in and out on nearly every chunk. Render,
+	// copy and download all read this so they can never disagree.
+	const code = $derived(token.text.replace(/\n+$/, ''));
+
 	const copy = useCopy({
 		get content() {
-			return token.text;
+			return code;
 		}
 	});
 
@@ -32,13 +37,13 @@
 					: 'txt';
 			const filename = `file.${extension}`;
 			const mimeType = 'text/plain';
-			save(filename, token.text, mimeType);
+			save(filename, code, mimeType);
 		} catch (error) {
 			console.error('Failed to download file:', error);
 		}
 	};
 
-	const lines = $derived(highlightLines(token.text, token.lang, streamdown.highlightLanguages));
+	const lines = $derived(highlightLines(code, token.lang, streamdown.highlightLanguages));
 </script>
 
 <div

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

@@ -1,6 +1,6 @@
-import type { Tokens } from 'marked';
+import type { CodeToken } from '../marked/index.js';
 type $$ComponentProps = {
-    token: Tokens.Code;
+    token: CodeToken;
     id: string;
 };
 declare const Code: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/Elements/Element.svelte

@@ -288,12 +288,11 @@
 			{@render children()}
 		</dd>
 	</Slot>
-{:else if token.type === 'def'}
-	<!-- TODO This does not seems to be tokenized for now -->
+{:else if token.type === 'def' || token.type === 'space'}
+	<!-- Link reference definitions and blank lines produce no output (CommonMark) -->
 {:else if token.type === 'escape'}
-	<!-- TODO This does not seems to be tokenized for now -->
-{:else if token.type === 'space'}
-	<!-- TODO This does not seems to be tokenized for now -->
+	<!-- `children` renders token.text, i.e. the escaped character itself -->
+	{@render children()}
 {:else if token.type === 'text'}
 	{@render children()}
 {:else if token.type === 'html'}
@@ -301,6 +300,10 @@
 		{@const content =
 			typeof streamdown.renderHtml === 'function' ? streamdown.renderHtml(token) : token.raw}
 		{@html content}
+	{:else}
+		<!-- Without renderHtml the source is shown literally instead of being dropped;
+		     `children` interpolates it as text, so Svelte escapes it — no XSS surface -->
+		{@render children()}
 	{/if}
 {:else if token.type === 'mdx'}
 	{@const Component = streamdown.mdxComponents?.[token.tagName]}

package/dist/Elements/Link.svelte

@@ -39,6 +39,7 @@
 		<a
 			data-streamdown-link={id}
 			class={streamdown.theme.link.base}
+			title={token.title}
 			{...isRelativeUrl
 				? { href: token.href }
 				: { href: transformedUrl, target: '_blank', rel: 'noopener noreferrer' }}
@@ -50,7 +51,7 @@
 	<span
 		data-streamdown-link-blocked={id}
 		class={streamdown.theme.link.blocked}
-		title={token.title ? `Blocked URL: ${token.href}` : undefined}
+		title={`Blocked URL: ${token.href}`}
 	>
 		{@render children()} [blocked]
 	</span>

package/dist/Elements/Mermaid.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { useStreamdown } from '../context.svelte.js';
-	import type { Tokens } from 'marked';
+	import type { CodeToken } from '../marked/index.js';
 	import type { MermaidConfig } from 'mermaid';
 	import { on } from 'svelte/events';
 	import { usePanzoom } from '../utils/panzoom.svelte';
@@ -14,10 +14,15 @@
 		token,
 		id
 	}: {
-		token: Tokens.Code;
+		token: CodeToken;
 		id: string;
 	} = $props();
 
+	// Trailing blank lines are noise for mermaid but they still changed `token.text`
+	// on nearly every streamed chunk, which re-ran the whole render. Same trim as
+	// Code.svelte.
+	const chart = $derived(token.text.replace(/\n+$/, ''));
+
 	let mermaid = $state<any>(null);
 	onMount(async () => {
 		mermaid = (await import('mermaid')).default;
@@ -217,7 +222,7 @@
 		<div
 			style={streamdown.isMounted ? streamdown.animationBlockStyle : ''}
 			class={streamdown.theme.mermaid.base}
-			{@attach (node) => renderMermaid(token.text, node)}
+			{@attach (node) => renderMermaid(chart, node)}
 			{@attach insider.attach}
 			data-expanded={'false'}
 		>

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

@@ -1,6 +1,6 @@
-import type { Tokens } from 'marked';
+import type { CodeToken } from '../marked/index.js';
 type $$ComponentProps = {
-    token: Tokens.Code;
+    token: CodeToken;
     id: string;
 };
 declare const Mermaid: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/Elements/MermaidDownload.svelte

@@ -156,7 +156,7 @@
 
 {#if popover.isOpen}
 	<dialog
-		id={'mermaid-download-popover'}
+		id={'mermaid-download-popover-' + id}
 		aria-modal="false"
 		transition:scale|global={{ start: 0.95, duration: 100 }}
 		{@attach clickOutside.attachment}

package/dist/Elements/TableDownload.svelte

@@ -46,6 +46,15 @@
 		}
 	});
 
+	// textContent flattens a real <br> element, so a multiline cell collapses to
+	// 'Paragraph one.Paragraph two.'. Walk the cell instead and keep the breaks;
+	// the quoting below then quotes the newline for us.
+	const extractCellText = (node: Node): string => {
+		if (node.nodeType === 3) return node.textContent || '';
+		if ((node as Element).tagName === 'BR') return '\n';
+		return Array.from(node.childNodes).map(extractCellText).join('');
+	};
+
 	const copyOrDownload = (type: 'Markdown' | 'HTML' | 'CSV') => {
 		if (type === 'Markdown') {
 			copyValue = token.raw;
@@ -55,7 +64,7 @@
 				save('table.md', copyValue, 'text/markdown');
 			}
 		} else if (type === 'HTML') {
-			const table = document.querySelector(`[data-streamdown-table=${id}]`);
+			const table = document.querySelector(`[data-streamdown-table="${id}"]`);
 
 			if (table) {
 				let html = (table.cloneNode(true) as HTMLElement).outerHTML;
@@ -83,7 +92,7 @@
 				}
 			}
 		} else if (type === 'CSV') {
-			const table = document.querySelector(`[data-streamdown-table=${id}]`);
+			const table = document.querySelector(`[data-streamdown-table="${id}"]`);
 
 			if (table) {
 				const rows = table.querySelectorAll('tr');
@@ -98,9 +107,8 @@
 						const colSpan = parseInt(cell.getAttribute('colspan') || '1');
 						const rowSpan = parseInt(cell.getAttribute('rowspan') || '1');
 
-						// Add the cell content
 						// Add the cell content, quoting if it contains commas, quotes, or newlines
-						const content = cell.textContent || '';
+						const content = extractCellText(cell);
 						const needsQuoting = /[,"\n]/.test(content);
 						const escapedContent = content.replace(/"/g, '""');
 						rowData.push(needsQuoting ? `"${escapedContent}"` : content);
@@ -150,7 +158,7 @@
 
 {#if popover.isOpen}
 	<dialog
-		id={'table-download-popover'}
+		id={'table-download-popover-' + id}
 		aria-modal="false"
 		transition:scale|global={{ start: 0.95, duration: 100 }}
 		{@attach clickOutside.attachment}

package/dist/Elements/fallbacks/CodeFallback.svelte

@@ -11,6 +11,12 @@
 	} = $props();
 
 	const streamdown = useStreamdown();
+
+	// Same trim as Code.svelte/Mermaid.svelte: marked keeps the fence's trailing
+	// blank lines in `text`, so they render as empty lines and flicker in and out
+	// on nearly every streamed chunk. This is the default renderer, so it needs it
+	// too.
+	const code = $derived(token.text.replace(/\n+$/, ''));
 </script>
 
 <div
@@ -23,7 +29,7 @@
 	</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}
+				>{#each code.split('\n') as line}<span class={streamdown.theme.code.line}
 						><span style={streamdown.isMounted ? streamdown.animationTextStyle : ''}
 							>{line.trim().length > 0 ? line : '\u200B'}</span
 						></span

package/dist/Elements/fallbacks/MermaidFallback.svelte

@@ -11,6 +11,12 @@
 	} = $props();
 
 	const streamdown = useStreamdown();
+
+	// Same trim as Code.svelte/Mermaid.svelte: marked keeps the fence's trailing
+	// blank lines in `text`, so they render as empty lines and flicker in and out
+	// on nearly every streamed chunk. This is the default renderer, so it needs it
+	// too.
+	const chart = $derived(token.text.replace(/\n+$/, ''));
 </script>
 
 <div data-streamdown-mermaid={id}>
@@ -23,7 +29,7 @@
 		</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}
+					>{#each chart.split('\n') as line}<span class={streamdown.theme.code.line}
 							><span style={streamdown.isMounted ? streamdown.animationTextStyle : ''}
 								>{line.trim().length > 0 ? line : '\u200B'}</span
 							></span

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 export { default as Streamdown } from './Streamdown.svelte';
 export { useStreamdown, type StreamdownProps } from './context.svelte.js';
 export { theme, shadcnTheme, mergeTheme, type Theme } from './theme.js';
-export { type Extension, type StreamdownToken, lex, parseBlocks } from './marked/index.js';
+export { type CodeToken, type Extension, type StreamdownToken, lex, parseBlocks } from './marked/index.js';
 export { parseIncompleteMarkdown, type Plugin, IncompleteMarkdownParser } from './utils/parse-incomplete-markdown.js';
 export { defineLanguage, type LanguageDefinition } from '@tanstack/highlight';
 export type { HighlightTheme } from '@tanstack/highlight/theme';

package/dist/marked/index.d.ts

@@ -23,7 +23,14 @@ export type Extension = {
     start?: TokenizerStartFunction;
     applyInBlockParsing?: boolean;
 };
-export type StreamdownToken = Exclude<MarkedToken, Tokens.List | Tokens.ListItem | Tokens.Table> | ListToken | ListItemToken | MathToken | AlertToken | FootnoteToken | SubSupToken | BrToken | HrToken | TableToken | THead | TBody | TFoot | THeadRow | TRow | TH | TD | DescriptionListToken | DescriptionToken | DescriptionDetailToken | DescriptionTermToken | AlignToken | CitationToken | MdxToken;
+/**
+ * A fenced code block. `lang` is the first word of the info string; everything
+ * after it is `meta` (`undefined` when there is none).
+ */
+export type CodeToken = Tokens.Code & {
+    meta?: string;
+};
+export type StreamdownToken = Exclude<MarkedToken, Tokens.List | Tokens.ListItem | Tokens.Table | Tokens.Code> | CodeToken | ListToken | ListItemToken | MathToken | AlertToken | FootnoteToken | SubSupToken | BrToken | HrToken | TableToken | THead | TBody | TFoot | THeadRow | TRow | TH | TD | DescriptionListToken | DescriptionToken | DescriptionDetailToken | DescriptionTermToken | AlignToken | CitationToken | MdxToken;
 export type { TableToken, THead, TBody, TFoot, THeadRow, TRow, TH, TD } from './marked-table.js';
 export declare const lex: (markdown: string, extensions?: Extension[]) => StreamdownToken[];
 /**

package/dist/marked/index.js

@@ -1,4 +1,4 @@
-import { Lexer } from 'marked';
+import { Lexer, Tokenizer } from 'marked';
 import { markedAlert } from './marked-alert.js';
 import { markedFootnote } from './marked-footnotes.js';
 import { markedMath } from './marked-math.js';
@@ -39,9 +39,42 @@ const DEFAULT_BLOCK_EXTENSIONS = [
     markedAlign,
     markedMdx
 ];
+class StreamdownTokenizer extends Tokenizer {
+    /**
+     * marked keeps the whole fence info string in `lang`, so ```ts title="x" {1}
+     * highlighted as plaintext, labelled the header with the entire string, downloaded
+     * as `file.txt` and — worst — missed `token.lang === 'mermaid'` (upstream d4ec6c0).
+     * Splitting here rather than walking lex()'s output costs one search per code
+     * token instead of a per-block tree walk, and it also reaches fences nested in
+     * lists and blockquotes, which a pass over the top-level tokens would not.
+     */
+    fences(src) {
+        const token = super.fences(src);
+        if (token?.lang) {
+            const end = token.lang.search(/\s/);
+            if (end !== -1) {
+                token.meta = token.lang.slice(end + 1).trim() || undefined;
+                token.lang = token.lang.slice(0, end);
+            }
+        }
+        return token;
+    }
+    /**
+     * `~x~` is a subscript here, not GFM strikethrough (marked-subsup.ts). The old
+     * subscript rule shadowed single-tilde del by matching anything; now that it
+     * rejects whitespace, del would inherit exactly the sentences 716a5f0 is about
+     * (`20~25°C and 30~35°C` → del('~25°C and 30~')). Only `~~` opens a del.
+     */
+    del(src, maskedSrc, prevChar) {
+        if (src.charCodeAt(0) !== 126 /* ~ */ || src.charCodeAt(1) !== 126)
+            return;
+        return super.del(src, maskedSrc, prevChar);
+    }
+}
 const parseExtensions = (...extensions) => {
     const options = {
         gfm: true,
+        tokenizer: new StreamdownTokenizer(),
         extensions: {
             block: [],
             inline: [],
@@ -71,9 +104,12 @@ const parseExtensions = (...extensions) => {
     });
     return options;
 };
-// Options objects are stateless and reusable across Lexer instances; cache them
-// per user-extension array (props are referentially stable across chunks) so the
-// hot path skips rebuilding ~20 tokenizer registrations on every streamed chunk.
+// Options objects are reusable across Lexer instances; cache them per
+// user-extension array (props are referentially stable across chunks) so the hot
+// path skips rebuilding ~20 tokenizer registrations on every streamed chunk. The
+// cached object carries one shared Tokenizer whose `lexer` back-pointer marked
+// re-stamps per Lexer construction — safe only because lexing is synchronous and
+// never re-entrant across documents.
 const DEFAULT_LEX_OPTIONS = parseExtensions(...DEFAULT_LEX_EXTENSIONS);
 const DEFAULT_BLOCK_OPTIONS = parseExtensions(...DEFAULT_BLOCK_EXTENSIONS);
 const lexOptionsCache = new WeakMap();

package/dist/marked/marked-footnotes.js

@@ -1,8 +1,12 @@
 import {} from './index.js';
 import { StreamdownContext } from '../context.svelte.js';
 import { getContext } from 'svelte';
-const footnoteRegex = /^\[\^([^\]\n]+)\]:(?:[ \t]+|\n|$)([^\n]*(?:\n(?:[ \t]+[^\n]*)?)*)/;
-const footnoteRefRegex = /^\[\^([^\]\n]+)\]/;
+// Footnote identifiers are word characters, `-` and `:` only. `[^\]\n]+` turned
+// every regex character class written in prose (`[^\s]`, `[^,]`) into an empty
+// footnote marker (upstream 9f72224). `:` is kept for the completer's
+// `[^streamdown:footnote]` sentinel, which FootnoteRef.svelte renders as nothing.
+const footnoteRegex = /^\[\^([\w:-]{1,200})\]:(?:[ \t]+|\n|$)([^\n]*(?:\n(?:[ \t]+[^\n]*)?)*)/;
+const footnoteRefRegex = /^\[\^([\w:-]{1,200})\]/;
 const footNoteLastLineRegex = /^[ \t]*?[>\-*][ ]|[`]{3,}$|^[ \t]*?[|].+[|]$/;
 const safeGetContext = () => {
     try {

package/dist/marked/marked-subsup.js

@@ -1,5 +1,8 @@
-const subRule = /^~([^~\s](?:[^~]*[^~\s])?)~/; // ~text~
-const supRule = /^\^([^\^\s](?:[^\^]*[^\^\s])?)\^/; // ^text^
+// A sub/superscript is a single run, never a phrase: no whitespace anywhere in
+// it. The old rules only forbade whitespace at the edges, so `20~25°C and 30~35°C`
+// subscripted half the sentence (upstream 716a5f0).
+const subRule = /^~([^~\s]+)~/; // ~text~
+const supRule = /^\^([^\^\s]+)\^/; // ^text^
 export const markedSub = {
     name: 'sub',
     level: 'inline',
@@ -7,13 +10,23 @@ export const markedSub = {
         const i = src.indexOf('~');
         return i === -1 ? undefined : i;
     },
-    tokenizer(src) {
+    tokenizer(src, tokens) {
         // marked dispatches every inline extension at every scan position; `start`
         // only clips the text rule, it does not gate the tokenizer. This rule is
         // anchored on a single literal character, so one charCodeAt rejects the
         // ~3.6k non-matching dispatches per 100 KB before the regex engine runs.
         if (src.charCodeAt(0) !== 126 /* ~ */)
             return;
+        // A digit right before the opening `~` means a numeric range (`20~25°C`),
+        // not a subscript base — chemistry and indices always have a letter or a
+        // closing bracket there (`H~2~O`, `x~i+1~`). `src` starts at the marker, so
+        // the preceding character is the last one of the previous inline token.
+        const prevRaw = tokens[tokens.length - 1]?.raw;
+        if (prevRaw) {
+            const code = prevRaw.charCodeAt(prevRaw.length - 1);
+            if (code >= 48 && code <= 57)
+                return;
+        }
         const match = src.match(subRule);
         if (match) {
             return {

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

@@ -98,6 +98,20 @@ export class IncompleteMarkdownParser {
     // Create default plugins that replicate the original handler functions
     static createDefaultPlugins() {
         return [
+            {
+                // Runs first: in a list item a '>' before a number is a comparison
+                // ('- > 25: rich'), but marked reads it as a nested blockquote. Escaping it
+                // keeps the text, and the escape renders as a plain '>' (4fffb9f).
+                // `pattern` is only a cheap gate — a line whose first non-space character is
+                // not a list marker can never match, and bails on that one character.
+                name: 'comparisonOperator',
+                pattern: /^\s*[-*+\d]/,
+                skipInBlockTypes: ['code', 'math'],
+                handler: ({ line }) => {
+                    const match = listItemComparison.exec(line);
+                    return match ? `${match[1]}\\>${line.slice(match[0].length)}` : line;
+                }
+            },
             // Block-level plugin that manages blocking contexts
             {
                 name: 'contextManager',
@@ -172,7 +186,9 @@ export class IncompleteMarkdownParser {
                         result += '\n```';
                     }
                     if (state.blockingContexts.has('math')) {
-                        result += '\n$$';
+                        // The first half of the closing '$$' may already have arrived: adding a
+                        // whole '\n$$' would leave a stray '$' inside the math and '$$' after it.
+                        result += result.endsWith('$') && !result.endsWith('$$') ? '$' : '\n$$';
                     }
                     if (state.blockingContexts.has('center')) {
                         result += '\n[/center]';
@@ -195,6 +211,8 @@ export class IncompleteMarkdownParser {
                     const tripleAsterisks = (line.match(/\*\*\*/g) || []).length;
                     if (tripleAsterisks % 2 === 1) {
                         const lastTripleAsteriskIndex = line.lastIndexOf('***');
+                        if (isWithinCompleteInlineCode(line, lastTripleAsteriskIndex))
+                            return line;
                         const endOfCellOrLine = findEndOfCellOrLineContaining(line, lastTripleAsteriskIndex);
                         if (isEndingWithTripleAsterisk) {
                             return line.substring(0, lastTripleAsteriskIndex);
@@ -222,6 +240,8 @@ export class IncompleteMarkdownParser {
                     if (doubleAsteriskMatches % 2 === 1) {
                         const isEndingWithDoubleAsterisk = line.endsWith('**');
                         const lastDoubleAsteriskIndex = line.lastIndexOf('**');
+                        if (isWithinCompleteInlineCode(line, lastDoubleAsteriskIndex))
+                            return line;
                         const endOfCellOrLine = findEndOfCellOrLineContaining(line, lastDoubleAsteriskIndex);
                         if (isEndingWithDoubleAsterisk) {
                             return line.substring(0, lastDoubleAsteriskIndex);
@@ -248,6 +268,8 @@ export class IncompleteMarkdownParser {
                     if (underscorePairs % 2 === 1) {
                         const isEndingWithDoubleUnderscore = line.endsWith('__');
                         const lastDoubleUnderscoreIndex = line.lastIndexOf('__');
+                        if (isWithinCompleteInlineCode(line, lastDoubleUnderscoreIndex))
+                            return line;
                         const endOfCellOrLine = findEndOfCellOrLineContaining(line, lastDoubleUnderscoreIndex);
                         if (isEndingWithDoubleUnderscore) {
                             return line.substring(0, lastDoubleUnderscoreIndex);
@@ -270,6 +292,8 @@ export class IncompleteMarkdownParser {
                     if (tildePairs % 2 === 1) {
                         const isEndingWithDoubleTilde = line.endsWith('~~');
                         const lastDoubleTildeIndex = line.lastIndexOf('~~');
+                        if (isWithinCompleteInlineCode(line, lastDoubleTildeIndex))
+                            return line;
                         const endOfCellOrLine = findEndOfCellOrLineContaining(line, lastDoubleTildeIndex);
                         // Only complete if there's content after the tildes
                         const contentAfterTildes = line.substring(lastDoubleTildeIndex + 2, endOfCellOrLine);
@@ -296,37 +320,43 @@ export class IncompleteMarkdownParser {
                     }
                     // Inline countSingleAsterisks logic
                     let singleAsterisks = 0;
+                    let lastSingleAsterisk = -1;
                     for (let i = 0; i < line.length; i++) {
                         if (line[i] === '*') {
                             const prevChar = i > 0 ? line[i - 1] : '';
                             const nextChar = i < line.length - 1 ? line[i + 1] : '';
-                            let lineStartIndex = i;
-                            for (let j = i - 1; j >= 0; j--) {
-                                if (line[j] === '\n') {
-                                    lineStartIndex = j + 1;
-                                    break;
-                                }
-                                if (j === 0) {
-                                    lineStartIndex = 0;
-                                    break;
-                                }
+                            // Whitespace on both sides means arithmetic ('5 * 0') or a bare list
+                            // marker, never an emphasis delimiter (c347b53).
+                            if (isSpaceOrEdge(prevChar) && isSpaceOrEdge(nextChar)) {
+                                continue;
                             }
-                            const beforeAsterisk = line.substring(lineStartIndex, i);
-                            if (beforeAsterisk.trim() === '' && (nextChar === ' ' || nextChar === '\t')) {
+                            if (isWithinCompleteInlineCode(line, i)) {
                                 continue;
                             }
                             if (prevChar !== '*' && nextChar !== '*') {
                                 singleAsterisks++;
+                                lastSingleAsterisk = i;
                             }
                         }
                     }
                     if (singleAsterisks % 2 === 1) {
+                        // The dangling asterisk is the last counted one. If it cannot OPEN
+                        // emphasis (nothing or whitespace after it) it is an intraword or
+                        // trailing closer — '*foo*bar*' is literal, not half of '*foo*bar**'
+                        // (9f96409).
+                        if (isSpaceOrEdge(line[lastSingleAsterisk + 1] ?? '')) {
+                            return line;
+                        }
                         // Inline findFirstSingleAsterisk logic
                         let firstSingleAsteriskIndex = -1;
                         for (let i = 0; i < line.length; i++) {
                             if (line[i] === '*' && line[i - 1] !== '*' && line[i + 1] !== '*') {
                                 const prevChar = i > 0 ? line[i - 1] : '';
                                 const nextChar = i < line.length - 1 ? line[i + 1] : '';
+                                if (isSpaceOrEdge(prevChar) && isSpaceOrEdge(nextChar))
+                                    continue;
+                                if (isWithinCompleteInlineCode(line, i))
+                                    continue;
                                 if (/\w/.test(prevChar) && /\w/.test(nextChar))
                                     continue;
                                 if (/\w/.test(prevChar) && !/\s/.test(prevChar))
@@ -391,6 +421,8 @@ export class IncompleteMarkdownParser {
                                 continue;
                             if (isWithinMathBlock(line, i))
                                 continue;
+                            if (isWithinCompleteInlineCode(line, i))
+                                continue;
                             if (prevChar &&
                                 nextChar &&
                                 /[\p{L}\p{N}_]/u.test(prevChar) &&
@@ -410,7 +442,8 @@ export class IncompleteMarkdownParser {
                                 line[i - 1] !== '_' &&
                                 line[i + 1] !== '_' &&
                                 line[i - 1] !== '\\' &&
-                                !isWithinMathBlock(line, i)) {
+                                !isWithinMathBlock(line, i) &&
+                                !isWithinCompleteInlineCode(line, i)) {
                                 const prevChar = i > 0 ? line[i - 1] : '';
                                 const nextChar = i < line.length - 1 ? line[i + 1] : '';
                                 if (prevChar &&
@@ -450,11 +483,17 @@ export class IncompleteMarkdownParser {
                     }
                     if (singleTildes % 2 === 1) {
                         const lastTildeIndex = line.lastIndexOf('~');
-                        if (lastTildeIndex !== -1 && !isWithinMathBlock(line, lastTildeIndex)) {
+                        if (lastTildeIndex !== -1 &&
+                            !isWithinMathBlock(line, lastTildeIndex) &&
+                            !isWithinCompleteInlineCode(line, lastTildeIndex)) {
                             const endOfCellOrLine = findEndOfCellOrLineContaining(line, lastTildeIndex);
-                            // Only complete if there's content after the tilde
                             const contentAfterTilde = line.substring(lastTildeIndex + 1, endOfCellOrLine);
-                            if (contentAfterTilde.trim().length > 0) {
+                            // A subscript is '~text~' with no whitespace inside (same rule as the
+                            // lexer), and a digit before the tilde means a range like '20~25°C':
+                            // closing those would manufacture a subscript nobody typed (716a5f0).
+                            if (contentAfterTilde.length > 0 &&
+                                !/\s/.test(contentAfterTilde) &&
+                                !/\d/.test(line[lastTildeIndex - 1] ?? '')) {
                                 return line.substring(0, endOfCellOrLine) + '~' + line.substring(endOfCellOrLine);
                             }
                         }
@@ -580,6 +619,9 @@ export class IncompleteMarkdownParser {
                                 continue;
                             if (nextChar && /\d/.test(nextChar))
                                 continue;
+                            // A '$' shown as code ('`$var`') must not flip the parity (e50b0c4)
+                            if (isWithinCompleteInlineCode(line, i))
+                                continue;
                             singleDollars++;
                         }
                     }
@@ -593,7 +635,8 @@ export class IncompleteMarkdownParser {
                                     prevChar !== '$' &&
                                     nextChar !== '$' &&
                                     nextChar !== '' &&
-                                    !/\d/.test(nextChar)) {
+                                    !/\d/.test(nextChar) &&
+                                    !isWithinCompleteInlineCode(line, i)) {
                                     lastDollarIndex = i;
                                     break;
                                 }
@@ -866,6 +909,11 @@ export const parseIncompleteMarkdown = (text) => {
     return defaultParser.parse(text);
 };
 // Utility functions
+// Full test for the comparisonOperator plugin, whose `pattern` only gates it.
+const listItemComparison = /^(\s*(?:[-*+]|\d+[.)]) +)>(?==?\s*\$?\d)/;
+// The char accessors in the plugins return '' past either end of the line, so an
+// empty string here means "edge of line".
+const isSpaceOrEdge = (char) => !char || /\s/.test(char);
 const findEndOfCellOrLineContaining = (text, position) => {
     let endPos = position;
     while (endPos < text.length && text[endPos] !== '\n' && text[endPos] !== '|') {
@@ -873,6 +921,40 @@ const findEndOfCellOrLineContaining = (text, position) => {
     }
     return endPos;
 };
+// Scanned on demand, against the line as it stands now, and allocating nothing:
+// the completer runs over every changed block of every streamed chunk, so garbage
+// here surfaces as GC pauses in the stages around it.
+const isWithinCompleteInlineCode = (line, position) => {
+    let open = line.indexOf('`');
+    while (open !== -1 && open <= position) {
+        let openEnd = open;
+        while (line.charCodeAt(openEnd) === 96)
+            openEnd++;
+        const runLength = openEnd - open;
+        let closeStart = -1;
+        for (let j = openEnd; j < line.length; j++) {
+            if (line.charCodeAt(j) !== 96)
+                continue;
+            let closeEnd = j;
+            while (line.charCodeAt(closeEnd) === 96)
+                closeEnd++;
+            if (closeEnd - j === runLength) {
+                closeStart = j;
+                break;
+            }
+            j = closeEnd - 1;
+        }
+        // An unterminated run closes nothing, so neither it nor anything after it
+        // is code: completing emphasis inside it is what streaming needs.
+        if (closeStart === -1)
+            return false;
+        const spanEnd = closeStart + runLength;
+        if (position < spanEnd)
+            return true;
+        open = line.indexOf('`', spanEnd);
+    }
+    return false;
+};
 const isWithinMathBlock = (text, position) => {
     let inInlineMath = false;
     let inBlockMath = false;

package/dist/utils/save.js

@@ -1,5 +1,8 @@
 export const save = (filename, content, mimeType) => {
-    const blob = new Blob([content], { type: mimeType });
+    // Excel on Windows assumes the system codepage without a BOM, so accented
+    // and CJK text in a downloaded CSV opens as mojibake.
+    const body = mimeType.startsWith('text/csv') ? '\uFEFF' + content : content;
+    const blob = new Blob([body], { type: mimeType });
     const url = URL.createObjectURL(blob);
     const link = document.createElement('a');
     link.href = url;

package/dist/utils/url.js

@@ -25,6 +25,7 @@ export const isPathRelativeUrl = (url) => {
         return false;
     return url.startsWith('/');
 };
+const WILDCARD_PROTOCOLS = new Set(['http:', 'https:', 'mailto:', 'tel:']);
 export const transformUrl = (url, allowedPrefixes, defaultOrigin) => {
     if (!url)
         return null;
@@ -61,8 +62,11 @@ export const transformUrl = (url, allowedPrefixes, defaultOrigin) => {
     }
     // Check for wildcard - allow all URLs
     if (allowedPrefixes.includes('*')) {
-        // Wildcard only allows http and https URLs
-        if (parsedUrl.protocol !== 'https:' && parsedUrl.protocol !== 'http:') {
+        // The wildcard allows the protocols a document can legitimately link to.
+        // javascript:, data: and vbscript: stay blocked - they execute in the
+        // page's origin. mailto:/tel: were missing, so the default ['*'] config
+        // rendered a [blocked] badge on every phone and email link.
+        if (!WILDCARD_PROTOCOLS.has(parsedUrl.protocol)) {
             return null;
         }
         const inputWasRelative = isPathRelativeUrl(url);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svelte-streamdown",
-	"version": "4.0.0",
+	"version": "4.0.1",
 	"packageManager": "pnpm@10.32.1",
 	"repository": {
 		"type": "git",
@@ -22,7 +22,8 @@
 		"lint": "prettier --check .",
 		"test:ui": "vitest --ui",
 		"test:unit": "vitest",
-		"test": "npm run test:unit -- --run"
+		"test:browser": "vitest --run --project client",
+		"test": "npm run test:unit -- --run --project server"
 	},
 	"files": [
 		"dist",