svelte-streamdown 2.4.5 → 2.5.0

package/dist/Elements/FootnoteRef.svelte

@@ -2,18 +2,12 @@
 	import { useStreamdown } from '../context.svelte.js';
 	import Slot from './Slot.svelte';
 	import type { FootnoteRef } from '../marked/marked-footnotes.js';
-	import {
-		autoPlacement,
-		computePosition,
-		autoUpdate,
-		hide,
-		offset,
-		shift
-	} from '@floating-ui/dom';
+
 	import { useClickOutside } from '../utils/useClickOutside.svelte.js';
 	import { scale } from 'svelte/transition';
 	import Block from '../Block.svelte';
 	import { useKeyDown } from '../utils/useKeyDown.svelte.js';
+	import { Popover } from './popover.svelte.js';
 
 	const streamdown = useStreamdown();
 
@@ -24,106 +18,62 @@
 	} = $props();
 
 	const id = $props.id();
-	let isOpen = $state(false);
-
-	let reference = $state<HTMLButtonElement>();
-	let content = $state<HTMLDialogElement>();
+	const popover = new Popover();
 
-	const clickOutside = useClickOutside({
+	useKeyDown({
+		keys: ['Escape'],
 		get isActive() {
-			return isOpen;
+			return popover.isOpen;
 		},
 		callback: () => {
-			isOpen = false;
+			popover.isOpen = false;
 		}
 	});
-
-	useKeyDown({
-		keys: ['Escape'],
+	const clickOutside = useClickOutside({
 		get isActive() {
-			return isOpen;
+			return popover.isOpen;
 		},
 		callback: () => {
-			isOpen = false;
+			popover.isOpen = false;
 		}
 	});
-
-	const place = async (node: HTMLElement) => {
-		const middleware = [
-			hide(),
-			offset(0),
-			shift({
-				mainAxis: true
-			}),
-			autoPlacement({
-				allowedPlacements: ['top', 'top-end', 'top-start', 'bottom', 'bottom-end', 'bottom-start']
-			})
-		];
-		const { x, y, strategy, placement, middlewareData } = await computePosition(reference!, node, {
-			strategy: 'fixed',
-			middleware
-		});
-
-		Object.assign(node.style, {
-			position: strategy,
-			left: `${x}px`,
-			top: `${y}px`
-		});
-	};
-
-	const popoverAttachment = (node: HTMLDialogElement) => {
-		content = node;
-		void place(node);
-		const off = autoUpdate(reference!, node, () => place(node));
-		return () => {
-			off();
-		};
-	};
 </script>
 
-{#if isOpen}
-	<Slot
-		props={{
-			token,
-			isOpen
-		}}
-		render={streamdown.snippets.footnotePopover}
+{#if popover.isOpen}
+	<dialog
+		id={'footnote-popover-' + id}
+		aria-modal="false"
+		transition:scale|global={{ start: 0.95, duration: 100 }}
+		{@attach clickOutside.attachment}
+		{@attach popover.popoverAttachment}
+		open
+		class={`${streamdown.theme.components.popover}`}
 	>
-		<dialog
-			style="z-index: 1000; position: fixed;"
-			id={'footnote-popover-' + id}
-			aria-modal="false"
-			transition:scale|global={{ start: 0.95, duration: 100 }}
-			{@attach clickOutside.attachment}
-			{@attach popoverAttachment}
-			open
-			class={`${streamdown.theme.footnotePopover.base}`}
+		<Slot
+			props={{
+				token,
+				isOpen: popover.isOpen
+			}}
+			render={streamdown.snippets.footnotePopover}
 		>
 			{#each token.content.lines as line}
-				<Block insideFootnote block={line} />
+				<Block block={line} />
 			{/each}
-		</dialog>
-	</Slot>
+		</Slot>
+	</dialog>
 {/if}
 
 {#if token.label !== 'streamdown:footnote'}
-	<Slot
-		props={{
-			token
-		}}
-		render={streamdown.snippets.footnoteRef}
+	<button
+		style={streamdown.animationBlockStyle}
+		bind:this={popover.reference}
+		class={streamdown.theme.footnoteRef.base}
+		onclick={() => (popover.isOpen = !popover.isOpen)}
+		aria-expanded={popover.isOpen}
+		aria-haspopup="dialog"
+		aria-controls={'footnote-popover-' + id}
+		{@attach clickOutside.attachment}
 	>
-		<button
-			style={streamdown.animationBlockStyle}
-			bind:this={reference}
-			class={streamdown.theme.footnoteRef.base}
-			onclick={() => (isOpen = !isOpen)}
-			aria-expanded={isOpen}
-			aria-haspopup="dialog"
-			aria-controls={'footnote-popover-' + id}
-			{@attach clickOutside.attachment}
-		>
-			{token.label.replace('^', '')}
-		</button>
-	</Slot>
+		{token.label.replace('^', '')}
+	</button>
 {/if}

package/dist/Elements/Mermaid.svelte

@@ -200,60 +200,63 @@
 	};
 </script>
 
-{#if mermaid}
-	<div
-		style={streamdown.isMounted ? streamdown.animationBlockStyle : ''}
-		class={streamdown.theme.mermaid.base}
-		{@attach (node) => renderMermaid(token.text, node)}
-		{@attach insider.attach}
-		data-expanded={'false'}
-	>
-		{#if streamdown.controls.mermaid}
-			<div class={streamdown.theme.mermaid.buttons}>
-				<button
-					class={streamdown.theme.mermaid.button}
-					aria-label="Zoom to fit"
-					onclick={() => panzoom.zoomToFit()}
-					data-panzoom-ignore
-				>
-					{@render (streamdown.icons?.fitView || fitViewIcon)()}
-				</button>
-				<button
-					class={streamdown.theme.mermaid.button}
-					aria-label="Zoom in"
-					onclick={() => panzoom.zoomIn()}
-					data-panzoom-ignore
-				>
-					{@render (streamdown.icons?.zoomIn || zoomInIcon)()}
-				</button>
-				<button
-					class={streamdown.theme.mermaid.button}
-					aria-label="Zoom out"
-					onclick={() => panzoom.zoomOut()}
-					data-panzoom-ignore
-				>
-					{@render (streamdown.icons?.zoomOut || zoomOutIcon)()}
-				</button>
-				<button
-					class={streamdown.theme.mermaid.button}
-					aria-label="Toggle expand"
-					onclick={() => panzoom.toggleExpand()}
-					data-panzoom-ignore
-				>
-					{@render (streamdown.icons?.fullscreen || fullscreenIcon)()}
-				</button>
-			</div>
-		{/if}
-		<svg {@attach panzoom.attach} data-mermaid-svg></svg>
-	</div>
-{:else}
-	<div class={streamdown.theme.mermaid.base}></div>
-{/if}
-
+<div>
+	{#if mermaid}
+		<div
+			style={streamdown.isMounted ? streamdown.animationBlockStyle : ''}
+			class={streamdown.theme.mermaid.base}
+			{@attach (node) => renderMermaid(token.text, node)}
+			{@attach insider.attach}
+			data-expanded={'false'}
+		>
+			{#if streamdown.controls.mermaid}
+				<div class={streamdown.theme.mermaid.buttons}>
+					<button
+						class={streamdown.theme.components.button}
+						aria-label="Zoom to fit"
+						onclick={() => panzoom.zoomToFit()}
+						data-panzoom-ignore
+					>
+						{@render (streamdown.icons?.fitView || fitViewIcon)()}
+					</button>
+					<button
+						class={streamdown.theme.components.button}
+						aria-label="Zoom in"
+						onclick={() => panzoom.zoomIn()}
+						data-panzoom-ignore
+					>
+						{@render (streamdown.icons?.zoomIn || zoomInIcon)()}
+					</button>
+					<button
+						class={streamdown.theme.components.button}
+						aria-label="Zoom out"
+						onclick={() => panzoom.zoomOut()}
+						data-panzoom-ignore
+					>
+						{@render (streamdown.icons?.zoomOut || zoomOutIcon)()}
+					</button>
+					<button
+						class={streamdown.theme.components.button}
+						aria-label="Toggle expand"
+						onclick={() => panzoom.toggleExpand()}
+						data-panzoom-ignore
+					>
+						{@render (streamdown.icons?.fullscreen || fullscreenIcon)()}
+					</button>
+				</div>
+			{/if}
+			<svg {@attach panzoom.attach} data-mermaid-svg></svg>
+		</div>
+	{:else}
+		<div class={streamdown.theme.mermaid.base}></div>
+	{/if}
+</div>
 {#snippet zoomInIcon()}
 	<svg
 		class={streamdown.theme.mermaid.icon}
 		xmlns="http://www.w3.org/2000/svg"
+		width="100%"
+		height="100%"
 		viewBox="0 0 24 24"
 		fill="none"
 		stroke="currentColor"
@@ -271,6 +274,8 @@
 	<svg
 		class={streamdown.theme.mermaid.icon}
 		xmlns="http://www.w3.org/2000/svg"
+		width="100%"
+		height="100%"
 		viewBox="0 0 24 24"
 		fill="none"
 		stroke="currentColor"
@@ -321,47 +326,7 @@
 {/snippet}
 
 <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);
-		}
-	}
-
 	:global([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;

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

@@ -0,0 +1,8 @@
+export declare class Popover {
+    isOpen: boolean;
+    content: HTMLDialogElement | undefined;
+    reference: HTMLButtonElement | undefined;
+    constructor();
+    place: (node: HTMLElement) => Promise<void>;
+    popoverAttachment: (node: HTMLDialogElement) => () => void;
+}

package/dist/Elements/popover.svelte.js

@@ -0,0 +1,40 @@
+import { useClickOutside } from '../utils/useClickOutside.svelte.js';
+import { autoPlacement, computePosition, autoUpdate, hide, offset, shift } from '@floating-ui/dom';
+import { setContext } from 'svelte';
+export class Popover {
+    isOpen = $state(false);
+    content = $state();
+    reference = $state();
+    constructor() {
+        setContext('POPOVER', true);
+    }
+    place = async (node) => {
+        const middleware = [
+            hide(),
+            offset(10),
+            shift({
+                mainAxis: true
+            }),
+            autoPlacement({
+                allowedPlacements: ['top', 'top-end', 'top-start', 'bottom', 'bottom-end', 'bottom-start']
+            })
+        ];
+        const { x, y, strategy, placement, middlewareData } = await computePosition(this.reference, node, {
+            strategy: 'fixed',
+            middleware
+        });
+        Object.assign(node.style, {
+            position: strategy,
+            left: `${x}px`,
+            top: `${y}px`
+        });
+    };
+    popoverAttachment = (node) => {
+        this.content = node;
+        void this.place(node);
+        const off = autoUpdate(this.reference, node, () => this.place(node));
+        return () => {
+            off();
+        };
+    };
+}

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

@@ -0,0 +1,35 @@
+type KeyFramesOptions = {
+    duration: number;
+    easing: string;
+    fill: 'auto' | 'backwards' | 'both' | 'forwards' | 'none';
+};
+export declare const bind: (ref: Record<string, any>, props: Record<string, any>) => void;
+export interface StepperState<Item> {
+    items: Item[];
+    keyFramesOptions: KeyFramesOptions;
+}
+export declare class StepperState<Item> {
+    activeStep: number;
+    destinationOffset: number;
+    stepAnimation: Animation | undefined;
+    offsets: number[];
+    stepHeights: number[];
+    stepContainer: HTMLElement | null;
+    isAnimating: boolean;
+    constructor(props: {
+        items: Item[];
+        keyFramesOptions: KeyFramesOptions;
+    });
+    translate: () => void;
+    setActiveStep: (i: number) => () => void;
+    scroller: (node: HTMLElement) => {
+        destroy: () => void;
+    };
+    next: () => void;
+    previous: () => void;
+    goTo: (i: number) => void;
+    get canGoNext(): boolean;
+    get canGoPrevious(): boolean;
+    canGoToStep: (targetStep: number) => boolean;
+}
+export {};

package/dist/Elements/stepperState.svelte.js

@@ -0,0 +1,98 @@
+import { tick } from 'svelte';
+export const bind = (ref, props) => {
+    const descriptors = Object.getOwnPropertyDescriptors(props);
+    for (const key in descriptors) {
+        Object.defineProperty(ref, key, descriptors[key]);
+    }
+};
+export class StepperState {
+    activeStep = $state(0);
+    destinationOffset = $state(0);
+    stepAnimation = $state();
+    offsets = $state([]);
+    stepHeights = $state([]);
+    stepContainer = null;
+    isAnimating = $state(false);
+    constructor(props) {
+        bind(this, props);
+    }
+    translate = () => {
+        if (this.destinationOffset !== this.offsets[this.activeStep] && this.stepContainer) {
+            this.destinationOffset = this.offsets[this.activeStep];
+            this.stepAnimation?.cancel();
+            this.stepAnimation = this.stepContainer.animate({
+                transform: `translateX(-${this.offsets[this.activeStep]}px)`
+            }, this.keyFramesOptions);
+            this.stepAnimation.onfinish = () => {
+                this.stepAnimation = undefined;
+            };
+        }
+    };
+    setActiveStep = (i) => () => {
+        if (!this.canGoToStep(i) || !this.stepContainer)
+            return;
+        const previousStep = this.stepContainer.children[this.activeStep];
+        const nextStep = this.stepContainer.children[i];
+        if (!previousStep || !nextStep)
+            return;
+        this.activeStep = i;
+        this.translate();
+        previousStep.animate({
+            opacity: `0`
+        }, this.keyFramesOptions);
+        nextStep.animate({
+            opacity: `1`
+        }, this.keyFramesOptions);
+    };
+    scroller = (node) => {
+        const onScroll = (e) => {
+            e.preventDefault();
+            node.scrollTo(0, 0);
+        };
+        node.addEventListener('scroll', onScroll);
+        node.scrollTo(0, 0);
+        const steps = node.querySelectorAll('[data-step]');
+        const setOffsets = () => {
+            steps.forEach((step, i) => {
+                this.offsets[i] = step.offsetLeft;
+                this.translate();
+            });
+        };
+        const resizeObserver = new ResizeObserver(setOffsets);
+        resizeObserver.observe(node);
+        setOffsets();
+        return {
+            destroy: () => {
+                resizeObserver.unobserve(node);
+                node.removeEventListener('scroll', onScroll);
+                this.activeStep = 0;
+                this.offsets = [];
+                this.destinationOffset = 0;
+            }
+        };
+    };
+    next = () => {
+        if (this.activeStep < this.items.length - 1) {
+            this.setActiveStep(this.activeStep + 1)();
+        }
+    };
+    previous = () => {
+        if (this.activeStep > 0) {
+            this.setActiveStep(this.activeStep - 1)();
+        }
+    };
+    goTo = (i) => {
+        if (this.canGoToStep(i)) {
+            this.setActiveStep(i)();
+        }
+    };
+    get canGoNext() {
+        return this.activeStep < this.items.length - 1;
+    }
+    get canGoPrevious() {
+        return this.activeStep > 0;
+    }
+    canGoToStep = (targetStep) => {
+        return targetStep >= 0 && targetStep < this.items.length;
+    };
+}

package/dist/Streamdown.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang="ts" generics="Source extends Record<string, any> = Record<string, any>">
 	import Block from './Block.svelte';
 	import { StreamdownContext, type StreamdownProps } from './context.svelte.js';
 	import { mergeTheme, shadcnTheme } from './theme.js';
@@ -27,8 +27,10 @@
 		icons,
 		children,
 		extensions,
+		sources,
+		inlineCitationsMode = 'carousel',
 		...snippets
-	}: StreamdownProps = $props();
+	}: StreamdownProps<Source> = $props();
 
 	streamdown = new StreamdownContext({
 		get element() {
@@ -78,7 +80,12 @@
 		get shikiPreloadThemes() {
 			return shikiPreloadThemes;
 		},
-
+		get sources() {
+			return sources;
+		},
+		get inlineCitationsMode() {
+			return inlineCitationsMode;
+		},
 		get animation() {
 			if (!animation?.enabled)
 				return {

package/dist/Streamdown.svelte.d.ts

@@ -1,4 +1,25 @@
 import { type StreamdownProps } from './context.svelte.js';
-declare const Streamdown: import("svelte").Component<StreamdownProps, {}, "streamdown" | "element">;
-type Streamdown = ReturnType<typeof Streamdown>;
+declare function $$render<Source extends Record<string, any> = Record<string, any>>(): {
+    props: StreamdownProps<Source>;
+    exports: {};
+    bindings: "streamdown" | "element";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Source extends Record<string, any> = Record<string, any>> {
+    props(): ReturnType<typeof $$render<Source>>['props'];
+    events(): ReturnType<typeof $$render<Source>>['events'];
+    slots(): ReturnType<typeof $$render<Source>>['slots'];
+    bindings(): "streamdown" | "element";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Source extends Record<string, any> = Record<string, any>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Source>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Source>['props']>, ReturnType<__sveltets_Render<Source>['events']>, ReturnType<__sveltets_Render<Source>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Source>['bindings']>;
+    } & ReturnType<__sveltets_Render<Source>['exports']>;
+    <Source extends Record<string, any> = Record<string, any>>(internal: unknown, props: ReturnType<__sveltets_Render<Source>['props']> & {}): ReturnType<__sveltets_Render<Source>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Streamdown: $$IsomorphicComponent;
+type Streamdown<Source extends Record<string, any> = Record<string, any>> = InstanceType<typeof Streamdown<Source>>;
 export default Streamdown;

package/dist/context.svelte.d.ts

@@ -3,7 +3,7 @@ import type { DeepPartialTheme, Theme } from './theme.js';
 import type { MermaidConfig } from 'mermaid';
 import type { KatexOptions } from 'katex';
 import type { BundledTheme } from 'shiki';
-export interface StreamdownContext extends Omit<StreamdownProps, keyof Snippets | 'class' | 'theme' | 'shikiTheme'> {
+export interface StreamdownContext extends Omit<StreamdownProps, keyof Snippets | 'class' | 'theme' | 'shikiTheme' | 'inlineCitationsMode'> {
     snippets: Snippets;
     shikiTheme: BundledTheme;
     theme: Theme;
@@ -11,24 +11,25 @@ export interface StreamdownContext extends Omit<StreamdownProps, keyof Snippets
         code: boolean;
         mermaid: boolean;
     };
+    inlineCitationsMode: 'list' | 'carousel';
     animation: {
         enabled: boolean;
     } & StreamdownProps['animation'];
 }
-export declare class StreamdownContext {
+export declare class StreamdownContext<Source extends Record<string, any> = Record<string, any>> {
     footnotes: {
         refs: Map<string, FootnoteRef>;
         footnotes: Map<string, Footnote>;
     };
     isMounted: boolean;
-    animationTextStyle: string | undefined;
-    animationBlockStyle: string | undefined;
+    get animationTextStyle(): string | undefined;
+    get animationBlockStyle(): string | undefined;
     constructor(props: Omit<StreamdownProps, keyof Snippets | 'class'> & {
-        snippets: Snippets;
+        snippets: Snippets<Source>;
     });
 }
-export declare const useStreamdown: () => StreamdownContext;
-import type { AlertToken, MathToken, SubSupToken, TableToken, THead, TBody, TFoot, THeadRow, TRow, TD, TH, Extension, GenericToken } from './marked/index.js';
+export declare const useStreamdown: () => StreamdownContext<Record<string, any>>;
+import type { AlertToken, MathToken, SubSupToken, TableToken, THead, TBody, TFoot, THeadRow, TRow, TD, TH, Extension, GenericToken, CitationToken } from './marked/index.js';
 import type { Tokens } from 'marked';
 import type { ListItemToken, ListToken } from './marked/marked-list.js';
 import type { Footnote, FootnoteRef, FootnoteToken } from './marked/marked-footnotes.js';
@@ -67,18 +68,29 @@ type TokenSnippet = {
     description: DescriptionToken;
     descriptionTerm: DescriptionTermToken;
     descriptionDetail: DescriptionDetailToken;
+    inlineCitation: CitationToken;
+    inlineCitationPopover: CitationToken;
+    inlineCitationContent: CitationToken;
+    inlineCitationPreview: CitationToken;
 };
 type PredefinedElements = keyof TokenSnippet;
-export type Snippets = {
+export type Snippets<Source extends Record<string, any> = Record<string, any>> = {
     [K in PredefinedElements]?: Snippet<[
         {
             children: Snippet;
             token: TokenSnippet[K];
-        }
+        } & (K extends 'inlineCitationContent' ? {
+            source: Source;
+            key: string;
+        } : {})
     ]>;
 };
-export type StreamdownProps = {
+export type StreamdownProps<Source extends Record<string, any> = Record<string, any>> = {
     streamdown?: StreamdownContext;
+    sources?: {
+        [key: string]: Source;
+    };
+    inlineCitationsMode?: 'list' | 'carousel';
     element?: HTMLElement;
     content: string;
     class?: string;
@@ -127,6 +139,8 @@ export type StreamdownProps = {
         warning?: Snippet;
         caution?: Snippet;
         important?: Snippet;
+        chevronLeft?: Snippet;
+        chevronRight?: Snippet;
     };
     extensions?: Extension[];
     children?: Snippet<[{
@@ -134,5 +148,5 @@ export type StreamdownProps = {
         token: GenericToken;
         children: Snippet;
     }]>;
-} & Partial<Snippets>;
+} & Partial<Snippets<Source>>;
 export {};