svelte-streamdown 2.4.5 → 2.5.1

package/dist/marked/marked-citations.js

@@ -0,0 +1,49 @@
+export const markedCitations = {
+    name: 'citations',
+    level: 'inline',
+    start(src) {
+        return src.indexOf('[') === -1 ? -1 : 0;
+    },
+    tokenizer(src) {
+        // Match inline citations like [1], [ref], [1] [2], [ref] [ref2], etc.
+        // Requires non-empty bracket contents and spaces between adjacent citation brackets
+        const match = src.match(/^\[[^\]]+\](?:\s+\[[^\]]+\])*/);
+        if (match) {
+            // Early exit: if first closing bracket is immediately followed by '[', it's likely link-style syntax
+            const firstClosingBracketIndex = src.indexOf(']');
+            if (firstClosingBracketIndex !== -1 && src[firstClosingBracketIndex + 1] === '[') {
+                return undefined;
+            }
+            // If followed by parentheses, it's likely a markdown link or image, so don't treat as citation
+            const remainingSrc = src.slice(match[0].length);
+            if (remainingSrc.match(/^\s*\(/)) {
+                return undefined;
+            }
+            // Extract all citation keys (anything inside brackets)
+            const citations = match[0].match(/\[([^\]]+)\]/g);
+            if (citations) {
+                // Filter out task list syntax ([ ], [x], [X]) after trimming
+                const validCitations = citations.filter((citation) => {
+                    const content = citation.slice(1, -1).trim();
+                    return content !== '' && content !== 'x' && content !== 'X';
+                });
+                if (validCitations.length > 0) {
+                    // Process each bracket content and split on spaces, commas, or semicolons
+                    const keys = validCitations.flatMap((citation) => {
+                        const content = citation.slice(1, -1).trim(); // Remove brackets and trim
+                        // Split on spaces, commas, or semicolons and filter out empty strings
+                        return content.split(/[\s,;]+/).filter((key) => key.length > 0);
+                    });
+                    // Deduplicate keys after trimming
+                    const uniqueKeys = Array.from(new Set(keys.map((key) => key.trim()).filter((key) => key.length > 0)));
+                    return {
+                        type: 'inline-citations',
+                        keys: uniqueKeys,
+                        text: match[0],
+                        raw: match[0]
+                    };
+                }
+            }
+        }
+    }
+};

package/dist/marked/marked-table.js

@@ -35,7 +35,6 @@ function splitRow(src) {
             continue;
         }
         if (ch === '`') {
-            // count backticks
             let run = 1;
             while (i + run < src.length && src[i + run] === '`')
                 run++;
@@ -52,7 +51,19 @@ function splitRow(src) {
             continue;
         }
         if (ch === '|' && !inCode) {
-            out.push(buf.trim());
+            // Count consecutive pipes for colspan
+            let consecutivePipes = 1;
+            while (i + consecutivePipes < src.length && src[i + consecutivePipes] === '|') {
+                consecutivePipes++;
+            }
+            if (consecutivePipes > 1) {
+                // Multiple pipes = colspan marker
+                out.push(buf.trim() + '\x00COLSPAN:' + consecutivePipes);
+                i += consecutivePipes - 1;
+            }
+            else {
+                out.push(buf.trim());
+            }
             buf = '';
             continue;
         }
@@ -83,29 +94,41 @@ const processSpans = (cells, count, prevRow = [], maxColspan = null) => {
     let cellIndex = 0;
     const mergedIndices = new Set();
     for (i = 0; i < cells.length; i++) {
-        // Skip cells that were merged into previous colspans
         if (mergedIndices.has(i))
             continue;
         trimmedCell = cells[i];
-        // Count consecutive empty cells for colspan
         let colspan = 1;
-        if (!trimmedCell.trim()) {
-            // Count how many consecutive empty cells we have
-            let j = i + 1;
-            while (j < cells.length && !cells[j].trim()) {
-                colspan++;
-                mergedIndices.add(j); // Mark as merged
-                j++;
+        // Check for colspan marker from consecutive pipes
+        if (trimmedCell.includes('\x00COLSPAN:')) {
+            const parts = trimmedCell.split('\x00COLSPAN:');
+            trimmedCell = parts[0];
+            colspan = parseInt(parts[1], 10);
+        }
+        else if (!trimmedCell.trim()) {
+            // Fallback: merge empty run into previous cell (backward compatibility)
+            let run = 1, k = i + 1;
+            while (k < cells.length && !cells[k].trim()) {
+                run++;
+                mergedIndices.add(k++);
+            }
+            if (processedCells.length) {
+                const target = processedCells[processedCells.length - 1];
+                const allowed = maxColspan != null ? Math.min(run, Math.max(0, maxColspan - target.colspan)) : run;
+                target.colspan += allowed;
+                numCols += allowed;
+                continue;
+            }
+            else {
+                colspan = maxColspan != null ? Math.min(run, maxColspan) : run;
             }
         }
-        // Apply maxColspan limit if specified
         if (maxColspan !== null && colspan > maxColspan)
             colspan = maxColspan;
         processedCells[cellIndex] = {
             rowspan: 1,
             colspan: colspan,
             text: trimmedCell.trim().replace(/\\\|/g, '|'),
-            position: numCols // Store original column position for better tracking
+            position: numCols
         };
         numCols += processedCells[cellIndex].colspan;
         cellIndex++;

package/dist/theme.d.ts

@@ -41,7 +41,6 @@ export declare const theme: {
         container: string;
         header: string;
         buttons: string;
-        button: string;
         language: string;
         skeleton: string;
         pre: string;
@@ -53,7 +52,6 @@ export declare const theme: {
     image: {
         base: string;
         image: string;
-        downloadButton: string;
     };
     blockquote: {
         base: string;
@@ -104,8 +102,6 @@ export declare const theme: {
     };
     mermaid: {
         base: string;
-        downloadButton: string;
-        button: string;
         icon: string;
         buttons: string;
     };
@@ -125,9 +121,6 @@ export declare const theme: {
     footnoteRef: {
         base: string;
     };
-    footnotePopover: {
-        base: string;
-    };
     descriptionList: {
         base: string;
     };
@@ -137,6 +130,28 @@ export declare const theme: {
     descriptionDetail: {
         base: string;
     };
+    inlineCitation: {
+        preview: string;
+        carousel: {
+            header: string;
+            stepCounter: string;
+            buttons: string;
+            title: string;
+            url: string;
+            favicon: string;
+        };
+        list: {
+            base: string;
+            item: string;
+            title: string;
+            url: string;
+            favicon: string;
+        };
+    };
+    components: {
+        button: string;
+        popover: string;
+    };
 };
 export declare const shadcnTheme: {
     link: {
@@ -179,7 +194,6 @@ export declare const shadcnTheme: {
         container: string;
         header: string;
         buttons: string;
-        button: string;
         language: string;
         skeleton: string;
         pre: string;
@@ -191,7 +205,6 @@ export declare const shadcnTheme: {
     image: {
         base: string;
         image: string;
-        downloadButton: string;
     };
     blockquote: {
         base: string;
@@ -242,8 +255,6 @@ export declare const shadcnTheme: {
     };
     mermaid: {
         base: string;
-        downloadButton: string;
-        button: string;
         icon: string;
         buttons: string;
     };
@@ -263,9 +274,6 @@ export declare const shadcnTheme: {
     footnoteRef: {
         base: string;
     };
-    footnotePopover: {
-        base: string;
-    };
     descriptionList: {
         base: string;
     };
@@ -275,6 +283,28 @@ export declare const shadcnTheme: {
     descriptionDetail: {
         base: string;
     };
+    inlineCitation: {
+        preview: string;
+        carousel: {
+            header: string;
+            stepCounter: string;
+            buttons: string;
+            title: string;
+            url: string;
+            favicon: string;
+        };
+        list: {
+            base: string;
+            item: string;
+            title: string;
+            url: string;
+            favicon: string;
+        };
+    };
+    components: {
+        button: string;
+        popover: string;
+    };
 };
 export type Theme = typeof theme;
 type DeepPartial<T> = {
@@ -322,7 +352,6 @@ export declare const mergeTheme: (customTheme?: DeepPartialTheme, baseTheme?: "t
         container: string;
         header: string;
         buttons: string;
-        button: string;
         language: string;
         skeleton: string;
         pre: string;
@@ -334,7 +363,6 @@ export declare const mergeTheme: (customTheme?: DeepPartialTheme, baseTheme?: "t
     image: {
         base: string;
         image: string;
-        downloadButton: string;
     };
     blockquote: {
         base: string;
@@ -385,8 +413,6 @@ export declare const mergeTheme: (customTheme?: DeepPartialTheme, baseTheme?: "t
     };
     mermaid: {
         base: string;
-        downloadButton: string;
-        button: string;
         icon: string;
         buttons: string;
     };
@@ -406,9 +432,6 @@ export declare const mergeTheme: (customTheme?: DeepPartialTheme, baseTheme?: "t
     footnoteRef: {
         base: string;
     };
-    footnotePopover: {
-        base: string;
-    };
     descriptionList: {
         base: string;
     };
@@ -418,5 +441,27 @@ export declare const mergeTheme: (customTheme?: DeepPartialTheme, baseTheme?: "t
     descriptionDetail: {
         base: string;
     };
+    inlineCitation: {
+        preview: string;
+        carousel: {
+            header: string;
+            stepCounter: string;
+            buttons: string;
+            title: string;
+            url: string;
+            favicon: string;
+        };
+        list: {
+            base: string;
+            item: string;
+            title: string;
+            url: string;
+            favicon: string;
+        };
+    };
+    components: {
+        button: string;
+        popover: string;
+    };
 };
 export {};

package/dist/theme.js

@@ -42,7 +42,6 @@ export const theme = {
         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',
         pre: 'overflow-x-auto font-mono p-0 bg-gray-100/40',
@@ -53,8 +52,7 @@ export const theme = {
     },
     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'
+        image: 'max-w-full rounded-lg'
     },
     blockquote: {
         base: 'border-gray-600/30 text-gray-600 my-4 border-l-4 pl-4 italic'
@@ -105,8 +103,6 @@ export const theme = {
     },
     mermaid: {
         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'
     },
@@ -126,9 +122,6 @@ export const theme = {
     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'
-    },
     descriptionList: {
         base: 'my-4 space-y-2'
     },
@@ -137,6 +130,28 @@ export const theme = {
     },
     descriptionDetail: {
         base: 'text-gray-700 ml-4 leading-relaxed'
+    },
+    inlineCitation: {
+        preview: 'text-sm text-muted-foreground bg-muted rounded-md px-2 py-0.5 cursor-pointer inline-flex border border-border hover:bg-muted/50 outline-none focus:ring-1 focus:ring-primary',
+        carousel: {
+            header: 'flex items-center justify-between',
+            stepCounter: 'h-fit text-xs font-semibold text-muted-foreground tabular-nums',
+            buttons: 'flex w-fit items-center justify-end gap-2',
+            title: 'mb-2 line-clamp-2 font-semibold',
+            url: 'flex items-center gap-2 text-sm text-muted-foreground',
+            favicon: 'h-4 w-4 rounded'
+        },
+        list: {
+            base: 'grid gap-2',
+            item: 'grid gap-1 hover:bg-muted rounded-md p-2',
+            title: 'line-clamp-1 font-semibold text-sm',
+            url: 'flex items-center gap-2 text-xs text-muted-foreground',
+            favicon: 'h-3 w-3 rounded'
+        }
+    },
+    components: {
+        button: 'disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer p-1 text-gray-600 transition-all hover:text-gray-900 rounded hover:bg-gray-100 w-6 h-6',
+        popover: 'min-w-[250px] max-w-md  fixed z-[1000] max-h-md overflow-y-auto rounded-lg bg-white p-4 shadow'
     }
 };
 export const shadcnTheme = {
@@ -180,7 +195,6 @@ export const shadcnTheme = {
         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',
         pre: 'overflow-x-auto font-mono p-0 bg-muted/40',
@@ -191,8 +205,7 @@ export const shadcnTheme = {
     },
     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'
+        image: 'max-w-full rounded-lg'
     },
     blockquote: {
         base: 'border-muted-foreground/30 text-muted-foreground my-4 border-l-4 pl-4 italic'
@@ -243,8 +256,6 @@ export const shadcnTheme = {
     },
     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'
     },
@@ -262,10 +273,7 @@ export const shadcnTheme = {
         base: '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'
+        base: 'text-muted-foreground text-sm  rounded-full bg-muted cursor-pointer border border-border hover:bg-muted/50 tabular-nums min-w-5 min-h-5 outline-none focus:ring-1 focus:ring-primary'
     },
     descriptionList: {
         base: 'my-4 space-y-2'
@@ -275,6 +283,28 @@ export const shadcnTheme = {
     },
     descriptionDetail: {
         base: 'text-muted-foreground ml-4 leading-relaxed'
+    },
+    inlineCitation: {
+        preview: 'text-sm text-muted-foreground bg-muted rounded-md px-2 py-0.5 cursor-pointer inline-flex border border-border hover:bg-muted/50 outline-none focus:ring-1 focus:ring-primary',
+        carousel: {
+            header: 'flex items-center justify-between',
+            stepCounter: 'h-fit text-xs font-semibold text-muted-foreground tabular-nums',
+            buttons: 'flex w-fit items-center justify-end gap-2',
+            title: 'mb-2 line-clamp-2 font-semibold',
+            url: 'flex items-center gap-2 text-sm text-muted-foreground',
+            favicon: 'h-4 w-4 rounded'
+        },
+        list: {
+            base: 'grid gap-2',
+            item: 'grid gap-1 hover:bg-muted rounded-md p-2',
+            title: 'line-clamp-1 font-semibold text-sm',
+            url: 'flex items-center gap-2 text-xs text-muted-foreground',
+            favicon: 'h-3 w-3 rounded'
+        }
+    },
+    components: {
+        button: 'disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer p-1 text-muted-foreground transition-all hover:text-foreground rounded hover:bg-border flex items-center justify-center w-6 h-6',
+        popover: 'min-w-[250px] max-w-md fixed z-[1000] max-h-md overflow-y-auto rounded-lg bg-popover border border-border p-2 shadow'
     }
 };
 export const mergeTheme = (customTheme, baseTheme) => {

package/dist/utils/get.d.ts

@@ -0,0 +1 @@
+export declare const get: <T>(obj: Record<string, any> | undefined, path: string) => T | null;

package/dist/utils/get.js

@@ -0,0 +1,25 @@
+// A method that gets a value from an object using a path
+// It should work with nested objects and arrays
+export const get = (obj, path) => {
+    if (!obj)
+        return null;
+    const keys = path.split('.');
+    if (keys.length === 1) {
+        return obj[path];
+    }
+    let value = obj;
+    for (const key of keys) {
+        if (value == null)
+            return null;
+        if (Array.isArray(value)) {
+            const index = Number(key);
+            if (isNaN(index) || index < 0 || index >= value.length)
+                return null;
+            value = value[index];
+        }
+        else {
+            value = value[key];
+        }
+    }
+    return value;
+};

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

@@ -23,8 +23,7 @@ export declare const usePanzoom: (opts?: PanzoomOptions) => {
     zoomOut: (factor?: number) => void;
     moveBy: (dx: number, dy: number) => void;
     setTransform: (nx: number, ny: number, ns: number) => void;
-    expand: () => void;
-    collapse: () => void;
+    expand: (expand: boolean) => void;
     toggleExpand: () => Promise<void>;
     readonly transform: {
         readonly x: number;

package/dist/utils/panzoom.svelte.js

@@ -32,7 +32,7 @@ export const usePanzoom = (opts = {}) => {
         if (e.key === 'Escape' || e.keyCode === 27) {
             if (isExpanded && !animating) {
                 // fire and forget
-                void collapse();
+                void expand(false);
             }
         }
     }
@@ -198,6 +198,11 @@ export const usePanzoom = (opts = {}) => {
         dragOffMove = dragOffUp = null;
     }
     function onTouchStart(e) {
+        const hasButton = e
+            .composedPath()
+            .some((el) => el.tagName?.toLowerCase?.() === 'button');
+        if (hasButton)
+            return;
         if (!node)
             return;
         if (animating) {
@@ -345,59 +350,99 @@ export const usePanzoom = (opts = {}) => {
             };
         });
     }
-    const collapse = () => {
+    const expand = (expand) => {
         if (!eventTarget)
             return;
-        // Add view transition name for CSS targeting
-        eventTarget.style.viewTransitionName = 'panzoom-element';
-        isExpanded = false;
-        const run = () => {
-            if (!eventTarget)
-                return;
-            eventTarget.dataset.expanded = 'false';
+        // Capture first state
+        const first = eventTarget.getBoundingClientRect();
+        if (expand) {
+            // Expanding: immediately apply expanded state
+            // We should add margin to the parent element to account for the expanded height
+            if (eventTarget.parentElement) {
+                const styleAttributes = ['margin-block', 'height'];
+                styleAttributes.forEach((attribute) => {
+                    if (eventTarget?.parentElement) {
+                        eventTarget.parentElement.style.setProperty(attribute, getComputedStyle(eventTarget).getPropertyValue(attribute));
+                    }
+                });
+            }
+            eventTarget.dataset.expanded = 'true';
+            isExpanded = true;
             zoomToFit();
-        };
-        if (typeof document.startViewTransition === 'function') {
-            document.startViewTransition(run).finished.finally(() => {
-                if (eventTarget)
-                    eventTarget.style.viewTransitionName = '';
+            // Force layout to get the final position
+            const last = eventTarget.getBoundingClientRect();
+            // Calculate the inverse transform
+            const deltaX = first.left - last.left;
+            const deltaY = first.top - last.top;
+            const deltaW = first.width / last.width;
+            const deltaH = first.height / last.height;
+            // Animate from original position to expanded
+            const animation = eventTarget.animate([
+                {
+                    transformOrigin: '0 0',
+                    transform: `translate(${deltaX}px, ${deltaY}px) scale(${deltaW}, ${deltaH})`
+                },
+                {
+                    transformOrigin: '0 0',
+                    transform: 'translate(0px, 0px) scale(1, 1)'
+                }
+            ], {
+                duration: 350,
+                easing: 'cubic-bezier(0.4, 0.0, 0.2, 1)',
+                fill: 'both'
+            });
+            animation.finished.then(() => {
+                animation.cancel();
             });
         }
         else {
-            run();
-            if (eventTarget)
-                eventTarget.style.viewTransitionName = '';
-        }
-    };
-    const expand = () => {
-        if (!eventTarget)
-            return;
-        // Add view transition name for CSS targeting
-        eventTarget.style.viewTransitionName = 'panzoom-element';
-        isExpanded = true;
-        const run = () => {
-            if (!eventTarget)
-                return;
+            // Collapsing: keep expanded state during animation, then remove
+            const last = {
+                left: first.left,
+                top: first.top,
+                width: first.width,
+                height: first.height
+            };
+            // Calculate where it will be after collapsing
+            eventTarget.dataset.expanded = 'false';
+            const final = eventTarget.getBoundingClientRect();
+            // Restore expanded state for animation
             eventTarget.dataset.expanded = 'true';
-            zoomToFit();
-        };
-        if (typeof document.startViewTransition === 'function') {
-            document.startViewTransition(run).finished.finally(() => {
-                if (eventTarget)
-                    eventTarget.style.viewTransitionName = '';
+            const deltaX = final.left - last.left;
+            const deltaY = final.top - last.top;
+            const deltaW = final.width / last.width;
+            const deltaH = final.height / last.height;
+            // Animate from expanded to collapsed
+            const animation = eventTarget.animate([
+                {
+                    transformOrigin: '0 0',
+                    transform: 'translate(0px, 0px) scale(1, 1)'
+                },
+                {
+                    transformOrigin: '0 0',
+                    transform: `translate(${deltaX}px, ${deltaY}px) scale(${deltaW}, ${deltaH})`
+                }
+            ], {
+                duration: 350,
+                easing: 'cubic-bezier(0.4, 0.0, 0.2, 1)',
+                fill: 'both'
+            });
+            animation.finished.then(() => {
+                animation.cancel();
+                // Only remove expanded state after animation completes
+                if (!eventTarget)
+                    return;
+                eventTarget.dataset.expanded = 'false';
+                eventTarget.parentElement.style.height = 'fit-content';
+                isExpanded = false;
+                zoomToFit();
             });
-        }
-        else {
-            run();
-            if (eventTarget)
-                eventTarget.style.viewTransitionName = '';
         }
     };
     async function toggleExpand() {
-        zoomToFit();
         if (isExpanded)
-            return collapse();
-        return expand();
+            return expand(false);
+        return expand(true);
     }
     function zoomToFit(padding = 0.05) {
         if (!node)
@@ -467,7 +512,6 @@ export const usePanzoom = (opts = {}) => {
         moveBy,
         setTransform,
         expand,
-        collapse,
         toggleExpand,
         get transform() {
             return { x, y, scale };