svelte-streamdown 0.0.1 → 1.0.0

package/dist/Elements/Element.svelte

@@ -41,6 +41,10 @@
 	import Em from './Em.svelte';
 	import Del from './Del.svelte';
 	import Alert from './Alert.svelte';
+	import { useStreamdown } from '../Streamdown.svelte';
+	import { type ElementProps } from './element.js';
+
+	const streamdown = useStreamdown();
 </script>
 
 {#if type === 'a'}
@@ -110,13 +114,17 @@
 	<br />
 {:else if type === 'em'}
 	<Em {props} {className} {children} {node} />
-{:else if type === 'ins'}
-	<!-- <Ins {props} {children} {node} /> -->
 {:else if type === 'del'}
 	<Del {props} {className} {children} {node} />
 {:else if type === 'alert'}
 	<Alert {props} {className} {children} {node} />
 {:else}
+	{@const snippet = streamdown.customElements?.[type] as Snippet<[ElementProps]> | undefined}
+	{#if snippet}
+		{@render snippet({ props, className, children, node })}
+	{:else}
+		{@render children?.()}
+	{/if}
+
 	<!-- Fallback for unsupported elements -->
-	{@render children?.()}
 {/if}

package/dist/Elements/Image.svelte

@@ -27,13 +27,8 @@
 		}}
 		render={streamdown.snippets.img}
 	>
-		<div class={streamdown.theme.img.container}>
-			<img
-				src={transformedUrl}
-				{alt}
-				{...props}
-				class={clsx(streamdown.theme.img.base, className)}
-			/>
+		<div class={clsx(streamdown.theme.img.base, className)} {...props}>
+			<img class={streamdown.theme.img.image} src={transformedUrl} {alt} />
 		</div>
 	</Slot>
 {:else}

package/dist/Elements/Math.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { onMount, onDestroy } from 'svelte';
+	import { untrack } from 'svelte';
 	import { useStreamdown } from '../Streamdown.svelte';
 	import { clsx } from 'clsx';
 	import type { ElementProps } from './element.js';
@@ -8,35 +8,27 @@
 	import 'katex/dist/katex.min.css';
 	const streamdown = useStreamdown();
 	const { children, node, className, props }: ElementProps = $props();
-	const code = $derived((node.children[0] as any).value as string);
-	const isInline = className?.includes('inline') ?? false;
-	let katex = $state<typeof import('katex').renderToString | null>(null);
-	onMount(async () => {
-		katex = (await import('katex')).renderToString;
-	});
-
-	const renderMath = async (code: string, element: HTMLElement) => {
-		console.log({ code, node });
+	import katex from 'katex';
+	const isInline = className?.some?.((c: string) => c.includes('inline')) ?? false;
 
-		if (!katex || !code) return;
+	let inner = $state<HTMLElement | null>(null);
+	const html = $derived.by(() => {
+		const config: KatexOptions = {
+			output: 'html',
+			displayMode: !isInline,
+			...(typeof streamdown.katexConfig === 'function'
+				? streamdown.katexConfig(isInline)
+				: streamdown.katexConfig || {})
+		};
+		const code = ((node.children[0] as any)?.value as string) ?? '';
 		try {
-			const customConfig =
-				typeof streamdown.katexConfig === 'function'
-					? streamdown.katexConfig(isInline)
-					: streamdown.katexConfig;
-			// Default configuration
-			const config: KatexOptions = {
-				output: 'html',
-				displayMode: !isInline,
-				...(customConfig || {})
-			};
-
-			const html = katex(code, config);
-			element.innerHTML = html.toString();
-		} catch (err) {
-			// Do nothing
+			return katex.renderToString(code, config);
+		} catch (error) {
+			return untrack(() => {
+				return inner?.innerHTML || '';
+			});
 		}
-	};
+	});
 </script>
 
 <Slot
@@ -47,27 +39,17 @@
 	}}
 	render={streamdown.snippets.math}
 >
-	{#if katex}
-		{#if isInline}
-			<span
-				{...props}
-				class={clsx(streamdown.theme.math.base, className)}
-				{@attach (node) => renderMath(code, node)}
-			>
-				<!--  -->
-			</span>
-		{:else}
-			<div class="h-fit w-full">
-				<div class="overflow-x-auto">
-					<div
-						{...props}
-						class={clsx(streamdown.theme.math.base, className)}
-						{@attach (node) => renderMath(code, node)}
-					></div>
+	{#if isInline}
+		<span bind:this={inner} {...props} class={clsx(streamdown.theme.inlineMath.base, className)}>
+			{@html html}
+		</span>
+	{:else}
+		<div class="h-fit w-full">
+			<div class="overflow-x-auto">
+				<div bind:this={inner} {...props} class={clsx(streamdown.theme.math.base, className)}>
+					{@html html}
 				</div>
 			</div>
-		{/if}
-	{:else}
-		<div {...props} class={clsx(streamdown.theme.math.base, className)}></div>
+		</div>
 	{/if}
 </Slot>

package/dist/Elements/Mermaid.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
-	import { onMount, onDestroy } from 'svelte';
+	import { onMount } from 'svelte';
 	import { useStreamdown } from '../Streamdown.svelte';
 	import { clsx } from 'clsx';
 	import type { ElementProps } from './element.js';
 	import Slot from './Slot.svelte';
 	import type { MermaidConfig } from 'mermaid';
+	import { on } from 'svelte/events';
+	import { usePanzoom } from '../utils/panzoom.svelte';
 
 	const streamdown = useStreamdown();
 
@@ -16,6 +18,45 @@
 		mermaid = (await import('mermaid')).default;
 	});
 
+	const useIsInsideForMoreThanAQuarterSecond = () => {
+		let isInside = $state(false);
+		let timeout: number | undefined = undefined;
+
+		return {
+			get isInside() {
+				return isInside;
+			},
+			attach: (node: HTMLElement) => {
+				const off1 = on(node, 'mouseenter', () => {
+					timeout = setTimeout(() => {
+						isInside = true;
+					}, 800);
+				});
+
+				const off2 = on(node, 'mouseleave', () => {
+					isInside = false;
+					clearTimeout(timeout);
+				});
+
+				return () => {
+					off1();
+					off2();
+				};
+			}
+		};
+	};
+
+	const insider = useIsInsideForMoreThanAQuarterSecond();
+
+	const panzoom = usePanzoom({
+		minZoom: 0.5,
+		maxZoom: 4,
+		zoomSpeed: 1,
+		get activateMouseWheel() {
+			return insider.isInside;
+		}
+	});
+
 	const renderMermaid = async (code: string, element: HTMLElement) => {
 		try {
 			// Default configuration
@@ -25,6 +66,7 @@
 				securityLevel: 'strict',
 				fontFamily: 'monospace',
 				suppressErrorRendering: true,
+
 				flowchart: {
 					useMaxWidth: true,
 					htmlLabels: true,
@@ -50,10 +92,19 @@
 			const uniqueId = `mermaid-${Math.abs(chartHash)}-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
 
 			// Render the diagram
-			const { svg } = await mermaid.render(uniqueId, code);
+			const { svg: svgString } = await mermaid.render(uniqueId, code);
+			const svg = new DOMParser().parseFromString(svgString, 'image/svg+xml').documentElement;
+
+			const svgTarget = element.querySelector('[data-mermaid-svg]')!;
+			svg.id = uniqueId;
+			Array.from(svg.attributes).forEach((attribute) => {
+				svgTarget.setAttribute(attribute.name, attribute.value);
+			});
+			svgTarget.innerHTML = svg.innerHTML;
+			// After rendering, fit the SVG within its parent container
 
-			// Insert the SVG into the container
-			element.innerHTML = svg;
+			panzoom.zoomToFit();
+			panzoom.zoomToFit();
 		} catch (err) {
 			// Do nothing
 		}
@@ -73,8 +124,159 @@
 			{...props}
 			class={clsx(streamdown.theme.mermaid.base, className)}
 			{@attach (node) => renderMermaid(code, node)}
-		></div>
+			{@attach insider.attach}
+			data-expanded={'false'}
+		>
+			<div class={streamdown.theme.mermaid.buttons}>
+				<button
+					class={streamdown.theme.mermaid.button}
+					aria-label="Zoom to fit"
+					onclick={() => panzoom.zoomToFit()}
+					data-panzoom-ignore
+				>
+					<svg
+						class={streamdown.theme.mermaid.icon}
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						><path d="M3 7V5a2 2 0 0 1 2-2h2" /><path d="M17 3h2a2 2 0 0 1 2 2v2" /><path
+							d="M21 17v2a2 2 0 0 1-2 2h-2"
+						/><path d="M7 21H5a2 2 0 0 1-2-2v-2" /><rect
+							width="10"
+							height="8"
+							x="7"
+							y="8"
+							rx="1"
+						/></svg
+					>
+				</button>
+				<button
+					class={streamdown.theme.mermaid.button}
+					aria-label="Zoom in"
+					onclick={() => panzoom.zoomIn()}
+					data-panzoom-ignore
+				>
+					<svg
+						class={streamdown.theme.mermaid.icon}
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						><circle cx="11" cy="11" r="8" /><line x1="21" x2="16.65" y1="21" y2="16.65" /><line
+							x1="11"
+							x2="11"
+							y1="8"
+							y2="14"
+						/><line x1="8" x2="14" y1="11" y2="11" /></svg
+					>
+				</button>
+				<button
+					class={streamdown.theme.mermaid.button}
+					aria-label="Zoom out"
+					onclick={() => panzoom.zoomOut()}
+					data-panzoom-ignore
+					><svg
+						class={streamdown.theme.mermaid.icon}
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						><circle cx="11" cy="11" r="8" /><line x1="21" x2="16.65" y1="21" y2="16.65" /><line
+							x1="8"
+							x2="14"
+							y1="11"
+							y2="11"
+						/></svg
+					></button
+				>
+				<button
+					class={streamdown.theme.mermaid.button}
+					aria-label="Toggle expand"
+					onclick={() => panzoom.toggleExpand()}
+					data-panzoom-ignore
+				>
+					<svg
+						class={streamdown.theme.mermaid.icon}
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						><path d="m15 15 6 6" /><path d="m15 9 6-6" /><path d="M21 16v5h-5" /><path
+							d="M21 8V3h-5"
+						/><path d="M3 16v5h5" /><path d="m3 21 6-6" /><path d="M3 8V3h5" /><path
+							d="M9 9 3 3"
+						/></svg
+					>
+				</button>
+			</div>
+			<svg {@attach panzoom.attach} data-mermaid-svg></svg>
+		</div>
 	{:else}
 		<div {...props} class={clsx(streamdown.theme.mermaid.base, className)}></div>
 	{/if}
 </Slot>
+
+<style>
+	/* View Transition styles for zoom effect */
+	::view-transition-old(panzoom-element),
+	::view-transition-new(panzoom-element) {
+		/* Animate both scale and opacity for smooth zoom */
+		animation-duration: 0.3s;
+		animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
+	}
+
+	/* Zoom in animation (expand) */
+	::view-transition-old(panzoom-element) {
+		animation-name: zoom-out;
+	}
+
+	::view-transition-new(panzoom-element) {
+		animation-name: zoom-in;
+	}
+
+	@keyframes zoom-out {
+		from {
+			transform: scale(1);
+		}
+		to {
+			transform: scale(0.8);
+		}
+	}
+
+	@keyframes zoom-in {
+		from {
+			transform: scale(1.2);
+		}
+		to {
+			transform: scale(1);
+		}
+	}
+
+	[data-expanded='true'] {
+		::view-transition-old(panzoom-element),
+		::view-transition-new(panzoom-element) {
+			animation-duration: 0.3s;
+			animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
+		}
+		position: fixed;
+		top: 16px;
+		left: 16px;
+		width: calc(100vw - 32px);
+		height: calc(100vh - 32px);
+		z-index: 2147483647;
+		margin: 0px;
+	}
+</style>

package/dist/Elements/Table.svelte

@@ -17,8 +17,8 @@
 	}}
 	render={streamdown.snippets.table}
 >
-	<div class={clsx(streamdown.theme.table.container)}>
-		<table {...props} class={clsx(streamdown.theme.table.base, className)}>
+	<div class={clsx(streamdown.theme.table.base, className)}>
+		<table class={streamdown.theme.table.table} {...props}>
 			{@render children()}
 		</table>
 	</div>

package/dist/Elements/element.d.ts

@@ -2,7 +2,7 @@ import type { Snippet } from 'svelte';
 import type { Element as HastElement } from 'hast';
 export type ElementProps<T = {}> = {
     children: Snippet;
-    className?: string;
+    className?: string[];
     node: HastElement;
     props: Record<string, any>;
 } & T & Record<string, any>;

package/dist/Streamdown.d.ts

@@ -7,41 +7,9 @@ import type { Theme } from './theme.js';
 import type { MermaidConfig } from 'mermaid';
 import type { KatexOptions } from 'katex';
 import type { ElementProps } from './Elements/element.js';
+type PredefinedElements = 'a' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'code' | 'inlineCode' | 'img' | 'ul' | 'ol' | 'li' | 'hr' | 'alert' | 'strong' | 'blockquote' | 'table' | 'thead' | 'tbody' | 'tr' | 'th' | 'td' | 'sup' | 'sub' | 'pre' | 'mermaid' | 'math' | 'inlineMath' | 'em' | 'del';
 export type Snippets = {
-    a?: Snippet<[ElementProps]>;
-    h1?: Snippet<[ElementProps]>;
-    h2?: Snippet<[ElementProps]>;
-    h3?: Snippet<[ElementProps]>;
-    h4?: Snippet<[ElementProps]>;
-    h5?: Snippet<[ElementProps]>;
-    h6?: Snippet<[ElementProps]>;
-    p?: Snippet<[ElementProps]>;
-    code?: Snippet<[ElementProps]>;
-    inlineCode?: Snippet<[ElementProps]>;
-    img?: Snippet<[ElementProps]>;
-    ul?: Snippet<[ElementProps]>;
-    ol?: Snippet<[ElementProps]>;
-    li?: Snippet<[ElementProps]>;
-    hr?: Snippet<[ElementProps]>;
-    alert?: Snippet<[ElementProps]>;
-    strong?: Snippet<[ElementProps]>;
-    blockquote?: Snippet<[ElementProps]>;
-    table?: Snippet<[ElementProps]>;
-    thead?: Snippet<[ElementProps]>;
-    tbody?: Snippet<[ElementProps]>;
-    tr?: Snippet<[ElementProps]>;
-    th?: Snippet<[ElementProps]>;
-    td?: Snippet<[ElementProps]>;
-    sup?: Snippet<[ElementProps]>;
-    sub?: Snippet<[ElementProps]>;
-    pre?: Snippet<[ElementProps]>;
-    mermaid?: Snippet<[ElementProps]>;
-    math?: Snippet<[ElementProps]>;
-    inlineMath?: Snippet<[ElementProps]>;
-    em?: Snippet<[ElementProps]>;
-    ins?: Snippet<[ElementProps]>;
-    del?: Snippet<[ElementProps]>;
-    small?: Snippet<[ElementProps]>;
+    [K in PredefinedElements]?: Snippet<[ElementProps]>;
 };
 /**
  * Filter elements callback type
@@ -68,7 +36,10 @@ export type StreamdownProps = {
     unwrapDisallowed?: boolean;
     urlTransform?: UrlTransform | null;
     theme?: Partial<Theme>;
+    baseTheme?: 'tailwind' | 'shadcn';
+    mergeTheme?: boolean;
     shikiTheme?: BundledTheme;
+    shikiPreloadThemes?: BundledTheme[];
     mermaidConfig?: MermaidConfig;
     katexConfig?: KatexOptions | ((inline: boolean) => KatexOptions);
     translations?: {
@@ -80,4 +51,6 @@ export type StreamdownProps = {
             important?: string;
         };
     };
-} & Snippets;
+    customElements?: Record<string, Snippet<[ElementProps]>>;
+} & Partial<Snippets>;
+export {};

package/dist/Streamdown.svelte

@@ -5,7 +5,6 @@
 		extends Omit<StreamdownProps, keyof Snippets | 'class' | 'theme' | 'shikiTheme'> {
 		snippets: Snippets;
 		shikiTheme: BundledTheme;
-		// make it non optional
 		theme: Theme;
 	}
 	export class StreamdownContext {
@@ -29,13 +28,15 @@
 	import { bind } from './utils/bind.js';
 	import { parseMarkdownIntoBlocks } from './utils/parse-blocks.js';
 	import 'katex/dist/katex.min.css';
-	import { mergeTheme, type Theme } from './theme.js';
+	import { mergeTheme, type Theme, shadcnTheme } from './theme.js';
 	import type { BundledTheme } from 'shiki';
+	import { highlighter } from './hightlighter.svelte.js';
 
 	let {
 		content,
 		class: className,
 		shikiTheme,
+		shikiPreloadThemes,
 		parseIncompleteMarkdown,
 		defaultOrigin,
 		allowedLinkPrefixes = ['*'],
@@ -53,6 +54,9 @@
 		mermaidConfig,
 		katexConfig,
 		translations,
+		baseTheme,
+		mergeTheme: shouldMergeTheme = true,
+		customElements,
 		...snippets
 	}: StreamdownProps = $props();
 
@@ -106,7 +110,12 @@
 			return snippets;
 		},
 		get theme() {
-			return mergeTheme(theme);
+			return shouldMergeTheme
+				? mergeTheme(theme, baseTheme)
+				: theme || (baseTheme === 'shadcn' ? shadcnTheme : theme);
+		},
+		get baseTheme() {
+			return baseTheme;
 		},
 		get mermaidConfig() {
 			return mermaidConfig;
@@ -116,11 +125,21 @@
 		},
 		get translations() {
 			return translations;
+		},
+		get customElements() {
+			return customElements;
 		}
 	});
 	const id = $props.id();
 
 	const blocks = $derived(parseMarkdownIntoBlocks(content));
+
+	// Preload themes if specified to avoid flickering
+	$effect(() => {
+		if (shikiPreloadThemes && shikiPreloadThemes.length > 0) {
+			highlighter.preloadThemes(shikiPreloadThemes);
+		}
+	});
 </script>
 
 {#each blocks as block, index (`${id}-block-${index}`)}

package/dist/hightlighter.svelte.d.ts

@@ -1,24 +1,30 @@
 import { type BundledLanguage, type BundledTheme } from 'shiki';
 declare class HighlighterManager {
     initialized: boolean;
-    initializedPromise: Promise<void> | null;
-    private highlighter;
-    private theme;
-    private readonly loadedLanguages;
-    private initializationPromise;
-    private readyStates;
-    private getReadyKey;
+    private state;
+    private readonly preloadedThemes;
+    private readonly readyCache;
+    initPromise: Promise<void> | null;
+    private getCacheKey;
+    isLoaded(theme: BundledTheme, language: BundledLanguage): boolean;
     /**
-     * Prepares the highlighter for the given themes and language.
-     * This method must be called and awaited before using highlightCode.
+     * Preloads themes by creating minimal highlighter instances.
+     * This reduces flickering when switching themes.
+     */
+    preloadThemes(themes: BundledTheme[]): Promise<void>;
+    /**
+     * Ensures the highlighter is ready for the given theme and language.
      */
     isReady(theme: BundledTheme, language: BundledLanguage): Promise<void>;
-    private ensureHighlightersInitialized;
+    private initialize;
     /**
-     * Synchronously highlights code. Must call isReady() first for the same themes and language.
-     * @throws {Error} If isReady() hasn't been called for this combination of themes and language
+     * Highlights code synchronously. Must call isReady() first.
      */
     highlightCode(code: string, language: BundledLanguage, theme: BundledTheme, preClassName?: string): string;
+    /**
+     * Clean up resources
+     */
+    dispose(): void;
 }
 export { HighlighterManager };
 export declare const highlighter: HighlighterManager;