designmd-forge 1.2.0

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

@@ -0,0 +1,433 @@
+# Kik (iOS) — Jetpack Compose Implementation Guide
+
+Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file ports Kik's visual language to **Android with Jetpack Compose (Material 3)**: a color token object, a `Typography` set, paste-ready `@Composable`s, the bubble + S/D/R receipt + Kik Code, 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 (Kik's modern Blue brand, the gray/blue bubble pair, the single-letter S/D/R receipt, username-first identity, bots, Kik Codes) while making everything idiomatic Android — `NavigationBar` instead of a UITabBar, `sp`/`dp`. Kik is light-first; a neutral near-black dark scheme is provided.
+
+Assumes Compose BOM `2024.09+`, Kotlin `2.0+`, `minSdk 24`, Material 3, and [Coil](https://coil-kt.github.io/coil/) `2.6+` for avatars / Kik Code art.
+
+## 1. Color Tokens
+
+```kotlin
+// ui/theme/KikColors.kt
+import androidx.compose.ui.graphics.Color
+
+object KikColors {
+    // Brand Kik Blue (modern) + Green (heritage)
+    val Blue        = Color(0xFF00B0F0)
+    val BlueDeep    = Color(0xFF0093C8)
+    val BluePressed = Color(0xFF0086B8)
+    val Cyan        = Color(0xFF4FCBF7)
+    val GreenLegacy = Color(0xFF82BC23) // heritage accent only
+    val InkOnBlue   = Color(0xFF002A36)
+
+    // Canvas & Surfaces (Light)
+    val Canvas      = Color(0xFFFFFFFF)
+    val Incoming    = Color(0xFFE9EAEC)
+    val SurfaceGray = Color(0xFFF3F4F6)
+    val RowPressed  = Color(0xFFE7E8EB)
+    val Divider     = Color(0xFFE1E2E5)
+
+    // Canvas & Surfaces (Dark) — neutral near-black
+    val DarkCanvas   = Color(0xFF121316)
+    val DarkSurface1 = Color(0xFF1B1D21)
+    val DarkSurface2 = Color(0xFF25282D)
+    val DarkDivider  = Color(0xFF31343A)
+
+    // Text
+    val TextPrimary       = Color(0xFF16181B)
+    val TextPrimaryDark   = Color(0xFFF1F2F4)
+    val TextSecondary     = Color(0xFF6C6F77)
+    val TextSecondaryDark = Color(0xFF9CA0A8)
+    val TextTertiary      = Color(0xFF9A9DA5)
+    val TextTertiaryDark  = Color(0xFF686C74)
+
+    // Semantic
+    val Error = Color(0xFFF0473E)
+    val Link  = Color(0xFF0093C8)
+}
+```
+
+Wire it into both schemes. Kik is light-first; dark uses a neutral near-black `#121316`, never color-cast.
+
+```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
+
+private val KikLight = lightColorScheme(
+    primary        = KikColors.Blue,
+    onPrimary      = KikColors.InkOnBlue,   // dark-cyan ink on bright blue (AA)
+    background     = KikColors.Canvas,
+    onBackground   = KikColors.TextPrimary,
+    surface        = KikColors.SurfaceGray,
+    onSurface      = KikColors.TextPrimary,
+    surfaceVariant = KikColors.Incoming,
+    outline        = KikColors.Divider,
+    error          = KikColors.Error,
+)
+
+private val KikDark = darkColorScheme(
+    primary        = KikColors.Blue,
+    onPrimary      = KikColors.InkOnBlue,
+    background      = KikColors.DarkCanvas,
+    onBackground   = KikColors.TextPrimaryDark,
+    surface        = KikColors.DarkSurface1,
+    onSurface      = KikColors.TextPrimaryDark,
+    surfaceVariant = KikColors.DarkSurface2,
+    outline        = KikColors.DarkDivider,
+    error          = KikColors.Error,
+)
+
+@Composable
+fun KikTheme(
+    dark: Boolean = isSystemInDarkTheme(),
+    content: @Composable () -> Unit,
+) = MaterialTheme(
+    colorScheme = if (dark) KikDark else KikLight,
+    typography = KikTypography,
+    content = content,
+)
+```
+
+## 2. Typography (M3)
+
+Kik's brand face is proprietary; bundle **Inter** (SIL OFL) in `res/font/` as the closest free substitute. Heavy 700/800 titles & username headline; body 400 (outgoing bumps to 500 for ink crispness on Blue). pt → sp 1:1.
+
+```kotlin
+// ui/theme/KikType.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 Inter = FontFamily(
+    Font(R.font.inter_regular,   FontWeight.Normal),
+    Font(R.font.inter_medium,    FontWeight.Medium),
+    Font(R.font.inter_semibold,  FontWeight.SemiBold),
+    Font(R.font.inter_bold,      FontWeight.Bold),
+    Font(R.font.inter_extrabold, FontWeight.ExtraBold),
+)
+
+object KikText {
+    val LargeTitle  = TextStyle(Inter, fontWeight = FontWeight.ExtraBold, fontSize = 32.sp, lineHeight = 38.sp, letterSpacing = (-0.4).sp)
+    val ScreenTitle = TextStyle(Inter, fontWeight = FontWeight.ExtraBold, fontSize = 26.sp, lineHeight = 31.sp, letterSpacing = (-0.3).sp)
+    val Title3      = TextStyle(Inter, fontWeight = FontWeight.Bold,      fontSize = 22.sp, lineHeight = 27.sp, letterSpacing = (-0.2).sp)
+    val Headline    = TextStyle(Inter, fontWeight = FontWeight.Bold,      fontSize = 17.sp, lineHeight = 22.sp, letterSpacing = (-0.2).sp)
+    val RowTitle    = TextStyle(Inter, fontWeight = FontWeight.Bold,      fontSize = 15.sp, lineHeight = 20.sp, letterSpacing = (-0.1).sp)
+    val Body        = TextStyle(Inter, fontWeight = FontWeight.Normal,    fontSize = 14.sp, lineHeight = 19.sp)
+    val BodyOut     = TextStyle(Inter, fontWeight = FontWeight.Medium,    fontSize = 14.sp, lineHeight = 19.sp)
+    val BodyEmph    = TextStyle(Inter, fontWeight = FontWeight.SemiBold,  fontSize = 14.sp, lineHeight = 19.sp)
+    val Preview     = TextStyle(Inter, fontWeight = FontWeight.Medium,    fontSize = 13.sp, lineHeight = 18.sp)
+    val Footnote    = TextStyle(Inter, fontWeight = FontWeight.SemiBold,  fontSize = 13.sp, lineHeight = 18.sp)
+    val Caption     = TextStyle(Inter, fontWeight = FontWeight.SemiBold,  fontSize = 11.sp, lineHeight = 15.sp, letterSpacing = 0.1.sp)
+    val Button      = TextStyle(Inter, fontWeight = FontWeight.Bold,      fontSize = 16.sp, lineHeight = 16.sp)
+    val Receipt     = TextStyle(Inter, fontWeight = FontWeight.Bold,      fontSize = 11.sp, lineHeight = 11.sp, letterSpacing = 0.2.sp)
+    val Tab         = TextStyle(Inter, fontWeight = FontWeight.SemiBold,  fontSize = 11.sp, lineHeight = 13.sp, letterSpacing = 0.1.sp)
+}
+
+val KikTypography = Typography(
+    headlineLarge = KikText.LargeTitle,
+    headlineMedium = KikText.ScreenTitle,
+    titleMedium   = KikText.Headline,
+    bodyLarge     = KikText.Body,
+    labelSmall    = KikText.Tab,
+)
+```
+
+## 3. Signature Components
+
+### Message Bubble (in / out, with tail)
+
+```kotlin
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+
+enum class SDR { Sending, Sent, Delivered, Read, Failed }
+
+@Composable
+fun KikBubble(text: String, outgoing: Boolean, tailEnd: Boolean, timestamp: String, receipt: SDR, dark: Boolean) {
+    val shape = RoundedCornerShape(
+        topStart = 16.dp, topEnd = 16.dp,
+        bottomStart = if (!outgoing && tailEnd) 5.dp else 16.dp,
+        bottomEnd   = if ( outgoing && tailEnd) 5.dp else 16.dp,
+    )
+    Column(Modifier.fillMaxWidth(), horizontalAlignment = if (outgoing) Alignment.End else Alignment.Start) {
+        Box(
+            Modifier
+                .fillMaxWidth(0.80f)
+                .wrapContentWidth(if (outgoing) Alignment.End else Alignment.Start)
+                .clip(shape)
+                .background(if (outgoing) KikColors.Blue else if (dark) KikColors.DarkSurface2 else KikColors.Incoming)
+                .padding(horizontal = 13.dp, vertical = 8.dp)
+        ) {
+            Text(text, style = if (outgoing) KikText.BodyOut else KikText.Body,
+                color = if (outgoing) KikColors.InkOnBlue else if (dark) KikColors.TextPrimaryDark else KikColors.TextPrimary)
+        }
+        if (outgoing) {
+            Row(Modifier.padding(top = 3.dp, end = 4.dp), verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(5.dp)) {
+                Text(timestamp, fontSize = 10.sp, color = if (dark) KikColors.TextTertiaryDark else KikColors.TextTertiary)
+                SDRReceipt(receipt, dark)
+            }
+        }
+    }
+}
+```
+
+### S / D / R Receipt
+
+```kotlin
+@Composable
+fun SDRReceipt(state: SDR, dark: Boolean) {
+    val letter = when (state) {
+        SDR.Sending -> "…"; SDR.Sent -> "S"; SDR.Delivered -> "D"; SDR.Read -> "R"; SDR.Failed -> "!"
+    }
+    val color = when (state) {
+        SDR.Sending, SDR.Sent -> if (dark) KikColors.TextTertiaryDark else KikColors.TextTertiary
+        SDR.Delivered -> if (dark) KikColors.TextSecondaryDark else KikColors.TextSecondary
+        SDR.Read -> KikColors.Blue   // the one color moment
+        SDR.Failed -> KikColors.Error
+    }
+    // No animation — instant glyph swap; only the R recolor reads as an event
+    Text(letter, style = KikText.Receipt, color = color)
+}
+```
+
+### Conversation Row (person vs bot)
+
+```kotlin
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.ui.graphics.Brush
+
+@Composable
+fun KikConvRow(
+    name: String, preview: String, time: String, isBot: Boolean,
+    unread: Int?, receipt: SDR?, gradient: List<Color>, dark: Boolean,
+) {
+    Row(
+        Modifier
+            .fillMaxWidth()
+            .padding(horizontal = 16.dp, vertical = 12.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(12.dp),
+    ) {
+        Box(
+            Modifier.size(48.dp)
+                .clip(if (isBot) RoundedCornerShape(14.dp) else CircleShape)
+                .background(Brush.linearGradient(gradient)),
+            contentAlignment = Alignment.Center,
+        ) { Text(name.take(1), color = Color.White, fontSize = 16.sp, fontWeight = FontWeight.Bold) }
+
+        Column(Modifier.weight(1f)) {
+            Row(verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(5.dp)) {
+                Text(name, style = KikText.RowTitle, maxLines = 1,
+                    color = if (dark) KikColors.TextPrimaryDark else KikColors.TextPrimary)
+                if (isBot) {
+                    Box(
+                        Modifier.clip(RoundedCornerShape(4.dp))
+                            .background(if (dark) KikColors.DarkSurface2 else KikColors.SurfaceGray)
+                            .padding(horizontal = 5.dp, vertical = 1.dp)
+                    ) { Text("BOT", fontSize = 9.sp, fontWeight = FontWeight.Bold,
+                        color = if (dark) KikColors.TextSecondaryDark else KikColors.TextSecondary) }
+                }
+            }
+            Text(preview, style = KikText.Preview, maxLines = 1,
+                color = if (dark) KikColors.TextSecondaryDark else KikColors.TextSecondary)
+        }
+
+        Column(horizontalAlignment = Alignment.End, verticalArrangement = Arrangement.spacedBy(5.dp)) {
+            Text(time, fontSize = 11.sp, color = if (dark) KikColors.TextTertiaryDark else KikColors.TextTertiary)
+            when {
+                unread != null -> Box(
+                    Modifier.clip(CircleShape).background(KikColors.Blue).defaultMinSize(18.dp, 18.dp).padding(horizontal = 5.dp),
+                    contentAlignment = Alignment.Center,
+                ) { Text("$unread", fontSize = 11.sp, fontWeight = FontWeight.Bold, color = KikColors.InkOnBlue) }
+                receipt != null -> SDRReceipt(receipt, dark)
+            }
+        }
+    }
+}
+```
+
+### Kik Code
+
+```kotlin
+import androidx.compose.foundation.Canvas
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.PathEffect
+import androidx.compose.ui.graphics.drawscope.Stroke
+
+@Composable
+fun KikCode(modifier: Modifier = Modifier) {
+    // Flat, high-contrast — NO shadow (must scan reliably)
+    Box(
+        modifier.size(120.dp).clip(RoundedCornerShape(24.dp)).background(KikColors.Blue),
+        contentAlignment = Alignment.Center,
+    ) {
+        Canvas(Modifier.size(96.dp)) {
+            drawCircle(
+                color = Color.White,
+                radius = size.minDimension / 2 - 3.dp.toPx(),
+                center = center,
+                style = Stroke(width = 6.dp.toPx(), pathEffect = PathEffect.dashPathEffect(floatArrayOf(2.dp.toPx(), 6.dp.toPx()))),
+            )
+        }
+        Box(Modifier.size(44.dp).clip(RoundedCornerShape(12.dp)).background(Color.White))
+    }
+}
+```
+
+### Compose Bar (text "Send" label)
+
+```kotlin
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Add
+import androidx.compose.material3.Icon
+import androidx.compose.runtime.*
+
+@Composable
+fun KikComposeBar(dark: Boolean, onSend: (String) -> Unit) {
+    var text by remember { mutableStateOf("") }
+    val empty = text.isBlank()
+    Row(
+        Modifier.fillMaxWidth()
+            .background(if (dark) KikColors.DarkSurface1 else KikColors.Canvas)
+            .padding(horizontal = 14.dp, vertical = 8.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(10.dp),
+    ) {
+        Icon(Icons.Filled.Add, "Attach", tint = if (dark) KikColors.TextSecondaryDark else KikColors.TextSecondary, modifier = Modifier.size(22.dp))
+        Box(
+            Modifier.weight(1f).heightIn(min = 36.dp).clip(RoundedCornerShape(18.dp))
+                .background(if (dark) KikColors.DarkSurface2 else KikColors.SurfaceGray)
+                .padding(horizontal = 14.dp, vertical = 8.dp),
+        ) {
+            BasicTextField(
+                value = text, onValueChange = { text = it },
+                textStyle = KikText.Body.copy(color = if (dark) KikColors.TextPrimaryDark else KikColors.TextPrimary),
+                decorationBox = { inner ->
+                    if (empty) Text("Type a message", style = KikText.Body, color = if (dark) KikColors.TextTertiaryDark else KikColors.TextTertiary)
+                    inner()
+                },
+            )
+        }
+        Text(
+            "Send",
+            style = KikText.Receipt.copy(fontSize = 14.sp),
+            color = if (empty) (if (dark) KikColors.TextTertiaryDark else KikColors.TextTertiary) else KikColors.Blue,
+            modifier = Modifier.clickable(enabled = !empty) { onSend(text); text = "" }.padding(horizontal = 6.dp),
+        )
+    }
+}
+```
+
+## 4. Navigation
+
+Kik is text/bot-first — **no call/video tab**. On Android model the strip as a `NavigationBar` with **no tint pill** — active is bright Kik Blue.
+
+```kotlin
+import androidx.compose.material3.*
+import androidx.compose.material.icons.filled.*
+
+@Composable
+fun KikBottomBar(selected: Int, onSelect: (Int) -> Unit) {
+    NavigationBar(containerColor = KikColors.Canvas, tonalElevation = 0.dp) {
+        val items = listOf(
+            "Chats" to Icons.Filled.ChatBubble,
+            "People" to Icons.Filled.People,
+            "Discover" to Icons.Filled.AutoAwesome,
+            "Kik Code" to Icons.Filled.QrCode,
+        )
+        items.forEachIndexed { i, (label, icon) ->
+            NavigationBarItem(
+                selected = selected == i,
+                onClick = { onSelect(i) },
+                icon = { Icon(icon, label, Modifier.size(22.dp)) },
+                label = { Text(label, style = KikText.Tab) },
+                colors = NavigationBarItemDefaults.colors(
+                    selectedIconColor = KikColors.Blue,
+                    selectedTextColor = KikColors.Blue,
+                    unselectedIconColor = KikColors.TextTertiary,
+                    unselectedTextColor = KikColors.TextTertiary,
+                    indicatorColor = Color.Transparent, // no Material pill — Kik has none
+                ),
+            )
+        }
+    }
+}
+```
+
+The chat header is a `CenterAlignedTopAppBar`: leading back `ChevronLeft` tinted `Blue`, centered `@username` `Headline`, trailing 32.dp gradient avatar (tap → profile / Kik Code). No call/video icons.
+
+## 5. Motion
+
+Kik motion is soft spring, 0.15–0.32s.
+
+| Moment | Compose recipe |
+|--------|----------------|
+| Outgoing bubble send | new bubble `slideInVertically { it } + scaleIn(initialScale = 0.88f, spring(dampingRatio = 0.8f))` |
+| S/D/R receipt | **no animation** — instant glyph swap; the R-to-Blue recolor is the only "event" |
+| List row reorder | `LazyColumn` items `animateItemPlacement(tween(250))` when a chat bumps to the top |
+| Bot suggested-reply chips | `AnimatedVisibility` `fadeIn(tween(200)) + slideInVertically { it / 4 }` |
+| Kik Code match | plate `animateFloatAsState` scale 1 → 1.1 → 1 pulse, then nav push |
+| Tab switch | instant; icon tint `animateColorAsState` `tween(150)` |
+
+```kotlin
+// Canonical outgoing-bubble entrance
+AnimatedVisibility(
+    visible = true,
+    enter = slideInVertically(spring(dampingRatio = 0.8f)) { it / 2 } +
+            scaleIn(initialScale = 0.88f, animationSpec = spring(dampingRatio = 0.8f)),
+) { KikBubble(/* … */) }
+```
+
+Haptics: `LocalHapticFeedback.performHapticFeedback(HapticFeedbackType.LongPress)` for send and bot-button tap; `HapticFeedbackConstants.CONFIRM` (via `LocalView`) on Kik Code match / friend added. The receipt change is visual only (no haptic, no animation).
+
+## 6. Icons
+
+Kik uses a custom brand glyph set; the closest first-party Compose set is `androidx.compose.material:material-icons-extended`.
+
+| Purpose | SF Symbol (iOS) | Material Icon (Compose) |
+|---------|-----------------|--------------------------|
+| Back | `chevron.left` | `Icons.Filled.ChevronLeft` |
+| New chat | `plus` | `Icons.Filled.Add` |
+| Scan / camera | `qrcode.viewfinder` | `Icons.Filled.QrCodeScanner` |
+| Attachment | `plus` | `Icons.Filled.Add` |
+| Search | `magnifyingglass` | `Icons.Filled.Search` |
+| Chats (tab) | `bubble.left.fill` | `Icons.Filled.ChatBubble` |
+| People (tab) | `person.2.fill` | `Icons.Filled.People` |
+| Discover (tab) | `sparkles` | `Icons.Filled.AutoAwesome` |
+| Kik Code (tab) | `qrcode` | `Icons.Filled.QrCode` |
+| GIF | `photo.stack` | `Icons.Filled.Gif` |
+| Web content | `globe` | `Icons.Filled.Public` |
+| Failed message | `exclamationmark.circle.fill` | `Icons.Filled.ErrorOutline` |
+| Group | `person.3.fill` | `Icons.Filled.Groups` |
+| Block / report | `hand.raised.fill` | `Icons.Filled.Block` |
+| Settings | `gearshape.fill` | `Icons.Filled.Settings` |
+| Share Kik Code | `square.and.arrow.up` | `Icons.Filled.Share` |
+
+## 7. Minimum SDK & Accessibility Notes
+
+- **minSdk 24** (Compose floor 21; spring + `Canvas` comfortable at 24). `compileSdk 34+`, Compose BOM `2024.09+`, Kotlin `2.0+`.
+- **Edge-to-edge**: `enableEdgeToEdge()`; white canvas wants dark system-bar content (light-content on the neutral dark canvas). Compose bar above the IME — `Modifier.imePadding()` on the thread `LazyColumn`.
+- **Font**: Kik's brand face is proprietary — bundle Inter (SIL OFL) in `res/font/`; keep ExtraBold/Bold for titles and the username headline. `sp` honors the user's font scale.
+- **Font scaling**: scale titles/headline/row-title/body/previews; pin layout-sensitive text (timestamps, 11sp tab labels, the S/D/R glyph, "BOT" tag) via a fixed-`fontScale` `LocalDensity`; keep the Kik Code plate fixed.
+- **TalkBack**: spell receipts as values ("Sent"/"Delivered"/"Read") via `stateDescription`, not the bare letter; bot rows announce "{name}, bot"; usernames read with leading "at"; the Kik Code uses `contentDescription = "Kik Code, double-tap to share"`. The Read-Blue receipt is reinforced by the explicit "R" so it survives color-blindness.
+- **Touch targets**: Material guidance 48.dp — give the 22.dp attachment icon and the "Send" text label a 48.dp hit box; list rows / tabs / suggested-reply chips are full-press; the Kik Code plate is fully tappable.
+- **Contrast**: dark-cyan ink `#002A36` on bright `#00B0F0` passes WCAG AA — never white on the bright Blue; primary text on `#E9EAEC`/`#25282D` passes AA.
+- **Reduce motion**: when `Settings.Global.ANIMATOR_DURATION_SCALE == 0`, disable the bubble spring-in (crossfade) and the Kik Code pulse; the receipt has no animation to disable.
+- **Dark mode**: invert via the `Dark*` palette — neutral `#121316`, NOT color-cast; Kik Blue `#00B0F0` holds; incoming → `#25282D`, text → `#F1F2F4`; the R receipt stays `#00B0F0` in both modes. Shadows fade on dark, so add a 1dp `DarkDivider` border to floating menus as the elevation cue; keep the Kik Code plate flat & high-contrast for reliable scanning. Do **not** enable Material You `dynamicColorScheme()` — Kik's modern-Blue identity must hold regardless of wallpaper.