svelte-streamdown 0.0.1 → 1.0.0

package/dist/hightlighter.svelte.js

@@ -1,102 +1,128 @@
 import { createJavaScriptRegexEngine } from 'shiki/engine/javascript';
 import { createHighlighter } from 'shiki';
+import { SvelteMap } from 'svelte/reactivity';
 // Remove background styles from <pre> tags (inline style)
 const removePreBackground = (html) => {
     return html.replace(/<pre[^>]*style="[^"]*background[^";]*;?[^"]*"[^>]*>/g, (match) => match.replace(/style="[^"]*background[^";]*;?[^"]*"/, ''));
 };
 class HighlighterManager {
     initialized = $state(false);
-    initializedPromise = $state(null);
-    highlighter = null;
-    theme = null;
-    loadedLanguages = new Set();
-    initializationPromise = null;
-    readyStates = new Map();
-    getReadyKey(theme, language) {
-        return `${theme}-${language}`;
+    state = null;
+    preloadedThemes = new Set();
+    readyCache = new SvelteMap();
+    initPromise = $state(null);
+    getCacheKey(theme, language) {
+        return `${theme}:${language}`;
+    }
+    isLoaded(theme, language) {
+        return this.readyCache.get(this.getCacheKey(theme, language)) ?? false;
+    }
+    /**
+     * Preloads themes by creating minimal highlighter instances.
+     * This reduces flickering when switching themes.
+     */
+    async preloadThemes(themes) {
+        const promises = themes
+            .filter((theme) => !this.preloadedThemes.has(theme))
+            .map(async (theme) => {
+            try {
+                // Create minimal highlighter just to load theme assets
+                const preloader = await createHighlighter({
+                    themes: [theme],
+                    langs: ['javascript'], // Minimal language for preloading
+                    engine: createJavaScriptRegexEngine({ forgiving: true })
+                });
+                preloader.dispose();
+                this.preloadedThemes.add(theme);
+            }
+            catch (error) {
+                console.warn(`Failed to preload theme ${theme}:`, error);
+            }
+        });
+        await Promise.all(promises);
     }
     /**
-     * Prepares the highlighter for the given themes and language.
-     * This method must be called and awaited before using highlightCode.
+     * Ensures the highlighter is ready for the given theme and language.
      */
     async isReady(theme, language) {
-        const readyKey = this.getReadyKey(theme, language);
-        // If already ready for this combination, return immediately
-        if (this.readyStates.get(readyKey)) {
+        const cacheKey = this.getCacheKey(theme, language);
+        // Return immediately if already ready
+        if (this.readyCache.get(cacheKey)) {
             return;
         }
-        // Ensure only one initialization happens at a time
-        if (this.initializationPromise) {
-            await this.initializationPromise;
+        // Wait for any ongoing initialization
+        if (this.initPromise) {
+            await this.initPromise;
         }
-        // Check again after waiting, in case another call initialized it
-        if (this.readyStates.get(readyKey)) {
+        // Check again after waiting
+        if (this.readyCache.get(cacheKey)) {
             return;
         }
-        // Initialize for this combination
-        this.initializationPromise = this.ensureHighlightersInitialized(theme, language);
-        await this.initializationPromise;
-        this.initializationPromise = null;
-        // Mark as ready
-        this.readyStates.set(readyKey, true);
+        // Initialize the highlighter
+        this.initPromise = this.initialize(theme, language);
+        await this.initPromise;
+        this.readyCache.set(cacheKey, true);
         this.initialized = true;
+        this.initPromise = null;
     }
-    async ensureHighlightersInitialized(theme, language) {
-        const jsEngine = createJavaScriptRegexEngine({ forgiving: true });
-        // Check if we need to recreate highlighters due to theme change
-        const needsLightRecreation = !this.highlighter || this.theme !== theme;
-        if (needsLightRecreation) {
-            // If themes changed, reset loaded languages and ready states
-            this.loadedLanguages.clear();
-            this.readyStates.clear();
-        }
-        // Check if we need to load the language
-        const needsLanguageLoad = !this.loadedLanguages.has(language);
-        // Create or recreate light highlighter if needed
-        if (needsLightRecreation) {
-            this.highlighter = await createHighlighter({
+    async initialize(theme, language) {
+        const needsNewHighlighter = !this.state || this.state.theme !== theme;
+        if (needsNewHighlighter) {
+            // Dispose old highlighter if it exists
+            this.state?.highlighter.dispose();
+            // Clear cache when theme changes
+            this.readyCache.clear();
+            // Create new highlighter with the theme
+            const highlighter = await createHighlighter({
                 themes: [theme],
                 langs: [language],
-                engine: jsEngine
+                engine: createJavaScriptRegexEngine({ forgiving: true })
             });
-            this.theme = theme;
-            this.loadedLanguages.add(language);
-        }
-        else if (needsLanguageLoad) {
-            // Load the language if not already loaded
-            await this.highlighter?.loadLanguage(language);
+            this.state = {
+                highlighter,
+                theme,
+                languages: new Set([language])
+            };
+            // Mark theme as preloaded since we now have it
+            this.preloadedThemes.add(theme);
         }
-        // Mark language as loaded after both highlighters have it
-        if (needsLanguageLoad) {
-            this.loadedLanguages.add(language);
+        else if (this.state && !this.state.languages.has(language)) {
+            // Add language to existing highlighter
+            await this.state.highlighter.loadLanguage(language);
+            this.state.languages.add(language);
         }
     }
     /**
-     * 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, language, theme, preClassName) {
-        const readyKey = this.getReadyKey(theme, language);
-        // Ensure isReady was called first
-        if (!this.readyStates.get(readyKey)) {
-            throw new Error(`Highlighter not ready for themes [${theme}] and language "${language}". ` +
+        if (!this.isLoaded(theme, language)) {
+            throw new Error(`Highlighter not ready for theme "${theme}" and language "${language}". ` +
                 `Call await highlighter.isReady(theme, language) first.`);
         }
-        // Ensure highlighters exist
-        if (!this.highlighter) {
-            throw new Error('Highlighters not initialized. This should not happen after calling isReady().');
+        if (!this.state) {
+            throw new Error('Highlighter not initialized. This should not happen after calling isReady().');
         }
-        const addPreClass = (html) => {
-            if (!preClassName) {
-                return html;
-            }
-            return html.replace(/<pre(\s|>)/, `<pre class="${preClassName}"$1`);
-        };
-        const light = this.highlighter.codeToHtml(code, {
+        let html = this.state.highlighter.codeToHtml(code, {
             lang: language,
             theme: theme
         });
-        return removePreBackground(addPreClass(light));
+        // Remove background and add custom class if needed
+        html = removePreBackground(html);
+        if (preClassName) {
+            html = html.replace(/<pre(\s|>)/, `<pre class="${preClassName}"$1`);
+        }
+        return html;
+    }
+    /**
+     * Clean up resources
+     */
+    dispose() {
+        this.state?.highlighter.dispose();
+        this.state = null;
+        this.readyCache.clear();
+        this.preloadedThemes.clear();
+        this.initialized = false;
     }
 }
 // Export the class for those who want to create their own instances

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 export { default as Streamdown, useStreamdown } from './Streamdown.svelte';
 export * from './Elements/index.js';
+export { theme, shadcnTheme, mergeTheme, cn, type Theme } from './theme.js';

package/dist/index.js

@@ -1,2 +1,3 @@
 export { default as Streamdown, useStreamdown } from './Streamdown.svelte';
 export * from './Elements/index.js';
+export { theme, shadcnTheme, mergeTheme, cn } from './theme.js';

package/dist/theme.d.ts

@@ -48,8 +48,8 @@ export declare const theme: {
         base: string;
     };
     img: {
-        container: string;
         base: string;
+        image: string;
         downloadButton: string;
     };
     pre: {
@@ -70,7 +70,7 @@ export declare const theme: {
     };
     table: {
         base: string;
-        container: string;
+        table: string;
     };
     thead: {
         base: string;
@@ -102,6 +102,9 @@ export declare const theme: {
     mermaid: {
         base: string;
         downloadButton: string;
+        button: string;
+        icon: string;
+        buttons: string;
     };
     math: {
         base: string;
@@ -112,18 +115,131 @@ export declare const theme: {
     em: {
         base: string;
     };
-    ins: {
+    del: {
         base: string;
     };
-    del: {
+};
+export declare const shadcnTheme: {
+    a: {
+        base: string;
+        blocked: string;
+    };
+    h1: {
+        base: string;
+    };
+    h2: {
+        base: string;
+    };
+    h3: {
+        base: string;
+    };
+    h4: {
+        base: string;
+    };
+    h5: {
         base: string;
     };
-    small: {
+    h6: {
+        base: string;
+    };
+    p: {
+        base: string;
+    };
+    ul: {
+        base: string;
+    };
+    ol: {
+        base: string;
+    };
+    li: {
+        base: string;
+    };
+    code: {
+        base: string;
+        container: string;
+        header: string;
+        button: string;
+        language: string;
+        skeleton: string;
+        pre: string;
+    };
+    inlineCode: {
+        base: string;
+    };
+    img: {
+        base: string;
+        image: string;
+        downloadButton: string;
+    };
+    pre: {
+        base: string;
+    };
+    blockquote: {
+        base: string;
+    };
+    alert: {
+        base: string;
+        title: string;
+        icon: string;
+        note: string;
+        tip: string;
+        warning: string;
+        caution: string;
+        important: string;
+    };
+    table: {
+        base: string;
+        table: string;
+    };
+    thead: {
+        base: string;
+    };
+    tbody: {
+        base: string;
+    };
+    tr: {
+        base: string;
+    };
+    th: {
+        base: string;
+    };
+    td: {
+        base: string;
+    };
+    sup: {
+        base: string;
+    };
+    sub: {
+        base: string;
+    };
+    hr: {
+        base: string;
+    };
+    strong: {
+        base: string;
+    };
+    mermaid: {
+        base: string;
+        downloadButton: string;
+        button: string;
+        icon: string;
+        buttons: string;
+    };
+    math: {
+        base: string;
+    };
+    inlineMath: {
+        base: string;
+    };
+    em: {
+        base: string;
+    };
+    del: {
         base: string;
     };
 };
 export type Theme = typeof theme;
-export declare const mergeTheme: (customTheme?: Partial<Theme>) => {
+export declare const mergeTheme: (customTheme?: Partial<Theme>, baseTheme?: "tailwind" | "shadcn") => {
     a: {
         base: string;
         blocked: string;
@@ -171,8 +287,8 @@ export declare const mergeTheme: (customTheme?: Partial<Theme>) => {
         base: string;
     };
     img: {
-        container: string;
         base: string;
+        image: string;
         downloadButton: string;
     };
     pre: {
@@ -193,7 +309,7 @@ export declare const mergeTheme: (customTheme?: Partial<Theme>) => {
     };
     table: {
         base: string;
-        container: string;
+        table: string;
     };
     thead: {
         base: string;
@@ -225,6 +341,9 @@ export declare const mergeTheme: (customTheme?: Partial<Theme>) => {
     mermaid: {
         base: string;
         downloadButton: string;
+        button: string;
+        icon: string;
+        buttons: string;
     };
     math: {
         base: string;
@@ -235,13 +354,7 @@ export declare const mergeTheme: (customTheme?: Partial<Theme>) => {
     em: {
         base: string;
     };
-    ins: {
-        base: string;
-    };
     del: {
         base: string;
     };
-    small: {
-        base: string;
-    };
 };

package/dist/theme.js

@@ -37,10 +37,10 @@ export const theme = {
         base: 'py-1'
     },
     code: {
-        base: 'bg-gray-100 rounded p-2 font-mono text-sm',
-        container: 'my-4 w-full overflow-hidden rounded-xl border border-gray-200 flex flex-col',
+        base: 'my-4 w-full overflow-hidden rounded-xl border border-gray-200 flex flex-col',
+        container: ' relative overflow-visible bg-gray-100 rounded p-2 font-mono text-sm ',
         header: 'flex items-center justify-between bg-gray-100/80 p-2 pb-0	 text-gray-600 text-xs',
-        button: 'cursor-pointer p-1 text-gray-600 transition-all hover:text-gray-900 size-6 p-1',
+        button: 'cursor-pointer size-6 p-1 text-gray-600 transition-all hover:text-gray-900 rounded hover:bg-gray-100',
         language: 'ml-1 font-mono lowercase',
         skeleton: 'rounded-md font-mono text-transparent bg-gray-200 whitespace-nowrap inline-block',
         pre: 'overflow-x-auto font-mono p-0 bg-gray-100/40'
@@ -49,8 +49,8 @@ export const theme = {
         base: 'bg-gray-100 rounded px-1.5 py-0.5 font-mono text-sm'
     },
     img: {
-        container: 'group relative my-4  mx-auto w-fit block',
-        base: 'max-w-full rounded-lg',
+        base: 'group relative my-4  mx-auto w-fit block',
+        image: 'max-w-full rounded-lg',
         downloadButton: 'absolute right-2 bottom-2 flex h-8 w-8 cursor-pointer items-center justify-center rounded-md border border-gray-200 bg-white/90 shadow-sm backdrop-blur-sm transition-all duration-200 hover:bg-white opacity-0 group-hover:opacity-100'
     },
     pre: {
@@ -70,8 +70,8 @@ export const theme = {
         important: '[&>[data-alert-title]]:text-purple-600 border-purple-600 stroke-purple-600'
     },
     table: {
-        base: 'border-gray-200 w-full border-collapse border',
-        container: 'my-4 flex flex-col space-y-2'
+        base: 'overflow-x-auto max-w-full my-4 border border-gray-200 rounded-lg',
+        table: 'w-full border-collapse min-w-full'
     },
     thead: {
         base: 'bg-gray-100/80'
@@ -83,10 +83,10 @@ export const theme = {
         base: 'border-gray-200 border-b'
     },
     th: {
-        base: 'px-4 py-2 text-left text-sm font-semibold whitespace-nowrap'
+        base: 'px-4 py-3 text-left text-sm font-semibold whitespace-nowrap min-w-[200px]'
     },
     td: {
-        base: 'px-4 py-2 text-sm'
+        base: 'px-4 py-3 text-sm min-w-[200px] max-w-[400px] break-words'
     },
     sup: {
         base: 'text-sm'
@@ -101,8 +101,11 @@ export const theme = {
         base: 'font-semibold'
     },
     mermaid: {
-        base: 'group relative my-4 h-auto rounded-xl border border-gray-200 p-4',
-        downloadButton: 'cursor-pointer p-1 text-gray-600 transition-all hover:text-gray-900'
+        base: 'group relative my-4 h-auto rounded-xl border border-gray-200 bg-white overflow-hidden items-center min-h-[500px]',
+        downloadButton: 'cursor-pointer p-1 text-gray-600 transition-all hover:text-gray-900',
+        button: 'cursor-pointer size-6 p-1 text-gray-600 transition-all hover:text-gray-900 rounded hover:bg-gray-100',
+        icon: 'size-5',
+        buttons: 'absolute right-1 top-1 z-10 flex h-fit w-fit items-center gap-1'
     },
     math: {
         base: ''
@@ -111,28 +114,142 @@ export const theme = {
         base: ''
     },
     em: {
-        base: 'font-italic'
-    },
-    ins: {
-        base: 'underline'
+        base: 'italic'
     },
     del: {
         base: 'line-through'
+    }
+};
+export const shadcnTheme = {
+    a: {
+        base: 'text-primary font-medium underline hover:text-primary/80',
+        blocked: 'text-muted-foreground'
+    },
+    h1: {
+        base: 'mt-6 mb-2 text-3xl font-semibold text-foreground'
+    },
+    h2: {
+        base: 'mt-6 mb-2 text-2xl font-semibold text-foreground'
+    },
+    h3: {
+        base: 'mt-6 mb-2 text-xl font-semibold text-foreground'
+    },
+    h4: {
+        base: 'mt-6 mb-2 text-lg font-semibold text-foreground'
+    },
+    h5: {
+        base: 'mt-6 mb-2 text-base font-semibold text-foreground'
+    },
+    h6: {
+        base: 'mt-6 mb-2 text-sm font-semibold text-foreground'
+    },
+    p: {
+        base: 'text-foreground'
+    },
+    ul: {
+        base: 'ml-4 list-outside list-disc whitespace-normal text-foreground'
+    },
+    ol: {
+        base: 'ml-4 list-outside list-decimal whitespace-normal text-foreground'
+    },
+    li: {
+        base: 'py-1'
+    },
+    code: {
+        base: 'my-4 w-full overflow-hidden rounded-lg border border-border flex flex-col',
+        container: 'relative overflow-visible bg-muted rounded p-2 font-mono text-sm',
+        header: 'flex items-center justify-between bg-muted/80 p-2 pb-0 text-muted-foreground text-xs',
+        button: 'cursor-pointer size-6 p-1 text-muted-foreground transition-all hover:text-foreground rounded hover:bg-muted',
+        language: 'ml-1 font-mono lowercase',
+        skeleton: 'rounded-md font-mono text-transparent bg-muted whitespace-nowrap inline-block',
+        pre: 'overflow-x-auto font-mono p-0 bg-muted/40'
+    },
+    inlineCode: {
+        base: 'bg-muted rounded px-1.5 py-0.5 font-mono text-sm text-foreground'
+    },
+    img: {
+        base: 'group relative my-4 mx-auto w-fit block',
+        image: 'max-w-full rounded-lg',
+        downloadButton: 'absolute right-2 bottom-2 flex h-8 w-8 cursor-pointer items-center justify-center rounded-md border border-border bg-background/90 shadow-sm backdrop-blur-sm transition-all duration-200 hover:bg-background opacity-0 group-hover:opacity-100'
+    },
+    pre: {
+        base: 'overflow-x-auto font-mono text-xs p-4 bg-muted/40'
+    },
+    blockquote: {
+        base: 'border-muted-foreground/30 text-muted-foreground my-4 border-l-4 pl-4 italic'
+    },
+    alert: {
+        base: 'relative my-4 border-l-4 p-4 bg-card',
+        title: 'text-sm font-semibold flex items-center gap-2 mb-2 capitalize',
+        icon: 'size-5',
+        note: '[&>[data-alert-title]]:text-blue-600 border-blue-600 stroke-blue-600',
+        tip: '[&>[data-alert-title]]:text-green-600 border-green-600 stroke-green-600',
+        warning: '[&>[data-alert-title]]:text-yellow-600 border-yellow-600 stroke-yellow-600',
+        caution: '[&>[data-alert-title]]:text-destructive border-destructive stroke-destructive',
+        important: '[&>[data-alert-title]]:text-purple-600 border-purple-600 stroke-purple-600'
+    },
+    table: {
+        base: 'overflow-x-auto max-w-full my-4 rounded-lg border border-border',
+        table: 'w-full border-collapse min-w-full'
+    },
+    thead: {
+        base: 'bg-muted/50'
+    },
+    tbody: {
+        base: 'divide-border bg-card divide-y'
+    },
+    tr: {
+        base: 'border-border border-b hover:bg-muted/50 transition-colors'
+    },
+    th: {
+        base: 'px-4 py-3 text-left text-sm font-semibold whitespace-nowrap text-foreground min-w-[200px]'
+    },
+    td: {
+        base: 'px-4 py-3 text-sm text-foreground min-w-[200px] max-w-[400px] break-words'
     },
-    small: {
+    sup: {
         base: 'text-sm'
+    },
+    sub: {
+        base: 'text-sm'
+    },
+    hr: {
+        base: 'border-border my-6'
+    },
+    strong: {
+        base: 'font-semibold text-foreground'
+    },
+    mermaid: {
+        base: 'group relative my-4 h-auto rounded-lg border border-border bg-card overflow-hidden items-center min-h-[500px]',
+        downloadButton: 'cursor-pointer p-1 text-muted-foreground transition-all hover:text-foreground',
+        button: 'cursor-pointer size-6 p-1 text-muted-foreground transition-all hover:text-foreground rounded hover:bg-muted',
+        icon: 'size-5',
+        buttons: 'absolute right-1 top-1 z-10 flex h-fit w-fit items-center gap-1'
+    },
+    math: {
+        base: 'text-foreground'
+    },
+    inlineMath: {
+        base: 'text-foreground'
+    },
+    em: {
+        base: 'italic text-foreground'
+    },
+    del: {
+        base: 'line-through text-muted-foreground'
     }
 };
-export const mergeTheme = (customTheme) => {
+export const mergeTheme = (customTheme, baseTheme) => {
+    const base = baseTheme === 'shadcn' ? shadcnTheme : theme;
     if (!customTheme)
-        return theme;
-    const baseTheme = { ...theme };
+        return base;
+    const mergedTheme = { ...base };
     for (const key in customTheme) {
         for (const subKey in customTheme[key]) {
-            Object.assign(baseTheme[key], {
-                [subKey]: cn(baseTheme[key], customTheme[key])
+            Object.assign(mergedTheme[key], {
+                [subKey]: cn(mergedTheme[key], customTheme[key])
             });
         }
     }
-    return baseTheme;
+    return mergedTheme;
 };

package/dist/utils/panzoom.svelte.d.ts

@@ -0,0 +1,36 @@
+export interface PanzoomOptions {
+    minZoom?: number;
+    maxZoom?: number;
+    zoomSpeed?: number;
+    doubleClickScale?: number;
+    initialScale?: number;
+    initialX?: number;
+    initialY?: number;
+    activateMouseWheel?: boolean;
+}
+export interface PanzoomInstance {
+    attach: (node: HTMLElement | SVGSVGElement) => () => void;
+    zoomToFit: (padding?: number) => void;
+    zoomBy: (factor: number) => void;
+    zoomIn: (factor?: number) => void;
+    zoomOut: (factor?: number) => void;
+    moveBy: (dx: number, dy: number) => void;
+    setTransform: (x: number, y: number, scale: number) => void;
+    expand: () => void;
+    collapse: () => void;
+    toggleExpand: (options?: ExpandOptions | number) => Promise<void>;
+    readonly expanded: boolean;
+    readonly transform: Readonly<{
+        x: number;
+        y: number;
+        scale: number;
+    }>;
+}
+export interface ExpandOptions {
+    padding?: number;
+    duration?: number;
+    easing?: string;
+    zIndex?: number;
+    fitRatio?: number;
+}
+export declare const usePanzoom: (opts?: PanzoomOptions) => PanzoomInstance;