@momo-kits/native-kits 0.300.3-debug → 0.300.4-debug

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

@@ -0,0 +1,377 @@
+package vn.momo.kits.navigation.bottomtab
+
+import androidx.compose.animation.core.Spring
+import androidx.compose.animation.core.animateDpAsState
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.animation.core.spring
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.collectIsPressedAsState
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxScope
+import androidx.compose.foundation.layout.BoxWithConstraints
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.RowScope
+import androidx.compose.foundation.layout.absolutePadding
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.offset
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.compositionLocalOf
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.AbsoluteAlignment
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.semantics.Role
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.application.LocalContext
+import vn.momo.kits.application.MiniAppContext
+import vn.momo.kits.components.Badge
+import vn.momo.kits.components.BadgeDot
+import vn.momo.kits.components.DotSize
+import vn.momo.kits.components.Icon
+import vn.momo.kits.components.Text
+import vn.momo.kits.const.AppTheme
+import vn.momo.kits.const.Spacing
+import vn.momo.kits.const.Typography
+import vn.momo.kits.layout.DuoMetrics
+import vn.momo.kits.layout.ScreenLayout
+import vn.momo.kits.layout.SideBarEdge
+import vn.momo.kits.modifier.noFeedbackClickable
+import vn.momo.kits.modifier.setAutomationId
+
+// Figma Fold-Design-System MT1/MT2, mirrored from RN DuoTabBar.tsx.
+private val ITEM_SIZE = DuoMetrics.controlSize
+private val ICON_SIZE = 28.dp
+private val QR_ICON_SIZE = 24.dp
+private val RAIL_PADDING = 6.dp
+private val RAIL_GAP = Spacing.XXS
+// selection bubble overflows the 48 rail cell by 5 above and below
+private val RAIL_BUBBLE_WIDTH = 44.dp
+private val RAIL_BUBBLE_HEIGHT = 58.dp
+private val FLOATING_HEIGHT = DuoMetrics.floatingTabBarHeight
+private val FLOATING_PADDING = Spacing.XS
+// the system bar sizes its pill to the tabs instead of stretching it across the display
+private val FLOATING_ITEM_WIDTH = 80.dp
+// while pressed the selection bubble grows into a lens past the pill's edges
+private const val LENS_SCALE_X = 1.2f
+private const val LENS_SCALE_Y = 1.3f
+// Figma Home-2026 tab bar "Selection": brand pink at 8%
+private const val SELECTION_TINT_ALPHA = 0x14 / 255f
+// RN reanimated spring { damping: 18, stiffness: 220, mass: 0.8 }
+private val BUBBLE_SPRING = spring<Dp>(dampingRatio = 0.68f, stiffness = 275f, visibilityThreshold = Dp(0.5f))
+private val LENS_SPRING = spring<Float>(dampingRatio = 0.68f, stiffness = 275f)
+
+// Space from the window bottom the rail stack and its gap take, so the header side bar stays above it.
+internal val LocalDuoRailReserve = compositionLocalOf { 0.dp }
+
+// Rail plus the QR button under it; compressed, the rail is a single button.
+internal fun duoRailHeight(itemCount: Int, hasQr: Boolean, compressed: Boolean = false): Dp {
+    val rail = if (compressed) ITEM_SIZE
+    else RAIL_PADDING * 2 + ITEM_SIZE * itemCount + RAIL_GAP * (itemCount - 1).coerceAtLeast(0)
+    return rail + if (hasQr) Spacing.M + ITEM_SIZE else 0.dp
+}
+
+// Overlaps the home indicator inset like the system tab bar (21pt above the bottom with a 34pt inset).
+private fun floatingTabBarBottom(insetBottom: Dp): Dp =
+    maxOf(insetBottom - DuoMetrics.floatingTabBarInsetOverlap, Spacing.S)
+
+// Space tab content leaves under the floating bar; 0 when the rail sits in the side strip or off Duo.
+internal fun duoFloatingTabBarInset(layout: ScreenLayout): Dp =
+    if (layout.isIPhoneDuo && layout.sideBar == null) FLOATING_HEIGHT + floatingTabBarBottom(layout.insetBottom) else 0.dp
+
+// iPhone Duo tab bar: rail in the side bar, or a floating bar when unfolded portrait.
+@Composable
+internal fun BoxScope.DuoTabBar(
+    layout: ScreenLayout,
+    items: List<BottomTabItem>,
+    floatingButton: BottomTabFloatingButton?,
+    selectedIndex: Int,
+    onTabSelected: (Int) -> Unit,
+    compression: DuoBarCompression = DuoBarCompression(),
+) {
+    if (layout.sideBar != null) {
+        DuoRailTabBar(layout, items, floatingButton, selectedIndex, onTabSelected, compression)
+    } else {
+        DuoFloatingTabBar(layout, items, floatingButton, selectedIndex, onTabSelected)
+    }
+}
+
+// Vertical bar anchored to the bottom of the side bar, QR button below it (Figma MT1-C/E). When the
+// side bar is short it can shrink to one button showing the current tab (HIG "Tab bar compressed");
+// tapping it expands the rail and compresses the toolbar.
+@Composable
+private fun BoxScope.DuoRailTabBar(
+    layout: ScreenLayout,
+    items: List<BottomTabItem>,
+    floatingButton: BottomTabFloatingButton?,
+    selectedIndex: Int,
+    onTabSelected: (Int) -> Unit,
+    compression: DuoBarCompression,
+) {
+    val sideBar = layout.sideBar ?: return
+    val isRight = sideBar.edge == SideBarEdge.RIGHT
+
+    Column(
+        modifier = Modifier
+            .align(if (isRight) AbsoluteAlignment.BottomRight else AbsoluteAlignment.BottomLeft)
+            .width(sideBar.width)
+            .padding(bottom = sideBar.bottom)
+            .absolutePadding(left = if (isRight) Spacing.M else 0.dp, right = if (isRight) 0.dp else Spacing.M),
+        horizontalAlignment = if (isRight) AbsoluteAlignment.Left else AbsoluteAlignment.Right,
+        verticalArrangement = Arrangement.spacedBy(Spacing.M),
+    ) {
+        val current = items.getOrNull(selectedIndex)
+        if (compression.tabBarCompressed && current != null) {
+            Box(
+                modifier = Modifier
+                    .size(ITEM_SIZE)
+                    .tabBarMaterial(CircleShape)
+                    .noFeedbackClickable(onClick = compression.expandTabBar)
+                    .setAutomationId("bottom_tab_bar"),
+                contentAlignment = Alignment.Center,
+            ) {
+                DuoTabIcon(current, selected = true)
+            }
+        } else {
+            Rail(items, selectedIndex) {
+                onTabSelected(it)
+                compression.onTabSelected()
+            }
+        }
+        if (floatingButton != null) {
+            QrButton(floatingButton, size = ITEM_SIZE)
+        }
+    }
+}
+
+// Column of icon-only tab items with the sliding selection bubble.
+@Composable
+private fun Rail(items: List<BottomTabItem>, selectedIndex: Int, onItemClick: (Int) -> Unit) {
+    val pressedIndex = remember { mutableStateOf<Int?>(null) }
+    val bubbleOffset by animateDpAsState(
+        targetValue = (ITEM_SIZE + RAIL_GAP) * (pressedIndex.value ?: selectedIndex).coerceAtLeast(0),
+        animationSpec = BUBBLE_SPRING,
+        label = "DuoRailBubble",
+    )
+    Box(
+        Modifier
+            .width(ITEM_SIZE)
+            .tabBarMaterial(CircleShape)
+            .setAutomationId("bottom_tab_bar")
+    ) {
+        Box(
+            Modifier
+                .offset(
+                    x = (ITEM_SIZE - RAIL_BUBBLE_WIDTH) / 2,
+                    y = RAIL_PADDING - (RAIL_BUBBLE_HEIGHT - ITEM_SIZE) / 2 + bubbleOffset,
+                )
+                .size(RAIL_BUBBLE_WIDTH, RAIL_BUBBLE_HEIGHT)
+                .selectionLens(pressedIndex.value != null)
+        )
+        Column(
+            modifier = Modifier.padding(vertical = RAIL_PADDING),
+            verticalArrangement = Arrangement.spacedBy(RAIL_GAP),
+        ) {
+            items.forEachIndexed { index, item ->
+                Box(
+                    modifier = Modifier
+                        .size(ITEM_SIZE)
+                        .tabClickable(index, pressedIndex) { onItemClick(index) },
+                    contentAlignment = Alignment.Center,
+                ) {
+                    DuoTabIcon(item, selected = index == selectedIndex)
+                }
+            }
+        }
+    }
+}
+
+// Floating labelled bar for the unfolded portrait display, QR pinned in its own platter beside it.
+@Composable
+private fun BoxScope.DuoFloatingTabBar(
+    layout: ScreenLayout,
+    items: List<BottomTabItem>,
+    floatingButton: BottomTabFloatingButton?,
+    selectedIndex: Int,
+    onTabSelected: (Int) -> Unit,
+) {
+    val pressedIndex = remember { mutableStateOf<Int?>(null) }
+
+    Row(
+        modifier = Modifier
+            .align(Alignment.BottomCenter)
+            .fillMaxWidth()
+            .absolutePadding(
+                left = layout.insetLeft + DuoMetrics.floatingTabBarMargin,
+                right = layout.insetRight + DuoMetrics.floatingTabBarMargin,
+            )
+            .padding(bottom = floatingTabBarBottom(layout.insetBottom)),
+        horizontalArrangement = Arrangement.spacedBy(Spacing.S, Alignment.CenterHorizontally),
+    ) {
+        Box(
+            modifier = Modifier
+                .weight(1f, fill = false)
+                .width(FLOATING_ITEM_WIDTH * items.size + FLOATING_PADDING * 2)
+                .height(FLOATING_HEIGHT)
+                .tabBarMaterial(RoundedCornerShape(FLOATING_HEIGHT / 2))
+                .padding(FLOATING_PADDING)
+                .setAutomationId("bottom_tab_bar")
+        ) {
+            BoxWithConstraints(Modifier.fillMaxSize()) {
+                val cellWidth = maxWidth / items.size.coerceAtLeast(1)
+                val bubbleOffset by animateDpAsState(
+                    targetValue = cellWidth * (pressedIndex.value ?: selectedIndex).coerceAtLeast(0),
+                    animationSpec = BUBBLE_SPRING,
+                    label = "DuoFloatingBubble",
+                )
+                Box(
+                    Modifier
+                        .offset(x = bubbleOffset)
+                        .width(cellWidth)
+                        .fillMaxHeight()
+                        .selectionLens(pressedIndex.value != null)
+                )
+                Row(Modifier.fillMaxSize()) {
+                    items.forEachIndexed { index, item ->
+                        FloatingCell(item, selected = index == selectedIndex, index, pressedIndex) {
+                            onTabSelected(index)
+                        }
+                    }
+                }
+            }
+        }
+        if (floatingButton != null) {
+            QrButton(floatingButton, size = FLOATING_HEIGHT, Modifier.shadow(3.dp, CircleShape))
+        }
+    }
+}
+
+@Composable
+private fun RowScope.FloatingCell(
+    item: BottomTabItem,
+    selected: Boolean,
+    index: Int,
+    pressedIndex: MutableState<Int?>,
+    onClick: () -> Unit,
+) {
+    val colors = AppTheme.current.colors
+    Column(
+        modifier = Modifier
+            .weight(1f)
+            .fillMaxHeight()
+            .tabClickable(index, pressedIndex, onClick),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.spacedBy(Spacing.XXS, Alignment.CenterVertically),
+    ) {
+        DuoTabIcon(item, selected)
+        // like the system tab bar the label keeps its design size; Text grows it up to 5pt on the wide Duo displays
+        val context = LocalContext.current
+        val fixedScale = remember(context) {
+            (context ?: MiniAppContext()).copy(userScaleRate = 1f, useOSScaleRate = false)
+        }
+        CompositionLocalProvider(LocalContext provides fixedScale) {
+            Text(
+                text = item.label,
+                style = Typography.labelXsMedium,
+                color = if (selected) colors.primary else colors.text.hint,
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis,
+            )
+        }
+    }
+}
+
+// Tracks the finger so the selection lens jumps to the pressed tab before it is selected.
+@Composable
+private fun Modifier.tabClickable(index: Int, pressedIndex: MutableState<Int?>, onClick: () -> Unit): Modifier {
+    val interactionSource = remember { MutableInteractionSource() }
+    val pressed by interactionSource.collectIsPressedAsState()
+    LaunchedEffect(pressed) {
+        if (pressed) pressedIndex.value = index
+        else if (pressedIndex.value == index) pressedIndex.value = null
+    }
+    return clickable(interactionSource = interactionSource, indication = null, role = Role.Tab, onClick = onClick)
+}
+
+// Selection bubble; while pressed it grows into a lens (80x54 to about 96x70).
+@Composable
+private fun Modifier.selectionLens(pressed: Boolean): Modifier {
+    val lens by animateFloatAsState(if (pressed) 1f else 0f, LENS_SPRING, label = "DuoSelectionLens")
+    val tint = AppTheme.current.colors.primary.copy(alpha = SELECTION_TINT_ALPHA)
+    return graphicsLayer {
+        scaleX = 1 + lens * (LENS_SCALE_X - 1)
+        scaleY = 1 + lens * (LENS_SCALE_Y - 1)
+    }.background(tint, CircleShape)
+}
+
+@Composable
+private fun DuoTabIcon(item: BottomTabItem, selected: Boolean) {
+    val colors = AppTheme.current.colors
+    val badgeLabel = item.badgeLabel?.takeUnless { it.toIntOrNull() == 0 }
+    Box {
+        Icon(
+            source = item.icon,
+            size = ICON_SIZE,
+            color = if (selected) colors.primary else colors.text.hint,
+        )
+        when {
+            badgeLabel == null && !item.showDot -> Unit
+            badgeLabel.isNullOrEmpty() -> BadgeDot(
+                size = DotSize.Small,
+                modifier = Modifier.align(Alignment.TopEnd),
+            )
+            else -> Badge(
+                badgeLabel,
+                modifier = Modifier.align(Alignment.TopStart).offset(x = ICON_SIZE / 2, y = -Spacing.XS),
+            )
+        }
+    }
+}
+
+@Composable
+private fun QrButton(data: BottomTabFloatingButton, size: Dp, modifier: Modifier = Modifier) {
+    Box(
+        modifier = modifier
+            .size(size)
+            .clip(CircleShape)
+            .background(AppTheme.current.colors.primary)
+            .noFeedbackClickable(onClick = data.onPress)
+            .setAutomationId(data.label),
+        contentAlignment = Alignment.Center,
+    ) {
+        Icon(source = data.icon, color = Color.White, size = QR_ICON_SIZE)
+    }
+}
+
+// RN BarMaterial: surface with a 1dp border.
+@Composable
+private fun Modifier.tabBarMaterial(shape: Shape): Modifier {
+    val colors = AppTheme.current.colors
+    return shadow(3.dp, shape)
+        .background(colors.background.surface)
+        .border(1.dp, colors.border.default, shape)
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/component/Header.kt

@@ -18,10 +18,14 @@ import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.compositionLocalOf
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clipToBounds
+import androidx.compose.ui.draw.drawBehind
+import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
@@ -33,12 +37,13 @@ import androidx.compose.ui.unit.dp
 import vn.momo.kits.components.Icon
 import vn.momo.kits.components.Image
 import vn.momo.kits.components.InputSearchProps
-import vn.momo.kits.const.AppStatusBar
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Colors
 import vn.momo.kits.components.PopupNotifyProps
 import vn.momo.kits.application.IsShowBaseLineDebug
 import vn.momo.kits.const.Spacing
+import vn.momo.kits.layout.DuoMetrics
+import vn.momo.kits.layout.getScreenLayout
 import vn.momo.kits.modifier.activeOpacityClickable
 import vn.momo.kits.modifier.conditional
 import vn.momo.kits.modifier.setAutomationId
@@ -47,21 +52,24 @@ import vn.momo.kits.navigation.LocalNavigator
 import vn.momo.kits.navigation.LocalOptions
 import vn.momo.kits.navigation.LocalScrollState
 import vn.momo.kits.navigation.getInputSearchType
+import vn.momo.kits.navigation.usesDuoGlassHeader
+import vn.momo.kits.utils.horizontalSafeAreaPadding
 
 @InternalApi
 const val HEADER_HEIGHT = 52
 internal enum class InputSearchType { None, Header, Animated }
 enum class TitlePosition { LEFT, CENTER }
 
+private val HEADER_ACTIONS_WIDTH = 172.dp
+
+// Extra width the 48pt back and toolkit take on the iPhone Duo status bar row.
+private val STATUS_BAR_ROW_ACTIONS_EXTRA = 55.dp
+
 @Suppress("FrequentlyChangingValue")
 @Composable
-internal fun Header(onBackHandler: (() -> Unit)? = null) {
+internal fun headerOpacity(): Float {
     val options = LocalOptions.current
-    val navigator = LocalNavigator.current
     val scrollState = LocalScrollState.current
-    val headerRightWidthPx = LocalHeaderRightWidthPx.current
-    val inputSearchType = getInputSearchType(options)
-
     val opacityHeight = when (val header = options.headerType) {
         is HeaderType.Animated -> with(LocalDensity.current) { header.layoutOffSet.roundToPx() }
         else -> HEADER_HEIGHT
@@ -73,6 +81,54 @@ internal fun Header(onBackHandler: (() -> Unit)? = null) {
             else -> (scrollState.value / opacityHeight.toFloat()).coerceIn(0f, 1f)
         }
     )
+    return opacity
+}
+
+// Back button and toolkit share the bar with the title unless the iPhone Duo side bar holds them.
+@Composable
+internal fun headerTitleMaxWidth(): Dp {
+    val layout = getScreenLayout()
+    val clearance = layout.statusBarClearance
+    val clearanceWidth = clearance?.let { it.left + it.right } ?: 0.dp
+    if (layout.sideBar != null) return layout.contentWidth - Spacing.M * 2 - clearanceWidth
+    return layout.width - HEADER_ACTIONS_WIDTH - (if (clearance != null) STATUS_BAR_ROW_ACTIONS_EXTRA else 0.dp) - clearanceWidth
+}
+
+// Scroll distance over which the Duo glass bar fades in.
+private val DUO_GLASS_FADE_DISTANCE = 16.dp
+
+// RN DuoGlassBackground: translucent surface with a hairline once content scrolls under it.
+@Suppress("FrequentlyChangingValue")
+@Composable
+private fun Modifier.duoGlassBar(): Modifier {
+    val scrollState = LocalScrollState.current
+    val fadePx = with(LocalDensity.current) { DUO_GLASS_FADE_DISTANCE.toPx() }
+    val alpha by animateFloatAsState((scrollState.value / fadePx).coerceIn(0f, 1f), label = "DuoGlassAlpha")
+    val colors = AppTheme.current.colors
+    return background(colors.background.surface.copy(alpha = 0.8f * alpha))
+        .drawBehind {
+            val stroke = 0.5.dp.toPx()
+            drawLine(
+                color = colors.border.default.copy(alpha = alpha),
+                start = Offset(0f, size.height - stroke / 2),
+                end = Offset(size.width, size.height - stroke / 2),
+                strokeWidth = stroke,
+            )
+        }
+}
+
+@Composable
+internal fun Header(onBackHandler: (() -> Unit)? = null) {
+    val options = LocalOptions.current
+    val navigator = LocalNavigator.current
+    val headerRightWidthPx = LocalHeaderRightWidthPx.current
+    val inputSearchType = getInputSearchType(options)
+    val layout = getScreenLayout()
+    val useSideBar = layout.sideBar != null
+    // iPhone Duo inner portrait: the row sits on the status bar, between its clusters
+    val clearance = layout.statusBarClearance
+    val statusBarRow = clearance != null && !useSideBar
+    val opacity = headerOpacity()
 
     val headerColor = getHeaderColor(options.headerType, opacity, options.tintColor, Colors.black_17)
 
@@ -91,13 +147,15 @@ internal fun Header(onBackHandler: (() -> Unit)? = null) {
     // Centered title needs a full-width overlay to stay screen-centered, not boxed between back button and header right.
     val centerTitle = titlePosition == TitlePosition.CENTER && options.headerTitle is HeaderTitle.Default
 
+    val useDuoGlass = options.usesDuoGlassHeader(layout)
     val headerImage = AppTheme.current.assets.headerBackground
-        .takeUnless { options.headerType is HeaderType.Transparent }
+        .takeUnless { options.headerType is HeaderType.Transparent || useDuoGlass }
 
     Box(
-        Modifier.height(AppStatusBar.current + HEADER_HEIGHT.dp)
+        Modifier.height(layout.headerHeight)
             .fillMaxWidth()
-            .conditional(headerImage.isNullOrEmpty()) {
+            .then(if (useDuoGlass) Modifier.duoGlassBar() else Modifier)
+            .conditional(headerImage.isNullOrEmpty() && !useDuoGlass) {
                 background(background.copy(alpha = animatedAlpha))
             }
             .conditional(IsShowBaseLineDebug) {
@@ -124,21 +182,34 @@ internal fun Header(onBackHandler: (() -> Unit)? = null) {
             }
         }
         Row(
-            modifier = Modifier.height(HEADER_HEIGHT.dp)
+            modifier = Modifier.height(layout.headerBarHeight)
                 .fillMaxWidth()
-                .padding(horizontal = Spacing.M),
+                .horizontalSafeAreaPadding()
+                .padding(
+                    start = Spacing.M + (clearance?.left ?: 0.dp),
+                    end = Spacing.M + (clearance?.right ?: 0.dp),
+                ),
             verticalAlignment = Alignment.CenterVertically,
             horizontalArrangement = Arrangement.SpaceBetween
         ) {
-            if(!options.hiddenBack) {
-                BackButton(
-                    borderColor = headerColor.borderColor,
-                    backgroundButton = headerColor.backgroundButton,
-                    tintIconColor = headerColor.tintIconColor,
-                    onBackHandler = {
-                        navigator.onBackSafe {  }
-                    }
-                )
+            if (!options.hiddenBack && !useSideBar) {
+                if (statusBarRow) {
+                    SideBarButton(
+                        icon = "arrow-back",
+                        headerColor = headerColor,
+                        automationId = "btn_navigation_back",
+                        onClick = { navigator.onBackSafe { } },
+                    )
+                } else {
+                    BackButton(
+                        borderColor = headerColor.borderColor,
+                        backgroundButton = headerColor.backgroundButton,
+                        tintIconColor = headerColor.tintIconColor,
+                        onBackHandler = {
+                            navigator.onBackSafe {  }
+                        }
+                    )
+                }
                 Spacer(Modifier.width(Spacing.S))
             }
 
@@ -155,20 +226,42 @@ internal fun Header(onBackHandler: (() -> Unit)? = null) {
             Box(Modifier.onGloballyPositioned {
                 if(headerRightWidthPx.intValue != it.size.width) headerRightWidthPx.intValue = it.size.width
             }){
-                HeaderRight(options.headerRight, options.tintColor, headerColor)
+                val headerRight = options.headerRight
+                when {
+                    useSideBar && headerRight is HeaderRight.Toolkit -> Unit
+                    statusBarRow && headerRight is HeaderRight.Toolkit -> Toolkit(
+                        headerRight = headerRight,
+                        tintColor = options.tintColor,
+                        headerColor = headerColor,
+                        layout = ToolkitLayout.SideBarRow,
+                    )
+                    else -> CompositionLocalProvider(LocalHeaderColor provides headerColor) {
+                        HeaderRight(headerRight, options.tintColor, headerColor)
+                    }
+                }
             }
         }
         if (centerTitle) {
+            // on the status bar row the clusters are lopsided, so both sides keep the wider one's room
+            val centerInset = if (clearance != null) {
+                val back = if (options.hiddenBack || useSideBar) 0.dp else DuoMetrics.controlSize + Spacing.S
+                val right = with(LocalDensity.current) { headerRightWidthPx.intValue.toDp() }
+                maxOf(clearance.left + back, clearance.right + right) + Spacing.S
+            } else {
+                0.dp
+            }
             Box(
-                modifier = Modifier.height(HEADER_HEIGHT.dp)
+                modifier = Modifier.height(layout.headerBarHeight)
                     .fillMaxWidth()
-                    .padding(horizontal = Spacing.M),
+                    .horizontalSafeAreaPadding()
+                    .padding(horizontal = Spacing.M + centerInset),
                 contentAlignment = Alignment.Center
             ) {
                 HeaderContent(
                     headerTitle = options.headerTitle,
                     tintIconColor = titleColor,
                     titlePosition = titlePosition,
+                    centerWidthFraction = if (clearance != null) 1f else 0.5f,
                     modifier = Modifier.fillMaxWidth()
                 )
             }
@@ -202,6 +295,7 @@ internal fun HeaderContent(
     headerTitle: HeaderTitle,
     tintIconColor: Color,
     titlePosition: TitlePosition = TitlePosition.LEFT,
+    centerWidthFraction: Float = 0.5f,
     modifier: Modifier = Modifier,
 ){
     Box(
@@ -213,7 +307,7 @@ internal fun HeaderContent(
                 HeaderTitle(
                     title = headerTitle.title,
                     color = tintIconColor,
-                    modifier = Modifier.fillMaxWidth(fraction = if (titlePosition == TitlePosition.CENTER) 0.5f else 1f),
+                    modifier = Modifier.fillMaxWidth(fraction = if (titlePosition == TitlePosition.CENTER) centerWidthFraction else 1f),
                     textAlign = if (titlePosition == TitlePosition.CENTER) TextAlign.Center else TextAlign.Start
                 )
             }
@@ -325,6 +419,10 @@ data class HeaderBackProps(
 
 @InternalApi
 data class HeaderColor(val tintIconColor: Color, val backgroundButton: Color, val borderColor: Color)
+
+// The enclosing header's colors, so a custom header right follows the bar (SwiftUI `\.headerColor`).
+internal val LocalHeaderColor = compositionLocalOf<HeaderColor?> { null }
+
 internal fun getHeaderColor(headerType: HeaderType, opacity: Float, tintColor: Color?, defaultColor: Color): HeaderColor{
     return if(headerType is HeaderType.Animated) {
         if (opacity == 1f || !headerType.isSurface)