@expokit/cli 0.4.0 → 0.4.2

package/registry/slider/files/src/components/ui/slider.tsx

@@ -1,11 +1,14 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import {
+  AccessibilityInfo,
   Animated,
+  Easing,
   PanResponder,
   Pressable,
   StyleSheet,
   Text,
   View,
+  useWindowDimensions,
   type AccessibilityActionEvent,
   type GestureResponderEvent,
   type StyleProp,
@@ -110,13 +113,22 @@ const SIZES: Record<SliderSize, { track: number; stepped: number; thumb: number;
   md: { track: 4, stepped: 8, thumb: 26, bar: 46, icon: 20, font: 13, hit: 44 },
   lg: { track: 6, stepped: 10, thumb: 30, bar: 58, icon: 24, font: 15, hit: 52 },
 };
+// Controls stop growing at iOS's largest standard text size (xxxL ≈ 1.35×) so they keep their shape;
+// content text scales all the way.
+const FONT_CAP = 1.35;
 const BUBBLE_H = 28;
 const BUBBLE_GAP = 10;
 const BUBBLE_W = 120;
 /** Below this many points per step the thumb follows the finger and snaps on release. */
 const SNAP_PX = 14;
+const SMOOTH = Easing.bezier(0.32, 0.72, 0, 1);
 
 const clamp = (n: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, n));
+/** Native-driven move to `toValue`: a snappy spring, or a short ease when Reduce Motion is on. */
+const glide = (v: Animated.Value, toValue: number, reduce: boolean) =>
+  reduce
+    ? Animated.timing(v, { toValue, duration: 150, easing: SMOOTH, useNativeDriver: true })
+    : Animated.spring(v, { toValue, useNativeDriver: true, ...motion.snappy });
 const decimals = (n: number) => (String(n).split('.')[1] ?? '').length;
 
 /**
@@ -163,9 +175,12 @@ export function Slider(props: SliderProps) {
 
   const { colors, radius, dark, font } = useKit();
   const ff = font.family ? { fontFamily: font.family } : null;
+  const reduce = useReduceMotion();
   const tint = accent ?? colors.accent;
   const onTint = accent ? readableOn(accent) : colors.accentForeground;
   const sz = SIZES[size];
+  // Text scale the capped labels actually render at, for the label row's height.
+  const fontScale = Math.min(useWindowDimensions().fontScale, FONT_CAP);
 
   const T = isBar ? 0 : sz.thumb; // thumb diameter
   const inset = T / 2; // thumb centre travels [inset, w - inset]
@@ -211,29 +226,24 @@ export function Slider(props: SliderProps) {
   const held = useRef(new Animated.Value(0)).current;
 
   // Everything the (once-created) PanResponder reads, kept fresh every render.
-  const live = useRef({ vals, w, inset, step, span, min, range, isBar, T, disabled, controlled, snap, ratioOf, fmt, out, onValueChange, onSlidingStart, onSlidingComplete });
-  live.current = { vals, w, inset, step, span, min, range, isBar, T, disabled, controlled, snap, ratioOf, fmt, out, onValueChange, onSlidingStart, onSlidingComplete };
+  const live = useRef({ vals, w, inset, step, span, min, range, isBar, T, disabled, controlled, reduce, snap, ratioOf, fmt, out, onValueChange, onSlidingStart, onSlidingComplete });
+  live.current = { vals, w, inset, step, span, min, range, isBar, T, disabled, controlled, reduce, snap, ratioOf, fmt, out, onValueChange, onSlidingStart, onSlidingComplete };
   const drag = useRef({ dragging: false, thumb: 0, startX: 0, origin: 0, relative: false, moved: false, cur: [] as number[], target: [-1, -1] });
 
   // Follow value changes from outside (controlled updates, a11y, icon taps) when nobody is dragging.
   const key = vals.join(',');
   useEffect(() => {
     if (drag.current.dragging) return;
-    vals.forEach((v, i) => Animated.spring(ratios[i], { toValue: ratioOf(v), useNativeDriver: true, ...motion.snappy }).start());
+    vals.forEach((v, i) => glide(ratios[i], ratioOf(v), reduce).start());
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [key, min, max]);
 
+  // With Reduce Motion these only fade (the scale / lift outputs below are flattened).
   useEffect(() => {
-    press.forEach((p, i) => Animated.spring(p, { toValue: active === i ? 1 : 0, useNativeDriver: true, ...motion.snappy }).start());
-    bubble.forEach((b, i) =>
-      Animated.spring(b, {
-        toValue: bubbleShown || (showValue === 'drag' && active === i) ? 1 : 0,
-        useNativeDriver: true,
-        ...motion.snappy,
-      }).start()
-    );
-    Animated.spring(held, { toValue: active !== null ? 1 : 0, useNativeDriver: true, ...motion.snappy }).start();
-  }, [active, bubbleShown, showValue, press, bubble, held]);
+    press.forEach((p, i) => glide(p, active === i ? 1 : 0, reduce).start());
+    bubble.forEach((b, i) => glide(b, bubbleShown || (showValue === 'drag' && active === i) ? 1 : 0, reduce).start());
+    glide(held, active !== null ? 1 : 0, reduce).start();
+  }, [active, bubbleShown, showValue, press, bubble, held, reduce]);
 
   const pan = useMemo(() => {
     const usableOf = () => Math.max(1, live.current.w - 2 * live.current.inset);
@@ -249,7 +259,7 @@ export function Slider(props: SliderProps) {
       const coarse = !!L.step && (L.step / L.span) * usableOf() >= SNAP_PX;
       const target = coarse ? L.ratioOf(snapped) : L.ratioOf(v);
       if (animate || coarse) {
-        if (target !== d.target[i]) Animated.spring(ratios[i], { toValue: target, useNativeDriver: true, ...motion.snappy }).start();
+        if (target !== d.target[i]) glide(ratios[i], target, L.reduce).start();
       } else {
         ratios[i].setValue(target);
       }
@@ -269,7 +279,7 @@ export function Slider(props: SliderProps) {
       const d = drag.current;
       if (!d.dragging) return;
       if (seek) moveTo(d.startX, true);
-      Animated.spring(ratios[d.thumb], { toValue: L.ratioOf(d.cur[d.thumb]), useNativeDriver: true, ...motion.snappy }).start();
+      glide(ratios[d.thumb], L.ratioOf(d.cur[d.thumb]), L.reduce).start();
       d.dragging = false;
       d.target = [-1, -1];
       if (!L.controlled) setInner(d.cur);
@@ -350,17 +360,18 @@ export function Slider(props: SliderProps) {
     };
   }, [w, inset, usable, range, slotW, ratios]);
 
+  // Reduce Motion: no swell, no pop-up — the halo and tooltip just fade.
   const anim = useMemo(
     () => ({
-      thumb: press.map((p) => [{ scale: p.interpolate({ inputRange: [0, 1], outputRange: [1, 1.14] }) }]),
-      halo: press.map((p) => [{ scale: p.interpolate({ inputRange: [0, 1], outputRange: [1, 1.75] }) }]),
+      thumb: press.map((p) => [{ scale: p.interpolate({ inputRange: [0, 1], outputRange: [1, reduce ? 1 : 1.14] }) }]),
+      halo: press.map((p) => [{ scale: p.interpolate({ inputRange: [0, 1], outputRange: [1, reduce ? 1 : 1.75] }) }]),
       bubble: bubble.map((b) => [
-        { translateY: b.interpolate({ inputRange: [0, 1], outputRange: [6, 0] }) },
-        { scale: b.interpolate({ inputRange: [0, 1], outputRange: [0.6, 1] }) },
+        { translateY: b.interpolate({ inputRange: [0, 1], outputRange: [reduce ? 0 : 6, 0] }) },
+        { scale: b.interpolate({ inputRange: [0, 1], outputRange: [reduce ? 1 : 0.6, 1] }) },
       ]),
-      held: [{ scale: held.interpolate({ inputRange: [0, 1], outputRange: [1, 1.025] }) }],
+      held: [{ scale: held.interpolate({ inputRange: [0, 1], outputRange: [1, reduce ? 1 : 1.025] }) }],
     }),
-    [press, bubble, held]
+    [press, bubble, held, reduce]
   );
 
   // ---- marks ----------------------------------------------------------------------------------
@@ -413,7 +424,7 @@ export function Slider(props: SliderProps) {
     <View style={[styles.barContent, { width: w, height: trackH, paddingHorizontal: Math.round(trackH * 0.32) }]}>
       <View>{icon !== undefined ? drawIcon(icon, iconColor) : null}</View>
       {showValue === 'always' ? (
-        <Text numberOfLines={1} selectable={false} style={[styles.barValue, ff, { color: textColor, fontSize: sz.font + 1 }, labelStyle]}>
+        <Text numberOfLines={1} selectable={false} maxFontSizeMultiplier={FONT_CAP} style={[styles.barValue, ff, { color: textColor, fontSize: sz.font + 1 }, labelStyle]}>
           {range ? `${fmt(vals[0])} – ${fmt(vals[1])}` : fmt(vals[0])}
         </Text>
       ) : null}
@@ -425,6 +436,7 @@ export function Slider(props: SliderProps) {
       key={key}
       numberOfLines={1}
       selectable={false}
+      maxFontSizeMultiplier={FONT_CAP}
       style={[styles.markLabel, place, ff, { fontSize: sz.font - 1, color: lit ? colors.foreground : colors.mutedForeground }, labelStyle]}
     >
       {text}
@@ -570,7 +582,7 @@ export function Slider(props: SliderProps) {
                           ]}
                         >
                           <View style={[styles.bubble, { backgroundColor: colors.foreground, borderRadius: radius.capsule(BUBBLE_H) }]}>
-                            <Text numberOfLines={1} selectable={false} style={[styles.bubbleText, ff, { color: colors.background, fontSize: sz.font }, labelStyle]}>
+                            <Text numberOfLines={1} selectable={false} maxFontSizeMultiplier={FONT_CAP} style={[styles.bubbleText, ff, { color: colors.background, fontSize: sz.font }, labelStyle]}>
                               {fmt(v)}
                             </Text>
                           </View>
@@ -583,7 +595,7 @@ export function Slider(props: SliderProps) {
           </View>
 
           {hasMarkLabels || minMax ? (
-            <View pointerEvents="none" style={[styles.labels, { height: sz.font + 8 }]}>
+            <View pointerEvents="none" style={[styles.labels, { height: Math.round(sz.font * fontScale) + 8 }]}>
               {hasMarkLabels
                 ? markList.map((m) => {
                     if (!m.label || !w) return null;
@@ -672,6 +684,22 @@ export function SliderIcon({ name, size = 20, color }: { name: SliderIconName; s
   );
 }
 
+function useReduceMotion() {
+  const [reduce, setReduce] = useState(false);
+  useEffect(() => {
+    let alive = true;
+    AccessibilityInfo.isReduceMotionEnabled()
+      .then((r) => alive && setReduce(r))
+      .catch(() => {});
+    const sub = AccessibilityInfo.addEventListener('reduceMotionChanged', setReduce);
+    return () => {
+      alive = false;
+      sub.remove();
+    };
+  }, []);
+  return reduce;
+}
+
 const styles = StyleSheet.create({
   root: { alignSelf: 'stretch' },
   row: { flexDirection: 'row', alignItems: 'flex-start', gap: 12 },
@@ -700,7 +728,7 @@ const styles = StyleSheet.create({
   },
   bubbleWrap: { position: 'absolute', width: BUBBLE_W, alignItems: 'center', transformOrigin: 'bottom' },
   bubble: {
-    height: BUBBLE_H,
+    minHeight: BUBBLE_H,
     paddingHorizontal: 10,
     minWidth: 36,
     alignItems: 'center',

package/registry/stateful-button/files/src/components/ui/stateful-button.tsx

@@ -6,6 +6,7 @@ import {
   Pressable,
   StyleSheet,
   View,
+  useWindowDimensions,
   type LayoutChangeEvent,
   type StyleProp,
   type TextStyle,
@@ -67,6 +68,9 @@ const SIZES: Record<StatefulButtonSize, { h: number; px: number; font: number; i
   lg: { h: 54, px: 22, font: 17, icon: 20, gap: 9 },
 };
 const STAGGER = 22;
+// Controls stop growing at iOS's largest standard text size (xxxL ≈ 1.35×) so they keep their shape;
+// content text scales all the way.
+const FONT_CAP = 1.35;
 const END = 1e6;
 // Connected scripts (Arabic, Indic, Thai…) roll as one piece instead of letter by letter.
 const CONNECTED = /[֐-ࣿऀ-෿฀-໿ༀ-࿿က-႟ក-៿יִ-﷿ﹰ-]/;
@@ -131,6 +135,7 @@ function Letters({ text, style, lh, space, anims, onLayout }: LettersProps) {
           <View key={i} style={{ height: lh, overflow: 'hidden' }}>
             <Animated.Text
               numberOfLines={1}
+              maxFontSizeMultiplier={FONT_CAP}
               style={[style, anims?.[i] && { opacity: anims[i].opacity, transform: [{ translateY: anims[i].translateY }] }]}
             >
               {ch}
@@ -252,8 +257,11 @@ export function StatefulButton({
   const reduce = useReduceMotion();
   const s = SIZES[size];
   const fontSize = StyleSheet.flatten(textStyle)?.fontSize ?? s.font;
-  const lh = Math.round(fontSize * 1.3);
-  const space = fontSize * 0.28;
+  // Letter boxes clip to one line, so they grow with the (capped) text size; the Text's own lineHeight scales itself.
+  const textScale = Math.min(Math.max(useWindowDimensions().fontScale || 1, 1), FONT_CAP);
+  const lineHeight = Math.round(fontSize * 1.3);
+  const lh = Math.ceil(lineHeight * textScale);
+  const space = fontSize * 0.28 * textScale;
 
   const [inner, setInner] = useState<StatefulButtonState>('idle');
   const current = state ?? inner;
@@ -421,7 +429,7 @@ export function StatefulButton({
     setWidths((prev) => (prev[text] === w ? prev : { ...prev, [text]: w }));
   };
 
-  const textBase: StyleProp<TextStyle> = [styles.label, { fontSize: s.font, fontFamily: font.family }, textStyle, { lineHeight: lh }];
+  const textBase: StyleProp<TextStyle> = [styles.label, { fontSize: s.font, fontFamily: font.family }, textStyle, { lineHeight }];
   // Press feedback: a light wash on dark fills, a faint shade on light or transparent ones.
   const wash = variant === 'primary' && readableOn(look[0].bg) === '#ffffff' ? alpha('#ffffff', 0.14) : alpha(colors.foreground, 0.07);
   const corner = pill ? radius.capsule(s.h) : radius.md;
@@ -444,7 +452,7 @@ export function StatefulButton({
             style={[
               styles.surface,
               {
-                height: s.h,
+                minHeight: s.h,
                 minWidth: s.h,
                 paddingHorizontal: s.px,
                 borderRadius: corner,

package/registry/stepper/files/src/components/ui/stepper.tsx

@@ -1,10 +1,12 @@
 import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import {
+  AccessibilityInfo,
   Animated,
   Pressable,
   StyleSheet,
   Text,
   View,
+  useWindowDimensions,
   type AccessibilityActionEvent,
   type LayoutChangeEvent,
   type StyleProp,
@@ -65,6 +67,10 @@ export interface StepperProps {
   valueStyle?: StyleProp<TextStyle>;
 }
 
+// Controls stop growing at iOS's largest standard text size (xxxL ≈ 1.35×) so they keep their shape;
+// content text scales all the way.
+const FONT_CAP = 1.35;
+
 /** Every dimension in one table so the sizes read clearly different. */
 const SIZES: Record<StepperSize | 'xs', { btn: number; font: number; icon: number; num: number }> = {
   xs: { btn: 28, font: 15, icon: 12, num: 26 },
@@ -120,6 +126,7 @@ export function Stepper({
 }: StepperProps) {
   const { colors, radius, font } = useKit();
   const ff = font.family ? { fontFamily: font.family } : null;
+  const reduce = useReduceMotion();
   const variant: StepperVariant = variantProp in LEGACY ? LEGACY[variantProp as StepperLegacyVariant] : (variantProp as StepperVariant);
   const vertical = variant !== 'cart' && (orientation ? orientation === 'vertical' : variantProp === 'vertical');
   const tint = accent ?? colors.accent;
@@ -134,9 +141,11 @@ export function Stepper({
   const [track, setTrack] = useState({ v: current, dir: 1 });
   if (track.v !== current) setTrack({ v: current, dir: current > track.v ? 1 : -1 });
 
-  // Press past a limit: the number nudges toward the wall and springs back.
+  // Press past a limit: the number nudges toward the wall and springs back (not with Reduce Motion;
+  // the dimmed button already says it's the limit).
   const bump = useRef(new Animated.Value(0)).current;
   const nudge = (dir: 1 | -1) => {
+    if (reduce) return;
     Animated.sequence([
       Animated.timing(bump, { toValue: dir * 4, duration: 60, useNativeDriver: true }),
       Animated.spring(bump, { toValue: 0, useNativeDriver: true, ...motion.bouncy }),
@@ -238,6 +247,7 @@ export function Stepper({
       limit={dir === 1 ? atMax : atMin}
       disabled={!!disabled}
       label={a11y ?? `${dir === 1 ? 'Increase' : 'Decrease'}${title ? ` ${title}` : ''}`}
+      reduce={reduce}
       style={buttonStyle}
       onPressIn={() => startRepeat(dir)}
       onPressOut={stopRepeat}
@@ -246,9 +256,9 @@ export function Stepper({
 
   const number = (
     <View style={styles.roll}>
-      <RollingText text={text} dir={track.dir} style={numStyle} />
+      <RollingText text={text} dir={track.dir} style={numStyle} reduce={reduce} />
       {suffixText ? (
-        <Text style={[styles.num, styles.suffix, numStyle, { fontSize: fontSize * 0.82, color: isCart ? alpha(onCart, 0.8) : colors.mutedForeground }]}>
+        <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.num, styles.suffix, numStyle, { fontSize: fontSize * 0.82, color: isCart ? alpha(onCart, 0.8) : colors.mutedForeground }]}>
           {suffixText}
         </Text>
       ) : null}
@@ -287,6 +297,7 @@ export function Stepper({
       addLabel={addLabel}
       bump={bump}
       disabled={!!disabled}
+      reduce={reduce}
       dec={button(-1, removes ? ICON.trash : ICON.minus, removes ? `Remove${title ? ` ${title}` : ''}` : undefined)}
       inc={button(1)}
       onAdd={() => startRepeat(1)}
@@ -300,7 +311,7 @@ export function Stepper({
           styles.value,
           vertical
             ? { minHeight: s.num, minWidth: s.btn, paddingVertical: 2 }
-            : { minWidth: s.num, height: s.btn, paddingHorizontal: variant === 'outline' ? 8 : 4 },
+            : { minWidth: s.num, minHeight: s.btn, paddingHorizontal: variant === 'outline' ? 8 : 4 },
           { transform: [vertical ? { translateY: Animated.multiply(bump, -1) } : { translateX: bump }] },
         ]}
       >
@@ -340,6 +351,7 @@ function CartControl({
   addLabel,
   bump,
   disabled,
+  reduce,
   dec,
   inc,
   onAdd,
@@ -358,6 +370,7 @@ function CartControl({
   addLabel?: string;
   bump: Animated.Value;
   disabled: boolean;
+  reduce: boolean;
   dec: React.ReactNode;
   inc: React.ReactNode;
   onAdd: () => void;
@@ -380,18 +393,20 @@ function CartControl({
 
   const measured = textW > 0 && (!addLabel || addW > 0);
   useEffect(() => {
-    // Snap until the rulers have reported; after that every change springs.
-    if (!settled.current) {
+    // Snap until the rulers have reported; after that every change springs (or snaps, with Reduce Motion).
+    if (!settled.current || reduce) {
       width.setValue(target);
       settled.current = measured;
       return;
     }
     Animated.spring(width, { toValue: target, useNativeDriver: false, ...motion.snappy }).start();
-  }, [target, measured, width]);
+  }, [target, measured, width, reduce]);
 
   useEffect(() => {
-    Animated.spring(open, { toValue: collapsed ? 0 : 1, useNativeDriver: true, ...motion.snappy }).start();
-  }, [collapsed, open]);
+    // Reduce Motion: − and the number only fade in (their slide is flattened below).
+    if (reduce) Animated.timing(open, { toValue: collapsed ? 0 : 1, duration: 150, useNativeDriver: true }).start();
+    else Animated.spring(open, { toValue: collapsed ? 0 : 1, useNativeDriver: true, ...motion.snappy }).start();
+  }, [collapsed, open, reduce]);
 
   const measure = (set: (n: number) => void) => (e: LayoutChangeEvent) => set(Math.ceil(e.nativeEvent.layout.width));
 
@@ -407,15 +422,15 @@ function CartControl({
       {/* Off-screen rulers inside a wide box, so nothing squeezes them. */}
       <View pointerEvents="none" style={[styles.ruler, styles.hidden]}>
         <View onLayout={measure(setTextW)} style={styles.row}>
-          <Text style={[styles.num, numStyle]}>{text}</Text>
-          {suffixText ? <Text style={[styles.num, styles.suffix, numStyle, { fontSize: (numStyle.fontSize ?? s.font) * 0.82 }]}>{suffixText}</Text> : null}
+          <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.num, numStyle]}>{text}</Text>
+          {suffixText ? <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.num, styles.suffix, numStyle, { fontSize: (numStyle.fontSize ?? s.font) * 0.82 }]}>{suffixText}</Text> : null}
         </View>
       </View>
 
       <View style={[styles.cartRow, { width: openW }]} pointerEvents="box-none">
         <Animated.View
           pointerEvents={collapsed ? 'none' : 'auto'}
-          style={[styles.row, { opacity: open, transform: [{ translateX: open.interpolate({ inputRange: [0, 1], outputRange: [s.btn * 0.5, 0] }) }] }]}
+          style={[styles.row, { opacity: open, transform: [{ translateX: open.interpolate({ inputRange: [0, 1], outputRange: [reduce ? 0 : s.btn * 0.5, 0] }) }] }]}
         >
           {dec}
           <Animated.View style={[styles.value, { width: valueW, height: s.btn, transform: [{ translateX: bump }] }]}>{number}</Animated.View>
@@ -441,8 +456,8 @@ function CartControl({
               onPressOut={onAddEnd}
               style={({ pressed }) => [styles.add, { height: s.btn, paddingHorizontal: Math.round(s.btn * 0.36) }, pressed && { backgroundColor: alpha(fg, 0.16) }]}
             >
-              <Glyph d={ICON.plus} size={s.icon} color={fg} />
-              <Text style={[styles.addText, ff, { color: fg, fontSize: s.font - 2 }]}>{addLabel}</Text>
+              <Glyph d={ICON.plus} size={s.icon} color={fg} reduce={reduce} />
+              <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.addText, ff, { color: fg, fontSize: s.font - 2 }]}>{addLabel}</Text>
             </Pressable>
           </Animated.View>
         </View>
@@ -470,6 +485,7 @@ function StepButton({
   limit,
   disabled,
   label,
+  reduce,
   style,
   onPressIn,
   onPressOut,
@@ -485,6 +501,7 @@ function StepButton({
   limit: boolean;
   disabled: boolean;
   label: string;
+  reduce: boolean;
   style?: StyleProp<ViewStyle>;
   onPressIn: () => void;
   onPressOut: () => void;
@@ -492,7 +509,11 @@ function StepButton({
   // Scale and dim share one native-driven view; nothing JS-driven touches it.
   const scale = useRef(new Animated.Value(1)).current;
   const dim = useRef(new Animated.Value(limit ? 0.32 : 1)).current;
-  const spring = (to: number) => Animated.spring(scale, { toValue: to, useNativeDriver: true, ...motion.bouncy }).start();
+  // Reduce Motion: no press squeeze; the pressed background still shows the press.
+  const spring = (to: number) => {
+    if (reduce) scale.setValue(1);
+    else Animated.spring(scale, { toValue: to, useNativeDriver: true, ...motion.bouncy }).start();
+  };
 
   useEffect(() => {
     Animated.timing(dim, { toValue: limit ? 0.32 : 1, duration: motion.fast, useNativeDriver: true }).start();
@@ -533,22 +554,23 @@ function StepButton({
           style,
         ]}
       >
-        <Glyph d={glyph} size={icon} color={fg} />
+        <Glyph d={glyph} size={icon} color={fg} reduce={reduce} />
       </Pressable>
     </Animated.View>
   );
 }
 
 /** Stroked icon; pops in when its shape changes (− ↔ trash). */
-function Glyph({ d, size, color }: { d: string; size: number; color: string }) {
+function Glyph({ d, size, color, reduce }: { d: string; size: number; color: string; reduce: boolean }) {
   const pop = useRef(new Animated.Value(1)).current;
   const prev = useRef(d);
   useEffect(() => {
     if (prev.current === d) return;
     prev.current = d;
+    if (reduce) return;
     pop.setValue(0.55);
     Animated.spring(pop, { toValue: 1, useNativeDriver: true, ...motion.bouncy }).start();
-  }, [d, pop]);
+  }, [d, pop, reduce]);
   const trash = d === ICON.trash;
   return (
     <Animated.View style={{ transform: [{ scale: pop }] }}>
@@ -559,37 +581,48 @@ function Glyph({ d, size, color }: { d: string; size: number; color: string }) {
   );
 }
 
-/** Text where every changed character slides out and its replacement slides in. */
-function RollingText({ text, dir, style }: { text: string; dir: number; style: TextStyle }) {
+/** Text where every changed character slides out and its replacement slides in (swaps at once with Reduce Motion). */
+function RollingText({ text, dir, style, reduce }: { text: string; dir: number; style: TextStyle; reduce: boolean }) {
   const chars = [...text];
   return (
     <View style={styles.roll}>
       {chars.map((c, i) => (
         // Keyed from the right so the ones digit stays the ones digit when the number grows.
-        <RollingChar key={chars.length - i} char={c} dir={dir} style={style} />
+        <RollingChar key={chars.length - i} char={c} dir={dir} style={style} reduce={reduce} />
       ))}
     </View>
   );
 }
 
-function RollingChar({ char, dir, style }: { char: string; dir: number; style: TextStyle }) {
+function RollingChar({ char, dir, style, reduce }: { char: string; dir: number; style: TextStyle; reduce: boolean }) {
   const [pair, setPair] = useState<{ cur: string; prev: string | null; dir: number }>({ cur: char, prev: null, dir });
   if (pair.cur !== char) setPair({ cur: char, prev: pair.cur, dir });
   const t = useRef(new Animated.Value(1)).current;
-  const h = (style.lineHeight as number) ?? 24;
+  // The digit window follows the text's own (capped) Dynamic Type scale, so a scaled digit isn't cropped.
+  const { fontScale } = useWindowDimensions();
+  const h = ((style.lineHeight as number) ?? 24) * Math.min(fontScale, FONT_CAP);
 
+  // Each change rolls once (a Reduce Motion toggle alone doesn't replay it).
+  const played = useRef(pair);
   useLayoutEffect(() => {
-    if (pair.prev === null) return;
+    if (pair.prev === null || played.current === pair) return;
+    played.current = pair;
+    if (reduce) {
+      // At 1 the old character is gone and the new one is in place: the final value, no roll.
+      t.setValue(1);
+      return;
+    }
     t.setValue(0);
     Animated.spring(t, { toValue: 1, useNativeDriver: true, ...motion.snappy }).start();
-  }, [pair, t]);
+  }, [pair, t, reduce]);
 
   const d = pair.dir * h * 0.8;
   return (
     <View style={[styles.charBox, { height: h }]}>
-      <Text style={[styles.num, style, styles.hidden]}>{pair.cur}</Text>
+      <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.num, style, styles.hidden]}>{pair.cur}</Text>
       {pair.prev !== null ? (
         <Animated.Text
+          maxFontSizeMultiplier={FONT_CAP}
           style={[
             styles.num,
             styles.layer,
@@ -607,6 +640,7 @@ function RollingChar({ char, dir, style }: { char: string; dir: number; style: T
         </Animated.Text>
       ) : null}
       <Animated.Text
+        maxFontSizeMultiplier={FONT_CAP}
         style={[
           styles.num,
           styles.layer,
@@ -623,6 +657,22 @@ function RollingChar({ char, dir, style }: { char: string; dir: number; style: T
   );
 }
 
+function useReduceMotion() {
+  const [reduce, setReduce] = useState(false);
+  useEffect(() => {
+    let alive = true;
+    AccessibilityInfo.isReduceMotionEnabled()
+      .then((r) => alive && setReduce(r))
+      .catch(() => {});
+    const sub = AccessibilityInfo.addEventListener('reduceMotionChanged', setReduce);
+    return () => {
+      alive = false;
+      sub.remove();
+    };
+  }, []);
+  return reduce;
+}
+
 const styles = StyleSheet.create({
   // Hugs its content in a column without hijacking the cross-axis alignment of a row.
   self: { alignItems: 'flex-start', justifyContent: 'center' },