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

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

@@ -1,86 +0,0 @@
-package vn.momo.kits.navigation.bottomtab
-
-import androidx.compose.foundation.Canvas
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.offset
-import androidx.compose.foundation.layout.width
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Path
-import androidx.compose.ui.platform.LocalDensity
-import androidx.compose.ui.unit.Dp
-import androidx.compose.ui.unit.IntOffset
-import androidx.compose.ui.unit.dp
-import androidx.compose.ui.zIndex
-import vn.momo.kits.const.AppTheme
-
-@Composable
-internal fun CurvedContainer(
-    circleSize: Dp = 48.dp,
-    tabBarItemIconSize: Dp = 28.dp,
-    circleOverSize: Dp = 2.dp,
-    width: Dp = 71.dp,
-    height: Dp = 16.dp
-) {
-    val theme = AppTheme.current
-    val density = LocalDensity.current
-    val widthPx = with(density) { width.toPx()}
-
-    val circleSizePx = with(density) { circleSize.toPx() }
-    val tabBarItemIconSizePx = with(density) { tabBarItemIconSize.toPx() }
-    val circleOverSizePx = with(density) { circleOverSize.toPx() }
-
-    val circlePositionTop = circleSizePx - tabBarItemIconSizePx - 10f
-    val circleOverTop = circlePositionTop + circleOverSizePx
-    val circleR = circleSizePx / 2
-    val circleOverR = circleR + circleOverSizePx
-
-    val centerX = widthPx / 2
-
-    val curvedPath = getPath(
-        circleOverTop = circleOverTop,
-        centerX = centerX,
-        circleOverR = circleOverR,
-        widthPx = widthPx
-    )
-
-    Box(
-        contentAlignment = Alignment.BottomCenter
-    ){
-        Canvas(
-            modifier = Modifier
-                .width(width)
-                .height(height)
-                .offset{ IntOffset(x = 0, y = 24) }
-                .zIndex(-1f)
-        ) {
-            drawPath(path = curvedPath, color = theme.colors.background.surface)
-        }
-    }
-}
-
-private fun getPath(circleOverTop: Float, centerX: Float, circleOverR: Float, widthPx: Float): Path{
-    return Path().apply {
-        moveTo(0f, circleOverTop)
-        lineTo(centerX - circleOverR - 40f, circleOverTop)
-
-        cubicTo(
-            centerX - circleOverR, circleOverTop,
-            centerX - circleOverR, 0f,
-            centerX, 0f
-        )
-
-        cubicTo(
-            centerX + circleOverR, 0f,
-            centerX + circleOverR, circleOverTop,
-            centerX + circleOverR + 40f, circleOverTop
-        )
-
-        lineTo(widthPx, circleOverTop)
-        lineTo(widthPx, 60f)
-        lineTo(0f, 60f)
-        close()
-    }
-}

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

@@ -1,97 +0,0 @@
-package vn.momo.kits.navigation.bottomtab
-
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.Stable
-import androidx.compose.runtime.compositionLocalOf
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
-import androidx.compose.ui.unit.Dp
-import vn.momo.kits.const.Spacing
-import vn.momo.kits.layout.DuoMetrics
-import vn.momo.kits.layout.ScreenLayout
-
-// iPhone Duo: which side bar bar starts compressed when the strip cannot hold both whole.
-enum class DuoBarCompressionBehavior { TOOLBAR, TAB_BAR }
-
-private enum class DuoBar { TOOLBAR, TAB_BAR }
-
-@Stable
-internal class DuoBarCompression(
-    val toolbarCompressed: Boolean = false,
-    val tabBarCompressed: Boolean = false,
-    // the open rail needs the toolbar button slot too: only Back stays
-    val toolbarHidden: Boolean = false,
-    val expandToolbar: () -> Unit = {},
-    val expandTabBar: () -> Unit = {},
-    // a rail opened from the compressed state closes once a tab is picked
-    val onTabSelected: () -> Unit = {},
-    // side bar columns report their full height so the tab bar knows what is left
-    val setToolbarHeight: (Dp) -> Unit = {},
-)
-
-internal val LocalDuoBarCompression = compositionLocalOf { DuoBarCompression() }
-
-// space kept between the top and the bottom groups (HIG Vertical controls)
-internal val DUO_GROUP_GAP = Spacing.M
-// Back, then the right toolkit: help + home capsule
-private val DEFAULT_TOOLBAR_HEIGHT = DuoMetrics.controlSize + Spacing.M + DuoMetrics.itemPitch * 2
-// Back, then the single button the toolbar folds into
-private val COMPRESSED_TOOLBAR_HEIGHT = DuoMetrics.controlSize * 2 + Spacing.M
-
-// Port of RN DuoBarCompression (HIG, Designing for iPhone Duo: Vertical controls):
-// - both fit: both stay whole
-// - one fits whole beside the other compressed: one is compressed, tapping it swaps them
-// - otherwise both rest compressed; tapping one opens it for a moment (the rail closes
-//   again once a tab is picked)
-@Composable
-internal fun rememberDuoBarCompression(
-    behavior: DuoBarCompressionBehavior,
-    tabCount: Int,
-    hasQr: Boolean,
-    layout: ScreenLayout,
-): DuoBarCompression {
-    var toolbarHeight by remember { mutableStateOf(DEFAULT_TOOLBAR_HEIGHT) }
-    var expanded by remember(behavior) {
-        mutableStateOf(if (behavior == DuoBarCompressionBehavior.TOOLBAR) DuoBar.TAB_BAR else DuoBar.TOOLBAR)
-    }
-    var opened by remember { mutableStateOf<DuoBar?>(null) }
-    val setToolbarHeight = remember { { height: Dp -> toolbarHeight = height } }
-    val sideBar = layout.sideBar
-
-    return remember(sideBar, layout.height, tabCount, hasQr, toolbarHeight, expanded, opened) {
-        if (sideBar == null) return@remember DuoBarCompression()
-        val room = layout.height - sideBar.bottom - sideBar.top - DUO_GROUP_GAP
-        val tabBar = duoRailHeight(tabCount, hasQr)
-        val compressedTabBar = duoRailHeight(1, hasQr, compressed = true)
-        fun fits(toolbar: Dp, tabs: Dp) = toolbar + tabs <= room
-
-        when {
-            fits(toolbarHeight, tabBar) -> DuoBarCompression(setToolbarHeight = setToolbarHeight)
-            fits(COMPRESSED_TOOLBAR_HEIGHT, tabBar) && fits(toolbarHeight, compressedTabBar) -> DuoBarCompression(
-                toolbarCompressed = expanded == DuoBar.TAB_BAR,
-                tabBarCompressed = expanded == DuoBar.TOOLBAR,
-                expandToolbar = { expanded = DuoBar.TOOLBAR },
-                expandTabBar = { expanded = DuoBar.TAB_BAR },
-                setToolbarHeight = setToolbarHeight,
-            )
-            // an opened rail always shows, even when only the group gap is short: it closes once a tab is picked
-            opened == DuoBar.TAB_BAR -> DuoBarCompression(
-                toolbarCompressed = true,
-                toolbarHidden = true,
-                expandToolbar = { opened = DuoBar.TOOLBAR },
-                expandTabBar = { opened = DuoBar.TAB_BAR },
-                onTabSelected = { opened = null },
-                setToolbarHeight = setToolbarHeight,
-            )
-            else -> DuoBarCompression(
-                toolbarCompressed = opened != DuoBar.TOOLBAR,
-                tabBarCompressed = true,
-                expandToolbar = { opened = DuoBar.TOOLBAR },
-                expandTabBar = { opened = DuoBar.TAB_BAR },
-                setToolbarHeight = setToolbarHeight,
-            )
-        }
-    }
-}

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

@@ -1,380 +0,0 @@
-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
-    }
-}