designmd-forge 1.2.0

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

@@ -0,0 +1,568 @@
+# WhatsApp (iOS) — Jetpack Compose Implementation Guide
+
+Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file ports WhatsApp'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 (WhatsApp's mint-leaf outgoing bubble, single-green verb color, blue double-check read receipts, doodle wallpaper) while making everything idiomatic Android — `NavigationBar` instead of a UITabBar, a translucent `Surface` instead of `.regularMaterial` blur, `sp`/`dp` instead of `pt`. The app is light-first with a blue-black dark mode; both are wired below.
+
+Assumes Compose BOM `2024.09+`, Kotlin `2.0+`, `minSdk 24`, Material 3, and [Coil](https://coil-kt.github.io/coil/) `2.6+` for contact avatars and media. No color extraction — WhatsApp's palette is fixed brand chrome.
+
+## 1. Color Tokens
+
+```kotlin
+// ui/theme/WhatsAppColors.kt
+import androidx.compose.ui.graphics.Color
+
+object WhatsAppColors {
+    // Brand
+    val Green        = Color(0xFF25D366)
+    val GreenPressed = Color(0xFF1EBE5D)
+    val Teal         = Color(0xFF075E54)
+    val MidTeal      = Color(0xFF128C7E)
+    val DarkTeal     = Color(0xFF054D44)
+
+    // Chat bubbles
+    val OutgoingLight = Color(0xFFD9FDD3) // the iconic mint-leaf
+    val OutgoingDark  = Color(0xFF005C4B)
+    val IncomingLight = Color(0xFFFFFFFF)
+    val IncomingDark  = Color(0xFF1F2C34)
+    val ReplyStrip    = Color(0xFF06CF9C)
+
+    // Canvas & surfaces
+    val WallpaperLight = Color(0xFFECE5DD) // cream doodle canvas
+    val WallpaperDark  = Color(0xFF0B141A)
+    val CanvasLight    = Color(0xFFFFFFFF)
+    val CanvasDark     = Color(0xFF111B21) // blue-black, NOT pure black
+    val Surface1Light  = Color(0xFFF7F8FA)
+    val Surface1Dark   = Color(0xFF202C33)
+    val Surface2Dark   = Color(0xFF2A3942)
+    val DividerLight   = Color(0xFFE9EDEF)
+    val DividerDark    = Color(0xFF222D34)
+    val NavTintLight   = Color(0xFFF0F2F5) // chat-screen top nav / search pill
+
+    // Text
+    val TextPrimary       = Color(0xFF111B21)
+    val TextSecondary     = Color(0xFF667781)
+    val TextTertiary      = Color(0xFF8696A0)
+    val TextPrimaryDark   = Color(0xFFE9EDEF)
+    val TextSecondaryDark = Color(0xFF8696A0)
+
+    // Semantic
+    val ReadBlue   = Color(0xFF53BDEB) // double blue ticks — most load-bearing color
+    val SentGray   = Color(0xFF8696A0)
+    val ErrorRed   = Color(0xFFF15C6D)
+    val EncBanner  = Color(0xFFFFF5C4) // end-to-end encryption pill (light)
+}
+```
+
+WhatsApp is light-first with a true dark mode. Provide both schemes; brand greens keep the same hex in either. Active tab tint is brand **green** (unlike iOS Messages), so `primary` carries it.
+
+```kotlin
+// ui/theme/Theme.kt
+import androidx.compose.material3.darkColorScheme
+import androidx.compose.material3.lightColorScheme
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.foundation.isSystemInDarkTheme
+
+private val WhatsAppLight = lightColorScheme(
+    primary        = WhatsAppColors.Green,
+    onPrimary      = Color.White,
+    background     = WhatsAppColors.CanvasLight,
+    onBackground   = WhatsAppColors.TextPrimary,
+    surface        = WhatsAppColors.CanvasLight,
+    onSurface      = WhatsAppColors.TextPrimary,
+    surfaceVariant = WhatsAppColors.Surface1Light,
+    outline        = WhatsAppColors.DividerLight,
+    error          = WhatsAppColors.ErrorRed,
+)
+
+private val WhatsAppDark = darkColorScheme(
+    primary        = WhatsAppColors.Green,
+    onPrimary      = Color.White,
+    background      = WhatsAppColors.CanvasDark,
+    onBackground   = WhatsAppColors.TextPrimaryDark,
+    surface        = WhatsAppColors.Surface1Dark,
+    onSurface      = WhatsAppColors.TextPrimaryDark,
+    surfaceVariant = WhatsAppColors.Surface2Dark,
+    outline        = WhatsAppColors.DividerDark,
+    error          = WhatsAppColors.ErrorRed,
+)
+
+@Composable
+fun WhatsAppTheme(
+    darkTheme: Boolean = isSystemInDarkTheme(),
+    content: @Composable () -> Unit,
+) = MaterialTheme(
+    colorScheme = if (darkTheme) WhatsAppDark else WhatsAppLight,
+    typography = WhatsAppTypography,
+    content = content,
+)
+```
+
+## 2. Typography
+
+WhatsApp ships **no** proprietary typeface — it defers entirely to the system font. On Android that is **Roboto** (`FontFamily.Default`), the closest analog to iOS's SF Pro. Do not bundle a custom font; the whole point of WhatsApp's type system is OS deference and full font-scale support.
+
+```kotlin
+// ui/theme/WhatsAppType.kt
+import androidx.compose.material3.Typography
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.sp
+
+// WhatsApp uses the system face — Roboto on Android (SF Pro analog).
+private val WASans = FontFamily.Default
+
+// Named ramp — mirrors DESIGN.md §3 exactly (pt → sp 1:1)
+object WhatsAppText {
+    val LargeTitle      = TextStyle(WASans, fontWeight = FontWeight.Bold,     fontSize = 34.sp, lineHeight = 38.sp, letterSpacing = 0.37.sp)
+    val ScreenTitle     = TextStyle(WASans, fontWeight = FontWeight.SemiBold, fontSize = 17.sp, lineHeight = 20.sp, letterSpacing = (-0.4).sp)
+    val ContactName     = TextStyle(WASans, fontWeight = FontWeight.SemiBold, fontSize = 17.sp, lineHeight = 21.sp, letterSpacing = (-0.4).sp)
+    val MessagePreview  = TextStyle(WASans, fontWeight = FontWeight.Normal,   fontSize = 15.sp, lineHeight = 20.sp, letterSpacing = (-0.2).sp)
+    val BubbleBody      = TextStyle(WASans, fontWeight = FontWeight.Normal,   fontSize = 17.sp, lineHeight = 22.sp, letterSpacing = (-0.4).sp)
+    val GroupSender     = TextStyle(WASans, fontWeight = FontWeight.SemiBold, fontSize = 13.sp, lineHeight = 16.sp, letterSpacing = (-0.1).sp)
+    val TimestampList   = TextStyle(WASans, fontWeight = FontWeight.Normal,   fontSize = 12.sp, lineHeight = 14.sp)
+    val TimestampBubble = TextStyle(WASans, fontWeight = FontWeight.Normal,   fontSize = 11.sp, lineHeight = 11.sp)
+    val SectionHeader   = TextStyle(WASans, fontWeight = FontWeight.SemiBold, fontSize = 13.sp, lineHeight = 16.sp, letterSpacing = (-0.1).sp)
+    val SystemMessage   = TextStyle(WASans, fontWeight = FontWeight.Medium,   fontSize = 12.sp, lineHeight = 16.sp)
+    val TabLabel        = TextStyle(WASans, fontWeight = FontWeight.Medium,   fontSize = 10.sp, lineHeight = 10.sp, letterSpacing = 0.1.sp)
+    val Button          = TextStyle(WASans, fontWeight = FontWeight.SemiBold, fontSize = 17.sp, lineHeight = 17.sp, letterSpacing = (-0.4).sp)
+    val InputPlaceholder = TextStyle(WASans, fontWeight = FontWeight.Normal,  fontSize = 16.sp, lineHeight = 21.sp, letterSpacing = (-0.3).sp)
+    val SettingsRow     = TextStyle(WASans, fontWeight = FontWeight.Normal,   fontSize = 17.sp, lineHeight = 21.sp, letterSpacing = (-0.4).sp)
+    val SettingsDetail  = TextStyle(WASans, fontWeight = FontWeight.Normal,   fontSize = 15.sp, lineHeight = 20.sp, letterSpacing = (-0.2).sp)
+}
+
+// Map onto Material 3 slots so stock components inherit the ramp
+val WhatsAppTypography = Typography(
+    headlineLarge = WhatsAppText.LargeTitle,
+    titleLarge    = WhatsAppText.ScreenTitle,
+    titleMedium   = WhatsAppText.ContactName,
+    bodyLarge     = WhatsAppText.BubbleBody,
+    bodyMedium    = WhatsAppText.MessagePreview,
+    labelSmall    = WhatsAppText.TabLabel,
+)
+```
+
+## 3. Signature Components
+
+### Send / Mic Morphing Button
+
+```kotlin
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.animation.core.spring
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.collectIsPressedAsState
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Mic
+import androidx.compose.material.icons.filled.Send
+import androidx.compose.material3.Icon
+import androidx.compose.runtime.*
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.scale
+import androidx.compose.ui.hapticfeedback.HapticFeedbackType
+import androidx.compose.ui.platform.LocalHapticFeedback
+import androidx.compose.foundation.layout.Box
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun WASendButton(
+    hasText: Boolean,
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    val interaction = remember { MutableInteractionSource() }
+    val pressed by interaction.collectIsPressedAsState()
+    val scale by animateFloatAsState(
+        targetValue = if (pressed) 0.92f else 1f,
+        animationSpec = spring(dampingRatio = 0.7f, stiffness = 600f),
+        label = "sendScale",
+    )
+    val haptics = LocalHapticFeedback.current
+
+    Box(
+        modifier = modifier
+            .size(36.dp)
+            .scale(scale)
+            .clip(CircleShape)
+            .background(if (pressed) WhatsAppColors.GreenPressed else WhatsAppColors.Green)
+            .clickable(interaction, indication = null) {
+                haptics.performHapticFeedback(HapticFeedbackType.LongPress) // ~iOS soft impact
+                onClick()
+            },
+        contentAlignment = Alignment.Center,
+    ) {
+        // No SymbolEffect on Android — crossfade the glyph instead (see §6)
+        Icon(
+            imageVector = if (hasText) Icons.Filled.Send else Icons.Filled.Mic,
+            contentDescription = if (hasText) "Send message" else "Record voice message",
+            tint = Color.White,
+            modifier = Modifier.size(18.dp),
+        )
+    }
+}
+```
+
+### Chat Bubble (Outgoing — asymmetric tail + tick row)
+
+Compose has no `UnevenRoundedRectangle`; use `RoundedCornerShape` with the **bottom-end** corner zeroed for the outgoing tail nub.
+
+```kotlin
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Text
+import androidx.compose.ui.text.style.TextAlign
+
+enum class ReadState { Sent, Delivered, Read }
+
+@Composable
+fun WAOutgoingBubble(
+    text: String,
+    timestamp: String,
+    readState: ReadState,
+    modifier: Modifier = Modifier,
+) {
+    Row(modifier.fillMaxWidth().padding(end = 8.dp)) {
+        Spacer(Modifier.weight(0.2f)) // 80% max bubble width
+        Column(
+            modifier = Modifier
+                .weight(0.8f, fill = false)
+                .clip(
+                    RoundedCornerShape(
+                        topStart = 12.dp, topEnd = 12.dp,
+                        bottomStart = 12.dp, bottomEnd = 0.dp, // tail nub
+                    )
+                )
+                .background(WhatsAppColors.OutgoingLight)
+                .padding(horizontal = 12.dp, vertical = 8.dp),
+            horizontalAlignment = Alignment.End,
+        ) {
+            Text(text, style = WhatsAppText.BubbleBody, color = WhatsAppColors.TextPrimary)
+            Spacer(Modifier.height(2.dp))
+            Row(verticalAlignment = Alignment.CenterVertically) {
+                Text(
+                    timestamp,
+                    style = WhatsAppText.TimestampBubble,
+                    color = WhatsAppColors.TextSecondary,
+                )
+                Spacer(Modifier.width(3.dp))
+                TickRow(readState)
+            }
+        }
+    }
+}
+
+@Composable
+private fun TickRow(state: ReadState) {
+    val tint = if (state == ReadState.Read) WhatsAppColors.ReadBlue else WhatsAppColors.SentGray
+    val count = if (state == ReadState.Sent) 1 else 2
+    // Overlap the two checks by -4.dp so they read as one glyph
+    Row(horizontalArrangement = Arrangement.spacedBy((-4).dp)) {
+        repeat(count) {
+            Icon(
+                imageVector = Icons.Filled.Done,
+                contentDescription = null,
+                tint = tint,
+                modifier = Modifier.size(13.dp),
+            )
+        }
+    }
+}
+```
+
+### Chat List Row (with status ring)
+
+```kotlin
+import coil.compose.AsyncImage
+import androidx.compose.foundation.border
+import androidx.compose.ui.text.style.TextOverflow
+
+@Composable
+fun WAChatListRow(
+    avatarUrl: String,
+    name: String,
+    preview: String,
+    timestamp: String,
+    unreadCount: Int,
+    hasStatusRing: Boolean,
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    val interaction = remember { MutableInteractionSource() }
+    val pressed by interaction.collectIsPressedAsState()
+
+    Row(
+        modifier = modifier
+            .fillMaxWidth()
+            .height(72.dp)
+            .background(if (pressed) WhatsAppColors.Surface1Light else Color.Transparent)
+            .clickable(interaction, indication = null, onClick = onClick)
+            .padding(horizontal = 16.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(12.dp),
+    ) {
+        Box(contentAlignment = Alignment.Center) {
+            if (hasStatusRing) {
+                Box(
+                    Modifier
+                        .size(54.dp)
+                        .border(2.5.dp, WhatsAppColors.Green, CircleShape)
+                )
+            }
+            AsyncImage(
+                model = avatarUrl,
+                contentDescription = null,
+                modifier = Modifier.size(48.dp).clip(CircleShape),
+            )
+        }
+        Column(Modifier.weight(1f), verticalArrangement = Arrangement.spacedBy(3.dp)) {
+            Text(name, style = WhatsAppText.ContactName, color = WhatsAppColors.TextPrimary, maxLines = 1, overflow = TextOverflow.Ellipsis)
+            Text(preview, style = WhatsAppText.MessagePreview, color = WhatsAppColors.TextSecondary, maxLines = 1, overflow = TextOverflow.Ellipsis)
+        }
+        Column(horizontalAlignment = Alignment.End, verticalArrangement = Arrangement.spacedBy(4.dp)) {
+            Text(
+                timestamp,
+                style = WhatsAppText.TimestampList,
+                color = if (unreadCount > 0) WhatsAppColors.Green else WhatsAppColors.TextSecondary,
+            )
+            if (unreadCount > 0) {
+                Box(
+                    Modifier
+                        .clip(CircleShape)
+                        .background(WhatsAppColors.Green)
+                        .padding(horizontal = 7.dp, vertical = 2.dp),
+                ) {
+                    Text("$unreadCount", style = WhatsAppText.TimestampList, color = Color.White)
+                }
+            }
+        }
+    }
+}
+```
+
+## 4. Voice Waveform Bubble + Blue Double-Check Read Receipts
+
+WhatsApp's two defining interactive systems. The **voice-message waveform** fills its bars green left-to-right synced to playback, with a soft haptic tick as playback crosses each amplitude peak. The **read receipt** crossfades the overlapping checkmarks gray → blue when the recipient opens the message.
+
+```kotlin
+import androidx.compose.animation.core.LinearEasing
+import androidx.compose.animation.core.tween
+import androidx.compose.material.icons.filled.Pause
+import androidx.compose.material.icons.filled.PlayArrow
+import androidx.compose.runtime.snapshotFlow
+import kotlinx.coroutines.delay
+import kotlin.math.max
+
+@Composable
+fun WAVoiceWaveformBubble(
+    duration: String,
+    amplitudes: List<Float>, // normalized 0f..1f, ~48 samples
+    modifier: Modifier = Modifier,
+) {
+    var isPlaying by remember { mutableStateOf(false) }
+    var progress by remember { mutableFloatStateOf(0f) } // 0f..1f played fraction
+    val haptics = LocalHapticFeedback.current
+
+    // Advance playback while playing; soft tick on amplitude peaks
+    LaunchedEffect(isPlaying) {
+        if (!isPlaying) return@LaunchedEffect
+        while (isPlaying && progress < 1f) {
+            delay(80)
+            val prevBar = (progress * amplitudes.size).toInt()
+            progress = (progress + 0.02f).coerceAtMost(1f)
+            val newBar = (progress * amplitudes.size).toInt()
+            if (newBar != prevBar && newBar < amplitudes.size && amplitudes[newBar] > 0.85f) {
+                haptics.performHapticFeedback(HapticFeedbackType.TextHandleMove) // subtle peak tick
+            }
+        }
+        if (progress >= 1f) isPlaying = false
+    }
+
+    Row(
+        modifier = modifier
+            .clip(
+                RoundedCornerShape(
+                    topStart = 12.dp, topEnd = 12.dp,
+                    bottomStart = 12.dp, bottomEnd = 0.dp,
+                )
+            )
+            .background(WhatsAppColors.OutgoingLight)
+            .padding(horizontal = 12.dp, vertical = 10.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(10.dp),
+    ) {
+        Box(
+            Modifier
+                .size(36.dp)
+                .clip(CircleShape)
+                .background(WhatsAppColors.Green)
+                .clickable { isPlaying = !isPlaying },
+            contentAlignment = Alignment.Center,
+        ) {
+            Icon(
+                imageVector = if (isPlaying) Icons.Filled.Pause else Icons.Filled.PlayArrow,
+                contentDescription = if (isPlaying) "Pause" else "Play voice message",
+                tint = Color.White,
+                modifier = Modifier.size(16.dp),
+            )
+        }
+        Row(
+            modifier = Modifier.weight(1f).height(24.dp),
+            horizontalArrangement = Arrangement.spacedBy(2.dp),
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+            amplitudes.forEachIndexed { i, amp ->
+                val played = i.toFloat() / amplitudes.size <= progress
+                Box(
+                    Modifier
+                        .width(2.dp)
+                        .height(max(4f, amp * 20f).dp)
+                        .clip(CircleShape)
+                        .background(if (played) WhatsAppColors.Green else WhatsAppColors.TextTertiary)
+                )
+            }
+        }
+        Text(duration, style = WhatsAppText.TimestampBubble, color = WhatsAppColors.TextTertiary)
+    }
+}
+
+/** Read receipt that crossfades gray → blue when [readState] flips to Read. */
+@Composable
+fun AnimatedTickRow(readState: ReadState) {
+    val targetTint = if (readState == ReadState.Read) WhatsAppColors.ReadBlue else WhatsAppColors.SentGray
+    val tint by androidx.compose.animation.animateColorAsState(
+        targetValue = targetTint,
+        animationSpec = tween(200, easing = LinearEasing),
+        label = "tickColor",
+    )
+    val count = if (readState == ReadState.Sent) 1 else 2
+    Row(horizontalArrangement = Arrangement.spacedBy((-4).dp)) {
+        repeat(count) {
+            Icon(Icons.Filled.Done, contentDescription = null, tint = tint, modifier = Modifier.size(13.dp))
+        }
+    }
+}
+```
+
+## 5. Bottom Navigation (Tab Bar)
+
+Use Material 3 `NavigationBar`. WhatsApp's iOS tab bar is `.regularMaterial` blur over canvas; Android has no first-class live blur, so use a 92%-opaque canvas surface. **Active tint is brand green** — unlike iOS Messages, WhatsApp uses `#25D366` as the selected tab tint. The "new chat" FAB is *not* in the tab bar — it lives as a nav-bar trailing action on the Chats screen.
+
+```kotlin
+import androidx.compose.material.icons.filled.Chat
+import androidx.compose.material.icons.filled.Groups
+import androidx.compose.material.icons.filled.Phone
+import androidx.compose.material.icons.filled.Settings
+import androidx.compose.material.icons.outlined.DonutLarge
+import androidx.compose.material3.NavigationBar
+import androidx.compose.material3.NavigationBarItem
+import androidx.compose.material3.NavigationBarItemDefaults
+
+@Composable
+fun WABottomBar(selected: Int, onSelect: (Int) -> Unit) {
+    NavigationBar(
+        containerColor = WhatsAppColors.CanvasLight.copy(alpha = 0.92f),
+        tonalElevation = 0.dp,
+    ) {
+        val items = listOf(
+            "Updates"     to Icons.Outlined.DonutLarge,
+            "Calls"       to Icons.Filled.Phone,
+            "Communities" to Icons.Filled.Groups,
+            "Chats"       to Icons.Filled.Chat,
+            "Settings"    to Icons.Filled.Settings,
+        )
+        items.forEachIndexed { i, (label, icon) ->
+            NavigationBarItem(
+                selected = selected == i,
+                onClick = { onSelect(i) },
+                icon = { Icon(icon, contentDescription = label, modifier = Modifier.size(24.dp)) },
+                label = { Text(label, style = WhatsAppText.TabLabel) },
+                alwaysShowLabel = true,
+                colors = NavigationBarItemDefaults.colors(
+                    selectedIconColor   = WhatsAppColors.Green, // brand-green active
+                    selectedTextColor   = WhatsAppColors.Green,
+                    unselectedIconColor = WhatsAppColors.TextTertiary,
+                    unselectedTextColor = WhatsAppColors.TextTertiary,
+                    indicatorColor      = Color.Transparent, // no Material pill — WhatsApp has none
+                ),
+            )
+        }
+    }
+}
+```
+
+The **compose bar** sits in the `Scaffold` `bottomBar` slot on the chat screen (not the tab bar): a `Surface(color = Surface1Light)` row holding a pill `TextField` plus the `WASendButton`.
+
+## 6. Motion
+
+| Moment | Compose recipe |
+|--------|----------------|
+| Send button press | `animateFloatAsState` 1 → 0.92 with `spring(dampingRatio = 0.7f)`, `HapticFeedbackType.LongPress` |
+| Send/mic glyph morph | `Crossfade(targetState = hasText)` (no iOS `symbolEffect`) |
+| Read receipt → blue | `animateColorAsState` gray → `#53BDEB` over 200ms `tween` |
+| Voice playback fill | bars recolor as `progress` advances; `HapticFeedbackType.TextHandleMove` on amplitude peaks |
+| Mic record hold | outer ring `scale = 1f + amplitude * 0.2f` driven by decibel state |
+| Swipe-to-reply | `Modifier.pointerInput` horizontal drag; `HapticFeedbackType.TextHandleMove` at threshold |
+| Reaction tap | `Animatable` keyframes 1 → 1.2 → 1; `HapticFeedbackType.LongPress` |
+
+```kotlin
+// Send/mic glyph morph — Android's analog to iOS .contentTransition(.symbolEffect(.replace))
+import androidx.compose.animation.Crossfade
+
+@Composable
+fun MorphingSendGlyph(hasText: Boolean) {
+    Crossfade(targetState = hasText, label = "sendMorph") { showSend ->
+        Icon(
+            imageVector = if (showSend) Icons.Filled.Send else Icons.Filled.Mic,
+            contentDescription = if (showSend) "Send message" else "Record voice message",
+            tint = Color.White,
+            modifier = Modifier.size(18.dp),
+        )
+    }
+}
+```
+
+Haptics: prefer `LocalHapticFeedback`. For the soft per-peak tick during voice playback, `HapticFeedbackType.TextHandleMove` is the lightest stock effect; for richer control use `LocalView.current.performHapticFeedback(HapticFeedbackConstants.CLOCK_TICK)` (API 30+) or a `Vibrator` `VibrationEffect.createOneShot(8, 40)` to approximate iOS's `.soft` impact.
+
+## 7. Icons
+
+WhatsApp uses near-stock iconography; the closest first-party set is `androidx.compose.material:material-icons-extended`. The Updates "circle.dashed" glyph has no exact Material twin — ship it (and the WhatsApp logomark) as a vector drawable loaded via `ImageVector.vectorResource(R.drawable.…)`.
+
+| Purpose | SF Symbol (iOS) | Material Icon (Compose) |
+|---------|-----------------|--------------------------|
+| Send | `paperplane.fill` | `Icons.Filled.Send` |
+| Microphone | `mic.fill` | `Icons.Filled.Mic` |
+| Attach | `paperclip` | `Icons.Filled.AttachFile` |
+| Camera | `camera.fill` | `Icons.Filled.PhotoCamera` |
+| Emoji | `face.smiling` | `Icons.Filled.EmojiEmotions` |
+| Read ticks | `checkmark` | `Icons.Filled.Done` |
+| Phone (answer) | `phone.fill` | `Icons.Filled.Call` |
+| Phone (decline) | `phone.down.fill` | `Icons.Filled.CallEnd` |
+| Video | `video.fill` | `Icons.Filled.Videocam` |
+| Lock (E2E) | `lock.fill` | `Icons.Filled.Lock` |
+| Chats tab | `message.fill` | `Icons.Filled.Chat` |
+| Calls tab | `phone.fill` | `Icons.Filled.Phone` |
+| Communities tab | `person.3.fill` | `Icons.Filled.Groups` |
+| Updates tab | `circle.dashed` | `Icons.Outlined.DonutLarge` (or vector drawable) |
+| Settings tab | `gearshape.fill` | `Icons.Filled.Settings` |
+| New chat | `square.and.pencil` | `Icons.Filled.Edit` |
+| Search | `magnifyingglass` | `Icons.Filled.Search` |
+| Ellipsis | `ellipsis` | `Icons.Filled.MoreVert` |
+| Play / Pause (voice) | `play.fill` / `pause.fill` | `Icons.Filled.PlayArrow` / `Icons.Filled.Pause` |
+
+## 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 chat wallpaper should full-bleed behind the system bars; apply `Scaffold` insets so the compose bar clears the gesture nav and the bottom tab bar clears the home indicator.
+- **Font scaling**: `sp` honors the user's font scale automatically — keep it on bubble body, contact names, and previews so WhatsApp's Dynamic-Type-first promise carries over. Pin inline timestamps (`11sp` in-bubble, `12sp` list) and the `10sp` tab labels by deriving them from a fixed-`fontScale` `LocalDensity` so the inline time/tick row never breaks layout.
+- **TalkBack**: label the send button dynamically (`"Send message"` vs `"Record voice message"`); merge bubble text + timestamp + read-state into one node with `Modifier.semantics(mergeDescendants = true)` and announce read state as content (`"Read"` / `"Delivered"`). Do **not** hide the end-to-end encryption banner — expose it as static text.
+- **Touch targets**: Material guidance is 48.dp minimum. The 36.dp send/mic and play circles need a 48.dp hit area via surrounding padding even though the glyph is small; chat-list rows at 72.dp are well clear.
+- **RTL**: the asymmetric bubble tail must flip for Arabic/Hebrew — use `RoundedCornerShape` with `topStart/bottomEnd` (logical corners) rather than absolute left/right so Compose mirrors it automatically. Test with a forced RTL locale.
+- **Contrast**: `#D9FDD3` outgoing bubble + `#111B21` text far exceeds WCAG AA. Validate the dark-mode `#005C4B` bubble + `#E9EDEF` text (passes AA) and the `#8696A0` secondary text on `#FFFFFF` — the latter is borderline at the 11–12sp timestamp size; bump toward `#667781` if your build targets strict compliance.
+- **Dynamic color**: do **not** enable Material You `dynamicColorScheme()` — WhatsApp's brand requires the fixed green verb color and the mint-leaf bubble regardless of wallpaper. Keep the hand-built light/dark schemes above.