@expokit/cli 0.4.3 → 0.5.0

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

@@ -30,13 +30,13 @@ export interface CouponTheme {
   /** Text on the value panel. */
   ink: string;
   /** Buttons, the code chip and the applied ring (default: the fill's last colour). */
-  accent?: string;
+  accent?: string | undefined;
   /** Details panel paint (default: the app's card colour). */
-  body?: string | readonly string[];
+  body?: string | readonly string[] | undefined;
   /** Text on the details panel (default: the app's foreground). */
-  bodyInk?: string;
+  bodyInk?: string | undefined;
   /** Texture on the value panel. */
-  pattern?: TicketPattern;
+  pattern?: TicketPattern | undefined;
 }
 
 export const couponThemes: Record<CouponThemeName, CouponTheme> = {
@@ -74,52 +74,52 @@ export interface CouponProps {
   /** The headline: "50%", "₹200", "FREE", "BOGO". */
   value: string;
   /** Under the value: "OFF", "CASHBACK". */
-  unit?: string;
+  unit?: string | undefined;
   /** Above the value: "FLAT", "UP TO". */
-  prefix?: string;
-  title?: string;
-  description?: string;
+  prefix?: string | undefined;
+  title?: string | undefined;
+  description?: string | undefined;
   /** Promo code, shown in a dashed chip (tap to copy when `onCopy` is set). */
-  code?: string;
-  brand?: string;
+  code?: string | undefined;
+  brand?: string | undefined;
   /** Logo before the brand (e.g. an <Image>). */
-  logo?: React.ReactNode;
+  logo?: React.ReactNode | undefined;
   /** Expiry line, e.g. "Valid till 31 Dec". */
-  expires?: string;
+  expires?: string | undefined;
   /** Live countdown to this moment; the coupon turns expired when it passes. */
-  expiresAt?: Date | number;
+  expiresAt?: Date | number | undefined;
   /** Shown on the back — the "T&C" link turns the coupon over. */
-  terms?: string[];
-  status?: CouponStatus;
+  terms?: string[] | undefined;
+  status?: CouponStatus | undefined;
   /** Why it's locked, e.g. "Add ₹120 more to unlock". */
-  lockedHint?: string;
+  lockedHint?: string | undefined;
   /** A preset or your own colours (default "sunset"). */
-  theme?: CouponThemeName | CouponTheme;
+  theme?: CouponThemeName | CouponTheme | undefined;
   /** Override the theme's texture. */
-  pattern?: TicketPattern;
+  pattern?: TicketPattern | undefined;
   /** `horizontal` (value panel on the left) or `vertical` (value panel on top). */
-  layout?: 'horizontal' | 'vertical';
-  variant?: CouponVariant;
-  size?: CouponSize;
+  layout?: 'horizontal' | 'vertical' | undefined;
+  variant?: CouponVariant | undefined;
+  size?: CouponSize | undefined;
   /** A light sweep across the value panel every few seconds. */
-  shine?: boolean;
+  shine?: boolean | undefined;
   /** 3D: tilts toward the finger with a moving reflection. */
-  tilt?: boolean;
+  tilt?: boolean | undefined;
   /** With `tilt`: a rainbow foil sheen. */
-  holo?: boolean;
+  holo?: boolean | undefined;
   /** With `tilt`: sway slowly on its own. */
-  idle?: boolean;
+  idle?: boolean | undefined;
   /** Called with the code from the chip — wire it to expo-clipboard. */
-  onCopy?: (code: string) => void;
+  onCopy?: ((code: string) => void) | undefined;
   /** Shows the Apply button. */
-  onApply?: () => void;
+  onApply?: (() => void) | undefined;
   /** Tap on the coupon itself (e.g. open details or select it). */
-  onPress?: () => void;
-  flipped?: boolean;
-  defaultFlipped?: boolean;
-  onFlip?: (flipped: boolean) => void;
-  labels?: CouponLabels;
-  style?: StyleProp<ViewStyle>;
+  onPress?: (() => void) | undefined;
+  flipped?: boolean | undefined;
+  defaultFlipped?: boolean | undefined;
+  onFlip?: ((flipped: boolean) => void) | undefined;
+  labels?: CouponLabels | undefined;
+  style?: StyleProp<ViewStyle> | undefined;
 }
 
 const VARIANTS: Record<CouponVariant, { r: number; notch: number; edge?: TicketEdge; edgeSize: number; ends?: boolean }> = {
@@ -159,11 +159,11 @@ function contrast(a: string, b: string) {
     const full = hex.length === 4 ? '#' + [...hex.slice(1)].map((c) => c + c).join('') : hex;
     const n = parseInt(full.slice(1, 7), 16);
     if (!/^#[0-9a-f]{6}/i.test(full) || Number.isNaN(n)) return -1;
-    const ch = [(n >> 16) & 255, (n >> 8) & 255, n & 255].map((v) => {
+    const [red = 0, green = 0, blue = 0] = [(n >> 16) & 255, (n >> 8) & 255, n & 255].map((v) => {
       const c = v / 255;
       return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
     });
-    return 0.2126 * ch[0] + 0.7152 * ch[1] + 0.0722 * ch[2];
+    return 0.2126 * red + 0.7152 * green + 0.0722 * blue;
   };
   const [x, y] = [lum(a), lum(b)];
   if (x < 0 || y < 0) return 21;
@@ -201,13 +201,13 @@ function useRemaining(at?: Date | number) {
 }
 
 /** The promo code in a dashed chip; a tap copies it and flips the icon to a check for a moment. */
-function CodeChip({ code, color, ink, fontSize, onCopy, labels, reduce }: { code: string; color: string; ink: string; fontSize: number; onCopy?: (code: string) => void; labels: Required<CouponLabels>; reduce: boolean }) {
+function CodeChip({ code, color, ink, fontSize, onCopy, labels, reduce }: { code: string; color: string; ink: string; fontSize: number; onCopy?: ((code: string) => void) | undefined; labels: Required<CouponLabels>; reduce: boolean }) {
   const { font } = useKit();
   const ff = font.family ? { fontFamily: font.family } : null;
   const [copied, setCopied] = useState(false);
   const [box, setBox] = useState({ w: 0, h: 0 });
   const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
-  const pop = useRef(new Animated.Value(1)).current;
+  const [pop] = useState(() => new Animated.Value(1));
   useEffect(() => () => clearTimeout(timer.current), []);
   const copy = () => {
     onCopy?.(code);
@@ -234,7 +234,7 @@ function CodeChip({ code, color, ink, fontSize, onCopy, labels, reduce }: { code
           <Rect x={0.75} y={0.75} width={box.w - 1.5} height={box.h - 1.5} rx={8} fill="none" stroke={alpha(color, 0.75)} strokeWidth={1.5} strokeDasharray={[5, 4]} />
         </Svg>
       ) : null}
-      <Text numberOfLines={1} maxFontSizeMultiplier={FONT_CAP} style={[{ color: ink, fontSize, fontWeight: '800', letterSpacing: 1, flexShrink: 1 }, ff]}>
+      <Text numberOfLines={1} maxFontSizeMultiplier={FONT_CAP} style={[{ color: ink, fontSize, fontWeight: '800', letterSpacing: 1, flexShrink: 1, includeFontPadding: false, textAlignVertical: 'center' }, ff]}>
         {code}
       </Text>
       {onCopy ? (
@@ -248,7 +248,7 @@ function CodeChip({ code, color, ink, fontSize, onCopy, labels, reduce }: { code
 
 /** A light band that sweeps across, every few seconds, through the given windows. */
 function Shine({ windows, width, height }: { windows: TicketRect[]; width: number; height: number }) {
-  const t = useRef(new Animated.Value(0)).current;
+  const [t] = useState(() => new Animated.Value(0));
   useEffect(() => {
     const loop = Animated.loop(
       Animated.sequence([Animated.timing(t, { toValue: 1, duration: 1100, easing: Easing.inOut(Easing.quad), useNativeDriver: true }), Animated.delay(2400)])
@@ -338,12 +338,12 @@ export function Coupon({
   const reduce = useReduceMotion();
   const theme = typeof themeProp === 'object' ? themeProp : couponThemes[themeProp];
   const fills = typeof theme.fill === 'string' ? [theme.fill] : theme.fill;
-  const accent = theme.accent ?? fills[fills.length - 1];
+  const accent = theme.accent ?? fills[fills.length - 1] ?? colors.primary;
   const body = theme.body ?? (dark ? colors.popover : colors.card);
   const bodyInk = theme.bodyInk ?? colors.foreground;
   const bodySoft = alpha(bodyInk, 0.6);
   // The accent as text on the details panel — or the panel's ink when they'd blend (yellow on white).
-  const textAccent = contrast(accent, typeof body === 'string' ? body : body[0]) >= 2.6 ? accent : bodyInk;
+  const textAccent = contrast(accent, typeof body === 'string' ? body : (body[0] ?? colors.card)) >= 2.6 ? accent : bodyInk;
   const s = SIZES[size];
   const v = VARIANTS[variant];
   const horizontal = layout === 'horizontal';
@@ -387,8 +387,8 @@ export function Coupon({
   const n = v.notch;
   const endEdge = v.edge;
   const sideEdge = v.ends ? undefined : v.edge;
-  const valueEdges: Partial<Record<TicketSide, TicketEdge>> = horizontal ? { left: endEdge, top: sideEdge, bottom: sideEdge } : { top: endEdge, left: sideEdge, right: sideEdge };
-  const detailEdges: Partial<Record<TicketSide, TicketEdge>> = horizontal ? { right: endEdge, top: sideEdge, bottom: sideEdge } : { bottom: endEdge, left: sideEdge, right: sideEdge };
+  const valueEdges: Partial<Record<TicketSide, TicketEdge | undefined>> = horizontal ? { left: endEdge, top: sideEdge, bottom: sideEdge } : { top: endEdge, left: sideEdge, right: sideEdge };
+  const detailEdges: Partial<Record<TicketSide, TicketEdge | undefined>> = horizontal ? { right: endEdge, top: sideEdge, bottom: sideEdge } : { bottom: endEdge, left: sideEdge, right: sideEdge };
   const corners = (tl: number, tr: number, br: number, bl: number): TicketCorners => [tl, tr, br, bl];
   const valueCorners = horizontal ? corners(v.r, -n, -n, v.r) : corners(v.r, v.r, -n, -n);
   const detailCorners = horizontal ? corners(-n, v.r, v.r, -n) : corners(-n, -n, v.r, v.r);
@@ -431,7 +431,7 @@ export function Coupon({
     left !== undefined && left > 0 && !spent ? (
       <View style={[styles.timer, { backgroundColor: timerBg }]}>
         <Icon d={ICON.clock} size={11} color={timerInk} />
-        <Text maxFontSizeMultiplier={FONT_CAP} style={[{ color: timerInk, fontSize: 10.5, fontWeight: '800', fontVariant: ['tabular-nums'] }, ff]}>
+        <Text maxFontSizeMultiplier={FONT_CAP} style={[{ color: timerInk, fontSize: 10.5, fontWeight: '800', fontVariant: ['tabular-nums'], includeFontPadding: false, textAlignVertical: 'center' }, ff]}>
           {labels.endsIn} {formatCountdown(left)}
         </Text>
       </View>
@@ -521,7 +521,7 @@ export function Coupon({
       ]}
     >
       {applied || locked ? <Icon d={applied ? ICON.check : ICON.lock} size={13} color={applied ? '#ffffff' : bodySoft} /> : null}
-      <Text numberOfLines={1} maxFontSizeMultiplier={FONT_CAP} style={[{ color: applied ? '#ffffff' : locked || spent ? bodySoft : readableOn(accent), fontSize: s.chip - 0.5, fontWeight: '800' }, ff]}>
+      <Text numberOfLines={1} maxFontSizeMultiplier={FONT_CAP} style={[{ color: applied ? '#ffffff' : locked || spent ? bodySoft : readableOn(accent), fontSize: s.chip - 0.5, fontWeight: '800', includeFontPadding: false, textAlignVertical: 'center' }, ff]}>
         {applied ? labels.applied : locked ? labels.locked : labels.apply}
       </Text>
     </Pressable>
@@ -679,9 +679,8 @@ export function Coupon({
         <View style={{ transform: [{ scale: pressed && !reduce ? 0.985 : 1 }] }}>
           {/* The plate waits for the painted outline (no black flash on mount), and a dimmed (used /
               expired) coupon is see-through, so it gets none. */}
-          {spent || !measured ? null : <View pointerEvents="none" style={[styles.shadow, { top: inset, bottom: inset - 4, left: inset, right: inset, borderRadius: v.r, shadowOpacity: dark ? 0.5 : 0.2 }]} />}
-          {/* Elevation above the shadow plate keeps the coupon on top on Android (no background → no shadow of its own). */}
-          <View style={{ elevation: 7 }}>{card}</View>
+          {spent || !measured ? null : <View pointerEvents="none" style={[styles.shadow, { top: inset, bottom: inset - 4, left: inset, right: inset, borderRadius: v.r, boxShadow: `0px 8px 28px rgba(0,0,0,${dark ? 0.5 : 0.2})` }]} />}
+          <View>{card}</View>
         </View>
       )}
     </Pressable>
@@ -717,9 +716,5 @@ const styles = StyleSheet.create({
   shadow: {
     position: 'absolute',
     backgroundColor: '#000',
-    shadowColor: '#000',
-    shadowRadius: 14,
-    shadowOffset: { width: 0, height: 8 },
-    elevation: 6,
   },
 });

package/registry/coupon/files/src/components/ui/flip-card.tsx

@@ -1,7 +1,7 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { AccessibilityInfo, Animated, Pressable, StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
 
-import { motion } from '@/lib/kit';
+import { motion, useKit } from '@/lib/kit';
 
 export type FlipDirection = 'horizontal' | 'vertical';
 export type FlipTrigger = 'press' | 'none';
@@ -32,7 +32,7 @@ export interface FlipCardProps {
   progress?: Animated.Value;
   /** Accessibility label; the hint says which side is showing. */
   accessibilityLabel?: string;
-  /** Screen-reader hints (defaults in English). */
+  /** Screen-reader hints (default: the kit's `labels.flipToBack` / `labels.flipToFront`). */
   labels?: { toBack?: string; toFront?: string };
   style?: StyleProp<ViewStyle>;
 }
@@ -52,7 +52,7 @@ const SQUEEZE = {
  */
 export function useFlipProgress(flipped: boolean) {
   const reduce = useReduceMotion();
-  const progress = useRef(new Animated.Value(flipped ? 1 : 0)).current;
+  const [progress] = useState(() => new Animated.Value(flipped ? 1 : 0));
   useEffect(() => {
     if (reduce) progress.setValue(flipped ? 1 : 0);
     else Animated.spring(progress, { toValue: flipped ? 1 : 0, ...motion.gentle, useNativeDriver: true }).start();
@@ -81,6 +81,7 @@ export function FlipCard({
   labels,
   style,
 }: FlipCardProps) {
+  const kitLabels = useKit().labels;
   const controlled = flippedProp !== undefined;
   const [own, setOwn] = useState(defaultFlipped);
   const flipped = controlled ? flippedProp : own;
@@ -149,9 +150,7 @@ export function FlipCard({
       ) : null}
       {/* Faces live in their own (non-collapsing) layer: iOS intersects sibling layers in 3D, so a
           turning face next to the flat shadow plate would be sliced by it. */}
-      {/* On Android the wrapper carries the elevation that keeps the faces above the plate; the faces
-          get none, since a face turned in 3D would cast a warped shadow wedge below the card. */}
-      <View collapsable={false} style={{ elevation: shadow ? 23 : 0 }}>
+      <View collapsable={false}>
         {/* The hidden face stays mounted (for the turn) but is hidden from screen readers. */}
         <Animated.View
           style={[styles.face, face(frontTurn, frontOpacity)]}
@@ -179,7 +178,7 @@ export function FlipCard({
       onPress={toggle}
       accessibilityRole="button"
       accessibilityLabel={accessibilityLabel}
-      accessibilityHint={flipped ? (labels?.toFront ?? 'Showing the back. Tap to flip to the front.') : (labels?.toBack ?? 'Tap to flip to the back.')}
+      accessibilityHint={flipped ? (labels?.toFront ?? kitLabels.flipToFront) : (labels?.toBack ?? kitLabels.flipToBack)}
       accessibilityState={{ expanded: flipped }}
       style={style}
     >
@@ -214,11 +213,7 @@ const styles = StyleSheet.create({
     right: 0,
     bottom: 0,
     backgroundColor: '#000',
-    shadowColor: '#000',
-    shadowOpacity: 0.4,
-    shadowRadius: 20,
-    shadowOffset: { width: 0, height: 14 },
-    // High enough that Android's shadow spreads past the inset plate (iOS uses the shadow* props).
-    elevation: 22,
+    // boxShadow, not shadow* / elevation: the same soft shadow on iOS, Android and web.
+    boxShadow: '0px 14px 40px rgba(0,0,0,0.4)',
   },
 });

package/registry/coupon/files/src/components/ui/tilt-card.tsx

@@ -4,7 +4,6 @@ import {
   Animated,
   Easing,
   Image,
-  PanResponder,
   StyleSheet,
   View,
   type ImageSourcePropType,
@@ -14,7 +13,7 @@ import {
 } from 'react-native';
 import Svg, { Defs, LinearGradient, RadialGradient, Rect, Stop } from 'react-native-svg';
 
-import { motion } from '@/lib/kit';
+import { motion, usePanResponder } from '@/lib/kit';
 
 /** `holo` adds a rainbow foil sheen that shifts as the card tilts (always faintly visible). */
 export type TiltCardGlare = 'soft' | 'sharp' | 'holo' | 'none';
@@ -28,58 +27,58 @@ export interface TiltRect {
 }
 
 export interface TiltCardProps {
-  children?: React.ReactNode;
+  children?: React.ReactNode | undefined;
   /** Photo that fills the card behind the content (`require()` or `{ uri }`). */
-  image?: ImageSourcePropType;
+  image?: ImageSourcePropType | undefined;
   /** Darkens the bottom of `image` so white text on it stays readable: 0 off … 1 strong (default 0.6). */
-  shade?: number;
+  shade?: number | undefined;
   /** Maximum tilt in degrees at the card's edge (default 12). */
-  maxTilt?: number;
+  maxTilt?: number | undefined;
   /** Scale while touched (default 1.03). */
-  pressScale?: number;
+  pressScale?: number | undefined;
   /** Light reflection that slides across the card as it tilts. */
-  glare?: TiltCardGlare;
+  glare?: TiltCardGlare | undefined;
   /**
    * Where the reflection may fall, in card points — for cards with cut-outs (ticket notches,
    * perforated edges), so light never shows over a hole. Default: the whole card.
    */
-  glareClip?: TiltRect[];
+  glareClip?: TiltRect[] | undefined;
   /** Depth of the 3D effect — smaller is more dramatic (default 800). */
-  perspective?: number;
+  perspective?: number | undefined;
   /** Slowly sway on its own while untouched, so the card reads as 3D at rest. */
-  idle?: boolean;
+  idle?: boolean | undefined;
   /** Corner radius (default 20). */
-  radius?: number;
+  radius?: number | undefined;
   /** Soft shadow under the card that shifts as it tilts (default true). */
-  shadow?: boolean;
+  shadow?: boolean | undefined;
   /**
    * The part of the card that casts the shadow, in card points — e.g. leave out a ticket stub that's
    * being torn off, so the plate never shows where it was. Default: the whole card.
    */
-  shadowRect?: TiltRect;
+  shadowRect?: TiltRect | undefined;
   /**
    * Narrows the shadow sideways (1 = full width, 0 = none) — for content that turns edge-on inside
    * the card, like a FlipCard mid-flip, so the shadow plate never shows past it.
    */
-  shadowScaleX?: Animated.Value | Animated.AnimatedInterpolation<number>;
+  shadowScaleX?: Animated.Value | Animated.AnimatedInterpolation<number> | undefined;
   /** Turn touch tilting off (the card still renders, e.g. while a parent list scrolls). */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /** Called with a light tap (not after a drag). */
-  onPress?: () => void;
-  accessibilityLabel?: string;
+  onPress?: (() => void) | undefined;
+  accessibilityLabel?: string | undefined;
   /** Width, height, margins — applied to the card's outer box. */
-  style?: StyleProp<ViewStyle>;
+  style?: StyleProp<ViewStyle> | undefined;
 }
 
 export interface TiltLayerProps {
-  children?: React.ReactNode;
+  children?: React.ReactNode | undefined;
   /**
    * How far above the card this layer floats: 0 sits on the card, 1 floats well above it
    * and slides furthest as the card tilts (default 0.5). Negative sinks below the surface.
    */
-  depth?: number;
+  depth?: number | undefined;
   /** Layers fill the card by default; position content inside, or override here. */
-  style?: StyleProp<ViewStyle>;
+  style?: StyleProp<ViewStyle> | undefined;
 }
 
 export interface TiltState {
@@ -109,7 +108,8 @@ const PAINT = 96;
 // pinks, violets and cyans stay clean when blended over dark cards (yellow and green turn olive).
 const SMOOTH = Easing.bezier(0.32, 0.72, 0, 1);
 
-const HOLO = Array.from({ length: 37 }, (_, i) => ['#ff6bd6', '#b38cff', '#6fb6ff', '#5ff0ff', '#a7ffe0', '#ffc2ef'][i % 6]);
+const HOLO_CYCLE = ['#ff6bd6', '#b38cff', '#6fb6ff', '#5ff0ff', '#a7ffe0', '#ffc2ef'];
+const HOLO = Array.from({ length: 37 }, (_, i) => HOLO_CYCLE[i % HOLO_CYCLE.length] ?? '#ff6bd6');
 
 function GlarePaint({ variant }: { variant: 'soft' | 'sharp' }) {
   const sharp = variant === 'sharp';
@@ -262,21 +262,15 @@ export function TiltCard({
 }: TiltCardProps) {
   const reduce = useReduceMotion();
   const [size, setSize] = useState({ w: 0, h: 0 });
-  const sizeRef = useRef(size);
-  sizeRef.current = size;
 
   // -1 … 1 across the card; the card leans toward the finger.
-  const tx = useRef(new Animated.Value(0)).current;
-  const ty = useRef(new Animated.Value(0)).current;
-  const press = useRef(new Animated.Value(0)).current;
+  const [tx] = useState(() => new Animated.Value(0));
+  const [ty] = useState(() => new Animated.Value(0));
+  const [press] = useState(() => new Animated.Value(0));
   const touching = useRef(false);
   const origin = useRef({ x: 0, y: 0 });
   const moved = useRef(false);
   const viewRef = useRef<ComponentRef<typeof View>>(null);
-  const disabledRef = useRef(disabled);
-  disabledRef.current = disabled;
-  const reduceRef = useRef(reduce);
-  reduceRef.current = reduce;
 
   // Idle sway: a slow figure-eight while nobody is touching.
   const idleLoop = useRef<Animated.CompositeAnimation | null>(null);
@@ -310,7 +304,7 @@ export function TiltCard({
   }, [idle, reduce]);
 
   const aim = (pageX: number, pageY: number) => {
-    const { w, h } = sizeRef.current;
+    const { w, h } = size;
     if (!w || !h) return;
     tx.setValue(Math.max(-1, Math.min(1, ((pageX - origin.current.x) / w) * 2 - 1)));
     ty.setValue(Math.max(-1, Math.min(1, ((pageY - origin.current.y) / h) * 2 - 1)));
@@ -318,7 +312,7 @@ export function TiltCard({
 
   const release = (tapped: boolean) => {
     touching.current = false;
-    if (tapped && !moved.current) onPressRef.current?.();
+    if (tapped && !moved.current) onPress?.();
     if (reduce) {
       // The card never leaves flat, so only the light has to settle: a short ease, no spring.
       const settle = (v: Animated.Value) => Animated.timing(v, { toValue: 0, duration: 150, easing: SMOOTH, useNativeDriver: true });
@@ -345,57 +339,48 @@ export function TiltCard({
       if (finished && !touching.current) startIdle();
     });
   };
-  // Read the latest onPress at release time, so the responder never has to be rebuilt mid-gesture.
-  const onPressRef = useRef(onPress);
-  onPressRef.current = onPress;
-  const releaseRef = useRef(release);
-  releaseRef.current = release;
-
-  const responder = useMemo(
-    () =>
-      PanResponder.create({
-        onStartShouldSetPanResponder: () => !disabledRef.current,
-        // Only a real drag takes the touch from a button inside the card — a tap's tiny jitter must not.
-        onMoveShouldSetPanResponder: (_e, g) => !disabledRef.current && Math.abs(g.dx) + Math.abs(g.dy) > 6,
-        // Let a parent ScrollView take over scrolls that start on the card (on Android the native
-        // scroll view can only do that when the card doesn't block it).
-        onPanResponderTerminationRequest: () => true,
-        onShouldBlockNativeResponder: () => false,
-        onPanResponderGrant: (e) => {
-          touching.current = true;
-          moved.current = false;
-          idleLoop.current?.stop();
-          const { pageX, pageY, locationX, locationY } = e.nativeEvent;
-          // locationX is relative to the touched child, so measure the card itself and correct
-          // once the measurement arrives.
-          origin.current = { x: pageX - locationX, y: pageY - locationY };
-          viewRef.current?.measure((_x, _y, _w, _h, px, py) => {
-            if (typeof px === 'number' && typeof py === 'number') origin.current = { x: px, y: py };
-          });
-          aim(pageX, pageY);
-          if (reduceRef.current) {
-            Animated.timing(press, { toValue: 1, duration: 150, easing: SMOOTH, useNativeDriver: true }).start();
-          } else {
-            Animated.spring(press, {
-              toValue: 1,
-              ...motion.snappy,
-              useNativeDriver: true,
-            }).start();
-          }
-        },
-        onPanResponderMove: (e, g) => {
-          if (Math.abs(g.dx) + Math.abs(g.dy) > 6) moved.current = true;
-          aim(e.nativeEvent.pageX, e.nativeEvent.pageY);
-        },
-        onPanResponderRelease: () => releaseRef.current(true),
-        onPanResponderTerminate: () => releaseRef.current(false),
-        // React Native grants before asking the current responder to let go; when a child keeps its
-        // gesture (e.g. a ticket stub being torn), the grant is rejected and no release follows.
-        onPanResponderReject: () => releaseRef.current(false),
-      }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  );
+  // usePanResponder always calls the latest callbacks, so they read props and state directly and
+  // the responder is never rebuilt mid-gesture.
+  const pan = usePanResponder({
+    onStartShouldSetPanResponder: () => !disabled,
+    // Only a real drag takes the touch from a button inside the card — a tap's tiny jitter must not.
+    onMoveShouldSetPanResponder: (_e, g) => !disabled && Math.abs(g.dx) + Math.abs(g.dy) > 6,
+    // Let a parent ScrollView take over scrolls that start on the card (on Android the native
+    // scroll view can only do that when the card doesn't block it).
+    onPanResponderTerminationRequest: () => true,
+    onShouldBlockNativeResponder: () => false,
+    onPanResponderGrant: (e) => {
+      touching.current = true;
+      moved.current = false;
+      idleLoop.current?.stop();
+      const { pageX, pageY, locationX, locationY } = e.nativeEvent;
+      // locationX is relative to the touched child, so measure the card itself and correct
+      // once the measurement arrives.
+      origin.current = { x: pageX - locationX, y: pageY - locationY };
+      viewRef.current?.measure((_x, _y, _w, _h, px, py) => {
+        if (typeof px === 'number' && typeof py === 'number') origin.current = { x: px, y: py };
+      });
+      aim(pageX, pageY);
+      if (reduce) {
+        Animated.timing(press, { toValue: 1, duration: 150, easing: SMOOTH, useNativeDriver: true }).start();
+      } else {
+        Animated.spring(press, {
+          toValue: 1,
+          ...motion.snappy,
+          useNativeDriver: true,
+        }).start();
+      }
+    },
+    onPanResponderMove: (e, g) => {
+      if (Math.abs(g.dx) + Math.abs(g.dy) > 6) moved.current = true;
+      aim(e.nativeEvent.pageX, e.nativeEvent.pageY);
+    },
+    onPanResponderRelease: () => release(true),
+    onPanResponderTerminate: () => release(false),
+    // React Native grants before asking the current responder to let go; when a child keeps its
+    // gesture (e.g. a ticket stub being torn), the grant is rejected and no release follows.
+    onPanResponderReject: () => release(false),
+  });
 
   const onLayout = (e: LayoutChangeEvent) => {
     const { width, height } = e.nativeEvent.layout;
@@ -469,24 +454,21 @@ export function TiltCard({
       ) : null}
       {/* The card sits in its own (non-collapsing) layer: iOS intersects sibling layers in 3D, so a
           tilted card next to the flat shadow plate would be sliced by it along a diagonal. */}
-      {/* Android draws siblings by elevation, so the wrapper (not the card inside it) carries the
-          elevation that keeps it above the plate; with no background it casts no shadow itself. */}
-      <View collapsable={false} style={{ elevation: shadow ? 15 : 0 }}>
+      {/* The plate's shadow is a boxShadow (no elevation), so on Android too the card simply paints above it. */}
+      <View collapsable={false}>
         <Animated.View
           ref={viewRef}
-          {...responder.panHandlers}
+          {...pan}
           accessible={!!onPress || !!accessibilityLabel}
           accessibilityRole={onPress ? 'button' : undefined}
           accessibilityLabel={accessibilityLabel}
           // Screen readers activate the card through an action, not synthesized touches.
           accessibilityActions={onPress ? [{ name: 'activate' }] : undefined}
           onAccessibilityAction={(e) => {
-            if (e.nativeEvent.actionName === 'activate') onPressRef.current?.();
+            if (e.nativeEvent.actionName === 'activate') onPress?.();
           }}
-          // elevation (no background → no extra shadow) keeps the card above its shadow plate on Android.
           style={{
             borderRadius: radius,
-            elevation: shadow ? 15 : 0,
             transform: [{ perspective }, { rotateX }, { rotateY }, { scale }],
           }}
         >
@@ -578,12 +560,12 @@ export function TiltLayer({ children, depth = 0.5, style }: TiltLayerProps) {
 }
 
 export interface TiltFoilProps {
-  children?: React.ReactNode;
+  children?: React.ReactNode | undefined;
   /** Corner radius (default 8). */
-  radius?: number;
+  radius?: number | undefined;
   /** Base metal under the rainbow (default silver). */
-  base?: string;
-  style?: StyleProp<ViewStyle>;
+  base?: string | undefined;
+  style?: StyleProp<ViewStyle> | undefined;
 }
 
 /**
@@ -665,11 +647,8 @@ const styles = StyleSheet.create({
     right: 0,
     bottom: 0,
     backgroundColor: '#000',
-    shadowColor: '#000',
-    shadowOpacity: 0.45,
-    shadowRadius: 24,
-    shadowOffset: { width: 0, height: 16 },
-    elevation: 14,
+    // boxShadow draws the same soft shadow on iOS, Android and web.
+    boxShadow: '0px 16px 48px rgba(0,0,0,0.45)',
   },
   clip: { overflow: 'hidden' },
   window: { position: 'absolute', overflow: 'hidden' },