designmd-forge 1.2.0

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

@@ -0,0 +1,695 @@
+# Waze (iOS) — Jetpack Compose Implementation Guide
+
+Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file ports Waze's playful, cartoon-forward visual language to **Android with Jetpack Compose (Material 3)**: a color token object, a `Typography` set, paste-ready `@Composable`s (the cartoon hazard speech bubble, the cyan arrow puck, the next-turn card, the report FAB, the speed-limit tile, the "Go" button), `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 (the Waze Purple + Cyan electric duo, the **chunky cartoon speech-bubble hazard reports with triangular tails**, the cyan arrow puck, the loud saturated cartography, the tinted purple FAB shadow, Boing's roundness) while making everything idiomatic Android — Google Maps Compose instead of MapKit, SF Pro Rounded's analog (`FontFamily` fallback) for Boing, custom `Shape`s for the tail and arrow, `LocalHapticFeedback` instead of `.sensoryFeedback`, `sp`/`dp` instead of `pt`.
+
+Assumes Compose BOM `2024.09+`, Kotlin `2.0+`, `minSdk 24`, Material 3, and `com.google.maps.android:maps-compose` for the loud cartography. No color extraction, so `androidx.palette` is not required.
+
+## 1. Color Tokens
+
+```kotlin
+// ui/theme/WazeColors.kt
+import androidx.compose.ui.graphics.Color
+
+object WazeColors {
+    // Brand
+    val Purple      = Color(0xFF7E55BE) // logo, polyline, FAB, "Go", primary CTAs
+    val PurpleDeep  = Color(0xFF5B3C9A)
+    val PurpleTint  = Color(0xFFE8DEF5)
+    val Cyan        = Color(0xFF33CCFF) // location puck, info glyphs, 2nd logo color
+    val CyanDeep    = Color(0xFF0099E5)
+
+    // Hazard colors (the cartoon system)
+    val PoliceRed   = Color(0xFFEF6A65)
+    val TrafficOrng = Color(0xFFF69833)
+    val ClosureYel  = Color(0xFFF9C42E)
+    val ClearedGrn  = Color(0xFF75C73E)
+    val HazardBrown = Color(0xFF8B6F47)
+    val CameraGray  = Color(0xFF6B6B6B)
+
+    // Map cartography (light) — LOUD by design
+    val MapCream     = Color(0xFFFFFCF2)
+    val MapWater     = Color(0xFF9BDEEF)
+    val MapPark      = Color(0xFFC5E89B)
+    val MapRoadMajor = Color(0xFFFFFFFF)
+    val MapRoadMinor = Color(0xFFF5F0E5)
+    val MapHighway   = Color(0xFFFFD970)
+    val MapBuilding  = Color(0xFFE8E2D1)
+    val MapLabel     = Color(0xFF3D3D3D)
+
+    // UI chrome
+    val CardCanvas   = Color(0xFFFFFFFF)
+    val SurfaceGray  = Color(0xFFF5F5F7)
+    val SurfaceGray2 = Color(0xFFEAEAEC)
+    val Divider      = Color(0xFFD6D6D9)
+
+    // Text
+    val Ink       = Color(0xFF1A1A1A) // warm near-black
+    val Secondary = Color(0xFF6B6B6B)
+    val Tertiary  = Color(0xFFA0A0A0)
+
+    // Semantic
+    val Success = Color(0xFF34C759)
+    val Warning = Color(0xFFF9C42E)
+    val Error   = Color(0xFFEF6A65)
+
+    // Dark (night driving)
+    val DarkMapLand  = Color(0xFF1E2026)
+    val DarkMapWater = Color(0xFF0F3D5E)
+    val DarkMapPark  = Color(0xFF1F3A1F)
+    val DarkCardSurf = Color(0xFF262932)
+    val DarkSurface2 = Color(0xFF3A3D47)
+    val DarkDivider  = Color(0xFF4A4D58)
+    val PurpleDark   = Color(0xFF9F76DA) // brightened for dark legibility
+    val CyanDark     = Color(0xFF5DD9FF)
+}
+```
+
+Waze is a map-first app: a loud light cartography by day, near-black "night driving" by night — but the **Waze Purple + Cyan stay at brand saturation in both**. Wire both Material 3 schemes accordingly.
+
+```kotlin
+// ui/theme/Theme.kt
+import androidx.compose.material3.lightColorScheme
+import androidx.compose.material3.darkColorScheme
+import androidx.compose.material3.MaterialTheme
+
+private val WazeLight = lightColorScheme(
+    primary        = WazeColors.Purple,
+    onPrimary      = Color.White,
+    secondary      = WazeColors.Cyan,
+    background      = WazeColors.CardCanvas,
+    onBackground   = WazeColors.Ink,
+    surface        = WazeColors.CardCanvas,
+    onSurface      = WazeColors.Ink,
+    surfaceVariant = WazeColors.SurfaceGray,
+    outline        = WazeColors.Divider,
+    error          = WazeColors.Error,
+)
+
+private val WazeDark = darkColorScheme(
+    primary        = WazeColors.PurpleDark,   // brightened, still brand
+    onPrimary      = Color.White,
+    secondary      = WazeColors.CyanDark,
+    background      = WazeColors.DarkMapLand,
+    onBackground   = Color.White,
+    surface        = WazeColors.DarkCardSurf,
+    onSurface      = Color.White,
+    surfaceVariant = WazeColors.DarkSurface2,
+    outline        = WazeColors.DarkDivider,
+    error          = WazeColors.Error,
+)
+
+@Composable
+fun WazeTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit) =
+    MaterialTheme(
+        colorScheme = if (darkTheme) WazeDark else WazeLight,
+        typography = WazeTypography,
+        content = content,
+    )
+```
+
+## 2. Typography
+
+Waze ships **Boing**, a proprietary rounded sans — roundness IS the brand. The correct Android fallback is the rounded system family. Compose has no built-in `.rounded` design like iOS, so bundle Boing TTFs in `res/font/`; if unavailable, ship a rounded open-source face (Quicksand / Nunito) as the fallback `FontFamily`. **Boing Mono on every numeric** (distance, time, speed, ETA) — variable widths break the at-a-glance driving read.
+
+```kotlin
+// ui/theme/WazeType.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
+
+// Boing, with a rounded open-source fallback (Quicksand/Nunito) bundled in res/font/
+val Boing = FontFamily(
+    Font(R.font.boing_regular, FontWeight.Normal), // 400
+    Font(R.font.boing_bold,    FontWeight.Bold),   // 700
+    Font(R.font.boing_black,   FontWeight.Black),  // 900 — hero moments only
+)
+val BoingMono = FontFamily(
+    Font(R.font.boing_mono_medium, FontWeight.Medium),
+    Font(R.font.boing_mono_bold,   FontWeight.Bold),
+    Font(R.font.boing_mono_black,  FontWeight.Black),
+)
+
+// Named ramp — mirrors DESIGN.md §3 exactly (pt → sp 1:1). Numerics use BoingMono + tabular figures.
+object WazeText {
+    val HeroStreet     = TextStyle(Boing,     fontWeight = FontWeight.Black,  fontSize = 32.sp, lineHeight = 35.sp, letterSpacing = (-0.4).sp)
+    val NextTurnDist   = TextStyle(BoingMono, fontWeight = FontWeight.Bold,   fontSize = 28.sp, lineHeight = 31.sp, fontFeatureSettings = "tnum")
+    val StepTitle      = TextStyle(Boing,     fontWeight = FontWeight.Bold,   fontSize = 22.sp, lineHeight = 26.sp, letterSpacing = (-0.2).sp)
+    val StepSubtitle   = TextStyle(Boing,     fontWeight = FontWeight.Normal, fontSize = 17.sp, lineHeight = 22.sp)
+    val ETATime        = TextStyle(BoingMono, fontWeight = FontWeight.Bold,   fontSize = 24.sp, lineHeight = 26.sp, fontFeatureSettings = "tnum")
+    val ETADistance    = TextStyle(BoingMono, fontWeight = FontWeight.Medium, fontSize = 17.sp, lineHeight = 20.sp, fontFeatureSettings = "tnum")
+    val PlaceTitle     = TextStyle(Boing,     fontWeight = FontWeight.Bold,   fontSize = 26.sp, lineHeight = 30.sp, letterSpacing = (-0.3).sp)
+    val PlaceSubtitle  = TextStyle(Boing,     fontWeight = FontWeight.Normal, fontSize = 15.sp, lineHeight = 20.sp)
+    val SearchHint     = TextStyle(Boing,     fontWeight = FontWeight.Normal, fontSize = 17.sp, lineHeight = 22.sp)
+    val Section        = TextStyle(Boing,     fontWeight = FontWeight.Bold,   fontSize = 13.sp, lineHeight = 16.sp, letterSpacing = 0.6.sp) // UPPERCASE at call site
+    val ListTitle      = TextStyle(Boing,     fontWeight = FontWeight.Medium, fontSize = 17.sp, lineHeight = 22.sp)
+    val ListSubtitle   = TextStyle(Boing,     fontWeight = FontWeight.Normal, fontSize = 13.sp, lineHeight = 16.sp)
+    val SpeedLimitNum  = TextStyle(BoingMono, fontWeight = FontWeight.Black,  fontSize = 22.sp, lineHeight = 22.sp, fontFeatureSettings = "tnum")
+    val CurrentSpeed   = TextStyle(BoingMono, fontWeight = FontWeight.Bold,   fontSize = 32.sp, lineHeight = 32.sp, fontFeatureSettings = "tnum")
+    val SpeedLimitLbl  = TextStyle(Boing,     fontWeight = FontWeight.Bold,   fontSize = 9.sp,  lineHeight = 11.sp)
+    val MphLabel       = TextStyle(Boing,     fontWeight = FontWeight.Normal, fontSize = 11.sp, lineHeight = 13.sp)
+    val HazardTitle    = TextStyle(Boing,     fontWeight = FontWeight.Bold,   fontSize = 14.sp, lineHeight = 15.sp)
+    val HazardTime     = TextStyle(Boing,     fontWeight = FontWeight.Normal, fontSize = 11.sp, lineHeight = 12.sp)
+    val Button         = TextStyle(Boing,     fontWeight = FontWeight.Bold,   fontSize = 17.sp, lineHeight = 17.sp)
+    val Caption        = TextStyle(Boing,     fontWeight = FontWeight.Normal, fontSize = 12.sp, lineHeight = 16.sp)
+    val Tab            = TextStyle(Boing,     fontWeight = FontWeight.Medium, fontSize = 10.sp, lineHeight = 10.sp, letterSpacing = 0.1.sp)
+}
+
+// Map onto Material 3 slots so stock components inherit the brand
+val WazeTypography = Typography(
+    headlineLarge = WazeText.HeroStreet,
+    headlineSmall = WazeText.PlaceTitle,
+    titleMedium   = WazeText.StepTitle,
+    bodyMedium    = WazeText.PlaceSubtitle,
+    labelLarge    = WazeText.Button,
+    labelSmall    = WazeText.Tab,
+)
+```
+
+## 3. Signature Components
+
+### Hazard Speech Bubble (The Signature)
+
+The single most recognizable component: a chunky 14.dp-corner rounded rectangle in a full-saturation hazard color with a **triangular tail** pointing down to the location. Implemented with a custom `Shape` for the tail (no SF Symbol / Compose primitive matches it).
+
+```kotlin
+import androidx.compose.animation.core.Animatable
+import androidx.compose.animation.core.spring
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.*
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+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.drawBehind
+import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Path
+import androidx.compose.ui.graphics.drawscope.Stroke
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.unit.dp
+
+enum class HazardType { POLICE, TRAFFIC, CLOSURE, CLEARED, POTHOLE, CAMERA }
+
+val HazardType.color: Color
+    get() = when (this) {
+        HazardType.POLICE  -> WazeColors.PoliceRed
+        HazardType.TRAFFIC -> WazeColors.TrafficOrng
+        HazardType.CLOSURE -> WazeColors.ClosureYel
+        HazardType.CLEARED -> WazeColors.ClearedGrn
+        HazardType.POTHOLE -> WazeColors.HazardBrown
+        HazardType.CAMERA  -> WazeColors.CameraGray
+    }
+
+val HazardType.icon: ImageVector
+    get() = when (this) {
+        HazardType.POLICE  -> Icons.Filled.Shield
+        HazardType.TRAFFIC -> Icons.Filled.Warning
+        HazardType.CLOSURE -> Icons.Filled.Block
+        HazardType.CLEARED -> Icons.Filled.CheckCircle
+        HazardType.POTHOLE -> Icons.Filled.ReportProblem
+        HazardType.CAMERA  -> Icons.Filled.CameraAlt
+    }
+
+val HazardType.title: String
+    get() = name.lowercase().replaceFirstChar { it.uppercase() }
+
+@Composable
+fun HazardSpeechBubble(
+    type: HazardType,
+    timeAgo: String?,
+    modifier: Modifier = Modifier,
+) {
+    val appear = remember { Animatable(0f) }
+    LaunchedEffect(Unit) {
+        appear.animateTo(1f, spring(dampingRatio = 0.55f, stiffness = 400f)) // pop: 0 → 1.15 → 1.0
+    }
+
+    Column(
+        modifier = modifier
+            .graphicsLayer { scaleX = appear.value; scaleY = appear.value }
+            .shadow(12.dp, RoundedCornerShape(14.dp), spotColor = Color.Black.copy(alpha = 0.2f)),
+        horizontalAlignment = Alignment.CenterHorizontally,
+    ) {
+        Row(
+            Modifier
+                .clip(RoundedCornerShape(14.dp))
+                .background(type.color)
+                .widthIn(min = 88.dp)
+                .padding(horizontal = 12.dp, vertical = 8.dp),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(8.dp),
+        ) {
+            Icon(type.icon, contentDescription = null, tint = Color.White, modifier = Modifier.size(24.dp))
+            Column {
+                Text(type.title, style = WazeText.HazardTitle, color = Color.White)
+                if (timeAgo != null) Text(timeAgo, style = WazeText.HazardTime, color = Color.White.copy(alpha = 0.8f))
+            }
+        }
+        // Downward triangular tail — custom drawn, same color as the bubble
+        Box(
+            Modifier
+                .size(12.dp, 8.dp)
+                .drawBehind {
+                    val p = Path().apply {
+                        moveTo(0f, 0f)
+                        lineTo(size.width, 0f)
+                        lineTo(size.width / 2f, size.height)
+                        close()
+                    }
+                    drawPath(p, type.color)
+                }
+        )
+    }
+}
+```
+
+### Report FAB (Tinted Purple Shadow — Signature)
+
+Bottom-right Waze Purple circle with a **tinted purple shadow** (`spotColor` purple, not black). Opens the report wheel.
+
+```kotlin
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.collectIsPressedAsState
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.ui.draw.scale
+import androidx.compose.ui.hapticfeedback.HapticFeedbackType
+import androidx.compose.ui.platform.LocalHapticFeedback
+
+@Composable
+fun WazeFAB(onClick: () -> Unit, modifier: Modifier = Modifier) {
+    val interaction = remember { MutableInteractionSource() }
+    val pressed by interaction.collectIsPressedAsState()
+    val scale by animateFloatAsState(if (pressed) 0.94f else 1f, label = "fabScale")
+    val haptics = LocalHapticFeedback.current
+
+    Box(
+        modifier = modifier
+            .size(56.dp)
+            .scale(scale)
+            .shadow(16.dp, CircleShape, spotColor = WazeColors.Purple, ambientColor = WazeColors.Purple) // SIGNATURE tinted purple
+            .clip(CircleShape)
+            .background(if (pressed) WazeColors.PurpleDeep else WazeColors.Purple)
+            .clickable(interaction, indication = null) {
+                haptics.performHapticFeedback(HapticFeedbackType.LongPress) // ~iOS medium impact
+                onClick()
+            }
+            .semantics { contentDescription = "Report a hazard" },
+        contentAlignment = Alignment.Center,
+    ) {
+        Icon(Icons.Filled.Campaign, contentDescription = null, tint = Color.White, modifier = Modifier.size(24.dp))
+    }
+}
+```
+
+> `spotColor` is honored on API 28+; on older devices draw a soft purple radial glow behind the circle so the signature reads on every device.
+
+### Current-Location Puck (Cyan Arrow with Pulse)
+
+Waze's puck is a **chunky cyan arrow** (NOT a dot), white-outlined, rotating with heading, with a faint 60.dp pulse ring. Both the arrow and the pulse are custom-drawn.
+
+```kotlin
+import androidx.compose.animation.core.*
+import androidx.compose.foundation.Canvas
+import androidx.compose.ui.geometry.Size
+import androidx.compose.ui.graphics.StrokeCap
+import androidx.compose.ui.graphics.drawscope.Stroke as DrawStroke
+
+@Composable
+fun WazeLocationPuck(headingDegrees: Float, modifier: Modifier = Modifier) {
+    val t = rememberInfiniteTransition(label = "puck")
+    val pulse by t.animateFloat(
+        0f, 1f, infiniteRepeatable(tween(2000, easing = LinearEasing), RepeatMode.Restart), label = "pulse",
+    )
+
+    Box(modifier, contentAlignment = Alignment.Center) {
+        // Outer cyan pulse ring — 0.15 alpha, scale 1.0 → 1.5
+        Box(
+            Modifier
+                .size(60.dp)
+                .graphicsLayer { scaleX = 1f + pulse * 0.5f; scaleY = 1f + pulse * 0.5f }
+                .background(WazeColors.Cyan.copy(alpha = 0.15f * (1f - pulse)), CircleShape)
+        )
+        // Chunky cyan arrow, rotates with heading, 3.dp white outline
+        Canvas(
+            Modifier.size(32.dp, 36.dp).graphicsLayer { rotationZ = headingDegrees }
+        ) {
+            val w = size.width
+            val h = size.height
+            val arrow = Path().apply {
+                moveTo(w * 0.5f, 0f)            // tip
+                lineTo(w, h * 0.85f)            // bottom-right
+                lineTo(w * 0.5f, h * 0.70f)     // V indent
+                lineTo(0f, h * 0.85f)           // bottom-left
+                close()
+            }
+            drawPath(arrow, WazeColors.Cyan)
+            drawPath(arrow, Color.White, style = DrawStroke(width = 3.dp.toPx()))
+        }
+    }
+}
+```
+
+### Next-Turn Card (Top of Screen During Navigation)
+
+Full-width 100.dp solid Waze Purple card, 16.dp **bottom** corners only (extends into the safe area on top), big direction arrow + Mono distance + street name.
+
+```kotlin
+@Composable
+fun NextTurnCard(
+    arrowIcon: ImageVector,      // e.g. Icons.AutoMirrored.Filled.TurnRight
+    arrowRotation: Float,
+    distance: String,            // "0.4 mi"
+    streetName: String,          // "Market Street"
+    subInstruction: String?,     // "then turn left in 0.6 mi"
+    modifier: Modifier = Modifier,
+) {
+    Row(
+        modifier = modifier
+            .fillMaxWidth()
+            .clip(RoundedCornerShape(bottomStart = 16.dp, bottomEnd = 16.dp)) // top extends into safe area
+            .background(WazeColors.Purple)
+            .padding(horizontal = 20.dp, vertical = 16.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(16.dp),
+    ) {
+        Icon(
+            arrowIcon, contentDescription = null, tint = Color.White,
+            modifier = Modifier.size(64.dp).graphicsLayer { rotationZ = arrowRotation },
+        )
+        Column(Modifier.weight(1f), verticalArrangement = Arrangement.spacedBy(4.dp)) {
+            Text(distance, style = WazeText.NextTurnDist, color = Color.White)
+            Text(streetName, style = WazeText.StepTitle, color = Color.White, maxLines = 2)
+            if (subInstruction != null) {
+                Text(subInstruction, style = WazeText.Caption.copy(fontSize = 14.sp), color = Color.White.copy(alpha = 0.8f))
+            }
+        }
+    }
+}
+```
+
+### Speed Limit + Current Speed Tile
+
+US-style speed-limit signage as an 80×80.dp bottom-left tile; the current-speed number flips red when speeding.
+
+```kotlin
+import androidx.compose.foundation.border
+import androidx.compose.material3.HorizontalDivider
+
+@Composable
+fun SpeedTile(limit: Int, current: Int, modifier: Modifier = Modifier) {
+    val speeding = current > limit
+    Column(
+        modifier = modifier
+            .width(80.dp)
+            .shadow(8.dp, RoundedCornerShape(12.dp), spotColor = Color.Black.copy(alpha = 0.10f))
+            .clip(RoundedCornerShape(12.dp))
+            .background(WazeColors.CardCanvas)
+            .padding(8.dp),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.spacedBy(6.dp),
+    ) {
+        Text("SPEED LIMIT", style = WazeText.SpeedLimitLbl, color = WazeColors.Ink)
+        Box(
+            Modifier.size(40.dp).clip(CircleShape).background(Color.White).border(2.dp, WazeColors.Ink, CircleShape),
+            contentAlignment = Alignment.Center,
+        ) { Text("$limit", style = WazeText.SpeedLimitNum, color = WazeColors.Ink) }
+        HorizontalDivider(color = WazeColors.Divider, modifier = Modifier.padding(horizontal = 8.dp))
+        Row(verticalAlignment = Alignment.Bottom, horizontalArrangement = Arrangement.spacedBy(4.dp)) {
+            Text("$current", style = WazeText.CurrentSpeed, color = if (speeding) WazeColors.Error else WazeColors.Ink)
+            Text("mph", style = WazeText.MphLabel, color = WazeColors.Secondary)
+        }
+    }
+}
+```
+
+### ETA Bottom Bar & "Go" Button
+
+```kotlin
+@Composable
+fun WazeETABar(
+    duration: String,            // "12 min"
+    distance: String,            // "5.2 mi"
+    arrival: String,             // "6:14 PM"
+    alternativeRouteSaves: String?,  // "Save 3 min"
+    onEnd: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    Row(
+        modifier = modifier.fillMaxWidth().height(80.dp).background(WazeColors.CardCanvas).padding(horizontal = 20.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(16.dp),
+    ) {
+        Column(Modifier.weight(1f), verticalArrangement = Arrangement.spacedBy(4.dp)) {
+            Text(duration, style = WazeText.ETATime, color = WazeColors.Ink)
+            Text("$distance · $arrival", style = WazeText.ETADistance, color = WazeColors.Secondary)
+        }
+        if (alternativeRouteSaves != null) {
+            Box(
+                Modifier.clip(CircleShape).background(WazeColors.ClearedGrn).padding(horizontal = 14.dp, vertical = 8.dp)
+            ) { Text(alternativeRouteSaves, style = WazeText.Button.copy(fontSize = 14.sp), color = Color.White) }
+        }
+        Box(
+            Modifier.clip(CircleShape).background(WazeColors.CardCanvas).border(1.5.dp, WazeColors.Error, CircleShape)
+                .clickable(onClick = onEnd).padding(horizontal = 20.dp, vertical = 12.dp)
+        ) { Text("End", style = WazeText.Button, color = WazeColors.Error) }
+    }
+}
+
+@Composable
+fun WazeGoButton(onClick: () -> Unit, modifier: Modifier = Modifier) {
+    val interaction = remember { MutableInteractionSource() }
+    val pressed by interaction.collectIsPressedAsState()
+    val scale by animateFloatAsState(if (pressed) 0.97f else 1f, label = "goScale")
+    val haptics = LocalHapticFeedback.current
+
+    Box(
+        modifier = modifier
+            .fillMaxWidth()
+            .height(56.dp)
+            .scale(scale)
+            .shadow(12.dp, CircleShape, spotColor = WazeColors.Purple, ambientColor = WazeColors.Purple) // tinted purple
+            .clip(CircleShape)
+            .background(if (pressed) WazeColors.PurpleDeep else WazeColors.Purple)
+            .clickable(interaction, indication = null) {
+                haptics.performHapticFeedback(HapticFeedbackType.LongPress) // ~iOS heavy impact (see §6 for stronger)
+                onClick()
+            },
+        contentAlignment = Alignment.Center,
+    ) {
+        Text("Go", style = WazeText.Button, color = Color.White)
+    }
+}
+```
+
+## 4. Loud Cartography + Report Wheel (the distinctive interaction)
+
+Waze has no color extraction. Its defining systems are the **loud saturated cartography** and the **cartoon report wheel**. Use Google Maps Compose with a JSON style built from the bright Waze tokens; the polyline is a 6.dp purple "ant trail".
+
+```kotlin
+import com.google.maps.android.compose.GoogleMap
+import com.google.maps.android.compose.MapProperties
+import com.google.maps.android.compose.Polyline
+import com.google.maps.android.compose.rememberCameraPositionState
+import com.google.android.gms.maps.model.MapStyleOptions
+import com.google.android.gms.maps.model.LatLng
+import com.google.android.gms.maps.model.RoundCap
+
+@Composable
+fun WazeMap(route: List<LatLng>, modifier: Modifier = Modifier, darkTheme: Boolean = isSystemInDarkTheme()) {
+    val cameraPositionState = rememberCameraPositionState()
+    GoogleMap(
+        modifier = modifier.fillMaxSize(),
+        cameraPositionState = cameraPositionState,
+        properties = MapProperties(
+            // JSON style from Waze tokens: water #9BDEEF, parks #C5E89B, land #FFFCF2,
+            // highways #FFD970, roads #FFFFFF — LOUD by design (dark: #0F3D5E / #1F3A1F / #1E2026)
+            mapStyleOptions = MapStyleOptions(if (darkTheme) WAZE_MAP_STYLE_DARK else WAZE_MAP_STYLE_LIGHT),
+        ),
+    ) {
+        Polyline(
+            points = route,
+            color = WazeColors.Purple,           // 6.dp purple — thicker than typical
+            width = with(androidx.compose.ui.platform.LocalDensity.current) { 6.dp.toPx() },
+            startCap = RoundCap(), endCap = RoundCap(),
+        )
+        // Ant-trail chevron overlay: a second dashed polyline whose pattern offset animates (see §6)
+    }
+}
+
+const val WAZE_MAP_STYLE_LIGHT = """[ /* water #9BDEEF, parks #C5E89B, land #FFFCF2, highway #FFD970, roads #FFFFFF */ ]"""
+const val WAZE_MAP_STYLE_DARK  = """[ /* water #0F3D5E, parks #1F3A1F, land #1E2026, roads #2F2F2F */ ]"""
+```
+
+### Report Wheel (Cartoon Dial)
+
+A literal cartoon dial — embrace it, never tone it down. 8 wedges of hazard icons over a purple scrim.
+
+```kotlin
+import androidx.compose.foundation.layout.Box
+import kotlin.math.cos
+import kotlin.math.sin
+
+@Composable
+fun ReportWheel(
+    onPick: (HazardType) -> Unit,
+    onClose: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    val types = listOf(
+        HazardType.POLICE, HazardType.TRAFFIC, HazardType.CLOSURE, HazardType.POTHOLE,
+        HazardType.CAMERA, HazardType.CLEARED,
+    )
+    val wheelScale = remember { Animatable(0f) }
+    LaunchedEffect(Unit) { wheelScale.animateTo(1f, spring(dampingRatio = 0.7f, stiffness = 300f)) } // spins in
+
+    Box(
+        modifier
+            .fillMaxSize()
+            .background(WazeColors.Purple.copy(alpha = 0.85f)) // semi-transparent purple scrim
+            .clickable(interactionSource = remember { MutableInteractionSource() }, indication = null, onClick = onClose),
+        contentAlignment = Alignment.BottomCenter,
+    ) {
+        Box(
+            Modifier
+                .padding(bottom = 80.dp)
+                .size(280.dp)
+                .graphicsLayer { scaleX = wheelScale.value; scaleY = wheelScale.value }
+                .clip(CircleShape)
+                .background(WazeColors.CardCanvas),
+            contentAlignment = Alignment.Center,
+        ) {
+            types.forEachIndexed { i, type ->
+                val angle = Math.toRadians((i * (360.0 / types.size)) - 90.0)
+                val r = 90.dp
+                Box(
+                    Modifier
+                        .offset(x = (cos(angle) * r.value).dp, y = (sin(angle) * r.value).dp)
+                        .size(44.dp).clip(CircleShape).background(type.color.copy(alpha = 0.20f))
+                        .clickable { onPick(type) },
+                    contentAlignment = Alignment.Center,
+                ) { Icon(type.icon, contentDescription = type.title, tint = type.color, modifier = Modifier.size(28.dp)) }
+            }
+            Box(
+                Modifier.size(56.dp).clip(CircleShape).background(WazeColors.SurfaceGray).clickable(onClick = onClose),
+                contentAlignment = Alignment.Center,
+            ) { Icon(Icons.Filled.Close, contentDescription = "Close", tint = WazeColors.Ink, modifier = Modifier.size(24.dp)) }
+        }
+    }
+}
+```
+
+## 5. Navigation (search bottom sheet, no tab bar)
+
+Waze has no bottom tab bar during driving — the map is full-screen with the next-turn card on top, the ETA bar on the bottom, and a **search bottom sheet** (3 detents: small ≈88.dp, medium ≈50%, full). Android has no live blur; Waze uses a **solid white card** anyway (explicitly unlike Apple's translucent sheet), so a plain opaque `Surface` is the correct choice — no translucency needed.
+
+```kotlin
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.ModalBottomSheet
+import androidx.compose.material3.rememberModalBottomSheetState
+import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.ui.graphics.SolidColor
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun WazeSearchSheet(onDismiss: () -> Unit, content: @Composable ColumnScope.() -> Unit) {
+    ModalBottomSheet(
+        onDismissRequest = onDismiss,
+        sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = false),
+        containerColor = WazeColors.CardCanvas, // solid white — Waze never uses a translucent sheet
+        shape = RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp),
+        dragHandle = {
+            Box(Modifier.fillMaxWidth().padding(top = 8.dp, bottom = 8.dp), contentAlignment = Alignment.Center) {
+                Box(Modifier.size(36.dp, 5.dp).clip(RoundedCornerShape(2.5.dp)).background(WazeColors.Divider))
+            }
+        },
+    ) {
+        Column(Modifier.padding(16.dp), verticalArrangement = Arrangement.spacedBy(16.dp)) {
+            Row(
+                Modifier.fillMaxWidth().height(48.dp).clip(RoundedCornerShape(16.dp)).background(WazeColors.SurfaceGray)
+                    .padding(horizontal = 16.dp),
+                verticalAlignment = Alignment.CenterVertically,
+                horizontalArrangement = Arrangement.spacedBy(8.dp),
+            ) {
+                Icon(Icons.Filled.Search, null, tint = WazeColors.Secondary, modifier = Modifier.size(17.dp))
+                Text("Where to?", style = WazeText.SearchHint, color = WazeColors.Tertiary)
+            }
+            content()
+        }
+    }
+}
+```
+
+## 6. Motion
+
+| Moment | Compose recipe |
+|--------|----------------|
+| FAB tap | `animateFloatAsState(0.94f)` + shadow tighten; `HapticFeedbackType.LongPress` |
+| Report wheel open | `Animatable.animateTo(1f, spring(dampingRatio = 0.7f, stiffness = 300f))` — wheel spins in (~350ms) |
+| Hazard bubble appear | `Animatable.animateTo(1f, spring(dampingRatio = 0.55f))` — pop 0 → 1.15 → 1.0 over ~400ms |
+| Hazard dismiss (timer) | `animateFloatAsState` alpha 1 → 0 over 1000ms + slight `rotationZ` |
+| Location puck pulse | `rememberInfiniteTransition` scale 1.0 → 1.5, alpha 0.15 → 0, 2000ms `RepeatMode.Restart` |
+| Polyline ant trail | animate a dash-phase `Float` linearly, 2s loop, `RepeatMode.Restart` |
+| Next-turn update | `Crossfade` 250ms + arrow `rotationZ` to the new turn |
+| "Go" tap | `animateFloatAsState(0.97f)` + heavy haptic; 400ms `Crossfade` into navigation mode |
+| Reach destination | confetti/sparkle `Canvas` over the destination pin + success haptic |
+
+```kotlin
+// Polyline "ant trail" — animate the dash phase (DESIGN.md §6: 1 chevron / 2 s)
+@Composable
+fun rememberAntTrailPhase(): Float {
+    val t = rememberInfiniteTransition(label = "antTrail")
+    val phase by t.animateFloat(
+        0f, -24f, infiniteRepeatable(tween(2000, easing = LinearEasing), RepeatMode.Restart), label = "phase",
+    )
+    return phase // feed into a PathEffect dashPathEffect on a Canvas-drawn route overlay
+}
+```
+
+Haptics: prefer `LocalHapticFeedback`. For the heavier "Go" / arrival moments use a `Vibrator` `VibrationEffect.createOneShot(25, VibrationEffect.DEFAULT_AMPLITUDE)` to approximate iOS `.impact(.heavy)` / `.success`; the speeding warning maps to a single `VibrationEffect.createOneShot(15, ...)` triggered once when current speed crosses the limit.
+
+## 7. Icons
+
+Waze ships custom cartoon glyphs (the police hat, the chunky direction arrows); the closest first-party set is `androidx.compose.material:material-icons-extended`. For the playful cartoon feel that makes contributing fun, export Waze's hazard glyphs and the direction arrows as vector drawables and load via `ImageVector.vectorResource(R.drawable.…)`. The triangular speech-bubble tail and the cyan arrow puck are custom `Path`s (above) — no SF Symbol or Compose primitive matches them.
+
+| Purpose | SF Symbol (iOS) | Material Icon (Compose) |
+|---------|-----------------|--------------------------|
+| FAB report icon | `exclamationmark.bubble.fill` | `Icons.Filled.Campaign` (or custom speech-bubble drawable) |
+| Police hazard | `shield.fill` (or custom hat) | `Icons.Filled.Shield` |
+| Traffic hazard | `cone.fill` | `Icons.Filled.Warning` |
+| Closure | `xmark.octagon.fill` | `Icons.Filled.Block` |
+| Cleared | `checkmark.circle.fill` | `Icons.Filled.CheckCircle` |
+| Pothole | `exclamationmark.triangle.fill` | `Icons.Filled.ReportProblem` |
+| Camera | `camera.fill` | `Icons.Filled.CameraAlt` |
+| Direction right / left | `arrow.turn.up.right` / `.left` | `Icons.AutoMirrored.Filled.TurnRight` / `TurnLeft` |
+| Search | `magnifyingglass` | `Icons.Filled.Search` |
+| Speed warning | `exclamationmark.octagon.fill` | `Icons.Filled.Report` |
+| Beacon share | `bell.badge.fill` | `Icons.Filled.NotificationsActive` |
+| Gas | `fuelpump.fill` | `Icons.Filled.LocalGasStation` |
+| Home | `house.fill` | `Icons.Filled.Home` |
+| Work | `briefcase.fill` | `Icons.Filled.Work` |
+| Favorite | `star.fill` | `Icons.Filled.Star` |
+| Recent | `clock` | `Icons.Filled.History` |
+
+## 8. Minimum SDK & Accessibility Notes
+
+- **minSdk 24** (Compose floor is 21; Maps Compose + the tinted shadows are comfortable at 24 — `spotColor` needs API 28+, fall back to a soft purple radial glow behind the FAB/"Go" on older devices). `compileSdk 34+`, Compose BOM `2024.09+`, Kotlin `2.0+`. Add a Maps API key in the manifest.
+- **Edge-to-edge**: call `enableEdgeToEdge()`. The next-turn card intentionally extends into the status-bar area (top corners are square) with 16.dp of content padding from the safe-area top; the ETA bar and FAB respect `WindowInsets.navigationBars` (the FAB sits 16.dp above the ETA bar's inset).
+- **Font scaling**: `sp` honors the user's font scale automatically — keep it on the place card title, body, list rows, and search. **FIX** the glance-critical text — next-turn card, ETA numbers, speed-limit number, hazard speech-bubble text are read at driving speed and must not reflow: derive from `dp` or wrap those subtrees in `CompositionLocalProvider(LocalDensity provides Density(density, fontScale = 1f))`.
+- **TalkBack**: the hazard bubble reads as `"$type, reported $timeAgo, ahead"` via `Modifier.semantics(mergeDescendants = true)`; the location puck announces `"Your current position, heading <direction>"`; the speed tile reads limit + current speed and announces a warning state.
+- **Touch targets**: Material guidance is 48.dp minimum. The 56.dp FAB and 56.dp "Go" button clear it; the full hazard bubble is tappable; report-wheel wedges are 44.dp (pad to a 48.dp hit slop); the Wazer avatar carries a 48.dp hit area on a 24.dp glyph.
+- **Contrast**: Ink `#1A1A1A` on white passes WCAG AAA. White on Waze Purple `#7E55BE` passes AAA at all sizes (next-turn card, "Go"). The hazard speech bubbles use white text on full-saturation hazard colors — Closure Yellow `#F9C42E` with white is a known low-contrast pair; keep the 14sp Bold title weight (it passes AA at that weight) and never go below 14sp for hazard text. The 0.8-alpha white timestamp on hazard colors stays ≥11sp Bold-adjacent.
+- **Reduce motion**: when a reduced-motion preference is set, skip the hazard "pop", freeze the location-puck pulse and the polyline ant trail (static), and replace the "Go" → navigation crossfade with an instant cut.
+- **Dynamic color**: do **not** enable Material You `dynamicColorScheme` — Waze's identity is the fixed electric duo (Waze Purple `#7E55BE` + Cyan `#33CCFF`) and the full-saturation hazard palette. These must stay at brand saturation across light/dark/night modes; wallpaper-derived tints would mute the cartoon system and break the at-a-glance hazard color code.