designmd-forge 1.2.0

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

@@ -0,0 +1,342 @@
+# Twitch (iOS) — Expo / React Native Implementation Guide
+
+Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file translates Twitch'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`, `expo-blur`, and `react-native-reanimated` v3.
+
+## 1. Color Tokens
+
+```ts
+// theme/colors.ts
+export const colors = {
+  canvas:    '#0E0E10',
+  deepBlack: '#000000',
+  surface1:  '#18181B',
+  surface2:  '#1F1F23',
+  surface3:  '#2A2A2D',
+  divider:   '#2A2A2D',
+
+  textPrimary:   '#EFEFF1',
+  textSecondary: '#ADADB8',
+  textTertiary:  '#6F6F7B',
+
+  purple:        '#9146FF',
+  purplePressed: '#772CE8',
+  liveRed:       '#EB0400',
+  liveRedPressed:'#C20300',
+  onlineGreen:   '#00C16E',
+  errorRed:      '#EB0400',
+} as const;
+
+export type TwitchColor = keyof typeof colors;
+```
+
+## 2. Typography
+
+Load Roobert via `expo-font`. Fall back to Inter (or `System`, SF Pro on iOS).
+
+```tsx
+// app/_layout.tsx
+import { useFonts } from 'expo-font';
+
+export default function Root() {
+  const [loaded] = useFonts({
+    'Roobert-Regular':  require('../assets/fonts/Roobert-Regular.ttf'),
+    'Roobert-Semibold': require('../assets/fonts/Roobert-Semibold.ttf'),
+    'Roobert-Bold':     require('../assets/fonts/Roobert-Bold.ttf'),
+  });
+  if (!loaded) return null;
+  return <Stack />;
+}
+```
+
+```ts
+// theme/typography.ts
+import type { TextStyle } from 'react-native';
+
+const base = { color: '#EFEFF1' } satisfies TextStyle;
+
+export const typography = {
+  titleLarge:     { ...base, fontFamily: 'Roobert-Bold',     fontSize: 28, lineHeight: 32, letterSpacing: -0.4 },
+  channelName:    { ...base, fontFamily: 'Roobert-Bold',     fontSize: 22, lineHeight: 26, letterSpacing: -0.3 },
+  sectionHeader:  { ...base, fontFamily: 'Roobert-Bold',     fontSize: 20, lineHeight: 24, letterSpacing: -0.3 },
+  streamTitle:    { ...base, fontFamily: 'Roobert-Semibold', fontSize: 16, lineHeight: 20, letterSpacing: -0.1 },
+  channelLabel:   { ...base, fontFamily: 'Roobert-Bold',     fontSize: 15, lineHeight: 19, letterSpacing: -0.1 },
+  body:           { ...base, fontFamily: 'Roobert-Regular',  fontSize: 15, lineHeight: 22 },
+  chatMessage:    { ...base, fontFamily: 'Roobert-Regular',  fontSize: 14, lineHeight: 19 },
+  chatUsername:   { ...base, fontFamily: 'Roobert-Bold',     fontSize: 14, lineHeight: 19 },
+  meta:           {           fontFamily: 'Roobert-Regular',  fontSize: 13, lineHeight: 17, color: '#ADADB8' },
+  cardSubtitle:   {           fontFamily: 'Roobert-Regular',  fontSize: 12, lineHeight: 16, color: '#ADADB8' },
+  labelUpper:     { ...base, fontFamily: 'Roobert-Bold',     fontSize: 11, lineHeight: 13, letterSpacing: 0.6, textTransform: 'uppercase' as const },
+  button:         { color: '#FFFFFF', fontFamily: 'Roobert-Bold', fontSize: 15, lineHeight: 19, letterSpacing: 0.2 },
+  buttonSecondary:{ ...base, fontFamily: 'Roobert-Semibold', fontSize: 14, lineHeight: 18 },
+  tab:            {           fontFamily: 'Roobert-Semibold', fontSize: 10, lineHeight: 12, letterSpacing: 0.2 },
+  badge:          { color: '#FFFFFF', fontFamily: 'Roobert-Bold', fontSize: 11, lineHeight: 13, letterSpacing: 0.4 },
+} satisfies Record<string, TextStyle>;
+```
+
+## 3. Signature Components
+
+### Primary Purple Follow / Subscribe Button
+
+```tsx
+// components/FollowButton.tsx
+import { Pressable, Text, View } from 'react-native';
+import Ionicons from '@expo/vector-icons/Ionicons';
+import * as Haptics from 'expo-haptics';
+import { colors } from '../theme/colors';
+import { typography } from '../theme/typography';
+
+export function FollowButton({
+  following, onToggle, subscribe = false,
+}: { following: boolean; onToggle: () => void; subscribe?: boolean }) {
+  const label = following
+    ? (subscribe ? 'Subscribed' : 'Following')
+    : (subscribe ? 'Subscribe' : 'Follow');
+  const icon = following ? 'checkmark' : (subscribe ? 'star' : 'heart');
+
+  return (
+    <Pressable
+      onPress={() => { Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light); onToggle(); }}
+      style={({ pressed }) => ({
+        height: 40, paddingHorizontal: 16, borderRadius: 6,
+        flexDirection: 'row', alignItems: 'center', gap: 6,
+        backgroundColor: following
+          ? (pressed ? colors.surface3 : colors.surface2)
+          : (pressed ? colors.purplePressed : colors.purple),
+        transform: [{ scale: pressed ? 0.97 : 1 }],
+        shadowColor: following ? 'transparent' : colors.purple,
+        shadowOpacity: following ? 0 : 0.35, shadowRadius: 18, shadowOffset: { width: 0, height: 6 },
+      })}
+    >
+      <Ionicons name={icon as any} size={14}
+        color={following ? colors.purple : '#fff'} />
+      <Text style={following ? typography.buttonSecondary : typography.button}>{label}</Text>
+    </Pressable>
+  );
+}
+```
+
+### LIVE Pill (pulsing) + Viewer-Count Pill
+
+```tsx
+// components/LivePill.tsx
+import { useEffect } from 'react';
+import { Text, View } from 'react-native';
+import Animated, { useSharedValue, useAnimatedStyle, withRepeat, withTiming } from 'react-native-reanimated';
+import Ionicons from '@expo/vector-icons/Ionicons';
+import { colors } from '../theme/colors';
+import { typography } from '../theme/typography';
+
+export function LivePill() {
+  const s = useSharedValue(1);
+  useEffect(() => { s.value = withRepeat(withTiming(0.55, { duration: 800 }), -1, true); }, []);
+  const dot = useAnimatedStyle(() => ({ opacity: s.value, transform: [{ scale: s.value }] }));
+  return (
+    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 5, height: 22,
+                   paddingHorizontal: 8, borderRadius: 4, backgroundColor: colors.liveRed }}>
+      <Animated.View style={[{ width: 6, height: 6, borderRadius: 3, backgroundColor: '#fff' }, dot]} />
+      <Text style={typography.badge}>LIVE</Text>
+    </View>
+  );
+}
+
+export function ViewerPill({ count }: { count: string }) {
+  return (
+    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4, height: 22,
+                   paddingHorizontal: 8, borderRadius: 4, backgroundColor: 'rgba(0,0,0,0.6)' }}>
+      <Ionicons name="person" size={9} color="#fff" />
+      <Text style={typography.badge}>{count}</Text>
+    </View>
+  );
+}
+```
+
+### Live Thumbnail Card
+
+```tsx
+// components/LiveCard.tsx
+import { Image, Pressable, Text, View } from 'react-native';
+import Animated, { useSharedValue, useAnimatedStyle, withTiming } from 'react-native-reanimated';
+import { typography } from '../theme/typography';
+import { LivePill, ViewerPill } from './LivePill';
+
+export function LiveCard({
+  title, channel, game, viewers, thumbUri, avatarUri, width,
+}: { title: string; channel: string; game: string; viewers: string; thumbUri: string; avatarUri: string; width: number }) {
+  const scale = useSharedValue(1);
+  const style = useAnimatedStyle(() => ({ transform: [{ scale: scale.value }] }));
+  return (
+    <Pressable
+      onPressIn={() => (scale.value = withTiming(1.03, { duration: 180 }))}
+      onPressOut={() => (scale.value = withTiming(1, { duration: 180 }))}
+    >
+      <Animated.View style={[{ width }, style]}>
+        <View style={{ width, height: width * 9 / 16, borderRadius: 6, overflow: 'hidden' }}>
+          <Image source={{ uri: thumbUri }} style={{ width: '100%', height: '100%' }} />
+          <View style={{ position: 'absolute', top: 8, left: 8 }}><LivePill /></View>
+          <View style={{ position: 'absolute', bottom: 8, left: 8 }}><ViewerPill count={viewers} /></View>
+        </View>
+        <View style={{ flexDirection: 'row', gap: 8, marginTop: 8 }}>
+          <Image source={{ uri: avatarUri }} style={{ width: 32, height: 32, borderRadius: 16 }} />
+          <View style={{ flex: 1 }}>
+            <Text style={typography.streamTitle} numberOfLines={2}>{title}</Text>
+            <Text style={typography.meta}>{channel}</Text>
+            <Text style={typography.cardSubtitle}>{game}</Text>
+          </View>
+        </View>
+      </Animated.View>
+    </Pressable>
+  );
+}
+```
+
+### Chat Message Row + Channel Live Ring
+
+```tsx
+// components/ChatRow.tsx
+import { Text, View } from 'react-native';
+import { colors } from '../theme/colors';
+import { typography } from '../theme/typography';
+
+export function ChatRow({
+  username, userColor, message, mentioned = false,
+}: { username: string; userColor: string; message: string; mentioned?: boolean }) {
+  return (
+    <View style={{ paddingVertical: 4, paddingHorizontal: 12, flexDirection: 'row',
+                    backgroundColor: mentioned ? 'rgba(145,70,255,0.20)' : 'transparent',
+                    borderLeftWidth: mentioned ? 2 : 0, borderLeftColor: colors.purple }}>
+      <Text style={{ flex: 1 }}>
+        <Text style={[typography.chatUsername, { color: userColor }]}>{username} </Text>
+        <Text style={typography.chatMessage}>{message}</Text>
+      </Text>
+    </View>
+  );
+}
+
+// components/AvatarRing.tsx
+import { Image, View } from 'react-native';
+export function AvatarRing({ uri, live, size = 44 }: { uri: string; live: boolean; size?: number }) {
+  return (
+    <View style={{ padding: 2, borderRadius: (size + 4) / 2, borderWidth: 2,
+                    borderColor: live ? colors.liveRed : colors.purple }}>
+      <Image source={{ uri }} style={{ width: size, height: size, borderRadius: size / 2 }} />
+    </View>
+  );
+}
+import { colors as _c } from '../theme/colors';
+```
+
+### Theater-Mode Chat Overlay
+
+```tsx
+// components/TheaterChatOverlay.tsx
+import { FlatList, TextInput, View } from 'react-native';
+import { BlurView } from 'expo-blur';
+import Animated, { SlideInRight, SlideOutRight } from 'react-native-reanimated';
+import { colors } from '../theme/colors';
+import { ChatRow } from './ChatRow';
+
+export function TheaterChatOverlay({ messages, hidden }: { messages: any[]; hidden: boolean }) {
+  if (hidden) return null;
+  return (
+    <Animated.View entering={SlideInRight} exiting={SlideOutRight}
+                   style={{ position: 'absolute', right: 0, top: 0, bottom: 0, width: 320 }}>
+      <BlurView intensity={28} tint="dark" style={{ flex: 1, backgroundColor: 'rgba(14,14,16,0.72)' }}>
+        <FlatList
+          data={messages}
+          renderItem={({ item }) => (
+            <ChatRow username={item.user} userColor={item.color}
+                     message={item.text} mentioned={item.mentionsMe} />
+          )}
+          keyExtractor={(m) => m.id}
+        />
+        <TextInput
+          placeholder="Send a message"
+          placeholderTextColor={colors.textSecondary}
+          style={{ margin: 12, padding: 12, borderRadius: 8, backgroundColor: colors.surface2, color: colors.textPrimary }}
+        />
+      </BlurView>
+    </Animated.View>
+  );
+}
+```
+
+## 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.purple,    // purple is the indicator
+        tabBarInactiveTintColor: colors.textSecondary,
+        tabBarStyle: { position: 'absolute', borderTopWidth: 0, backgroundColor: 'transparent' },
+        tabBarBackground: () => (
+          <BlurView intensity={80} tint="dark" style={{ flex: 1, backgroundColor: 'rgba(14,14,16,0.6)' }} />
+        ),
+        tabBarLabelStyle: { fontFamily: 'Roobert-Semibold', fontSize: 10, letterSpacing: 0.2 },
+      }}
+    >
+      <Tabs.Screen name="index"   options={{ title: 'Following',     tabBarIcon: ({ color }) => <Ionicons name="heart"        size={24} color={color} /> }} />
+      <Tabs.Screen name="browse"  options={{ title: 'Browse',        tabBarIcon: ({ color }) => <Ionicons name="albums"       size={24} color={color} /> }} />
+      <Tabs.Screen name="search"  options={{ title: 'Search',        tabBarIcon: ({ color }) => <Ionicons name="search"       size={24} color={color} /> }} />
+      <Tabs.Screen name="notifs"  options={{ title: 'Notifications', tabBarIcon: ({ color }) => <Ionicons name="notifications" size={24} color={color} /> }} />
+      <Tabs.Screen name="profile" options={{ title: 'Profile',       tabBarIcon: ({ color }) => <Ionicons name="person-circle" size={24} color={color} /> }} />
+    </Tabs>
+  );
+}
+```
+
+## 5. Motion
+
+```tsx
+// LIVE pill pulse — withRepeat(withTiming(0.55, { duration: 800 }), -1, true) on a shared value (see §3)
+
+// Card press scale-up
+scale.value = withTiming(1.03, { duration: 180 }); // onPressIn
+scale.value = withTiming(1,    { duration: 180 }); // onPressOut
+
+// Follow tap
+Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+
+// Chat autoscroll: new rows entering={FadeInDown.duration(120)}; auto-scrollToEnd unless user scrolled up
+// Theater toggle: SlideInRight / SlideOutRight on the chat overlay
+```
+
+## 6. Icon Library
+
+Use `@expo/vector-icons` — ships Ionicons, Feather, MaterialCommunityIcons. Map to Twitch's SF Symbol equivalents:
+
+| Purpose | Ionicons |
+|---------|----------|
+| Follow | `heart-outline` / `heart` |
+| Subscribe | `star-outline` / `star` |
+| Followed check | `checkmark` |
+| Viewers | `person` |
+| Play / Pause | `play` / `pause` |
+| Emote picker | `happy-outline` |
+| Send | `send` |
+| Share | `share-outline` |
+| More | `ellipsis-horizontal` |
+| Search | `search` |
+| Following (tab) | `heart-outline` / `heart` |
+| Browse (tab) | `albums-outline` / `albums` |
+| Notifications (tab) | `notifications-outline` / `notifications` |
+| Profile (tab) | `person-circle-outline` / `person-circle` |
+
+## 7. Platform Notes
+
+- **iOS-only feel**: Use `expo-blur` for the tab bar AND the theater-mode chat overlay (`rgba(14,14,16,0.72)` + intensity 28). Android falls back to an opaque panel.
+- **Status bar**: Set `<StatusBar style="light" />` from `expo-status-bar` globally — the near-black canvas requires light content
+- **Safe area**: wrap screens in `SafeAreaView` from `react-native-safe-area-context`; chat input docks above the home indicator; rails bleed right
+- **Dynamic Type**: React Native respects font scaling by default; set `allowFontScaling={false}` on tab labels, LIVE pill, and viewer pills; cap chat font growth via `maxFontSizeMultiplier={1.3}` to keep throughput readable
+- **Accessibility**: announce live cards via `accessibilityLabel`; for chat use an `accessibilityLiveRegion="polite"` container so VoiceOver narrates new messages (offer a mute toggle)
+- **Color split & color-blindness**: the LIVE pill always carries the word "LIVE" + dot — never rely on purple-vs-red hue alone for state
+- **Reduce Motion**: gate the LIVE pulse and card scale-up behind `AccessibilityInfo.isReduceMotionEnabled()` (static red dot, cross-fade theater)

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

@@ -0,0 +1,328 @@
+# Twitch (iOS) — SwiftUI Implementation Guide
+
+Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file translates Twitch'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 twitchCanvas    = Color(red: 0.055, green: 0.055, blue: 0.063) // #0E0E10
+    static let twitchDeepBlack = Color.black                                  // #000000
+    static let twitchSurface1  = Color(red: 0.094, green: 0.094, blue: 0.106) // #18181B
+    static let twitchSurface2  = Color(red: 0.122, green: 0.122, blue: 0.137) // #1F1F23
+    static let twitchSurface3  = Color(red: 0.165, green: 0.165, blue: 0.176) // #2A2A2D
+    static let twitchDivider   = Color(red: 0.165, green: 0.165, blue: 0.176) // #2A2A2D
+
+    // MARK: - Text
+    static let twitchTextPrimary   = Color(red: 0.937, green: 0.937, blue: 0.945) // #EFEFF1
+    static let twitchTextSecondary = Color(red: 0.678, green: 0.678, blue: 0.722) // #ADADB8
+    static let twitchTextTertiary  = Color(red: 0.435, green: 0.435, blue: 0.482) // #6F6F7B
+
+    // MARK: - Brand & Liveness
+    static let twitchPurple        = Color(red: 0.569, green: 0.275, blue: 1.000) // #9146FF
+    static let twitchPurplePressed = Color(red: 0.467, green: 0.173, blue: 0.910) // #772CE8
+    static let twitchLiveRed       = Color(red: 0.922, green: 0.016, blue: 0.000) // #EB0400
+    static let twitchLiveRedPressed = Color(red: 0.761, green: 0.012, blue: 0.000) // #C20300
+    static let twitchOnlineGreen   = Color(red: 0.000, green: 0.757, blue: 0.431) // #00C16E
+}
+```
+
+## 2. Typography
+
+Roobert is a licensed brand typeface. Bundle the TTFs via `Info.plist` (`UIAppFonts`) or register at runtime. Fall back to Inter (or `.system`) — a rounded grotesque is the closest free substitute.
+
+```swift
+extension Font {
+    static let twitchTitleLarge   = Font.custom("Roobert-Bold",     size: 28).weight(.bold)
+    static let twitchChannelName  = Font.custom("Roobert-Bold",     size: 22).weight(.bold)
+    static let twitchSectionHeader = Font.custom("Roobert-Bold",    size: 20).weight(.bold)
+    static let twitchStreamTitle  = Font.custom("Roobert-Semibold", size: 16).weight(.semibold)
+    static let twitchChannelLabel = Font.custom("Roobert-Bold",     size: 15).weight(.bold)
+    static let twitchBody         = Font.custom("Roobert-Regular",  size: 15).weight(.regular)
+    static let twitchChatMessage  = Font.custom("Roobert-Regular",  size: 14).weight(.regular)
+    static let twitchChatUsername = Font.custom("Roobert-Bold",     size: 14).weight(.bold)
+    static let twitchMeta         = Font.custom("Roobert-Regular",  size: 13).weight(.regular)
+    static let twitchCardSubtitle = Font.custom("Roobert-Regular",  size: 12).weight(.regular)
+    static let twitchLabelUpper   = Font.custom("Roobert-Bold",     size: 11).weight(.bold)
+    static let twitchButton       = Font.custom("Roobert-Bold",     size: 15).weight(.bold)
+    static let twitchButtonSecondary = Font.custom("Roobert-Semibold", size: 14).weight(.semibold)
+    static let twitchTab          = Font.custom("Roobert-Semibold", size: 10).weight(.semibold)
+    static let twitchBadge        = Font.custom("Roobert-Bold",     size: 11).weight(.bold)
+}
+
+extension Font {
+    static func twitch(_ size: CGFloat, weight: Font.Weight = .regular) -> Font {
+        .system(size: size, weight: weight, design: .default)
+    }
+}
+```
+
+## 3. Signature Components
+
+### Primary Purple Follow / Subscribe Button
+
+```swift
+struct TwitchFollowButton: View {
+    @Binding var isFollowing: Bool
+    var subscribe: Bool = false   // true = Subscribe styling
+
+    var body: some View {
+        Button {
+            isFollowing.toggle()
+        } label: {
+            HStack(spacing: 6) {
+                Image(systemName: isFollowing ? "checkmark" : (subscribe ? "star.fill" : "heart.fill"))
+                    .font(.system(size: 14, weight: .bold))
+                Text(isFollowing ? (subscribe ? "Subscribed" : "Following")
+                                  : (subscribe ? "Subscribe" : "Follow"))
+                    .font(isFollowing ? .twitchButtonSecondary : .twitchButton)
+                    .tracking(isFollowing ? 0 : 0.2)
+            }
+            .foregroundStyle(isFollowing ? Color.twitchTextPrimary : .white)
+            .padding(.horizontal, 16)
+            .frame(height: 40)
+            .background(
+                RoundedRectangle(cornerRadius: 6)
+                    .fill(isFollowing ? Color.twitchSurface2 : Color.twitchPurple)
+            )
+            .shadow(color: isFollowing ? .clear : Color.twitchPurple.opacity(0.35), radius: 18, y: 6)
+        }
+        .sensoryFeedback(.impact(weight: .light), trigger: isFollowing)
+        .buttonStyle(TwitchPressableStyle(pressedScale: 0.97))
+    }
+}
+
+struct TwitchPressableStyle: ButtonStyle {
+    var pressedScale: CGFloat = 0.98
+    func makeBody(configuration: Configuration) -> some View {
+        configuration.label
+            .scaleEffect(configuration.isPressed ? pressedScale : 1)
+            .animation(.spring(response: 0.25, dampingFraction: 0.7), value: configuration.isPressed)
+    }
+}
+```
+
+### LIVE Pill (pulsing) + Viewer-Count Pill
+
+```swift
+struct TwitchLivePill: View {
+    @State private var pulse = false
+    var body: some View {
+        HStack(spacing: 5) {
+            Circle().fill(.white).frame(width: 6, height: 6)
+                .scaleEffect(pulse ? 0.6 : 1)
+                .opacity(pulse ? 0.5 : 1)
+                .animation(.easeInOut(duration: 1.6).repeatForever(autoreverses: true), value: pulse)
+            Text("LIVE").font(.twitchBadge).tracking(0.4)
+        }
+        .foregroundStyle(.white)
+        .padding(.horizontal, 8)
+        .frame(height: 22)
+        .background(RoundedRectangle(cornerRadius: 4).fill(Color.twitchLiveRed))
+        .onAppear { pulse = true }
+    }
+}
+
+struct TwitchViewerPill: View {
+    let count: String   // e.g. "12.4K"
+    var body: some View {
+        HStack(spacing: 4) {
+            Image(systemName: "person.fill").font(.system(size: 9, weight: .bold))
+            Text(count).font(.twitchBadge)
+        }
+        .foregroundStyle(.white)
+        .padding(.horizontal, 8)
+        .frame(height: 22)
+        .background(RoundedRectangle(cornerRadius: 4).fill(.black.opacity(0.6)))
+    }
+}
+```
+
+### Live Thumbnail Card
+
+```swift
+struct TwitchLiveCard: View {
+    let title: String
+    let channel: String
+    let game: String
+    let viewers: String
+    let thumbnail: Image
+    let avatar: Image
+    let width: CGFloat
+
+    var body: some View {
+        VStack(alignment: .leading, spacing: 8) {
+            ZStack(alignment: .topLeading) {
+                thumbnail
+                    .resizable()
+                    .aspectRatio(16/9, contentMode: .fill)
+                    .frame(width: width, height: width * 9/16)
+                    .clipShape(RoundedRectangle(cornerRadius: 6))
+                TwitchLivePill().padding(8)
+                VStack { Spacer()
+                    HStack { TwitchViewerPill(count: viewers); Spacer() }
+                }.padding(8)
+            }
+            HStack(alignment: .top, spacing: 8) {
+                avatar.resizable().frame(width: 32, height: 32).clipShape(Circle())
+                VStack(alignment: .leading, spacing: 2) {
+                    Text(title).font(.twitchStreamTitle).foregroundStyle(.twitchTextPrimary).lineLimit(2)
+                    Text(channel).font(.twitchMeta).foregroundStyle(.twitchTextSecondary)
+                    Text(game).font(.twitchCardSubtitle).foregroundStyle(.twitchTextSecondary)
+                }
+            }
+        }
+        .frame(width: width)
+    }
+}
+```
+
+### Chat Message Row + Channel Live Ring
+
+```swift
+struct TwitchChatRow: View {
+    let username: String
+    let userColor: Color
+    let message: String
+    var mentioned: Bool = false
+
+    var body: some View {
+        HStack(alignment: .top, spacing: 0) {
+            (Text(username + " ").font(.twitchChatUsername).foregroundColor(userColor)
+             + Text(message).font(.twitchChatMessage).foregroundColor(.twitchTextPrimary))
+            .fixedSize(horizontal: false, vertical: true)
+            Spacer(minLength: 0)
+        }
+        .padding(.vertical, 4)
+        .padding(.horizontal, 12)
+        .background(
+            mentioned
+            ? Color.twitchPurple.opacity(0.20)
+                .overlay(Rectangle().fill(Color.twitchPurple).frame(width: 2), alignment: .leading)
+            : nil
+        )
+    }
+}
+
+struct TwitchAvatarRing: View {
+    let avatar: Image
+    let isLive: Bool
+    var size: CGFloat = 44
+    var body: some View {
+        avatar
+            .resizable()
+            .frame(width: size, height: size)
+            .clipShape(Circle())
+            .overlay(Circle().strokeBorder(isLive ? Color.twitchLiveRed : Color.twitchPurple, lineWidth: 2))
+            .padding(2)
+    }
+}
+```
+
+## 4. Theater-Mode Chat Overlay
+
+```swift
+struct TwitchTheaterChatOverlay: View {
+    let messages: [ChatLine]
+    @Binding var chatHidden: Bool
+
+    var body: some View {
+        if !chatHidden {
+            VStack(spacing: 0) {
+                ScrollView { LazyVStack(spacing: 0) {
+                    ForEach(messages) { m in
+                        TwitchChatRow(username: m.user, userColor: m.color,
+                                      message: m.text, mentioned: m.mentionsMe)
+                    }
+                }}
+                TextField("Send a message", text: .constant(""))
+                    .padding(12)
+                    .background(Color.twitchSurface2)
+            }
+            .frame(width: 320)
+            .background(.ultraThinMaterial)
+            .background(Color.twitchCanvas.opacity(0.72))
+            .transition(.move(edge: .trailing).combined(with: .opacity))
+        }
+    }
+}
+```
+
+## 5. Tab Bar
+
+Use `TabView` with a custom `UITabBarAppearance` for the 94%-opaque canvas + `.regularMaterial` blur. **Active tint is Twitch Purple** — purple is the indicator.
+
+```swift
+struct RootTabView: View {
+    init() {
+        let appearance = UITabBarAppearance()
+        appearance.configureWithTransparentBackground()
+        appearance.backgroundEffect = UIBlurEffect(style: .systemMaterialDark)
+        appearance.backgroundColor = UIColor(Color.twitchCanvas).withAlphaComponent(0.94)
+        UITabBar.appearance().standardAppearance = appearance
+        UITabBar.appearance().scrollEdgeAppearance = appearance
+    }
+    var body: some View {
+        TabView {
+            FollowingView().tabItem     { Label("Following",     systemImage: "heart.fill") }
+            BrowseView().tabItem        { Label("Browse",        systemImage: "play.square.stack.fill") }
+            SearchView().tabItem        { Label("Search",        systemImage: "magnifyingglass") }
+            NotificationsView().tabItem { Label("Notifications", systemImage: "bell.fill") }
+            ProfileView().tabItem       { Label("Profile",       systemImage: "person.crop.circle.fill") }
+        }
+        .tint(.twitchPurple) // active = purple, purple is the indicator
+    }
+}
+```
+
+## 6. Motion
+
+Use `SwiftUI` spring defaults. Haptics via the modern `.sensoryFeedback` API (iOS 17+).
+
+```swift
+// LIVE pill pulse — see §3 (1.6s scale+opacity, .repeatForever(autoreverses: true))
+
+// Card press scale-up
+.scaleEffect(isPressed ? 1.03 : 1.0)
+.animation(.easeOut(duration: 0.18), value: isPressed)
+
+// Follow tap
+.sensoryFeedback(.impact(weight: .light), trigger: isFollowing)
+
+// Chat autoscroll: insert with .transition(.move(edge: .bottom).combined(with: .opacity))
+// over .animation(.easeOut(duration: 0.12))
+
+// Theater toggle: withAnimation(.easeInOut(duration: 0.25)) { theater.toggle() }
+```
+
+## 7. SF Symbols Used
+
+| Component | Symbol | Size |
+|-----------|--------|------|
+| Follow | `heart` / `heart.fill` | 14pt |
+| Subscribe | `star` / `star.fill` | 14pt |
+| Followed check | `checkmark` | 14pt |
+| Viewers | `person.fill` | 9-12pt |
+| Play / Pause | `play.fill` / `pause.fill` | 24pt |
+| Emote picker | `face.smiling` | 20pt |
+| Send | `paperplane.fill` | 20pt |
+| Share | `square.and.arrow.up` | 22pt |
+| More | `ellipsis` | 20pt |
+| Search | `magnifyingglass` | 18pt |
+| Following (tab) | `heart.fill` | 24pt |
+| Browse (tab) | `play.square.stack.fill` | 24pt |
+| Notifications (tab) | `bell.fill` | 24pt |
+| Profile (tab) | `person.crop.circle.fill` | 24pt |
+| Quality / settings | `gearshape.fill` | 22pt |
+
+## 8. Minimum iOS & Accessibility Notes
+
+- Minimum target: iOS 16 (for `.sensoryFeedback` you need iOS 17; fall back to `UIImpactFeedbackGenerator`)
+- Support Dynamic Type on stream titles, channel names, chat messages — pin tab labels, LIVE pill, and viewer pills; cap chat growth to keep throughput readable
+- VoiceOver: announce live cards as "Live: Ranked grind to Masters by Channel, Just Chatting, 12.4 thousand viewers"; expose new chat messages via an `accessibilityLiveRegion` so screen-reader users hear chat activity (allow muting it)
+- Contrast: `#ADADB8` secondary on `#0E0E10` passes WCAG AA at 13pt+; `#EFEFF1` primary is intentionally off-white and still exceeds AAA on the canvas
+- Color split must survive color-blindness: never rely on purple-vs-red alone for state — the LIVE pill always carries the word "LIVE" and the dot
+- Reduce Motion: stop the LIVE pulse (static red dot), disable card scale-up, and cross-fade the theater toggle instead of expanding