designmd-forge 1.2.0

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

@@ -0,0 +1,488 @@
+# Vrbo (iOS) — Jetpack Compose Implementation Guide
+
+Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file ports Vrbo's visual language to **Android with Jetpack Compose (Material 3)**: a color token object, a `Typography` set, the signature photo gallery, the sticky booking bar, listing cards, map price pins, the bottom bar, 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 (Vrbo's white canvas, the whole-home framing, full-bleed swipeable galleries, the sticky price-forward booking bar, the single gold review star) while making everything idiomatic Android — `NavigationBar` instead of a UITabBar, `HorizontalPager` for the gallery, `ModalBottomSheet` for the date picker, Maps Compose for pins, `sp`/`dp` instead of `pt`.
+
+Assumes Compose BOM `2024.09+`, Kotlin `2.0+`, `minSdk 24`, Material 3, [Coil](https://coil-kt.github.io/coil/) `2.6+` for photos, Maps Compose for the map. Vrbo has a fixed brand palette (no Material You extraction). It is light-mode-first; a full dark scheme is provided.
+
+## 1. Color Tokens
+
+```kotlin
+// ui/theme/VrboColors.kt
+import androidx.compose.ui.graphics.Color
+
+object VrboColors {
+    // Canvas & Surfaces (Light)
+    val Canvas         = Color(0xFFFFFFFF)
+    val SurfaceGray    = Color(0xFFF3F5F8)
+    val SurfacePressed = Color(0xFFE7EBF1)
+    val Divider        = Color(0xFFE1E5EB)
+
+    // Canvas & Surfaces (Dark)
+    val DarkCanvas   = Color(0xFF101317) // cool blue-charcoal — NOT pure black
+    val DarkSurface1 = Color(0xFF181C22)
+    val DarkSurface2 = Color(0xFF21262E)
+    val DarkDivider  = Color(0xFF2A3038)
+
+    // Text
+    val TextPrimary       = Color(0xFF15181D) // near-black, NOT pure black
+    val TextSecondary     = Color(0xFF5A6470)
+    val TextTertiary      = Color(0xFF8A93A0)
+    val DarkTextPrimary   = Color(0xFFEDEFF2)
+    val DarkTextSecondary = Color(0xFFA3AAB4)
+
+    // Brand
+    val Blue        = Color(0xFF245ABC)
+    val BluePressed = Color(0xFF1B4794)
+    val BlueBright  = Color(0xFF4F8BF0) // dark-mode links/pins/outline
+    val SkyBlue     = Color(0xFF1D6FB8)
+
+    // Accent & semantic
+    val GoldStar = Color(0xFFF2B01E) // the only warm color — constant across schemes
+    val Success  = Color(0xFF1F9D57)
+    val Error    = Color(0xFFE04444)
+    val Warning  = Color(0xFFE8920C)
+}
+```
+
+Wire it into both schemes. Vrbo is light-first (bright white); the dark scheme uses `#101317` blue-charcoal, never true black. Links/pins/outline brighten to `#4F8BF0` on dark; the "Book now" fill stays the deep brand blue.
+
+```kotlin
+// ui/theme/Theme.kt
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.material3.*
+import androidx.compose.runtime.Composable
+
+private val VrboLight = lightColorScheme(
+    primary        = VrboColors.Blue,
+    onPrimary      = Color.White,
+    background      = VrboColors.Canvas,
+    onBackground   = VrboColors.TextPrimary,
+    surface        = VrboColors.SurfaceGray,
+    onSurface      = VrboColors.TextPrimary,
+    surfaceVariant = VrboColors.SurfacePressed,
+    outline        = VrboColors.Divider,
+    error          = VrboColors.Error,
+)
+
+private val VrboDark = darkColorScheme(
+    primary        = VrboColors.Blue,      // "Book now" fill stays deep brand blue
+    onPrimary      = Color.White,
+    background      = VrboColors.DarkCanvas,
+    onBackground   = VrboColors.DarkTextPrimary,
+    surface        = VrboColors.DarkSurface1,
+    onSurface      = VrboColors.DarkTextPrimary,
+    surfaceVariant = VrboColors.DarkSurface2,
+    outline        = VrboColors.DarkDivider,
+    error          = VrboColors.Error,
+)
+
+@Composable
+fun VrboTheme(
+    dark: Boolean = isSystemInDarkTheme(),
+    content: @Composable () -> Unit,
+) = MaterialTheme(
+    colorScheme = if (dark) VrboDark else VrboLight,
+    typography  = VrboTypography,
+    content     = content,
+)
+
+// Links / pins / outline use BlueBright on dark; helper:
+@Composable
+fun vrboAccent(dark: Boolean = isSystemInDarkTheme()) =
+    if (dark) VrboColors.BlueBright else VrboColors.Blue
+```
+
+## 2. Typography
+
+Vrbo ships **no custom typeface** — it uses the platform system font with the OS font-scale. Price is one of the heaviest styles on every screen.
+
+```kotlin
+// ui/theme/VrboType.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
+
+private val Sys = FontFamily.Default // system font — no bundled face
+
+object VrboText {
+    val LargeTitle   = TextStyle(Sys, fontWeight = FontWeight.ExtraBold, fontSize = 32.sp, lineHeight = 37.sp, letterSpacing = (-0.4).sp)
+    val PriceHero    = TextStyle(Sys, fontWeight = FontWeight.ExtraBold, fontSize = 26.sp, lineHeight = 31.sp, letterSpacing = (-0.3).sp)
+    val ListingTitle = TextStyle(Sys, fontWeight = FontWeight.Bold,      fontSize = 21.sp, lineHeight = 26.sp, letterSpacing = (-0.3).sp)
+    val Section      = TextStyle(Sys, fontWeight = FontWeight.Bold,      fontSize = 18.sp, lineHeight = 23.sp, letterSpacing = (-0.2).sp)
+    val Body         = TextStyle(Sys, fontWeight = FontWeight.Normal,    fontSize = 16.sp, lineHeight = 24.sp)
+    val CardTitle    = TextStyle(Sys, fontWeight = FontWeight.SemiBold,  fontSize = 15.sp, lineHeight = 20.sp)
+    val FactValue    = TextStyle(Sys, fontWeight = FontWeight.Bold,      fontSize = 16.sp, lineHeight = 19.sp)
+    val Meta         = TextStyle(Sys, fontWeight = FontWeight.Normal,    fontSize = 14.sp, lineHeight = 19.sp)
+    val Badge        = TextStyle(Sys, fontWeight = FontWeight.Bold,      fontSize = 12.sp, lineHeight = 14.sp, letterSpacing = 0.2.sp)
+    val Button       = TextStyle(Sys, fontWeight = FontWeight.Bold,      fontSize = 16.sp, lineHeight = 16.sp)
+    val Tab          = TextStyle(Sys, fontWeight = FontWeight.Medium,    fontSize = 10.sp, lineHeight = 11.sp, letterSpacing = 0.1.sp)
+    val Caption      = TextStyle(Sys, fontWeight = FontWeight.Medium,    fontSize = 12.sp, lineHeight = 15.sp)
+}
+
+val VrboTypography = Typography(
+    headlineLarge  = VrboText.LargeTitle,
+    headlineMedium = VrboText.PriceHero,
+    titleMedium    = VrboText.ListingTitle,
+    bodyMedium     = VrboText.Body,
+    labelSmall     = VrboText.Tab,
+)
+```
+
+## 3. Signature Components
+
+### Photo Gallery (the core component)
+
+```kotlin
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.pager.HorizontalPager
+import androidx.compose.foundation.pager.rememberPagerState
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.*
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+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.graphics.Brush
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.unit.dp
+import coil.compose.AsyncImage
+
+@Composable
+fun PhotoGallery(
+    photos: List<String>,
+    saved: Boolean,
+    onBack: () -> Unit,
+    onShare: () -> Unit,
+    onToggleSave: () -> Unit,
+) {
+    val pager = rememberPagerState(pageCount = { photos.size })
+    Box(Modifier.fillMaxWidth().height(290.dp)) {
+        HorizontalPager(state = pager, modifier = Modifier.fillMaxSize()) { page ->
+            AsyncImage(model = photos[page], contentDescription = "Photo ${page + 1} of ${photos.size}",
+                modifier = Modifier.fillMaxSize(), contentScale = ContentScale.Crop)
+        }
+        Box(
+            Modifier.align(Alignment.BottomCenter).fillMaxWidth().height(145.dp)
+                .background(Brush.verticalGradient(listOf(Color.Transparent, VrboColors.DarkCanvas.copy(alpha = 0.55f))))
+        )
+        Row(
+            Modifier.align(Alignment.TopCenter).fillMaxWidth().padding(horizontal = 16.dp).padding(top = 54.dp),
+            horizontalArrangement = Arrangement.SpaceBetween,
+        ) {
+            GalleryButton(Icons.Filled.ArrowBack, onBack)
+            Row(horizontalArrangement = Arrangement.spacedBy(10.dp)) {
+                GalleryButton(Icons.Filled.IosShare, onShare)
+                GalleryButton(if (saved) Icons.Filled.Favorite else Icons.Filled.FavoriteBorder,
+                    onToggleSave, tint = if (saved) VrboColors.Error else Color.White)
+            }
+        }
+        Row(
+            Modifier.align(Alignment.BottomCenter).padding(bottom = 14.dp),
+            horizontalArrangement = Arrangement.spacedBy(5.dp),
+        ) {
+            repeat(photos.size) { i ->
+                Box(Modifier
+                    .height(6.dp).width(if (i == pager.currentPage) 18.dp else 6.dp)
+                    .clip(CircleShape)
+                    .background(if (i == pager.currentPage) Color.White else Color.White.copy(alpha = 0.45f)))
+            }
+        }
+        Row(
+            Modifier.align(Alignment.BottomEnd).padding(end = 16.dp, bottom = 14.dp)
+                .clip(CircleShape).background(VrboColors.DarkCanvas.copy(alpha = 0.7f))
+                .padding(horizontal = 11.dp, vertical = 5.dp),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(6.dp),
+        ) {
+            Icon(Icons.Filled.PhotoLibrary, null, tint = Color.White, modifier = Modifier.size(12.dp))
+            Text("${pager.currentPage + 1} / ${photos.size}", style = VrboText.Caption, color = Color.White)
+        }
+    }
+}
+
+@Composable
+private fun GalleryButton(icon: androidx.compose.ui.graphics.vector.ImageVector, onClick: () -> Unit, tint: Color = Color.White) {
+    IconButton(
+        onClick = onClick,
+        modifier = Modifier.size(36.dp).clip(CircleShape).background(VrboColors.DarkCanvas.copy(alpha = 0.55f)),
+    ) { Icon(icon, contentDescription = null, tint = tint, modifier = Modifier.size(18.dp)) }
+}
+```
+
+### Sticky Booking Bar
+
+```kotlin
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.collectIsPressedAsState
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.ui.hapticfeedback.HapticFeedbackType
+import androidx.compose.ui.platform.LocalHapticFeedback
+import androidx.compose.ui.text.style.TextDecoration
+
+@Composable
+fun BookingBar(price: Int, dateRange: String, onDates: () -> Unit, onBook: () -> Unit) {
+    val interaction = remember { MutableInteractionSource() }
+    val pressed by interaction.collectIsPressedAsState()
+    val haptics = LocalHapticFeedback.current
+    Row(
+        Modifier
+            .fillMaxWidth()
+            .height(76.dp)
+            .background(VrboColors.DarkCanvas.copy(alpha = 0.97f))
+            .padding(horizontal = 18.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.SpaceBetween,
+    ) {
+        Column {
+            Row(verticalAlignment = Alignment.Bottom, horizontalArrangement = Arrangement.spacedBy(4.dp)) {
+                Text("$$price", style = VrboText.PriceHero, color = VrboColors.DarkTextPrimary)
+                Text("/ night", fontSize = 13.sp, color = VrboColors.DarkTextSecondary, modifier = Modifier.padding(bottom = 3.dp))
+            }
+            Text(dateRange, fontSize = 12.sp, color = VrboColors.DarkTextSecondary,
+                textDecoration = TextDecoration.Underline,
+                modifier = Modifier.clickable(onClick = onDates))
+        }
+        Button(
+            onClick = { haptics.performHapticFeedback(HapticFeedbackType.LongPress); onBook() },
+            interactionSource = interaction,
+            shape = RoundedCornerShape(10.dp),
+            colors = ButtonDefaults.buttonColors(
+                containerColor = if (pressed) VrboColors.BluePressed else VrboColors.Blue,
+                contentColor = Color.White,
+            ),
+            contentPadding = PaddingValues(horizontal = 26.dp, vertical = 13.dp),
+        ) { Text("Book now", style = VrboText.Button) }
+    }
+}
+```
+
+### Listing Card (results)
+
+```kotlin
+import androidx.compose.material.icons.filled.Star
+
+@Composable
+fun ListingCard(
+    imageUrl: String, title: String, location: String,
+    rating: Double, reviews: Int, price: Int,
+    saved: Boolean, onToggleSave: () -> Unit,
+) {
+    Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
+        Box {
+            AsyncImage(
+                model = imageUrl, contentDescription = title,
+                modifier = Modifier.fillMaxWidth().aspectRatio(4f / 3f).clip(RoundedCornerShape(14.dp)),
+                contentScale = ContentScale.Crop,
+            )
+            IconButton(
+                onClick = onToggleSave,
+                modifier = Modifier.align(Alignment.TopEnd).padding(10.dp)
+                    .size(36.dp).clip(CircleShape).background(VrboColors.DarkCanvas.copy(alpha = 0.55f)),
+            ) {
+                Icon(if (saved) Icons.Filled.Favorite else Icons.Filled.FavoriteBorder, "Save",
+                    tint = if (saved) VrboColors.Error else Color.White, modifier = Modifier.size(17.dp))
+            }
+        }
+        Text("Entire home", style = VrboText.Caption, color = VrboColors.DarkTextSecondary)
+        Text(title, style = VrboText.CardTitle, color = VrboColors.DarkTextPrimary)
+        Text(location, style = VrboText.Meta, color = VrboColors.DarkTextSecondary)
+        Row(verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(6.dp)) {
+            Icon(Icons.Filled.Star, null, tint = VrboColors.GoldStar, modifier = Modifier.size(12.dp))
+            Text("%.1f".format(rating), fontSize = 14.sp, fontWeight = FontWeight.Bold, color = VrboColors.DarkTextPrimary)
+            Text("· $reviews", style = VrboText.Meta, color = VrboColors.DarkTextSecondary)
+        }
+        Row(verticalAlignment = Alignment.Bottom) {
+            Text("$$price", fontSize = 16.sp, fontWeight = FontWeight.Bold, color = VrboColors.DarkTextPrimary)
+            Text(" night", fontSize = 14.sp, color = VrboColors.DarkTextPrimary)
+        }
+    }
+}
+```
+
+### Map Price Pin + Trust Badge
+
+```kotlin
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.border
+import androidx.compose.ui.draw.scale
+
+enum class PinState { Default, Viewed, Selected }
+
+@Composable
+fun MapPricePin(price: Int, state: PinState) {
+    val scale by animateFloatAsState(if (state == PinState.Selected) 1.12f else 1f, tween(180), label = "pin")
+    val (bg, fg) = when (state) {
+        PinState.Default  -> VrboColors.Blue to Color.White
+        PinState.Viewed   -> VrboColors.DarkSurface2 to VrboColors.DarkTextSecondary
+        PinState.Selected -> VrboColors.GoldStar to Color(0xFF1A1206)
+    }
+    Box(
+        Modifier
+            .scale(scale)
+            .clip(CircleShape)
+            .background(bg)
+            .then(if (state == PinState.Viewed) Modifier.border(1.dp, VrboColors.DarkDivider, CircleShape) else Modifier)
+            .padding(horizontal = 12.dp, vertical = 7.dp),
+    ) { Text("$$price", fontSize = 14.sp, fontWeight = FontWeight.Bold, color = fg) }
+}
+
+@Composable
+fun TrustBadge(premier: Boolean) {
+    val accent = if (premier) VrboColors.BlueBright else VrboColors.Success
+    Box(
+        Modifier
+            .clip(RoundedCornerShape(6.dp))
+            .background(accent.copy(alpha = 0.16f))
+            .border(1.dp, accent.copy(alpha = 0.35f), RoundedCornerShape(6.dp))
+            .padding(horizontal = 9.dp, vertical = 4.dp),
+    ) { Text(if (premier) "Premier Host" else "Instant Book", style = VrboText.Badge, color = accent) }
+}
+```
+
+### Trip Board Card
+
+```kotlin
+@Composable
+fun TripBoardCard(thumb: String, name: String, facts: String, rating: Double, tripName: String) {
+    Row(
+        Modifier
+            .fillMaxWidth()
+            .clip(RoundedCornerShape(12.dp))
+            .background(VrboColors.DarkSurface2)
+            .border(1.dp, VrboColors.DarkDivider, RoundedCornerShape(12.dp))
+            .padding(12.dp),
+        horizontalArrangement = Arrangement.spacedBy(12.dp),
+    ) {
+        AsyncImage(model = thumb, contentDescription = name,
+            modifier = Modifier.size(64.dp).clip(RoundedCornerShape(8.dp)), contentScale = ContentScale.Crop)
+        Column(Modifier.weight(1f)) {
+            Text(name, fontSize = 14.sp, fontWeight = FontWeight.Bold, color = VrboColors.DarkTextPrimary)
+            Text(facts, fontSize = 12.sp, color = VrboColors.DarkTextSecondary, modifier = Modifier.padding(top = 3.dp))
+            Text("★ %.1f · Saved to \"%s\"".format(rating, tripName),
+                fontSize = 11.sp, fontWeight = FontWeight.Bold, color = VrboColors.GoldStar,
+                modifier = Modifier.padding(top = 8.dp))
+        }
+    }
+}
+```
+
+## 4. Bottom Navigation Bar
+
+There is no Material tint pill — active is just the brand blue.
+
+```kotlin
+import androidx.compose.material3.*
+
+@Composable
+fun VrboBottomBar(selected: Int, onSelect: (Int) -> Unit, hasUnread: Boolean = false) {
+    NavigationBar(containerColor = VrboColors.DarkCanvas, tonalElevation = 0.dp) {
+        val items = listOf(
+            "Search"        to Icons.Filled.Search,
+            "Trips"         to Icons.Filled.Work,
+            "Inbox"         to Icons.Filled.ChatBubbleOutline,
+            "Notifications" to Icons.Filled.Notifications,
+            "Account"       to Icons.Filled.AccountCircle,
+        )
+        items.forEachIndexed { i, (label, icon) ->
+            NavigationBarItem(
+                selected = selected == i,
+                onClick = { onSelect(i) },
+                icon = {
+                    if (i == 2 && hasUnread) {
+                        BadgedBox(badge = { Badge(containerColor = VrboColors.Error) }) {
+                            Icon(icon, contentDescription = label, modifier = Modifier.size(22.dp))
+                        }
+                    } else Icon(icon, contentDescription = label, modifier = Modifier.size(22.dp))
+                },
+                label = { Text(label, style = VrboText.Tab) },
+                colors = NavigationBarItemDefaults.colors(
+                    selectedIconColor = VrboColors.BlueBright,
+                    selectedTextColor = VrboColors.BlueBright,
+                    unselectedIconColor = VrboColors.TextTertiary,
+                    unselectedTextColor = VrboColors.TextTertiary,
+                    indicatorColor = Color.Transparent, // no Material pill — Vrbo has none
+                ),
+            )
+        }
+    }
+}
+```
+
+## 5. Navigation
+
+Vrbo's loop is Search → results list/map → listing detail → trip board. Model it with Navigation-Compose / Nav3: a 300ms slide push between screens; the bottom bar persists on the five primary tabs and is hidden on the listing detail (which has its own gallery overlay nav + sticky booking bar). The date/guest picker and filters are `ModalBottomSheet`s. The map is a Maps-Compose `GoogleMap` with custom `MarkerComposable` price pins and a `ModalBottomSheet` (or anchored card) peek on pin tap.
+
+## 6. Motion
+
+Vrbo motion is calm — 180–300ms ease-out/spring. Photography and price carry the weight, not animation.
+
+| Moment | Compose recipe |
+|--------|----------------|
+| Gallery progress dot | dot width `animateDpAsState(if (current) 18.dp else 6.dp, tween(200))` |
+| Booking-bar price update | `AnimatedContent(price, transitionSpec = { fadeIn() togetherWith fadeOut() })` over 250ms |
+| Save heart pop | `animateFloatAsState` 1f → 1.25f → 1f via keyframes `tween(280)` + soft haptic |
+| Map pin select | scale `animateFloatAsState(1.12f, tween(180))` + recolor; peek card `ModalBottomSheet` slide-up |
+| Results card stagger | `AnimatedVisibility` `fadeIn(tween(220)) + slideInVertically { it / 6 }`, 60ms delay per item |
+| Page navigation | Nav3/`NavHost` slide push `tween(300)` |
+| Sheet present | `ModalBottomSheet` default slide-up; scrim fades 250ms |
+
+```kotlin
+// Booking-bar price — the canonical Vrbo motion
+AnimatedContent(targetState = price, label = "price",
+    transitionSpec = { fadeIn(tween(130)) togetherWith fadeOut(tween(120)) }) { p ->
+    Text("$$p", style = VrboText.PriceHero, color = VrboColors.DarkTextPrimary)
+}
+```
+
+Haptics: prefer `LocalHapticFeedback.performHapticFeedback(HapticFeedbackType.LongPress)` for the soft impact on "Book now" and save; `HapticFeedbackType.TextHandleMove` (or `HapticFeedbackConstants.CLOCK_TICK`) for date-range endpoints and tab changes.
+
+## 7. Icons
+
+Use `androidx.compose.material:material-icons-extended`. Map price pins and progress dots are drawn with `Box`+`CircleShape`; the gold star uses `Icons.Filled.Star`.
+
+| Purpose | SF Symbol (iOS) | Material Icon (Compose) |
+|---------|-----------------|--------------------------|
+| Search (tab) | `magnifyingglass` | `Icons.Filled.Search` |
+| Trips (tab) | `suitcase` | `Icons.Filled.Work` |
+| Inbox (tab) | `bubble.left` | `Icons.Filled.ChatBubbleOutline` |
+| Notifications (tab) | `bell` | `Icons.Filled.Notifications` |
+| Account (tab) | `person.crop.circle` | `Icons.Filled.AccountCircle` |
+| Back (gallery) | `chevron.left` | `Icons.Filled.ArrowBack` |
+| Share | `square.and.arrow.up` | `Icons.Filled.IosShare` |
+| Save | `heart` / `heart.fill` | `Icons.Filled.FavoriteBorder` / `Favorite` |
+| Photo grid / counter | `photo.on.rectangle` | `Icons.Filled.PhotoLibrary` |
+| Rating star | `star.fill` | `Icons.Filled.Star` |
+| Guests | `person.2` | `Icons.Filled.Group` |
+| Bedrooms | `bed.double` | `Icons.Filled.KingBed` |
+| Bathrooms | `shower` | `Icons.Filled.Bathtub` |
+| Whole home | `house` | `Icons.Filled.Home` |
+| Filters | `slider.horizontal.3` | `Icons.Filled.Tune` |
+| Map toggle | `map` | `Icons.Filled.Map` |
+| Calendar / dates | `calendar` | `Icons.Filled.CalendarMonth` |
+| Location | `mappin.and.ellipse` | `Icons.Filled.LocationOn` |
+| Instant Book | `bolt.fill` | `Icons.Filled.Bolt` |
+
+## 8. Minimum SDK & Accessibility Notes
+
+- **minSdk 24** (Compose floor is 21; `HorizontalPager` + Maps Compose are comfortable at 24). `compileSdk 34+`, Compose BOM `2024.09+`, Kotlin `2.0+`.
+- **Edge-to-edge**: call `enableEdgeToEdge()`; the gallery extends under the status bar with white overlay controls (use light-content system bars while a gallery is visible). The booking bar must sit above the IME-free bottom inset; respect the navigation bar inset.
+- **Font scaling**: `sp` honors the user's font scale — keep it on titles, price, listing title, headers, body. Pin layout-sensitive text (10sp tab labels, trust badges, the photo counter, progress-dot legends) via a fixed-density wrapper: `CompositionLocalProvider(LocalDensity provides Density(density, fontScale = 1f))`.
+- **No bundled font**: use `FontFamily.Default` (system) everywhere. Do not ship a custom typeface.
+- **TalkBack**: gallery exposes "Photo {n} of {total}" via `contentDescription`; announce the booking bar "Price {amount} per night, {dates}"; cards "{title}, entire home, {rating} stars, {reviews} reviews, {price} per night"; trust badges carry text labels (not color alone).
+- **Touch targets**: Material guidance is 48.dp. Give the 36.dp gallery overlay buttons and the 36.dp save heart a ≥ 48.dp hit area; map price pins are the tap target (≥ 48.dp effective); the "Book now" button is full-width and ≥ 48.dp tall; list cards are fully tappable.
+- **Contrast**: `#15181D` on `#FFFFFF` and `#EDEFF2` on `#101317` pass WCAG AA. The gold star is paired with a numeric rating; trust badges include text — color is never the sole channel.
+- **Reduce motion**: when `Settings.Global.ANIMATOR_DURATION_SCALE == 0`, disable the save-heart pop and pin scale; cross-dissolve the price (no count); keep gallery paging but drop the dot-width animation.
+- **Dark mode**: invert via the `Dark*` palette — `#101317`, NOT pure black; `#15181D` text becomes `#EDEFF2`; links/pins/outline brighten to `#4F8BF0` while the "Book now" fill stays `#245ABC`; the gold star is constant. Shadows nearly vanish on dark, so floating panels (peek card, menus) add a 1dp `DarkDivider` border. Do **not** enable Material You `dynamicColorScheme()`: Vrbo's white + blue + single-gold-star identity must hold regardless of wallpaper.
+- **Photography**: gallery images are full-bleed and never carry a shadow; preserve aspect ratio and supply per-photo `contentDescription` for TalkBack.