svelte-streamdown 2.4.5 → 2.5.0

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);
             }
         }
     }
@@ -345,59 +345,91 @@ 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
+            eventTarget.parentElement.style.height = eventTarget.clientHeight + 'px';
+            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 +499,6 @@ export const usePanzoom = (opts = {}) => {
         moveBy,
         setTransform,
         expand,
-        collapse,
         toggleExpand,
         get transform() {
             return { x, y, scale };

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

@@ -106,6 +106,8 @@ class IncompleteMarkdownParser {
                     const lines = text.split('\n');
                     let inCodeBlock = false;
                     let inMathBlock = false;
+                    let inCenterBlock = false;
+                    let inRightBlock = false;
                     // Track which lines are in which contexts for state management
                     const lineContexts = [];
                     for (let i = 0; i < lines.length; i++) {
@@ -117,7 +119,24 @@ class IncompleteMarkdownParser {
                         if (line.trim().startsWith('$$') && !line.trim().includes('$$', 2)) {
                             inMathBlock = !inMathBlock;
                         }
-                        lineContexts[i] = { code: inCodeBlock, math: inMathBlock };
+                        if (line.trim() === '[center]') {
+                            inCenterBlock = true;
+                        }
+                        if (line.trim() === '[/center]') {
+                            inCenterBlock = false;
+                        }
+                        if (line.trim() === '[right]') {
+                            inRightBlock = true;
+                        }
+                        if (line.trim() === '[/right]') {
+                            inRightBlock = false;
+                        }
+                        lineContexts[i] = {
+                            code: inCodeBlock,
+                            math: inMathBlock,
+                            center: inCenterBlock,
+                            right: inRightBlock
+                        };
                     }
                     // Set the final blocking contexts (for postprocessing)
                     const finalContexts = new Set();
@@ -125,6 +144,10 @@ class IncompleteMarkdownParser {
                         finalContexts.add('code');
                     if (inMathBlock)
                         finalContexts.add('math');
+                    if (inCenterBlock)
+                        finalContexts.add('center');
+                    if (inRightBlock)
+                        finalContexts.add('right');
                     // Return both the text and the updated state
                     return {
                         text: text, // Don't modify text in preprocess
@@ -142,6 +165,12 @@ class IncompleteMarkdownParser {
                     if (state.blockingContexts.has('math')) {
                         return text + '\n$$';
                     }
+                    if (state.blockingContexts.has('center')) {
+                        return text + '\n[/center]';
+                    }
+                    if (state.blockingContexts.has('right')) {
+                        return text + '\n[/right]';
+                    }
                     return text;
                 }
             },
@@ -406,6 +435,31 @@ class IncompleteMarkdownParser {
                     return line;
                 }
             },
+            {
+                name: 'inlineCitation',
+                pattern: /\[/,
+                skipInBlockTypes: ['code', 'math'],
+                handler: ({ line }) => {
+                    // Count unescaped opening brackets without matching closing brackets
+                    let unclosedBrackets = 0;
+                    for (let i = 0; i < line.length; i++) {
+                        if (line[i] === '[' && (i === 0 || line[i - 1] !== '\\')) {
+                            // Check if this bracket has a matching closing bracket later in the line
+                            const restOfLine = line.substring(i + 1);
+                            const closingIndex = restOfLine.indexOf(']');
+                            if (closingIndex === -1) {
+                                unclosedBrackets++;
+                            }
+                        }
+                    }
+                    // If there's an odd number of unclosed brackets, add closing bracket
+                    if (unclosedBrackets % 2 === 1) {
+                        const endOfCellOrLine = findEndOfCellOrLineContaining(line, line.length - 1);
+                        return line.substring(0, endOfCellOrLine) + ']' + line.substring(endOfCellOrLine);
+                    }
+                    return line;
+                }
+            },
             {
                 name: 'footnoteRef',
                 pattern: /\[\^[^\]\s,]*/,
@@ -601,6 +655,21 @@ class IncompleteMarkdownParser {
                     }
                     return line;
                 }
+            },
+            {
+                name: 'alignmentBlocks',
+                pattern: /^(\s*\[(center|right)\])$/,
+                skipInBlockTypes: ['code', 'math'],
+                handler: ({ line, state }) => {
+                    // Check if this is an opening alignment tag without content or closing tag
+                    const alignMatch = line.match(/^(\s*\[(center|right)\])$/);
+                    if (alignMatch) {
+                        const indent = alignMatch[1].length - alignMatch[1].trim().length;
+                        const alignType = alignMatch[2];
+                        return line + '\n' + ' '.repeat(indent) + '[/' + alignType + ']';
+                    }
+                    return line;
+                }
             }
         ];
     }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svelte-streamdown",
-	"version": "2.4.5",
+	"version": "2.5.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",