svelte-streamdown 2.2.6 → 2.3.0

package/dist/marked/marked-table.js

@@ -114,8 +114,11 @@ const processSpans = (cells, count, prevRow = [], maxColspan = null) => {
     for (i = 0; i < processedCells.length; i++) {
         const cell = processedCells[i];
         let cellText = cell.text;
-        // Handle Rowspan - cells ending with ^
-        if (cellText.slice(-1) === '^' && prevRow.length > 0) {
+        // Handle Rowspan - cells ending with ^ (but not superscript ^text^)
+        // Check if it's a rowspan indicator (single ^ at end) vs superscript (^text^)
+        const isRowspanIndicator = cellText.slice(-1) === '^' &&
+            !cellText.match(/\^[^^\n\r]+\^$/); // Not a superscript pattern ^text^
+        if (isRowspanIndicator && prevRow.length > 0) {
             // Clean the ^ indicator from the cell text
             cell.text = cellText.slice(0, -1).trim();
             cellText = cell.text;
@@ -179,7 +182,10 @@ const processSpans = (cells, count, prevRow = [], maxColspan = null) => {
             }
             // If no target was found but it's a rowspan cell, clean the ^ indicator
             if (!targetFound && cell.rowspan > 0) {
-                cell.text = cell.text.slice(0, -1);
+                // Only clean if it was actually a rowspan indicator, not superscript
+                if (isRowspanIndicator) {
+                    cell.text = cell.text.slice(0, -1);
+                }
             }
         }
     }
@@ -485,7 +491,8 @@ export function markedTable(options = {}) {
                     const item = {
                         type: 'table',
                         tokens,
-                        raw: cap[0]
+                        raw: cap[0],
+                        align: alignment
                     };
                     return item;
                 }

package/dist/theme.d.ts

@@ -40,6 +40,7 @@ export declare const theme: {
         base: string;
         container: string;
         header: string;
+        buttons: string;
         button: string;
         language: string;
         skeleton: string;
@@ -168,6 +169,7 @@ export declare const shadcnTheme: {
         base: string;
         container: string;
         header: string;
+        buttons: string;
         button: string;
         language: string;
         skeleton: string;
@@ -257,7 +259,11 @@ export declare const shadcnTheme: {
     };
 };
 export type Theme = typeof theme;
-export declare const mergeTheme: (customTheme?: Partial<Theme>, baseTheme?: "tailwind" | "shadcn") => {
+type DeepPartial<T> = {
+    [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
+};
+export type DeepPartialTheme = DeepPartial<Theme>;
+export declare const mergeTheme: (customTheme?: DeepPartialTheme, baseTheme?: "tailwind" | "shadcn") => {
     link: {
         base: string;
         blocked: string;
@@ -297,6 +303,7 @@ export declare const mergeTheme: (customTheme?: Partial<Theme>, baseTheme?: "tai
         base: string;
         container: string;
         header: string;
+        buttons: string;
         button: string;
         language: string;
         skeleton: string;
@@ -385,3 +392,4 @@ export declare const mergeTheme: (customTheme?: Partial<Theme>, baseTheme?: "tai
         base: string;
     };
 };
+export {};

package/dist/theme.js

@@ -41,6 +41,7 @@ export const theme = {
         base: 'my-4 w-full overflow-hidden rounded-xl border border-gray-200 flex flex-col',
         container: ' relative overflow-visible bg-gray-100 p-2 font-mono text-sm ',
         header: 'flex items-center justify-between bg-gray-100/80 p-2	 text-gray-600 text-xs',
+        buttons: 'flex items-center gap-2',
         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: 'block rounded-md font-mono text-transparent bg-gray-200 scale-y-90 animate-pulse whitespace-nowrap',
@@ -169,6 +170,7 @@ export const shadcnTheme = {
         base: 'my-4 w-full overflow-hidden rounded-lg border border-border flex flex-col',
         container: 'relative overflow-visible bg-muted p-2 font-mono text-sm',
         header: 'flex items-center justify-between bg-muted/80 px-2 py-1 text-muted-foreground text-xs',
+        buttons: 'flex items-center gap-2',
         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: 'block rounded-md font-mono text-transparent bg-border/80 scale-y-90 w-fit animate-pulse whitespace-nowrap',

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

@@ -1,29 +1,31 @@
-import { type BundledLanguage, type BundledTheme, type ThemedToken } from 'shiki';
-import { SvelteSet } from 'svelte/reactivity';
+import { type BundledLanguage, type BundledTheme, type HighlighterGeneric, type ThemedToken } from 'shiki';
+import { SvelteMap, SvelteSet } from 'svelte/reactivity';
 export declare const loadShiki: () => Promise<[any, import("shiki").CreateHighlighterFactory<BundledLanguage, BundledTheme>]>;
+export type Highlighter = HighlighterGeneric<BundledLanguage, BundledTheme>;
 declare class HighlighterManager {
-    initialized: boolean;
-    private highlighters;
-    private createHighlighter;
-    private engine;
-    preloadedThemes: BundledTheme[];
-    loadedLanguages: SvelteSet<BundledLanguage>;
-    loadedThemes: SvelteSet<BundledTheme>;
+    loadedLanguages: SvelteMap<BundledLanguage, boolean | Promise<void>>;
+    loadedThemes: SvelteMap<BundledTheme, boolean | Promise<void>>;
+    preloadedThemes: SvelteSet<BundledTheme>;
+    highlighter: Highlighter | Promise<Highlighter> | null;
     constructor(preloadedThemes: BundledTheme[]);
-    isReady(theme: BundledTheme, language: BundledLanguage): boolean;
+    private loadHighlighter;
+    private loadTheme;
+    private loadLanguage;
+    private isLanguageSupported;
+    isReady(theme: BundledTheme, language?: string | undefined): boolean;
     /**
      * Preloads themes by creating minimal highlighter instances.
      * This reduces flickering when switching themes.
      */
-    preloadThemes(themes: BundledTheme[], language: BundledLanguage): Promise<void>;
+    preloadThemes(highlighter: Highlighter): Promise<void>;
     /**
      * Ensures the highlighter is ready for the given theme and language.
      */
-    load(theme: BundledTheme, language: BundledLanguage): Promise<void>;
+    load(theme: BundledTheme, language?: string | undefined): Promise<void>;
     /**
      * Highlights code synchronously. Must call isReady() first.
      */
-    highlightCode(code: string, language: BundledLanguage, theme: BundledTheme): ThemedToken[][];
+    highlightCode(code: string, language: string | undefined, theme: BundledTheme): ThemedToken[][];
     static create(preloadedThemes: BundledTheme[]): HighlighterManager;
 }
 export { HighlighterManager };

package/dist/utils/hightlighter.svelte.js

@@ -1,9 +1,5 @@
 import { bundledLanguages } from 'shiki';
-import { untrack } from 'svelte';
 import { SvelteMap, SvelteSet } from 'svelte/reactivity';
-const isLanguageSupported = (language) => {
-    return Object.hasOwn(bundledLanguages, language);
-};
 export const loadShiki = async () => {
     return Promise.all([
         import('shiki/engine/javascript').then((mod) => mod.createJavaScriptRegexEngine({ forgiving: true })),
@@ -11,87 +7,135 @@ export const loadShiki = async () => {
     ]);
 };
 class HighlighterManager {
-    initialized = $state(false);
-    highlighters = new SvelteMap();
-    createHighlighter = null;
-    engine = null;
-    preloadedThemes;
-    loadedLanguages = new SvelteSet();
-    loadedThemes = new SvelteSet();
+    loadedLanguages = new SvelteMap();
+    loadedThemes = new SvelteMap();
+    preloadedThemes = new SvelteSet();
+    highlighter = $state(null);
     constructor(preloadedThemes) {
-        this.preloadedThemes = preloadedThemes;
+        preloadedThemes.forEach((theme) => this.preloadedThemes.add(theme));
         if (typeof window !== 'undefined') {
             Object.assign(window, {
                 STREAMDOWN_HIGHLIGHTER: this
             });
         }
     }
-    isReady(theme, language) {
-        return this.highlighters.has(`${theme}:${language}`);
+    async loadHighlighter() {
+        if (this.highlighter instanceof Promise) {
+            return this.highlighter;
+        }
+        else {
+            this.highlighter = new Promise((resolve, reject) => {
+                loadShiki().then(([engine, createHighlighter]) => {
+                    return createHighlighter({
+                        themes: [],
+                        langs: [],
+                        engine
+                    }).then((highlighter) => {
+                        this.highlighter = highlighter;
+                        resolve(highlighter);
+                    });
+                });
+            });
+            return this.highlighter;
+        }
+    }
+    async loadTheme(theme, highlighter) {
+        const themeLoader = this.loadedThemes.get(theme);
+        if (themeLoader instanceof Promise) {
+            await themeLoader;
+        }
+        else {
+            const themeLoaderPromise = highlighter.loadTheme(theme).then(() => {
+                this.loadedThemes.set(theme, true);
+            });
+            this.loadedThemes.set(theme, themeLoaderPromise);
+            await themeLoaderPromise;
+        }
+    }
+    async loadLanguage(language, highlighter) {
+        const languageLoader = this.loadedLanguages.get(language);
+        if (languageLoader instanceof Promise) {
+            await languageLoader;
+        }
+        else {
+            const languageLoaderPromise = highlighter.loadLanguage(language).then(() => {
+                this.loadedLanguages.set(language, true);
+            });
+            this.loadedLanguages.set(language, languageLoaderPromise);
+            await languageLoaderPromise;
+        }
+    }
+    isLanguageSupported = (language) => {
+        return Object.hasOwn(bundledLanguages, language);
+    };
+    isReady(theme, language = 'bash') {
+        return (!(this.highlighter instanceof Promise) &&
+            this.loadedLanguages.get(this.isLanguageSupported(language) ? language : 'bash') === true &&
+            this.loadedThemes.get(theme) === true);
     }
     /**
      * Preloads themes by creating minimal highlighter instances.
      * This reduces flickering when switching themes.
      */
-    async preloadThemes(themes, language) {
-        if (!themes.length) {
-            return;
-        }
-        await Promise.all(themes
-            .filter((theme) => !this.highlighters.has(`${theme}:${language}`))
-            .map(async (theme) => {
-            if (!this.createHighlighter || !this.engine) {
+    async preloadThemes(highlighter) {
+        for (const theme of this.preloadedThemes) {
+            const themeLoader = this.loadedThemes.get(theme);
+            if (themeLoader === true) {
                 return;
             }
-            const highlighter = await this.createHighlighter?.({
-                themes: [theme],
-                langs: isLanguageSupported(language) ? [language] : ['text'],
-                engine: this.engine
-            });
-            this.highlighters.set(`${theme}:${language}`, highlighter);
-        }));
+            else if (themeLoader instanceof Promise) {
+                await themeLoader;
+            }
+            else {
+                await this.loadTheme(theme, highlighter);
+            }
+        }
     }
     /**
      * Ensures the highlighter is ready for the given theme and language.
      */
-    async load(theme, language) {
-        return untrack(async () => {
-            if (!this.createHighlighter || !this.engine) {
-                const [engine, createHighlighter] = await loadShiki();
-                this.createHighlighter = createHighlighter;
-                this.engine = engine;
-            }
-            if (!this.highlighters.has(`${theme}:${language}`)) {
-                const highlighter = await this.createHighlighter({
-                    themes: [theme],
-                    langs: isLanguageSupported(language) ? [language] : ['text'],
-                    engine: this.engine
-                });
-                this.highlighters.set(`${theme}:${language}`, highlighter);
-            }
-            void this.preloadThemes(this.preloadedThemes || [], language);
-        });
+    async load(theme, language = 'bash') {
+        const themeLoader = this.loadedThemes.get(theme);
+        const languageLoader = this.loadedLanguages.get(this.isLanguageSupported(language) ? language : 'bash');
+        if (this.highlighter !== null &&
+            !(this.highlighter instanceof Promise) &&
+            themeLoader === true &&
+            languageLoader === true) {
+            // already loaded
+            return;
+        }
+        const highlighter = await this.loadHighlighter();
+        await Promise.all([
+            this.loadTheme(theme, highlighter),
+            this.loadLanguage(this.isLanguageSupported(language) ? language : 'bash', highlighter)
+        ]);
+        await this.preloadThemes(highlighter);
     }
     /**
      * Highlights code synchronously. Must call isReady() first.
      */
-    highlightCode(code, language, theme) {
-        const highlighter = this.highlighters.get(`${theme}:${language}`);
-        if (!highlighter) {
+    highlightCode(code, language = 'bash', theme) {
+        try {
+            // const highlighter = this.highlighters.get(`${theme}:${language}`);
+            const highlighter = this.highlighter;
+            if (!highlighter || highlighter instanceof Promise) {
+                return [];
+            }
+            const tokens = highlighter.codeToTokensBase(code, {
+                lang: this.isLanguageSupported(language) ? language : 'bash',
+                theme
+            });
+            return tokens;
+        }
+        catch (error) {
             return [];
         }
-        const tokens = highlighter.codeToTokensBase(code, {
-            lang: isLanguageSupported(language) ? language : 'text',
-            theme: theme
-        });
-        return tokens;
     }
     static create(preloadedThemes) {
         if (typeof window !== 'undefined' && 'STREAMDOWN_HIGHLIGHTER' in window) {
             const previousHighlighter = window.STREAMDOWN_HIGHLIGHTER;
-            previousHighlighter.preloadedThemes = Array.from(new Set([...previousHighlighter.preloadedThemes, ...preloadedThemes]));
-            // @ts-ignore
-            return window.STREAMDOWN_HIGHLIGHTER;
+            preloadedThemes.forEach((theme) => previousHighlighter.preloadedThemes.add(theme));
+            return previousHighlighter;
         }
         return new HighlighterManager(preloadedThemes);
     }