svelte-streamdown 3.1.2 → 4.0.1

package/README.md

@@ -75,9 +75,9 @@ Full support for
 
 ### 💻 Interactive Code Blocks
 
-- Syntax highlighting powered by Shiki
+- Syntax highlighting powered by [@tanstack/highlight](https://github.com/TanStack/highlight) (synchronous, SSR-friendly, ~31KB min / ~11KB gzip for every language)
 - Copy-to-clipboard functionality
-- Support any Shiki themes
+- Support any `@tanstack/highlight` theme, or your own
 
 ### 🔢 Mathematical Expressions
 
@@ -398,7 +398,7 @@ Here is how it works on each content update:
 
 During streaming, newly received text almost always only changes the **last** block (and occasionally starts a new one). Every earlier block keeps an identical raw string, so Svelte skips its `lex()` call entirely — this is the equivalent of the memoized `Block` component in the React version. The block-splitting pass itself runs on every update, but it is the cheap pass; the costly inline parsing is what gets reused.
 
-Code highlighting is incremental as well: a code block is only re-highlighted when its text changes, and the Shiki highlighter caches the languages and themes it has already loaded, so a streaming code block does not reload its grammar on every chunk.
+Code highlighting is incremental as well: a code block is only re-highlighted when its text changes. Highlighting itself is synchronous and runs during SSR, so there is no grammar to load, no loading state and no hydration flash.
 
 > [!NOTE]
 > There is intentionally no separate block-level parse cache (e.g. an LRU keyed by block content). For the common append-only streaming case the reactivity-based approach above already avoids redundant work, and a standalone cache would add memory usage and invalidation complexity without a measurable benefit. If you have a workload where this matters, please [open an issue](https://github.com/beynar/svelte-streamdown/issues) with a repro — we're happy to revisit.
@@ -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
 
@@ -524,7 +524,7 @@ Streamdown is optimized for minimal bundle size by making heavy components **opt
 <script>
 	import { Streamdown } from 'svelte-streamdown';
 	// Import only the components you need
-	import Code from 'svelte-streamdown/code'; // Shiki syntax highlighting
+	import Code from 'svelte-streamdown/code'; // syntax highlighting
 	import Mermaid from 'svelte-streamdown/mermaid'; // Mermaid diagrams
 	import Math from 'svelte-streamdown/math'; // KaTeX math rendering
 </script>
@@ -534,11 +534,11 @@ Streamdown is optimized for minimal bundle size by making heavy components **opt
 
 ### 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                    |
+| Component | Import Path                 | Dependency            | Size Impact                                          |
+| --------- | --------------------------- | --------------------- | ---------------------------------------------------- |
+| `Code`    | `svelte-streamdown/code`    | `@tanstack/highlight` | ~31KB min / ~11KB gzip (all 30 languages + 2 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.
@@ -551,71 +551,150 @@ When a heavy component is not provided:
 - **Mermaid**: Renders the mermaid source as a code block
 - **Math**: Renders the raw LaTeX/math text
 
-### Shiki Themes
+### Highlight themes
 
-The `Code` component bundles two themes out of the box: **`github-dark`** and **`github-light`**. By default `shikiTheme` follows the active color scheme (`github-dark` in dark mode, `github-light` otherwise), so basic light/dark theming works with no extra configuration.
+The `Code` component bundles two themes out of the box: **`github-dark`** and **`github-light`**. By default `highlightTheme` follows the active color scheme (`github-dark` in dark mode, `github-light` otherwise), so basic light/dark theming works with no extra configuration.
 
-To use any other Shiki theme (e.g. `vesper`, `github-dark-default`, `github-light-default`), import it from `@shikijs/themes/<name>` and register it via the `shikiThemes` prop. The **key** you register it under is the value you pass to `shikiTheme`:
+To use any other theme (`aurora-x`, `dracula`, `gruvbox-dark`, `gruvbox-light`, `monokai`, `nord`, `one-dark-pro`, `solarized-dark`, `solarized-light`), import it from `@tanstack/highlight/themes/<name>` and register it via the `highlightThemes` prop. The **key** you register it under is the value you pass to `highlightTheme`:
 
 ```svelte
 <script lang="ts">
 	import { Streamdown } from 'svelte-streamdown';
-	import Code from 'svelte-streamdown/code'; // enables Shiki highlighting
-	import vesper from '@shikijs/themes/vesper';
+	import Code from 'svelte-streamdown/code'; // enables highlighting
+	import dracula from '@tanstack/highlight/themes/dracula';
 
 	let { content } = $props();
 </script>
 
-<Streamdown {content} components={{ code: Code }} shikiThemes={{ vesper }} shikiTheme="vesper" />
+<Streamdown
+	{content}
+	components={{ code: Code }}
+	highlightThemes={{ dracula }}
+	highlightTheme="dracula"
+/>
 ```
 
-> [!IMPORTANT]
-> A theme passed to `shikiTheme` must be one of the two built-in themes **or** registered via `shikiThemes`. If it is neither, the code block stays in its loading (skeleton) state and is never highlighted — this is the most common cause of "my theme stopped working".
+> [!NOTE]
+> An unknown `highlightTheme` key falls back to the built-in `github-dark` / `github-light` (following the color scheme) instead of leaving the code block unhighlighted.
+
+A custom theme is just an object of the `HighlightTheme` shape (exported from `svelte-streamdown`) — a `name`, `type`, `background`, `foreground` and a color per token class:
+
+```svelte
+<script lang="ts">
+	import { Streamdown, type HighlightTheme } from 'svelte-streamdown';
+	import Code from 'svelte-streamdown/code';
+	import githubDark from '@tanstack/highlight/themes/github-dark';
+
+	const myTheme: HighlightTheme = {
+		...githubDark,
+		name: 'my-theme',
+		tokens: { ...githubDark.tokens, keyword: '#ff0088', comment: '#5a5a5a' }
+	};
+</script>
+
+<Streamdown
+	{content}
+	components={{ code: Code }}
+	highlightThemes={{ 'my-theme': myTheme }}
+	highlightTheme="my-theme"
+/>
+```
 
 #### Dynamic (light/dark) theme switching
 
-Register every theme you intend to switch between in `shikiThemes`, then drive `shikiTheme` from your color-scheme store. Switching is fully reactive — code blocks re-highlight when `shikiTheme` changes:
+Register every theme you intend to switch between in `highlightThemes`, then drive `highlightTheme` from your color-scheme store. Switching is fully reactive:
 
 ```svelte
 <script lang="ts">
 	import { Streamdown } from 'svelte-streamdown';
 	import Code from 'svelte-streamdown/code';
 	import { mode } from 'mode-watcher';
-	import githubDarkDefault from '@shikijs/themes/github-dark-default';
-	import githubLightDefault from '@shikijs/themes/github-light-default';
+	import oneDarkPro from '@tanstack/highlight/themes/one-dark-pro';
+	import solarizedLight from '@tanstack/highlight/themes/solarized-light';
 
 	let { content } = $props();
 
-	const shikiTheme = $derived(
-		mode.current === 'dark' ? 'github-dark-default' : 'github-light-default'
-	);
+	const highlightTheme = $derived(mode.current === 'dark' ? 'one-dark-pro' : 'solarized-light');
 </script>
 
 <Streamdown
 	{content}
 	components={{ code: Code }}
 	baseTheme="shadcn"
-	shikiThemes={{
-		'github-dark-default': githubDarkDefault,
-		'github-light-default': githubLightDefault
+	highlightThemes={{
+		'one-dark-pro': oneDarkPro,
+		'solarized-light': solarizedLight
 	}}
-	{shikiTheme}
+	{highlightTheme}
 />
 ```
 
 > [!NOTE]
-> The built-in `github-dark` / `github-light` themes can be switched dynamically with just `shikiTheme` (no `shikiThemes` registration needed), since both are always loaded.
+> The built-in `github-dark` / `github-light` themes can be switched dynamically with just `highlightTheme` (no `highlightThemes` registration needed).
+
+#### Styling tokens with CSS
+
+Every token span carries `th-token` plus a `th-<class>` class (`th-keyword`, `th-string`, `th-comment`, `th-function`, `th-number`, `th-operator`, `th-tag`, `th-attr`, …) alongside its inline color from the active theme, so you can tweak or override token styles from CSS:
+
+```css
+[data-streamdown-code] .th-comment {
+	font-style: italic;
+}
+```
+
+### Supported languages
+
+All 30 scanners ship in the same ~31KB bundle, so there is nothing to lazy-load:
+
+`apache`, `cmake`, `cpp`, `css`, `diff`, `dockerfile`, `ejs`, `env`, `go`, `html`, `http`, `js`, `json`, `jsx`, `markdown`, `mermaid`, `nginx`, `php`, `plaintext`, `python`, `scheme`, `shell`, `sql`, `svelte`, `toml`, `ts`, `tsrx`, `tsx`, `vue`, `yaml`.
+
+Common aliases are normalized (`javascript` → `js`, `typescript` → `ts`, `bash`/`sh`/`zsh` → `shell`, `py` → `python`, `jsonc`/`json5` → `json`, `xml`/`htm` → `html`, `md` → `markdown`, `yml` → `yaml`, `docker` → `dockerfile`).
+
+> [!IMPORTANT]
+> Any other language — including `java`, `rust`, `c`, `c#`, `swift`, `kotlin`, `ruby` and `graphql` — is **not** highlighted as of `@tanstack/highlight@0.1.0`: the code block still renders (and keeps its copy/download UI), but as plaintext.
+
+You can add your own language with `defineLanguage` and the `highlightLanguages` prop. A language is a tokenizer returning `{ className, start, end }` ranges:
+
+```svelte
+<script lang="ts">
+	import { Streamdown, defineLanguage } from 'svelte-streamdown';
+	import Code from 'svelte-streamdown/code';
+
+	const brainfuck = defineLanguage({
+		name: 'brainfuck',
+		tokenize: (code) =>
+			[...code.matchAll(/[+\-<>]+/g)].map((match) => ({
+				className: 'operator' as const,
+				start: match.index,
+				end: match.index + match[0].length
+			}))
+	});
+</script>
+
+<Streamdown {content} components={{ code: Code }} highlightLanguages={[brainfuck]} />
+```
+
+> [!NOTE]
+> Keep the array passed to `highlightLanguages` referentially stable (define it outside the template): a new array builds a new highlighter.
 
-#### Migrating from v2 (`shikiPreloadThemes`)
+### Migrating from v3 (shiki)
 
-The v2 `shikiPreloadThemes` prop has been **removed**. Themes are no longer referenced by bundled name; instead you import the theme objects yourself and register them with `shikiThemes`. Registered themes are loaded together with the highlighter (i.e. effectively preloaded), so there is no separate preload step:
+v4 replaces shiki with `@tanstack/highlight`. Highlighting is now synchronous, renders during SSR and no longer has a skeleton/loading state. Remove `shiki` / `@shikijs/*` from your dependencies and rename the props:
 
 ```diff
-- shikiPreloadThemes={['github-dark-default', 'github-light-default']}
-+ shikiThemes={{ 'github-dark-default': githubDarkDefault, 'github-light-default': githubLightDefault }}
+- shikiTheme="nord"
+- shikiThemes={{ nord }}
+- shikiLanguages={[{ id: 'haskell', name: 'Haskell', import: () => import('@shikijs/langs/haskell') }]}
++ highlightTheme="nord"
++ highlightThemes={{ nord }}
++ highlightLanguages={[myLanguage]}
 ```
 
-This also keeps the default bundle small: only the themes you actually import are included.
+- Theme objects come from `@tanstack/highlight/themes/<name>` instead of `@shikijs/themes/<name>`, and follow the `HighlightTheme` shape (not shiki's `ThemeRegistration`).
+- `highlightLanguages` takes `LanguageDefinition`s built with `defineLanguage`, not lazy shiki grammar loaders.
+- `bundledLanguagesInfo`, `createLanguageSet` and `LanguageInfo` are gone; `defineLanguage`, `LanguageDefinition` and `HighlightTheme` are exported instead.
+- The `code.skeleton` theme key is gone (there is no loading state anymore).
+- Languages shiki covered but `@tanstack/highlight@0.1.0` does not (`java`, `rust`, `c`, `c#`, `swift`, `kotlin`, `ruby`, `graphql`, …) now render as plaintext.
 
 ## 📋 Props API
 
@@ -628,20 +707,24 @@ This also keeps the default bundle small: only the themes you actually import ar
 | `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                                                                                                                                                                                       |
-| `shikiTheme`               | `string`                                                                                                    | auto (dark-mode aware) | Code highlighting theme. Defaults to `github-dark` in dark mode / `github-light` otherwise. Any other value must be a key registered via `shikiThemes`. See [Shiki Themes](#shiki-themes).                                   |
-| `shikiThemes`              | `Record<string, ThemeRegistration>`                                                                         | -                      | Register additional pre-imported themes (e.g. `{ vesper }`) so they can be selected via `shikiTheme`, including dynamic light/dark switching. Replaces the v2 `shikiPreloadThemes` prop.                                     |
-| `shikiLanguages`           | `LanguageInfo[]`                                                                                            | -                      | Additional syntax highlighting languages (merged with defaults)                                                                                                                                                              |
+| `highlightTheme`           | `string`                                                                                                    | auto (dark-mode aware) | Code highlighting theme. Defaults to `github-dark` in dark mode / `github-light` otherwise. Any other value must be a key registered via `highlightThemes`. See [Highlight themes](#highlight-themes).                       |
+| `highlightThemes`          | `Record<string, HighlightTheme>`                                                                            | -                      | Register additional pre-imported themes (e.g. `{ dracula }`) so they can be selected via `highlightTheme`, including dynamic light/dark switching.                                                                           |
+| `highlightLanguages`       | `LanguageDefinition[]`                                                                                      | -                      | Additional languages built with `defineLanguage` (merged with the 30 built-in ones)                                                                                                                                          |
 | `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.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                                                                                                                                                                                      |
@@ -660,7 +743,7 @@ This also keeps the default bundle small: only the themes you actually import ar
 
 **Lists**: `ul`, `ol`, `li`
 
-**Code**: `code`, `codeSpan`
+**Code**: `code`, `codespan`
 
 **Tables**: `table`, `thead`, `tbody`, `tr`, `th`, `td`, `tfoot`
 
@@ -753,7 +836,7 @@ Each component supports multiple themeable parts:
 
 **Links (`a`)**: `base`, `blocked` (for blocked/unsafe links)
 
-**Code (`code`)**: `base`, `container`, `header`, `button`, `language`, `skeleton`, `pre`
+**Code (`code`)**: `base`, `container`, `header`, `buttons`, `language`, `line`, `pre`
 
 **Inline Code (`inlineCode`)**: `base`
 
@@ -1024,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

@@ -2,31 +2,28 @@
 	import { useStreamdown } from '../context.svelte.js';
 	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';
+	import { highlightLines, languageExtensionMap } from '../utils/hightlighter.svelte.js';
+	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();
-	const highlighter = HighlighterManager.create(
-		bundledLanguagesInfo,
-		streamdown.shikiThemes,
-		streamdown.shikiLanguages
-	);
+
+	// 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;
 		}
 	});
 
@@ -40,19 +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);
 		}
 	};
 
-	$effect(() => {
-		const theme = streamdown.shikiTheme;
-		const lang = token.lang;
-		untrack(() => {
-			void highlighter.load(theme, lang);
-		});
-	});
+	const lines = $derived(highlightLines(code, token.lang, streamdown.highlightLanguages));
 </script>
 
 <div
@@ -84,39 +75,15 @@
 		{/if}
 	</div>
 	<div style="height: fit-content; width: 100%;" class={streamdown.theme.code.container}>
-		{#if highlighter.isReady(streamdown.shikiTheme, token.lang)}
-			<pre class={streamdown.theme.code.pre}><code
-					>{@render Tokens(
-						highlighter.highlightCode(token.text, token.lang, streamdown.shikiTheme)
-					)}</code
-				></pre>
-		{:else}
-			<pre class={streamdown.theme.code.pre}><code>{@render Skeleton(token.text.split('\n'))}</code
-				></pre>
-		{/if}
+		<pre class={streamdown.theme.code.pre}><code
+				>{#each lines as line}<span class={streamdown.theme.code.line}
+						>{#if line.length === 0}&#8203;{/if}{#each line as t}<span
+								class="th-token{t.className ? ` th-${t.className}` : ''}"
+								style={streamdown.isMounted ? streamdown.animationTextStyle : ''}
+								style:color={streamdown.highlightTheme.tokens[t.className ?? 'token']}
+								>{t.value}</span
+							>{/each}</span
+					>{/each}</code
+			></pre>
 	</div>
 </div>
-
-{#snippet Tokens(lines: ThemedToken[][])}
-	{#each lines as tokens}
-		<span class={streamdown.theme.code.line}>
-			{#each tokens as token}
-				<span
-					style={streamdown.isMounted ? streamdown.animationTextStyle : ''}
-					style:color={token.color}
-					style:background-color={token.bgColor}
-				>
-					{token.content}
-				</span>
-			{/each}
-		</span>
-	{/each}
-{/snippet}
-
-{#snippet Skeleton(lines: string[])}
-	{#each lines as line}
-		<span class={streamdown.theme.code.skeleton}>
-			{line.trim().length > 0 ? line : '\u200B'}
-		</span>
-	{/each}
-{/snippet}

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}