designmd-forge 1.2.0

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

@@ -0,0 +1,477 @@
+# Pandora (iOS) — Jetpack Compose Implementation Guide
+
+Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file ports Pandora's visual language to **Android with Jetpack Compose (Material 3)**: a color token object, a `Typography` set, paste-ready `@Composable`s for the signature thumb up/down, the album-art gradient Now Playing, and the station-list row, navigation, motion, and haptics.
+
+> Why a Compose guide for an iOS-referenced app? The DESIGN.md tokens are platform-neutral. This file keeps Pandora's *visual identity* (the thumb up/down as the Music Genome product, the solid-up / hollow-down asymmetry, the album-art gradient Now Playing with no card frame, the navy canvas from Pandora Blue, the station list as home) while making everything idiomatic Android — `NavigationBar` instead of a UITabBar, `Brush.verticalGradient` for the Now Playing hero, `dp`/`sp` 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 artwork, and `androidx.palette:palette` for sampling the gradient color. Pandora is dark-first; a light scheme is provided for settings/account flows only.
+
+## 1. Color Tokens
+
+```kotlin
+// ui/theme/PandoraColors.kt
+import androidx.compose.ui.graphics.Color
+
+object PandoraColors {
+    // Brand
+    val Blue         = Color(0xFF224099) // heritage
+    val Bright       = Color(0xFF3668FF) // THE accent
+    val BrightPressed = Color(0xFF2A55D8)
+
+    // Canvas & Surfaces (Dark — primary)
+    val Canvas      = Color(0xFF0B0F1C) // navy from Pandora Blue, NOT neutral
+    val Surface1    = Color(0xFF141A2B)
+    val Surface2    = Color(0xFF1E2538)
+    val Divider     = Color(0xFF28304A)
+    val GradientMid = Color(0xFF1A2240)
+
+    // Canvas & Surfaces (Light — settings/account only)
+    val CanvasLight   = Color(0xFFFFFFFF)
+    val Surface1Light = Color(0xFFF4F6FB)
+    val DividerLight  = Color(0xFFE4E8F2)
+
+    // Text
+    val TextPrimary       = Color(0xFFEDF0F7)
+    val TextSecondary     = Color(0xFF9AA3BD)
+    val TextTertiary      = Color(0xFF646E8C)
+    val TextPrimaryLight  = Color(0xFF11162A)
+    val TextSecondaryLight = Color(0xFF5C6680)
+    val OnBright = Color(0xFFFFFFFF)
+
+    // Semantic
+    val Success = Color(0xFF2BC48A)
+    val Warning = Color(0xFFF2A93A)
+    val Error   = Color(0xFFF0526B)
+}
+```
+
+Wire it into both schemes. Pandora is dark-first; the canvas is the blue-navy `#0B0F1C` derived from Pandora Blue — never a neutral gray.
+
+```kotlin
+// ui/theme/Theme.kt
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.material3.*
+import androidx.compose.runtime.Composable
+
+private val PandoraDark = darkColorScheme(
+    primary        = PandoraColors.Bright,     // accent / play / active thumb-up
+    onPrimary      = PandoraColors.OnBright,
+    background      = PandoraColors.Canvas,
+    onBackground   = PandoraColors.TextPrimary,
+    surface         = PandoraColors.Surface1,
+    onSurface      = PandoraColors.TextPrimary,
+    surfaceVariant = PandoraColors.Surface2,
+    outline         = PandoraColors.Divider,
+    error           = PandoraColors.Error,
+)
+
+private val PandoraLight = lightColorScheme(   // settings/account only
+    primary        = PandoraColors.Bright,
+    onPrimary      = PandoraColors.OnBright,
+    background      = PandoraColors.CanvasLight,
+    onBackground   = PandoraColors.TextPrimaryLight,
+    surface         = PandoraColors.Surface1Light,
+    onSurface      = PandoraColors.TextPrimaryLight,
+    surfaceVariant = PandoraColors.Surface1Light,
+    outline         = PandoraColors.DividerLight,
+    error           = PandoraColors.Error,
+)
+
+@Composable
+fun PandoraTheme(
+    dark: Boolean = isSystemInDarkTheme(),
+    content: @Composable () -> Unit,
+) = MaterialTheme(
+    colorScheme = if (dark) PandoraDark else PandoraLight,
+    typography  = PandoraTypography,
+    content     = content,
+)
+```
+
+## 2. Typography (M3)
+
+Pandora's brand face is a clean grotesque. License it and drop the TTFs in `res/font/`, or ship **Inter** (SIL OFL) — keep the named ramp identical. Timecodes/counts are tabular (`fontFeatureSettings = "tnum"`).
+
+```kotlin
+// ui/theme/PandoraType.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 PandoraSans = FontFamily(
+    Font(R.font.pandora_regular,   FontWeight.Normal),
+    Font(R.font.pandora_medium,    FontWeight.Medium),
+    Font(R.font.pandora_semibold,  FontWeight.SemiBold),
+    Font(R.font.pandora_bold,      FontWeight.Bold),
+    Font(R.font.pandora_extrabold, FontWeight.ExtraBold),
+)
+
+private const val TNUM = "tnum"
+
+// Named ramp — mirrors DESIGN.md §3 (pt → sp 1:1)
+object PandoraText {
+    val Display     = TextStyle(PandoraSans, fontWeight = FontWeight.ExtraBold, fontSize = 32.sp, lineHeight = 37.sp, letterSpacing = (-0.4).sp)
+    val ScreenTitle = TextStyle(PandoraSans, fontWeight = FontWeight.ExtraBold, fontSize = 26.sp, lineHeight = 31.sp, letterSpacing = (-0.3).sp)
+    val TrackTitle  = TextStyle(PandoraSans, fontWeight = FontWeight.ExtraBold, fontSize = 21.sp, lineHeight = 25.sp, letterSpacing = (-0.3).sp)
+    val Section     = TextStyle(PandoraSans, fontWeight = FontWeight.Bold,      fontSize = 17.sp, lineHeight = 22.sp, letterSpacing = (-0.1).sp)
+    val Body        = TextStyle(PandoraSans, fontWeight = FontWeight.Normal,    fontSize = 16.sp, lineHeight = 24.sp)
+    val StationName = TextStyle(PandoraSans, fontWeight = FontWeight.SemiBold,  fontSize = 15.sp, lineHeight = 20.sp)
+    val Meta        = TextStyle(PandoraSans, fontWeight = FontWeight.Normal,    fontSize = 14.sp, lineHeight = 20.sp)
+    val AlbumLine   = TextStyle(PandoraSans, fontWeight = FontWeight.Medium,    fontSize = 13.sp, lineHeight = 18.sp)
+    val Eyebrow     = TextStyle(PandoraSans, fontWeight = FontWeight.Bold,      fontSize = 12.sp, lineHeight = 14.sp, letterSpacing = 1.0.sp)
+    val Time        = TextStyle(PandoraSans, fontWeight = FontWeight.Medium,    fontSize = 11.sp, lineHeight = 14.sp, fontFeatureSettings = TNUM)
+    val Button      = TextStyle(PandoraSans, fontWeight = FontWeight.Bold,      fontSize = 16.sp, lineHeight = 16.sp, letterSpacing = 0.1.sp)
+    val Tab         = TextStyle(PandoraSans, fontWeight = FontWeight.SemiBold,  fontSize = 10.sp, lineHeight = 11.sp, letterSpacing = 0.1.sp)
+    val ThumbCount  = TextStyle(PandoraSans, fontWeight = FontWeight.SemiBold,  fontSize = 12.sp, lineHeight = 14.sp, fontFeatureSettings = TNUM)
+}
+
+val PandoraTypography = Typography(
+    displayLarge  = PandoraText.Display,
+    headlineLarge = PandoraText.ScreenTitle,
+    titleLarge    = PandoraText.TrackTitle,
+    titleMedium   = PandoraText.Section,
+    bodyLarge     = PandoraText.Body,
+    labelSmall    = PandoraText.Tab,
+)
+```
+
+## 3. Signature Components
+
+### Thumb Up / Down (the signature atom)
+
+```kotlin
+import androidx.compose.animation.core.*
+import androidx.compose.foundation.gestures.detectTapGestures
+import androidx.compose.foundation.layout.*
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.ThumbUp
+import androidx.compose.material.icons.outlined.ThumbUp
+import androidx.compose.material.icons.outlined.ThumbDown
+import androidx.compose.material3.Icon
+import androidx.compose.runtime.*
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.scale
+import androidx.compose.ui.hapticfeedback.HapticFeedbackType
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.platform.LocalHapticFeedback
+import androidx.compose.ui.unit.dp
+
+enum class ThumbState { None, Up, Down }
+
+@Composable
+fun ThumbButton(kind: ThumbKind, state: ThumbState, onTap: () -> Unit) {
+    val haptics = LocalHapticFeedback.current
+    var pop by remember { mutableStateOf(false) }
+    val scale by animateFloatAsState(if (pop) 1.2f else 1f, tween(120), label = "thumbPop",
+        finishedListener = { if (pop) pop = false })
+
+    val active = (kind == ThumbKind.Up && state == ThumbState.Up) ||
+                 (kind == ThumbKind.Down && state == ThumbState.Down)
+    // HARD RULE: thumb-up may be SOLID Bright when active; thumb-down is ALWAYS an outline
+    val filled = kind == ThumbKind.Up && active
+    val icon = when {
+        filled -> Icons.Filled.ThumbUp
+        kind == ThumbKind.Up -> Icons.Outlined.ThumbUp
+        else -> Icons.Outlined.ThumbDown            // never the filled thumbs-down
+    }
+    val tint = when {
+        filled -> PandoraColors.Bright
+        kind == ThumbKind.Up -> PandoraColors.TextTertiary
+        active -> PandoraColors.TextSecondary       // active down: slightly brighter outline
+        else -> PandoraColors.TextTertiary
+    }
+
+    Box(
+        Modifier.size(44.dp).pointerInput(Unit) {
+            detectTapGestures {
+                pop = true
+                haptics.performHapticFeedback(HapticFeedbackType.LongPress) // light analog
+                onTap()
+            }
+        },
+        contentAlignment = Alignment.Center,
+    ) {
+        Icon(icon, contentDescription = null, tint = tint, modifier = Modifier.size(26.dp).scale(scale))
+    }
+}
+
+enum class ThumbKind { Up, Down }
+```
+
+### Now Playing (album-art gradient hero)
+
+```kotlin
+import androidx.compose.foundation.background
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.icons.filled.*
+import androidx.compose.material3.Text
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.ContentScale
+import coil.compose.AsyncImage
+
+@Composable
+fun NowPlayingScreen(
+    artwork: String, title: String, artist: String, albumLine: String, stationName: String,
+    artTopColor: Color, progress: Float, elapsed: String, remaining: String,
+    isPlaying: Boolean, onPlayPause: () -> Unit,
+    thumb: ThumbState, onUp: () -> Unit, onDown: () -> Unit,
+) {
+    Box(
+        Modifier.fillMaxSize().background(
+            Brush.verticalGradient(listOf(artTopColor, PandoraColors.GradientMid, PandoraColors.Canvas))
+        )
+    ) {
+        Column(Modifier.fillMaxSize()) {
+            // Top bar — floats over the gradient, NO card frame
+            Row(
+                Modifier.fillMaxWidth().padding(horizontal = 20.dp, vertical = 8.dp),
+                verticalAlignment = Alignment.CenterVertically,
+                horizontalArrangement = Arrangement.SpaceBetween,
+            ) {
+                Icon(Icons.Filled.KeyboardArrowDown, "Collapse", tint = PandoraColors.TextPrimary)
+                Column(horizontalAlignment = Alignment.CenterHorizontally) {
+                    Text("STATION", style = PandoraText.Eyebrow, color = PandoraColors.TextSecondary)
+                    Text(stationName, style = PandoraText.AlbumLine.copy(fontWeight = FontWeight.Bold),
+                        color = PandoraColors.TextPrimary)
+                }
+                Icon(Icons.Filled.MoreHoriz, "More", tint = PandoraColors.TextPrimary)
+            }
+
+            AsyncImage(
+                model = artwork, contentDescription = "Album art",
+                contentScale = ContentScale.Crop,
+                modifier = Modifier
+                    .padding(horizontal = 32.dp).padding(top = 26.dp)
+                    .fillMaxWidth().aspectRatio(1f)
+                    .shadow(25.dp, RoundedCornerShape(10.dp), spotColor = Color.Black.copy(alpha = 0.7f))
+                    .clip(RoundedCornerShape(10.dp)),
+            )
+
+            Column(Modifier.padding(horizontal = 32.dp).padding(top = 22.dp)) {
+                Text(title, style = PandoraText.TrackTitle, color = PandoraColors.TextPrimary)
+                Text(artist, style = PandoraText.StationName.copy(fontWeight = FontWeight.Medium),
+                    color = PandoraColors.TextSecondary, modifier = Modifier.padding(top = 4.dp))
+                Text(albumLine, style = PandoraText.AlbumLine, color = PandoraColors.TextTertiary,
+                    modifier = Modifier.padding(top = 2.dp))
+            }
+
+            // Scrubber
+            Column(Modifier.padding(horizontal = 32.dp).padding(top = 20.dp)) {
+                Box(Modifier.fillMaxWidth().height(4.dp).clip(RoundedCornerShape(2.dp))
+                    .background(PandoraColors.Surface2)) {
+                    Box(Modifier.fillMaxWidth(progress).fillMaxHeight()
+                        .background(PandoraColors.Bright, RoundedCornerShape(2.dp)))
+                }
+                Row(Modifier.fillMaxWidth().padding(top = 8.dp),
+                    horizontalArrangement = Arrangement.SpaceBetween) {
+                    Text(elapsed, style = PandoraText.Time, color = PandoraColors.TextTertiary)
+                    Text(remaining, style = PandoraText.Time, color = PandoraColors.TextTertiary)
+                }
+            }
+
+            // Transport: thumb-down · skip-back · play · skip-forward · thumb-up
+            Row(
+                Modifier.fillMaxWidth().padding(horizontal = 36.dp).padding(top = 22.dp),
+                verticalAlignment = Alignment.CenterVertically,
+                horizontalArrangement = Arrangement.SpaceBetween,
+            ) {
+                ThumbButton(ThumbKind.Down, thumb, onDown)
+                Icon(Icons.Filled.SkipPrevious, "Previous", tint = PandoraColors.TextPrimary,
+                    modifier = Modifier.size(26.dp))
+                Box(
+                    Modifier.size(66.dp).clip(CircleShape).background(PandoraColors.Bright)
+                        .shadow(13.dp, CircleShape, spotColor = PandoraColors.Bright.copy(alpha = 0.7f))
+                        .pointerInput(Unit) { detectTapGestures { onPlayPause() } },
+                    contentAlignment = Alignment.Center,
+                ) {
+                    Icon(if (isPlaying) Icons.Filled.Pause else Icons.Filled.PlayArrow,
+                        "Play/Pause", tint = Color.White, modifier = Modifier.size(26.dp))
+                }
+                Icon(Icons.Filled.SkipNext, "Next", tint = PandoraColors.TextPrimary,
+                    modifier = Modifier.size(26.dp))
+                ThumbButton(ThumbKind.Up, thumb, onUp)
+            }
+        }
+    }
+}
+```
+
+### Station List Row
+
+```kotlin
+@Composable
+fun StationRow(
+    artwork: String, name: String, subtitle: String, isPlaying: Boolean,
+    onClick: () -> Unit, modifier: Modifier = Modifier,
+) {
+    Row(
+        modifier
+            .fillMaxWidth()
+            .clip(RoundedCornerShape(12.dp))
+            .background(if (isPlaying) PandoraColors.Surface2 else Color.Transparent)
+            .pointerInput(Unit) { detectTapGestures { onClick() } }
+            .padding(10.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(14.dp),
+    ) {
+        AsyncImage(model = artwork, contentDescription = null, contentScale = ContentScale.Crop,
+            modifier = Modifier.size(52.dp).clip(RoundedCornerShape(8.dp)))
+        Column(Modifier.weight(1f)) {
+            Text(name, style = PandoraText.StationName.copy(fontWeight = FontWeight.Bold),
+                color = PandoraColors.TextPrimary)
+            Text(subtitle, style = PandoraText.ThumbCount, color = PandoraColors.TextSecondary,
+                modifier = Modifier.padding(top = 2.dp))
+        }
+        if (isPlaying) EqualizerBars()
+    }
+}
+
+@Composable
+fun EqualizerBars() {
+    val transition = rememberInfiniteTransition(label = "eq")
+    val heights = listOf(0.6f, 1f, 0.4f, 0.8f)
+    Row(verticalAlignment = Alignment.Bottom, horizontalArrangement = Arrangement.spacedBy(2.dp),
+        modifier = Modifier.height(16.dp)) {
+        heights.forEachIndexed { i, h ->
+            val f by transition.animateFloat(
+                initialValue = if (i % 2 == 0) 0.4f else 1f,
+                targetValue = if (i % 2 == 0) 1f else 0.4f,
+                animationSpec = infiniteRepeatable(tween(500), RepeatMode.Reverse), label = "bar$i",
+            )
+            Box(Modifier.width(3.dp).fillMaxHeight(h * f)
+                .background(PandoraColors.Bright, RoundedCornerShape(1.dp)))
+        }
+    }
+}
+```
+
+### Primary Button
+
+```kotlin
+import androidx.compose.foundation.interaction.collectIsPressedAsState
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+
+@Composable
+fun PandPrimaryButton(title: String, onClick: () -> Unit, modifier: Modifier = Modifier) {
+    val interaction = remember { MutableInteractionSource() }
+    val pressed by interaction.collectIsPressedAsState()
+    Button(
+        onClick = onClick,
+        interactionSource = interaction,
+        shape = RoundedCornerShape(50),     // pill — Pandora's CTA shape
+        colors = ButtonDefaults.buttonColors(
+            containerColor = if (pressed) PandoraColors.BrightPressed else PandoraColors.Bright,
+            contentColor = PandoraColors.OnBright,
+        ),
+        modifier = modifier.height(50.dp),
+    ) { Text(title, style = PandoraText.Button) }
+}
+```
+
+## 4. Navigation
+
+Pandora has a 4-tab bottom strip; active state is a text-primary tint with **no Material pill** (Pandora has none).
+
+```kotlin
+@Composable
+fun PandoraBottomBar(selected: Int, onSelect: (Int) -> Unit) {
+    NavigationBar(containerColor = PandoraColors.Canvas, tonalElevation = 0.dp) {
+        val items = listOf(
+            "For You" to Icons.Filled.Home,
+            "Browse" to Icons.Filled.Search,
+            "My Collection" to Icons.Filled.LibraryMusic,
+            "Recents" to Icons.Filled.History,
+        )
+        items.forEachIndexed { i, (label, icon) ->
+            NavigationBarItem(
+                selected = selected == i,
+                onClick = { onSelect(i) },
+                icon = { Icon(icon, label, Modifier.size(22.dp)) },
+                label = { Text(label, style = PandoraText.Tab) },
+                colors = NavigationBarItemDefaults.colors(
+                    selectedIconColor = PandoraColors.TextPrimary,   // text-primary active
+                    selectedTextColor = PandoraColors.TextPrimary,
+                    unselectedIconColor = PandoraColors.TextTertiary,
+                    unselectedTextColor = PandoraColors.TextTertiary,
+                    indicatorColor = Color.Transparent,               // no pill — Pandora has none
+                ),
+            )
+        }
+    }
+}
+```
+
+The mini player is a pinned 56.dp bar above the `NavigationBar` (blurred-navy analog `Color(0xF20B0F1C)`, 0.5.dp top divider) holding 40.dp art + one-line title/artist + play/pause + thumb-up; tapping it expands into `NowPlayingScreen` via a shared-element/`AnimatedContent` bounds transform. Create-station, station-detail, and queue are `ModalBottomSheet`s.
+
+## 5. Motion
+
+Pandora motion is smooth and unhurried — track/gradient changes are 200–400ms cross-fades; nothing snappy.
+
+| Moment | Compose recipe |
+|--------|----------------|
+| Thumb tap | `animateFloatAsState` scale 1 → 1.2 → 1 `tween(120)`; thumb-up cross-fades hollow→solid; light haptic; thumb-down also triggers skip |
+| Track change | art `Crossfade`/`AnimatedContent` + scale 0.96 → 1.0 `tween(320)`; `artTopColor` `animateColorAsState(tween(400))`; title/artist `fadeIn/Out` 200ms |
+| Skip forward/back | art `slideInHorizontally`/`slideOutHorizontally` then settle `tween(260, EaseOut)` |
+| Play/pause | icon crossfade 150ms; button scale 1 → 0.96 → 1 on press |
+| Scrubber drag | `Slider`/custom drag 1:1; timecodes recompose live (tabular, no shift) |
+| Mini → Now Playing | shared-element art expand `tween(320, EaseOut)` + gradient `fadeIn` |
+| Station start | `EqualizerBars` `rememberInfiniteTransition` fades in; push Now Playing `tween(300)` |
+| Tab change | instant tint to text-primary; no indicator slide (no pill) |
+| Bottom sheet | `ModalBottomSheet` slide + `tween(320)` scrim |
+| Station created | success haptic |
+
+```kotlin
+// Gradient re-derive on track change — the canonical Pandora motion
+val topColor by animateColorAsState(sampledArtColor, tween(400), label = "npGradient")
+```
+
+Haptics: `LocalHapticFeedback.performHapticFeedback(HapticFeedbackType.LongPress)` for the light tick on thumb up/down and play; a softer constant via `LocalView.current.performHapticFeedback(HapticFeedbackConstants.CLOCK_TICK)` for skip; a stronger one on station-created.
+
+## 6. Icons
+
+The closest first-party set is `androidx.compose.material:material-icons-extended`. The thumb-up uses `Icons.Filled.ThumbUp` (solid) only when active; the thumb-down uses `Icons.Outlined.ThumbDown` **always** — never the filled variant.
+
+| Purpose | SF Symbol (iOS) | Material Icon (Compose) |
+|---------|-----------------|--------------------------|
+| For You (tab) | `house.fill` | `Icons.Filled.Home` |
+| Browse (tab) | `magnifyingglass` | `Icons.Filled.Search` |
+| My Collection (tab) | `music.note.list` | `Icons.Filled.LibraryMusic` |
+| Recents (tab) | `clock.fill` | `Icons.Filled.History` |
+| Thumb up (active) | `hand.thumbsup.fill` | `Icons.Filled.ThumbUp` |
+| Thumb up (idle) | `hand.thumbsup` | `Icons.Outlined.ThumbUp` |
+| Thumb down (always outline) | `hand.thumbsdown` | `Icons.Outlined.ThumbDown` |
+| Play | `play.fill` | `Icons.Filled.PlayArrow` |
+| Pause | `pause.fill` | `Icons.Filled.Pause` |
+| Skip forward | `forward.fill` | `Icons.Filled.SkipNext` |
+| Skip back | `backward.fill` | `Icons.Filled.SkipPrevious` |
+| Collapse Now Playing | `chevron.down` | `Icons.Filled.KeyboardArrowDown` |
+| Overflow | `ellipsis` | `Icons.Filled.MoreHoriz` |
+| Create station | `plus.circle.fill` | `Icons.Filled.AddCircle` |
+| Shuffle | `shuffle` | `Icons.Filled.Shuffle` |
+| Add variety | `slider.horizontal.3` | `Icons.Filled.Tune` |
+| Why this track | `info.circle` | `Icons.Filled.InfoOutline` |
+| Share | `square.and.arrow.up` | `Icons.Filled.Share` |
+
+## 7. Minimum SDK & Accessibility Notes
+
+- **minSdk 24** (Compose floor is 21; `Brush` gradients, shared-element, infinite transitions comfortable at 24). `compileSdk 34+`, Compose BOM `2024.09+`, Kotlin `2.0+`.
+- **Edge-to-edge**: call `enableEdgeToEdge()`; the gradient extends under the system bars (light-content icons always — dark-first); pin the mini player + `NavigationBar` above the gesture area with `Modifier.navigationBarsPadding()`.
+- **Tabular numerals**: keep `fontFeatureSettings = "tnum"` on timecodes, durations, and thumb counts (already in the ramp).
+- **Album-art color sampling**: use `androidx.palette` (`Palette.from(bitmap).generate()` → `darkVibrantSwatch ?: dominantSwatch`) to derive the gradient top color; clamp it dark enough that `#EDF0F7` title text keeps ≥ 4.5:1 contrast; cache per track and animate the change with `animateColorAsState(tween(400))`.
+- **Thumb asymmetry**: enforce in `ThumbButton` — `Icons.Filled.ThumbUp` only when up is active; `Icons.Outlined.ThumbDown` always. This is a hard rule, not a style choice.
+- **Font scaling**: `sp` honors the user's font scale — keep it on display, screen title, track title, body, station name. Pin layout-critical text (tab labels, the eyebrow, timecodes, thumb counts) by deriving from `dp` or wrapping in `CompositionLocalProvider(LocalDensity provides Density(density, fontScale = 1f))`; album art never scales.
+- **TalkBack**: the thumb-up announces "Thumb up, {selected}, shapes this station"; the thumb-down "Thumb down, skips and tunes the station away" (distinct hints so the asymmetry is conveyed non-visually); the play button "Play / Pause"; the station row "{name}, {subtitle}, double-tap to play". Never rely on fill alone to convey thumb state.
+- **Touch targets**: Material guidance is 48.dp. Give the 26.dp thumb glyphs a 44–48.dp hit and clear separation from skip/play; the play button is 66.dp; skip ≥ 44.dp; station row full-row; tab icons 22.dp in ≥48.dp.
+- **Contrast**: `#EDF0F7` on `#0B0F1C` and white on `#3668FF` pass WCAG AA; verify the sampled gradient top color keeps title contrast ≥ 4.5:1 (darken the swatch if needed).
+- **Reduce motion**: when `Settings.Global.ANIMATOR_DURATION_SCALE == 0`, disable the art crossfade-scale, the thumb pop, and the equalizer (substitute a static 3-bar glyph); keep the gradient (it conveys the track).
+- **Dark mode**: Pandora is dark-first — the canvas is the blue-navy `#0B0F1C` derived from Pandora Blue, NOT a neutral gray; `#3668FF` is constant. Do **not** enable Material You `dynamicColorScheme()` — Pandora's blue identity and the per-track album gradient must hold regardless of wallpaper.