@expokit/cli 0.0.0-stage → 0.2.0

package/registry/bottom-nav/files/src/components/ui/bottom-nav.tsx

@@ -0,0 +1,1050 @@
+import * as Haptics from 'expo-haptics';
+import React, { useEffect, useId, useRef, useState } from 'react';
+import {
+  AccessibilityInfo,
+  Animated,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type LayoutChangeEvent,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import Svg, { Circle, Defs, LinearGradient, Path, RadialGradient, Rect, Stop } from 'react-native-svg';
+
+import { alpha, motion, readableOn, useKit } from '@/lib/kit';
+
+/** The five looks. */
+export type BottomNavLook = 'minimal' | 'floating' | 'pill' | 'center-fab' | 'indicator';
+
+/**
+ * @deprecated Retired looks. They still render, as the closest kept look:
+ * `glass`, `neumorphic`, `dock`, `curved` → `floating`; `gradient`, `outline` → `pill`.
+ */
+export type BottomNavLegacyVariant = 'glass' | 'neumorphic' | 'gradient' | 'outline' | 'curved' | 'dock';
+
+export type BottomNavVariant = BottomNavLook | BottomNavLegacyVariant;
+
+const LEGACY: Record<BottomNavLegacyVariant, BottomNavLook> = {
+  glass: 'floating',
+  neumorphic: 'floating',
+  dock: 'floating',
+  curved: 'floating',
+  gradient: 'pill',
+  outline: 'pill',
+};
+
+export type BottomNavIconName =
+  | 'home'
+  | 'explore'
+  | 'search'
+  | 'projects'
+  | 'saved'
+  | 'profile'
+  | 'inbox'
+  | 'activity'
+  | 'analytics'
+  | 'message'
+  | 'work'
+  | 'browse'
+  | 'library'
+  | 'music'
+  | 'create';
+
+export interface BottomNavIconProps {
+  color: string;
+  size: number;
+  active: boolean;
+}
+
+export interface BottomNavItem {
+  key: string;
+  label: string;
+  /**
+   * A built-in icon name, or a render function for your own icon. Render functions are called
+   * twice (outline with `active: false`, filled with `active: true`) so the bar can morph between them.
+   */
+  icon: BottomNavIconName | ((props: BottomNavIconProps) => React.ReactNode);
+  /** `true` shows a dot; a number shows a count (99+ above 99). */
+  badge?: boolean | number;
+  /**
+   * A primary action (e.g. Create) instead of a destination: drawn as a solid accent button and never
+   * becomes the active tab. Pressing it calls `onAction`.
+   */
+  action?: boolean;
+  accessibilityLabel?: string;
+}
+
+export interface BottomNavProps {
+  items: BottomNavItem[];
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (key: string) => void;
+  /** Called with the item's key when an `action` item is pressed. */
+  onAction?: (key: string) => void;
+  variant?: BottomNavVariant;
+  /** Active colour and the action button fill. */
+  accent?: string;
+  /** Opt-in two-colour gradient for the action button (default: none — a solid accent fill). */
+  gradient?: [string, string];
+  /** Show labels. `floating` and `pill` show only the active label; the others show all. */
+  showLabels?: boolean;
+  /** Extra bottom padding, e.g. `useSafeAreaInsets().bottom` when the bar sits at the screen edge. */
+  bottomInset?: number;
+  /** Show the iOS home-indicator line (default: on for `minimal`). */
+  homeIndicator?: boolean;
+  /** Selection tick on tab change, light impact on the action button (default true). */
+  haptics?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+const ROW_H = 60;
+const PAD_X = 6;
+const PAD_TOP = 6;
+const FAB = 58;
+const ICON = 24;
+const DOT = 5;
+const PILL_H = 42;
+/** Flex weight of the active item in the `pill` look (the others are 1). */
+const PILL_GROW = 2.3;
+// Liquid move: the edge in the direction of travel leads, the other one trails behind.
+const LEAD = { damping: 22, stiffness: 320, mass: 0.7 };
+const TRAIL = { damping: 20, stiffness: 150, mass: 0.9 };
+
+/**
+ * Bottom navigation in five looks — minimal dot, floating capsule, expanding pill, notched centre
+ * FAB and top indicator with a spotlight. A liquid indicator stretches between tabs (leading edge
+ * first, trailing edge catching up), icons morph from outline to filled with a spring and a lift,
+ * badges pop, the solid accent action button glows softly, and every change ticks a haptic.
+ */
+export function BottomNav({
+  items,
+  value,
+  defaultValue,
+  onValueChange,
+  onAction,
+  variant = 'minimal',
+  accent,
+  gradient,
+  showLabels = true,
+  bottomInset = 0,
+  homeIndicator,
+  haptics = true,
+  style,
+}: BottomNavProps) {
+  const { colors, radius, dark } = useKit();
+  const uid = useId().replace(/[^a-zA-Z0-9]/g, '');
+  const reduce = useReduceMotion();
+  const look: BottomNavLook = variant in LEGACY ? LEGACY[variant as BottomNavLegacyVariant] : (variant as BottomNavLook);
+  const tint = accent ?? colors.accent;
+  const fabFrom = gradient?.[0] ?? tint;
+  const fabTo = gradient?.[1] ?? fabFrom;
+
+  const firstTab = items.findIndex((i) => !i.action);
+  const [inner, setInner] = useState(defaultValue ?? items[firstTab]?.key);
+  const active = value ?? inner;
+  const found = items.findIndex((i) => i.key === active && !i.action);
+  const index = found >= 0 ? found : firstTab;
+  const actionIndex = items.findIndex((i) => i.action);
+
+  // Measured: the row of slots (indicator geometry) and the whole bar (centre-fab notch).
+  const [rowW, setRowW] = useState(0);
+  const [bar, setBar] = useState({ w: 0, h: 0 });
+  const n = Math.max(1, items.length);
+  const slot = rowW / n;
+
+  // Indicator edges (JS driver: they set left / width) and the slot offset (native: spotlight).
+  const lead = useRef(new Animated.Value(0)).current;
+  const trail = useRef(new Animated.Value(0)).current;
+  const x = useRef(new Animated.Value(0)).current;
+  const placed = useRef(false);
+  const last = useRef(index);
+
+  const edges = (i: number): [number, number] => {
+    if (look === 'pill') {
+      const unit = rowW / (n - 1 + PILL_GROW);
+      return [i * unit + 2, (i + PILL_GROW) * unit - 2];
+    }
+    if (look === 'floating') return [i * slot + 4, (i + 1) * slot - 4];
+    if (look === 'indicator') return [i * slot + slot * 0.24, (i + 1) * slot - slot * 0.24];
+    const c = (i + 0.5) * slot;
+    return [c - DOT / 2, c + DOT / 2];
+  };
+
+  useEffect(() => {
+    if (!rowW || index < 0) return;
+    const [L, R] = edges(index);
+    const to = index * slot;
+    if (!placed.current) {
+      lead.setValue(L);
+      trail.setValue(R);
+      x.setValue(to);
+      placed.current = true;
+      last.current = index;
+      return;
+    }
+    const right = index > last.current;
+    last.current = index;
+    if (reduce) {
+      // Functional, not decorative: a short glide with no stretch.
+      const t = { duration: 160, useNativeDriver: false };
+      Animated.parallel([
+        Animated.timing(lead, { toValue: L, ...t }),
+        Animated.timing(trail, { toValue: R, ...t }),
+        Animated.timing(x, { toValue: to, duration: 160, useNativeDriver: true }),
+      ]).start();
+      return;
+    }
+    Animated.parallel([
+      Animated.spring(lead, { toValue: L, useNativeDriver: false, ...(right ? TRAIL : LEAD) }),
+      Animated.spring(trail, { toValue: R, useNativeDriver: false, ...(right ? LEAD : TRAIL) }),
+      Animated.spring(x, { toValue: to, useNativeDriver: true, ...motion.snappy }),
+    ]).start();
+    // edges() only reads rowW / look / n, all listed.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [index, rowW, look, n]);
+
+  const onRowLayout = (e: LayoutChangeEvent) => {
+    const w = e.nativeEvent.layout.width;
+    if (Math.abs(w - rowW) > 0.5) setRowW(w);
+  };
+  const onBarLayout = (e: LayoutChangeEvent) => {
+    const { width, height } = e.nativeEvent.layout;
+    if (Math.abs(width - bar.w) > 0.5 || Math.abs(height - bar.h) > 0.5) setBar({ w: width, h: height });
+  };
+
+  const press = (item: BottomNavItem) => {
+    if (item.action) {
+      if (haptics) Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light).catch(() => {});
+      onAction?.(item.key);
+      return;
+    }
+    if (item.key === active) return;
+    if (haptics) Haptics.selectionAsync().catch(() => {});
+    if (value === undefined) setInner(item.key);
+    onValueChange?.(item.key);
+  };
+
+  // ---- palette ---------------------------------------------------------------------------------
+  const hairline = alpha(colors.foreground, dark ? 0.1 : 0.06);
+  const surface = look === 'floating' && dark ? colors.popover : colors.card;
+  const idle = colors.mutedForeground;
+  const showHome = homeIndicator ?? (look === 'minimal' || variant === 'gradient');
+  const notched = look === 'center-fab' && actionIndex >= 0;
+  // Transparent band above the drawn bar that holds the FAB, so it stays inside the bar's bounds
+  // (Android only delivers touches inside them).
+  const overhang = notched ? FAB / 2 : 0;
+  const floatR = radius.capsule(ROW_H + PAD_TOP * 2);
+
+  // ---- indicator (behind the icons) ------------------------------------------------------------
+  let indicator: React.ReactNode = null;
+  if (rowW && index >= 0) {
+    const width = Animated.subtract(trail, lead);
+    if (look === 'minimal' || look === 'center-fab') {
+      indicator = (
+        <Animated.View
+          pointerEvents="none"
+          style={[styles.abs, { top: ROW_H - 6, height: DOT, borderRadius: radius.capsule(DOT), backgroundColor: tint, left: lead, width }]}
+        />
+      );
+    } else if (look === 'pill') {
+      indicator = (
+        <Animated.View
+          pointerEvents="none"
+          style={[
+            styles.abs,
+            {
+              top: (ROW_H - PILL_H) / 2,
+              height: PILL_H,
+              left: lead,
+              width,
+              borderRadius: radius.capsule(PILL_H),
+              backgroundColor: alpha(tint, dark ? 0.2 : 0.11),
+              borderWidth: StyleSheet.hairlineWidth,
+              borderColor: alpha(tint, dark ? 0.3 : 0.18),
+            },
+          ]}
+        />
+      );
+    } else if (look === 'floating') {
+      indicator = (
+        <Animated.View
+          pointerEvents="none"
+          style={[
+            styles.abs,
+            {
+              top: 4,
+              bottom: 4,
+              left: lead,
+              width,
+              borderRadius: Math.max(radius.scale(10), floatR - PAD_TOP - 4),
+              backgroundColor: alpha(tint, dark ? 0.18 : 0.1),
+            },
+          ]}
+        />
+      );
+    } else {
+      const H = ROW_H + PAD_TOP;
+      indicator = (
+        <>
+          {/* Spotlight: a cone of accent light falling from the bar. Native slide. */}
+          <Animated.View pointerEvents="none" style={[styles.abs, { left: 0, top: -PAD_TOP, width: slot, height: H, transform: [{ translateX: x }] }]}>
+            <Svg width={slot} height={H}>
+              <Defs>
+                <LinearGradient id={`bnSpot${uid}`} x1="0" y1="0" x2="0" y2="1">
+                  <Stop offset="0" stopColor={tint} stopOpacity={dark ? 0.26 : 0.16} />
+                  <Stop offset="1" stopColor={tint} stopOpacity={0} />
+                </LinearGradient>
+              </Defs>
+              <Path d={`M${slot * 0.24} 0 H${slot * 0.76} L${slot * 0.98} ${H} H${slot * 0.02} Z`} fill={`url(#bnSpot${uid})`} />
+            </Svg>
+          </Animated.View>
+          {/* The liquid line on the top edge. JS-driven edges, separate view. */}
+          <Animated.View
+            pointerEvents="none"
+            style={[
+              styles.abs,
+              {
+                top: -PAD_TOP,
+                height: 3,
+                left: lead,
+                width,
+                borderBottomLeftRadius: radius.capsule(6),
+                borderBottomRightRadius: radius.capsule(6),
+                backgroundColor: tint,
+              },
+            ]}
+          />
+        </>
+      );
+    }
+  }
+
+  // ---- centre FAB in its notch (absolute, so its whole face stays inside the bar's bounds) -----
+  let centre: React.ReactNode = null;
+  if (notched && rowW) {
+    const item = items[actionIndex];
+    centre = (
+      <CentreAction
+        item={item}
+        left={PAD_X + actionIndex * slot}
+        width={slot}
+        height={overhang + PAD_TOP + ROW_H}
+        labelTop={overhang + PAD_TOP + 37}
+        from={fabFrom}
+        to={fabTo}
+        labelColor={idle}
+        showLabel={showLabels}
+        onPress={() => press(item)}
+      />
+    );
+  }
+
+  const row = (
+    <View style={styles.row} onLayout={onRowLayout}>
+      {indicator}
+      {items.map((item, i) => (
+        <NavButton
+          key={item.key}
+          item={item}
+          active={i === index && !item.action}
+          look={look}
+          tint={tint}
+          idle={idle}
+          surface={surface}
+          fab={[fabFrom, fabTo]}
+          showLabels={showLabels}
+          reduce={reduce}
+          onPress={() => press(item)}
+        />
+      ))}
+    </View>
+  );
+
+  const home = showHome ? (
+    <View pointerEvents="none" style={[styles.home, { borderRadius: radius.capsule(5), backgroundColor: alpha(colors.foreground, 0.85) }]} />
+  ) : null;
+
+  if (look === 'floating') {
+    // Two shadows: a wide soft one on the outer view, a tight contact one on the bar itself.
+    return (
+      <View
+        style={[
+          styles.floatOuter,
+          { marginBottom: 12 + bottomInset, borderRadius: floatR, backgroundColor: surface, shadowOpacity: dark ? 0.55 : 0.1 },
+          style,
+        ]}
+      >
+        <View
+          accessibilityRole="tablist"
+          style={[
+            styles.bar,
+            styles.floatInner,
+            {
+              paddingBottom: showHome ? 16 : PAD_TOP,
+              borderRadius: floatR,
+              backgroundColor: surface,
+              borderColor: hairline,
+              shadowOpacity: dark ? 0.35 : 0.06,
+            },
+          ]}
+        >
+          <Svg pointerEvents="none" style={StyleSheet.absoluteFill} width="100%" height="100%">
+            <Defs>
+              <LinearGradient id={`bnSheen${uid}`} x1="0" y1="0" x2="0" y2="1">
+                <Stop offset="0" stopColor={colors.foreground} stopOpacity={dark ? 0.06 : 0} />
+                <Stop offset="1" stopColor={colors.foreground} stopOpacity={dark ? 0 : 0.025} />
+              </LinearGradient>
+            </Defs>
+            <Rect width="100%" height="100%" rx={floatR} fill={`url(#bnSheen${uid})`} />
+          </Svg>
+          {row}
+          {home}
+        </View>
+      </View>
+    );
+  }
+
+  const barStyle: ViewStyle[] = [
+    styles.bar,
+    { paddingTop: PAD_TOP + overhang, paddingBottom: bottomInset + (showHome ? 18 : PAD_TOP) },
+  ];
+  if (notched) barStyle.push(styles.visible);
+  else barStyle.push({ backgroundColor: colors.card, borderTopWidth: StyleSheet.hairlineWidth, borderTopColor: hairline });
+  if (look === 'indicator') barStyle.push(styles.clip);
+
+  return (
+    <View accessibilityRole="tablist" onLayout={notched ? onBarLayout : undefined} style={[...barStyle, style]}>
+      {notched && bar.w && rowW ? (
+        <BarShape
+          d={notchPath(bar.w, bar.h, PAD_X + (actionIndex + 0.5) * slot, FAB / 2 + 7, FAB / 2 + 4, overhang)}
+          fill={colors.card}
+          stroke={hairline}
+        />
+      ) : null}
+      {row}
+      {centre}
+      {home}
+    </View>
+  );
+}
+
+interface NavButtonProps {
+  item: BottomNavItem;
+  active: boolean;
+  look: BottomNavLook;
+  tint: string;
+  idle: string;
+  surface: string;
+  fab: [string, string];
+  showLabels: boolean;
+  reduce: boolean;
+  onPress: () => void;
+}
+
+function NavButton({ item, active, look, tint, idle, surface, fab, showLabels, reduce, onPress }: NavButtonProps) {
+  const press = useRef(new Animated.Value(1)).current; // press squish (native)
+  const pop = useRef(new Animated.Value(active ? 1 : 0)).current; // active state (native)
+  const grow = useRef(new Animated.Value(active ? 1 : 0)).current; // pill width (JS — layout)
+  const [labelW, setLabelW] = useState(0);
+
+  useEffect(() => {
+    if (reduce) {
+      Animated.timing(pop, { toValue: active ? 1 : 0, duration: 140, useNativeDriver: true }).start();
+      if (look === 'pill') Animated.timing(grow, { toValue: active ? 1 : 0, duration: 140, useNativeDriver: false }).start();
+      return;
+    }
+    Animated.spring(pop, { toValue: active ? 1 : 0, useNativeDriver: true, ...(active ? motion.bouncy : motion.snappy) }).start();
+    if (look === 'pill') Animated.spring(grow, { toValue: active ? 1 : 0, useNativeDriver: false, ...LEAD }).start();
+  }, [active, look, reduce, pop, grow]);
+
+  const pressTo = (v: number) =>
+    Animated.spring(press, { toValue: v, useNativeDriver: true, ...(v < 1 ? motion.snappy : motion.bouncy) }).start();
+  const a11y = item.accessibilityLabel ?? (typeof item.badge === 'number' ? `${item.label}, ${item.badge} new` : item.label);
+  const pressable = {
+    onPress,
+    onPressIn: () => pressTo(0.88),
+    onPressOut: () => pressTo(1),
+    accessibilityLabel: a11y,
+  };
+
+  // ---- primary action ----
+  if (item.action) {
+    // Centre-fab draws its FAB over the notch (see CentreAction); keep the slot.
+    if (look === 'center-fab') return <View style={styles.slot} />;
+    const size = look === 'floating' ? 46 : 40;
+    return (
+      <Pressable {...pressable} accessibilityRole="button" hitSlop={4} style={styles.slot}>
+        <Animated.View style={{ transform: [{ scale: press }] }}>
+          <FabFace size={size} from={fab[0]} to={fab[1]} glow={false} pressed={press}>
+            {renderIcon(item.icon, { color: readableOn(fab[0]), size: 22, active: true })}
+          </FabFace>
+        </Animated.View>
+      </Pressable>
+    );
+  }
+
+  const badge = item.badge ? <Badge value={item.badge} ring={surface} reduce={reduce} /> : null;
+  const icon = <MorphIcon icon={item.icon} size={ICON} idle={idle} active={tint} pop={pop} />;
+  const fadeIn = pop.interpolate({ inputRange: [0, 1], outputRange: [0, 1], extrapolate: 'clamp' });
+  const tab = { ...pressable, accessibilityRole: 'tab' as const, accessibilityState: { selected: active } };
+
+  // ---- pill: the active tab widens into a capsule and its label slides in ----
+  if (look === 'pill') {
+    return (
+      <Animated.View style={{ flex: grow.interpolate({ inputRange: [0, 1], outputRange: [1, PILL_GROW] }) }}>
+        <Pressable {...tab} style={styles.slot}>
+          <Animated.View style={[styles.pillRow, { transform: [{ scale: press }] }]}>
+            <Animated.View style={{ transform: [{ scale: pop.interpolate({ inputRange: [0, 1], outputRange: [1, 1.04] }) }] }}>
+              {icon}
+              {badge}
+            </Animated.View>
+            {showLabels ? (
+              <Animated.View
+                style={{
+                  width: grow.interpolate({ inputRange: [0, 1], outputRange: [0, labelW + 1] }),
+                  marginLeft: grow.interpolate({ inputRange: [0, 1], outputRange: [0, 7] }),
+                  overflow: 'hidden',
+                }}
+              >
+                <Animated.Text
+                  numberOfLines={1}
+                  style={[
+                    styles.pillLabel,
+                    {
+                      width: labelW + 1,
+                      color: tint,
+                      opacity: fadeIn,
+                      transform: [{ translateX: pop.interpolate({ inputRange: [0, 1], outputRange: [-8, 0] }) }],
+                    },
+                  ]}
+                >
+                  {item.label}
+                </Animated.Text>
+              </Animated.View>
+            ) : null}
+          </Animated.View>
+          {/* Invisible measurer: the label's natural width, so it never ellipsizes while growing. */}
+          {showLabels ? (
+            <View pointerEvents="none" style={styles.measure} accessibilityElementsHidden importantForAccessibility="no-hide-descendants">
+              <Text style={[styles.pillLabel, styles.selfStart]} onLayout={(e) => setLabelW(Math.ceil(e.nativeEvent.layout.width))}>
+                {item.label}
+              </Text>
+            </View>
+          ) : null}
+        </Pressable>
+      </Animated.View>
+    );
+  }
+
+  // ---- floating: icon lifts and the active label rises in beneath it ----
+  if (look === 'floating') {
+    return (
+      <Pressable {...tab} style={styles.slot}>
+        <Animated.View style={{ transform: [{ scale: press }] }}>
+          <Animated.View
+            style={{
+              transform: [
+                { translateY: pop.interpolate({ inputRange: [0, 1], outputRange: [0, showLabels ? -8 : -1] }) },
+                { scale: pop.interpolate({ inputRange: [0, 1], outputRange: [1, showLabels ? 1 : 1.08] }) },
+              ],
+            }}
+          >
+            {icon}
+            {badge}
+          </Animated.View>
+        </Animated.View>
+        {showLabels ? (
+          <Animated.Text
+            numberOfLines={1}
+            style={[
+              styles.label,
+              styles.floatLabel,
+              { color: tint, opacity: fadeIn, transform: [{ translateY: pop.interpolate({ inputRange: [0, 1], outputRange: [6, 0] }) }] },
+            ]}
+          >
+            {item.label}
+          </Animated.Text>
+        ) : null}
+      </Pressable>
+    );
+  }
+
+  // ---- minimal / indicator / centre-fab: icon over label ----
+  return (
+    <Pressable {...tab} style={styles.slot}>
+      <Animated.View style={[styles.center, { transform: [{ scale: press }] }]}>
+        <Animated.View
+          style={{
+            transform: [
+              { translateY: pop.interpolate({ inputRange: [0, 1], outputRange: [0, -2] }) },
+              { scale: pop.interpolate({ inputRange: [0, 1], outputRange: [1, 1.08] }) },
+            ],
+          }}
+        >
+          {icon}
+          {badge}
+        </Animated.View>
+        {showLabels ? (
+          <Text numberOfLines={1} style={[styles.label, { color: active ? tint : idle }]}>
+            {item.label}
+          </Text>
+        ) : null}
+      </Animated.View>
+    </Pressable>
+  );
+}
+
+/** Outline and filled icons stacked: the outline fades out while the fill springs up from inside. */
+function MorphIcon({
+  icon,
+  size,
+  idle,
+  active,
+  pop,
+}: {
+  icon: BottomNavItem['icon'];
+  size: number;
+  idle: string;
+  active: string;
+  pop: Animated.Value;
+}) {
+  return (
+    <View style={{ width: size, height: size }}>
+      <Animated.View style={[StyleSheet.absoluteFill, { opacity: pop.interpolate({ inputRange: [0, 1], outputRange: [1, 0], extrapolate: 'clamp' }) }]}>
+        {renderIcon(icon, { color: idle, size, active: false })}
+      </Animated.View>
+      <Animated.View
+        style={[
+          StyleSheet.absoluteFill,
+          {
+            opacity: pop.interpolate({ inputRange: [0, 1], outputRange: [0, 1], extrapolate: 'clamp' }),
+            transform: [{ scale: pop.interpolate({ inputRange: [0, 1], outputRange: [0.55, 1] }) }],
+          },
+        ]}
+      >
+        {renderIcon(icon, { color: active, size, active: true })}
+      </Animated.View>
+    </View>
+  );
+}
+
+function CentreAction({
+  item,
+  left,
+  width,
+  height,
+  labelTop,
+  from,
+  to,
+  labelColor,
+  showLabel,
+  onPress,
+}: {
+  item: BottomNavItem;
+  left: number;
+  width: number;
+  height: number;
+  labelTop: number;
+  from: string;
+  to: string;
+  labelColor: string;
+  showLabel: boolean;
+  onPress: () => void;
+}) {
+  const press = useRef(new Animated.Value(1)).current;
+  const pressTo = (v: number) =>
+    Animated.spring(press, { toValue: v, useNativeDriver: true, ...(v < 1 ? motion.snappy : motion.bouncy) }).start();
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={item.accessibilityLabel ?? item.label}
+      onPress={onPress}
+      onPressIn={() => pressTo(0.9)}
+      onPressOut={() => pressTo(1)}
+      style={[styles.abs, styles.centreCol, { left, top: 0, width, height }]}
+    >
+      <Animated.View style={{ transform: [{ scale: press }] }}>
+        <FabFace size={FAB} from={from} to={to} glow pressed={press}>
+          {renderIcon(item.icon, { color: readableOn(from), size: 28, active: true })}
+        </FabFace>
+      </Animated.View>
+      {showLabel ? (
+        <Text numberOfLines={1} style={[styles.label, styles.abs, { top: labelTop, color: labelColor }]}>
+          {item.label}
+        </Text>
+      ) : null}
+    </Pressable>
+  );
+}
+
+/**
+ * Action button: a solid `from` fill (or a `from` → `to` diagonal when an opt-in gradient is given),
+ * a faint top sheen, a hairline rim and an optional same-colour glow.
+ */
+function FabFace({
+  size,
+  from,
+  to,
+  glow,
+  pressed,
+  children,
+}: {
+  size: number;
+  from: string;
+  to: string;
+  glow: boolean;
+  pressed: Animated.Value;
+  children: React.ReactNode;
+}) {
+  const { radius } = useKit();
+  const id = 'bnFab' + useId().replace(/[^a-zA-Z0-9]/g, '');
+  const r = radius.capsule(size);
+  const G = size * 2;
+  const twoTone = to.toLowerCase() !== from.toLowerCase();
+  return (
+    <View style={{ width: size, height: size }}>
+      {glow ? (
+        // Soft accent glow (works on Android too, where coloured shadows don't). Brightens on press.
+        <Animated.View
+          pointerEvents="none"
+          style={[
+            styles.abs,
+            {
+              left: -size / 2,
+              top: -size / 2 + size * 0.16,
+              width: G,
+              height: G,
+              opacity: pressed.interpolate({ inputRange: [0.9, 1], outputRange: [1, 0.7], extrapolate: 'clamp' }),
+            },
+          ]}
+        >
+          <Svg width={G} height={G}>
+            <Defs>
+              <RadialGradient id={`${id}g`} cx="50%" cy="50%" r="50%">
+                <Stop offset="0" stopColor={from} stopOpacity={0.4} />
+                <Stop offset="0.5" stopColor={from} stopOpacity={0.12} />
+                <Stop offset="1" stopColor={from} stopOpacity={0} />
+              </RadialGradient>
+            </Defs>
+            <Circle cx={size} cy={size} r={size} fill={`url(#${id}g)`} />
+          </Svg>
+        </Animated.View>
+      ) : null}
+      <View style={[styles.fab, { width: size, height: size, borderRadius: r, backgroundColor: from, shadowColor: from }]}>
+        <Svg width={size} height={size} style={StyleSheet.absoluteFill}>
+          <Defs>
+            {twoTone ? (
+              <LinearGradient id={`${id}f`} x1="0" y1="0" x2="1" y2="1">
+                <Stop offset="0" stopColor={from} />
+                <Stop offset="1" stopColor={to} />
+              </LinearGradient>
+            ) : null}
+            <LinearGradient id={`${id}s`} x1="0" y1="0" x2="0" y2="1">
+              <Stop offset="0" stopColor="#ffffff" stopOpacity={0.12} />
+              <Stop offset="0.55" stopColor="#ffffff" stopOpacity={0} />
+            </LinearGradient>
+          </Defs>
+          {twoTone ? <Rect width={size} height={size} rx={r} fill={`url(#${id}f)`} /> : null}
+          <Rect width={size} height={size} rx={r} fill={`url(#${id}s)`} />
+          <Rect x={0.5} y={0.5} width={size - 1} height={size - 1} rx={Math.max(0, r - 0.5)} fill="none" stroke="#ffffff" strokeOpacity={0.22} />
+        </Svg>
+        <View style={[StyleSheet.absoluteFill, styles.center]}>{children}</View>
+      </View>
+    </View>
+  );
+}
+
+/** Dot or count. Pops in with a spring when it appears or its value changes. */
+function Badge({ value, ring, reduce }: { value: true | number; ring: string; reduce: boolean }) {
+  const { colors, radius } = useKit();
+  const s = useRef(new Animated.Value(reduce ? 1 : 0.3)).current;
+  useEffect(() => {
+    if (reduce) {
+      s.setValue(1);
+      return;
+    }
+    s.setValue(0.3);
+    Animated.spring(s, { toValue: 1, useNativeDriver: true, ...motion.bouncy }).start();
+  }, [value, reduce, s]);
+  const dot = value === true;
+  const text = typeof value === 'number' ? (value > 99 ? '99+' : String(value)) : '';
+  return (
+    <Animated.View
+      pointerEvents="none"
+      style={[
+        styles.badge,
+        dot ? [styles.badgeDot, { borderRadius: radius.capsule(10) }] : [styles.badgeCount, { borderRadius: radius.capsule(19) }],
+        {
+          backgroundColor: colors.danger,
+          borderColor: ring,
+          opacity: s.interpolate({ inputRange: [0.3, 1], outputRange: [0, 1], extrapolate: 'clamp' }),
+          transform: [{ scale: s }],
+        },
+      ]}
+    >
+      {!dot && <Text style={[styles.badgeText, { color: colors.dangerForeground }]}>{text}</Text>}
+    </Animated.View>
+  );
+}
+
+/** Bar outline with a smooth dip of radius `r` and depth `depth` centred on `cx`, top edge at `y`. */
+function notchPath(w: number, h: number, cx: number, r: number, depth: number, y: number) {
+  const x1 = cx - r - 14;
+  const x2 = cx + r + 14;
+  return [
+    `M0 ${y}`,
+    `H${x1}`,
+    `C${x1 + 11} ${y} ${cx - r + 1} ${y + depth} ${cx} ${y + depth}`,
+    `C${cx + r - 1} ${y + depth} ${x2 - 11} ${y} ${x2} ${y}`,
+    `H${w} V${h} H0 Z`,
+  ].join(' ');
+}
+
+function BarShape({ d, fill, stroke }: { d: string; fill: string; stroke: string }) {
+  return (
+    <Svg pointerEvents="none" style={StyleSheet.absoluteFill} width="100%" height="100%">
+      <Path d={d} fill={fill} stroke={stroke} strokeWidth={1} />
+    </Svg>
+  );
+}
+
+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 renderIcon(icon: BottomNavItem['icon'], props: BottomNavIconProps) {
+  return typeof icon === 'function' ? icon(props) : <BottomNavIcon name={icon} {...props} />;
+}
+
+/** The built-in icon set (24pt grid, 1.8 stroke). Active icons fill their main shape. */
+export function BottomNavIcon({ name, color, size = 24, active = false }: { name: BottomNavIconName } & Partial<BottomNavIconProps> & { color: string }) {
+  const s = { stroke: color, strokeWidth: active ? 2 : 1.8, strokeLinecap: 'round' as const, strokeLinejoin: 'round' as const, fill: 'none' };
+  const f = active ? { ...s, fill: color } : s;
+  let body: React.ReactNode;
+  switch (name) {
+    case 'home':
+      body = <Path d="M3.5 10.2 12 3.5l8.5 6.7V19a1.5 1.5 0 0 1-1.5 1.5h-4.2v-5.6H9.2v5.6H5A1.5 1.5 0 0 1 3.5 19z" {...f} />;
+      break;
+    case 'explore':
+      body = (
+        <>
+          <Circle cx="12" cy="12" r="8.6" {...s} />
+          <Path d="m15.4 8.6-1.9 4.9-4.9 1.9 1.9-4.9z" {...f} />
+        </>
+      );
+      break;
+    case 'search':
+      body = (
+        <>
+          <Circle cx="11" cy="11" r="6.6" {...s} />
+          <Path d="m16 16 4.4 4.4" {...s} />
+        </>
+      );
+      break;
+    case 'projects':
+      body = <Path d="M3.5 7.2A1.7 1.7 0 0 1 5.2 5.5h3.9l2 2.1h7.7a1.7 1.7 0 0 1 1.7 1.7v8.9a1.7 1.7 0 0 1-1.7 1.7H5.2a1.7 1.7 0 0 1-1.7-1.7z" {...f} />;
+      break;
+    case 'saved':
+      body = <Path d="M6.5 4.8A1.3 1.3 0 0 1 7.8 3.5h8.4a1.3 1.3 0 0 1 1.3 1.3v15.7L12 16.8l-5.5 3.7z" {...f} />;
+      break;
+    case 'profile':
+      body = (
+        <>
+          <Circle cx="12" cy="8" r="3.9" {...f} />
+          <Path d="M4.5 20.2a7.5 7.5 0 0 1 15 0z" {...f} />
+        </>
+      );
+      break;
+    case 'inbox':
+      body = (
+        <>
+          <Path d="M6.2 16V11a5.8 5.8 0 0 1 11.6 0v5l1.6 2.1H4.6z" {...f} />
+          <Path d="M10 20.7h4" {...s} />
+        </>
+      );
+      break;
+    case 'activity':
+      body = <Path d="M3 12.5h3.8l2.6-6.8 4.8 13 2.6-6.2H21" {...s} />;
+      break;
+    case 'analytics':
+      body = <Path d="M5 20v-6.5M12 20V5M19 20v-9.5" {...s} strokeWidth={active ? 3 : 2.2} />;
+      break;
+    case 'message':
+      body = <Path d="M12 3.8a8.2 8.2 0 0 0-7.1 12.3L3.8 20.2l4.2-1.1A8.2 8.2 0 1 0 12 3.8z" {...f} />;
+      break;
+    case 'work':
+      body = (
+        <>
+          <Rect x="3.5" y="7.2" width="17" height="12.6" rx="2" {...f} />
+          <Path d="M9 7.2V5.6A1.6 1.6 0 0 1 10.6 4h2.8A1.6 1.6 0 0 1 15 5.6v1.6" {...s} />
+        </>
+      );
+      break;
+    case 'browse':
+      body = (
+        <>
+          <Rect x="3.8" y="3.8" width="7" height="7" rx="1.8" {...f} />
+          <Rect x="13.2" y="3.8" width="7" height="7" rx="1.8" {...s} />
+          <Rect x="3.8" y="13.2" width="7" height="7" rx="1.8" {...s} />
+          <Rect x="13.2" y="13.2" width="7" height="7" rx="1.8" {...f} />
+        </>
+      );
+      break;
+    case 'library':
+      body = (
+        <>
+          <Rect x="3.8" y="4" width="4.4" height="16" rx="1.2" {...f} />
+          <Rect x="9.8" y="4" width="4.4" height="16" rx="1.2" {...s} />
+          <Path d="m16 5.4 3.6-.9 1.4 15-3.6.9z" {...f} />
+        </>
+      );
+      break;
+    case 'music':
+      body = (
+        <>
+          <Path d="M9 18V5.5l10-2v12.5" {...s} />
+          <Circle cx="6.5" cy="18" r="2.6" {...f} />
+          <Circle cx="16.5" cy="16" r="2.6" {...f} />
+        </>
+      );
+      break;
+    case 'create':
+      body = <Path d="M12 5v14M5 12h14" {...s} strokeWidth={2.4} />;
+      break;
+  }
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24">
+      {body}
+    </Svg>
+  );
+}
+
+const styles = StyleSheet.create({
+  bar: {
+    paddingHorizontal: PAD_X,
+    paddingTop: PAD_TOP,
+  },
+  visible: {
+    overflow: 'visible',
+  },
+  clip: {
+    overflow: 'hidden',
+  },
+  floatOuter: {
+    marginHorizontal: 16,
+    shadowColor: '#000',
+    shadowRadius: 24,
+    shadowOffset: { width: 0, height: 12 },
+    elevation: 10,
+  },
+  floatInner: {
+    borderWidth: StyleSheet.hairlineWidth,
+    shadowColor: '#000',
+    shadowRadius: 3,
+    shadowOffset: { width: 0, height: 1 },
+  },
+  row: {
+    flexDirection: 'row',
+    height: ROW_H,
+  },
+  abs: {
+    position: 'absolute',
+  },
+  slot: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    minHeight: 44,
+  },
+  center: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  centreCol: {
+    alignItems: 'center',
+  },
+  label: {
+    fontSize: 11,
+    fontWeight: '400',
+    marginTop: 4,
+    letterSpacing: 0.1,
+  },
+  floatLabel: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: ROW_H / 2 + 3,
+    marginTop: 0,
+    textAlign: 'center',
+  },
+  pillRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    height: PILL_H,
+  },
+  pillLabel: {
+    fontSize: 13.5,
+    fontWeight: '400',
+    letterSpacing: -0.1,
+  },
+  measure: {
+    position: 'absolute',
+    width: 400,
+    opacity: 0,
+  },
+  selfStart: {
+    alignSelf: 'flex-start',
+  },
+  fab: {
+    shadowOpacity: 0.4,
+    shadowRadius: 12,
+    shadowOffset: { width: 0, height: 6 },
+    elevation: 6,
+  },
+  home: {
+    position: 'absolute',
+    bottom: 6,
+    alignSelf: 'center',
+    width: 120,
+    height: 4,
+  },
+  badge: {
+    position: 'absolute',
+    borderWidth: 2,
+  },
+  badgeDot: {
+    top: -1,
+    right: -2,
+    width: 10,
+    height: 10,
+  },
+  badgeCount: {
+    top: -6,
+    right: -11,
+    minWidth: 19,
+    height: 19,
+    paddingHorizontal: 4,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  badgeText: {
+    fontSize: 10,
+    fontWeight: '400',
+    lineHeight: 12,
+    fontVariant: ['tabular-nums'],
+  },
+});