@expokit/cli 0.3.0 → 0.4.1

package/registry/date-picker/files/src/components/ui/date-picker.tsx

@@ -1,5 +1,6 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState, type ComponentRef } from 'react';
 import {
+  AccessibilityInfo,
   Animated,
   Easing,
   Modal,
@@ -132,6 +133,9 @@ type FlatProps = DatePickerBaseProps & {
   presets?: boolean | DatePickerPreset<Picked>[];
 };
 
+// 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 SIZES: Record<DatePickerSize, { h: number; font: number; pad: number; icon: number }> = {
   sm: { h: 46, font: 15, pad: 12, icon: 17 },
   md: { h: 56, font: 16, pad: 16, icon: 19 },
@@ -241,6 +245,10 @@ export function DatePicker(props: DatePickerProps) {
   const restIcon = iconColor ?? colors.mutedForeground;
   const { width: winW, height: winH } = useWindowDimensions();
   const ranged = mode === 'range';
+  const reduce = useReduceMotion();
+  // The pan responder is built once; it reads Reduce Motion through this ref.
+  const live = useRef({ reduce });
+  live.current = { reduce };
 
   const [inner, setInner] = useState<Picked>(defaultValue);
   const current = value !== undefined ? value : inner;
@@ -251,7 +259,7 @@ export function DatePicker(props: DatePickerProps) {
   const [draft, setDraft] = useState<Picked>(null);
   const [calMonth, setCalMonth] = useState(new Date());
   const [anchor, setAnchor] = useState({ x: 0, y: 0, w: 0, h: 0 });
-  const fieldRef = useRef<View>(null);
+  const fieldRef = useRef<ComponentRef<typeof View>>(null);
   const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const ok = !error && !!success;
@@ -269,26 +277,36 @@ export function DatePicker(props: DatePickerProps) {
   const wide = presentation === 'dialog' || (presentation === 'auto' && winW >= 640);
 
   useEffect(() => {
+    if (reduce) {
+      float.setValue(floating ? 1 : 0);
+      return;
+    }
     Animated.spring(float, { toValue: floating ? 1 : 0, useNativeDriver: true, ...motion.snappy }).start();
-  }, [floating, float]);
+  }, [floating, float, reduce]);
   useEffect(() => {
     Animated.timing(focus, { toValue: open ? 1 : 0, duration: 180, easing: Easing.out(Easing.quad), useNativeDriver: false }).start();
-    Animated.spring(halo, { toValue: open ? 1 : 0, useNativeDriver: true, ...motion.snappy }).start();
-  }, [open, focus, halo]);
+    // Reduce Motion: the halo fades in place (its scale interpolation is flat).
+    if (reduce) Animated.timing(halo, { toValue: open ? 1 : 0, duration: 150, useNativeDriver: true }).start();
+    else Animated.spring(halo, { toValue: open ? 1 : 0, useNativeDriver: true, ...motion.snappy }).start();
+  }, [open, focus, halo, reduce]);
   useEffect(() => {
-    Animated.spring(check, { toValue: ok ? 1 : 0, useNativeDriver: true, ...motion.bouncy }).start();
-  }, [ok, check]);
+    if (reduce) Animated.timing(check, { toValue: ok ? 1 : 0, duration: 150, useNativeDriver: true }).start();
+    else Animated.spring(check, { toValue: ok ? 1 : 0, useNativeDriver: true, ...motion.bouncy }).start();
+  }, [ok, check, reduce]);
   useEffect(() => {
-    if (!error) return;
+    // Reduce Motion: no shake — the red border and message carry the error.
+    if (!error || live.current.reduce) return;
     shake.setValue(0);
     Animated.sequence([10, -8, 6, -4, 0].map((x) => Animated.timing(shake, { toValue: x, duration: 55, useNativeDriver: true }))).start();
   }, [error, shake]);
   useEffect(() => {
     if (open) {
       drag.setValue(0);
-      Animated.spring(show, { toValue: 1, useNativeDriver: true, ...(asSheet ? motion.gentle : motion.snappy) }).start();
+      // Reduce Motion: the panel fades in place (its translate / scale interpolations are flat).
+      if (reduce) Animated.timing(show, { toValue: 1, duration: 150, useNativeDriver: true }).start();
+      else Animated.spring(show, { toValue: 1, useNativeDriver: true, ...(asSheet ? motion.gentle : motion.snappy) }).start();
     } else if (mounted) {
-      Animated.timing(show, { toValue: 0, duration: motion.fast + 40, easing: Easing.in(Easing.quad), useNativeDriver: true }).start(
+      Animated.timing(show, { toValue: 0, duration: reduce ? 150 : motion.fast + 40, easing: Easing.in(Easing.quad), useNativeDriver: true }).start(
         ({ finished }) => finished && setMounted(false)
       );
     }
@@ -395,21 +413,23 @@ export function DatePicker(props: DatePickerProps) {
   const same = (a: Picked, b: Picked) =>
     isRange(a) && isRange(b) ? isSameDay(a.start, b.start) && isSameDay(a.end, b.end) : !isRange(a) && !isRange(b) && isSameDay(a, b);
 
-  const pan = useMemo(
-    () =>
-      PanResponder.create({
-        onMoveShouldSetPanResponder: (_, g) => g.dy > 4 && Math.abs(g.dy) > Math.abs(g.dx),
-        onPanResponderMove: (_, g) => drag.setValue(Math.max(0, g.dy)),
-        onPanResponderRelease: (_, g) => {
-          if (g.dy > 110 || g.vy > 1.1) {
-            setOpen(false);
-            onOpenChange?.(false);
-          } else Animated.spring(drag, { toValue: 0, useNativeDriver: true, ...motion.snappy }).start();
-        },
-        onPanResponderTerminate: () => Animated.spring(drag, { toValue: 0, useNativeDriver: true, ...motion.snappy }).start(),
-      }),
-    [drag, onOpenChange]
-  );
+  const pan = useMemo(() => {
+    const settle = () =>
+      live.current.reduce
+        ? Animated.timing(drag, { toValue: 0, duration: 150, easing: Easing.bezier(0.32, 0.72, 0, 1), useNativeDriver: true }).start()
+        : Animated.spring(drag, { toValue: 0, useNativeDriver: true, ...motion.snappy }).start();
+    return PanResponder.create({
+      onMoveShouldSetPanResponder: (_, g) => g.dy > 4 && Math.abs(g.dy) > Math.abs(g.dx),
+      onPanResponderMove: (_, g) => drag.setValue(Math.max(0, g.dy)),
+      onPanResponderRelease: (_, g) => {
+        if (g.dy > 110 || g.vy > 1.1) {
+          setOpen(false);
+          onOpenChange?.(false);
+        } else settle();
+      },
+      onPanResponderTerminate: settle,
+    });
+  }, [drag, onOpenChange]);
 
   const active = error ? colors.danger : tint;
   const rest = error ? colors.danger : ok ? colors.success : ((userBorder as string | undefined) ?? colors.input);
@@ -469,7 +489,7 @@ export function DatePicker(props: DatePickerProps) {
                   },
                 ]}
               >
-                <Text style={[styles.presetText, ff, { color: on ? tint : colors.foreground }]}>{p.label}</Text>
+                <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.presetText, ff, { color: on ? tint : colors.foreground }]}>{p.label}</Text>
               </Pressable>
             );
           })}
@@ -498,14 +518,16 @@ export function DatePicker(props: DatePickerProps) {
             accessibilityRole="button"
             style={({ pressed }) => [styles.footBtn, { borderRadius: radius.md, opacity: draft ? (pressed ? 0.6 : 1) : 0.4 }]}
           >
-            <Text style={[styles.footText, ff, { color: colors.foreground }]}>Clear</Text>
+            <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.footText, ff, { color: colors.foreground }]}>
+              Clear
+            </Text>
           </Pressable>
           <Pressable
             onPress={done}
             accessibilityRole="button"
             style={({ pressed }) => [styles.footBtn, styles.footMain, { backgroundColor: tint, borderRadius: radius.md, opacity: pressed ? 0.85 : 1 }]}
           >
-            <Text style={[styles.footText, ff, { color: readableOn(tint) }]}>
+            <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.footText, ff, { color: readableOn(tint) }]}>
               {draftDays > 1 ? `Done · ${draftDays} days` : 'Done'}
             </Text>
           </Pressable>
@@ -558,13 +580,14 @@ export function DatePicker(props: DatePickerProps) {
               borderRadius: fieldRadius + 4,
               borderColor: alpha(active, 0.2),
               opacity: halo,
-              transform: [{ scale: halo.interpolate({ inputRange: [0, 1], outputRange: [0.97, 1] }) }],
+              transform: [{ scale: halo.interpolate({ inputRange: [0, 1], outputRange: [reduce ? 1 : 0.97, 1] }) }],
             },
           ]}
         />
-        <Animated.View style={[styles.field, { height: sz.h, borderRadius: fieldRadius, backgroundColor: bg }, userField, { borderColor }]}>
+        <Animated.View style={[styles.field, { minHeight: sz.h, borderRadius: fieldRadius, backgroundColor: bg }, userField, { borderColor }]}>
           <Text
             numberOfLines={1}
+            maxFontSizeMultiplier={FONT_CAP}
             style={[
               styles.value,
               ff,
@@ -592,7 +615,7 @@ export function DatePicker(props: DatePickerProps) {
               ]}
             >
               {/* The notch: the label paints the surface over the border, so it matches the rendered width. */}
-              <Animated.Text numberOfLines={1} style={[styles.label, ff, { fontSize: sz.font, backgroundColor: bg }, labelStyle, { color: labelColor }]}>
+              <Animated.Text numberOfLines={1} maxFontSizeMultiplier={FONT_CAP} style={[styles.label, ff, { fontSize: sz.font, backgroundColor: bg }, labelStyle, { color: labelColor }]}>
                 {label}
               </Animated.Text>
             </Animated.View>
@@ -603,7 +626,7 @@ export function DatePicker(props: DatePickerProps) {
               style={{
                 display: ok ? 'flex' : 'none',
                 opacity: check,
-                transform: [{ scale: check.interpolate({ inputRange: [0, 1], outputRange: [0.3, 1] }) }],
+                transform: [{ scale: check.interpolate({ inputRange: [0, 1], outputRange: [reduce ? 1 : 0.3, 1] }) }],
               }}
             >
               <Icon name="check" size={sz.icon} color={colors.success} />
@@ -623,7 +646,7 @@ export function DatePicker(props: DatePickerProps) {
           </View>
         </Animated.View>
       </Pressable>
-      {message ? <FieldMessage key={tone + message} text={message} tone={tone} style={messageStyle} /> : null}
+      {message ? <FieldMessage key={tone + message} text={message} tone={tone} reduce={reduce} style={messageStyle} /> : null}
 
       <Modal visible={mounted} transparent animationType="none" statusBarTranslucent onRequestClose={close}>
         <Animated.View style={[StyleSheet.absoluteFill, { backgroundColor: asSheet ? colors.overlay : 'transparent', opacity: show }]}>
@@ -644,11 +667,15 @@ export function DatePicker(props: DatePickerProps) {
                   ? {
                       opacity: show,
                       transform: [
-                        { scale: show.interpolate({ inputRange: [0, 1], outputRange: [0.94, 1] }) },
-                        { translateY: Animated.add(show.interpolate({ inputRange: [0, 1], outputRange: [16, 0] }), drag) },
+                        { scale: show.interpolate({ inputRange: [0, 1], outputRange: [reduce ? 1 : 0.94, 1] }) },
+                        { translateY: Animated.add(show.interpolate({ inputRange: [0, 1], outputRange: [reduce ? 0 : 16, 0] }), drag) },
                       ],
                     }
-                  : { transform: [{ translateY: Animated.add(show.interpolate({ inputRange: [0, 1], outputRange: [winH * 0.85, 0] }), drag) }] },
+                  : {
+                      // Reduce Motion: the sheet fades in place instead of sliding up.
+                      opacity: reduce ? show : 1,
+                      transform: [{ translateY: Animated.add(show.interpolate({ inputRange: [0, 1], outputRange: [reduce ? 0 : winH * 0.85, 0] }), drag) }],
+                    },
               ]}
             >
               <View {...pan.panHandlers} style={styles.sheetHeader}>
@@ -681,8 +708,8 @@ export function DatePicker(props: DatePickerProps) {
               {
                 opacity: show,
                 transform: [
-                  { translateY: show.interpolate({ inputRange: [0, 1], outputRange: [below ? -8 : 8, 0] }) },
-                  { scale: show.interpolate({ inputRange: [0, 1], outputRange: [0.96, 1] }) },
+                  { translateY: show.interpolate({ inputRange: [0, 1], outputRange: [reduce ? 0 : below ? -8 : 8, 0] }) },
+                  { scale: show.interpolate({ inputRange: [0, 1], outputRange: [reduce ? 1 : 0.96, 1] }) },
                 ],
               },
               below ? { top: anchor.y + anchor.h + 6 } : { bottom: Math.max(12, winH - anchor.y + 6) },
@@ -697,17 +724,28 @@ export function DatePicker(props: DatePickerProps) {
 }
 
 /** Helper / error / success line that slides in; error and success carry an icon. */
-function FieldMessage({ text, tone, style }: { text: string; tone: 'error' | 'success' | 'helper'; style?: StyleProp<TextStyle> }) {
+function FieldMessage({
+  text,
+  tone,
+  reduce,
+  style,
+}: {
+  text: string;
+  tone: 'error' | 'success' | 'helper';
+  reduce: boolean;
+  style?: StyleProp<TextStyle>;
+}) {
   const { colors, font } = useKit();
   const enter = useRef(new Animated.Value(tone === 'helper' ? 1 : 0)).current; // native
   useEffect(() => {
-    Animated.spring(enter, { toValue: 1, useNativeDriver: true, ...motion.snappy }).start();
-  }, [enter]);
+    if (reduce) Animated.timing(enter, { toValue: 1, duration: 150, useNativeDriver: true }).start();
+    else Animated.spring(enter, { toValue: 1, useNativeDriver: true, ...motion.snappy }).start();
+  }, [enter, reduce]);
   const color = tone === 'error' ? colors.danger : tone === 'success' ? colors.success : colors.mutedForeground;
   return (
     <Animated.View
       accessibilityLiveRegion="polite"
-      style={[styles.message, { opacity: enter, transform: [{ translateY: enter.interpolate({ inputRange: [0, 1], outputRange: [4, 0] }) }] }]}
+      style={[styles.message, { opacity: enter, transform: [{ translateY: enter.interpolate({ inputRange: [0, 1], outputRange: [reduce ? 0 : 4, 0] }) }] }]}
     >
       {tone !== 'helper' ? <Icon name={tone === 'error' ? 'alert' : 'checkCircle'} size={14} color={color} /> : null}
       <Text style={[styles.helper, font.family ? { fontFamily: font.family } : null, { color }, style, tone !== 'helper' && { color }]}>{text}</Text>
@@ -747,6 +785,22 @@ function Icon({ name, size, color, strokeWidth = 1.8 }: { name: IconName; size:
   );
 }
 
+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({
   field: { borderWidth: 1.5, justifyContent: 'center' },
   halo: { position: 'absolute', top: -4, left: -4, right: -4, bottom: -4, borderWidth: 4 },
@@ -775,11 +829,11 @@ const styles = StyleSheet.create({
   presetScroll: { flexGrow: 0, flexShrink: 0 },
   calendarScroll: { flexGrow: 0, flexShrink: 1 },
   presets: { gap: 8, paddingHorizontal: 16, paddingVertical: 8 },
-  preset: { height: 34, paddingHorizontal: 14, borderWidth: 1, alignItems: 'center', justifyContent: 'center' },
+  preset: { minHeight: 34, paddingHorizontal: 14, borderWidth: 1, alignItems: 'center', justifyContent: 'center' },
   presetText: { fontSize: 13.5, fontWeight: '400' },
   calendar: { paddingHorizontal: 16, paddingTop: 4, paddingBottom: 6 },
   footer: { flexDirection: 'row', flexShrink: 0, gap: 8, paddingTop: 12, paddingHorizontal: 16, borderTopWidth: StyleSheet.hairlineWidth },
-  footBtn: { height: 46, paddingHorizontal: 20, alignItems: 'center', justifyContent: 'center' },
+  footBtn: { minHeight: 46, paddingHorizontal: 20, alignItems: 'center', justifyContent: 'center' },
   footMain: { flex: 1 },
   footText: { fontSize: 15, fontWeight: '400' },
   popover: {

package/registry/date-picker/files/src/lib/kit.tsx

@@ -181,14 +181,17 @@ export function useKit(): Theme {
   return useMemo(() => build(scheme, ctx?.overrides), [scheme, ctx?.overrides]);
 }
 
-/** Shared motion presets so the whole kit moves the same way. */
+/**
+ * Shared motion presets so the whole kit moves the same way. Every spring is critically damped
+ * (damping ≥ 2·√(stiffness·mass)): it settles smoothly with no overshoot or wobble.
+ */
 export const motion = {
   /** Toggles, selection indicators. */
-  snappy: { damping: 18, stiffness: 260, mass: 0.8 },
-  /** Press feedback, pops. */
-  bouncy: { damping: 11, stiffness: 220, mass: 0.7 },
+  snappy: { damping: 30, stiffness: 260, mass: 0.8 },
+  /** Press feedback, pops. (Kept under its old name; it no longer bounces.) */
+  bouncy: { damping: 26, stiffness: 220, mass: 0.7 },
   /** Sheets, layout changes. */
-  gentle: { damping: 22, stiffness: 160, mass: 1 },
+  gentle: { damping: 27, stiffness: 160, mass: 1 },
   fast: 160,
   normal: 240,
 };

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

@@ -104,6 +104,9 @@ export interface DialogProps {
 }
 
 const SHAKE = [10, -9, 7, -5, 3, 0];
+// 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;
 
 /**
  * A centred alert dialog. The scrim fades in while the card springs from 0.92 to full size; an
@@ -137,7 +140,8 @@ export function Dialog({
   accent,
   style,
 }: DialogProps) {
-  const { colors, radius, dark } = useKit();
+  const { colors, radius, dark, font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
   const uid = useId().replace(/[^a-zA-Z0-9]/g, '');
   const reduceMotion = useReduceMotion();
   const destructive = variant === 'destructive';
@@ -324,6 +328,7 @@ export function Dialog({
       maxLength={prompt.maxLength}
       selectTextOnFocus={prompt.selectTextOnFocus ?? true}
       autoFocus
+      maxFontSizeMultiplier={FONT_CAP}
       returnKeyType="done"
       onSubmitEditing={() => run(list[confirmIndex], confirmIndex)}
       onFocus={() => setFocused(true)}
@@ -331,6 +336,7 @@ export function Dialog({
       selectionColor={accent ?? colors.accent}
       style={[
         ios ? styles.inputIos : styles.input,
+        ff,
         {
           color: colors.foreground,
           backgroundColor: alpha(colors.foreground, dark ? 0.07 : 0.04),
@@ -351,19 +357,19 @@ export function Dialog({
       {title ? (
         <Text
           accessibilityRole="header"
-          style={[ios ? styles.titleIos : styles.title, { color: colors.foreground }, centred && styles.textCenter]}
+          style={[ios ? styles.titleIos : styles.title, ff, { color: colors.foreground }, centred && styles.textCenter]}
         >
           {title}
         </Text>
       ) : null}
       {description ? (
-        <Text style={[ios ? styles.descIos : styles.desc, { color: colors.mutedForeground }, centred && styles.textCenter]}>
+        <Text style={[ios ? styles.descIos : styles.desc, ff, { color: colors.mutedForeground }, centred && styles.textCenter]}>
           {description}
         </Text>
       ) : null}
       {field ? <View style={ios ? styles.fieldIos : styles.field}>{field}</View> : null}
       {error ? (
-        <Text accessibilityLiveRegion="polite" style={[styles.error, { color: colors.danger }, centred && styles.textCenter]}>
+        <Text accessibilityLiveRegion="polite" style={[styles.error, ff, { color: colors.danger }, centred && styles.textCenter]}>
           {error}
         </Text>
       ) : null}
@@ -514,6 +520,8 @@ function PillButton({
   onPress: () => void;
   style?: StyleProp<ViewStyle>;
 }) {
+  const { font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
   const press = useRef(new Animated.Value(0)).current;
   const to = (v: number) => Animated.spring(press, { toValue: v, useNativeDriver: true, ...motion.snappy }).start();
   return (
@@ -538,7 +546,7 @@ function PillButton({
           },
         ]}
       >
-        <Text numberOfLines={1} style={[styles.pillText, { color: fg, opacity: loading ? 0 : 1 }]}>
+        <Text numberOfLines={1} maxFontSizeMultiplier={FONT_CAP} style={[styles.pillText, ff, { color: fg, opacity: loading ? 0 : 1 }]}>
           {label}
         </Text>
         {loading ? <ActivityIndicator style={StyleSheet.absoluteFill} size="small" color={fg} /> : null}
@@ -565,6 +573,8 @@ function IosButton({
   onPress: () => void;
   style?: StyleProp<ViewStyle>;
 }) {
+  const { font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
   const hl = useRef(new Animated.Value(0)).current;
   return (
     <Pressable
@@ -581,7 +591,7 @@ function IosButton({
       style={[styles.iosButton, style]}
     >
       <Animated.View pointerEvents="none" style={[StyleSheet.absoluteFill, { backgroundColor: highlight, opacity: hl }]} />
-      <Text numberOfLines={1} style={[styles.iosText, { color, opacity: loading ? 0 : disabled ? 0.4 : 1 }]}>
+      <Text numberOfLines={1} maxFontSizeMultiplier={FONT_CAP} style={[styles.iosText, ff, { color, opacity: loading ? 0 : disabled ? 0.4 : 1 }]}>
         {label}
       </Text>
       {loading ? <ActivityIndicator style={StyleSheet.absoluteFill} size="small" color={color} /> : null}
@@ -744,14 +754,14 @@ const styles = StyleSheet.create({
   textCenter: { textAlign: 'center' },
   field: { marginTop: 16 },
   fieldIos: { marginTop: 14 },
-  input: { height: 48, paddingHorizontal: 14, fontSize: 16, borderWidth: 1 },
-  inputIos: { height: 36, paddingHorizontal: 10, fontSize: 14, borderWidth: StyleSheet.hairlineWidth },
+  input: { minHeight: 48, paddingHorizontal: 14, fontSize: 16, borderWidth: 1 },
+  inputIos: { minHeight: 36, paddingHorizontal: 10, fontSize: 14, borderWidth: StyleSheet.hairlineWidth },
   error: { fontSize: 13, lineHeight: 18, fontWeight: '400', marginTop: 8 },
   children: { marginTop: 14 },
   row: { flexDirection: 'row' },
   flex: { flex: 1 },
   actions: { gap: 10, padding: 22, paddingTop: 22 },
-  pill: { height: 48, alignItems: 'center', justifyContent: 'center', paddingHorizontal: 18 },
+  pill: { minHeight: 48, alignItems: 'center', justifyContent: 'center', paddingHorizontal: 18 },
   pillText: { fontSize: 16, lineHeight: 21, fontWeight: '400', letterSpacing: -0.1 },
   iosActions: { borderTopWidth: StyleSheet.hairlineWidth },
   iosButton: { minHeight: 46, alignItems: 'center', justifyContent: 'center', paddingHorizontal: 12 },

package/registry/dialog/files/src/lib/kit.tsx

@@ -181,14 +181,17 @@ export function useKit(): Theme {
   return useMemo(() => build(scheme, ctx?.overrides), [scheme, ctx?.overrides]);
 }
 
-/** Shared motion presets so the whole kit moves the same way. */
+/**
+ * Shared motion presets so the whole kit moves the same way. Every spring is critically damped
+ * (damping ≥ 2·√(stiffness·mass)): it settles smoothly with no overshoot or wobble.
+ */
 export const motion = {
   /** Toggles, selection indicators. */
-  snappy: { damping: 18, stiffness: 260, mass: 0.8 },
-  /** Press feedback, pops. */
-  bouncy: { damping: 11, stiffness: 220, mass: 0.7 },
+  snappy: { damping: 30, stiffness: 260, mass: 0.8 },
+  /** Press feedback, pops. (Kept under its old name; it no longer bounces.) */
+  bouncy: { damping: 26, stiffness: 220, mass: 0.7 },
   /** Sheets, layout changes. */
-  gentle: { damping: 22, stiffness: 160, mass: 1 },
+  gentle: { damping: 27, stiffness: 160, mass: 1 },
   fast: 160,
   normal: 240,
 };

package/registry/donut-shop.json

@@ -0,0 +1,18 @@
+{
+  "name": "donut-shop",
+  "type": "block",
+  "title": "Donut Shop",
+  "description": "A dessert shop screen where the products roll. Swipe and the donuts roll across the carousel like wheels; \"+\" grows into a stepper and an add-to-cart bar rises; tap the donut and it zooms out to the edge of the screen, still turning, beside its nutrition. The donuts are drawn — icing, sprinkles, drizzle — with light that stays put while they spin, or pass your own round product art.",
+  "tier": "pro",
+  "dependencies": [
+    "react-native-svg",
+    "expo-haptics"
+  ],
+  "registryDependencies": [
+    "kit"
+  ],
+  "sharedFiles": [
+    "lib/kit.tsx"
+  ],
+  "filesDir": null
+}

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

@@ -1,5 +1,5 @@
 import * as Haptics from 'expo-haptics';
-import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, type ComponentRef } from 'react';
 import {
   AccessibilityInfo,
   Animated,
@@ -38,6 +38,10 @@ const INLINE_BOTTOM = Platform.select({ ios: 18, android: 12, default: 10 }) ??
 const MODAL_TOP = Platform.select({ ios: 52, android: (StatusBar.currentHeight ?? 24) + 8, default: 16 }) ?? 16;
 const MODAL_BOTTOM = Platform.select({ ios: 28, android: 16, default: 12 }) ?? 12;
 
+// 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;
+
 /** Panel surface hidden past the screen edge, so overshoot and rubber-banding never show a gap. */
 const EXTRA = 48;
 /** Extra travel when closed so the panel's shadow is off-screen too. */
@@ -45,7 +49,7 @@ const SHADOW_PAD = 28;
 const PUSH_SCALE = 0.92;
 const PUSH_GAP = 14;
 /** Kit snappy with a touch more damping: the panel lands with a hint of overshoot, not a wobble. */
-const OPEN_SPRING = { ...motion.snappy, damping: 22 };
+const OPEN_SPRING = motion.snappy;
 /** Closing is clamped, so it ends on the first crossing — exits feel faster than entrances. */
 const CLOSE_SPRING = { ...motion.snappy, overshootClamping: true };
 
@@ -226,7 +230,7 @@ export function Drawer({
   }, [isOpen, inline]);
 
   // Root position on the page, for the edge-swipe zone (gesture coordinates are page-based).
-  const rootRef = useRef<View>(null);
+  const rootRef = useRef<ComponentRef<typeof View>>(null);
   const rootX = useRef(0);
   const measure = useCallback(() => {
     rootRef.current?.measure((_x, _y, _w, _h, pageX) => {
@@ -492,7 +496,8 @@ export interface DrawerHeaderProps {
 
 /** Title block with optional leading node and close button — drop into `header`. */
 export function DrawerHeader({ title, subtitle, leading, showClose = false, onClose, children, style }: DrawerHeaderProps) {
-  const { colors, radius, dark } = useKit();
+  const { colors, radius, dark, font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
   const drawerCtx = useContext(DrawerContext);
   const close = onClose ?? (() => drawerCtx?.close());
   const canClose = showClose || onClose !== undefined;
@@ -501,12 +506,12 @@ export function DrawerHeader({ title, subtitle, leading, showClose = false, onCl
       {leading ? <View>{leading}</View> : null}
       <View style={styles.headerText}>
         {title ? (
-          <Text accessibilityRole="header" style={[styles.headerTitle, { color: colors.foreground }]} numberOfLines={1}>
+          <Text accessibilityRole="header" style={[styles.headerTitle, ff, { color: colors.foreground }]} numberOfLines={1}>
             {title}
           </Text>
         ) : null}
         {subtitle ? (
-          <Text style={[styles.headerSub, { color: colors.mutedForeground }]} numberOfLines={1}>
+          <Text style={[styles.headerSub, ff, { color: colors.mutedForeground }]} numberOfLines={1}>
             {subtitle}
           </Text>
         ) : null}
@@ -569,7 +574,8 @@ export function DrawerProfile({
   accessibilityHint,
   style,
 }: DrawerProfileProps) {
-  const { colors, radius, dark } = useKit();
+  const { colors, radius, dark, font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
   const press = useRef(new Animated.Value(0)).current;
   const stacked = layout === 'stacked';
   const trailing =
@@ -587,11 +593,11 @@ export function DrawerProfile({
     ) : null;
   const text = (
     <View style={styles.profileText}>
-      <Text numberOfLines={1} style={[styles.profileName, { color: colors.foreground }, stacked && styles.profileNameLg]}>
+      <Text numberOfLines={1} style={[styles.profileName, ff, { color: colors.foreground }, stacked && styles.profileNameLg]}>
         {name}
       </Text>
       {email ? (
-        <Text numberOfLines={1} style={[styles.profileEmail, { color: colors.mutedForeground }]}>
+        <Text numberOfLines={1} style={[styles.profileEmail, ff, { color: colors.mutedForeground }]}>
           {email}
         </Text>
       ) : null}
@@ -637,7 +643,8 @@ export function DrawerProfile({
 }
 
 function ProfileAvatar({ name, src, size, status }: { name: string; src?: string; size: number; status?: DrawerPresence }) {
-  const { colors, radius, dark } = useKit();
+  const { colors, radius, dark, font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
   const ring = useContext(SurfaceContext) ?? colors.card;
   const hue = nameColor(name);
   const ink = dark ? mix(hue, colors.foreground, 0.35) : mix(hue, colors.foreground, 0.3);
@@ -670,7 +677,7 @@ function ProfileAvatar({ name, src, size, status }: { name: string; src?: string
           },
         ]}
       >
-        <Text style={{ color: ink, fontSize: size * 0.36, fontWeight: '400', letterSpacing: -0.2 }}>{initials}</Text>
+        <Text maxFontSizeMultiplier={FONT_CAP} style={[{ color: ink, fontSize: size * 0.36, fontWeight: '400', letterSpacing: -0.2 }, ff]}>{initials}</Text>
         {src ? <Image source={{ uri: src }} alt="" style={StyleSheet.absoluteFill} /> : null}
       </View>
       {status ? (
@@ -811,7 +818,8 @@ export function DrawerItem({
   disabled,
   style,
 }: DrawerItemProps) {
-  const { colors, radius, dark } = useKit();
+  const { colors, radius, dark, font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
   const drawer = useContext(DrawerContext);
   const reduceMotion = useReduceMotion();
   const danger = tone === 'danger';
@@ -910,7 +918,7 @@ export function DrawerItem({
             )}
           </Animated.View>
         ) : null}
-        <Text numberOfLines={1} style={[styles.itemLabel, { color: labelColor }]}>
+        <Text numberOfLines={1} style={[styles.itemLabel, ff, { color: labelColor }]}>
           {label}
         </Text>
         {showBadge ? (
@@ -921,7 +929,7 @@ export function DrawerItem({
               { borderRadius: radius.capsule(22), backgroundColor: badgeColors.bg, transform: [{ scale: badgePop }] },
             ]}
           >
-            <Text style={[styles.badgeText, { color: badgeColors.fg }]}>
+            <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.badgeText, ff, { color: badgeColors.fg }]}>
               {typeof badge === 'number' && badge > 99 ? '99+' : badge}
             </Text>
           </Animated.View>
@@ -943,12 +951,13 @@ export interface DrawerSectionProps {
 
 /** A quiet heading between groups of DrawerItems, with a hairline divider above it. */
 export function DrawerSection({ title, trailing, divider = true, style }: DrawerSectionProps) {
-  const { colors, dark } = useKit();
+  const { colors, dark, font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
   return (
     <View style={style}>
       {divider ? <View style={[styles.divider, { backgroundColor: alpha(colors.foreground, dark ? 0.1 : 0.07) }]} /> : null}
       <View style={[styles.section, !divider && styles.sectionFlush]}>
-        <Text accessibilityRole="header" style={[styles.sectionText, { color: colors.mutedForeground }]}>
+        <Text accessibilityRole="header" style={[styles.sectionText, ff, { color: colors.mutedForeground }]}>
           {title}
         </Text>
         {trailing}
@@ -972,7 +981,8 @@ export interface DrawerFooterProps {
 
 /** A compact footer row — storage meter, app version, sync status — for the `footer` slot. */
 export function DrawerFooter({ label, detail, icon, progress, onPress, trailing, style }: DrawerFooterProps) {
-  const { colors, radius, dark } = useKit();
+  const { colors, radius, dark, font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
   const pct = progress === undefined ? undefined : Math.max(0, Math.min(1, progress));
   return (
     <Pressable
@@ -996,7 +1006,7 @@ export function DrawerFooter({ label, detail, icon, progress, onPress, trailing,
         </View>
       ) : null}
       <View style={styles.footerText}>
-        <Text numberOfLines={1} style={[styles.footerLabel, { color: colors.foreground }]}>
+        <Text numberOfLines={1} style={[styles.footerLabel, ff, { color: colors.foreground }]}>
           {label}
         </Text>
         {pct !== undefined ? (
@@ -1012,7 +1022,7 @@ export function DrawerFooter({ label, detail, icon, progress, onPress, trailing,
           </View>
         ) : null}
         {detail ? (
-          <Text numberOfLines={1} style={[styles.footerDetail, { color: colors.mutedForeground }]}>
+          <Text numberOfLines={1} style={[styles.footerDetail, ff, { color: colors.mutedForeground }]}>
             {detail}
           </Text>
         ) : null}
@@ -1111,7 +1121,7 @@ const styles = StyleSheet.create({
   item: { minHeight: ITEM_H, flexDirection: 'row', alignItems: 'center', paddingHorizontal: 12, gap: 14 },
   itemIcon: { width: 24, alignItems: 'center', justifyContent: 'center' },
   itemLabel: { flex: 1, fontSize: 15.5, fontWeight: '400', letterSpacing: -0.15 },
-  badge: { minWidth: 22, height: 22, paddingHorizontal: 7, alignItems: 'center', justifyContent: 'center' },
+  badge: { minWidth: 22, minHeight: 22, paddingHorizontal: 7, alignItems: 'center', justifyContent: 'center' },
   badgePlain: { paddingHorizontal: 2, minWidth: 0 },
   badgeText: { fontSize: 13, fontWeight: '400', fontVariant: ['tabular-nums'] },
   section: {
@@ -1125,7 +1135,7 @@ const styles = StyleSheet.create({
     paddingBottom: 2,
   },
   sectionFlush: { paddingTop: 10 },
-  sectionText: { fontSize: 13, lineHeight: 18, fontWeight: '400', letterSpacing: 0.1 },
+  sectionText: { flexShrink: 1, fontSize: 13, lineHeight: 18, fontWeight: '400', letterSpacing: 0.1 },
   divider: { height: StyleSheet.hairlineWidth, marginHorizontal: 14, marginTop: 10, marginBottom: 4 },
   footerRow: { minHeight: 48, flexDirection: 'row', alignItems: 'center', gap: 14, paddingHorizontal: 12, paddingVertical: 8 },
   footerText: { flex: 1, minWidth: 0, gap: 5 },