@juspay/svelte-ui-components 4.10.4 → 4.10.5

package/dist/Chat/controller.svelte.js

@@ -1,11 +1,7 @@
 import { partyOf } from './roles';
+import { prefersReducedMotion } from '../utils';
 const REVEAL_CHARS_PER_TICK = 2;
 const REVEAL_INTERVAL_MS = 22;
-function prefersReducedMotion() {
-    return (typeof window !== 'undefined' &&
-        typeof window.matchMedia === 'function' &&
-        window.matchMedia('(prefers-reduced-motion: reduce)').matches);
-}
 let idCounter = 0;
 function defaultId() {
     if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {

package/dist/TypewriterText/TypewriterText.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { onMount, onDestroy, untrack } from 'svelte';
+  import { prefersReducedMotion } from '../utils';
   import type { TypewriterTextProperties, TypewriterCharacterDelayRange } from './properties';
 
   let {
@@ -75,7 +76,34 @@
     return speed;
   };
 
+  // Disclose everything still pending at once. The whitespace count has to be rebuilt
+  // from the text itself because the per-character path that normally maintains it is
+  // skipped entirely, and a later continuation would otherwise resume from a count that
+  // never saw the revealed suffix.
+  const revealRemainingText = (): void => {
+    if (timeoutId !== null) {
+      clearTimeout(timeoutId);
+      timeoutId = null;
+    }
+    const hadRemainingText = currentIndex < text.length;
+    displayedText = text;
+    currentIndex = text.length;
+    revealedWordCount = countWhitespace(text);
+    if (hadRemainingText) {
+      onprogress?.({ index: currentIndex, total: text.length, displayedText });
+    }
+  };
+
   const typeNextCharacter = (): void => {
+    // Typing IS the animation here, so a reduced-motion request has to suppress the
+    // reveal itself rather than a transition around it: disclose the text instead.
+    // `ChatController` already bypasses its own drain loop on this setting, and the two
+    // reveal implementations have to answer it identically — a consumer composing this
+    // component through `Chat`'s `messageBody` snippet is running both at once.
+    if (prefersReducedMotion()) {
+      revealRemainingText();
+      return;
+    }
     if (currentIndex < text.length) {
       const revealedCharacter = text[currentIndex];
       const revealedCharacterIndex = currentIndex;
@@ -122,6 +150,7 @@
         if (currentIndex >= previousTextLength) {
           if (timeoutId !== null) {
             clearTimeout(timeoutId);
+            timeoutId = null;
           }
           typeNextCharacter();
         }
@@ -133,16 +162,7 @@
   // eslint-disable-next-line no-restricted-syntax
   $effect(() => {
     if (!isStreaming && text.length > 0) {
-      if (timeoutId !== null) {
-        clearTimeout(timeoutId);
-      }
-      const hadRemainingText = currentIndex < text.length;
-      displayedText = text;
-      currentIndex = text.length;
-      revealedWordCount = countWhitespace(text);
-      if (hadRemainingText) {
-        onprogress?.({ index: currentIndex, total: text.length, displayedText });
-      }
+      revealRemainingText();
     }
   });
 

package/dist/utils.d.ts

@@ -25,6 +25,16 @@ export declare function hsvToHsl(h: number, s: number, v: number): Hsl;
 export declare function hslToHsv(hDeg: number, sPct: number, lPct: number): Hsv;
 export declare function isValidHex(hex: string): boolean;
 export declare function clampInt(v: string, min: number, max: number): number;
+/**
+ * Whether the user has asked the OS to minimise animation.
+ *
+ * Shared rather than per-component: two independent character-reveal
+ * implementations ship in this library — `ChatController`'s buffered drain and
+ * `TypewriterText`'s typing loop — and a reveal that honours this setting in one
+ * but not the other means the same OS preference silences an animation in a chat
+ * bubble and leaves it running in the message body rendered inside it.
+ */
+export declare function prefersReducedMotion(): boolean;
 export declare function createDebouncer(delay: number): <T extends unknown[]>(callback: (...args: T) => void, ...args: T) => void;
 export declare function lockBodyScroll(): void;
 export declare function unlockBodyScroll(): void;

package/dist/utils.js

@@ -282,6 +282,20 @@ export function clampInt(v, min, max) {
     return Math.max(min, Math.min(max, n));
 }
 // ── Misc ────────────────────────────────────────────────────────
+/**
+ * Whether the user has asked the OS to minimise animation.
+ *
+ * Shared rather than per-component: two independent character-reveal
+ * implementations ship in this library — `ChatController`'s buffered drain and
+ * `TypewriterText`'s typing loop — and a reveal that honours this setting in one
+ * but not the other means the same OS preference silences an animation in a chat
+ * bubble and leaves it running in the message body rendered inside it.
+ */
+export function prefersReducedMotion() {
+    return (typeof window !== 'undefined' &&
+        typeof window.matchMedia === 'function' &&
+        window.matchMedia('(prefers-reduced-motion: reduce)').matches);
+}
 export function createDebouncer(delay) {
     let lastCallTime = 0;
     return function (callback, ...args) {

package/dist-wc/index.js

@@ -6125,6 +6125,9 @@ function clampInt(e, t, n) {
 	let i = parseInt(e, 10);
 	return Number.isNaN(i) ? t : Math.max(t, Math.min(n, i));
 }
+function prefersReducedMotion() {
+	return typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
 function createDebouncer(e) {
 	let t = 0;
 	return function(n, ...i) {
@@ -32398,36 +32401,40 @@ function TypewriterText(e, t) {
 		index: t,
 		wordCount: get(R)
 	}) : s() ? re.test(e) && s().digit ? be(s().digit) : G.has(e) && s().whitespace ? be(s().whitespace) : ne.has(e) && s().punctuation ? be(s().punctuation) : s().default ? be(s().default) : i() : i(), Re = () => {
+		get(C) !== null && (clearTimeout(get(C)), set(C, null));
+		let e = get(S) < n().length;
+		set(h, n(), !0), set(S, n().length, !0), set(R, te(n()), !0), e && l()?.({
+			index: get(S),
+			total: n().length,
+			displayedText: get(h)
+		});
+	}, Ue = () => {
+		if (prefersReducedMotion()) {
+			Re();
+			return;
+		}
 		if (get(S) < n().length) {
 			let e = n()[get(S)], t = get(S);
 			G.has(e) && update(R), set(h, n().substring(0, get(S) + 1), !0), update(S), l()?.({
 				index: get(S),
 				total: n().length,
 				displayedText: get(h)
-			}), set(C, setTimeout(Re, Me(e, t)), !0);
+			}), set(C, setTimeout(Ue, Me(e, t)), !0);
 		}
 	};
 	user_effect(() => {
 		let e = n();
 		untrack(() => {
-			e.length >= get(k) && e.startsWith(get(h)) || (get(C) !== null && (clearTimeout(get(C)), set(C, null)), set(h, ""), set(S, 0), set(k, 0), set(R, 0)), e.length > 0 && e.length > get(k) && (get(S) >= get(k) && (get(C) !== null && clearTimeout(get(C)), Re()), set(k, e.length, !0));
+			e.length >= get(k) && e.startsWith(get(h)) || (get(C) !== null && (clearTimeout(get(C)), set(C, null)), set(h, ""), set(S, 0), set(k, 0), set(R, 0)), e.length > 0 && e.length > get(k) && (get(S) >= get(k) && (get(C) !== null && (clearTimeout(get(C)), set(C, null)), Ue()), set(k, e.length, !0));
 		});
 	}), user_effect(() => {
-		if (!a() && n().length > 0) {
-			get(C) !== null && clearTimeout(get(C));
-			let e = get(S) < n().length;
-			set(h, n(), !0), set(S, n().length, !0), set(R, te(n()), !0), e && l()?.({
-				index: get(S),
-				total: n().length,
-				displayedText: get(h)
-			});
-		}
+		!a() && n().length > 0 && Re();
 	}), onMount(() => {
-		n().length > 0 && (set(k, n().length, !0), Re());
+		n().length > 0 && (set(k, n().length, !0), Ue());
 	}), onDestroy(() => {
 		get(C) !== null && clearTimeout(get(C));
 	});
-	var Ue = {
+	var it = {
 		get text() {
 			return n();
 		},
@@ -32488,12 +32495,12 @@ function TypewriterText(e, t) {
 		set classes(e) {
 			p(e), flushSync();
 		}
-	}, it = root$12();
-	let at;
-	var ot = child(it), ct = (e) => {
+	}, at = root$12();
+	let ot;
+	var ct = child(at), lt = (e) => {
 		var t = comment();
 		html(first_child(t), () => o()(get(h))), append(e, t);
-	}, lt = (e) => {
+	}, ut = (e) => {
 		var t = comment();
 		each(first_child(t), 17, () => get(h).split(""), index, (e, t, n) => {
 			var i = comment();
@@ -32502,15 +32509,15 @@ function TypewriterText(e, t) {
 				index: n
 			})), append(e, i);
 		}), append(e, t);
-	}, ut = (e) => {
+	}, dt = (e) => {
 		var t = text();
 		template_effect(() => set_text(t, get(h))), append(e, t);
 	};
-	return if_block(ot, (e) => {
-		typeof o() == "function" ? e(ct) : u() ? e(lt, 1) : e(ut, -1);
-	}), reset(it), template_effect(() => {
-		at = set_class(it, 1, `typewriter-text ${p() ?? "" ?? ""}`, "svelte-12jnsxo", at, { plain: typeof o() != "function" }), set_attribute(it, "data-pw", typeof f() == "string" ? f() : null), set_attribute(it, "testid", typeof f() == "string" ? f() : null);
-	}), append(e, it), pop(Ue);
+	return if_block(ct, (e) => {
+		typeof o() == "function" ? e(lt) : u() ? e(ut, 1) : e(dt, -1);
+	}), reset(at), template_effect(() => {
+		ot = set_class(at, 1, `typewriter-text ${p() ?? "" ?? ""}`, "svelte-12jnsxo", ot, { plain: typeof o() != "function" }), set_attribute(at, "data-pw", typeof f() == "string" ? f() : null), set_attribute(at, "testid", typeof f() == "string" ? f() : null);
+	}), append(e, at), pop(it);
 }
 create_custom_element(TypewriterText, {
 	text: {},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@juspay/svelte-ui-components",
-  "version": "4.10.4",
+  "version": "4.10.5",
   "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
   "keywords": [
     "svelte",