svelte-streamdown 2.5.0 → 2.5.2

package/README.md

@@ -69,6 +69,10 @@ Full support for
     with _rich_ **content** support
     and multiline
 
+> [!NOTE]
+> 🧠 **AI Prompting Tip:** For best results, use our [comprehensive prompt](/prompting) covering all supported markdown features.
+
+
 ### 💻 Interactive Code Blocks
 
 - Syntax highlighting powered by Shiki

package/dist/Elements/Alert.svelte

@@ -22,8 +22,10 @@
 
 	const {
 		children,
-		token
+		token,
+		id
 	}: {
+		id: string;
 		children: Snippet;
 		token: AlertToken;
 	} = $props();
@@ -37,6 +39,7 @@
 	render={streamdown.snippets.alert}
 >
 	<div
+		data-streamdown-alert={id}
 		style={streamdown.isMounted ? streamdown.animationBlockStyle : ''}
 		class={`${streamdown.theme.alert.base} ${streamdown.theme.alert[token.variant]}`}
 	>

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

@@ -1,6 +1,7 @@
 import type { AlertToken } from '../marked/index.js';
 import type { Snippet } from 'svelte';
 type $$ComponentProps = {
+    id: string;
     children: Snippet;
     token: AlertToken;
 };

package/dist/Elements/Citation.svelte

@@ -9,6 +9,7 @@
 	import { StepperState } from './stepperState.svelte.js';
 	import { Popover } from './popover.svelte.js';
 	import { get } from '../utils/get.js';
+	import { chevronLeft, chevronRight } from './icons.js';
 
 	const {
 		token
@@ -82,6 +83,7 @@
 
 {#if popover.isOpen}
 	<dialog
+		data-streamdown-citation-popover={id}
 		id={'citation-popover-' + id}
 		aria-modal="false"
 		transition:scale|global={{ start: 0.95, duration: 200 }}
@@ -231,36 +233,9 @@
 	</div>
 {/snippet}
 
-{#snippet chevronRight()}
-	<svg
-		xmlns="http://www.w3.org/2000/svg"
-		width="100%"
-		height="100%"
-		viewBox="0 0 24 24"
-		fill="none"
-		stroke="currentColor"
-		stroke-width="2"
-		stroke-linecap="round"
-		stroke-linejoin="round"><path d="m9 18 6-6-6-6" /></svg
-	>
-{/snippet}
-
-{#snippet chevronLeft()}
-	<svg
-		xmlns="http://www.w3.org/2000/svg"
-		width="100%"
-		height="100%"
-		viewBox="0 0 24 24"
-		fill="none"
-		stroke="currentColor"
-		stroke-width="2"
-		stroke-linecap="round"
-		stroke-linejoin="round"><path d="m15 18-6-6 6-6" /></svg
-	>
-{/snippet}
-
 {#if citationWithSources.length > 0}
 	<button
+		data-streamdown-citation-preview={id}
 		style={streamdown.animationBlockStyle}
 		bind:this={popover.reference}
 		class={streamdown.theme.inlineCitation.preview}

package/dist/Elements/Code.svelte

@@ -6,11 +6,14 @@
 	import type { Tokens } from 'marked';
 	import { type ThemedToken } from 'shiki';
 	import { untrack } from 'svelte';
+	import { checkIcon, copyIcon, downloadIcon } from './icons.js';
 
 	const {
-		token
+		token,
+		id
 	}: {
 		token: Tokens.Code;
+		id: string;
 	} = $props();
 
 	const streamdown = useStreamdown();
@@ -48,6 +51,7 @@
 </script>
 
 <div
+	data-streamdown-code={id}
 	style={streamdown.isMounted ? streamdown.animationBlockStyle : ''}
 	class={streamdown.theme.code.base}
 >
@@ -58,14 +62,18 @@
 				<button
 					class={streamdown.theme.components.button}
 					onclick={downloadCode}
-					title="Download file"
+					title="Download code"
 					type="button"
 				>
 					{@render (streamdown.icons?.download || downloadIcon)()}
 				</button>
 
 				<button class={streamdown.theme.components.button} onclick={copy.copy} type="button">
-					{@render (streamdown.icons?.copy || copyIcon)()}
+					{#if copy.isCopied}
+						{@render (streamdown.icons?.check || checkIcon)()}
+					{:else}
+						{@render (streamdown.icons?.copy || copyIcon)()}
+					{/if}
 				</button>
 			</div>
 		{/if}
@@ -107,37 +115,3 @@
 		</span>
 	{/each}
 {/snippet}
-
-{#snippet copyIcon()}
-	<svg
-		xmlns="http://www.w3.org/2000/svg"
-		width="100%"
-		height="100%"
-		viewBox="0 0 24 24"
-		fill="none"
-		stroke="currentColor"
-		stroke-width="2"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-		><rect width="8" height="4" x="8" y="2" rx="1" ry="1" /><path
-			d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"
-		/></svg
-	>
-{/snippet}
-
-{#snippet downloadIcon()}
-	<svg
-		xmlns="http://www.w3.org/2000/svg"
-		width="100%"
-		height="100%"
-		viewBox="0 0 24 24"
-		fill="none"
-		stroke="currentColor"
-		stroke-width="2"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-		><path d="M12 15V3" /><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><path
-			d="m7 10 5 5 5-5"
-		/></svg
-	>
-{/snippet}

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

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

package/dist/Elements/Element.svelte

@@ -11,11 +11,13 @@
 	import { useStreamdown } from '../context.svelte.js';
 	import FootnoteRef from './FootnoteRef.svelte';
 	import Citation from './Citation.svelte';
+	import TableDownload from './TableDownload.svelte';
 	let { token, children }: { token: StreamdownToken; children: Snippet } = $props();
 	const streamdown = useStreamdown();
 
 	// Only apply animation on block level elements. Leaves text elements to be animated by their text children.
 	const style = $derived(streamdown.isMounted ? streamdown.animationBlockStyle : '');
+	const id = $props.id();
 </script>
 
 {#if token.type === 'heading'}
@@ -27,67 +29,71 @@
 		render={streamdown.snippets.heading}
 	>
 		{#if token.depth === 1}
-			<h1 {style} class={streamdown.theme[`h${token.depth}`].base}>
+			<h1 data-streamdown-heading-1={id} {style} class={streamdown.theme[`h${token.depth}`].base}>
 				{@render children()}
 			</h1>
 		{:else if token.depth === 2}
-			<h2 {style} class={streamdown.theme[`h${token.depth}`].base}>
+			<h2 data-streamdown-heading-2={id} {style} class={streamdown.theme[`h${token.depth}`].base}>
 				{@render children()}
 			</h2>
 		{:else if token.depth === 3}
-			<h3 {style} class={streamdown.theme[`h${token.depth}`].base}>
+			<h3 data-streamdown-heading-3={id} {style} class={streamdown.theme[`h${token.depth}`].base}>
 				{@render children()}
 			</h3>
 		{:else if token.depth === 4}
-			<h4 {style} class={streamdown.theme[`h${token.depth}`].base}>
+			<h4 data-streamdown-heading-4={id} {style} class={streamdown.theme[`h${token.depth}`].base}>
 				{@render children()}
 			</h4>
 		{:else if token.depth === 5}
-			<h5 {style} class={streamdown.theme[`h${token.depth}`].base}>
+			<h5 data-streamdown-heading-5={id} {style} class={streamdown.theme[`h${token.depth}`].base}>
 				{@render children()}
 			</h5>
 		{:else if token.depth === 6}
-			<h6 {style} class={streamdown.theme[`h${token.depth}`].base}>
+			<h6 data-streamdown-heading-6={id} {style} class={streamdown.theme[`h${token.depth}`].base}>
 				{@render children()}
 			</h6>
 		{/if}
 	</Slot>
 {:else if token.type === 'paragraph'}
 	<Slot props={{ children, token }} render={streamdown.snippets.paragraph}>
-		<p {style} class={streamdown.theme.paragraph.base}>
+		<p data-streamdown-paragraph={id} {style} class={streamdown.theme.paragraph.base}>
 			{@render children()}
 		</p>
 	</Slot>
 {:else if token.type === 'blockquote'}
 	<Slot props={{ children, token }} render={streamdown.snippets.blockquote}>
-		<blockquote {style} class={streamdown.theme.blockquote.base}>
+		<blockquote data-streamdown-blockquote={id} {style} class={streamdown.theme.blockquote.base}>
 			{@render children()}
 		</blockquote>
 	</Slot>
 {:else if token.type === 'code' && token.lang === 'mermaid'}
 	<Slot props={{ children, token }} render={streamdown.snippets.code}>
-		<Mermaid {token} />
+		<Mermaid {id} {token} />
 	</Slot>
 {:else if token.type === 'code'}
 	<Slot props={{ children, token }} render={streamdown.snippets.code}>
-		<Code {token} />
+		<Code {id} {token} />
 	</Slot>
 {:else if token.type === 'codespan'}
 	<Slot props={{ children, token }} render={streamdown.snippets.codespan}>
-		<code class={streamdown.theme.codespan.base}>
+		<code data-streamdown-codespan={id} class={streamdown.theme.codespan.base}>
 			{@render children()}
 		</code>
 	</Slot>
 {:else if token.type === 'list'}
 	{#if token.ordered}
 		<Slot props={{ children, token }} render={streamdown.snippets.ol}>
-			<ol style:list-style-type={token.listType} class={streamdown.theme.ol.base}>
+			<ol
+				data-streamdown-ol={id}
+				style:list-style-type={token.listType}
+				class={streamdown.theme.ol.base}
+			>
 				{@render children()}
 			</ol>
 		</Slot>
 	{:else}
 		<Slot props={{ children, token }} render={streamdown.snippets.ul}>
-			<ul class={streamdown.theme.ul.base}>
+			<ul data-streamdown-ul={id} class={streamdown.theme.ul.base}>
 				{@render children()}
 			</ul>
 		</Slot>
@@ -95,6 +101,7 @@
 {:else if token.type === 'list_item'}
 	<Slot props={{ children, token }} render={streamdown.snippets.li}>
 		<li
+			data-streamdown-li={id}
 			{style}
 			style:list-style-type={token.task ? 'none' : undefined}
 			{...token.value && !token.task ? { value: token.value } : {}}
@@ -113,7 +120,15 @@
 	</Slot>
 {:else if token.type === 'table'}
 	<Slot props={{ token, children }} render={streamdown.snippets.table}>
-		<div {style} class={streamdown.theme.table.base} style:overscroll-behavior-x="none">
+		{#if streamdown.controls.table}
+			<TableDownload {id} {token} />
+		{/if}
+		<div
+			data-streamdown-table={id}
+			{style}
+			class={`${streamdown.theme.table.base} group`}
+			style:overscroll-behavior-x="none"
+		>
 			<table class={streamdown.theme.table.table}>
 				{@render children()}
 			</table>
@@ -121,25 +136,25 @@
 	</Slot>
 {:else if token.type === 'thead'}
 	<Slot props={{ token, children }} render={streamdown.snippets.thead}>
-		<thead {style} class={streamdown.theme.thead.base}>
+		<thead data-streamdown-thead={id} {style} class={streamdown.theme.thead.base}>
 			{@render children?.()}
 		</thead>
 	</Slot>
 {:else if token.type === 'tbody'}
 	<Slot props={{ token, children }} render={streamdown.snippets.tbody}>
-		<tbody {style} class={streamdown.theme.tbody.base}>
+		<tbody data-streamdown-tbody={id} {style} class={streamdown.theme.tbody.base}>
 			{@render children?.()}
 		</tbody>
 	</Slot>
 {:else if token.type === 'tfoot'}
 	<Slot props={{ token, children }} render={streamdown.snippets.tfoot}>
-		<tfoot {style} class={streamdown.theme.tfoot.base}>
+		<tfoot data-streamdown-tfoot={id} {style} class={streamdown.theme.tfoot.base}>
 			{@render children?.()}
 		</tfoot>
 	</Slot>
 {:else if token.type === 'tr'}
 	<Slot props={{ token, children }} render={streamdown.snippets.tr}>
-		<tr {style} class={streamdown.theme.tr.base}>
+		<tr data-streamdown-tr={id} {style} class={streamdown.theme.tr.base}>
 			{@render children?.()}
 		</tr>
 	</Slot>
@@ -148,6 +163,7 @@
 		<Slot props={{ children, token }} render={streamdown.snippets.td}>
 			<td
 				{style}
+				data-streamdown-td={id}
 				class={streamdown.theme.td.base}
 				{...token.colspan > 1 ? { colspan: token.colspan } : {}}
 				{...token.rowspan > 1 ? { rowspan: token.rowspan } : {}}
@@ -164,6 +180,7 @@
 		<Slot props={{ children, token }} render={streamdown.snippets.th}>
 			<th
 				{style}
+				data-streamdown-th={id}
 				class={streamdown.theme.th.base}
 				{...token.colspan > 1 ? { colspan: token.colspan } : {}}
 				{...token.rowspan > 1 ? { rowspan: token.rowspan } : {}}
@@ -176,45 +193,45 @@
 		</Slot>
 	{/if}
 {:else if token.type === 'image'}
-	<Image {token} {children} />
+	<Image {id} {token} {children} />
 {:else if token.type === 'link'}
-	<Link {token} {children} />
+	<Link {id} {token} {children} />
 {:else if token.type === 'sub'}
 	<Slot props={{ children, token }} render={streamdown.snippets.sub}>
-		<sub class={streamdown.theme.sub.base}>
+		<sub data-streamdown-sub={id} class={streamdown.theme.sub.base}>
 			{@render children()}
 		</sub>
 	</Slot>
 {:else if token.type === 'sup'}
 	<Slot props={{ children, token }} render={streamdown.snippets.sup}>
-		<sup class={streamdown.theme.sup.base}>
+		<sup data-streamdown-sup={id} class={streamdown.theme.sup.base}>
 			{@render children()}
 		</sup>
 	</Slot>
 {:else if token.type === 'strong'}
 	<Slot props={{ children, token }} render={streamdown.snippets.strong}>
-		<strong class={streamdown.theme.strong.base}>
+		<strong data-streamdown-strong={id} class={streamdown.theme.strong.base}>
 			{@render children()}
 		</strong>
 	</Slot>
 {:else if token.type === 'em'}
 	<Slot props={{ children, token }} render={streamdown.snippets.em}>
-		<em class={streamdown.theme.em.base}>
+		<em data-streamdown-em={id} class={streamdown.theme.em.base}>
 			{@render children()}
 		</em>
 	</Slot>
 {:else if token.type === 'del'}
 	<Slot props={{ children, token }} render={streamdown.snippets.del}>
-		<del class={streamdown.theme.del.base}>
+		<del data-streamdown-del={id} class={streamdown.theme.del.base}>
 			{@render children()}
 		</del>
 	</Slot>
 {:else if token.type === 'hr'}
 	<Slot props={{ children, token }} render={streamdown.snippets.hr}>
-		<hr {style} class={streamdown.theme.hr.base} />
+		<hr data-streamdown-hr={id} {style} class={streamdown.theme.hr.base} />
 	</Slot>
 {:else if token.type === 'br'}
-	<br />
+	<br data-streamdown-br={id} />
 {:else if token.type === 'math'}
 	<Slot
 		props={{
@@ -223,10 +240,10 @@
 		}}
 		render={streamdown.snippets.math}
 	>
-		<Math {token} />
+		<Math {id} {token} />
 	</Slot>
 {:else if token.type === 'alert'}
-	<Alert {token} {children} />
+	<Alert {id} {token} {children} />
 {:else if token.type === 'footnoteRef'}
 	<Slot props={{ token }} render={streamdown.snippets.footnoteRef}>
 		<FootnoteRef {token} />
@@ -239,7 +256,11 @@
 	<!-- TODO Footnotes are rendered inside the FootnoteRef popover -->
 {:else if token.type === 'descriptionList'}
 	<Slot props={{ children, token }} render={streamdown.snippets.descriptionList}>
-		<dl style={streamdown.animationBlockStyle} class={streamdown.theme.descriptionList.base}>
+		<dl
+			data-streamdown-description-list={id}
+			style={streamdown.animationBlockStyle}
+			class={streamdown.theme.descriptionList.base}
+		>
 			{@render children()}
 		</dl>
 	</Slot>
@@ -249,13 +270,17 @@
 	</Slot>
 {:else if token.type === 'descriptionTerm'}
 	<Slot props={{ children, token }} render={streamdown.snippets.descriptionTerm}>
-		<dt {style} class={streamdown.theme.descriptionTerm.base}>
+		<dt data-streamdown-description-term={id} {style} class={streamdown.theme.descriptionTerm.base}>
 			{@render children()}
 		</dt>
 	</Slot>
 {:else if token.type === 'descriptionDetail'}
 	<Slot props={{ children, token }} render={streamdown.snippets.descriptionDetail}>
-		<dd {style} class={streamdown.theme.descriptionDetail.base}>
+		<dd
+			data-streamdown-description-detail={id}
+			{style}
+			class={streamdown.theme.descriptionDetail.base}
+		>
 			{@render children()}
 		</dd>
 	</Slot>

package/dist/Elements/FootnoteRef.svelte

@@ -41,6 +41,7 @@
 
 {#if popover.isOpen}
 	<dialog
+		data-streamdown-footnote-popover={id}
 		id={'footnote-popover-' + id}
 		aria-modal="false"
 		transition:scale|global={{ start: 0.95, duration: 100 }}
@@ -65,6 +66,7 @@
 
 {#if token.label !== 'streamdown:footnote'}
 	<button
+		data-streamdown-footnote-ref={id}
 		style={streamdown.animationBlockStyle}
 		bind:this={popover.reference}
 		class={streamdown.theme.footnoteRef.base}

package/dist/Elements/Image.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { useStreamdown } from '../context.svelte.js';
-	import { transformUrl } from '../utils/url.js';
+	import { isPathRelativeUrl, transformUrl } from '../utils/url.js';
 	import Slot from './Slot.svelte';
 	import type { Tokens } from 'marked';
 	import type { Snippet } from 'svelte';
@@ -9,22 +9,26 @@
 
 	const {
 		children,
-		token
+		token,
+		id
 	}: {
 		children: Snippet;
 		token: Tokens.Image;
+		id: string;
 	} = $props();
 
+	const isRelativeUrl = $derived(isPathRelativeUrl(token.href));
+
 	const transformedUrl = $derived(
 		transformUrl(token.href, streamdown.allowedImagePrefixes ?? [], streamdown.defaultOrigin)
 	);
 </script>
 
 {#if token.href !== 'streamdown:incomplete-image'}
-	{#if transformedUrl}
+	{#if transformedUrl || isRelativeUrl}
 		<Slot
 			props={{
-				src: transformedUrl,
+				src: isRelativeUrl ? token.href : transformedUrl,
 				alt: token.text,
 				children,
 				token
@@ -32,14 +36,20 @@
 			render={streamdown.snippets.image}
 		>
 			<span
+				data-streamdown-image={id}
 				style={streamdown.isMounted ? streamdown.animationBlockStyle : ''}
 				class={streamdown.theme.image.base}
 			>
-				<img class={streamdown.theme.image.image} src={transformedUrl} alt={token.text} />
+				<img
+					class={streamdown.theme.image.image}
+					src={isRelativeUrl ? token.href : transformedUrl}
+					alt={token.text}
+				/>
 			</span>
 		</Slot>
 	{:else}
 		<span
+			data-streamdown-image-blocked={id}
 			class="inline-block rounded bg-gray-200 px-3 py-1 text-sm text-gray-600 dark:bg-gray-700 dark:text-gray-400"
 			title={`Blocked URL: ${token.href}`}
 		>

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

@@ -3,6 +3,7 @@ import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     children: Snippet;
     token: Tokens.Image;
+    id: string;
 };
 declare const Image: import("svelte").Component<$$ComponentProps, {}, "">;
 type Image = ReturnType<typeof Image>;

package/dist/Elements/Link.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { useStreamdown } from '../context.svelte.js';
-	import { transformUrl } from '../utils/url.js';
+	import { isPathRelativeUrl, transformUrl } from '../utils/url.js';
 	import Slot from './Slot.svelte';
 	import type { Tokens } from 'marked';
 	import type { Snippet } from 'svelte';
@@ -9,18 +9,22 @@
 
 	const {
 		children,
-		token
+		token,
+		id
 	}: {
 		children: Snippet;
 		token: Tokens.Link;
+		id: string;
 	} = $props();
 
+	const isRelativeUrl = $derived(isPathRelativeUrl(token.href));
+
 	const transformedUrl = $derived(
 		transformUrl(token.href, streamdown.allowedLinkPrefixes ?? [], streamdown.defaultOrigin)
 	);
 </script>
 
-{#if transformedUrl || token.href === 'streamdown:incomplete-link'}
+{#if transformedUrl || token.href === 'streamdown:incomplete-link' || isRelativeUrl}
 	<Slot
 		props={{
 			href: transformedUrl,
@@ -33,16 +37,18 @@
 		render={streamdown.snippets.link}
 	>
 		<a
+			data-streamdown-link={id}
 			class={streamdown.theme.link.base}
-			href={transformedUrl}
-			target="_blank"
-			rel="noopener noreferrer"
+			{...isRelativeUrl
+				? { href: token.href }
+				: { href: transformedUrl, target: '_blank', rel: 'noopener noreferrer' }}
 		>
 			{@render children()}
 		</a>
 	</Slot>
 {:else}
 	<span
+		data-streamdown-link-blocked={id}
 		class={streamdown.theme.link.blocked}
 		title={token.title ? `Blocked URL: ${token.href}` : undefined}
 	>

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

@@ -3,6 +3,7 @@ import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     children: Snippet;
     token: Tokens.Link;
+    id: string;
 };
 declare const Link: import("svelte").Component<$$ComponentProps, {}, "">;
 type Link = ReturnType<typeof Link>;

package/dist/Elements/Math.svelte

@@ -6,9 +6,11 @@
 	import 'katex/dist/katex.min.css';
 
 	const {
-		token
+		token,
+		id
 	}: {
 		token: MathToken;
+		id: string;
 	} = $props();
 
 	const streamdown = useStreamdown();
@@ -46,6 +48,7 @@
 
 {#if token.isInline}
 	<span
+		data-streamdown-inline-math={id}
 		style={streamdown.isMounted ? streamdown.animationBlockStyle : ''}
 		bind:this={inner}
 		class={streamdown.theme.math.inline}
@@ -53,7 +56,12 @@
 		{@html html}
 	</span>
 {:else}
-	<div style={streamdown.isMounted ? streamdown.animationBlockStyle : ''} class="h-fit w-full">
+	<div
+		data-streamdown-block-math={id}
+		style={streamdown.isMounted ? streamdown.animationBlockStyle : ''}
+		style:height="fit-content"
+		style:width="100%"
+	>
 		<div class="overflow-x-auto">
 			<div bind:this={inner} class={streamdown.theme.math.block}>
 				{@html html}

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

@@ -2,6 +2,7 @@ import type { MathToken } from '../marked/index.js';
 import 'katex/dist/katex.min.css';
 type $$ComponentProps = {
     token: MathToken;
+    id: string;
 };
 declare const Math: import("svelte").Component<$$ComponentProps, {}, "">;
 type Math = ReturnType<typeof Math>;