@momo-kits/native-kits 0.168.1-beta.24-debug → 0.168.1-beta.25-debug

package/CLAUDE.md

@@ -77,6 +77,7 @@ Publishing is automated (`publish.sh` + GitLab CI on `[ci build]` / `main`). Do
 - iPhone Duo with a side strip ≥ 60pt: back + toolkit leave the bar for `HeaderSideBar` (`navigation/component/SideBar.kt`, 48pt glass controls); custom header-right stays in the bar. `sideBar.top` is 170pt in portrait, 120pt on the inner display in landscape (height ≥ 600), 24pt on the outer display in landscape, or below the header when the status bar is on top; UIKit's `statusBarFrame` is useless on Duo. Unlike RN the column is clamped above footer (24pt gap) / rail (12pt gap).
 - Reserved regions (iOS 27.1 `reservedRegionsOfKind:`, reached through the ObjC runtime so older SDKs still build): a probe `UIView` (`platform/ReservedRegions.ios.kt` on the Compose root view; `ReservedRegionsProbe` inside SwiftUI `momoScreenLayout()`) re-reads them in `layoutSubviews`, which UIKit re-runs when they change. They push `sideBar.top` below the status cluster as it grows for calls / Live Activities, and `sideBar.bottom` (≥ 24pt) above a camera at the bottom end of the strip.
 - Tab bar on Duo is `bottomtab/DuoTabBar.kt`: a rail in the side strip (`sideBar.bottom` above the window bottom, QR below it) or, without a side bar, a floating bar spanning 6/8 grid columns. Both overlay the content; `duoFloatingTabBarInset` pads tab content, footer and FAB.
+- Duo tab selection motion (`bottomtab/DuoLiquidSelection.kt` / `ios/Navigation/BottomTab/DuoLiquidSelection.swift`, port of RN `useLiquidSelection.ts`, momo-kits !682): press lifts the lens, a drag past 10pt takes over (Compose: the bar's `pointerInput` consumes and so cancels the tab's clickable; SwiftUI: one `DragGesture` over the bar, tabs are not `Button`s), long press calls `BottomTab(onTabLongPress)` and release still selects, Reduce Motion (`platform/ReduceMotion`) falls back to a plain slide. SwiftUI integrates the lens spring on a display link because the stretch and the tabs' active tint read it every frame. Constants mirror RN — change both together.
 - Bar compression (`bottomtab/DuoBarCompression.kt`, HIG "Vertical controls"): when toolbar + rail don't fit in the strip, one is compressed — the toolkit into a `navigation_menu` button, the rail into one button showing the current tab — and tapping it swaps them; `BottomTab(compressionBehavior)` picks which starts compressed. If neither fits beside the other compressed, both rest compressed and a tap opens one for a moment. Side bar columns report their full height (0 when the screen puts nothing there) so the decision follows each screen's toolkit.
 - Glass header: on Duo with a side bar, Default/Extended headers without search and with a `ScrollState` let content scroll under the bar (`usesDuoGlassHeader`); the bar fades in a translucent surface + hairline over 16pt (Compose has no backdrop blur — RN's fallback look), the gradient leaves with the content.
 - Quick return header: glass headers and Animated headers (with a `ScrollState`) on the Duo side bar layout slide out with the content and back in on a reverse scroll; a half-shown header settles in or out once the scroll stops. The side bar is drawn apart from the header, so it stays put.

package/compose/build.gradle.kts

@@ -40,7 +40,7 @@ kotlin {
     }
 
     cocoapods {
-        version = "0.168.1-beta.24-debug"
+        version = "0.168.1-beta.25-debug"
         summary = "IOS Shared module"
         homepage = "https://momo.vn"
         ios.deploymentTarget = "15.0"

package/compose/compose.podspec

@@ -1,6 +1,6 @@
 Pod::Spec.new do |spec|
     spec.name                     = 'compose'
-    spec.version                  = '0.168.1-beta.24-debug'
+    spec.version                  = '0.168.1-beta.8-debug'
     spec.homepage                 = 'https://momo.vn'
     spec.source                   = { :http=> ''}
     spec.authors                  = ''

package/compose/src/androidMain/kotlin/vn/momo/kits/platform/ReduceMotion.android.kt

@@ -0,0 +1,17 @@
+package vn.momo.kits.platform
+
+import android.provider.Settings
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.platform.LocalConfiguration
+import androidx.compose.ui.platform.LocalContext
+
+@Composable
+actual fun rememberReduceMotion(): Boolean {
+    val context = LocalContext.current
+    // re-read on configuration changes; the setting has no observer of its own
+    val configuration = LocalConfiguration.current
+    return remember(context, configuration) {
+        Settings.Global.getFloat(context.contentResolver, Settings.Global.ANIMATOR_DURATION_SCALE, 1f) == 0f
+    }
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/bottomtab/BottomTab.kt

@@ -72,6 +72,8 @@ fun BottomTab(
     initialRouteName: String? = null,
     onTabPress: ((index: Int, switchTab: () -> Unit) -> Unit)? = null,
     backToInitialTab: Boolean = true,
+    // RN tabLongPress; on iPhone Duo the held tab is still selected on release
+    onTabLongPress: ((index: Int) -> Unit)? = null,
 ) {
     val navigation = LocalNavigation.current
     val navigator = LocalNavigator.current
@@ -195,6 +197,7 @@ fun BottomTab(
                 selectedIndex = selectedIndex,
                 onTabSelected = onTabSelected,
                 compression = compression,
+                onTabLongPress = onTabLongPress,
             )
         } else {
             Column {
@@ -203,6 +206,7 @@ fun BottomTab(
                     floatingButton = floatingButton,
                     selectedIndex = selectedIndex,
                     onTabSelected = onTabSelected,
+                    onTabLongPress = onTabLongPress,
                 )
                 Spacer(modifier = Modifier.fillMaxWidth().height(AppNavigationBar.current + Spacing.S).background(AppTheme.current.colors.background.surface))
             }

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/bottomtab/BottomTabBar.kt

@@ -1,8 +1,12 @@
 package vn.momo.kits.navigation.bottomtab
 
 import androidx.compose.animation.core.Animatable
+import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
+import androidx.compose.foundation.combinedClickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.collectIsPressedAsState
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
@@ -18,6 +22,8 @@ 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.graphics.graphicsLayer
+import androidx.compose.ui.semantics.Role
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.Dp
@@ -41,6 +47,7 @@ internal fun BottomTabBar(
     floatingButton: BottomTabFloatingButton? = null,
     selectedIndex: Int,
     onTabSelected: (Int) -> Unit,
+    onTabLongPress: ((Int) -> Unit)? = null,
 ) {
 
     val layout = getScreenLayout()
@@ -73,11 +80,11 @@ internal fun BottomTabBar(
             horizontalArrangement = Arrangement.SpaceAround,
         ) {
             if (floating == null) {
-                RenderTabBarItem(items, 0, items.size, selectedIndex, onTabSelected)
+                RenderTabBarItem(items, 0, items.size, selectedIndex, onTabSelected, onTabLongPress)
             } else {
-                RenderTabBarItem(items, 0, mid, selectedIndex, onTabSelected)
+                RenderTabBarItem(items, 0, mid, selectedIndex, onTabSelected, onTabLongPress)
                 Spacer(modifier = Modifier.width(slotWidth))
-                RenderTabBarItem(items, mid, items.size, selectedIndex, onTabSelected)
+                RenderTabBarItem(items, mid, items.size, selectedIndex, onTabSelected, onTabLongPress)
             }
         }
 
@@ -115,37 +122,48 @@ internal fun RowScope.RenderTabBarItem(
     fromIndex: Int,
     toIndex: Int,
     selectedIndex: Int,
-    onTabSelected: (Int) -> Unit
+    onTabSelected: (Int) -> Unit,
+    onTabLongPress: ((Int) -> Unit)? = null,
 ){
     for (index in fromIndex until toIndex) {
         Box(modifier = Modifier.weight(1f)) {
             TabBarItem(
                 item = items[index],
                 selected = index == selectedIndex,
-                onClick = { onTabSelected(index) }
+                onClick = { onTabSelected(index) },
+                onLongClick = onTabLongPress?.let { { it(index) } },
             )
         }
     }
 }
 
 @Composable
-internal fun TabBarItem(item: BottomTabItem, selected: Boolean, onClick: () -> Unit) {
+internal fun TabBarItem(item: BottomTabItem, selected: Boolean, onClick: () -> Unit, onLongClick: (() -> Unit)? = null) {
     // RN parity: "0" hides the badge, "" renders a dot.
     val badgeLabel = item.badgeLabel?.takeUnless { it.toIntOrNull() == 0 }
-    val isNumber = badgeLabel?.toIntOrNull() != null
     val showDot = badgeLabel?.isEmpty() ?: item.showDot
+    val interactionSource = remember { MutableInteractionSource() }
+    val pressed by interactionSource.collectIsPressedAsState()
+    val alpha by animateFloatAsState(if (pressed) 0.2f else 1f, label = "TabBarItemOpacity")
 
-    Box(modifier = Modifier
+    BoxWithConstraints(modifier = Modifier
         .fillMaxSize()
         .padding(horizontal = Spacing.XXS)
         .conditional(IsShowBaseLineDebug) {
             border(1.dp, Colors.blue_03)
         }
-        .activeOpacityClickable {
-            onClick()
-        },
+        .graphicsLayer { this.alpha = alpha }
+        .combinedClickable(
+            interactionSource = interactionSource,
+            indication = null,
+            role = Role.Tab,
+            onLongClick = onLongClick,
+            onClick = onClick,
+        ),
         contentAlignment = Alignment.BottomStart
     ){
+        // from the icon's center to the cell's end edge
+        val badgeMaxWidth = (maxWidth / 2 - Spacing.XXS).coerceAtLeast(0.dp)
         Column(
             modifier = Modifier
                 .fillMaxSize()
@@ -158,11 +176,13 @@ internal fun TabBarItem(item: BottomTabItem, selected: Boolean, onClick: () -> U
                     source = item.icon,
                     size = 28.dp,
                     color = if (selected) AppTheme.current.colors.primary else AppTheme.current.colors.text.hint)
-                val badgeAnchor = Modifier.matchParentSize().wrapContentSize(Alignment.TopEnd, unbounded = true)
                 if (showDot) {
-                    BadgeDot(size = DotSize.Small, modifier = badgeAnchor.offset(x = 4.dp, y = (-4).dp))
+                    val dotAnchor = Modifier.matchParentSize().wrapContentSize(Alignment.TopEnd, unbounded = true)
+                    BadgeDot(size = DotSize.Small, modifier = dotAnchor.offset(x = 4.dp, y = (-4).dp))
                 } else if (!badgeLabel.isNullOrEmpty()) {
-                    Badge(badgeLabel, modifier = badgeAnchor.offset(x = if (isNumber) 8.dp else 12.dp, y = (-8).dp))
+                    // starts at the icon's center and grows toward the cell's end edge, ellipsized past it
+                    val badgeAnchor = Modifier.matchParentSize().wrapContentSize(Alignment.TopStart, unbounded = true)
+                    Badge(badgeLabel, modifier = badgeAnchor.offset(x = 14.dp, y = (-8).dp).widthIn(max = badgeMaxWidth))
                 }
             }
             Text(

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/bottomtab/DuoLiquidSelection.kt

@@ -0,0 +1,380 @@
+package vn.momo.kits.navigation.bottomtab
+
+import androidx.compose.animation.core.Animatable
+import androidx.compose.animation.core.SpringSpec
+import androidx.compose.animation.core.spring
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.gestures.awaitEachGesture
+import androidx.compose.foundation.gestures.awaitFirstDown
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.PressInteraction
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.Stable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableFloatStateOf
+import androidx.compose.runtime.mutableIntStateOf
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.rememberUpdatedState
+import androidx.compose.runtime.setValue
+import androidx.compose.runtime.snapshotFlow
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.input.pointer.util.VelocityTracker
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.Job
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.launch
+import vn.momo.kits.platform.rememberReduceMotion
+import kotlin.math.abs
+import kotlin.math.min
+import kotlin.math.roundToInt
+
+// iOS 26 tab bar selection motion without the glass material, port of RN useLiquidSelection.ts.
+// Constants mirror RN; springs are RN (mass, stiffness, damping) converted to mass 1.
+private val SPRING = spring<Float>(dampingRatio = 0.68f, stiffness = 275f)
+// the lens trails the finger a little while dragged (RN damping 24, stiffness 600, mass 0.6)
+private val DRAG_SPRING = spring<Float>(dampingRatio = 0.63f, stiffness = 1000f)
+private val REDUCED_TWEEN = tween<Float>(durationMillis = 200)
+// while pressed the selection bubble grows into a lens past the bar's edges (80x54 to about 96x70)
+private const val LENS_SCALE_X = 1.2f
+private const val LENS_SCALE_Y = 1.3f
+// a moving lens stretches along its path and thins across it, eased per frame
+private const val STRETCH_PER_POINT = 0.012f
+private const val MAX_STRETCH = 0.25f
+private const val STRETCH_EASING = 0.25f
+private const val REST_STRETCH = 0.002f
+// a tap is shorter than the lift: the lens finishes rising, then settles, one smooth pulse
+private const val TAP_LIFT_MILLIS = 120
+private const val BAR_SWELL = 0.04f
+private const val ICON_POP = 1.15f
+private const val ICON_POP_MILLIS = 120
+// below it the tab's clickable handles the press as a tap
+private val DRAG_SLOP = 10.dp
+// UIScrollView rubber band constant
+private const val RUBBER_BAND = 0.55f
+// a cancelled press or a vetoed switch: the lens returns to the selected tab after this
+private const val RESYNC_DELAY_MILLIS = 100L
+
+internal enum class LiquidAxis { X, Y }
+
+// resistance past the first and last tab, the further the finger goes the less the lens follows
+private fun rubberBand(value: Float, max: Float, dimension: Float): Float {
+    fun band(overshoot: Float) = (1 - 1 / (overshoot * RUBBER_BAND / dimension + 1)) * dimension
+    return when {
+        value < 0 -> -band(-value)
+        value > max -> max + band(value - max)
+        else -> value
+    }
+}
+
+@Stable
+internal class DuoLiquidSelection(
+    private val scope: CoroutineScope,
+    private val axis: LiquidAxis,
+    private val density: Float,
+) {
+    var count = 0
+    // px between two neighbouring tab centers / to the first tab's center inside the drag modifier
+    var pitch = 0f
+    var firstCenter = 0f
+    var reduceMotion = false
+    var onSelect: (Int) -> Unit = {}
+    var onTick: () -> Unit = {}
+
+    val offset = Animatable(0f)
+    val lift = Animatable(0f)
+    var stretch by mutableFloatStateOf(0f)
+        private set
+    var selectedIndex by mutableIntStateOf(0)
+        private set
+
+    // where the lens is heading, so a recomposition doesn't restart a spring already going there
+    private var destination = 0f
+    private var dragging = false
+    private var hovered = 0
+    private var measured = false
+    private var resyncJob: Job? = null
+
+    private fun move(target: Float, velocity: Float? = null, spec: SpringSpec<Float> = SPRING) {
+        if (destination == target && velocity == null) return
+        destination = target
+        scope.launch {
+            if (reduceMotion) offset.animateTo(target, REDUCED_TWEEN)
+            else offset.animateTo(target, spec, initialVelocity = velocity ?: offset.velocity)
+        }
+    }
+
+    private fun animateLift(target: Float) {
+        scope.launch { if (reduceMotion) lift.snapTo(0f) else lift.animateTo(target, SPRING) }
+    }
+
+    suspend fun sync(index: Int) {
+        selectedIndex = index
+        val target = index * pitch
+        // snap on first layout so the lens doesn't slide in from the leading edge
+        if (measured) {
+            move(target)
+        } else {
+            destination = target
+            offset.snapTo(target)
+        }
+        measured = pitch > 0
+    }
+
+    suspend fun trackStretch() {
+        var previous = offset.value
+        snapshotFlow { offset.value }.collect { current ->
+            if (reduceMotion) {
+                stretch = 0f
+            } else {
+                val target = min(abs(current - previous) / density * STRETCH_PER_POINT, MAX_STRETCH)
+                // eased both ways: a slow frame (the spring turning at its overshoot) must not snap the shape
+                val next = stretch + (target - stretch) * STRETCH_EASING
+                stretch = if (next < REST_STRETCH) 0f else next
+            }
+            previous = current
+        }
+    }
+
+    // returns the lens to the selected tab unless a switch to where it is heading happened
+    private fun resync() {
+        resyncJob?.cancel()
+        resyncJob = scope.launch {
+            delay(RESYNC_DELAY_MILLIS)
+            val target = selectedIndex * pitch
+            if (!dragging && destination != target) move(target)
+        }
+    }
+
+    fun pressIn(index: Int) {
+        resyncJob?.cancel()
+        // the lens heads to the pressed tab, not only the selected one
+        move(index * pitch)
+        animateLift(1f)
+    }
+
+    // false when a drag took the press over
+    fun pressOut(): Boolean {
+        if (dragging) return false
+        if (!reduceMotion) {
+            scope.launch {
+                lift.animateTo(1f, tween(TAP_LIFT_MILLIS))
+                lift.animateTo(0f, SPRING)
+            }
+        }
+        // the lens keeps heading to the pressed tab: onClick switches to it, a cancelled press brings it back
+        resync()
+        return true
+    }
+
+    private fun position(point: Offset) = (if (axis == LiquidAxis.X) point.x else point.y) - firstCenter
+
+    private fun nearest(value: Float): Int =
+        if (pitch > 0) (value / pitch).roundToInt().coerceIn(0, (count - 1).coerceAtLeast(0)) else 0
+
+    private fun dragStart(point: Offset) {
+        dragging = true
+        resyncJob?.cancel()
+        hovered = nearest(position(point))
+        animateLift(1f)
+    }
+
+    private fun dragUpdate(point: Offset) {
+        val value = position(point)
+        val target = nearest(value)
+        if (target != hovered) {
+            hovered = target
+            onTick()
+        }
+        val follow = rubberBand(value, (count - 1) * pitch, pitch)
+        if (reduceMotion) {
+            destination = follow
+            scope.launch { offset.snapTo(follow) }
+        } else {
+            move(follow, spec = DRAG_SPRING)
+        }
+    }
+
+    private fun dragEnd(point: Offset?, velocity: Float) {
+        dragging = false
+        animateLift(0f)
+        if (point == null) {
+            move(selectedIndex * pitch, velocity)
+            return
+        }
+        val target = nearest(position(point))
+        move(target * pitch, velocity)
+        onSelect(target)
+        resync()
+    }
+
+    // The drag consumes the pointer once past the slop, which cancels the tab's clickable,
+    // so a press is either a tap or a drag.
+    val dragGesture: Modifier = Modifier.pointerInput(Unit) {
+        val slop = DRAG_SLOP.toPx()
+        awaitEachGesture {
+            val down = awaitFirstDown(requireUnconsumed = false)
+            val tracker = VelocityTracker()
+            tracker.addPosition(down.uptimeMillis, down.position)
+            var active = false
+            var last = down.position
+            while (true) {
+                val change = awaitPointerEvent().changes.firstOrNull { it.id == down.id }
+                if (change == null) {
+                    if (active) dragEnd(null, 0f)
+                    break
+                }
+                tracker.addPosition(change.uptimeMillis, change.position)
+                if (!change.pressed) {
+                    if (active) {
+                        change.consume()
+                        val velocity = tracker.calculateVelocity()
+                        dragEnd(change.position, if (axis == LiquidAxis.X) velocity.x else velocity.y)
+                    }
+                    break
+                }
+                last = change.position
+                if (!active && (last - down.position).getDistance() > slop) {
+                    active = true
+                    dragStart(last)
+                }
+                if (active) {
+                    change.consume()
+                    dragUpdate(last)
+                }
+            }
+        }
+    }
+
+    val bubbleTransform: Modifier = Modifier.graphicsLayer {
+        val along = 1 + stretch
+        val across = 1 - stretch * 0.5f
+        val lensX = 1 + lift.value * (LENS_SCALE_X - 1)
+        val lensY = 1 + lift.value * (LENS_SCALE_Y - 1)
+        if (axis == LiquidAxis.X) {
+            translationX = offset.value
+            scaleX = lensX * along
+            scaleY = lensY * across
+        } else {
+            translationY = offset.value
+            scaleX = lensX * across
+            scaleY = lensY * along
+        }
+    }
+
+    val barTransform: Modifier = Modifier.graphicsLayer {
+        scaleX = 1 + lift.value * BAR_SWELL
+        scaleY = scaleX
+    }
+
+    // active tint of a tab follows the lens over it
+    fun activeAlpha(index: Int): Float {
+        if (pitch <= 0) return if (selectedIndex == index) 1f else 0f
+        return (1 - abs(offset.value - index * pitch) / pitch).coerceIn(0f, 1f)
+    }
+}
+
+@Composable
+internal fun rememberDuoLiquidSelection(
+    count: Int,
+    pitch: Dp,
+    firstCenter: Dp,
+    axis: LiquidAxis,
+    index: Int,
+    onSelect: (Int) -> Unit,
+    onTick: () -> Unit,
+): DuoLiquidSelection {
+    val scope = rememberCoroutineScope()
+    val density = LocalDensity.current
+    val selection = remember(axis) { DuoLiquidSelection(scope, axis, density.density) }
+    val reduceMotion = rememberReduceMotion()
+    val pitchPx = with(density) { pitch.toPx() }
+    selection.count = count
+    selection.pitch = pitchPx
+    selection.firstCenter = with(density) { firstCenter.toPx() }
+    selection.reduceMotion = reduceMotion
+    selection.onSelect = onSelect
+    selection.onTick = onTick
+
+    LaunchedEffect(selection, index, pitchPx) { selection.sync(index) }
+    LaunchedEffect(selection) { selection.trackStretch() }
+    return selection
+}
+
+// Press tracking for one tab: lifts the lens over it and, like the system tab bar, still picks a
+// held tab when released. Returns the long-press handler for the tab's combinedClickable.
+@Composable
+internal fun DuoLiquidSelection.rememberPressTracking(
+    index: Int,
+    interactionSource: MutableInteractionSource,
+    onSelect: () -> Unit,
+    onLongPress: (() -> Unit)?,
+): () -> Unit {
+    val longPressed = remember { mutableStateOf(false) }
+    val currentOnSelect by rememberUpdatedState(onSelect)
+    val currentOnLongPress by rememberUpdatedState(onLongPress)
+    LaunchedEffect(interactionSource, index) {
+        interactionSource.interactions.collect {
+            when (it) {
+                is PressInteraction.Press -> {
+                    longPressed.value = false
+                    pressIn(index)
+                }
+                is PressInteraction.Release -> if (pressOut() && longPressed.value) currentOnSelect()
+                is PressInteraction.Cancel -> pressOut()
+            }
+        }
+    }
+    return remember {
+        {
+            longPressed.value = true
+            currentOnLongPress?.invoke()
+        }
+    }
+}
+
+// The tab the lens lands on pops.
+@Composable
+internal fun DuoLiquidSelection.rememberIconPop(index: Int): Animatable<Float, *> {
+    val pop = remember { Animatable(1f) }
+    val isSelected = selectedIndex == index
+    val initial = remember { mutableStateOf(true) }
+    LaunchedEffect(isSelected) {
+        if (initial.value) {
+            initial.value = false
+            return@LaunchedEffect
+        }
+        if (isSelected && !reduceMotion) {
+            pop.animateTo(ICON_POP, tween(ICON_POP_MILLIS))
+            pop.animateTo(1f, SPRING)
+        }
+    }
+    return pop
+}
+
+// Single button version of the lift, e.g. the compressed rail.
+@Composable
+internal fun Modifier.pressLift(interactionSource: MutableInteractionSource): Modifier {
+    val lift = remember { Animatable(0f) }
+    val reduceMotion by rememberUpdatedState(rememberReduceMotion())
+    LaunchedEffect(interactionSource) {
+        interactionSource.interactions.collect {
+            when (it) {
+                is PressInteraction.Press -> if (!reduceMotion) launch { lift.animateTo(1f, SPRING) }
+                is PressInteraction.Release, is PressInteraction.Cancel -> launch { lift.animateTo(0f, SPRING) }
+            }
+        }
+    }
+    return graphicsLayer {
+        scaleX = 1 + lift.value * (LENS_SCALE_X - 1) * 0.5f
+        scaleY = scaleX
+    }
+}