designmd-forge 1.2.0

package/dist/data/designs/ios-lyft-expo.md

@@ -0,0 +1,333 @@
+# Lyft (iOS) — Expo / React Native Implementation Guide
+
+Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file translates Lyft's visual language into paste-ready Expo / React Native code: a design-token module, themed components, and Reanimated snippets — including the full-screen map + rounded bottom sheet model and the ride-type selector.
+
+Assumes Expo SDK 51+ with `expo-router`, `expo-font`, `react-native-reanimated` v3, and `@gorhom/bottom-sheet` v4 (or a custom Reanimated sheet).
+
+## 1. Color Tokens
+
+```ts
+// theme/colors.ts
+export const colors = {
+  // Light
+  canvas:      '#FFFFFF',
+  surface:     '#F4F4F7',
+  surfaceDeep: '#E9E9EF',
+  divider:     '#E5E5EA',
+  textPrimary:   '#11111F',
+  textSecondary: '#6B6B7B',
+  textTertiary:  '#9A9AA8',
+
+  // Dark
+  canvasDark:      '#11111F',
+  surfaceDark:     '#1C1C2B',
+  surfaceDeepDark: '#26263A',
+  dividerDark:     '#2C2C40',
+  textPrimaryDark: '#FFFFFF',
+  textSecondaryDark: '#A0A0B4',
+
+  // Brand
+  pink:        '#FF00BF',
+  pinkPressed: '#D500A0',
+  pinkTint:    '#FFE5F7',
+  pinkTintDark:'#33102B',
+
+  // Semantic
+  success: '#00A862',
+  gold:    '#FFB400',
+  error:   '#E5484D',
+} as const;
+
+export type LyftColor = keyof typeof colors;
+```
+
+## 2. Typography
+
+Lyft uses Inter with a friendly, rounded character. Load via `expo-font`; fall back to `System` (`SF Pro Rounded` on iOS via `fontFamily: undefined` + rounded weight where possible).
+
+```tsx
+// app/_layout.tsx
+import { useFonts } from 'expo-font';
+
+export default function Root() {
+  const [loaded] = useFonts({
+    'Inter-Regular':  require('../assets/fonts/Inter-Regular.ttf'),
+    'Inter-SemiBold': require('../assets/fonts/Inter-SemiBold.ttf'),
+    'Inter-Bold':     require('../assets/fonts/Inter-Bold.ttf'),
+  });
+  if (!loaded) return null;
+  return <Stack />;
+}
+```
+
+```ts
+// theme/typography.ts
+import type { TextStyle } from 'react-native';
+
+const ink = { color: '#11111F' } satisfies TextStyle;
+const tnum = ['tabular-nums'] as const;
+
+export const typography = {
+  sheetTitle: { ...ink, fontFamily: 'Inter-Bold',     fontSize: 22, lineHeight: 26, letterSpacing: -0.3 },
+  whereTo:    { fontFamily: 'Inter-SemiBold', fontSize: 20, lineHeight: 25, letterSpacing: -0.2, color: '#6B6B7B' },
+  rideName:   { ...ink, fontFamily: 'Inter-Bold',     fontSize: 17, lineHeight: 21, letterSpacing: -0.1 },
+  price:      { ...ink, fontFamily: 'Inter-Bold',     fontSize: 17, lineHeight: 20, fontVariant: tnum },
+  body:       { ...ink, fontFamily: 'Inter-Regular',  fontSize: 15, lineHeight: 22 },
+  button:     { color: '#FFFFFF', fontFamily: 'Inter-Bold', fontSize: 17, lineHeight: 20 },
+  driverName: { ...ink, fontFamily: 'Inter-Bold',     fontSize: 18, lineHeight: 22, letterSpacing: -0.1 },
+  meta:       { fontFamily: 'Inter-Regular', fontSize: 14, lineHeight: 18, color: '#6B6B7B' },
+  rideSub:    { fontFamily: 'Inter-Regular', fontSize: 13, lineHeight: 17, color: '#6B6B7B' },
+  badge:      { fontFamily: 'Inter-Bold',    fontSize: 11, lineHeight: 13, letterSpacing: 0.3 },
+  caption:    { fontFamily: 'Inter-Regular', fontSize: 12, lineHeight: 15, color: '#6B6B7B' },
+  pinLabel:   { fontFamily: 'Inter-Bold',    fontSize: 13, lineHeight: 15 },
+} satisfies Record<string, TextStyle>;
+```
+
+## 3. Signature Components
+
+### Full-Screen Map + Rounded Bottom Sheet
+
+```tsx
+// app/index.tsx
+import MapView from 'react-native-maps';
+import BottomSheet from '@gorhom/bottom-sheet';
+import { useMemo, useRef } from 'react';
+import { View } from 'react-native';
+import { colors } from '../theme/colors';
+import { ChooseRideSheet } from '../components/ChooseRideSheet';
+import { MapIconButton } from '../components/MapIconButton';
+
+export default function RideHome() {
+  const sheetRef = useRef<BottomSheet>(null);
+  const snapPoints = useMemo(() => [140, '45%', '90%'], []);
+
+  return (
+    <View style={{ flex: 1 }}>
+      <MapView style={{ ...StyleSheet.absoluteFillObject }} showsUserLocation />
+      <MapIconButton system="menu" style={{ position: 'absolute', top: 56, left: 16 }} onPress={() => {}} />
+      <BottomSheet
+        ref={sheetRef}
+        index={1}
+        snapPoints={snapPoints}
+        handleIndicatorStyle={{ backgroundColor: colors.divider, width: 36, height: 4 }}
+        backgroundStyle={{ backgroundColor: colors.canvas, borderRadius: 28 }}
+        // @gorhom/bottom-sheet already springs + snaps between snap points
+        animationConfigs={{ damping: 18, stiffness: 220 }}>
+        <ChooseRideSheet />
+      </BottomSheet>
+    </View>
+  );
+}
+```
+
+> `@gorhom/bottom-sheet` snaps with a spring out of the box. For a custom sheet, drive a shared `translateY` with `withSpring(target, { damping: 14, stiffness: 180 })` for the signature slight overshoot.
+
+### Ride-Type Selector Row
+
+```tsx
+// components/RideTypeRow.tsx
+import { Image, Pressable, Text, View } from 'react-native';
+import Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
+import { useEffect } from 'react';
+import * as Haptics from 'expo-haptics';
+import { colors } from '../theme/colors';
+import { typography } from '../theme/typography';
+
+export function RideTypeRow({
+  iconUri, name, subtitle, capacityEta, price, selected, onPress,
+}: {
+  iconUri: string; name: string; subtitle: string;
+  capacityEta: string; price: string; selected: boolean; onPress: () => void;
+}) {
+  const k = useSharedValue(selected ? 1 : 0);
+  useEffect(() => { k.value = withSpring(selected ? 1 : 0, { damping: 14 }); }, [selected]);
+  const ring = useAnimatedStyle(() => ({
+    borderColor: selected ? colors.pink : 'transparent',
+    backgroundColor: selected ? colors.pinkTint : 'transparent',
+  }));
+
+  return (
+    <Pressable
+      onPress={() => { Haptics.selectionAsync(); onPress(); }}>
+      <Animated.View style={[{
+        flexDirection: 'row', alignItems: 'center', gap: 12,
+        paddingHorizontal: 16, paddingVertical: 14,
+        borderRadius: 16, borderWidth: 2,
+      }, ring]}>
+        <Image source={{ uri: iconUri }} style={{ width: 56, height: 40 }} resizeMode="contain" />
+        <View style={{ flex: 1 }}>
+          <Text style={typography.rideName}>{name}</Text>
+          <Text style={typography.rideSub}>{subtitle}</Text>
+          <Text style={typography.meta}>{capacityEta}</Text>
+        </View>
+        <Text style={typography.price}>{price}</Text>
+      </Animated.View>
+    </Pressable>
+  );
+}
+```
+
+### Primary CTA
+
+```tsx
+// components/LyftCTA.tsx
+import { Pressable, Text } from 'react-native';
+import { colors } from '../theme/colors';
+import { typography } from '../theme/typography';
+
+export function LyftCTA({ label, onPress }: { label: string; onPress: () => void }) {
+  return (
+    <Pressable
+      onPress={onPress}
+      style={({ pressed }) => ({
+        height: 56, borderRadius: 16, alignItems: 'center', justifyContent: 'center',
+        backgroundColor: pressed ? colors.pinkPressed : colors.pink,
+        transform: [{ scale: pressed ? 0.98 : 1 }],
+      })}>
+      <Text style={typography.button}>{label}</Text>
+    </Pressable>
+  );
+}
+```
+
+### Pickup Pin (with drop)
+
+```tsx
+// components/PickupPin.tsx
+import { useEffect } from 'react';
+import { View } from 'react-native';
+import Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
+import * as Haptics from 'expo-haptics';
+import { colors } from '../theme/colors';
+
+export function PickupPin() {
+  const drop = useSharedValue(0); // 0 = up/small, 1 = landed
+  useEffect(() => {
+    drop.value = withSpring(1, { damping: 7, stiffness: 160 });
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Soft);
+  }, []);
+  const pin = useAnimatedStyle(() => ({
+    transform: [{ scale: 0.6 + 0.4 * drop.value }, { translateY: -40 * (1 - drop.value) }],
+  }));
+  return (
+    <Animated.View style={pin}>
+      <View style={{ width: 28, height: 28, borderRadius: 14, backgroundColor: colors.pink,
+        alignItems: 'center', justifyContent: 'center',
+        shadowColor: colors.textPrimary, shadowOpacity: 0.3, shadowRadius: 8,
+        shadowOffset: { width: 0, height: 6 } }}>
+        <View style={{ width: 10, height: 10, borderRadius: 5, backgroundColor: '#fff' }} />
+      </View>
+      <View style={{ width: 2, height: 10, backgroundColor: colors.pink, alignSelf: 'center' }} />
+    </Animated.View>
+  );
+}
+```
+
+### "Where to?" Search Bar
+
+```tsx
+// components/WhereToBar.tsx
+import { Text, View } from 'react-native';
+import { colors } from '../theme/colors';
+import { typography } from '../theme/typography';
+
+export function WhereToBar() {
+  return (
+    <View style={{
+      flexDirection: 'row', alignItems: 'center', gap: 12,
+      height: 56, borderRadius: 16, paddingHorizontal: 18, marginHorizontal: 20,
+      backgroundColor: colors.canvas,
+      shadowColor: colors.textPrimary, shadowOpacity: 0.16, shadowRadius: 12,
+      shadowOffset: { width: 0, height: 4 },
+    }}>
+      <View style={{ width: 10, height: 10, borderRadius: 3, backgroundColor: colors.pink }} />
+      <Text style={typography.whereTo}>Where to?</Text>
+    </View>
+  );
+}
+```
+
+## 4. Sheet State Progression
+
+```ts
+type TripState = 'idle' | 'chooseRide' | 'confirmPickup' | 'enRoute' | 'rate';
+// Map each state to a snap index + sheet content:
+// idle → snap 0 (140) "Where to?"; chooseRide → snap 1 (45%) ride list;
+// confirmPickup → snap to ~35% address + Confirm; enRoute → ~40% driver card;
+// rate → ~50% rating + tip. Call sheetRef.current?.snapToIndex(...) on state change.
+```
+
+## 5. Navigation (No Tab Bar)
+
+Lyft has **no `Tabs`**. `app/index.tsx` is the full-screen map + sheet; trip phases are state-driven. The floating menu button opens account/history via a modal route (`expo-router` `presentation: 'modal'`), not a tab.
+
+```tsx
+// components/MapIconButton.tsx
+import { Pressable, View, ViewStyle } from 'react-native';
+import Ionicons from '@expo/vector-icons/Ionicons';
+import { colors } from '../theme/colors';
+
+const MAP = { menu: 'menu', back: 'chevron-back', locate: 'locate', layers: 'layers' } as const;
+
+export function MapIconButton({
+  system, style, onPress,
+}: { system: keyof typeof MAP; style?: ViewStyle; onPress: () => void }) {
+  return (
+    <Pressable onPress={onPress} style={[{ width: 44, height: 44, borderRadius: 22,
+      backgroundColor: colors.canvas, alignItems: 'center', justifyContent: 'center',
+      shadowColor: colors.textPrimary, shadowOpacity: 0.16, shadowRadius: 12,
+      shadowOffset: { width: 0, height: 4 } }, style]}>
+      <Ionicons name={MAP[system]} size={20} color={colors.textPrimary} />
+    </Pressable>
+  );
+}
+```
+
+## 6. Motion
+
+```tsx
+// Sheet snap (custom): translateY.value = withSpring(target, { damping: 14, stiffness: 180 }) // slight overshoot
+
+// Ride-type select
+Haptics.selectionAsync();
+k.value = withSpring(selected ? 1 : 0, { damping: 14 });
+
+// Pickup pin drop
+drop.value = withSpring(1, { damping: 7, stiffness: 160 });
+Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Soft);
+
+// CTA press: transform scale 0.98 via Pressable pressed state
+
+// Map recenter: animate the camera with mapRef.animateCamera({ ... }, { duration: 400 })
+// ETA bubble: cross-fade the number; tabular figures keep layout stable
+```
+
+## 7. Icon Library
+
+Use `@expo/vector-icons`. Map to Lyft's SF Symbol equivalents:
+
+| Purpose | Ionicons |
+|---------|----------|
+| Menu (map) | `menu` |
+| Back / dismiss | `chevron-back` |
+| Recenter / locate | `locate` |
+| Layers | `layers-outline` |
+| Search | `search` |
+| Saved: Home | `home` |
+| Saved: Work | `briefcase` |
+| Rating star | `star` |
+| Contact driver | `call` / `chatbubble` |
+| Share trip | `share-outline` |
+| Safety | `shield-checkmark` |
+| Where-to dot | (drawn pink square) |
+
+## 8. Platform Notes
+
+- **Map-first, no tabs**: `app/index.tsx` is a full-bleed `MapView`; all controls float or live in the sheet — never add an `expo-router` `Tabs` layout
+- **Status bar**: `<StatusBar style="auto" />` so it adapts — light content over the map in dark mode, dark over light map
+- **Safe area**: the map renders edge-to-edge; inset floating controls with `useSafeAreaInsets()`; the sheet's content respects the bottom inset
+- **Dark mode**: read `useColorScheme()` and swap the canvas/surface/text tokens; keep `colors.pink` identical on both themes
+- **Tabular figures**: pass `fontVariant: ['tabular-nums']` on prices, ETAs, and fare breakdowns so the right-aligned price column aligns
+- **Reduce Motion**: check `AccessibilityInfo.isReduceMotionEnabled()` and swap sheet/pin springs for quick timing animations
+- **Accessibility**: ride-type rows get `accessibilityRole="radio"` + `accessibilityState={{ selected }}`; the CTA announces "Select Lyft"; expose a map summary via `accessibilityLabel`
+- **Sheet library**: prefer `@gorhom/bottom-sheet` for correct gesture + detent physics; ensure `backgroundStyle.borderRadius` is 28 for the very-rounded top corners

package/dist/data/designs/ios-lyft-swiftui.md

@@ -0,0 +1,315 @@
+# Lyft (iOS) — SwiftUI Implementation Guide
+
+Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file translates Lyft's visual language into paste-ready SwiftUI code: `Color` extensions, `Font` extensions, `ViewModifier`s, and example views — including the full-screen map + rounded bottom sheet model and the ride-type selector.
+
+## 1. Color Tokens
+
+```swift
+import SwiftUI
+
+extension Color {
+    // MARK: - Light Canvas & Surfaces
+    static let lyftCanvas      = Color.white                                  // #FFFFFF
+    static let lyftSurface     = Color(red: 0.957, green: 0.957, blue: 0.969) // #F4F4F7
+    static let lyftSurfaceDeep = Color(red: 0.914, green: 0.914, blue: 0.937) // #E9E9EF
+    static let lyftDivider     = Color(red: 0.898, green: 0.898, blue: 0.918) // #E5E5EA
+
+    static let lyftTextPrimary   = Color(red: 0.067, green: 0.067, blue: 0.122) // #11111F
+    static let lyftTextSecondary = Color(red: 0.420, green: 0.420, blue: 0.482) // #6B6B7B
+    static let lyftTextTertiary  = Color(red: 0.604, green: 0.604, blue: 0.659) // #9A9AA8
+
+    // MARK: - Dark Canvas & Surfaces
+    static let lyftCanvasDark      = Color(red: 0.067, green: 0.067, blue: 0.122) // #11111F
+    static let lyftSurfaceDark     = Color(red: 0.110, green: 0.110, blue: 0.169) // #1C1C2B
+    static let lyftSurfaceDeepDark = Color(red: 0.149, green: 0.149, blue: 0.227) // #26263A
+    static let lyftDividerDark     = Color(red: 0.173, green: 0.173, blue: 0.251) // #2C2C40
+    static let lyftTextPrimaryDark = Color.white                                  // #FFFFFF
+    static let lyftTextSecDark     = Color(red: 0.627, green: 0.627, blue: 0.706) // #A0A0B4
+
+    // MARK: - Brand
+    static let lyftPink        = Color(red: 1.0,   green: 0.0,   blue: 0.749) // #FF00BF
+    static let lyftPinkPressed = Color(red: 0.835, green: 0.0,   blue: 0.627) // #D500A0
+    static let lyftPinkTint    = Color(red: 1.0,   green: 0.898, blue: 0.969) // #FFE5F7
+    static let lyftPinkTintDk  = Color(red: 0.200, green: 0.063, blue: 0.169) // #33102B
+
+    // MARK: - Semantic
+    static let lyftSuccess = Color(red: 0.0,   green: 0.659, blue: 0.384) // #00A862
+    static let lyftGold    = Color(red: 1.0,   green: 0.706, blue: 0.0)   // #FFB400
+    static let lyftError   = Color(red: 0.898, green: 0.282, blue: 0.302) // #E5484D
+}
+```
+
+## 2. Typography
+
+Lyft uses Inter with a friendly, rounded character. Bundle Inter via `Info.plist` (`UIAppFonts`); fall back to `.system(design: .rounded)` to preserve the soft personality.
+
+```swift
+extension Font {
+    static let lyftSheetTitle  = Font.custom("Inter-Bold",      size: 22)
+    static let lyftWhereTo     = Font.custom("Inter-SemiBold",  size: 20)
+    static let lyftRideName    = Font.custom("Inter-Bold",      size: 17)
+    static let lyftPrice       = Font.custom("Inter-Bold",      size: 17)
+    static let lyftBody        = Font.custom("Inter-Regular",   size: 15)
+    static let lyftButton      = Font.custom("Inter-Bold",      size: 17)
+    static let lyftDriverName  = Font.custom("Inter-Bold",      size: 18)
+    static let lyftMeta        = Font.custom("Inter-Regular",   size: 14)
+    static let lyftRideSub     = Font.custom("Inter-Regular",   size: 13)
+    static let lyftBadge       = Font.custom("Inter-Bold",      size: 11)
+    static let lyftCaption     = Font.custom("Inter-Regular",   size: 12)
+    static let lyftPinLabel    = Font.custom("Inter-Bold",      size: 13)
+}
+
+extension Font {
+    static func lyft(_ size: CGFloat, weight: Font.Weight = .regular) -> Font {
+        .system(size: size, weight: weight, design: .rounded) // rounded fallback
+    }
+}
+```
+
+Prices, ETAs, and fare breakdowns use tabular figures — apply `.monospacedDigit()`.
+
+## 3. Signature Components
+
+### Full-Screen Map + Rounded Bottom Sheet
+
+```swift
+struct RideHomeView: View {
+    @State private var detent: PresentationDetent = .fraction(0.45)
+
+    var body: some View {
+        MapView()                                  // full-bleed, edge to edge
+            .ignoresSafeArea()
+            .overlay(alignment: .topLeading) {
+                MapIconButton(system: "line.3.horizontal") {}
+                    .padding(16)
+            }
+            .sheet(isPresented: .constant(true)) {
+                ChooseRideSheet()
+                    .presentationDetents([.height(140), .fraction(0.45), .large], selection: $detent)
+                    .presentationCornerRadius(28)               // very rounded sheet
+                    .presentationBackgroundInteraction(.enabled) // map stays interactive
+                    .presentationDragIndicator(.visible)
+                    .interactiveDismissDisabled()
+            }
+    }
+}
+```
+
+> The system `.sheet` already springs and snaps between detents. For full control over the overshoot, build a custom sheet with a `DragGesture` + `withAnimation(.spring(response: 0.45, dampingFraction: 0.85))` snapping to the nearest detent height.
+
+### Ride-Type Selector Row
+
+```swift
+struct RideTypeRow: View {
+    let icon: Image
+    let name: String
+    let subtitle: String
+    let capacityEta: String   // "4 seats · 3 min away"
+    let price: String
+    let isSelected: Bool
+    let tap: () -> Void
+
+    var body: some View {
+        Button(action: tap) {
+            HStack(spacing: 12) {
+                icon.resizable().scaledToFit().frame(width: 56, height: 40)
+                VStack(alignment: .leading, spacing: 2) {
+                    Text(name)
+                        .font(.lyftRideName)
+                        .foregroundStyle(Color.lyftTextPrimary)
+                    Text(subtitle)
+                        .font(.lyftRideSub)
+                        .foregroundStyle(Color.lyftTextSecondary)
+                    Text(capacityEta)
+                        .font(.lyftMeta)
+                        .foregroundStyle(Color.lyftTextSecondary)
+                }
+                Spacer()
+                Text(price)
+                    .font(.lyftPrice).monospacedDigit()
+                    .foregroundStyle(Color.lyftTextPrimary)
+            }
+            .padding(.horizontal, 16)
+            .padding(.vertical, 14)
+            .background(
+                RoundedRectangle(cornerRadius: 16)
+                    .fill(isSelected ? Color.lyftPinkTint : .clear)
+            )
+            .overlay(
+                RoundedRectangle(cornerRadius: 16)
+                    .strokeBorder(isSelected ? Color.lyftPink : .clear, lineWidth: 2)
+            )
+        }
+        .buttonStyle(.plain)
+        .sensoryFeedback(.selection, trigger: isSelected)
+        .animation(.spring(response: 0.25, dampingFraction: 0.8), value: isSelected)
+    }
+}
+```
+
+### Primary CTA
+
+```swift
+struct LyftCTA: View {
+    let label: String     // "Select Lyft"
+    let action: () -> Void
+    var body: some View {
+        Button(action: action) {
+            Text(label)
+                .font(.lyftButton)
+                .foregroundStyle(.white)
+                .frame(maxWidth: .infinity)
+                .frame(height: 56)
+                .background(RoundedRectangle(cornerRadius: 16).fill(Color.lyftPink))
+        }
+        .buttonStyle(LyftPressableStyle())
+    }
+}
+
+struct LyftPressableStyle: ButtonStyle {
+    var pressedScale: CGFloat = 0.98
+    func makeBody(configuration: Configuration) -> some View {
+        configuration.label
+            .scaleEffect(configuration.isPressed ? pressedScale : 1)
+            .brightness(configuration.isPressed ? -0.05 : 0)
+            .animation(.spring(response: 0.25, dampingFraction: 0.8), value: configuration.isPressed)
+    }
+}
+```
+
+### Pickup Pin (with drop)
+
+```swift
+struct PickupPin: View {
+    @State private var dropped = false
+
+    var body: some View {
+        ZStack {
+            // teardrop body
+            PinShape()
+                .fill(Color.lyftPink)
+                .frame(width: 28, height: 38)
+                .shadow(color: Color.lyftTextPrimary.opacity(0.30),
+                        radius: dropped ? 8 : 3, y: dropped ? 6 : 2)
+            Circle().fill(.white).frame(width: 10, height: 10).offset(y: -6)
+        }
+        .scaleEffect(dropped ? 1 : 0.6)
+        .offset(y: dropped ? 0 : -40)
+        .onAppear {
+            withAnimation(.spring(response: 0.4, dampingFraction: 0.6)) { dropped = true }
+        }
+    }
+}
+
+struct PinShape: Shape {
+    func path(in r: CGRect) -> Path {           // simple teardrop with a precise tip
+        var p = Path()
+        p.addArc(center: CGPoint(x: r.midX, y: r.width / 2),
+                 radius: r.width / 2, startAngle: .degrees(180), endAngle: .degrees(0), clockwise: false)
+        p.addLine(to: CGPoint(x: r.midX, y: r.maxY))
+        p.closeSubpath()
+        return p
+    }
+}
+```
+
+### "Where to?" Search Bar
+
+```swift
+struct WhereToBar: View {
+    var body: some View {
+        HStack(spacing: 12) {
+            RoundedRectangle(cornerRadius: 3)
+                .fill(Color.lyftPink).frame(width: 10, height: 10)
+            Text("Where to?")
+                .font(.lyftWhereTo)
+                .foregroundStyle(Color.lyftTextSecondary)
+            Spacer()
+        }
+        .padding(.horizontal, 18)
+        .frame(height: 56)
+        .background(RoundedRectangle(cornerRadius: 16).fill(Color.lyftCanvas))
+        .shadow(color: Color.lyftTextPrimary.opacity(0.16), radius: 12, y: 4)
+        .padding(.horizontal, 20)
+    }
+}
+```
+
+## 4. Sheet State Progression
+
+```swift
+enum TripState { case idle, chooseRide, confirmPickup, enRoute, rate }
+// Drive sheet content + detent from this single state:
+// idle → height(140) "Where to?"; chooseRide → fraction(0.45) ride list;
+// confirmPickup → fraction(0.35) address + Confirm; enRoute → fraction(0.4) driver card;
+// rate → fraction(0.5) rating + tip. Animate state changes inside withAnimation(.spring).
+```
+
+## 5. Navigation (No Tab Bar)
+
+Lyft has **no `TabView`**. The root is a `MapView` with a `.sheet`; navigation between trip phases is state-driven, not tabbed. A floating menu button (top-left) presents account/history/payment as a separate sheet or `NavigationStack` push.
+
+```swift
+struct MapIconButton: View {
+    let system: String
+    let action: () -> Void
+    var body: some View {
+        Button(action: action) {
+            Image(systemName: system)
+                .font(.system(size: 20, weight: .semibold))
+                .foregroundStyle(Color.lyftTextPrimary)
+                .frame(width: 44, height: 44)
+                .background(Circle().fill(Color.lyftCanvas))
+                .shadow(color: Color.lyftTextPrimary.opacity(0.16), radius: 12, y: 4)
+        }
+    }
+}
+```
+
+## 6. Motion
+
+```swift
+// Sheet detent snap (custom sheet): slight overshoot then settle
+withAnimation(.spring(response: 0.45, dampingFraction: 0.85)) { detentHeight = nearest }
+
+// Ride-type select
+.sensoryFeedback(.selection, trigger: selectedRideID)
+.animation(.spring(response: 0.25, dampingFraction: 0.8), value: selectedRideID)
+
+// Pickup pin drop (bounce + shadow scale)
+withAnimation(.spring(response: 0.4, dampingFraction: 0.6)) { dropped = true }
+.sensoryFeedback(.impact(weight: .soft), trigger: dropped)
+
+// CTA press
+.scaleEffect(isPressed ? 0.98 : 1)
+
+// Map recenter: animate MKMapCamera / MapCameraPosition with .easeInOut(duration: 0.4)
+// ETA bubble: cross-fade the number (tabular figures prevent layout jump)
+```
+
+## 7. SF Symbols Used
+
+| Component | Symbol | Size |
+|-----------|--------|------|
+| Menu (map) | `line.3.horizontal` | 20pt |
+| Back / dismiss | `chevron.left` | 20pt |
+| Recenter / locate | `location.fill` | 20pt |
+| Layers | `square.3.layers.3d` | 20pt |
+| Where-to dot | (drawn pink square) | 10pt |
+| Search | `magnifyingglass` | 18pt |
+| Saved: Home | `house.fill` | 18pt |
+| Saved: Work | `briefcase.fill` | 18pt |
+| Rating star | `star.fill` | 14pt |
+| Contact driver | `phone.fill` / `message.fill` | 18pt |
+| Share trip | `square.and.arrow.up` | 18pt |
+| Safety | `shield.fill` | 18pt |
+| Destination pin | (drawn near-black teardrop) | — |
+
+## 8. Minimum iOS & Accessibility Notes
+
+- Minimum target: iOS 16.4 (for `.presentationCornerRadius` / `.presentationBackgroundInteraction`); `.sensoryFeedback` needs iOS 17 (fall back to `UIImpactFeedbackGenerator(style: .soft)` / `UISelectionFeedbackGenerator`)
+- Support Dynamic Type on sheet titles, ride-type names, body; keep prices/ETAs tabular and right-aligned; pin badges and pin labels
+- VoiceOver: announce ride-type rows as "Standard, 4 seats, 3 minutes away, 18 dollars 40, selected" with `.accessibilityAddTraits(.isSelected)`; the CTA reads "Select Lyft"; the map exposes a summary ("Map, pickup set, driver 3 minutes away")
+- Respect `@Environment(\.colorScheme)` — provide the full dark palette; the pink stays identical on both
+- Reduce Motion: replace the sheet overshoot and pin bounce with a quick fade/slide when `accessibilityReduceMotion` is on
+- Contrast: `#6B6B7B` on `#FFFFFF` and `#A0A0B4` on `#11111F` pass WCAG AA at 14pt+. Lyft Pink `#FF00BF` on white passes AA for bold 17pt+ — keep the CTA bold; for white-on-pink verify the pressed `#D500A0` state too