Match Discover shadows, text rhythm and asynchronous focus

wolfskin-design/src/main/java/org/justinvisser/wolfskin/design/CatalogueRecoveryCard.kt

@@ -23,7 +23,7 @@ fun CatalogueRecoveryCard(retry: Boolean, focused: Boolean, onClick: () -> Unit,
     val shape = RoundedCornerShape(WolfskinTokens.Radius.card)
     Column(modifier.size(WolfskinTokens.Card.posterW, WolfskinTokens.Card.posterH)
         .focusScale(focused, WolfskinTokens.Focus.scaleCard)
-        .focusRing(focused, WolfskinTokens.Radius.card, WolfskinTokens.Focus.ringCardGap, WolfskinTokens.Focus.ringCardRing, C.accent)
+        .focusRing(focused, WolfskinTokens.Radius.card, WolfskinTokens.Focus.ringCardGap, WolfskinTokens.Focus.ringCardRing, C.accent, FocusLift.Card)
         .background(C.surface, shape).border(G.borderWidth, C.border, shape).clickable(onClick = onClick).padding(G.tailPadding),
         verticalArrangement = Arrangement.spacedBy(G.tailGap, Alignment.CenterVertically), horizontalAlignment = Alignment.CenterHorizontally) {
         Glyph(if (retry) "alert" else "down", if (retry) C.warn else C.accentText, Modifier.size(G.tailIcon))

wolfskin-design/src/main/java/org/justinvisser/wolfskin/design/DiscoverArtwork.kt

@@ -17,6 +17,9 @@ import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.blur
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.dropShadow
+import androidx.compose.ui.graphics.shadow.Shadow
+import androidx.compose.ui.unit.DpOffset
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
@@ -71,7 +74,11 @@ fun DiscoverBackdrop(title: DiscoverTitle, detail: Boolean = false, modifier: Mo
             DiscoverArtwork(title.poster, Modifier.offset(
                 WolfskinTokens.Shell.stageWidth - D.heroSheetRight - if (detail) L.heroSheetWidth else D.heroSheetWidth,
                 if (detail) L.navBand else D.heroSheetTop,
-            ).size(if (detail) L.heroSheetWidth else D.heroSheetWidth, if (detail) L.heroSheetHeight else D.heroSheetHeight).clip(RoundedCornerShape(WolfskinTokens.Radius.heroSheet)), poster = true)
+            ).size(if (detail) L.heroSheetWidth else D.heroSheetWidth, if (detail) L.heroSheetHeight else D.heroSheetHeight)
+                .dropShadow(RoundedCornerShape(WolfskinTokens.Radius.heroSheet), Shadow(
+                    radius = WolfskinTokens.Lift.heroBlur, color = Color.Black.copy(alpha = WolfskinTokens.Lift.heroOpacity),
+                    offset = DpOffset(WolfskinTokens.Shell.zero, WolfskinTokens.Lift.heroY)))
+                .clip(RoundedCornerShape(WolfskinTokens.Radius.heroSheet)), poster = true)
         } else DiscoverArtwork(title.backdrop ?: title.poster, Modifier.fillMaxSize())
         Box(Modifier.fillMaxSize().drawWithCache {
             val scrim = Brush.horizontalGradient(0f to C.bg.copy(alpha = .92f), .42f to C.bg.copy(alpha = .55f), .70f to C.bg.copy(alpha = 0f), endX = size.width)

wolfskin-design/src/main/java/org/justinvisser/wolfskin/design/DiscoverOverlay.kt

@@ -8,7 +8,6 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
@@ -22,9 +21,13 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.draw.dropShadow
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.RectangleShape
+import androidx.compose.ui.graphics.shadow.Shadow
+import androidx.compose.ui.unit.DpOffset
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.layout.layout
-import androidx.compose.ui.text.font.FontWeight
 import androidx.tv.material3.Text
 import org.justinvisser.wolfskin.design.WolfskinTokens.Color as C
 import org.justinvisser.wolfskin.design.WolfskinTokens.Discover as D
@@ -36,20 +39,24 @@ fun DiscoverOverlay(state: DiscoverState) {
     val overlay = state.overlay
     if (overlay != null && !state.shell.pickerVisible) {
         Box(Modifier.fillMaxSize().background(C.sheetScrim).clickable(onClick = {}).testTag("discover-overlay")) {
-            Column(Modifier.align(Alignment.CenterEnd).width(L.sheetWidth).fillMaxSize().background(C.surface).padding(D.sheetPaddingX, D.sheetPaddingY), verticalArrangement = Arrangement.spacedBy(D.sheetGap)) {
+            Column(Modifier.align(Alignment.CenterEnd).width(L.sheetWidth).fillMaxSize()
+                .dropShadow(RectangleShape, Shadow(radius = WolfskinTokens.Lift.sheetBlur,
+                    color = Color.Black.copy(alpha = WolfskinTokens.Lift.sheetOpacity),
+                    offset = DpOffset(WolfskinTokens.Lift.sheetX, WolfskinTokens.Shell.zero)))
+                .background(C.surface).padding(D.sheetPaddingX, D.sheetPaddingY), verticalArrangement = Arrangement.spacedBy(D.sheetGap)) {
                 when (overlay) {
                     is DiscoverOverlayState.Request -> RequestSheet(state, overlay.state)
                     is DiscoverOverlayState.Hidden -> {
                         ReceiptPanel("Hidden from your picks", "${overlay.title.title} leaves every row of ${state.shell.person.name}’s picks. It waits under Hidden picks at the end of Discover.")
-                        Row(horizontalArrangement = Arrangement.spacedBy(L.buttonGap)) {
+                        Row(Modifier.padding(top = D.sheetButtonTop), horizontalArrangement = Arrangement.spacedBy(L.buttonGap)) {
                             DiscoverButton("Undo", overlay.focus == 0) { state.restore(overlay.title) }
                             DiscoverButton("Done", overlay.focus == 1, primary = false) { overlay.focus = 1; state.key(ShellKey.Ok) }
                         }
                     }
                     is DiscoverOverlayState.Restore -> {
-                        Text(overlay.title.title, color = C.fg, style = WolfskinTokens.Type.sheetTitle)
-                        Text("Hidden from ${state.shell.person.name}’s picks.", color = C.muted, style = WolfskinTokens.Type.body)
-                        Row(horizontalArrangement = Arrangement.spacedBy(L.buttonGap)) {
+                        Text(overlay.title.title, color = C.fg, style = DiscoverType.sheetTitle)
+                        Text("Hidden from ${state.shell.person.name}’s picks.", color = C.muted, style = DiscoverType.body)
+                        Row(Modifier.padding(top = D.sheetButtonTop), horizontalArrangement = Arrangement.spacedBy(L.buttonGap)) {
                             DiscoverButton("Show again", overlay.focus == 0) { state.restore(overlay.title) }
                             DiscoverButton("Back", overlay.focus == 1, primary = false) { state.overlay = null }
                         }
@@ -60,16 +67,16 @@ fun DiscoverOverlay(state: DiscoverState) {
     }
     state.toast?.let { text ->
         Box(Modifier.offset(WolfskinTokens.Shell.stageWidth - L.safeSide - WolfskinTokens.Library.captionWidth, L.navBand).width(WolfskinTokens.Library.captionWidth).background(C.surface2, RoundedCornerShape(WolfskinTokens.Radius.panel)).padding(L.buttonGap)) {
-            Text(text, color = C.fg, style = WolfskinTokens.Type.body)
+            Text(text, color = C.fg, style = DiscoverType.body)
         }
     }
 }
 
 @Composable
 private fun RequestSheet(state: DiscoverState, sheet: RequestSheetState) {
-    Text(if (sheet.held) "Add for someone" else "Request", color = C.fg, style = WolfskinTokens.Type.sheetTitle)
+    Text(if (sheet.held) "Add for someone" else "Request", color = C.fg, style = DiscoverType.sheetTitle)
     Text("${sheet.title.title} · ${sheet.title.typeWord}${sheet.title.year?.let { " · $it" }.orEmpty()}",
-        Modifier.offset(y = D.sheetSubTop).padding(bottom = D.sheetSubGap + D.sheetSubTop), color = C.muted, style = WolfskinTokens.Type.body)
+        Modifier.offset(y = D.sheetSubTop).padding(bottom = D.sheetSubGap + D.sheetSubTop), color = C.muted, style = DiscoverType.body)
     if (state.isSignedIn) DiscoverRatings(sheet.title.ratings, Modifier.layout { measurable, constraints ->
         val placeable = measurable.measure(constraints)
         layout(placeable.width, placeable.height + (D.sheetRatingTop + D.sheetRatingBottom).roundToPx()) {
@@ -79,15 +86,17 @@ private fun RequestSheet(state: DiscoverState, sheet: RequestSheetState) {
     when (sheet.phase) {
         RequestPhase.Choose, RequestPhase.Sending -> RequestChoices(state, sheet)
         RequestPhase.LoadingRecipients -> {
-            Text("For", Modifier.padding(top = D.sheetLabelTop), color = C.dim, style = WolfskinTokens.Type.label)
+            Text("For", Modifier.padding(top = D.sheetLabelTop), color = C.dim, style = DiscoverType.label)
             repeat(3) {
                 Row(Modifier.fillMaxWidth().height(L.sheetRow).background(C.listRowRest, RoundedCornerShape(WolfskinTokens.Radius.listRow)).padding(horizontal = D.sheetRowPadding),
                     horizontalArrangement = Arrangement.spacedBy(D.sheetPersonGap), verticalAlignment = Alignment.CenterVertically) {
-                    Box(Modifier.size(D.sheetAvatar).background(C.surface2, CircleShape))
-                    Box(Modifier.width(D.skeletonNameWidth).height(D.skeletonNameHeight).background(C.surface2, RoundedCornerShape(WolfskinTokens.Shell.skeletonRadius)))
+                    Box(Modifier.size(D.sheetAvatar).background(C.surface, CircleShape))
+                    Box(Modifier.width(D.skeletonNameWidth).height(D.skeletonNameHeight).background(C.surface, RoundedCornerShape(WolfskinTokens.Shell.skeletonRadius)))
                 }
             }
-            DiscoverButton("Close", true) { state.overlay = null }
+            Box(Modifier.padding(top = D.sheetButtonTop)) {
+                DiscoverButton("Close", true, primary = false) { state.overlay = null }
+            }
         }
         else -> RequestOutcome(state, sheet)
     }
@@ -95,7 +104,7 @@ private fun RequestSheet(state: DiscoverState, sheet: RequestSheetState) {
 
 @Composable
 private fun RequestChoices(state: DiscoverState, sheet: RequestSheetState) {
-    Text("For", Modifier.padding(top = D.sheetLabelTop), color = C.dim, style = WolfskinTokens.Type.label)
+    Text("For", Modifier.padding(top = D.sheetLabelTop), color = C.dim, style = DiscoverType.label)
     sheet.people.forEachIndexed { index, person ->
         val focused = sheet.focus == index
         val disabled = person.key in sheet.title.heldBy
@@ -105,18 +114,18 @@ private fun RequestChoices(state: DiscoverState, sheet: RequestSheetState) {
             .clickable(enabled = !disabled && sheet.phase == RequestPhase.Choose) { sheet.selected = index; sheet.focus = sheet.buttonIndex }
             .padding(horizontal = D.sheetRowPadding), horizontalArrangement = Arrangement.spacedBy(D.sheetPersonGap), verticalAlignment = Alignment.CenterVertically) {
             Avatar(person, D.sheetAvatar, WolfskinTokens.Type.avatarLetterSheetRow)
-            Text(person.name + if (person.key == sheet.viewer.key) " (you)" else "", Modifier.weight(1f), color = if (focused) C.onFocus else C.fg, style = WolfskinTokens.Type.listTitle)
-            if (disabled) Text("In library", color = if (focused) C.onFocus else C.muted, style = WolfskinTokens.Type.caption)
+            Text(person.name + if (person.key == sheet.viewer.key) " (you)" else "", Modifier.weight(1f), color = if (focused) C.onFocus else C.fg, style = DiscoverType.listTitle)
+            if (disabled) Text("In library", color = (if (focused) C.onFocus else C.fg).copy(alpha = D.reasonOpacity), style = DiscoverType.reason)
             else Box(Modifier.size(D.sheetRadio).background(if (sheet.selected == index) C.accent else C.listRowRest.copy(alpha = 0f), CircleShape)
                 .border(if (sheet.selected != index || focused) D.sheetRadioRing else WolfskinTokens.Shell.zero, if (focused) C.onFocus.copy(alpha = .5f) else C.fg.copy(alpha = .35f), CircleShape), contentAlignment = Alignment.Center) {
                 if (sheet.selected == index) Box(Modifier.size(D.sheetRadioDot).background(C.onFocus, CircleShape))
             }
         }
     }
-    if (sheet.blocked) Text("Season details are unknown right now, so this series can’t be requested yet. Nothing was sent.", color = C.warn, style = WolfskinTokens.Type.caption)
-    else if (sheet.title.type == "tv" && !sheet.held) Text("Whole series: every listed season. Other seasons may download too.", color = C.dim, style = WolfskinTokens.Type.caption)
+    if (sheet.blocked) Text("Season details are unknown right now, so this series can’t be requested yet. Nothing was sent.", color = C.warn, style = DiscoverType.caption)
+    else if (sheet.title.type == "tv" && !sheet.held) Text("Whole series: every listed season. Other seasons may download too.", color = C.dim, style = DiscoverType.caption)
     Box(Modifier.padding(top = D.sheetButtonTop)) {
-        DiscoverButton(if (sheet.blocked) "Close" else sheet.buttonLabel, sheet.focus == sheet.buttonIndex, glyph = if (sheet.blocked) null else "plus") { sheet.focus = sheet.buttonIndex; state.key(ShellKey.Ok) }
+        DiscoverButton(if (sheet.blocked) "Close" else sheet.buttonLabel, sheet.focus == sheet.buttonIndex, glyph = if (sheet.blocked) null else "plus", primary = !sheet.blocked) { sheet.focus = sheet.buttonIndex; state.key(ShellKey.Ok) }
     }
 }
 
@@ -141,8 +150,8 @@ private fun RequestOutcome(state: DiscoverState, sheet: RequestSheetState) {
     }
     ReceiptPanel(heading, text, if (phase == RequestPhase.Receipt) C.fg else if (phase == RequestPhase.Refused) C.fail else C.warn,
         if (phase == RequestPhase.Receipt) sheet.result?.stage ?: "Waiting" else null)
-    if (phase == RequestPhase.Receipt) Text("Follow it under Requests in Settings.", color = C.dim, style = WolfskinTokens.Type.caption)
-    Row(horizontalArrangement = Arrangement.spacedBy(L.buttonGap)) {
+    if (phase == RequestPhase.Receipt) Text("Follow it under Requests in Settings.", color = C.dim, style = DiscoverType.caption)
+    Row(Modifier.padding(top = D.sheetButtonTop), horizontalArrangement = Arrangement.spacedBy(L.buttonGap)) {
         if (phase in setOf(RequestPhase.NotConfirmed, RequestPhase.Pending, RequestPhase.RecipientsUnavailable)) {
             DiscoverButton(if (phase == RequestPhase.RecipientsUnavailable) "Try again" else "Check again", sheet.focus == sheet.buttonIndex) { sheet.focus = sheet.buttonIndex; state.key(ShellKey.Ok) }
             DiscoverButton("Close", sheet.focus != sheet.buttonIndex, primary = false) { state.overlay = null }
@@ -155,12 +164,13 @@ private fun ReceiptPanel(title: String, text: String, color: androidx.compose.ui
     Column(Modifier.fillMaxWidth().background(C.listRowRest, RoundedCornerShape(WolfskinTokens.Radius.panel)).padding(WolfskinTokens.Shell.panelPaddingX, WolfskinTokens.Shell.panelPaddingY), verticalArrangement = Arrangement.spacedBy(WolfskinTokens.Shell.panelGap)) {
         Row(horizontalArrangement = Arrangement.spacedBy(L.badgeInset), verticalAlignment = Alignment.CenterVertically) {
             Glyph(if (title == "Requested" || title == "Hidden from your picks" || title.startsWith("Adding")) "check" else if (title == "Request unresolved") "clock" else "alert", color, Modifier.size(WolfskinTokens.Shell.panelIcon))
-            Text(title, color = color, style = WolfskinTokens.Type.stateTitle.copy(fontWeight = FontWeight.Bold))
+            Text(title, color = color, style = DiscoverType.stateTitle)
         }
-        Text(text, color = C.muted, style = WolfskinTokens.Type.body)
-        if (stage != null) Row(horizontalArrangement = Arrangement.spacedBy(L.navBlobAvatarPad), verticalAlignment = Alignment.CenterVertically) {
-            Glyph("clock", C.muted, Modifier.size(L.buttonIcon))
-            Text(stage, color = C.muted, style = WolfskinTokens.Type.label)
+        Text(text, color = C.muted, style = DiscoverType.body)
+        if (stage != null) Row(horizontalArrangement = Arrangement.spacedBy(D.stageGap), verticalAlignment = Alignment.CenterVertically) {
+            val stageColor = when (stage) { "Ready" -> C.ok; "Failed" -> C.fail; "Downloading", "Almost" -> C.accent; else -> C.muted }
+            Glyph("clock", stageColor, Modifier.size(L.buttonIcon))
+            Text(stage, color = stageColor, style = DiscoverType.label)
         }
     }
 }

wolfskin-design/src/main/java/org/justinvisser/wolfskin/design/DiscoverRatings.kt

@@ -29,7 +29,7 @@ fun DiscoverRatings(ratings: List<DiscoverRating>, modifier: Modifier = Modifier
     if (ratings.isEmpty()) return
     val locale = LocalConfiguration.current.locales[0]
     val labels = remember(ratings, locale) { ratings.map { formatDiscoverRating(it, locale) } }
-    val style = remember { WolfskinTokens.Type.ratingPlate.copy(fontFeatureSettings = "tnum") }
+    val style = DiscoverType.ratings
     val markSize = with(LocalDensity.current) { style.fontSize.toDp() }
     val desaturated = remember { ColorFilter.colorMatrix(ColorMatrix().apply { setToSaturation(0f) }) }
     Row(modifier, horizontalArrangement = Arrangement.spacedBy(markSize * .7142857f), verticalAlignment = Alignment.CenterVertically) {

wolfskin-design/src/main/java/org/justinvisser/wolfskin/design/DiscoverScreen.kt

@@ -106,7 +106,7 @@ fun DiscoverScreen(state: DiscoverState, modifier: Modifier = Modifier) {
                         Row(Modifier.offset(L.safeSide, D.noteTop), horizontalArrangement = Arrangement.spacedBy(D.noteGap), verticalAlignment = Alignment.CenterVertically) {
                             val color = if (state.snapshot.status == DiscoverStatus.NoSeeds) C.muted else C.warn
                             Glyph(if (state.snapshot.status == DiscoverStatus.NoSeeds) "eye" else "alert", color, Modifier.size(D.noteIcon))
-                            Text(if (state.snapshot.status == DiscoverStatus.NoSeeds) "Watch something to get picks for ${shell.person.name}." else "Picks unavailable right now.", color = color, style = WolfskinTokens.Type.body)
+                            Text(if (state.snapshot.status == DiscoverStatus.NoSeeds) "Watch something to get picks for ${shell.person.name}." else "Picks unavailable right now.", color = color, style = DiscoverType.body)
                         }
                     }
                 }
@@ -122,19 +122,19 @@ private fun DiscoverHero(state: DiscoverState) {
     Column(Modifier.fillMaxWidth().height(L.row_phero).padding(start = L.safeSide, bottom = L.heroCopyBottom), verticalArrangement = Arrangement.Bottom) {
         Row(horizontalArrangement = Arrangement.spacedBy(WolfskinTokens.Card.posterGap), verticalAlignment = Alignment.CenterVertically) {
             Glyph("seerr", C.accentText, Modifier.size(L.buttonIcon))
-            Text(if (state.snapshot.status == DiscoverStatus.Ready) "For you" else "Trending", color = C.accentText, style = WolfskinTokens.Type.label)
+            Text(if (state.snapshot.status == DiscoverStatus.Ready) "For you" else "Trending", color = C.accentText, style = DiscoverType.label)
         }
         Spacer(Modifier.height(D.heroKickerGap))
-        Text(title.title, Modifier.width(L.heroCopyWidth), color = C.fg, style = WolfskinTokens.Type.displayHero, maxLines = 2, overflow = TextOverflow.Ellipsis)
+        Text(title.title, Modifier.width(L.heroCopyWidth), color = C.fg, style = DiscoverType.hero, maxLines = 2, overflow = TextOverflow.Ellipsis)
         Spacer(Modifier.height(D.heroTitleGap))
         Row(Modifier.height(D.heroFactsHeight), horizontalArrangement = Arrangement.spacedBy(D.heroFactsGap), verticalAlignment = Alignment.CenterVertically) {
-            Text("${title.typeWord}${title.year?.let { " · $it" }.orEmpty()}", color = C.muted, style = WolfskinTokens.Type.body)
-            if (title.genres.isNotEmpty()) Text(title.genres.take(2).joinToString(", "), color = C.muted, style = WolfskinTokens.Type.body)
+            Text("${title.typeWord}${title.year?.let { " · $it" }.orEmpty()}", color = C.muted, style = DiscoverType.body)
+            if (title.genres.isNotEmpty()) Text(title.genres.take(2).joinToString(", "), color = C.muted, style = DiscoverType.body)
             if (state.isSignedIn) DiscoverRatings(title.ratings)
-            if (state.shell.person.key in title.heldBy) Text("In your library", color = C.accentText, style = WolfskinTokens.Type.body)
+            if (state.shell.person.key in title.heldBy) Text("In your library", color = C.accentText, style = DiscoverType.body)
         }
         Spacer(Modifier.height(D.heroMetaGap))
-        Text(title.overview, Modifier.width(L.heroOverviewMax), color = C.muted, style = WolfskinTokens.Type.body, maxLines = 2, overflow = TextOverflow.Ellipsis)
+        Text(title.overview, Modifier.width(L.heroOverviewMax), color = C.muted, style = DiscoverType.body, maxLines = 2, overflow = TextOverflow.Ellipsis)
         Spacer(Modifier.height(D.heroOverviewGap))
         Row(verticalAlignment = Alignment.CenterVertically) {
             DiscoverButton("Details", state.contentFocused && state.focusedRow == 0, "about") { state.openTitle(title) }
@@ -156,7 +156,7 @@ private fun DiscoverChips(state: DiscoverState) {
                 .background(if (focused) C.fg else if (state.filter == value) C.accentSoft else C.chipRest, RoundedCornerShape(WolfskinTokens.Radius.chip))
                 .border(if (!focused && state.filter == value) WolfskinTokens.Focus.ringCardRing / 2 else WolfskinTokens.Shell.zero, if (!focused && state.filter == value) C.accent else C.chipRest.copy(alpha = 0f), RoundedCornerShape(WolfskinTokens.Radius.chip))
                 .clickable { state.focus(1, index); state.key(ShellKey.Ok) }.padding(horizontal = D.chipPadding), contentAlignment = Alignment.Center) {
-                Text(label, color = if (focused) C.onFocus else if (state.filter == value) C.accentText else C.fg, style = WolfskinTokens.Type.label)
+                Text(label, color = if (focused) C.onFocus else if (state.filter == value) C.accentText else C.fg, style = DiscoverType.label)
             }
         }
     }
@@ -166,17 +166,17 @@ private fun DiscoverChips(state: DiscoverState) {
 private fun DiscoverStatePanel(state: DiscoverState) {
     val signIn = state.snapshot.status == DiscoverStatus.NeedsSignIn
     Box(Modifier.fillMaxWidth().height(L.row_state)) {
-    Column(Modifier.padding(start = L.safeSide, top = D.stateTop).width(L.stateWidth)
-        .background(C.surface, RoundedCornerShape(WolfskinTokens.Radius.panel))
-        .border(WolfskinTokens.Library.borderWidth, C.border, RoundedCornerShape(WolfskinTokens.Radius.panel))
-        .padding(WolfskinTokens.Library.borderWidth).padding(D.statePaddingX, D.statePaddingY)) {
-        Row(horizontalArrangement = Arrangement.spacedBy(L.badgeInset), verticalAlignment = Alignment.CenterVertically) {
-            Glyph(if (signIn) "profile" else "alert", if (signIn) C.accentText else C.warn, Modifier.size(L.buttonIcon))
-            Text(if (signIn) "Discover needs sign-in" else "Discover is resting", color = C.fg, style = WolfskinTokens.Type.stateTitle)
+        Column(Modifier.padding(start = L.safeSide, top = D.stateTop).width(L.stateWidth)
+            .background(C.surface, RoundedCornerShape(WolfskinTokens.Radius.panel))
+            .border(WolfskinTokens.Library.borderWidth, C.border, RoundedCornerShape(WolfskinTokens.Radius.panel))
+            .padding(WolfskinTokens.Library.borderWidth).padding(D.statePaddingX, D.statePaddingY)) {
+            Row(horizontalArrangement = Arrangement.spacedBy(L.badgeInset), verticalAlignment = Alignment.CenterVertically) {
+                Glyph(if (signIn) "profile" else "alert", if (signIn) C.accentText else C.warn, Modifier.size(L.buttonIcon))
+                Text(if (signIn) "Discover needs sign-in" else "Discover is resting", color = C.fg, style = DiscoverType.stateTitle)
+            }
+            Text(if (signIn) "Sign this TV in to Conductarr to see picks and request titles. Your library plays as usual." else "Conductarr can’t be reached. Your library still plays.", Modifier.padding(top = L.navBlobAvatarPad, bottom = D.stateTextGap), color = C.muted, style = DiscoverType.body)
+            DiscoverButton("Try again", state.contentFocused, primary = signIn) { state.refresh() }
         }
-        Text(if (signIn) "Sign this TV in to Conductarr to see picks and request titles. Your library plays as usual." else "Conductarr can’t be reached. Your library still plays.", Modifier.padding(top = L.navBlobAvatarPad, bottom = D.stateTextGap), color = C.muted, style = WolfskinTokens.Type.body)
-        DiscoverButton("Try again", state.contentFocused) { state.refresh() }
-    }
     }
 }
 
@@ -184,10 +184,10 @@ private fun DiscoverStatePanel(state: DiscoverState) {
 @Composable
 fun DiscoverButton(label: String, focused: Boolean, glyph: String? = null, primary: Boolean = true, onClick: () -> Unit) {
     Row(Modifier.height(L.buttonHeight).focusScale(focused, WolfskinTokens.Focus.scaleControl)
-        .focusRing(focused, WolfskinTokens.Radius.button, WolfskinTokens.Focus.ringButtonGap, WolfskinTokens.Focus.ringButtonRing, C.accent)
+        .focusRing(focused, WolfskinTokens.Radius.button, WolfskinTokens.Focus.ringButtonGap, WolfskinTokens.Focus.ringButtonRing, C.accent, FocusLift.Button)
         .background(if (primary) C.fg else if (focused) C.buttonSecondaryFocused else C.buttonSecondary, RoundedCornerShape(WolfskinTokens.Radius.button))
         .clickable(onClick = onClick).padding(horizontal = L.buttonPaddingX), horizontalArrangement = Arrangement.spacedBy(L.badgeInset), verticalAlignment = Alignment.CenterVertically) {
         if (glyph != null) Glyph(glyph, if (primary) C.onFocus else C.fg, Modifier.size(L.buttonIcon))
-        Text(label, color = if (primary) C.onFocus else C.fg, style = WolfskinTokens.Type.button, maxLines = 1)
+        Text(label, color = if (primary) C.onFocus else C.fg, style = DiscoverType.button, maxLines = 1)
     }
 }

wolfskin-design/src/main/java/org/justinvisser/wolfskin/design/DiscoverShelf.kt

@@ -9,9 +9,7 @@ import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
-import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.offset
@@ -21,7 +19,6 @@ import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.lazy.LazyRow
 import androidx.compose.foundation.lazy.itemsIndexed
 import androidx.compose.foundation.lazy.rememberLazyListState
-import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
@@ -31,12 +28,9 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 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.graphics.Color
 import androidx.compose.ui.platform.testTag
-import androidx.compose.ui.platform.LocalDensity
-import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.zIndex
 import androidx.tv.material3.Text
 import org.justinvisser.wolfskin.design.WolfskinTokens.Card as K
@@ -69,18 +63,18 @@ fun DiscoverShelf(state: DiscoverState, lane: DiscoverLane, row: Int) {
         initialized = true
     }
     Box(Modifier.fillMaxWidth().height(L.rowHeadingBand + height + (if (services) WolfskinTokens.Shell.zero else K.posterCaptionBand) + L.rowGapAfter).testTag("discover-lane-${lane.id}")) {
-        Text(lane.title, Modifier.offset(L.safeSide), color = C.fg, style = WolfskinTokens.Type.rowHeading, maxLines = 1)
+        Text(lane.title, Modifier.offset(L.safeSide), color = C.fg, style = DiscoverType.rowHeading, maxLines = 1)
         LazyRow(state = cards, userScrollEnabled = false,
             contentPadding = PaddingValues(start = L.safeSide, end = WolfskinTokens.Shell.stageWidth - L.safeSide - (K.posterW * slots + K.posterGap * (slots - 1)), top = K.posterGap, bottom = K.posterGap),
             horizontalArrangement = Arrangement.spacedBy(K.posterGap),
             modifier = Modifier.offset(y = L.rowHeadingBand - K.posterGap).height(height + K.posterGap * 2)) {
             if (services) itemsIndexed(state.snapshot.services, key = { _, service -> "service:${service.id}" }, contentType = { _, _ -> "entry" }) { index, service ->
                 Box(Modifier.size(K.entryW, K.entryH).focusScale(active && index == column, WolfskinTokens.Focus.scaleCard)
-                    .focusRing(active && index == column, WolfskinTokens.Radius.card, WolfskinTokens.Focus.ringCardGap, WolfskinTokens.Focus.ringCardRing, C.accent)
+                    .focusRing(active && index == column, WolfskinTokens.Radius.card, WolfskinTokens.Focus.ringCardGap, WolfskinTokens.Focus.ringCardRing, C.accent, FocusLift.Card)
                     .background(Brush.linearGradient(listOf(Color.hsl(service.hue, .30f, .26f), Color.hsl(service.hue, .30f, .12f))), RoundedCornerShape(WolfskinTokens.Radius.card))
-                    .border(WolfskinTokens.Focus.ringCardRing / 2, C.border, RoundedCornerShape(WolfskinTokens.Radius.card))
+                    .border(WolfskinTokens.Library.borderWidth, C.border.copy(alpha = D.entryBorderOpacity), RoundedCornerShape(WolfskinTokens.Radius.card))
                     .clickable { state.focus(row, index); state.openService(service) }, contentAlignment = Alignment.BottomStart) {
-                    Text(service.name, Modifier.padding(start = D.entryPaddingX, bottom = D.entryPaddingY), style = D.entryText, color = C.fg)
+                    Text(service.name, Modifier.padding(start = D.entryPaddingX, bottom = D.entryPaddingY), style = DiscoverType.entry, color = C.fg)
                 }
             } else {
                 itemsIndexed(lane.titles, key = { _, item -> item.key }, contentType = { _, _ -> "poster" }) { index, item ->

wolfskin-design/src/main/java/org/justinvisser/wolfskin/design/DiscoverType.kt

@@ -0,0 +1,24 @@
+// SPDX-License-Identifier: GPL-2.0-only
+package org.justinvisser.wolfskin.design
+
+import androidx.compose.ui.text.PlatformTextStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.LineHeightStyle
+
+/** CSS line boxes survive native first/last-line trimming only within Discover's text stacks. */
+internal object DiscoverType {
+    private val lineBox = LineHeightStyle(LineHeightStyle.Alignment.Center, LineHeightStyle.Trim.None)
+    private val platform = PlatformTextStyle(includeFontPadding = false)
+    val hero = WolfskinTokens.Type.displayHero.copy(lineHeightStyle = lineBox, platformStyle = platform)
+    val body = WolfskinTokens.Type.body.copy(lineHeightStyle = lineBox, platformStyle = platform)
+    val label = WolfskinTokens.Type.label.copy(lineHeightStyle = lineBox, platformStyle = platform)
+    val button = WolfskinTokens.Type.button.copy(lineHeightStyle = lineBox, platformStyle = platform)
+    val sheetTitle = WolfskinTokens.Type.sheetTitle.copy(lineHeightStyle = lineBox, platformStyle = platform)
+    val stateTitle = WolfskinTokens.Type.stateTitle.copy(fontWeight = FontWeight.Bold, lineHeightStyle = lineBox, platformStyle = platform)
+    val listTitle = WolfskinTokens.Type.listTitle.copy(lineHeightStyle = lineBox, platformStyle = platform)
+    val caption = WolfskinTokens.Type.caption.copy(lineHeightStyle = lineBox, platformStyle = platform)
+    val reason = WolfskinTokens.Type.caption.copy(fontWeight = FontWeight.Medium, lineHeightStyle = lineBox, platformStyle = platform)
+    val rowHeading = WolfskinTokens.Type.rowHeading.copy(lineHeightStyle = lineBox, platformStyle = platform)
+    val entry = WolfskinTokens.Discover.entryText.copy(lineHeightStyle = lineBox, platformStyle = platform)
+    val ratings = WolfskinTokens.Type.ratingPlate.copy(fontFeatureSettings = "tnum", lineHeightStyle = lineBox, platformStyle = platform)
+}

wolfskin-design/src/main/java/org/justinvisser/wolfskin/design/Focus.kt

@@ -5,6 +5,10 @@ import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.animation.core.tween
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.ui.draw.dropShadow
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.drawBehind
 import androidx.compose.ui.geometry.CornerRadius
@@ -25,16 +29,31 @@ fun Modifier.focusScale(focused: Boolean, scale: Float): Modifier {
     return graphicsLayer { scaleX = animated; scaleY = animated }
 }
 
+/** Content lifts are distinct from the white person/gear rings. */
+enum class FocusLift { None, Card, Button }
+
 /** Draw the ring outside the slot; neither the gap nor the ring obscures content. */
 @Composable
-fun Modifier.focusRing(focused: Boolean, radius: Dp, gap: Dp, width: Dp, color: Color): Modifier {
-    val alpha by animateFloatAsState(if (focused) 1f else 0f,
+fun Modifier.focusRing(focused: Boolean, radius: Dp, gap: Dp, width: Dp, color: Color, lift: FocusLift = FocusLift.None): Modifier {
+    val ringAlpha by animateFloatAsState(if (focused) 1f else 0f,
         tween(WolfskinTokens.Motion.fast, easing = CubicBezierEasing(.25f, .1f, .25f, 1f)), label = "focus-ring")
-    return drawBehind {
-        if (alpha > 0f) {
+    val shadow = if (lift == FocusLift.None) this else {
+        val shape = remember(radius) { RoundedCornerShape(radius) }
+        val density = LocalDensity.current
+        val blur = with(density) { (if (lift == FocusLift.Card) WolfskinTokens.Lift.cardBlur else WolfskinTokens.Lift.buttonBlur).toPx() }
+        val shift = with(density) { (if (lift == FocusLift.Card) WolfskinTokens.Lift.cardY else WolfskinTokens.Lift.buttonY).toPx() }
+        dropShadow(shape) {
+            this.radius = blur
+            offset = Offset(0f, shift)
+            this.color = Color.Black
+            alpha = ringAlpha * if (lift == FocusLift.Card) WolfskinTokens.Lift.cardOpacity else WolfskinTokens.Lift.buttonOpacity
+        }
+    }
+    return shadow.drawBehind {
+        if (ringAlpha > 0f) {
             val outer = (gap + width).toPx()
             val inner = gap.toPx()
-            drawRoundRect(color.copy(alpha = color.alpha * alpha), Offset(-outer, -outer), Size(size.width + 2 * outer, size.height + 2 * outer), CornerRadius(radius.toPx() + outer))
+            drawRoundRect(color.copy(alpha = color.alpha * ringAlpha), Offset(-outer, -outer), Size(size.width + 2 * outer, size.height + 2 * outer), CornerRadius(radius.toPx() + outer))
             drawRoundRect(WolfskinTokens.Color.bg, Offset(-inner, -inner), Size(size.width + 2 * inner, size.height + 2 * inner), CornerRadius(radius.toPx() + inner))
         }
     }

wolfskin-design/src/main/java/org/justinvisser/wolfskin/design/LibraryPoster.kt

@@ -43,7 +43,7 @@ fun LibraryPoster(
     val shape = RoundedCornerShape(WolfskinTokens.Radius.card)
     Box(modifier.size(WolfskinTokens.Card.posterW, WolfskinTokens.Card.posterH)
         .focusScale(focused, WolfskinTokens.Focus.scaleCard)
-        .focusRing(focused, WolfskinTokens.Radius.card, WolfskinTokens.Focus.ringCardGap, WolfskinTokens.Focus.ringCardRing, C.accent)
+        .focusRing(focused, WolfskinTokens.Radius.card, WolfskinTokens.Focus.ringCardGap, WolfskinTokens.Focus.ringCardRing, C.accent, FocusLift.Card)
         .testTag("poster-${title.id}")) {
         Box(Modifier.fillMaxSize().clip(shape).background(C.surface2)) {
             val bitmap = remember(title.poster) { title.poster?.let { offlineArt?.invoke(it) } }

wolfskin-design/src/main/java/org/justinvisser/wolfskin/design/LibraryScreen.kt

@@ -5,7 +5,6 @@ import androidx.compose.foundation.border
 import androidx.compose.ui.text.SpanStyle
 import androidx.compose.ui.text.buildAnnotatedString
 import androidx.compose.ui.text.withStyle
-import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.lazy.LazyColumn

wolfskin-design/src/main/java/org/justinvisser/wolfskin/design/LibrarySeeAllCard.kt

@@ -17,7 +17,7 @@ fun LibrarySeeAllCard(count: Int, focused: Boolean, onClick: () -> Unit, modifie
     width: Dp = WolfskinTokens.Card.posterW, height: Dp = WolfskinTokens.Card.posterH) {
     val shape = RoundedCornerShape(WolfskinTokens.Radius.card)
     Column(modifier.size(width, height).focusScale(focused, WolfskinTokens.Focus.scaleCard)
-        .focusRing(focused, WolfskinTokens.Radius.card, WolfskinTokens.Focus.ringCardGap, WolfskinTokens.Focus.ringCardRing, WolfskinTokens.Color.accent)
+        .focusRing(focused, WolfskinTokens.Radius.card, WolfskinTokens.Focus.ringCardGap, WolfskinTokens.Focus.ringCardRing, WolfskinTokens.Color.accent, FocusLift.Card)
         .background(WolfskinTokens.Color.surface, shape).border(WolfskinTokens.Library.borderWidth, WolfskinTokens.Color.border, shape)
         .clickable(onClick = onClick), verticalArrangement = Arrangement.spacedBy(WolfskinTokens.Library.seeAllGap, Alignment.CenterVertically), horizontalAlignment = Alignment.CenterHorizontally) {
         Glyph("interface", WolfskinTokens.Color.accent, Modifier.size(WolfskinTokens.Layout.badge))

wolfskin-design/src/main/java/org/justinvisser/wolfskin/design/WhosWatching.kt

@@ -105,7 +105,7 @@ private fun RecoveryPicker(state: ShellState) {
 fun PickerButton(label: String, focused: Boolean, primary: Boolean, onClick: () -> Unit) {
     val background = if (primary) C.fg else if (focused) C.buttonSecondaryFocused else C.buttonSecondary
     Box(Modifier.height(L.buttonHeight).focusScale(focused, WolfskinTokens.Focus.scaleControl)
-        .focusRing(focused, WolfskinTokens.Radius.button, WolfskinTokens.Focus.ringButtonGap, WolfskinTokens.Focus.ringButtonRing, C.accent)
+        .focusRing(focused, WolfskinTokens.Radius.button, WolfskinTokens.Focus.ringButtonGap, WolfskinTokens.Focus.ringButtonRing, C.accent, FocusLift.Button)
         .background(background, RoundedCornerShape(WolfskinTokens.Radius.button)).clickable(onClick = onClick)
         .padding(horizontal = L.buttonPaddingX), contentAlignment = Alignment.Center) {
         Text(label, color = if (primary) C.onFocus else C.fg, style = WolfskinTokens.Type.button)

wolfskin-design/src/main/java/org/justinvisser/wolfskin/design/WolfskinTokens.kt

@@ -337,6 +337,20 @@ object WolfskinTokens {
         const val fallbackLightnessBottom = 0.1f
         const val fallbackIconOpacity = 0.45f
     }
+    object Lift {
+        val cardBlur = 25.0.dp
+        val cardY = 9.0.dp
+        const val cardOpacity = 0.65f
+        val buttonBlur = 20.0.dp
+        val buttonY = 6.0.dp
+        const val buttonOpacity = 0.5f
+        val heroBlur = 40.0.dp
+        val heroY = 15.0.dp
+        const val heroOpacity = 0.6f
+        val sheetBlur = 40.0.dp
+        val sheetX = -15.0.dp
+        const val sheetOpacity = 0.5f
+    }
     object Discover {
         val sheetPaddingX = 32.0.dp
         val sheetPaddingY = 40.0.dp
@@ -389,6 +403,9 @@ object WolfskinTokens {
         val frameBottomMin = 40.0.dp
         val anchorFitTop = 350.0.dp
         val anchorBottomClearance = 20.0.dp
+        const val reasonOpacity = 0.8f
+        val stageGap = 5.0.dp
+        const val entryBorderOpacity = 0.08f
         val ambientInset = 40.0.dp
         val ambientBlur = 30.0.dp
         const val ambientScale = 1.1f

wolfskin-design/src/test/java/org/justinvisser/wolfskin/design/DiscoverCaptureTest.kt

@@ -8,7 +8,6 @@ import android.view.WindowManager
 import androidx.activity.ComponentActivity
 import androidx.compose.foundation.layout.requiredSize
 import androidx.compose.runtime.CompositionLocalProvider
-import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.asImageBitmap
 import androidx.compose.ui.graphics.ImageBitmap