designmd-forge 1.2.0

package/dist/data/designs/ios-facebook-android.md

@@ -0,0 +1,628 @@
+# Facebook (iOS) — Jetpack Compose Implementation Guide
+
+Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file ports Facebook's visual language to **Android with Jetpack Compose (Material 3)**: a color token object, a `Typography` set, paste-ready `@Composable`s, `Modifier`s, motion, and haptics.
+
+> Why a Compose guide for an iOS-referenced app? The DESIGN.md tokens are platform-neutral. This file keeps the *visual* identity (Facebook's soft-gray canvas, white floating cards, single-blue brand, and the 7-emoji Reactions popover) while making everything idiomatic Android — `NavigationBar` instead of a UITabBar, a translucent `Surface` instead of `.regularMaterial`, `sp`/`dp` instead of `pt`.
+
+Assumes Compose BOM `2024.09+`, Kotlin `2.0+`, `minSdk 24`, Material 3, and [Coil](https://coil-kt.github.io/coil/) `2.6+` for remote avatars and post media.
+
+## 1. Color Tokens
+
+```kotlin
+// ui/theme/FacebookColors.kt
+import androidx.compose.ui.graphics.Color
+
+object FacebookColors {
+    // Canvas & Surfaces (Light)
+    val Canvas       = Color(0xFFF0F2F5)
+    val Card         = Color(0xFFFFFFFF)
+    val SurfaceTint  = Color(0xFFF7F8FA)
+    val Divider      = Color(0xFFE4E6EB)
+    val Separator    = Color(0xFFCED0D4)
+
+    // Canvas & Surfaces (Dark)
+    val DarkCanvas      = Color(0xFF18191A)
+    val DarkCard        = Color(0xFF242526)
+    val DarkSurfaceTint = Color(0xFF3A3B3C)
+    val DarkDivider     = Color(0xFF3E4042)
+
+    // Text
+    val TextPrimaryLight   = Color(0xFF050505)
+    val TextPrimaryDark    = Color(0xFFE4E6EB)
+    val TextSecondaryLight = Color(0xFF65676B)
+    val TextSecondaryDark  = Color(0xFFB0B3B8)
+    val TextTertiary       = Color(0xFF8A8D91)
+
+    // Brand
+    val Blue        = Color(0xFF1877F2)
+    val BluePressed = Color(0xFF0A5FC8)
+    val BlueLight   = Color(0xFFE7F3FF)
+
+    // Reactions
+    val LikeBlue    = Color(0xFF1877F2) // same as Blue
+    val LovePink    = Color(0xFFF3425F)
+    val CareYellow  = Color(0xFFF7B928)
+    val HahaYellow  = Color(0xFFF7B928)
+    val WowYellow   = Color(0xFFF7B928)
+    val SadYellow   = Color(0xFFF7B928)
+    val AngryOrange = Color(0xFFE9710F)
+
+    // Semantic
+    val LiveRed      = Color(0xFFFA3E3E)
+    val ErrorRed     = Color(0xFFFA383E)
+    val SuccessGreen = Color(0xFF42B72A)
+    val PhotoGreen   = Color(0xFF45BD62) // compose-bar photo picker glyph
+}
+```
+
+Wire it into a Material 3 `lightColorScheme` so ripples, dividers, and default component colors inherit the brand. Facebook is light-first; provide a `darkColorScheme` too since the app ships a true dark mode.
+
+```kotlin
+// ui/theme/Theme.kt
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.material3.darkColorScheme
+import androidx.compose.material3.lightColorScheme
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+
+private val FacebookLight = lightColorScheme(
+    primary        = FacebookColors.Blue,
+    onPrimary      = Color.White,
+    background     = FacebookColors.Canvas,        // the between-card gray
+    onBackground   = FacebookColors.TextPrimaryLight,
+    surface        = FacebookColors.Card,          // the white card
+    onSurface      = FacebookColors.TextPrimaryLight,
+    surfaceVariant = FacebookColors.SurfaceTint,
+    outline        = FacebookColors.Divider,
+    error          = FacebookColors.ErrorRed,
+)
+
+private val FacebookDark = darkColorScheme(
+    primary        = FacebookColors.Blue,
+    onPrimary      = Color.White,
+    background     = FacebookColors.DarkCanvas,
+    onBackground   = FacebookColors.TextPrimaryDark,
+    surface        = FacebookColors.DarkCard,
+    onSurface      = FacebookColors.TextPrimaryDark,
+    surfaceVariant = FacebookColors.DarkSurfaceTint,
+    outline        = FacebookColors.DarkDivider,
+    error          = FacebookColors.ErrorRed,
+)
+
+@Composable
+fun FacebookTheme(
+    dark: Boolean = isSystemInDarkTheme(),
+    content: @Composable () -> Unit,
+) = MaterialTheme(
+    colorScheme = if (dark) FacebookDark else FacebookLight,
+    typography  = FacebookTypography,
+    content     = content,
+)
+```
+
+## 2. Typography
+
+Facebook uses **SF Pro** on iOS — the Apple system font. On Android the platform default is **Roboto**, the closest free grotesque. You can ship Roboto Flex from `res/font/` for tighter weight control; the system fallback is automatic if you omit the family.
+
+```kotlin
+// ui/theme/FacebookType.kt
+import androidx.compose.material3.Typography
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.Font
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.sp
+
+val FacebookSans = FontFamily(
+    Font(R.font.roboto_regular,  FontWeight.Normal),   // 400
+    Font(R.font.roboto_medium,   FontWeight.Medium),   // 500
+    Font(R.font.roboto_semibold, FontWeight.SemiBold), // 600
+    Font(R.font.roboto_bold,     FontWeight.Bold),     // 700
+    Font(R.font.roboto_black,    FontWeight.Black),    // 900 — the "f" logo only
+)
+
+// Named ramp — mirrors DESIGN.md §3 exactly (pt → sp 1:1, line-height = size × ratio)
+object FacebookText {
+    val FLogo        = TextStyle(FacebookSans, fontWeight = FontWeight.Black,    fontSize = 22.sp, lineHeight = 22.sp)
+    val ScreenTitle  = TextStyle(FacebookSans, fontWeight = FontWeight.Bold,     fontSize = 24.sp, lineHeight = 28.sp, letterSpacing = (-0.2).sp)
+    val SectionHead  = TextStyle(FacebookSans, fontWeight = FontWeight.Bold,     fontSize = 20.sp, lineHeight = 24.sp, letterSpacing = (-0.1).sp)
+    val DisplayName  = TextStyle(FacebookSans, fontWeight = FontWeight.SemiBold, fontSize = 15.sp, lineHeight = 20.sp)
+    val PostBody     = TextStyle(FacebookSans, fontWeight = FontWeight.Normal,   fontSize = 15.sp, lineHeight = 20.sp)
+    val PostBodyBig  = TextStyle(FacebookSans, fontWeight = FontWeight.SemiBold, fontSize = 24.sp, lineHeight = 30.sp)
+    val CommentBody  = TextStyle(FacebookSans, fontWeight = FontWeight.Normal,   fontSize = 14.sp, lineHeight = 18.sp)
+    val CommentName  = TextStyle(FacebookSans, fontWeight = FontWeight.SemiBold, fontSize = 13.sp, lineHeight = 17.sp)
+    val Timestamp    = TextStyle(FacebookSans, fontWeight = FontWeight.Normal,   fontSize = 13.sp, lineHeight = 17.sp)
+    val ReactionCnt  = TextStyle(FacebookSans, fontWeight = FontWeight.Normal,   fontSize = 13.sp, lineHeight = 17.sp)
+    val ActionLabel  = TextStyle(FacebookSans, fontWeight = FontWeight.SemiBold, fontSize = 15.sp, lineHeight = 15.sp)
+    val Cta          = TextStyle(FacebookSans, fontWeight = FontWeight.SemiBold, fontSize = 17.sp, lineHeight = 17.sp)
+    val TabLabel     = TextStyle(FacebookSans, fontWeight = FontWeight.Medium,   fontSize = 11.sp, lineHeight = 11.sp)
+    val Sponsored    = TextStyle(FacebookSans, fontWeight = FontWeight.Normal,   fontSize = 13.sp, lineHeight = 17.sp)
+    val LiveBadge    = TextStyle(FacebookSans, fontWeight = FontWeight.Bold,     fontSize = 10.sp, lineHeight = 10.sp, letterSpacing = 0.5.sp)
+}
+
+// Map onto Material 3 slots so stock components inherit the brand
+val FacebookTypography = Typography(
+    headlineMedium = FacebookText.ScreenTitle,
+    headlineSmall  = FacebookText.SectionHead,
+    titleMedium    = FacebookText.DisplayName,
+    bodyMedium     = FacebookText.PostBody,
+    labelMedium    = FacebookText.ActionLabel,
+    labelSmall     = FacebookText.TabLabel,
+)
+```
+
+## 3. Signature Components
+
+### Post Card (the feed unit)
+
+```kotlin
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.*
+import androidx.compose.runtime.*
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.dp
+import coil.compose.AsyncImage
+
+@Composable
+fun FBPostCard(
+    displayName: String,
+    timestamp: String,
+    audience: String,          // "Public", "Friends"
+    avatarUrl: String,
+    body: String,
+    mediaUrl: String?,
+    modifier: Modifier = Modifier,
+) {
+    var userReaction by remember { mutableStateOf<FBReaction?>(null) }
+    var showReactions by remember { mutableStateOf(false) }
+
+    Column(
+        modifier = modifier
+            .fillMaxWidth()
+            .padding(horizontal = 8.dp, vertical = 4.dp)
+            .clip(RoundedCornerShape(8.dp))
+            .background(MaterialTheme.colorScheme.surface),
+    ) {
+        // Header
+        Row(
+            Modifier.fillMaxWidth().padding(12.dp),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(8.dp),
+        ) {
+            AsyncImage(
+                model = avatarUrl,
+                contentDescription = null,
+                modifier = Modifier.size(40.dp).clip(CircleShape),
+            )
+            Column(Modifier.weight(1f), verticalArrangement = Arrangement.spacedBy(2.dp)) {
+                Text(displayName, style = FacebookText.DisplayName, color = FacebookColors.TextPrimaryLight)
+                Row(verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(4.dp)) {
+                    Text(timestamp, style = FacebookText.Timestamp, color = FacebookColors.TextSecondaryLight)
+                    Text("·", color = FacebookColors.TextSecondaryLight)
+                    Icon(Icons.Filled.Public, null, tint = FacebookColors.TextSecondaryLight, modifier = Modifier.size(12.dp))
+                    Text(audience, style = FacebookText.Timestamp, color = FacebookColors.TextSecondaryLight)
+                }
+            }
+            Icon(
+                Icons.Filled.MoreHoriz,
+                contentDescription = "More options",
+                tint = FacebookColors.TextSecondaryLight,
+                modifier = Modifier.size(20.dp),
+            )
+        }
+
+        // Body — full card width, NOT indented after avatar
+        Text(
+            body,
+            style = FacebookText.PostBody,
+            color = FacebookColors.TextPrimaryLight,
+            modifier = Modifier.padding(horizontal = 12.dp).padding(bottom = 12.dp),
+        )
+
+        // Media — edge-to-edge inside card (card already clips corners)
+        if (mediaUrl != null) {
+            AsyncImage(
+                model = mediaUrl,
+                contentDescription = null,
+                modifier = Modifier.fillMaxWidth(),
+                contentScale = ContentScale.FillWidth,
+            )
+        }
+
+        // Reaction summary
+        Row(
+            Modifier.fillMaxWidth().padding(horizontal = 12.dp, vertical = 8.dp),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(6.dp),
+        ) {
+            Box {
+                Row(horizontalArrangement = Arrangement.spacedBy((-4).dp)) {
+                    ReactionDot(FacebookColors.LikeBlue, Icons.Filled.ThumbUp)
+                    ReactionDot(FacebookColors.LovePink, Icons.Filled.Favorite)
+                }
+            }
+            Text("You, Sarah, and 45 others", style = FacebookText.ReactionCnt, color = FacebookColors.TextSecondaryLight)
+            Spacer(Modifier.weight(1f))
+            Text("12 comments · 3 shares", style = FacebookText.ReactionCnt, color = FacebookColors.TextSecondaryLight)
+        }
+
+        HorizontalDivider(color = FacebookColors.Divider, thickness = 1.dp)
+
+        // Action row — Like / Comment / Share
+        Box {
+            Row(Modifier.fillMaxWidth().padding(vertical = 4.dp)) {
+                FBActionButton(
+                    icon = userReaction?.icon ?: Icons.Outlined.ThumbUp,
+                    label = userReaction?.label ?: "Like",
+                    color = userReaction?.color ?: FacebookColors.TextSecondaryLight,
+                    modifier = Modifier.weight(1f),
+                    onTap = { userReaction = if (userReaction == null) FBReaction.Like else null },
+                    onLongPress = { showReactions = true },
+                )
+                FBActionButton(Icons.Outlined.ChatBubbleOutline, "Comment", FacebookColors.TextSecondaryLight, Modifier.weight(1f), {}, {})
+                FBActionButton(Icons.Outlined.Share, "Share", FacebookColors.TextSecondaryLight, Modifier.weight(1f), {}, {})
+            }
+            if (showReactions) {
+                ReactionsPopover(
+                    onSelect = { userReaction = it; showReactions = false },
+                    modifier = Modifier.align(Alignment.TopCenter).offset(y = (-56).dp),
+                )
+            }
+        }
+    }
+}
+
+@Composable
+private fun ReactionDot(color: Color, icon: androidx.compose.ui.graphics.vector.ImageVector) {
+    Box(Modifier.size(18.dp).clip(CircleShape).background(color), contentAlignment = Alignment.Center) {
+        Icon(icon, null, tint = Color.White, modifier = Modifier.size(9.dp))
+    }
+}
+```
+
+### Action Button (Like / Comment / Share)
+
+```kotlin
+import androidx.compose.foundation.gestures.detectTapGestures
+import androidx.compose.ui.hapticfeedback.HapticFeedbackType
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.platform.LocalHapticFeedback
+
+@Composable
+fun FBActionButton(
+    icon: androidx.compose.ui.graphics.vector.ImageVector,
+    label: String,
+    color: Color,
+    modifier: Modifier = Modifier,
+    onTap: () -> Unit,
+    onLongPress: () -> Unit,
+) {
+    val haptics = LocalHapticFeedback.current
+    Row(
+        modifier = modifier
+            .heightIn(min = 40.dp)
+            .pointerInput(Unit) {
+                detectTapGestures(
+                    onTap = {
+                        haptics.performHapticFeedback(HapticFeedbackType.LongPress) // ≈ iOS .soft impact
+                        onTap()
+                    },
+                    onLongPress = {
+                        haptics.performHapticFeedback(HapticFeedbackType.LongPress)
+                        onLongPress()
+                    },
+                )
+            },
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(6.dp, Alignment.CenterHorizontally),
+    ) {
+        Icon(icon, contentDescription = null, tint = color, modifier = Modifier.size(20.dp))
+        Text(label, style = FacebookText.ActionLabel, color = color)
+    }
+}
+```
+
+### Reactions model + popover
+
+```kotlin
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.*
+import androidx.compose.material.icons.outlined.*
+
+enum class FBReaction(
+    val label: String,
+    val icon: androidx.compose.ui.graphics.vector.ImageVector,
+    val color: Color,
+) {
+    Like ("Like",  Icons.Filled.ThumbUp,        FacebookColors.LikeBlue),
+    Love ("Love",  Icons.Filled.Favorite,       FacebookColors.LovePink),
+    Care ("Care",  Icons.Filled.VolunteerActivism, FacebookColors.CareYellow),
+    Haha ("Haha",  Icons.Filled.SentimentVerySatisfied, FacebookColors.HahaYellow),
+    Wow  ("Wow",   Icons.Filled.SentimentSatisfied,     FacebookColors.WowYellow),
+    Sad  ("Sad",   Icons.Filled.SentimentDissatisfied,  FacebookColors.SadYellow),
+    Angry("Angry", Icons.Filled.SentimentVeryDissatisfied, FacebookColors.AngryOrange),
+}
+
+@Composable
+fun ReactionsPopover(
+    onSelect: (FBReaction) -> Unit,
+    modifier: Modifier = Modifier,
+    hoveredIndex: Int? = null,
+) {
+    Surface(
+        modifier = modifier,
+        shape = CircleShape,                       // 500pt-radius pill
+        color = MaterialTheme.colorScheme.surface,
+        shadowElevation = 16.dp,                   // rgba(0,0,0,0.2) 0 4px 16px
+    ) {
+        Row(
+            Modifier.padding(horizontal = 8.dp, vertical = 6.dp),
+            horizontalArrangement = Arrangement.spacedBy(4.dp),
+        ) {
+            FBReaction.entries.forEachIndexed { i, reaction ->
+                val scale by animateFloatAsState(
+                    if (hoveredIndex == i) 1.3f else 1f,
+                    spring(dampingRatio = 0.55f, stiffness = 700f),
+                    label = "react$i",
+                )
+                Box(
+                    Modifier
+                        .size(48.dp)                // 48dp tap area, 28dp glyph
+                        .clickable(
+                            interactionSource = remember { MutableInteractionSource() },
+                            indication = null,
+                        ) { onSelect(reaction) },
+                    contentAlignment = Alignment.Center,
+                ) {
+                    Icon(
+                        reaction.icon,
+                        contentDescription = "${reaction.label} reaction",
+                        tint = reaction.color,
+                        modifier = Modifier.size(28.dp).scale(scale),
+                    )
+                }
+            }
+        }
+    }
+}
+```
+
+### Top Nav Bar (with blue "f" logo)
+
+Android has no live blur, so the bar is an opaque card surface with a hairline divider — Facebook's iOS top bar is opaque too (no longer the historical blue bar).
+
+```kotlin
+@Composable
+fun FBTopNav() {
+    Surface(color = MaterialTheme.colorScheme.surface) {
+        Column {
+            Row(
+                Modifier.fillMaxWidth().height(56.dp).padding(horizontal = 16.dp),
+                verticalAlignment = Alignment.CenterVertically,
+            ) {
+                // Blue "f" logo in a rounded square
+                Box(
+                    Modifier.size(36.dp).clip(RoundedCornerShape(8.dp)).background(FacebookColors.Blue),
+                    contentAlignment = Alignment.Center,
+                ) {
+                    Text("f", style = FacebookText.FLogo, color = Color.White, modifier = Modifier.offset(y = (-1).dp))
+                }
+                Spacer(Modifier.weight(1f))
+                Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
+                    FBCircleIconButton(Icons.Filled.Search, "Search")
+                    FBCircleIconButton(Icons.AutoMirrored.Filled.Message, "Messenger")
+                }
+            }
+            HorizontalDivider(color = FacebookColors.Divider, thickness = 1.dp)
+        }
+    }
+}
+
+@Composable
+fun FBCircleIconButton(icon: androidx.compose.ui.graphics.vector.ImageVector, label: String) {
+    Box(
+        Modifier.size(36.dp).clip(CircleShape).background(FacebookColors.Divider)
+            .clickable { },
+        contentAlignment = Alignment.Center,
+    ) {
+        Icon(icon, contentDescription = label, tint = FacebookColors.TextPrimaryLight, modifier = Modifier.size(18.dp))
+    }
+}
+```
+
+## 4. Facebook-Specific Feature: Reactions Popover with Drag-Select
+
+The signature Facebook micro-interaction. Long-press the Like button → a floating pill of 7 emoji pops in → the user drags horizontally; the hovered icon scales to 1.3 with a `TextButton`-style tooltip; release selects that reaction. Drive everything from one `pointerInput` so the long-press and the drag share a gesture stream.
+
+```kotlin
+import androidx.compose.foundation.gestures.awaitEachGesture
+import androidx.compose.foundation.gestures.awaitFirstDown
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.input.pointer.changedToUp
+import androidx.compose.ui.layout.onGloballyPositioned
+import kotlinx.coroutines.delay
+
+@Composable
+fun ReactionsHost(
+    onReaction: (FBReaction) -> Unit,
+    content: @Composable () -> Unit,
+) {
+    var show by remember { mutableStateOf(false) }
+    var hovered by remember { mutableStateOf<Int?>(null) }
+    var rowWidthPx by remember { mutableStateOf(1) }
+    val haptics = LocalHapticFeedback.current
+    val slot = FBReaction.entries.size
+
+    Box {
+        Box(
+            Modifier.pointerInput(Unit) {
+                awaitEachGesture {
+                    val down = awaitFirstDown()
+                    // Long-press threshold ≈ 400ms before the popover opens
+                    val longPress = try {
+                        withTimeout(400) { waitForUpOrCancellation(); false }
+                    } catch (_: PointerEventTimeoutCancellationException) { true }
+                    if (!longPress) return@awaitEachGesture
+
+                    show = true
+                    haptics.performHapticFeedback(HapticFeedbackType.LongPress) // .impact(.light)
+                    // Track the finger across the 7 slots
+                    do {
+                        val event = awaitPointerEvent()
+                        val x = event.changes.first().position.x
+                        val idx = (x / (rowWidthPx / slot)).toInt().coerceIn(0, slot - 1)
+                        if (idx != hovered) {
+                            hovered = idx
+                            haptics.performHapticFeedback(HapticFeedbackType.TextHandleMove) // .selection
+                        }
+                    } while (event.changes.none { it.changedToUp() })
+
+                    hovered?.let {
+                        onReaction(FBReaction.entries[it])
+                        haptics.performHapticFeedback(HapticFeedbackType.LongPress)          // .impact(.medium)
+                    }
+                    show = false
+                    hovered = null
+                }
+            },
+        ) { content() }
+
+        if (show) {
+            ReactionsPopover(
+                onSelect = { onReaction(it); show = false },
+                hoveredIndex = hovered,
+                modifier = Modifier
+                    .align(Alignment.TopCenter)
+                    .offset(y = (-56).dp)
+                    .onGloballyPositioned { rowWidthPx = it.size.width },
+            )
+        }
+    }
+}
+```
+
+Wrap the Like button: `ReactionsHost(onReaction = { vm.setReaction(it) }) { FBActionButton(...) }`. The popover entry uses a `scale 0.5 → 1.0 + fade` (see §6); each emoji springs to 1.3 on hover via the `animateFloatAsState` already in `ReactionsPopover`.
+
+## 5. Bottom Navigation (Tab Bar)
+
+Use Material 3 `NavigationBar`. Facebook shows a label under **every** icon — not icon-only. The iOS bar is an opaque card; Android has no live blur, so use the solid card surface with a top hairline. Active tint is **Facebook Blue**.
+
+```kotlin
+@Composable
+fun FBBottomBar(selected: Int, onSelect: (Int) -> Unit, notifCount: Int = 0) {
+    Column {
+        HorizontalDivider(color = FacebookColors.Divider, thickness = 1.dp)
+        NavigationBar(
+            containerColor = MaterialTheme.colorScheme.surface,
+            tonalElevation = 0.dp,
+        ) {
+            val items = listOf(
+                "Home"          to Icons.Filled.Home,
+                "Video"         to Icons.Filled.SmartDisplay,
+                "Marketplace"   to Icons.Filled.Storefront,
+                "Notifications" to Icons.Filled.Notifications,
+                "Menu"          to Icons.Filled.Menu,
+            )
+            items.forEachIndexed { i, (label, icon) ->
+                NavigationBarItem(
+                    selected = selected == i,
+                    onClick = { onSelect(i) },
+                    icon = {
+                        if (label == "Notifications" && notifCount > 0) {
+                            BadgedBox(badge = { Badge(containerColor = FacebookColors.ErrorRed) { Text("$notifCount") } }) {
+                                Icon(icon, contentDescription = label, modifier = Modifier.size(26.dp))
+                            }
+                        } else {
+                            Icon(icon, contentDescription = label, modifier = Modifier.size(26.dp))
+                        }
+                    },
+                    label = { Text(label, style = FacebookText.TabLabel) },
+                    alwaysShowLabel = true, // Facebook always shows labels
+                    colors = NavigationBarItemDefaults.colors(
+                        selectedIconColor   = FacebookColors.Blue,
+                        selectedTextColor   = FacebookColors.Blue,
+                        unselectedIconColor = FacebookColors.TextSecondaryLight,
+                        unselectedTextColor = FacebookColors.TextSecondaryLight,
+                        indicatorColor      = Color.Transparent, // no Material pill — Facebook has none
+                    ),
+                )
+            }
+        }
+    }
+}
+```
+
+## 6. Motion
+
+| Moment | Compose recipe |
+|--------|----------------|
+| Like tap | `Animatable` keyframes 0.9 → 1.15 → 1.0 over 300ms; fill turns `#1877F2`; `HapticFeedbackType.LongPress` (≈ `.impact(.light)`) |
+| Reactions open | `AnimatedVisibility` `scaleIn(initialScale = 0.5f) + fadeIn`, 400ms; each emoji springs to 1.3 on hover |
+| Reactions drag-select | `HapticFeedbackType.TextHandleMove` on each hover; selected icon bounces 1.5 → 1.0 + `LongPress` haptic |
+| Card tap | background darken 3% (`Color.Black.copy(alpha = 0.03f)` overlay) for 150ms on press |
+| Stories ring tap | ring `scale 1.0 → 0.9 → 1.0` then open viewer with a crossfade |
+| Reaction swap into Like slot | `AnimatedContent` with `fadeIn() togetherWith fadeOut()`, 200ms |
+
+```kotlin
+// Like-tap bounce on the thumbs-up
+@Composable
+fun LikeThumb(liked: Boolean) {
+    val scale = remember { Animatable(1f) }
+    LaunchedEffect(liked) {
+        if (liked) {
+            scale.animateTo(1.15f, tween(150))
+            scale.animateTo(1f, spring(dampingRatio = 0.5f, stiffness = 500f))
+        }
+    }
+    Icon(
+        if (liked) Icons.Filled.ThumbUp else Icons.Outlined.ThumbUp,
+        contentDescription = if (liked) "Liked" else "Like",
+        tint = if (liked) FacebookColors.Blue else FacebookColors.TextSecondaryLight,
+        modifier = Modifier.size(20.dp).scale(scale.value),
+    )
+}
+```
+
+Haptics: prefer `LocalHapticFeedback`. `HapticFeedbackType.LongPress` approximates iOS impact; `HapticFeedbackType.TextHandleMove` approximates `.selection`. For finer control use `LocalView.current.performHapticFeedback(HapticFeedbackConstants.CONTEXT_CLICK)` (API 30+) or a `Vibrator` `VibrationEffect.createOneShot(10, …)`.
+
+## 7. Icons
+
+Facebook's reaction emoji are illustration-style and should ship as **vector drawables** (`ImageVector.vectorResource(R.drawable.…)`) for true parity; the table below maps the rest onto `androidx.compose.material:material-icons-extended`.
+
+| Purpose | SF Symbol (iOS) | Material Icon (Compose) |
+|---------|-----------------|--------------------------|
+| Like (outline / fill) | `hand.thumbsup` / `.fill` | `Icons.Outlined.ThumbUp` / `Icons.Filled.ThumbUp` |
+| Love | `heart.fill` | `Icons.Filled.Favorite` |
+| Care | `hands.sparkles.fill` | `Icons.Filled.VolunteerActivism` |
+| Haha / Wow | `face.smiling.fill` / `mouth.fill` | `Icons.Filled.SentimentVerySatisfied` / `SentimentSatisfied` |
+| Sad / Angry | `face.dashed.fill` / `flame.fill` | `Icons.Filled.SentimentDissatisfied` / `SentimentVeryDissatisfied` |
+| Comment | `bubble.left` | `Icons.Outlined.ChatBubbleOutline` |
+| Share | `arrowshape.turn.up.right` | `Icons.Outlined.Share` |
+| Overflow | `ellipsis` | `Icons.Filled.MoreHoriz` |
+| Search | `magnifyingglass` | `Icons.Filled.Search` |
+| Messenger | `ellipsis.message.fill` | `Icons.AutoMirrored.Filled.Message` |
+| Home tab | `house.fill` / `house` | `Icons.Filled.Home` |
+| Video tab | `play.rectangle.fill` | `Icons.Filled.SmartDisplay` |
+| Marketplace tab | `cart.fill` | `Icons.Filled.Storefront` |
+| Notifications tab | `bell.fill` | `Icons.Filled.Notifications` |
+| Menu tab | `line.3.horizontal` | `Icons.Filled.Menu` |
+| Photo picker | `photo.on.rectangle` | `Icons.Filled.Photo` |
+| Live video | `dot.radiowaves.left.and.right` | `Icons.Filled.SensorsOff` (or custom LIVE badge) |
+| Audience (Public) | `globe.americas.fill` | `Icons.Filled.Public` |
+| Add Friend | `person.badge.plus` | `Icons.Filled.PersonAddAlt1` |
+
+## 8. Minimum SDK & Accessibility Notes
+
+- **minSdk 24** (Compose floor is 21; modern motion is comfortable at 24). `compileSdk 34+`, Compose BOM `2024.09+`, Kotlin `2.0+`.
+- **Edge-to-edge**: call `enableEdgeToEdge()` in the `Activity`; the light canvas wants dark system-bar icons (`WindowCompat` light status bar). Apply `Scaffold` insets so the bottom bar clears the gesture nav and the top nav clears the status bar / camera cutout (the `f` logo stays left of the cutout).
+- **Font scaling**: `sp` honors the user's font scale automatically — keep it on post body, comment body, names, headers. Pin layout-sensitive text (the 11sp tab labels, the 13sp reaction count, the 10sp `LIVE` badge) by deriving size from `dp` or wrapping in `CompositionLocalProvider(LocalDensity provides Density(density, fontScale = 1f))`.
+- **TalkBack**: make each post card its own container with `Modifier.semantics(mergeDescendants = true)` so the feed reads post-by-post; mark the trailing overflow and the action row as separate buttons. Announce reactions as "Liked by you and 45 others, double-tap to see breakdown".
+- **Reactions popover reachability**: long-press is not discoverable for switch/TalkBack users — add a `Modifier.semantics { customActions = listOf(CustomAccessibilityAction("Choose reaction") { … }) }` on the Like button that opens the popover, and label each emoji as a button ("Love reaction").
+- **Touch targets**: Material guidance is 48.dp minimum. The reaction icons already use a 48.dp box; ensure the 20.dp action-row glyphs and the 12.dp audience icon sit inside ≥48.dp rows (the action buttons are 40.dp tall — bump to 48.dp for strict compliance).
+- **Contrast**: `#050505` on `#FFFFFF` exceeds WCAG AAA. Validate `#65676B` secondary gray on `#FFFFFF` (passes AA at 13sp+) and especially `#8A8D91` "Sponsored" tertiary on white — bump toward `#6B6E73` if your build targets strict AA.
+- **Dynamic color**: do **not** enable Material You `dynamicColorScheme()` — Facebook's brand requires the fixed `#1877F2` blue, the soft-gray canvas, and the seven fixed reaction colors regardless of wallpaper.