designmd-forge 1.2.0

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

@@ -0,0 +1,344 @@
+# eBay (iOS) — Expo / React Native Implementation Guide
+
+Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file translates eBay's visual language into paste-ready Expo / React Native code: a design-token module, themed components, and Reanimated snippets.
+
+Assumes Expo SDK 51+ with `expo-router`, `expo-font`, and `react-native-reanimated` v3.
+
+## 1. Color Tokens
+
+```ts
+// theme/colors.ts
+export const colors = {
+  canvas:         '#FFFFFF',
+  surface:        '#F7F7F7',
+  divider:        '#E5E5E5',
+  surfacePressed: '#EFEFEF',
+
+  textPrimary:    '#191919',
+  textSecondary:  '#707070',
+  textTertiary:   '#9B9B9B',
+
+  // Four-color brand
+  blue:           '#0064D2',
+  bluePressed:    '#0050A8',
+  red:            '#E53238',
+  yellow:         '#F5AF02',
+  green:          '#86B817',
+
+  freeShip:       '#258635',
+  errorRed:       '#C7000B',
+} as const;
+
+export type EbayColor = keyof typeof colors;
+```
+
+## 2. Typography
+
+Load Market Sans via `expo-font`, or substitute Inter. Fall back to `System` (SF Pro on iOS).
+
+```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: '#191919' } satisfies TextStyle;
+const tnum = { fontVariant: ['tabular-nums'] as const };
+
+export const typography = {
+  titleLarge: { ...ink, fontFamily: 'Inter-Bold',     fontSize: 28, lineHeight: 32, letterSpacing: -0.4 },
+  listing:    { ...ink, fontFamily: 'Inter-Bold',     fontSize: 22, lineHeight: 29, letterSpacing: -0.2 },
+  section:    { ...ink, fontFamily: 'Inter-Bold',     fontSize: 20, lineHeight: 24, letterSpacing: -0.2 },
+  price:      { ...ink, fontFamily: 'Inter-Bold',     fontSize: 24, lineHeight: 26, letterSpacing: -0.3 },
+  cardPrice:  { ...ink, fontFamily: 'Inter-Bold',     fontSize: 17, lineHeight: 20, letterSpacing: -0.1 },
+  cardTitle:  { ...ink, fontFamily: 'Inter-Regular',  fontSize: 15, lineHeight: 20 },
+  body:       { ...ink, fontFamily: 'Inter-Regular',  fontSize: 15, lineHeight: 23 },
+  button:     { color: '#FFFFFF', fontFamily: 'Inter-Bold', fontSize: 16, lineHeight: 20 },
+  badge:      {          fontFamily: 'Inter-Bold',     fontSize: 12, lineHeight: 14, letterSpacing: 0.2, textTransform: 'uppercase' as const },
+  meta:       {          fontFamily: 'Inter-Regular',  fontSize: 13, lineHeight: 17, color: '#707070' },
+  timeLeft:   { ...tnum, fontFamily: 'Inter-Bold',     fontSize: 13, lineHeight: 16 },
+  tab:        {          fontFamily: 'Inter-SemiBold', fontSize: 11, lineHeight: 13, letterSpacing: 0.2 },
+  condition:  {          fontFamily: 'Inter-SemiBold', fontSize: 11, lineHeight: 13, letterSpacing: 0.3, textTransform: 'uppercase' as const },
+} satisfies Record<string, TextStyle>;
+```
+
+## 3. Signature Components
+
+### Bid vs Buy-It-Now Badge (the signature)
+
+```tsx
+// components/BuyMechanicBadge.tsx
+import { Text, View } from 'react-native';
+import { colors } from '../theme/colors';
+import { typography } from '../theme/typography';
+
+type Mechanic = { kind: 'buyItNow' } | { kind: 'auction'; bids: number };
+
+export function BuyMechanicBadge({
+  mechanic, bestOffer,
+}: { mechanic: Mechanic; bestOffer?: boolean }) {
+  const isBin = mechanic.kind === 'buyItNow';
+  return (
+    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+      <View style={{
+        paddingVertical: 4, paddingHorizontal: 8, borderRadius: 4,
+        backgroundColor: isBin ? 'rgba(0,100,210,0.10)' : colors.surface,
+      }}>
+        <Text style={[typography.badge, { color: isBin ? colors.blue : colors.textPrimary }]}>
+          {isBin ? 'Buy It Now' : `${mechanic.bids} bid${mechanic.bids === 1 ? '' : 's'}`}
+        </Text>
+      </View>
+      {bestOffer && (
+        <Text style={[typography.meta, { color: colors.green }]}>or Best Offer</Text>
+      )}
+    </View>
+  );
+}
+```
+
+### "Time Left" Countdown
+
+```tsx
+// components/TimeLeft.tsx
+import { Text } from 'react-native';
+import { colors } from '../theme/colors';
+import { typography } from '../theme/typography';
+
+export function TimeLeft({ secondsRemaining }: { secondsRemaining: number }) {
+  const urgent = secondsRemaining < 86_400; // < 24h
+  const d = Math.floor(secondsRemaining / 86_400);
+  const h = Math.floor((secondsRemaining % 86_400) / 3_600);
+  const m = Math.floor((secondsRemaining % 3_600) / 60);
+  const s = secondsRemaining % 60;
+  const label = d > 0 ? `${d}d ${h}h left` : h > 0 ? `${h}h ${m}m left` : `${m}m ${s}s left`;
+  return (
+    <Text style={[typography.timeLeft, { color: urgent ? colors.red : colors.textSecondary }]}>
+      {label}
+    </Text>
+  );
+}
+```
+
+### Watch Heart
+
+```tsx
+// components/WatchHeart.tsx
+import { Pressable } from 'react-native';
+import Animated, { useSharedValue, useAnimatedStyle, withSequence, withSpring } from 'react-native-reanimated';
+import Ionicons from '@expo/vector-icons/Ionicons';
+import * as Haptics from 'expo-haptics';
+import { colors } from '../theme/colors';
+
+export function WatchHeart({
+  watching, onToggle, overPhoto = true, size = 24,
+}: { watching: boolean; onToggle: () => void; overPhoto?: boolean; size?: number }) {
+  const scale = useSharedValue(1);
+  const style = useAnimatedStyle(() => ({ transform: [{ scale: scale.value }] }));
+  const press = () => {
+    scale.value = withSequence(withSpring(1.2, { damping: 6 }), withSpring(1, { damping: 10 }));
+    Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+    onToggle();
+  };
+  return (
+    <Pressable onPress={press} hitSlop={12}>
+      <Animated.View
+        style={[
+          overPhoto && {
+            width: 36, height: 36, borderRadius: 18, backgroundColor: 'rgba(0,0,0,0.40)',
+            alignItems: 'center', justifyContent: 'center',
+          },
+          style,
+        ]}
+      >
+        <Ionicons
+          name={watching ? 'heart' : 'heart-outline'}
+          size={size}
+          color={watching ? colors.red : overPhoto ? '#FFFFFF' : colors.textPrimary}
+        />
+      </Animated.View>
+    </Pressable>
+  );
+}
+```
+
+### Listing Card
+
+```tsx
+// components/ListingCard.tsx
+import { useState } from 'react';
+import { Image, Pressable, Text, View } from 'react-native';
+import { colors } from '../theme/colors';
+import { typography } from '../theme/typography';
+import { BuyMechanicBadge } from './BuyMechanicBadge';
+import { TimeLeft } from './TimeLeft';
+import { WatchHeart } from './WatchHeart';
+
+export function ListingCard({
+  title, photoUri, price, original, mechanic, bestOffer, freeShipping, secondsLeft, onPress,
+}: any) {
+  const [watching, setWatching] = useState(false);
+  return (
+    <Pressable
+      onPress={onPress}
+      style={({ pressed }) => ({
+        backgroundColor: colors.canvas, borderRadius: 8, padding: 8, gap: 6,
+        transform: [{ scale: pressed ? 0.98 : 1 }],
+        shadowColor: '#000', shadowOpacity: 0.06, shadowRadius: 4, shadowOffset: { width: 0, height: 1 },
+      })}
+    >
+      <View>
+        <Image source={{ uri: photoUri }} style={{ width: '100%', aspectRatio: 1, borderRadius: 8 }} />
+        <View style={{ position: 'absolute', top: 8, right: 8 }}>
+          <WatchHeart watching={watching} onToggle={() => setWatching((w) => !w)} />
+        </View>
+      </View>
+      <Text style={typography.cardTitle} numberOfLines={2}>{title}</Text>
+      <View style={{ flexDirection: 'row', alignItems: 'baseline', gap: 6 }}>
+        <Text style={typography.cardPrice}>{price}</Text>
+        {original && (
+          <Text style={[typography.meta, { textDecorationLine: 'line-through', color: colors.textTertiary }]}>
+            {original}
+          </Text>
+        )}
+      </View>
+      <BuyMechanicBadge mechanic={mechanic} bestOffer={bestOffer} />
+      <View style={{ flexDirection: 'row', gap: 8 }}>
+        {freeShipping && <Text style={[typography.meta, { color: colors.freeShip }]}>Free shipping</Text>}
+        {secondsLeft != null && <TimeLeft secondsRemaining={secondsLeft} />}
+      </View>
+    </Pressable>
+  );
+}
+```
+
+### Primary / Bid Buttons
+
+```tsx
+// components/EbayButton.tsx
+import { Pressable, Text } from 'react-native';
+import * as Haptics from 'expo-haptics';
+import { colors } from '../theme/colors';
+import { typography } from '../theme/typography';
+
+export function EbayButton({
+  title, variant = 'filled', onPress,
+}: { title: string; variant?: 'filled' | 'bidOutline'; onPress: () => void }) {
+  return (
+    <Pressable
+      onPress={() => { Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium); onPress(); }}
+      style={({ pressed }) => ({
+        paddingVertical: variant === 'filled' ? 15 : 13,
+        paddingHorizontal: 28,
+        borderRadius: 999,
+        alignItems: 'center',
+        backgroundColor: variant === 'filled'
+          ? (pressed ? colors.bluePressed : colors.blue)
+          : 'transparent',
+        borderWidth: variant === 'bidOutline' ? 1.5 : 0,
+        borderColor: colors.blue,
+        transform: [{ scale: pressed ? 0.98 : 1 }],
+      })}
+    >
+      <Text style={[typography.button, variant === 'bidOutline' && { color: colors.blue }]}>
+        {title}
+      </Text>
+    </Pressable>
+  );
+}
+```
+
+## 4. Tab Bar
+
+```tsx
+// app/(tabs)/_layout.tsx  (expo-router)
+import { Tabs } from 'expo-router';
+import Ionicons from '@expo/vector-icons/Ionicons';
+import { BlurView } from 'expo-blur';
+import { colors } from '../../theme/colors';
+
+export default function TabsLayout() {
+  return (
+    <Tabs
+      screenOptions={{
+        tabBarActiveTintColor: colors.blue,
+        tabBarInactiveTintColor: colors.textSecondary,
+        tabBarStyle: { position: 'absolute', borderTopWidth: 0.5, borderTopColor: colors.divider, backgroundColor: 'transparent' },
+        tabBarBackground: () => (
+          <BlurView intensity={80} tint="light" style={{ flex: 1, backgroundColor: 'rgba(255,255,255,0.97)' }} />
+        ),
+        tabBarLabelStyle: { fontFamily: 'Inter-SemiBold', fontSize: 11, letterSpacing: 0.2 },
+      }}
+    >
+      <Tabs.Screen name="index"    options={{ title: 'Home',          tabBarIcon: ({ color }) => <Ionicons name="home"          size={24} color={color} /> }} />
+      <Tabs.Screen name="saved"    options={{ title: 'Saved',         tabBarIcon: ({ color }) => <Ionicons name="heart"         size={24} color={color} /> }} />
+      <Tabs.Screen name="notifs"   options={{ title: 'Notifications', tabBarIcon: ({ color }) => <Ionicons name="notifications" size={24} color={color} /> }} />
+      <Tabs.Screen name="myebay"   options={{ title: 'My eBay',       tabBarIcon: ({ color }) => <Ionicons name="person"        size={24} color={color} /> }} />
+      <Tabs.Screen name="selling"  options={{ title: 'Selling',       tabBarIcon: ({ color }) => <Ionicons name="pricetag"      size={24} color={color} /> }} />
+    </Tabs>
+  );
+}
+```
+
+## 5. Motion
+
+```tsx
+// Watch-heart toggle — see WatchHeart (withSequence spring 1.2 → 1, success haptic)
+
+// Bid placement — present a confirm modal route; on success tick the bid number + increment count
+Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
+
+// "Time left" tick — drive a 1s interval; fontVariant tabular-nums prevents digit reflow
+useEffect(() => {
+  const id = setInterval(() => setSeconds((s) => Math.max(0, s - 1)), 1000);
+  return () => clearInterval(id);
+}, []);
+
+// Card tap — scale 0.98 (Pressable style)
+
+// Photo carousel — light selection haptic per page
+Haptics.selectionAsync();
+```
+
+## 6. Icon Library
+
+Use `@expo/vector-icons` (Ionicons) mapped to eBay's SF Symbol equivalents:
+
+| Purpose | Ionicons |
+|---------|----------|
+| Watch | `heart-outline` / `heart` |
+| Search | `search` |
+| Visual search | `camera-outline` |
+| Star (feedback) | `star` |
+| Share | `share-outline` |
+| Back | `chevron-back` |
+| Cart | `cart-outline` / `cart` |
+| Filters | `options-outline` |
+| Home (tab) | `home-outline` / `home` |
+| Saved (tab) | `heart-outline` / `heart` |
+| Notifications (tab) | `notifications-outline` / `notifications` |
+| My eBay (tab) | `person-outline` / `person` |
+| Selling (tab) | `pricetag-outline` / `pricetag` |
+
+## 7. Platform Notes
+
+- **iOS-only feel**: use `expo-blur` (`tint="light"`) for the tab bar `.regularMaterial` equivalent; Android falls back to an opaque white background
+- **Status bar**: set `<StatusBar style="dark" />` from `expo-status-bar` — the white canvas requires dark content
+- **Safe area**: wrap screens in `SafeAreaView` from `react-native-safe-area-context`; the listing photo carousel bleeds full-width while the sticky bar respects the inset
+- **Tabular figures**: set `fontVariant: ['tabular-nums']` on the "Time left" countdown so the seconds don't reflow; pin it with `allowFontScaling={false}`
+- **Dynamic Type**: React Native respects user font-scaling by default; also set `allowFontScaling={false}` on buy-mechanic badges, condition tags, and tab labels
+- **Accessibility**: never rely on color alone for the buy mechanic — give the badge an `accessibilityLabel` (`"Buy It Now"` / `"Auction, 12 bids"`); expose the watch-heart as `accessibilityRole="button"` with a toggle label; read "Time left" as a full phrase
+- **Brand lock**: keep the four eBay hues exact; only swap surrounding neutrals for dark mode
+- **Performance**: listing photos are 1:1 images in a dense 2-column grid — use `expo-image` with `recyclingKey` for memory efficiency at browse scale

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

@@ -0,0 +1,308 @@
+# eBay (iOS) — SwiftUI Implementation Guide
+
+Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file translates eBay's visual language into paste-ready SwiftUI code: `Color` extensions, `Font` extensions, `ViewModifier`s, and example views.
+
+## 1. Color Tokens
+
+```swift
+import SwiftUI
+
+extension Color {
+    // MARK: - Canvas & Surfaces
+    static let ebayCanvas        = Color.white                                   // #FFFFFF
+    static let ebaySurface       = Color(red: 0.969, green: 0.969, blue: 0.969)  // #F7F7F7
+    static let ebayDivider       = Color(red: 0.898, green: 0.898, blue: 0.898)  // #E5E5E5
+    static let ebaySurfacePressed = Color(red: 0.937, green: 0.937, blue: 0.937) // #EFEFEF
+
+    // MARK: - Text
+    static let ebayTextPrimary   = Color(red: 0.098, green: 0.098, blue: 0.098)  // #191919
+    static let ebayTextSecondary = Color(red: 0.439, green: 0.439, blue: 0.439)  // #707070
+    static let ebayTextTertiary  = Color(red: 0.608, green: 0.608, blue: 0.608)  // #9B9B9B
+
+    // MARK: - Brand (four-color)
+    static let ebayBlue        = Color(red: 0.000, green: 0.392, blue: 0.824)    // #0064D2
+    static let ebayBluePressed = Color(red: 0.000, green: 0.314, blue: 0.659)    // #0050A8
+    static let ebayRed         = Color(red: 0.898, green: 0.196, blue: 0.220)    // #E53238
+    static let ebayYellow      = Color(red: 0.961, green: 0.686, blue: 0.008)    // #F5AF02
+    static let ebayGreen       = Color(red: 0.525, green: 0.722, blue: 0.090)    // #86B817
+
+    // MARK: - Semantic
+    static let ebayFreeShip = Color(red: 0.145, green: 0.525, blue: 0.208)       // #258635
+    static let ebayErrorRed = Color(red: 0.780, green: 0.000, blue: 0.043)       // #C7000B
+}
+```
+
+## 2. Typography
+
+Market Sans is proprietary. Bundle the TTFs via `Info.plist` (`UIAppFonts`) or substitute Inter / fall back to `.system` (SF Pro). Use monospaced digits for the "Time left" countdown.
+
+```swift
+extension Font {
+    static let ebayTitleLarge = Font.custom("Inter-Bold",     size: 28).weight(.bold)
+    static let ebayListing    = Font.custom("Inter-Bold",     size: 22).weight(.bold)
+    static let ebaySection    = Font.custom("Inter-Bold",     size: 20).weight(.bold)
+    static let ebayPrice      = Font.custom("Inter-Bold",     size: 24).weight(.bold)
+    static let ebayCardPrice  = Font.custom("Inter-Bold",     size: 17).weight(.bold)
+    static let ebayCardTitle  = Font.custom("Inter-Regular",  size: 15).weight(.regular)
+    static let ebayBody       = Font.custom("Inter-Regular",  size: 15).weight(.regular)
+    static let ebayButton     = Font.custom("Inter-Bold",     size: 16).weight(.bold)
+    static let ebayBadge      = Font.custom("Inter-Bold",     size: 12).weight(.bold)
+    static let ebayMeta       = Font.custom("Inter-Regular",  size: 13).weight(.regular)
+    static let ebayTimeLeft   = Font.custom("Inter-Bold",     size: 13).weight(.bold)
+    static let ebayTab        = Font.custom("Inter-SemiBold", size: 11).weight(.semibold)
+    static let ebayCondition  = Font.custom("Inter-SemiBold", size: 11).weight(.semibold)
+}
+
+extension Font {
+    static func ebay(_ size: CGFloat, weight: Font.Weight = .regular) -> Font {
+        .system(size: size, weight: weight, design: .default)
+    }
+}
+```
+
+## 3. Signature Components
+
+### Bid vs Buy-It-Now Badge (the signature)
+
+```swift
+struct BuyMechanicBadge: View {
+    enum Mechanic {
+        case buyItNow
+        case auction(bids: Int)
+    }
+    let mechanic: Mechanic
+    var bestOffer: Bool = false
+
+    var body: some View {
+        HStack(spacing: 6) {
+            switch mechanic {
+            case .buyItNow:
+                Text("BUY IT NOW")
+                    .font(.ebayBadge)
+                    .foregroundStyle(Color.ebayBlue)
+                    .padding(.vertical, 4).padding(.horizontal, 8)
+                    .background(RoundedRectangle(cornerRadius: 4).fill(Color.ebayBlue.opacity(0.10)))
+            case .auction(let bids):
+                Text("\(bids) BID\(bids == 1 ? "" : "S")")
+                    .font(.ebayBadge)
+                    .foregroundStyle(Color.ebayTextPrimary)
+                    .padding(.vertical, 4).padding(.horizontal, 8)
+                    .background(RoundedRectangle(cornerRadius: 4).fill(Color.ebaySurface))
+            }
+            if bestOffer {
+                Text("or Best Offer")
+                    .font(.ebayMeta)
+                    .foregroundStyle(Color.ebayGreen)
+            }
+        }
+    }
+}
+```
+
+### "Time Left" Countdown
+
+```swift
+struct TimeLeft: View {
+    let secondsRemaining: Int
+
+    private var urgent: Bool { secondsRemaining < 86_400 }   // < 24h
+    private var sub1h: Bool  { secondsRemaining < 3_600 }
+
+    private var label: String {
+        let d = secondsRemaining / 86_400
+        let h = (secondsRemaining % 86_400) / 3_600
+        let m = (secondsRemaining % 3_600) / 60
+        let s = secondsRemaining % 60
+        if d > 0 { return "\(d)d \(h)h left" }
+        if h > 0 { return "\(h)h \(m)m left" }
+        return "\(m)m \(s)s left"
+    }
+
+    var body: some View {
+        Text(label)
+            .font(.ebayTimeLeft)
+            .monospacedDigit()   // tabular — never jitters
+            .foregroundStyle(urgent ? Color.ebayRed : Color.ebayTextSecondary)
+    }
+}
+```
+
+### Watch Heart
+
+```swift
+struct WatchHeart: View {
+    @Binding var watching: Bool
+    var overPhoto: Bool = true
+
+    var body: some View {
+        Button {
+            watching.toggle()
+        } label: {
+            Image(systemName: watching ? "heart.fill" : "heart")
+                .font(.system(size: 20, weight: .semibold))
+                .foregroundStyle(watching ? Color.ebayRed : (overPhoto ? .white : .ebayTextPrimary))
+                .padding(overPhoto ? 8 : 0)
+                .background(overPhoto ? Circle().fill(.black.opacity(0.40)) : nil)
+                .scaleEffect(watching ? 1.0 : 1.0)
+        }
+        .sensoryFeedback(.success, trigger: watching)
+        .animation(.spring(response: 0.26, dampingFraction: 0.55), value: watching)
+        .accessibilityLabel(watching ? "Watching this item" : "Add to watchlist")
+    }
+}
+```
+
+### Listing Card
+
+```swift
+struct ListingCard: View {
+    let title: String
+    let photo: Image
+    let price: String
+    let original: String?
+    let mechanic: BuyMechanicBadge.Mechanic
+    let bestOffer: Bool
+    let freeShipping: Bool
+    let secondsLeft: Int?
+    @State private var watching = false
+
+    var body: some View {
+        VStack(alignment: .leading, spacing: 6) {
+            ZStack(alignment: .topTrailing) {
+                photo
+                    .resizable()
+                    .aspectRatio(1, contentMode: .fill)
+                    .frame(maxWidth: .infinity)
+                    .clipShape(RoundedRectangle(cornerRadius: 8))
+                WatchHeart(watching: $watching).padding(8)
+            }
+            Text(title).font(.ebayCardTitle).foregroundStyle(.ebayTextPrimary).lineLimit(2)
+            HStack(alignment: .firstTextBaseline, spacing: 6) {
+                Text(price).font(.ebayCardPrice).foregroundStyle(.ebayTextPrimary)
+                if let original {
+                    Text(original)
+                        .font(.ebayMeta)
+                        .strikethrough()
+                        .foregroundStyle(.ebayTextTertiary)
+                }
+            }
+            BuyMechanicBadge(mechanic: mechanic, bestOffer: bestOffer)
+            HStack(spacing: 8) {
+                if freeShipping {
+                    Text("Free shipping").font(.ebayMeta).foregroundStyle(Color.ebayFreeShip)
+                }
+                if let s = secondsLeft { TimeLeft(secondsRemaining: s) }
+            }
+        }
+        .padding(8)
+        .background(RoundedRectangle(cornerRadius: 8).fill(Color.ebayCanvas))
+        .shadow(color: .black.opacity(0.06), radius: 4, y: 1)
+        .contentShape(Rectangle())
+    }
+}
+```
+
+### Primary / Bid Buttons
+
+```swift
+struct EbayPrimaryButton: View {
+    let title: String
+    var style: Style = .filled
+    let action: () -> Void
+    enum Style { case filled, bidOutline }
+
+    var body: some View {
+        Button(action: action) {
+            Text(title)
+                .font(.ebayButton)
+                .foregroundStyle(style == .filled ? .white : Color.ebayBlue)
+                .frame(maxWidth: .infinity)
+                .padding(.vertical, style == .filled ? 15 : 13)
+                .background(
+                    Capsule().fill(style == .filled ? Color.ebayBlue : .clear)
+                )
+                .overlay(
+                    Capsule().strokeBorder(style == .bidOutline ? Color.ebayBlue : .clear, lineWidth: 1.5)
+                )
+        }
+        .sensoryFeedback(.impact(weight: .medium), trigger: title)
+        .buttonStyle(EbayPressableStyle())
+    }
+}
+
+struct EbayPressableStyle: ButtonStyle {
+    func makeBody(configuration: Configuration) -> some View {
+        configuration.label
+            .scaleEffect(configuration.isPressed ? 0.98 : 1)
+            .animation(.spring(response: 0.25, dampingFraction: 0.8), value: configuration.isPressed)
+    }
+}
+```
+
+## 4. Tab Bar
+
+```swift
+struct RootTabView: View {
+    init() {
+        let appearance = UITabBarAppearance()
+        appearance.configureWithDefaultBackground()
+        appearance.backgroundColor = UIColor.white.withAlphaComponent(0.97)
+        UITabBar.appearance().standardAppearance = appearance
+        UITabBar.appearance().scrollEdgeAppearance = appearance
+    }
+    var body: some View {
+        TabView {
+            HomeView().tabItem { Label("Home", systemImage: "house.fill") }
+            SavedView().tabItem { Label("Saved", systemImage: "heart.fill") }
+            NotificationsView().tabItem { Label("Notifications", systemImage: "bell.fill") }
+            MyEbayView().tabItem { Label("My eBay", systemImage: "person.fill") }
+            SellingView().tabItem { Label("Selling", systemImage: "tag.fill") }
+        }
+        .tint(.ebayBlue) // active = eBay Blue
+    }
+}
+```
+
+## 5. Motion
+
+```swift
+// Watch-heart toggle — see WatchHeart (spring dampingFraction 0.55 → ~1.2 overshoot, success haptic)
+.sensoryFeedback(.success, trigger: watching)
+
+// Bid placement — present a confirm sheet; on success tick the bid number + increment count
+.sensoryFeedback(.impact(weight: .medium), trigger: bidPlaced)
+
+// "Time left" tick — drive from a TimelineView(.periodic(from:.now, by:1)); .monospacedDigit() prevents jitter
+
+// Card tap — scale 0.98 spring (see EbayPressableStyle)
+
+// Photo carousel — light haptic per page
+.sensoryFeedback(.selection, trigger: page)
+```
+
+## 6. SF Symbols Used
+
+| Component | Symbol | Size |
+|-----------|--------|------|
+| Watch | `heart` / `heart.fill` | 24pt |
+| Search | `magnifyingglass` | 18pt |
+| Visual search | `camera` | 18pt |
+| Star (feedback) | `star.fill` | 12pt |
+| Share | `square.and.arrow.up` | 22pt |
+| Back | `chevron.left` | 20pt |
+| Cart | `cart` / `cart.fill` | 22pt |
+| Filters | `slider.horizontal.3` | 18pt |
+| Home (tab) | `house.fill` | 24pt |
+| Saved (tab) | `heart.fill` | 24pt |
+| Notifications (tab) | `bell.fill` | 24pt |
+| My eBay (tab) | `person.fill` | 24pt |
+| Selling (tab) | `tag.fill` | 24pt |
+
+## 7. Minimum iOS & Accessibility Notes
+
+- Minimum target: iOS 16 (`.sensoryFeedback` requires iOS 17; fall back to `UIImpactFeedbackGenerator`)
+- Support Dynamic Type on listing title, price, body, card title (2-line clamp) — pin buy-mechanic badge, condition tag, "Time left", and tab labels (layout-sensitive)
+- VoiceOver: never rely on color alone for the buy mechanic — set `.accessibilityLabel("Buy It Now")` vs `"Auction, 12 bids"` on the badge; announce the watch-heart as a toggle; read "Time left" as "1 day 4 hours remaining"
+- Tabular figures: use `.monospacedDigit()` on the countdown so the seconds don't reflow and VoiceOver re-reads stay stable
+- Contrast: `#707070` on `#FFFFFF` passes WCAG AA at 13pt+. Validate eBay Yellow `#F5AF02` — it fails as text on white at small sizes, so use it for star fills and accents, not body text
+- The four brand colors are equity-locked — do not adjust their hues for theming; only swap surrounding neutrals for dark mode