@joewinke/jatui 0.41.0 → 0.41.1

package/dist/components/AnimatedNumber.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { untrack } from 'svelte';
-	import { Tween } from 'svelte/motion';
 	import { cubicOut } from 'svelte/easing';
 	import { getMotionContext, motionDuration } from '../motion/level';
 
@@ -21,13 +20,32 @@
 
 	// ── Tween mode ─────────────────────────────────────────────────────────
 	let tweenEl: HTMLSpanElement | undefined = $state();
-	const tween = new Tween(untrack(() => value), { easing: cubicOut, duration: 0 });
+	// A hand-rolled rAF tween, NOT svelte/motion's Tween: importing svelte/motion
+	// creates a prefers-reduced-motion MediaQuery at MODULE load, which throws
+	// 'window.matchMedia is not a function' in any jsdom test that merely
+	// imports 'jatui' (jatui-oozkb). Reduced motion comes from motionDuration,
+	// which is 0 under prefers-reduced-motion.
+	let tweenCurrent = $state(untrack(() => value));
 	$effect(() => {
 		if (mode !== 'tween') return;
 		const target = value;
 		// Level-aware (data-motion) and instant under prefers-reduced-motion.
 		const ms = motionDuration(duration ?? 'move', getMotionContext(tweenEl ?? null));
-		void tween.set(target, { duration: ms });
+		const from = untrack(() => tweenCurrent);
+		if (ms <= 0 || from === target || typeof requestAnimationFrame !== 'function') {
+			tweenCurrent = target;
+			return;
+		}
+		let frame = 0;
+		let start: number | null = null;
+		const step = (now: number) => {
+			start ??= now;
+			const t = Math.min(1, (now - start) / ms);
+			tweenCurrent = from + (target - from) * cubicOut(t);
+			if (t < 1) frame = requestAnimationFrame(step);
+		};
+		frame = requestAnimationFrame(step);
+		return () => cancelAnimationFrame(frame);
 	});
 	/** Decimals to show mid-tween: the target's own, unless `format` decides. */
 	const tweenDecimals = $derived.by(() => {
@@ -36,7 +54,7 @@
 		return s.includes('.') && !s.includes('e') ? s.split('.')[1].length : 0;
 	});
 	const tweenText = $derived.by(() => {
-		const v = tween.current;
+		const v = tweenCurrent;
 		const shown = tweenDecimals == null ? v : Number(v.toFixed(tweenDecimals));
 		return formatNumber(shown, format);
 	});

package/dist/showcase/Globe.svelte

@@ -37,7 +37,7 @@
 	let paused = false;
 
 	const prefersReducedMotion =
-		typeof window !== 'undefined'
+		typeof window !== 'undefined' && typeof window.matchMedia === 'function'
 			? window.matchMedia('(prefers-reduced-motion: reduce)').matches
 			: false;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joewinke/jatui",
-  "version": "0.41.0",
+  "version": "0.41.1",
   "private": false,
   "description": "Shared Svelte 5 component library for JAT projects",
   "type": "module",