svelte-streamdown 1.0.7 → 1.0.9

package/dist/theme.d.ts

@@ -1,7 +1,7 @@
 import { type ClassValue } from 'clsx';
 export declare const cn: (...inputs: ClassValue[]) => string;
 export declare const theme: {
-    a: {
+    link: {
         base: string;
         blocked: string;
     };
@@ -34,6 +34,7 @@ export declare const theme: {
     };
     li: {
         base: string;
+        checkbox: string;
     };
     code: {
         base: string;
@@ -44,17 +45,14 @@ export declare const theme: {
         skeleton: string;
         pre: string;
     };
-    inlineCode: {
+    codespan: {
         base: string;
     };
-    img: {
+    image: {
         base: string;
         image: string;
         downloadButton: string;
     };
-    pre: {
-        base: string;
-    };
     blockquote: {
         base: string;
     };
@@ -72,21 +70,18 @@ export declare const theme: {
         base: string;
         table: string;
     };
-    thead: {
+    tableRow: {
         base: string;
     };
-    tbody: {
+    tableHead: {
         base: string;
     };
-    tr: {
+    td: {
         base: string;
     };
     th: {
         base: string;
     };
-    td: {
-        base: string;
-    };
     sup: {
         base: string;
     };
@@ -107,9 +102,10 @@ export declare const theme: {
         buttons: string;
     };
     math: {
-        base: string;
+        block: string;
+        inline: string;
     };
-    inlineMath: {
+    br: {
         base: string;
     };
     em: {
@@ -118,9 +114,15 @@ export declare const theme: {
     del: {
         base: string;
     };
+    footnoteRef: {
+        base: string;
+    };
+    footnotePopover: {
+        base: string;
+    };
 };
 export declare const shadcnTheme: {
-    a: {
+    link: {
         base: string;
         blocked: string;
     };
@@ -153,6 +155,7 @@ export declare const shadcnTheme: {
     };
     li: {
         base: string;
+        checkbox: string;
     };
     code: {
         base: string;
@@ -163,17 +166,14 @@ export declare const shadcnTheme: {
         skeleton: string;
         pre: string;
     };
-    inlineCode: {
+    codespan: {
         base: string;
     };
-    img: {
+    image: {
         base: string;
         image: string;
         downloadButton: string;
     };
-    pre: {
-        base: string;
-    };
     blockquote: {
         base: string;
     };
@@ -191,21 +191,18 @@ export declare const shadcnTheme: {
         base: string;
         table: string;
     };
-    thead: {
+    tableRow: {
         base: string;
     };
-    tbody: {
+    tableHead: {
         base: string;
     };
-    tr: {
+    td: {
         base: string;
     };
     th: {
         base: string;
     };
-    td: {
-        base: string;
-    };
     sup: {
         base: string;
     };
@@ -226,9 +223,10 @@ export declare const shadcnTheme: {
         buttons: string;
     };
     math: {
-        base: string;
+        block: string;
+        inline: string;
     };
-    inlineMath: {
+    br: {
         base: string;
     };
     em: {
@@ -237,10 +235,16 @@ export declare const shadcnTheme: {
     del: {
         base: string;
     };
+    footnoteRef: {
+        base: string;
+    };
+    footnotePopover: {
+        base: string;
+    };
 };
 export type Theme = typeof theme;
 export declare const mergeTheme: (customTheme?: Partial<Theme>, baseTheme?: "tailwind" | "shadcn") => {
-    a: {
+    link: {
         base: string;
         blocked: string;
     };
@@ -273,6 +277,7 @@ export declare const mergeTheme: (customTheme?: Partial<Theme>, baseTheme?: "tai
     };
     li: {
         base: string;
+        checkbox: string;
     };
     code: {
         base: string;
@@ -283,17 +288,14 @@ export declare const mergeTheme: (customTheme?: Partial<Theme>, baseTheme?: "tai
         skeleton: string;
         pre: string;
     };
-    inlineCode: {
+    codespan: {
         base: string;
     };
-    img: {
+    image: {
         base: string;
         image: string;
         downloadButton: string;
     };
-    pre: {
-        base: string;
-    };
     blockquote: {
         base: string;
     };
@@ -311,21 +313,18 @@ export declare const mergeTheme: (customTheme?: Partial<Theme>, baseTheme?: "tai
         base: string;
         table: string;
     };
-    thead: {
+    tableRow: {
         base: string;
     };
-    tbody: {
+    tableHead: {
         base: string;
     };
-    tr: {
+    td: {
         base: string;
     };
     th: {
         base: string;
     };
-    td: {
-        base: string;
-    };
     sup: {
         base: string;
     };
@@ -346,9 +345,10 @@ export declare const mergeTheme: (customTheme?: Partial<Theme>, baseTheme?: "tai
         buttons: string;
     };
     math: {
-        base: string;
+        block: string;
+        inline: string;
     };
-    inlineMath: {
+    br: {
         base: string;
     };
     em: {
@@ -357,4 +357,10 @@ export declare const mergeTheme: (customTheme?: Partial<Theme>, baseTheme?: "tai
     del: {
         base: string;
     };
+    footnoteRef: {
+        base: string;
+    };
+    footnotePopover: {
+        base: string;
+    };
 };

package/dist/theme.js

@@ -2,7 +2,7 @@ import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 export const cn = (...inputs) => twMerge(clsx(inputs));
 export const theme = {
-    a: {
+    link: {
         base: 'text-blue-600 font-medium underline',
         blocked: 'text-gray-500'
     },
@@ -28,13 +28,14 @@ export const theme = {
         base: ''
     },
     ul: {
-        base: 'ml-4 list-outside list-disc whitespace-normal'
+        base: 'ml-4 list-inside list-disc whitespace-normal'
     },
     ol: {
-        base: 'ml-4 list-outside list-decimal whitespace-normal'
+        base: 'ml-4 list-inside whitespace-normal'
     },
     li: {
-        base: 'py-1'
+        base: 'py-1 marker:hidden',
+        checkbox: '-ml-2'
     },
     code: {
         base: 'my-4 w-full overflow-hidden rounded-xl border border-gray-200 flex flex-col',
@@ -45,17 +46,14 @@ export const theme = {
         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'
     },
-    inlineCode: {
-        base: 'bg-gray-100 rounded px-1.5 py-0.5 font-mono'
+    codespan: {
+        base: 'bg-gray-100 rounded px-1.5 py-0.5 font-mono text-[0.9em]'
     },
-    img: {
+    image: {
         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: {
-        base: 'overflow-x-auto font-mono text-xs p-4 bg-gray-100/40'
-    },
     blockquote: {
         base: 'border-gray-600/30 text-gray-600 my-4 border-l-4 pl-4 italic'
     },
@@ -73,21 +71,18 @@ export const theme = {
         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'
-    },
-    tbody: {
-        base: 'divide-gray-200 bg-gray-100/40 divide-y'
-    },
-    tr: {
+    tableRow: {
         base: 'border-gray-200 border-b hover:bg-gray-100/50 transition-colors'
     },
-    th: {
-        base: 'px-4 py-3 text-left text-sm font-semibold whitespace-nowrap min-w-[200px]'
+    tableHead: {
+        base: 'bg-gray-200/80'
     },
     td: {
         base: 'px-4 py-3 text-sm min-w-[200px] max-w-[400px] break-words'
     },
+    th: {
+        base: 'text-left px-4 py-3 text-sm text-foreground min-w-[200px] max-w-[400px] break-words'
+    },
     sup: {
         base: 'text-sm'
     },
@@ -108,9 +103,10 @@ export const theme = {
         buttons: 'absolute right-1 top-1 z-10 flex h-fit w-fit items-center gap-1'
     },
     math: {
-        base: ''
+        block: '',
+        inline: ''
     },
-    inlineMath: {
+    br: {
         base: ''
     },
     em: {
@@ -118,10 +114,16 @@ export const theme = {
     },
     del: {
         base: 'line-through'
+    },
+    footnoteRef: {
+        base: 'text-gray-600 px-1 py-0.5 rounded-md bg-gray-100/80'
+    },
+    footnotePopover: {
+        base: 'fixed z-50 max-h-[30vh] max-w-3xl overflow-y-auto rounded-lg bg-background p-4 shadow'
     }
 };
 export const shadcnTheme = {
-    a: {
+    link: {
         base: 'text-primary font-medium underline hover:text-primary/80',
         blocked: 'text-muted-foreground'
     },
@@ -147,13 +149,14 @@ export const shadcnTheme = {
         base: 'text-foreground'
     },
     ul: {
-        base: 'ml-4 list-outside list-disc whitespace-normal text-foreground'
+        base: 'ml-4 list-inside list-disc whitespace-normal text-foreground'
     },
     ol: {
-        base: 'ml-4 list-outside list-decimal whitespace-normal text-foreground'
+        base: 'ml-4 list-inside whitespace-normal text-foreground'
     },
     li: {
-        base: 'py-1'
+        base: 'py-1',
+        checkbox: '-ml-2'
     },
     code: {
         base: 'my-4 w-full overflow-hidden rounded-lg border border-border flex flex-col',
@@ -164,17 +167,14 @@ export const shadcnTheme = {
         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-foreground'
+    codespan: {
+        base: 'bg-muted rounded px-1.5 py-0.5 font-mono text-foreground text-[0.9em]'
     },
-    img: {
+    image: {
         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'
     },
@@ -192,21 +192,18 @@ export const shadcnTheme = {
         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: {
+    tableRow: {
         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]'
+    tableHead: {
+        base: 'bg-muted/80'
     },
     td: {
         base: 'px-4 py-3 text-sm text-foreground min-w-[200px] max-w-[400px] break-words'
     },
+    th: {
+        base: 'text-left px-4 py-3 text-sm text-foreground min-w-[200px] max-w-[400px] break-words'
+    },
     sup: {
         base: 'text-sm'
     },
@@ -227,16 +224,23 @@ export const shadcnTheme = {
         buttons: 'absolute right-1 top-1 z-10 flex h-fit w-fit items-center gap-1'
     },
     math: {
-        base: 'text-foreground'
+        block: 'text-foreground',
+        inline: 'text-foreground'
     },
-    inlineMath: {
-        base: 'text-foreground'
+    br: {
+        base: ''
     },
     em: {
         base: 'italic text-foreground'
     },
     del: {
         base: 'line-through text-muted-foreground'
+    },
+    footnoteRef: {
+        base: 'text-muted-foreground px-1 text-sm inline-block rounded-full bg-muted/80 aspect-square border border-border'
+    },
+    footnotePopover: {
+        base: 'fixed z-50 max-h-[30vh] shadow max-w-3xl overflow-y-auto rounded-lg bg-background p-4'
     }
 };
 export const mergeTheme = (customTheme, baseTheme) => {

package/dist/utils/parse-incomplete-markdown.js

@@ -6,6 +6,8 @@ const singleAsteriskPattern = /(\*)([^*]*?)$/;
 const singleUnderscorePattern = /(_)([^_]*?)$/;
 const inlineCodePattern = /(`)([^`]*?)$/;
 const strikethroughPattern = /(~~)([^~]*?)$/;
+const subPattern = /(~)([^~]*?)$/;
+const supPattern = /(\^)([^\^]*?)$/;
 // Helper function to check if we have a complete code block
 const hasCompleteCodeBlock = (text) => {
     const tripleBackticks = (text.match(/```/g) || []).length;
@@ -196,6 +198,38 @@ const isWithinMathBlock = (text, position) => {
     }
     return inInlineMath || inBlockMath;
 };
+// Check if a position is within a footnote reference pattern [^label]
+const isWithinFootnoteRef = (text, position) => {
+    // Look backwards from position to find if we're inside [^...]
+    let openBracketPos = -1;
+    let caretPos = -1;
+    for (let i = position; i >= 0; i--) {
+        if (text[i] === ']') {
+            // Found closing bracket before our position, not in footnote
+            return false;
+        }
+        if (text[i] === '^' && caretPos === -1) {
+            caretPos = i;
+        }
+        if (text[i] === '[') {
+            openBracketPos = i;
+            break;
+        }
+    }
+    // Check if we have the pattern [^ and our position is after the caret
+    if (openBracketPos !== -1 && caretPos === openBracketPos + 1 && position >= caretPos) {
+        // Look forward to see if there's a closing bracket
+        for (let i = position + 1; i < text.length; i++) {
+            if (text[i] === ']') {
+                return true; // We're inside [^...] pattern
+            }
+            if (text[i] === '[' || text[i] === '\n') {
+                break; // Invalid pattern
+            }
+        }
+    }
+    return false;
+};
 // Counts single underscores that are not part of double underscores, not escaped, and not in math blocks
 const countSingleUnderscores = (text) => {
     return text.split('').reduce((acc, char, index) => {
@@ -335,6 +369,127 @@ const handleIncompleteStrikethrough = (text) => {
     }
     return text;
 };
+// Counts single tildes that are not part of double tildes and not escaped
+const countSingleTildes = (text) => {
+    return text.split('').reduce((acc, char, index) => {
+        if (char === '~') {
+            const prevChar = text[index - 1];
+            const nextChar = text[index + 1];
+            // Skip if escaped with backslash
+            if (prevChar === '\\') {
+                return acc;
+            }
+            if (prevChar !== '~' && nextChar !== '~') {
+                return acc + 1;
+            }
+        }
+        return acc;
+    }, 0);
+};
+// Completes incomplete subscript formatting (~)
+const handleIncompleteSub = (text) => {
+    // Don't process if inside a complete code block
+    if (hasCompleteCodeBlock(text)) {
+        return text;
+    }
+    const singleTildes = countSingleTildes(text);
+    if (singleTildes % 2 === 1) {
+        // Find the last unmatched tilde and add content until we find a good place to close
+        const lastTildeIndex = text.lastIndexOf('~');
+        if (lastTildeIndex !== -1) {
+            // Check if the tilde is within a math block - if so, don't process
+            if (isWithinMathBlock(text, lastTildeIndex)) {
+                return text;
+            }
+            const afterTilde = text.substring(lastTildeIndex + 1);
+            // Don't close if there's no meaningful content after the opening marker
+            if (!afterTilde || /^[\s_~*`^]*$/.test(afterTilde)) {
+                return text;
+            }
+            // Find the end of the subscript content
+            // For typical sub/sup patterns, look for single numbers, letters, or simple expressions
+            const endMatch = afterTilde.match(/^([0-9]+|[a-zA-Z]|[a-zA-Z0-9]{1,3})(?=\s|[^a-zA-Z0-9]|$)/);
+            if (endMatch) {
+                const contentLength = endMatch[1].length;
+                const insertPosition = lastTildeIndex + 1 + contentLength;
+                return text.substring(0, insertPosition) + '~' + text.substring(insertPosition);
+            }
+            else {
+                // Fallback: if no clear boundary, treat everything until space as content
+                const spaceMatch = afterTilde.match(/^([^\s]+)/);
+                if (spaceMatch) {
+                    const contentLength = spaceMatch[1].length;
+                    const insertPosition = lastTildeIndex + 1 + contentLength;
+                    return text.substring(0, insertPosition) + '~' + text.substring(insertPosition);
+                }
+            }
+        }
+    }
+    return text;
+};
+// Counts single carets that are not escaped and not in footnote references
+const countSingleCarets = (text) => {
+    return text.split('').reduce((acc, char, index) => {
+        if (char === '^') {
+            const prevChar = text[index - 1];
+            // Skip if escaped with backslash
+            if (prevChar === '\\') {
+                return acc;
+            }
+            // Skip if within footnote reference
+            if (isWithinFootnoteRef(text, index)) {
+                return acc;
+            }
+            return acc + 1;
+        }
+        return acc;
+    }, 0);
+};
+// Completes incomplete superscript formatting (^)
+const handleIncompleteSup = (text) => {
+    // Don't process if inside a complete code block
+    if (hasCompleteCodeBlock(text)) {
+        return text;
+    }
+    const singleCarets = countSingleCarets(text);
+    if (singleCarets % 2 === 1) {
+        // Find the last unmatched caret and add content until we find a good place to close
+        const lastCaretIndex = text.lastIndexOf('^');
+        if (lastCaretIndex !== -1) {
+            // Check if the caret is within a math block - if so, don't process
+            if (isWithinMathBlock(text, lastCaretIndex)) {
+                return text;
+            }
+            // Check if the caret is within a footnote reference - if so, don't process
+            if (isWithinFootnoteRef(text, lastCaretIndex)) {
+                return text;
+            }
+            const afterCaret = text.substring(lastCaretIndex + 1);
+            // Don't close if there's no meaningful content after the opening marker
+            if (!afterCaret || /^[\s_~*`^]*$/.test(afterCaret)) {
+                return text;
+            }
+            // Find the end of the superscript content
+            // For typical sub/sup patterns, look for single numbers, letters, or simple expressions
+            const endMatch = afterCaret.match(/^([0-9]+|[a-zA-Z]|[a-zA-Z0-9]{1,3})(?=\s|[^a-zA-Z0-9]|$)/);
+            if (endMatch) {
+                const contentLength = endMatch[1].length;
+                const insertPosition = lastCaretIndex + 1 + contentLength;
+                return text.substring(0, insertPosition) + '^' + text.substring(insertPosition);
+            }
+            else {
+                // Fallback: if no clear boundary, treat everything until space as content
+                const spaceMatch = afterCaret.match(/^([^\s]+)/);
+                if (spaceMatch) {
+                    const contentLength = spaceMatch[1].length;
+                    const insertPosition = lastCaretIndex + 1 + contentLength;
+                    return text.substring(0, insertPosition) + '^' + text.substring(insertPosition);
+                }
+            }
+        }
+    }
+    return text;
+};
 // Counts single dollar signs that are not part of double dollar signs and not escaped
 const _countSingleDollarSigns = (text) => {
     return text.split('').reduce((acc, char, index) => {
@@ -435,6 +590,8 @@ export const parseIncompleteMarkdown = (text) => {
     result = handleIncompleteSingleUnderscoreItalic(result);
     result = handleIncompleteInlineCode(result);
     result = handleIncompleteStrikethrough(result);
+    result = handleIncompleteSub(result);
+    result = handleIncompleteSup(result);
     // Handle KaTeX formatting (only block math with $$)
     result = handleIncompleteBlockKatex(result);
     // Note: We don't handle inline KaTeX with single $ as they're likely currency symbols

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

@@ -0,0 +1,8 @@
+type ClickOutsideHandlerOptions = {
+    isActive: boolean;
+    callback: () => void;
+};
+export declare const useClickOutside: (props: ClickOutsideHandlerOptions) => {
+    readonly attachment: ((node: HTMLElement) => () => void) | null;
+};
+export {};

package/dist/utils/useClickOutside.svelte.js

@@ -0,0 +1,42 @@
+import { SvelteSet } from 'svelte/reactivity';
+import { on } from 'svelte/events';
+export const useClickOutside = (props) => {
+    const refs = new SvelteSet();
+    let listener = null;
+    const onClickOutside = (e) => {
+        let inRef = false;
+        if (props.isActive) {
+            const path = e.composedPath();
+            path.forEach((node) => {
+                refs.forEach((ref) => {
+                    if (ref instanceof Node && node instanceof Node && ref?.isSameNode(node)) {
+                        inRef = true;
+                    }
+                });
+            });
+            if (!inRef) {
+                props.callback();
+            }
+        }
+    };
+    return {
+        get attachment() {
+            return props.isActive
+                ? (node) => {
+                    refs.add(node);
+                    if (!listener) {
+                        listener = on(node.ownerDocument, 'pointerdown', onClickOutside);
+                    }
+                    return () => {
+                        refs.delete(node);
+                        if (listener && refs.size === 0) {
+                            listener();
+                            listener = null;
+                            console.log('clean up', listener);
+                        }
+                    };
+                }
+                : null;
+        }
+    };
+};

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

@@ -0,0 +1,5 @@
+export declare const useKeyDown: (opts: {
+    isActive: boolean;
+    callback: () => void;
+    keys: string[];
+}) => void;