designmd-forge 1.2.0

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

@@ -0,0 +1,423 @@
+# Zoom (iOS) — Jetpack Compose Implementation Guide
+
+Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file ports Zoom'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 (Zoom's dark in-call theater, single-blue accent, the gallery video grid, the floating control bar) while making everything idiomatic Android — `NavigationBar` instead of a UITabBar, a `LazyVerticalGrid` for the gallery, `sp`/`dp` instead of `pt`.
+
+Assumes Compose BOM `2024.09+`, Kotlin `2.0+`, `minSdk 24`, Material 3, and `androidx.compose.material:material-icons-extended`.
+
+## 1. Color Tokens
+
+```kotlin
+// ui/theme/ZoomColors.kt
+import androidx.compose.ui.graphics.Color
+
+object ZoomColors {
+    // Dark / in-call theater
+    val Canvas   = Color(0xFF1A1A1A)
+    val Surface1 = Color(0xFF2D2D2D)
+    val Surface2 = Color(0xFF3A3A3A)
+    val Divider  = Color(0xFF3A3A3A)
+
+    // Light (outside call)
+    val LightCanvas  = Color(0xFFFFFFFF)
+    val LightSurface = Color(0xFFF5F5F5)
+    val LightDivider = Color(0xFFE5E5E5)
+
+    // Text (dark)
+    val TextPrimary   = Color(0xFFFFFFFF)
+    val TextSecondary = Color(0xFFB0B0B0)
+    val TextTertiary  = Color(0xFF7A7A7A)
+
+    // Brand & Semantic
+    val Blue        = Color(0xFF2D8CFF)
+    val BluePressed = Color(0xFF1F6FCC)
+    val Red         = Color(0xFFE02828)
+    val RedPressed  = Color(0xFFB91F1F)
+    val HandYellow  = Color(0xFFF5C518)
+    val Success     = Color(0xFF0E8A45)
+}
+```
+
+Wire it into a Material 3 `darkColorScheme` for the in-call theater and a `lightColorScheme` for outside-call surfaces so ripples and default components inherit the brand.
+
+```kotlin
+// ui/theme/Theme.kt
+import androidx.compose.material3.darkColorScheme
+import androidx.compose.material3.lightColorScheme
+import androidx.compose.material3.MaterialTheme
+
+private val ZoomDark = darkColorScheme(
+    primary       = ZoomColors.Blue,
+    onPrimary     = Color.White,
+    background     = ZoomColors.Canvas,
+    onBackground   = ZoomColors.TextPrimary,
+    surface        = ZoomColors.Surface1,
+    onSurface      = ZoomColors.TextPrimary,
+    surfaceVariant = ZoomColors.Surface2,
+    outline        = ZoomColors.Divider,
+    error          = ZoomColors.Red,
+)
+
+private val ZoomLight = lightColorScheme(
+    primary    = ZoomColors.Blue,
+    onPrimary  = Color.White,
+    background = ZoomColors.LightCanvas,
+    surface    = ZoomColors.LightSurface,
+    outline    = ZoomColors.LightDivider,
+    error      = ZoomColors.Red,
+)
+
+@Composable
+fun ZoomTheme(inCall: Boolean = false, content: @Composable () -> Unit) =
+    MaterialTheme(
+        colorScheme = if (inCall) ZoomDark else ZoomLight, // in-call is always the dark theater
+        typography  = ZoomTypography,
+        content     = content,
+    )
+```
+
+## 2. Typography
+
+Zoom uses a custom grotesque; Lato (or Inter) is the closest free substitute. Drop the TTFs in `res/font/` (lowercase, snake_case). The call timer and meeting IDs need tabular figures.
+
+```kotlin
+// ui/theme/ZoomType.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 Lato = FontFamily(
+    Font(R.font.lato_regular,  FontWeight.Normal),   // 400
+    Font(R.font.lato_semibold, FontWeight.SemiBold), // 600
+    Font(R.font.lato_bold,     FontWeight.Bold),     // 700
+)
+
+// Named ramp — mirrors DESIGN.md §3 exactly (pt → sp 1:1)
+object ZoomText {
+    val TitleLarge   = TextStyle(Lato, fontWeight = FontWeight.Bold,     fontSize = 28.sp, lineHeight = 34.sp, letterSpacing = (-0.3).sp)
+    val MeetingTopic = TextStyle(Lato, fontWeight = FontWeight.Bold,     fontSize = 22.sp, lineHeight = 28.sp, letterSpacing = (-0.2).sp)
+    val Section      = TextStyle(Lato, fontWeight = FontWeight.Bold,     fontSize = 17.sp, lineHeight = 22.sp, letterSpacing = (-0.1).sp)
+    val ListTitle    = TextStyle(Lato, fontWeight = FontWeight.SemiBold, fontSize = 16.sp, lineHeight = 21.sp)
+    val Body         = TextStyle(Lato, fontWeight = FontWeight.Normal,   fontSize = 15.sp, lineHeight = 22.sp)
+    val Button       = TextStyle(Lato, fontWeight = FontWeight.Bold,     fontSize = 17.sp, lineHeight = 17.sp)
+    val ControlLabel = TextStyle(Lato, fontWeight = FontWeight.SemiBold, fontSize = 11.sp, lineHeight = 12.sp)
+    val Metadata     = TextStyle(Lato, fontWeight = FontWeight.Normal,   fontSize = 13.sp, lineHeight = 18.sp)
+    val TileName     = TextStyle(Lato, fontWeight = FontWeight.SemiBold, fontSize = 13.sp, lineHeight = 13.sp)
+    val Timer        = TextStyle(Lato, fontWeight = FontWeight.SemiBold, fontSize = 14.sp, lineHeight = 14.sp)
+    val Tab          = TextStyle(Lato, fontWeight = FontWeight.SemiBold, fontSize = 10.sp, lineHeight = 12.sp)
+    val TinyUpper    = TextStyle(Lato, fontWeight = FontWeight.Bold,     fontSize = 11.sp, lineHeight = 13.sp, letterSpacing = 0.4.sp)
+}
+
+// Map onto Material 3 slots so stock components inherit the brand
+val ZoomTypography = Typography(
+    headlineLarge = ZoomText.TitleLarge,
+    headlineSmall = ZoomText.MeetingTopic,
+    titleMedium   = ZoomText.ListTitle,
+    bodyMedium    = ZoomText.Body,
+    labelSmall    = ZoomText.Tab,
+)
+```
+
+## 3. Signature Components
+
+### Gallery Video Tile (the signature element)
+
+```kotlin
+import androidx.compose.animation.core.animateDpAsState
+import androidx.compose.animation.core.tween
+
+@Composable
+fun GalleryTile(
+    name: String,
+    isMuted: Boolean,
+    isActiveSpeaker: Boolean,
+    hasVideo: Boolean = false,
+    modifier: Modifier = Modifier,
+) {
+    val border by animateDpAsState(if (isActiveSpeaker) 3.dp else 0.dp, tween(220), label = "speakerBorder")
+    val initials = name.split(" ").take(2).mapNotNull { it.firstOrNull() }.joinToString("")
+
+    Box(
+        modifier = modifier
+            .aspectRatio(16f / 9f)
+            .clip(RoundedCornerShape(8.dp))
+            .background(ZoomColors.Surface2)
+            .border(border, ZoomColors.Blue, RoundedCornerShape(8.dp)),
+        contentAlignment = Alignment.Center,
+    ) {
+        if (!hasVideo) {
+            Box(
+                Modifier.size(56.dp).clip(CircleShape).background(ZoomColors.Blue.copy(alpha = 0.25f)),
+                contentAlignment = Alignment.Center,
+            ) { Text(initials, fontSize = 20.sp, fontWeight = FontWeight.SemiBold, color = Color.White) }
+        }
+        Row(
+            Modifier.align(Alignment.BottomStart).padding(8.dp),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(6.dp),
+        ) {
+            if (isMuted) {
+                Box(
+                    Modifier.size(22.dp).clip(CircleShape).background(ZoomColors.Red),
+                    contentAlignment = Alignment.Center,
+                ) { Icon(Icons.Filled.MicOff, null, tint = Color.White, modifier = Modifier.size(12.dp)) }
+            }
+            Box(
+                Modifier.clip(RoundedCornerShape(4.dp)).background(Color.Black.copy(alpha = 0.45f))
+                    .padding(horizontal = 6.dp, vertical = 3.dp),
+            ) { Text(name, style = ZoomText.TileName, color = Color.White) }
+        }
+    }
+}
+```
+
+### Primary "Join" Button (the signature CTA)
+
+```kotlin
+@Composable
+fun JoinButton(text: String = "Join", onClick: () -> Unit, modifier: Modifier = Modifier) {
+    val interaction = remember { MutableInteractionSource() }
+    val pressed by interaction.collectIsPressedAsState()
+    val scale by animateFloatAsState(if (pressed) 0.98f else 1f,
+        spring(dampingRatio = 0.8f, stiffness = 600f), label = "joinScale")
+    val haptics = LocalHapticFeedback.current
+
+    Box(
+        modifier = modifier
+            .scale(scale)
+            .fillMaxWidth()
+            .height(48.dp)
+            .clip(RoundedCornerShape(8.dp))
+            .background(if (pressed) ZoomColors.BluePressed else ZoomColors.Blue)
+            .clickable(interaction, indication = null) {
+                haptics.performHapticFeedback(HapticFeedbackType.LongPress)
+                onClick()
+            },
+        contentAlignment = Alignment.Center,
+    ) {
+        Text(text, style = ZoomText.Button, color = Color.White)
+    }
+}
+```
+
+### In-Call Control Bar
+
+```kotlin
+@Composable
+fun ControlBar(
+    micOn: Boolean,
+    videoOn: Boolean,
+    onToggleMic: () -> Unit,
+    onToggleVideo: () -> Unit,
+    onLeave: () -> Unit,
+) {
+    Row(
+        modifier = Modifier
+            .padding(horizontal = 12.dp)
+            .fillMaxWidth()
+            .height(72.dp)
+            .clip(RoundedCornerShape(16.dp))
+            .background(ZoomColors.Surface1.copy(alpha = 0.96f))
+            .padding(horizontal = 12.dp),
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        ControlItem(if (micOn) Icons.Filled.Mic else Icons.Filled.MicOff,
+            if (micOn) "Mute" else "Unmute",
+            if (micOn) Color.White else ZoomColors.Red, Modifier.weight(1f), onToggleMic)
+        ControlItem(if (videoOn) Icons.Filled.Videocam else Icons.Filled.VideocamOff,
+            if (videoOn) "Stop Video" else "Start Video", Color.White, Modifier.weight(1f), onToggleVideo)
+        ControlItem(Icons.Filled.ScreenShare, "Share", Color.White, Modifier.weight(1f)) {}
+        ControlItem(Icons.Filled.People, "Participants", Color.White, Modifier.weight(1f)) {}
+        ControlItem(Icons.Filled.EmojiEmotions, "React", Color.White, Modifier.weight(1f)) {}
+
+        Box(
+            Modifier
+                .padding(start = 4.dp)
+                .clip(RoundedCornerShape(8.dp))
+                .background(ZoomColors.Red)
+                .clickable(onClick = onLeave)
+                .padding(horizontal = 18.dp, vertical = 8.dp),
+        ) { Text("Leave", color = Color.White, fontWeight = FontWeight.Bold, fontSize = 15.sp) }
+    }
+}
+
+@Composable
+private fun ControlItem(icon: ImageVector, label: String, tint: Color, modifier: Modifier, onClick: () -> Unit) {
+    Column(
+        modifier.clickable(onClick = onClick),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.spacedBy(4.dp),
+    ) {
+        Icon(icon, label, tint = tint, modifier = Modifier.size(24.dp))
+        Text(label, style = ZoomText.ControlLabel, color = tint)
+    }
+}
+```
+
+### Meeting List Row
+
+```kotlin
+@Composable
+fun MeetingRow(time: String, topic: String, subtitle: String, onJoin: () -> Unit) {
+    Row(
+        Modifier.fillMaxWidth().height(72.dp).background(ZoomColors.Surface1).padding(horizontal = 16.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(12.dp),
+    ) {
+        Text(time, style = ZoomText.Metadata, color = ZoomColors.TextSecondary, modifier = Modifier.width(64.dp))
+        Column(Modifier.weight(1f), verticalArrangement = Arrangement.spacedBy(4.dp)) {
+            Text(topic, style = ZoomText.ListTitle, color = Color.White)
+            Text(subtitle, style = ZoomText.Metadata, color = ZoomColors.TextSecondary)
+        }
+        Box(
+            Modifier.clip(CircleShape).background(ZoomColors.Blue)
+                .clickable(onClick = onJoin).padding(horizontal = 18.dp, vertical = 7.dp),
+        ) { Text("Join", color = Color.White, fontWeight = FontWeight.Bold, fontSize = 14.sp) }
+    }
+}
+```
+
+### Recording Indicator
+
+```kotlin
+@Composable
+fun RecordingIndicator() {
+    val t = rememberInfiniteTransition(label = "rec")
+    val scale by t.animateFloat(1f, 0.7f,
+        infiniteRepeatable(tween(1200), RepeatMode.Reverse), label = "recDot")
+    Row(
+        Modifier.clip(CircleShape).background(Color.Black.copy(alpha = 0.45f))
+            .padding(horizontal = 10.dp, vertical = 6.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(6.dp),
+    ) {
+        Box(Modifier.size(10.dp).scale(scale).clip(CircleShape).background(ZoomColors.Red))
+        Text("RECORDING", style = ZoomText.TinyUpper, color = Color.White)
+    }
+}
+```
+
+## 4. Gallery Grid Layout
+
+Compute the column count from participant count; animate reflow on join/leave with `animateItemPlacement()`.
+
+```kotlin
+@Composable
+fun GalleryGrid(participants: List<Participant>) {
+    val cols = when {
+        participants.size <= 1 -> 1
+        participants.size <= 4 -> 2
+        else -> 3
+    }
+    LazyVerticalGrid(
+        columns = GridCells.Fixed(cols),
+        contentPadding = PaddingValues(4.dp),
+        horizontalArrangement = Arrangement.spacedBy(4.dp),
+        verticalArrangement = Arrangement.spacedBy(4.dp),
+    ) {
+        items(participants, key = { it.id }) { p ->
+            GalleryTile(
+                name = p.name, isMuted = p.isMuted, isActiveSpeaker = p.isSpeaking,
+                modifier = Modifier.animateItemPlacement(tween(300)),
+            )
+        }
+    }
+}
+
+data class Participant(val id: String, val name: String, val isMuted: Boolean, val isSpeaking: Boolean)
+```
+
+## 5. Bottom Navigation (Tab Bar)
+
+Use Material 3 `NavigationBar`. The active tint is Zoom Blue. This is the outside-call surface — it follows the light/dark scheme.
+
+```kotlin
+@Composable
+fun ZoomBottomBar(selected: Int, onSelect: (Int) -> Unit) {
+    NavigationBar(containerColor = ZoomColors.Surface1) {
+        val items = listOf(
+            "Meetings"  to Icons.Filled.Videocam,
+            "Team Chat" to Icons.Filled.Chat,
+            "Mail"      to Icons.Filled.Email,
+            "Phone"     to Icons.Filled.Call,
+            "More"      to Icons.Filled.MoreHoriz,
+        )
+        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 = ZoomText.Tab) },
+                colors = NavigationBarItemDefaults.colors(
+                    selectedIconColor = ZoomColors.Blue,
+                    selectedTextColor = ZoomColors.Blue,
+                    unselectedIconColor = ZoomColors.TextSecondary,
+                    unselectedTextColor = ZoomColors.TextSecondary,
+                    indicatorColor = Color.Transparent,
+                ),
+            )
+        }
+    }
+}
+```
+
+The in-call control bar is **not** part of the `NavigationBar` — it is a floating `Surface` overlaid on the video stage, rendered above the gallery in a `Box` and auto-hidden after inactivity.
+
+## 6. Motion
+
+| Moment | Compose recipe |
+|--------|----------------|
+| Join button tap | `animateFloatAsState` 1 → 0.98 with `spring(dampingRatio = 0.8f)`, `HapticFeedbackType.LongPress` |
+| Active-speaker border | `animateDpAsState` 0 → 3.dp `tween(220)`, debounce the input ~300ms |
+| Control bar auto-hide | `AnimatedVisibility` slide-down + fade `tween(250)` after 4s idle; restore on stage tap |
+| Reactions float | `Animatable` offset y 0 → -120.dp + alpha 1 → 0 over ~3s |
+| Grid reflow | `Modifier.animateItemPlacement(tween(300))` on each tile |
+| Recording dot | `rememberInfiniteTransition` scale 1.0 ↔ 0.7 `tween(1200)` reverse |
+
+```kotlin
+// Control bar auto-hide
+AnimatedVisibility(
+    visible = !barHidden,
+    enter = slideInVertically { it } + fadeIn(tween(200)),
+    exit  = slideOutVertically { it } + fadeOut(tween(250)),
+) { ControlBar(/* … */) }
+```
+
+Haptics: prefer `LocalHapticFeedback`. For a crisper tick matching iOS impact use `LocalView.current.performHapticFeedback(HapticFeedbackConstants.CONTEXT_CLICK)` (API 30+) on Join, mute toggle, and Leave-confirm.
+
+## 7. Icons
+
+The closest first-party set is `androidx.compose.material:material-icons-extended`.
+
+| Purpose | SF Symbol (iOS) | Material Icon (Compose) |
+|---------|-----------------|--------------------------|
+| Mic on / off | `mic.fill` / `mic.slash.fill` | `Icons.Filled.Mic` / `Icons.Filled.MicOff` |
+| Video on / off | `video.fill` / `video.slash.fill` | `Icons.Filled.Videocam` / `Icons.Filled.VideocamOff` |
+| Share | `square.and.arrow.up` | `Icons.Filled.ScreenShare` |
+| Participants | `person.2.fill` | `Icons.Filled.People` |
+| React | `face.smiling` | `Icons.Filled.EmojiEmotions` |
+| Leave | `phone.down.fill` | `Icons.Filled.CallEnd` |
+| Raise hand | `hand.raised.fill` | `Icons.Filled.BackHand` |
+| Camera flip | `arrow.triangle.2.circlepath.camera` | `Icons.Filled.FlipCameraIos` |
+| Search | `magnifyingglass` | `Icons.Filled.Search` |
+| Meetings (tab) | `video.fill` | `Icons.Filled.Videocam` |
+| Team Chat (tab) | `bubble.left.and.bubble.right.fill` | `Icons.Filled.Chat` |
+| Mail (tab) | `envelope.fill` | `Icons.Filled.Email` |
+| Phone (tab) | `phone.fill` | `Icons.Filled.Call` |
+| More (tab) | `ellipsis` | `Icons.Filled.MoreHoriz` |
+
+## 8. Minimum SDK & Accessibility Notes
+
+- **minSdk 24** (Compose floor is 21; modern motion comfortable at 24). `compileSdk 34+`, Compose BOM `2024.09+`, Kotlin `2.0+`.
+- **Edge-to-edge**: call `enableEdgeToEdge()`; in-call wants light-content system bars over the dark theater. Apply `Scaffold` / `Modifier.windowInsetsPadding(WindowInsets.systemBars)` so the floating control bar clears the gesture nav.
+- **Keep screen on**: set `keepScreenOn = true` (e.g. `Modifier` via `View.keepScreenOn` or `WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON`) for the in-call screen.
+- **Tabular numerics**: the call timer and meeting IDs should not reflow — prefer a fixed-advance digit font or set `TextStyle(fontFeatureSettings = "tnum")`.
+- **Font scaling**: `sp` honors the user scale — keep it on titles/body/metadata. Clamp tile name labels and pin the timer + 11.sp control labels (derive from `dp` or wrap in `CompositionLocalProvider(LocalDensity provides Density(density, fontScale = 1f))`).
+- **TalkBack**: announce mic/video state changes ("Microphone muted"); set `contentDescription` on the active-speaker tile ("Alex Rivera, speaking"); keep the control bar in the semantics tree even when visually auto-hidden, and disable auto-hide when a screen reader is active.
+- **Touch targets**: Material guidance is 48.dp minimum — the control items are full-bar-height columns, well clear; ensure the 24.dp glyphs get a 48.dp hit area via the column padding.
+- **Contrast**: `#B0B0B0` on `#1A1A1A` passes WCAG AA at 13sp+. Validate the 10sp tab and 11sp control labels and bump toward `#C4C4C4` if targeting strict accessibility compliance.
+- **Dynamic color**: do **not** enable Material You `dynamicColorScheme()` — Zoom's identity requires the fixed blue accent and dark theater regardless of wallpaper.