svelte-streamdown 0.0.1

package/dist/Elements/H3.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { useStreamdown } from '../Streamdown.svelte';
+	import { clsx } from 'clsx';
+	import type { ElementProps } from './element.js';
+	import Slot from './Slot.svelte';
+
+	const streamdown = useStreamdown();
+
+	const { children, node, className, props }: ElementProps = $props();
+</script>
+
+<Slot
+	props={{
+		children,
+		node,
+		...props
+	}}
+	render={streamdown.snippets.h3}
+>
+	<h3 {...props} class={clsx(streamdown.theme.h3.base, className)}>
+		{@render children()}
+	</h3>
+</Slot>

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

@@ -0,0 +1,4 @@
+import type { ElementProps } from './element.js';
+declare const H3: import("svelte").Component<ElementProps, {}, "">;
+type H3 = ReturnType<typeof H3>;
+export default H3;

package/dist/Elements/H4.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { useStreamdown } from '../Streamdown.svelte';
+	import { clsx } from 'clsx';
+	import type { ElementProps } from './element.js';
+	import Slot from './Slot.svelte';
+
+	const streamdown = useStreamdown();
+
+	const { children, node, className, props }: ElementProps = $props();
+</script>
+
+<Slot
+	props={{
+		children,
+		node,
+		...props
+	}}
+	render={streamdown.snippets.h4}
+>
+	<h4 {...props} class={clsx(streamdown.theme.h4.base, className)}>
+		{@render children()}
+	</h4>
+</Slot>

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

@@ -0,0 +1,4 @@
+import type { ElementProps } from './element.js';
+declare const H4: import("svelte").Component<ElementProps, {}, "">;
+type H4 = ReturnType<typeof H4>;
+export default H4;

package/dist/Elements/H5.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { useStreamdown } from '../Streamdown.svelte';
+	import { clsx } from 'clsx';
+	import type { ElementProps } from './element.js';
+	import Slot from './Slot.svelte';
+
+	const streamdown = useStreamdown();
+
+	const { children, node, className, props }: ElementProps = $props();
+</script>
+
+<Slot
+	props={{
+		children,
+		node,
+		...props
+	}}
+	render={streamdown.snippets.h5}
+>
+	<h5 {...props} class={clsx(streamdown.theme.h5.base, className)}>
+		{@render children()}
+	</h5>
+</Slot>

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

@@ -0,0 +1,4 @@
+import type { ElementProps } from './element.js';
+declare const H5: import("svelte").Component<ElementProps, {}, "">;
+type H5 = ReturnType<typeof H5>;
+export default H5;

package/dist/Elements/H6.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { useStreamdown } from '../Streamdown.svelte';
+	import { clsx } from 'clsx';
+	import type { ElementProps } from './element.js';
+	import Slot from './Slot.svelte';
+
+	const streamdown = useStreamdown();
+
+	const { children, node, className, props }: ElementProps = $props();
+</script>
+
+<Slot
+	props={{
+		children,
+		node,
+		...props
+	}}
+	render={streamdown.snippets.h6}
+>
+	<h6 {...props} class={clsx(streamdown.theme.h6.base, className)}>
+		{@render children()}
+	</h6>
+</Slot>

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

@@ -0,0 +1,4 @@
+import type { ElementProps } from './element.js';
+declare const H6: import("svelte").Component<ElementProps, {}, "">;
+type H6 = ReturnType<typeof H6>;
+export default H6;

package/dist/Elements/Hr.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { useStreamdown } from '../Streamdown.svelte';
+	import { clsx } from 'clsx';
+	import type { ElementProps } from './element.js';
+	import Slot from './Slot.svelte';
+
+	const streamdown = useStreamdown();
+
+	const { node, props, className }: ElementProps = $props();
+</script>
+
+<Slot
+	props={{
+		node,
+		...props
+	}}
+	render={streamdown.snippets.hr}
+>
+	<hr {...props} class={clsx(streamdown.theme.hr.base, className)} />
+</Slot>

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

@@ -0,0 +1,4 @@
+import type { ElementProps } from './element.js';
+declare const Hr: import("svelte").Component<ElementProps, {}, "">;
+type Hr = ReturnType<typeof Hr>;
+export default Hr;

package/dist/Elements/Image.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import { useStreamdown } from '../Streamdown.svelte';
+	import { transformUrl } from '../utils/url.js';
+	import { clsx } from 'clsx';
+	import type { ElementProps } from './element.js';
+	import Slot from './Slot.svelte';
+
+	const streamdown = useStreamdown();
+
+	const { children, node, className, props }: ElementProps = $props();
+
+	const src = $derived(node.properties.src);
+	const alt = $derived(node.properties.alt as string | undefined);
+
+	const transformedUrl = $derived(
+		transformUrl(src, streamdown.allowedImagePrefixes ?? [], streamdown.defaultOrigin)
+	);
+</script>
+
+{#if transformedUrl}
+	<Slot
+		props={{
+			src: transformedUrl,
+			alt,
+			children,
+			...props
+		}}
+		render={streamdown.snippets.img}
+	>
+		<div class={streamdown.theme.img.container}>
+			<img
+				src={transformedUrl}
+				{alt}
+				{...props}
+				class={clsx(streamdown.theme.img.base, className)}
+			/>
+		</div>
+	</Slot>
+{:else}
+	<span
+		class={clsx(
+			'inline-block rounded bg-gray-200 px-3 py-1 text-sm text-gray-600 dark:bg-gray-700 dark:text-gray-400',
+			className?.toString()
+		)}
+		title={`Blocked URL: ${src}`}
+	>
+		[Image blocked: {alt || 'No description'}]
+	</span>
+{/if}

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

@@ -0,0 +1,4 @@
+import type { ElementProps } from './element.js';
+declare const Image: import("svelte").Component<ElementProps, {}, "">;
+type Image = ReturnType<typeof Image>;
+export default Image;

package/dist/Elements/InlineCode.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { useStreamdown } from '../Streamdown.svelte';
+	import { clsx } from 'clsx';
+	import type { ElementProps } from './element.js';
+	import Slot from './Slot.svelte';
+
+	const streamdown = useStreamdown();
+
+	const { children, node, className, props }: ElementProps = $props();
+</script>
+
+<Slot
+	props={{
+		children,
+		node,
+		...props
+	}}
+	render={streamdown.snippets.inlineCode}
+>
+	<code {...props} class={clsx(streamdown.theme.inlineCode.base, className)}>
+		{@render children()}
+	</code>
+</Slot>

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

@@ -0,0 +1,4 @@
+import type { ElementProps } from './element.js';
+declare const InlineCode: import("svelte").Component<ElementProps, {}, "">;
+type InlineCode = ReturnType<typeof InlineCode>;
+export default InlineCode;

package/dist/Elements/Li.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { useStreamdown } from '../Streamdown.svelte';
+	import { clsx } from 'clsx';
+	import type { ElementProps } from './element.js';
+	import Slot from './Slot.svelte';
+
+	const streamdown = useStreamdown();
+
+	const { children, node, className, props }: ElementProps = $props();
+</script>
+
+<Slot
+	props={{
+		children,
+		node,
+		...props
+	}}
+	render={streamdown.snippets.li}
+>
+	<li {...props} class={clsx(streamdown.theme.li.base, className)}>
+		{@render children()}
+	</li>
+</Slot>

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

@@ -0,0 +1,4 @@
+import type { ElementProps } from './element.js';
+declare const Li: import("svelte").Component<ElementProps, {}, "">;
+type Li = ReturnType<typeof Li>;
+export default Li;

package/dist/Elements/Math.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import { onMount, onDestroy } from 'svelte';
+	import { useStreamdown } from '../Streamdown.svelte';
+	import { clsx } from 'clsx';
+	import type { ElementProps } from './element.js';
+	import Slot from './Slot.svelte';
+	import type { KatexOptions } from 'katex';
+	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 });
+
+		if (!katex || !code) return;
+		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
+		}
+	};
+</script>
+
+<Slot
+	props={{
+		children,
+		node,
+		...props
+	}}
+	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>
+				</div>
+			</div>
+		{/if}
+	{:else}
+		<div {...props} class={clsx(streamdown.theme.math.base, className)}></div>
+	{/if}
+</Slot>

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

@@ -0,0 +1,5 @@
+import type { ElementProps } from './element.js';
+import 'katex/dist/katex.min.css';
+declare const Math: import("svelte").Component<ElementProps, {}, "">;
+type Math = ReturnType<typeof Math>;
+export default Math;

package/dist/Elements/Mermaid.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+	import { onMount, onDestroy } 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';
+
+	const streamdown = useStreamdown();
+
+	const { children, node, className, props }: ElementProps = $props();
+
+	const code = $derived((node.children[0] as any)?.value as string);
+	let mermaid = $state<any>(null);
+	onMount(async () => {
+		mermaid = (await import('mermaid')).default;
+	});
+
+	const renderMermaid = async (code: string, element: HTMLElement) => {
+		try {
+			// Default configuration
+			const defaultConfig: MermaidConfig = {
+				theme: 'base',
+				startOnLoad: false,
+				securityLevel: 'strict',
+				fontFamily: 'monospace',
+				suppressErrorRendering: true,
+				flowchart: {
+					useMaxWidth: true,
+					htmlLabels: true,
+					curve: 'basis'
+				},
+				...(streamdown.mermaidConfig || {})
+			};
+
+			// Initialize mermaid with merged config
+			const mergedConfig = { ...defaultConfig };
+			mermaid.initialize(mergedConfig);
+
+			// Validate and render the diagram
+			const isValidDiagram = await mermaid.parse(code);
+			if (!isValidDiagram) {
+				throw new Error('Invalid mermaid diagram syntax');
+			}
+			// Use a stable ID based on chart content hash and timestamp to ensure uniqueness
+			const chartHash = code.split('').reduce((acc, char) => {
+				// biome-ignore lint/suspicious/noBitwiseOperators: "Required for Mermaid"
+				return ((acc << 5) - acc + char.charCodeAt(0)) | 0;
+			}, 0);
+			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);
+
+			// Insert the SVG into the container
+			element.innerHTML = svg;
+		} catch (err) {
+			// Do nothing
+		}
+	};
+</script>
+
+<Slot
+	props={{
+		children,
+		node,
+		...props
+	}}
+	render={streamdown.snippets.mermaid}
+>
+	{#if mermaid}
+		<div
+			{...props}
+			class={clsx(streamdown.theme.mermaid.base, className)}
+			{@attach (node) => renderMermaid(code, node)}
+		></div>
+	{:else}
+		<div {...props} class={clsx(streamdown.theme.mermaid.base, className)}></div>
+	{/if}
+</Slot>

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

@@ -0,0 +1,4 @@
+import type { ElementProps } from './element.js';
+declare const Mermaid: import("svelte").Component<ElementProps, {}, "">;
+type Mermaid = ReturnType<typeof Mermaid>;
+export default Mermaid;

package/dist/Elements/Ol.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { useStreamdown } from '../Streamdown.svelte';
+	import { clsx } from 'clsx';
+	import type { ElementProps } from './element.js';
+	import Slot from './Slot.svelte';
+
+	const streamdown = useStreamdown();
+
+	const { children, node, className, props }: ElementProps = $props();
+</script>
+
+<Slot
+	props={{
+		children,
+		node,
+		...props
+	}}
+	render={streamdown.snippets.ol}
+>
+	<ol {...props} class={clsx(streamdown.theme.ol.base, className)}>
+		{@render children()}
+	</ol>
+</Slot>

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

@@ -0,0 +1,4 @@
+import type { ElementProps } from './element.js';
+declare const Ol: import("svelte").Component<ElementProps, {}, "">;
+type Ol = ReturnType<typeof Ol>;
+export default Ol;

package/dist/Elements/P.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { useStreamdown } from '../Streamdown.svelte';
+	import { clsx } from 'clsx';
+	import type { ElementProps } from './element.js';
+	import Slot from './Slot.svelte';
+
+	const streamdown = useStreamdown();
+
+	const { children, node, className, props }: ElementProps = $props();
+</script>
+
+<Slot
+	props={{
+		children,
+		node,
+		...props
+	}}
+	render={streamdown.snippets.p}
+>
+	<p {...props} class={clsx(streamdown.theme.p.base, className)}>
+		{@render children()}
+	</p>
+</Slot>

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

@@ -0,0 +1,4 @@
+import type { ElementProps } from './element.js';
+declare const P: import("svelte").Component<ElementProps, {}, "">;
+type P = ReturnType<typeof P>;
+export default P;

package/dist/Elements/Slot.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let {
+		children,
+		render,
+		props
+	}: {
+		children: Snippet;
+		render?: Snippet<[any]>;
+		props: Record<string, any>;
+	} = $props();
+</script>
+
+{#if render}
+	{@render render(props)}
+{:else}
+	{@render children()}
+{/if}

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

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children: Snippet;
+    render?: Snippet<[any]>;
+    props: Record<string, any>;
+};
+declare const Slot: import("svelte").Component<$$ComponentProps, {}, "">;
+type Slot = ReturnType<typeof Slot>;
+export default Slot;

package/dist/Elements/Strong.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { useStreamdown } from '../Streamdown.svelte';
+	import { clsx } from 'clsx';
+	import type { ElementProps } from './element.js';
+	import Slot from './Slot.svelte';
+
+	const streamdown = useStreamdown();
+
+	const { children, node, className, props }: ElementProps = $props();
+</script>
+
+<Slot
+	props={{
+		children,
+		node,
+		...props
+	}}
+	render={streamdown.snippets.strong}
+>
+	<strong {...props} class={clsx(streamdown.theme.strong.base, className)}>
+		{@render children()}
+	</strong>
+</Slot>

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

@@ -0,0 +1,4 @@
+import type { ElementProps } from './element.js';
+declare const Strong: import("svelte").Component<ElementProps, {}, "">;
+type Strong = ReturnType<typeof Strong>;
+export default Strong;

package/dist/Elements/Sub.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { useStreamdown } from '../Streamdown.svelte';
+	import { clsx } from 'clsx';
+	import type { ElementProps } from './element.js';
+	import Slot from './Slot.svelte';
+
+	const streamdown = useStreamdown();
+
+	const { children, node, className, props }: ElementProps = $props();
+</script>
+
+<Slot
+	props={{
+		children,
+		node,
+		...props
+	}}
+	render={streamdown.snippets.sub}
+>
+	<sub {...props} class={clsx(streamdown.theme.sub.base, className)}>
+		{@render children()}
+	</sub>
+</Slot>

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

@@ -0,0 +1,4 @@
+import type { ElementProps } from './element.js';
+declare const Sub: import("svelte").Component<ElementProps, {}, "">;
+type Sub = ReturnType<typeof Sub>;
+export default Sub;

package/dist/Elements/Sup.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { useStreamdown } from '../Streamdown.svelte';
+	import { clsx } from 'clsx';
+	import type { ElementProps } from './element.js';
+	import Slot from './Slot.svelte';
+
+	const streamdown = useStreamdown();
+
+	const { children, node, className, props }: ElementProps = $props();
+</script>
+
+<Slot
+	props={{
+		children,
+		node,
+		...props
+	}}
+	render={streamdown.snippets.sup}
+>
+	<sup {...props} class={clsx(streamdown.theme.sup.base, className)}>
+		{@render children()}
+	</sup>
+</Slot>

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

@@ -0,0 +1,4 @@
+import type { ElementProps } from './element.js';
+declare const Sup: import("svelte").Component<ElementProps, {}, "">;
+type Sup = ReturnType<typeof Sup>;
+export default Sup;

package/dist/Elements/Table.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { useStreamdown } from '../Streamdown.svelte';
+	import { clsx } from 'clsx';
+	import type { ElementProps } from './element.js';
+	import Slot from './Slot.svelte';
+
+	const streamdown = useStreamdown();
+
+	const { children, node, className, props }: ElementProps = $props();
+</script>
+
+<Slot
+	props={{
+		children,
+		node,
+		...props
+	}}
+	render={streamdown.snippets.table}
+>
+	<div class={clsx(streamdown.theme.table.container)}>
+		<table {...props} class={clsx(streamdown.theme.table.base, className)}>
+			{@render children()}
+		</table>
+	</div>
+</Slot>

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

@@ -0,0 +1,4 @@
+import type { ElementProps } from './element.js';
+declare const Table: import("svelte").Component<ElementProps, {}, "">;
+type Table = ReturnType<typeof Table>;
+export default Table;

package/dist/Elements/Tbody.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { useStreamdown } from '../Streamdown.svelte';
+	import { clsx } from 'clsx';
+	import type { ElementProps } from './element.js';
+	import Slot from './Slot.svelte';
+
+	const streamdown = useStreamdown();
+
+	const { children, node, className, props }: ElementProps = $props();
+</script>
+
+<Slot
+	props={{
+		children,
+		node,
+		...props
+	}}
+	render={streamdown.snippets.tbody}
+>
+	<tbody {...props} class={clsx(streamdown.theme.tbody.base, className)}>
+		{@render children()}
+	</tbody>
+</Slot>