@expokit/cli 0.0.0-stage → 0.3.0

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

@@ -0,0 +1,1135 @@
+import * as Haptics from 'expo-haptics';
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  AccessibilityInfo,
+  Animated,
+  BackHandler,
+  Easing,
+  Image,
+  Modal,
+  PanResponder,
+  Platform,
+  Pressable,
+  ScrollView,
+  StatusBar,
+  StyleSheet,
+  Text,
+  View,
+  useWindowDimensions,
+  type LayoutChangeEvent,
+  type PanResponderGestureState,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+
+import { alpha, motion, useKit } from '@/lib/kit';
+
+export type DrawerSide = 'left' | 'right';
+/**
+ * `overlay` — the panel slides over the screen, which dims (and gently scales with `scaleContent`).
+ * `push` — the screen becomes a rounded card that shrinks to 0.92 and slides aside, revealing the
+ * panel underneath (the modern mail-app look). Needs `children`; without them it renders as overlay.
+ */
+export type DrawerVariant = 'overlay' | 'push';
+
+const INLINE_TOP = Platform.select({ ios: 14, android: 10, default: 8 }) ?? 8;
+const INLINE_BOTTOM = Platform.select({ ios: 18, android: 12, default: 10 }) ?? 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;
+
+/** 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. */
+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 };
+/** Closing is clamped, so it ends on the first crossing — exits feel faster than entrances. */
+const CLOSE_SPRING = { ...motion.snappy, overshootClamping: true };
+
+interface DrawerContextValue {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  toggle: () => void;
+  close: () => void;
+}
+
+const DrawerContext = createContext<DrawerContextValue | null>(null);
+/** The colour behind the panel content, so status-dot rings blend in. */
+const SurfaceContext = createContext<string | null>(null);
+
+/** Open / close the nearest Drawer from anywhere inside it (header buttons, DrawerItems…). */
+export function useDrawer(): DrawerContextValue {
+  const ctx = useContext(DrawerContext);
+  return ctx ?? { open: false, setOpen: () => {}, toggle: () => {}, close: () => {} };
+}
+
+export interface DrawerProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** The panel's content (usually DrawerItems). Scrolls between `header` and `footer`. */
+  content: React.ReactNode;
+  /** Pinned above the scrolling content (DrawerProfile or DrawerHeader). */
+  header?: React.ReactNode;
+  /** Pinned below the scrolling content (DrawerFooter, a DrawerItem or buttons). */
+  footer?: React.ReactNode;
+  /**
+   * The screen the drawer belongs to. When given, the drawer lives inside this container (no
+   * Modal): edge swipe and the 'push' variant work. Without children it opens in a Modal.
+   */
+  children?: React.ReactNode;
+  side?: DrawerSide;
+  /** Points or a percentage of the container width (default '80%', max 360). */
+  width?: number | `${number}%`;
+  /** 'overlay' slides over the screen · 'push' shrinks the screen into a card and slides it aside. */
+  variant?: DrawerVariant;
+  /** Swipe in from the screen edge to open (needs `children`, default true). */
+  edgeSwipe?: boolean;
+  /** Width of the edge-swipe zone (default 24). Taps in it still reach your screen. */
+  edgeWidth?: number;
+  /** Close on scrim tap and drag (default true). */
+  dismissible?: boolean;
+  /** Overlay variant: scale the screen behind to 0.96 with rounded corners while open (inline only, default true). */
+  scaleContent?: boolean;
+  /** Light haptic when the drawer opens; DrawerItems tick on press (default true). */
+  haptics?: boolean;
+  /** Space above the header (default: a small inline gap, or the status bar height in Modal mode). */
+  topInset?: number;
+  /** Space below the footer, e.g. useSafeAreaInsets().bottom (default: platform estimate). */
+  bottomInset?: number;
+  accessibilityLabel?: string;
+  /** Root container style (inline mode). */
+  style?: StyleProp<ViewStyle>;
+  /** Panel style. */
+  panelStyle?: StyleProp<ViewStyle>;
+}
+
+/**
+ * A side navigation drawer that follows your finger. It springs in with the scrim fading
+ * behind it, swipes open from the screen edge, drags closed from anywhere on the panel, settles
+ * with your release velocity and rubber-bands past fully open. The 'push' variant shrinks the
+ * screen into a rounded card and slides it aside, like modern mail apps.
+ */
+export function Drawer({
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  content,
+  header,
+  footer,
+  children,
+  side = 'left',
+  width = '80%',
+  variant = 'overlay',
+  edgeSwipe = true,
+  edgeWidth = 24,
+  dismissible = true,
+  scaleContent = true,
+  haptics = true,
+  topInset,
+  bottomInset,
+  accessibilityLabel = 'Navigation drawer',
+  style,
+  panelStyle,
+}: DrawerProps) {
+  const { colors, dark, radius } = useKit();
+  const reduceMotion = useReduceMotion();
+  const win = useWindowDimensions();
+  const inline = children !== undefined;
+  const push = inline && variant === 'push';
+  const [box, setBox] = useState(inline ? 0 : win.width);
+  const containerW = inline ? box : win.width;
+  const W = Math.max(
+    0,
+    Math.min(typeof width === 'number' ? width : (parseFloat(width) / 100) * containerW, 360, containerW - 40),
+  );
+  const dir = side === 'left' ? -1 : 1; // closed offset direction
+  const top = topInset ?? (inline ? INLINE_TOP : MODAL_TOP);
+  const bottom = bottomInset ?? (inline ? INLINE_BOTTOM : MODAL_BOTTOM);
+  // The screen moves (push, or the overlay scale) → its corners round in on the JS driver.
+  const movesScreen = inline && (push || (scaleContent && !reduceMotion));
+
+  const [inner, setInner] = useState(defaultOpen);
+  const isOpen = open ?? inner;
+  const [mounted, setMounted] = useState(isOpen); // Modal mode only
+  // Progress 0 (closed) → 1 (open), native-driven; every transform and opacity reads from it.
+  const p = useRef(new Animated.Value(isOpen ? 1 : 0)).current;
+  // Same progress on the JS driver, for the screen's corner radius and edge colour (separate view).
+  const r = useRef(new Animated.Value(isOpen ? 1 : 0)).current;
+
+  const live = useRef({ open: isOpen, w: W, box, reduce: reduceMotion, haptics, movesScreen, edgeSwipe, edgeWidth, dismissible });
+  live.current = { open: isOpen, w: W, box, reduce: reduceMotion, haptics, movesScreen, edgeSwipe, edgeWidth, dismissible };
+
+  const setOpen = useCallback(
+    (next: boolean) => {
+      if (open === undefined) setInner(next);
+      onOpenChange?.(next);
+    },
+    [open, onOpenChange],
+  );
+  const setOpenRef = useRef(setOpen);
+  setOpenRef.current = setOpen;
+
+  const target = useRef<0 | 1>(isOpen ? 1 : 0);
+  const settle = useCallback(
+    (to: 0 | 1, velocity = 0) => {
+      const was = target.current;
+      target.current = to;
+      if (to === 1 && !inline) setMounted(true);
+      if (to === 1 && was === 0 && live.current.haptics) {
+        Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light).catch(() => {});
+      }
+      const done = ({ finished }: { finished: boolean }) => {
+        if (finished && to === 0 && !inline) setMounted(false);
+      };
+      if (live.current.reduce) {
+        const cfg = { toValue: to, duration: 200, easing: Easing.out(Easing.cubic) };
+        Animated.timing(p, { ...cfg, useNativeDriver: true }).start(done);
+        if (live.current.movesScreen) Animated.timing(r, { ...cfg, useNativeDriver: false }).start();
+        return;
+      }
+      const cfg = { toValue: to, velocity, ...(to === 1 ? OPEN_SPRING : CLOSE_SPRING) };
+      Animated.spring(p, { ...cfg, useNativeDriver: true }).start(done);
+      if (live.current.movesScreen) Animated.spring(r, { ...cfg, useNativeDriver: false }).start();
+    },
+    [p, r, inline],
+  );
+
+  useEffect(() => {
+    if (isOpen && !inline) setMounted(true);
+    // Skip when a drag release already started a velocity spring towards this state.
+    if (target.current !== (isOpen ? 1 : 0)) settle(isOpen ? 1 : 0);
+  }, [isOpen, settle, inline]);
+
+  // Android back (inline mode; the Modal handles it otherwise) and Escape on web.
+  useEffect(() => {
+    if (!isOpen) return;
+    const sub = inline && Platform.OS !== 'web'
+      ? BackHandler.addEventListener('hardwareBackPress', () => {
+          setOpenRef.current(false);
+          return true;
+        })
+      : null;
+    let off: (() => void) | undefined;
+    if (Platform.OS === 'web' && typeof document !== 'undefined') {
+      const onKey = (e: KeyboardEvent) => e.key === 'Escape' && setOpenRef.current(false);
+      document.addEventListener('keydown', onKey);
+      off = () => document.removeEventListener('keydown', onKey);
+    }
+    return () => {
+      sub?.remove();
+      off?.();
+    };
+  }, [isOpen, inline]);
+
+  // Root position on the page, for the edge-swipe zone (gesture coordinates are page-based).
+  const rootRef = useRef<View>(null);
+  const rootX = useRef(0);
+  const measure = useCallback(() => {
+    rootRef.current?.measure((_x, _y, _w, _h, pageX) => {
+      if (typeof pageX === 'number') rootX.current = pageX;
+    });
+  }, []);
+
+  // Two responders sharing one drag: `edge` captures a horizontal swipe that starts in the edge
+  // zone (so taps there still reach the screen), `drag` captures horizontal drags on the open
+  // panel / scrim (so vertical scrolling and taps inside the panel keep working).
+  const start = useRef(0);
+  const pans = useMemo(() => {
+    const toward = (dx: number) => (side === 'left' ? dx : -dx); // + means "more open"
+    const horizontal = (g: PanResponderGestureState) => Math.abs(g.dx) > 10 && Math.abs(g.dx) > Math.abs(g.dy) * 1.5;
+    const base = {
+      onPanResponderTerminationRequest: () => false,
+      onPanResponderGrant: () => {
+        p.stopAnimation((v) => (start.current = v));
+        r.stopAnimation();
+        if (!live.current.open && !inline) setMounted(true);
+      },
+      onPanResponderMove: (_: unknown, g: PanResponderGestureState) => {
+        const w = live.current.w || 1;
+        let next = start.current + toward(g.dx) / w;
+        if (next > 1) next = 1 + rubber((next - 1) * w, EXTRA) / w;
+        if (next < 0) next = 0;
+        p.setValue(next);
+        if (live.current.movesScreen) r.setValue(Math.min(1, next));
+      },
+      onPanResponderRelease: (_: unknown, g: PanResponderGestureState) => {
+        const w = live.current.w || 1;
+        const v = toward(g.vx); // px/ms, + means opening
+        const projected = start.current + toward(g.dx) / w + (v * 200) / w;
+        let to: 0 | 1 = projected > 0.5 ? 1 : 0;
+        if (Math.abs(v) > 0.35) to = v > 0 ? 1 : 0; // a flick decides on its own
+        settle(to, (v * 1000) / w);
+        if ((to === 1) !== live.current.open) setOpenRef.current(to === 1);
+      },
+      onPanResponderTerminate: () => settle(live.current.open ? 1 : 0),
+    };
+    const edge = PanResponder.create({
+      ...base,
+      onMoveShouldSetPanResponderCapture: (_, g) => {
+        const l = live.current;
+        if (!l.edgeSwipe || l.open || !horizontal(g) || toward(g.dx) <= 0) return false;
+        const x = g.x0 - rootX.current;
+        return side === 'left' ? x <= l.edgeWidth : x >= l.box - l.edgeWidth;
+      },
+    });
+    const drag = PanResponder.create({
+      ...base,
+      onMoveShouldSetPanResponderCapture: (_, g) => live.current.dismissible && live.current.open && horizontal(g),
+    });
+    return { edge, drag };
+  }, [p, r, side, settle, inline]);
+
+  const ctx = useMemo(
+    () => ({ open: isOpen, setOpen, toggle: () => setOpen(!isOpen), close: () => setOpen(false) }),
+    [isOpen, setOpen],
+  );
+
+  /* Interpolations (all native) ---------------------------------------------------------------- */
+  const panelX = push
+    ? p.interpolate({ inputRange: [0, 1], outputRange: [dir * W * 0.28, 0], extrapolate: 'clamp' })
+    : p.interpolate({ inputRange: [0, 1, 2], outputRange: [dir * (W + EXTRA + SHADOW_PAD), 0, -dir * W], extrapolate: 'clamp' });
+  const panelOpacity = push ? p.interpolate({ inputRange: [0, 0.7, 1], outputRange: [0, 0.9, 1], extrapolate: 'clamp' }) : 1;
+  const scrimOpacity = p.interpolate({ inputRange: [0, 1], outputRange: [0, push ? 0.5 : 1], extrapolate: 'clamp' });
+  const S = reduceMotion ? 1 : PUSH_SCALE;
+  const shift = W + PUSH_GAP - ((1 - S) * containerW) / 2;
+  const screenTransform = push
+    ? [
+        { translateX: p.interpolate({ inputRange: [0, 1, 2], outputRange: [0, -dir * shift, -dir * (shift + W)], extrapolate: 'clamp' }) },
+        { scale: p.interpolate({ inputRange: [0, 1], outputRange: [1, S], extrapolate: 'clamp' }) },
+      ]
+    : movesScreen
+      ? [{ scale: p.interpolate({ inputRange: [0, 1], outputRange: [1, 0.96], extrapolate: 'clamp' }) }]
+      : undefined;
+  // JS driver, on the inner screen view only.
+  const screenRadius = r.interpolate({ inputRange: [0, 1], outputRange: [0, radius.scale(push ? 28 : 20)], extrapolate: 'clamp' });
+  const screenEdge = r.interpolate({
+    inputRange: [0, 1],
+    outputRange: [alpha(colors.foreground, 0), alpha(colors.foreground, dark ? 0.12 : 0.08)],
+    extrapolate: 'clamp',
+  });
+
+  /* Panel ---------------------------------------------------------------------------------------- */
+  const surface = dark ? colors.popover : colors.card;
+  const rootBg = push ? (dark ? colors.card : colors.muted) : dark ? colors.background : colors.foreground;
+  const hairline = alpha(colors.foreground, dark ? 0.1 : 0.06);
+  const corner = push ? 0 : radius.scale(24);
+  const round =
+    side === 'left'
+      ? { borderTopRightRadius: corner, borderBottomRightRadius: corner }
+      : { borderTopLeftRadius: corner, borderBottomLeftRadius: corner };
+
+  const panel = (
+    <Animated.View
+      {...(dismissible ? pans.drag.panHandlers : null)}
+      accessibilityViewIsModal={isOpen}
+      accessibilityLabel={accessibilityLabel}
+      importantForAccessibility={isOpen ? 'yes' : 'no-hide-descendants'}
+      pointerEvents={push && !isOpen ? 'none' : 'auto'}
+      style={[
+        styles.panel,
+        side === 'left' ? { left: -EXTRA } : { right: -EXTRA },
+        { width: W + EXTRA, opacity: panelOpacity, transform: [{ translateX: panelX }] },
+        !push && {
+          shadowColor: '#000',
+          shadowOpacity: dark ? 0.45 : 0.12,
+          shadowRadius: 28,
+          shadowOffset: { width: -dir * 8, height: 0 },
+          elevation: 24,
+        },
+        panelStyle,
+      ]}
+    >
+      <View
+        style={[
+          styles.flex,
+          round,
+          !push && {
+            backgroundColor: surface,
+            shadowColor: '#000',
+            shadowOpacity: dark ? 0.3 : 0.06,
+            shadowRadius: 4,
+            shadowOffset: { width: -dir * 1, height: 0 },
+          },
+        ]}
+      >
+        <View
+          style={[
+            styles.flex,
+            styles.clip,
+            round,
+            !push && { borderColor: hairline },
+            !push && (side === 'left' ? styles.borderRight : styles.borderLeft),
+          ]}
+        >
+          <SurfaceContext.Provider value={push ? rootBg : surface}>
+            <View style={[styles.flex, side === 'left' ? { paddingLeft: EXTRA } : { paddingRight: EXTRA }]}>
+              <View
+                style={[
+                  styles.chromeTop,
+                  { paddingTop: top },
+                  header ? [styles.chromeTopDivided, { borderBottomColor: hairline }] : null,
+                ]}
+              >
+                {header ?? <DrawerHandle side={side} />}
+              </View>
+              <ScrollView
+                style={styles.flex}
+                contentContainerStyle={styles.content}
+                showsVerticalScrollIndicator={false}
+                keyboardShouldPersistTaps="handled"
+              >
+                {content}
+              </ScrollView>
+              {footer ? (
+                <View style={[styles.chromeBottom, { paddingBottom: bottom, borderTopColor: hairline }]}>{footer}</View>
+              ) : (
+                <View style={{ height: bottom }} />
+              )}
+            </View>
+          </SurfaceContext.Provider>
+        </View>
+      </View>
+    </Animated.View>
+  );
+
+  const scrim = (
+    <Animated.View
+      {...(dismissible ? pans.drag.panHandlers : null)}
+      pointerEvents={isOpen ? 'auto' : 'none'}
+      style={[StyleSheet.absoluteFill, { backgroundColor: colors.overlay, opacity: scrimOpacity }]}
+    >
+      <Pressable
+        style={StyleSheet.absoluteFill}
+        onPress={() => dismissible && setOpen(false)}
+        accessibilityRole="button"
+        accessibilityLabel="Close drawer"
+      />
+    </Animated.View>
+  );
+
+  if (!inline) {
+    return (
+      <DrawerContext.Provider value={ctx}>
+        <Modal visible={mounted} transparent animationType="none" statusBarTranslucent onRequestClose={() => setOpen(false)}>
+          {scrim}
+          {panel}
+        </Modal>
+      </DrawerContext.Provider>
+    );
+  }
+
+  return (
+    <DrawerContext.Provider value={ctx}>
+      <View
+        ref={rootRef}
+        {...pans.edge.panHandlers}
+        onTouchStart={measure}
+        onLayout={(e: LayoutChangeEvent) => {
+          setBox(e.nativeEvent.layout.width);
+          measure();
+        }}
+        style={[styles.root, movesScreen && { backgroundColor: rootBg }, style]}
+      >
+        {push && box ? panel : null}
+        <Animated.View
+          importantForAccessibility={isOpen ? 'no-hide-descendants' : 'auto'}
+          style={[
+            StyleSheet.absoluteFill,
+            screenTransform && { transform: screenTransform },
+            push &&
+              Platform.OS === 'ios' && {
+                shadowColor: '#000',
+                shadowOpacity: dark ? 0.5 : 0.16,
+                shadowRadius: 24,
+                shadowOffset: { width: dir * 6, height: 8 },
+              },
+          ]}
+        >
+          <Animated.View
+            style={[
+              styles.flex,
+              movesScreen && {
+                backgroundColor: colors.background,
+                borderRadius: screenRadius,
+                borderWidth: StyleSheet.hairlineWidth,
+                borderColor: screenEdge,
+                overflow: 'hidden',
+                elevation: push ? 16 : 0,
+              },
+            ]}
+          >
+            {children}
+            {push ? scrim : null}
+          </Animated.View>
+        </Animated.View>
+        {push ? null : scrim}
+        {!push && box ? panel : null}
+      </View>
+    </DrawerContext.Provider>
+  );
+}
+
+/** Top spacing used when you do not pass `header`. */
+export function DrawerHandle(_: { side?: DrawerSide }) {
+  return <View style={styles.handleSpacer} />;
+}
+
+export interface DrawerHeaderProps {
+  title?: string;
+  subtitle?: string;
+  /** Optional leading node (avatar, logo). */
+  leading?: React.ReactNode;
+  /** Shows a close control on the trailing edge (default false). */
+  showClose?: boolean;
+  onClose?: () => void;
+  children?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+/** 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 drawerCtx = useContext(DrawerContext);
+  const close = onClose ?? (() => drawerCtx?.close());
+  const canClose = showClose || onClose !== undefined;
+  return (
+    <View style={[styles.header, style]}>
+      {leading ? <View>{leading}</View> : null}
+      <View style={styles.headerText}>
+        {title ? (
+          <Text accessibilityRole="header" style={[styles.headerTitle, { color: colors.foreground }]} numberOfLines={1}>
+            {title}
+          </Text>
+        ) : null}
+        {subtitle ? (
+          <Text style={[styles.headerSub, { color: colors.mutedForeground }]} numberOfLines={1}>
+            {subtitle}
+          </Text>
+        ) : null}
+        {children}
+      </View>
+      {canClose ? (
+        <Pressable
+          onPress={close}
+          accessibilityRole="button"
+          accessibilityLabel="Close menu"
+          hitSlop={8}
+          style={({ pressed }) => [
+            styles.closeBtn,
+            {
+              borderRadius: radius.capsule(34),
+              backgroundColor: alpha(colors.foreground, pressed ? (dark ? 0.16 : 0.1) : dark ? 0.08 : 0.05),
+            },
+          ]}
+        >
+          <DrawerIcon name="x" size={16} color={colors.mutedForeground} />
+        </Pressable>
+      ) : null}
+    </View>
+  );
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * DrawerProfile
+ * -----------------------------------------------------------------------------------------------*/
+
+export type DrawerPresence = 'online' | 'away' | 'busy' | 'offline';
+
+export interface DrawerProfileProps {
+  name: string;
+  /** Email or any second line (plan, role, workspace URL). */
+  email?: string;
+  /** Avatar image URL. Without it, initials sit on a soft solid tint derived from the name. */
+  src?: string;
+  /** Presence dot on the avatar. */
+  status?: DrawerPresence;
+  /** 'row' — avatar beside the text · 'stacked' — large avatar above (Gmail-style). */
+  layout?: 'row' | 'stacked';
+  /** Makes the block a button (e.g. an account or workspace switcher). */
+  onPress?: () => void;
+  /** Trailing node. Defaults to an up/down chevron when `onPress` is set; `null` hides it. */
+  accessory?: React.ReactNode;
+  accessibilityHint?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+/** Account block for the drawer header: initials (or image) avatar with presence, name and email. */
+export function DrawerProfile({
+  name,
+  email,
+  src,
+  status,
+  layout = 'row',
+  onPress,
+  accessory,
+  accessibilityHint,
+  style,
+}: DrawerProfileProps) {
+  const { colors, radius, dark } = useKit();
+  const press = useRef(new Animated.Value(0)).current;
+  const stacked = layout === 'stacked';
+  const trailing =
+    accessory !== undefined ? (
+      accessory
+    ) : onPress ? (
+      <View
+        style={[
+          styles.profileChevron,
+          { borderRadius: radius.capsule(30), backgroundColor: alpha(colors.foreground, dark ? 0.08 : 0.05) },
+        ]}
+      >
+        <DrawerIcon name="chevrons" size={16} color={colors.mutedForeground} />
+      </View>
+    ) : null;
+  const text = (
+    <View style={styles.profileText}>
+      <Text numberOfLines={1} style={[styles.profileName, { color: colors.foreground }, stacked && styles.profileNameLg]}>
+        {name}
+      </Text>
+      {email ? (
+        <Text numberOfLines={1} style={[styles.profileEmail, { color: colors.mutedForeground }]}>
+          {email}
+        </Text>
+      ) : null}
+    </View>
+  );
+  const spring = (to: number) => Animated.spring(press, { toValue: to, useNativeDriver: true, ...motion.bouncy }).start();
+  return (
+    <Animated.View style={[{ transform: [{ scale: press.interpolate({ inputRange: [0, 1], outputRange: [1, 0.98] }) }] }, style]}>
+      <Pressable
+        disabled={!onPress}
+        onPress={onPress}
+        onPressIn={() => spring(1)}
+        onPressOut={() => spring(0)}
+        accessibilityRole={onPress ? 'button' : undefined}
+        accessibilityLabel={email ? `${name}, ${email}` : name}
+        accessibilityHint={accessibilityHint ?? (onPress ? 'Switch account' : undefined)}
+        style={({ pressed }) => [
+          stacked ? styles.profileStacked : styles.profileRow,
+          {
+            borderRadius: radius.lg,
+            backgroundColor: pressed && onPress ? alpha(colors.foreground, dark ? 0.08 : 0.05) : 'transparent',
+          },
+        ]}
+      >
+        {stacked ? (
+          <>
+            <View style={styles.profileTop}>
+              <ProfileAvatar name={name} src={src} size={56} status={status} />
+              {trailing}
+            </View>
+            {text}
+          </>
+        ) : (
+          <>
+            <ProfileAvatar name={name} src={src} size={44} status={status} />
+            {text}
+            {trailing}
+          </>
+        )}
+      </Pressable>
+    </Animated.View>
+  );
+}
+
+function ProfileAvatar({ name, src, size, status }: { name: string; src?: string; size: number; status?: DrawerPresence }) {
+  const { colors, radius, dark } = useKit();
+  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);
+  const initials = name
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((w) => w[0]?.toUpperCase() ?? '')
+    .join('');
+  const dot = Math.round(size * 0.27);
+  const presence: Record<DrawerPresence, string> = {
+    online: colors.success,
+    away: colors.warning,
+    busy: colors.danger,
+    offline: colors.mutedForeground,
+  };
+  return (
+    <View style={{ width: size, height: size }} accessible={false}>
+      <View
+        style={[
+          styles.clip,
+          styles.center,
+          {
+            width: size,
+            height: size,
+            borderRadius: radius.capsule(size),
+            backgroundColor: alpha(hue, dark ? 0.24 : 0.16),
+            borderWidth: StyleSheet.hairlineWidth,
+            borderColor: alpha(hue, dark ? 0.36 : 0.24),
+          },
+        ]}
+      >
+        <Text style={{ color: ink, fontSize: size * 0.36, fontWeight: '400', letterSpacing: -0.2 }}>{initials}</Text>
+        {src ? <Image source={{ uri: src }} alt="" style={StyleSheet.absoluteFill} /> : null}
+      </View>
+      {status ? (
+        <View
+          style={[
+            styles.presence,
+            {
+              width: dot + 4,
+              height: dot + 4,
+              borderRadius: radius.capsule(dot + 4),
+              backgroundColor: presence[status],
+              borderColor: ring,
+            },
+          ]}
+        />
+      ) : null}
+    </View>
+  );
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * Icons
+ * -----------------------------------------------------------------------------------------------*/
+
+const ICONS = {
+  home: ['M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z', 'M9 22V12h6v10'],
+  inbox: [
+    'M22 12h-6l-2 3h-4l-2-3H2',
+    'M5.45 5.11L2 12v6a2 2 0 002 2h16a2 2 0 002-2v-6l-3.45-6.89A2 2 0 0016.76 4H7.24a2 2 0 00-1.79 1.11z',
+  ],
+  send: ['M22 2L11 13', 'M22 2l-7 20-4-9-9-4 20-7z'],
+  file: ['M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z', 'M14 2v6h6', 'M8 13h8M8 17h5'],
+  archive: ['M21 8v13H3V8', 'M1 3h22v5H1z', 'M10 12h4'],
+  trash: ['M3 6h18', 'M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6', 'M10 11v6M14 11v6', 'M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2'],
+  alert: ['M12 22a10 10 0 100-20 10 10 0 000 20z', 'M12 8v4M12 16h.01'],
+  calendar: ['M5 4h14a2 2 0 012 2v14a2 2 0 01-2 2H5a2 2 0 01-2-2V6a2 2 0 012-2z', 'M16 2v4M8 2v4M3 10h18'],
+  folder: ['M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z'],
+  users: [
+    'M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2',
+    'M9 11a4 4 0 100-8 4 4 0 000 8z',
+    'M23 21v-2a4 4 0 00-3-3.87',
+    'M16 3.13a4 4 0 010 7.75',
+  ],
+  star: ['M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'],
+  chart: ['M18 20V10M12 20V4M6 20v-6'],
+  layers: ['M12 2L2 7l10 5 10-5-10-5z', 'M2 17l10 5 10-5', 'M2 12l10 5 10-5'],
+  target: ['M12 22a10 10 0 100-20 10 10 0 000 20z', 'M12 16a4 4 0 100-8 4 4 0 000 8z'],
+  search: ['M11 19a8 8 0 100-16 8 8 0 000 16z', 'M21 21l-4.35-4.35'],
+  music: ['M9 18V5l12-2v13', 'M6 21a3 3 0 100-6 3 3 0 000 6z', 'M18 19a3 3 0 100-6 3 3 0 000 6z'],
+  cloud: ['M18 10h-1.26A8 8 0 109 20h9a5 5 0 000-10z'],
+  settings: ['M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6'],
+  help: ['M12 22a10 10 0 100-20 10 10 0 000 20z', 'M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3', 'M12 17h.01'],
+  logout: ['M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4', 'M16 17l5-5-5-5', 'M21 12H9'],
+  bell: ['M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9', 'M13.73 21a2 2 0 01-3.46 0'],
+  bookmark: ['M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z'],
+  tag: ['M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z', 'M7 7h.01'],
+  plus: ['M12 5v14M5 12h14'],
+  menu: ['M3 6h18M3 12h18M3 18h18'],
+  filter: ['M3 6h18M6 12h12M10 18h4'],
+  chevrons: ['M7 9l5-5 5 5', 'M7 15l5 5 5-5'],
+  chevronRight: ['M9 18l6-6-6-6'],
+  x: ['M18 6L6 18M6 6l12 12'],
+  check: ['M20 6L9 17l-5-5'],
+} as const;
+
+export type DrawerIconName = keyof typeof ICONS;
+
+export interface DrawerIconProps {
+  name: DrawerIconName;
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+}
+
+/** The drawer's line icons (1.8 stroke), exported for menu buttons and headers. */
+export function DrawerIcon({ name, size = 22, color, strokeWidth = 1.8 }: DrawerIconProps) {
+  const { colors } = useKit();
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      {ICONS[name].map((d) => (
+        <Path
+          key={d}
+          d={d}
+          stroke={color ?? colors.foreground}
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      ))}
+    </Svg>
+  );
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * DrawerItem
+ * -----------------------------------------------------------------------------------------------*/
+
+export interface DrawerItemProps {
+  label: string;
+  /** A built-in icon name or your own node (e.g. a label colour dot). */
+  icon?: DrawerIconName | React.ReactNode;
+  /** A count or short text on the right. 0 hides it. */
+  badge?: number | string;
+  /** 'neutral' plain muted count (accent ink when active) · 'accent' soft tinted pill · 'danger' solid pill for alerts. */
+  badgeTone?: 'neutral' | 'accent' | 'danger';
+  /** Highlights the row as the current destination with a tinted pill. */
+  active?: boolean;
+  /** 'danger' tints the icon and label (e.g. Log out). */
+  tone?: 'default' | 'danger';
+  onPress?: () => void;
+  /** Close the surrounding Drawer after pressing (default true). */
+  closeOnPress?: boolean;
+  /** Active colour (default: theme accent). */
+  accent?: string;
+  /** Selection haptic on press (default true). */
+  haptics?: boolean;
+  /** Anything after the badge, e.g. a chevron or a Switch. */
+  trailing?: React.ReactNode;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+const ITEM_H = 46;
+
+/** A drawer row: icon, label and count badge, with a spring-in accent pill when active. */
+export function DrawerItem({
+  label,
+  icon,
+  badge,
+  badgeTone = 'neutral',
+  active = false,
+  tone = 'default',
+  onPress,
+  closeOnPress = true,
+  accent,
+  haptics = true,
+  trailing,
+  disabled,
+  style,
+}: DrawerItemProps) {
+  const { colors, radius, dark } = useKit();
+  const drawer = useContext(DrawerContext);
+  const reduceMotion = useReduceMotion();
+  const danger = tone === 'danger';
+  const tint = danger ? colors.danger : (accent ?? colors.accent);
+  const ink = dark ? tint : mix(tint, colors.foreground, 0.22);
+
+  // Native-driven: pill presence, icon pop, badge pop, press scale — each on its own value.
+  const on = useRef(new Animated.Value(active ? 1 : 0)).current;
+  const pop = useRef(new Animated.Value(1)).current;
+  const badgePop = useRef(new Animated.Value(1)).current;
+  const press = useRef(new Animated.Value(0)).current;
+  const first = useRef(true);
+  const firstBadge = useRef(true);
+
+  useEffect(() => {
+    Animated.spring(on, { toValue: active ? 1 : 0, useNativeDriver: true, ...motion.snappy }).start();
+    if (first.current) {
+      first.current = false;
+      return;
+    }
+    if (active && !reduceMotion) {
+      pop.setValue(0.78);
+      Animated.spring(pop, { toValue: 1, useNativeDriver: true, ...motion.bouncy }).start();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [active]);
+
+  useEffect(() => {
+    if (firstBadge.current) {
+      firstBadge.current = false;
+      return;
+    }
+    if (reduceMotion) return;
+    badgePop.setValue(0.6);
+    Animated.spring(badgePop, { toValue: 1, useNativeDriver: true, ...motion.bouncy }).start();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [badge]);
+
+  const showBadge = badge !== undefined && badge !== 0 && badge !== '';
+  // Neutral counts are plain text (iOS / Material 3 style); 'accent' gets a soft tinted pill and
+  // 'danger' a solid one. On the active row the count takes the row's ink colour.
+  const badgeColors =
+    badgeTone === 'danger'
+      ? { bg: colors.danger, fg: colors.dangerForeground }
+      : badgeTone === 'accent'
+        ? { bg: alpha(tint, dark ? 0.24 : 0.14), fg: ink }
+        : { bg: 'transparent', fg: active ? ink : colors.mutedForeground };
+  const badgePill = badgeTone !== 'neutral';
+  const iconColor = active ? tint : danger ? colors.danger : colors.mutedForeground;
+  const labelColor = active ? ink : danger ? colors.danger : colors.foreground;
+  const pill = radius.capsule(ITEM_H);
+  const spring = (to: number) => Animated.spring(press, { toValue: to, useNativeDriver: true, ...motion.bouncy }).start();
+
+  return (
+    <Animated.View style={{ transform: [{ scale: press.interpolate({ inputRange: [0, 1], outputRange: [1, 0.98] }) }] }}>
+      <Pressable
+        onPress={() => {
+          if (haptics) Haptics.selectionAsync().catch(() => {});
+          onPress?.();
+          if (closeOnPress) drawer?.close();
+        }}
+        disabled={disabled}
+        accessibilityRole="menuitem"
+        accessibilityLabel={showBadge ? `${label}, ${badge}` : label}
+        accessibilityState={{ selected: active, disabled: !!disabled }}
+        onPressIn={() => spring(1)}
+        onPressOut={() => spring(0)}
+        style={({ pressed }) => [
+          styles.item,
+          {
+            borderRadius: pill,
+            opacity: disabled ? 0.45 : 1,
+            backgroundColor: pressed && !active ? alpha(colors.foreground, dark ? 0.07 : 0.045) : 'transparent',
+          },
+          style,
+        ]}
+      >
+        <Animated.View
+          pointerEvents="none"
+          style={[
+            StyleSheet.absoluteFill,
+            {
+              borderRadius: pill,
+              backgroundColor: alpha(tint, dark ? 0.18 : 0.12),
+              opacity: on,
+              transform: [{ scaleX: on.interpolate({ inputRange: [0, 1], outputRange: [0.92, 1] }) }],
+            },
+          ]}
+        />
+        {icon ? (
+          <Animated.View style={[styles.itemIcon, { transform: [{ scale: pop }] }]}>
+            {typeof icon === 'string' ? (
+              <DrawerIcon name={icon as DrawerIconName} size={21} color={iconColor} strokeWidth={active ? 2.1 : 1.8} />
+            ) : (
+              icon
+            )}
+          </Animated.View>
+        ) : null}
+        <Text numberOfLines={1} style={[styles.itemLabel, { color: labelColor }]}>
+          {label}
+        </Text>
+        {showBadge ? (
+          <Animated.View
+            style={[
+              styles.badge,
+              !badgePill && styles.badgePlain,
+              { borderRadius: radius.capsule(22), backgroundColor: badgeColors.bg, transform: [{ scale: badgePop }] },
+            ]}
+          >
+            <Text style={[styles.badgeText, { color: badgeColors.fg }]}>
+              {typeof badge === 'number' && badge > 99 ? '99+' : badge}
+            </Text>
+          </Animated.View>
+        ) : null}
+        {trailing}
+      </Pressable>
+    </Animated.View>
+  );
+}
+
+export interface DrawerSectionProps {
+  title: string;
+  /** Node on the right of the heading, e.g. a small "+" button. */
+  trailing?: React.ReactNode;
+  /** Hairline above the heading, separating it from the group before (default true). */
+  divider?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+/** 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();
+  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 }]}>
+          {title}
+        </Text>
+        {trailing}
+      </View>
+    </View>
+  );
+}
+
+export interface DrawerFooterProps {
+  label: string;
+  /** Muted second line, e.g. "12.4 GB of 15 GB used". */
+  detail?: string;
+  icon?: DrawerIconName | React.ReactNode;
+  /** 0–1: draws a thin meter under the label (turns warning above 90%). */
+  progress?: number;
+  onPress?: () => void;
+  /** Node on the right, e.g. an icon button. */
+  trailing?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+/** 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 pct = progress === undefined ? undefined : Math.max(0, Math.min(1, progress));
+  return (
+    <Pressable
+      disabled={!onPress}
+      onPress={onPress}
+      accessibilityRole={onPress ? 'button' : undefined}
+      accessibilityLabel={detail ? `${label}, ${detail}` : label}
+      accessibilityValue={pct !== undefined ? { min: 0, max: 100, now: Math.round(pct * 100) } : undefined}
+      style={({ pressed }) => [
+        styles.footerRow,
+        {
+          borderRadius: radius.lg,
+          backgroundColor: pressed && onPress ? alpha(colors.foreground, dark ? 0.07 : 0.045) : 'transparent',
+        },
+        style,
+      ]}
+    >
+      {icon ? (
+        <View style={styles.itemIcon}>
+          {typeof icon === 'string' ? <DrawerIcon name={icon as DrawerIconName} size={20} color={colors.mutedForeground} /> : icon}
+        </View>
+      ) : null}
+      <View style={styles.footerText}>
+        <Text numberOfLines={1} style={[styles.footerLabel, { color: colors.foreground }]}>
+          {label}
+        </Text>
+        {pct !== undefined ? (
+          <View style={[styles.meter, { borderRadius: radius.capsule(4), backgroundColor: alpha(colors.foreground, dark ? 0.1 : 0.07) }]}>
+            <View
+              style={{
+                width: `${pct * 100}%`,
+                height: '100%',
+                borderRadius: radius.capsule(4),
+                backgroundColor: pct > 0.9 ? colors.warning : colors.accent,
+              }}
+            />
+          </View>
+        ) : null}
+        {detail ? (
+          <Text numberOfLines={1} style={[styles.footerDetail, { color: colors.mutedForeground }]}>
+            {detail}
+          </Text>
+        ) : null}
+      </View>
+      {trailing}
+    </Pressable>
+  );
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * Helpers
+ * -----------------------------------------------------------------------------------------------*/
+
+/** Diminishing resistance past the limits (approaches `dimension`). */
+function rubber(distance: number, dimension: number) {
+  return (distance * dimension * 0.55) / (dimension + 0.55 * distance);
+}
+
+function useReduceMotion() {
+  const [reduce, setReduce] = useState(false);
+  useEffect(() => {
+    let alive = true;
+    AccessibilityInfo.isReduceMotionEnabled()
+      .then((v) => alive && setReduce(v))
+      .catch(() => {});
+    const sub = AccessibilityInfo.addEventListener('reduceMotionChanged', setReduce);
+    return () => {
+      alive = false;
+      sub.remove();
+    };
+  }, []);
+  return reduce;
+}
+
+function parseHex(hex: string): [number, number, number] | null {
+  const full = hex.length === 4 ? '#' + [...hex.slice(1)].map((c) => c + c).join('') : hex;
+  if (!/^#[0-9a-fA-F]{6}/.test(full)) return null;
+  const n = parseInt(full.slice(1, 7), 16);
+  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+}
+
+function toHex(r: number, g: number, b: number) {
+  return '#' + [r, g, b].map((v) => Math.round(Math.max(0, Math.min(255, v))).toString(16).padStart(2, '0')).join('');
+}
+
+/** Blend `a` toward `b` by `t` (hex colours; returns `a` if either can't be parsed). */
+function mix(a: string, b: string, t: number) {
+  const x = parseHex(a);
+  const y = parseHex(b);
+  if (!x || !y) return a;
+  return toHex(x[0] + (y[0] - x[0]) * t, x[1] + (y[1] - x[1]) * t, x[2] + (y[2] - x[2]) * t);
+}
+
+function hsl(h: number, s: number, l: number) {
+  const k = (n: number) => (n + h / 30) % 12;
+  const a = s * Math.min(l, 1 - l);
+  const f = (n: number) => l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
+  return toHex(f(0) * 255, f(8) * 255, f(4) * 255);
+}
+
+/** One solid, calm colour per name, so the same person always gets the same avatar tint. */
+function nameColor(name: string) {
+  let h = 0;
+  for (let i = 0; i < name.length; i++) h = (h * 31 + name.charCodeAt(i)) % 360;
+  return hsl(h, 0.55, 0.52);
+}
+
+const styles = StyleSheet.create({
+  // 'clip' on web: an overflow:hidden box can still be scrolled by focus, which would shift the panel.
+  root: Platform.OS === 'web' ? ({ flex: 1, overflow: 'clip' } as object) : { flex: 1, overflow: 'hidden' },
+  flex: { flex: 1 },
+  clip: { overflow: 'hidden' },
+  center: { alignItems: 'center', justifyContent: 'center' },
+  panel: { position: 'absolute', top: 0, bottom: 0 },
+  borderRight: { borderRightWidth: StyleSheet.hairlineWidth },
+  borderLeft: { borderLeftWidth: StyleSheet.hairlineWidth },
+  chromeTop: { paddingHorizontal: 10, paddingBottom: 6 },
+  chromeTopDivided: { borderBottomWidth: StyleSheet.hairlineWidth, paddingBottom: 10, marginBottom: 4 },
+  chromeBottom: { paddingHorizontal: 10, paddingTop: 8, borderTopWidth: StyleSheet.hairlineWidth },
+  handleSpacer: { height: 8 },
+  content: { paddingHorizontal: 10, paddingTop: 4, paddingBottom: 12, gap: 2 },
+  header: { flexDirection: 'row', alignItems: 'center', gap: 12, paddingHorizontal: 8, paddingVertical: 8 },
+  headerText: { flex: 1, gap: 2, minWidth: 0 },
+  headerTitle: { fontSize: 20, lineHeight: 26, fontWeight: '400', letterSpacing: -0.4 },
+  headerSub: { fontSize: 13, lineHeight: 18, fontWeight: '400' },
+  closeBtn: { width: 34, height: 34, alignItems: 'center', justifyContent: 'center' },
+  profileRow: { flexDirection: 'row', alignItems: 'center', gap: 12, padding: 8 },
+  profileStacked: { gap: 12, padding: 8 },
+  profileTop: { flexDirection: 'row', alignItems: 'flex-start', justifyContent: 'space-between' },
+  profileText: { flex: 1, minWidth: 0, gap: 1 },
+  profileName: { fontSize: 16, lineHeight: 21, fontWeight: '400', letterSpacing: -0.2 },
+  profileNameLg: { fontSize: 18, lineHeight: 23, letterSpacing: -0.3 },
+  profileEmail: { fontSize: 13, lineHeight: 18, fontWeight: '400' },
+  profileChevron: { width: 30, height: 30, alignItems: 'center', justifyContent: 'center' },
+  presence: { position: 'absolute', right: -2, bottom: -2, borderWidth: 2 },
+  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' },
+  badgePlain: { paddingHorizontal: 2, minWidth: 0 },
+  badgeText: { fontSize: 13, fontWeight: '400', fontVariant: ['tabular-nums'] },
+  section: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    minHeight: 36,
+    paddingLeft: 14,
+    paddingRight: 10,
+    paddingTop: 6,
+    paddingBottom: 2,
+  },
+  sectionFlush: { paddingTop: 10 },
+  sectionText: { 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 },
+  footerLabel: { fontSize: 14, fontWeight: '400' },
+  footerDetail: { fontSize: 12, fontWeight: '400' },
+  meter: { height: 4, overflow: 'hidden' },
+});