svelte-streamdown 2.3.0 → 2.3.1

package/README.md

@@ -273,7 +273,7 @@ The animation system works by:
 
 ### Animation Types
 
-Choose from five distinct animation styles:
+Choose from 4 distinct animation styles:
 
 #### `fade`
 
@@ -283,10 +283,6 @@ A clean fade-in effect where text smoothly appears from transparent to opaque.
 
 Text starts slightly blurred and comes into focus while fading in, creating a smooth reveal effect.
 
-#### `typewriter`
-
-A typewriter effect where text appears character by character, mimicking the look of someone typing.
-
 #### `slideUp`
 
 Text slides up from below while fading in, creating a dynamic upward motion.

package/dist/Streamdown.svelte

@@ -137,16 +137,6 @@
 			}
 		}
 
-		@keyframes sd-typewriter {
-			from {
-				width: 0;
-				overflow: hidden;
-			}
-			to {
-				width: fit-content;
-			}
-		}
-
 		@keyframes sd-slideUp {
 			from {
 				transform: translateY(10%);

package/dist/context.svelte.d.ts

@@ -105,7 +105,7 @@ export type StreamdownProps = {
     animation?: {
         animateOnMount?: boolean;
         enabled?: boolean;
-        type?: 'fade' | 'blur' | 'typewriter' | 'slideUp' | 'slideDown';
+        type?: 'fade' | 'blur' | 'slideUp' | 'slideDown';
         duration?: number;
         timingFunction?: 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear';
         tokenize?: 'word' | 'char';

package/dist/context.svelte.js

@@ -10,7 +10,10 @@ export class StreamdownContext {
 animation-duration: ${this.animation.duration}ms;
 animation-timing-function: ${this.animation.timingFunction};
 animation-iteration-count: 1;
-animation-fill-mode: forwards;`
+animation-fill-mode: forwards;
+white-space: pre-wrap;
+display: inline-block;
+text-decoration: inherit;`
         : undefined);
     animationBlockStyle = $derived(this.animation.enabled
         ? `animation-name: sd-${this.animation.type};

package/dist/marked/marked-math.js

@@ -4,6 +4,17 @@ const blockRule = /^(\$\$)(?:\n((?:\\[\s\S]|[^\\])+?)\n\1(?:\n|$)|([^$\n]+?)\1(?
 // Inline math: handles both single ($) and double ($$) dollar delimiters
 // Avoids matching currency by checking context and requiring proper content
 const inlineRule = /^(\${1,2})(?!\$)((?:[^$\n]|\\\$)*?)\1(?!\d)/;
+// Enhanced currency detection patterns
+const currencyPatterns = {
+    // Simple price patterns: $123, $123.45, $1,234.56
+    simplePrice: /^\d{1,3}(?:,\d{3})*(?:\.\d{2})?$/,
+    // Multiple prices or numbers: "123, 456", "123.45, 678.90", "123 or 456"
+    multipleNumbers: /^\d+(?:[.,]\d+)*(?:\s*[,;]\s*\d+(?:[.,]\d+)*)+$/,
+    // Price ranges: "123-456", "123 - 456", "123 to 456"
+    priceRange: /^\d+(?:\.\d{2})?\s*(?:-|to|or)\s*\d+(?:\.\d{2})?$/i,
+    // Common currency words nearby (check surrounding context)
+    currencyContext: /(?:price|cost|dollar|euro|pound|yen|currency|pay|buy|sell|expensive|cheap)/i
+};
 export function markedMath() {
     return {
         extensions: [
@@ -40,11 +51,18 @@ export function markedMath() {
                         const possibleMath = src.substring(currentIndex);
                         // Check if this could be math (not currency)
                         if (possibleMath.match(inlineRule)) {
-                            // Additional check: avoid currency patterns like $5.00
-                            const beforeChar = currentIndex > 0 ? src[currentIndex - 1] : '';
-                            const afterDollar = possibleMath.substring(1, 6); // Check first few chars after $
-                            // Skip if it looks like currency (digit immediately after $ or decimal pattern)
-                            if (!/^\d+(\.\d{2})?\s/.test(afterDollar)) {
+                            const match = possibleMath.match(inlineRule);
+                            if (match) {
+                                const content = match[2];
+                                const dollarCount = match[1]; // '$' or '$$'
+                                // Only apply currency detection to single dollars
+                                // Double dollars ($$) indicate explicit math intent
+                                if (dollarCount === '$' && isCurrencyPattern(content, src, currentIndex)) {
+                                    // This looks like currency with single dollars, skip it
+                                    index += dollarIndex + 1;
+                                    searchSrc = src.substring(index);
+                                    continue;
+                                }
                                 return currentIndex;
                             }
                         }
@@ -55,18 +73,19 @@ export function markedMath() {
                 tokenizer(src) {
                     const match = src.match(inlineRule);
                     if (match) {
-                        // Additional validation: avoid currency patterns
                         const content = match[2];
-                        if (/^\d+(\.\d{2})?$/.test(content.trim())) {
-                            // This looks like currency, skip it
+                        const dollarCount = match[1]; // '$' or '$$'
+                        const isDisplayMode = dollarCount === '$$';
+                        // Only apply currency detection to single dollars
+                        // Double dollars ($$) indicate explicit math intent
+                        if (dollarCount === '$' && isCurrencyPattern(content, src, 0)) {
+                            // This looks like currency with single dollars, skip it
                             return;
                         }
-                        // Double dollars are display mode, single dollars are inline
-                        const isDisplayMode = match[1] === '$$';
                         return {
                             type: 'math',
-                            isInline: !isDisplayMode,
-                            displayMode: isDisplayMode,
+                            isInline: true, // Inline tokenizer always produces inline math
+                            displayMode: isDisplayMode, // $$ = display mode styling, $ = inline styling
                             raw: match[0],
                             text: content.trim()
                         };
@@ -76,3 +95,34 @@ export function markedMath() {
         ]
     };
 }
+// Helper function to detect currency patterns
+function isCurrencyPattern(content, fullSrc, dollarIndex) {
+    const trimmedContent = content.trim();
+    // Check for simple price patterns
+    if (currencyPatterns.simplePrice.test(trimmedContent)) {
+        return true;
+    }
+    // Check for multiple numbers/prices pattern (like "199, 199")
+    if (currencyPatterns.multipleNumbers.test(trimmedContent)) {
+        return true;
+    }
+    // Check for price ranges
+    if (currencyPatterns.priceRange.test(trimmedContent)) {
+        return true;
+    }
+    // Check surrounding context for currency-related words
+    const contextStart = Math.max(0, dollarIndex - 50);
+    const contextEnd = Math.min(fullSrc.length, dollarIndex + content.length + 50);
+    const context = fullSrc.substring(contextStart, contextEnd);
+    if (currencyPatterns.currencyContext.test(context)) {
+        // If currency context is found and content is purely numeric, likely currency
+        if (/^\d+(?:[.,]\d+)*$/.test(trimmedContent)) {
+            return true;
+        }
+    }
+    // Additional check: if content is just numbers with common currency formatting
+    if (/^\d{1,3}(?:,\d{3})*(?:\.\d{1,2})?$/.test(trimmedContent)) {
+        return true;
+    }
+    return false;
+}

package/dist/theme.js

@@ -121,7 +121,7 @@ export const theme = {
         base: 'italic'
     },
     del: {
-        base: 'line-through'
+        base: 'text-gray-600'
     },
     footnoteRef: {
         base: 'text-gray-600 px-1 py-0.5 rounded-md bg-gray-100/80'
@@ -250,7 +250,7 @@ export const shadcnTheme = {
         base: 'italic text-foreground'
     },
     del: {
-        base: 'line-through text-muted-foreground'
+        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'

package/package.json

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