@momo-kits/native-kits 0.162.49-debug → 0.162.50-debug

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

@@ -8,8 +8,9 @@ import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.absolutePadding
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.sizeIn
 import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
@@ -26,6 +27,8 @@ import vn.momo.kits.modifier.conditional
 import vn.momo.kits.modifier.noFeedbackClickable
 import vn.momo.kits.navigation.tracking.ScreenTracker
 import vn.momo.kits.platform.BackHandler
+import vn.momo.kits.layout.duoModalMaxHeight
+import vn.momo.kits.layout.duoModalMaxWidth
 import vn.momo.kits.layout.getScreenLayout
 
 @Composable
@@ -111,9 +114,14 @@ internal fun ModalScreen(
             .noFeedbackClickable {
                 if(barrierDismissible) closeEvent()
             }
-            // center below the side status bar and above the home indicator
+            // center in the safe area, clear of the side toolbar strip and the home indicator
             .conditional(layout.isIPhoneDuoDevice) {
-                padding(top = layout.duoTopInset, bottom = layout.insetBottom)
+                absolutePadding(
+                    left = layout.insetLeft,
+                    top = layout.insetTop,
+                    right = layout.insetRight,
+                    bottom = layout.insetBottom,
+                )
             },
         contentAlignment = Alignment.Center
     ) {
@@ -121,6 +129,9 @@ internal fun ModalScreen(
             modifier = Modifier
                 .scale(scale.value)
                 .alpha(alpha.value)
+                .conditional(layout.isIPhoneDuoDevice) {
+                    sizeIn(maxWidth = layout.duoModalMaxWidth, maxHeight = layout.duoModalMaxHeight)
+                }
                 .wrapContentSize()
                 .conditional(IsShowBaseLineDebug) {
                     border(1.dp, Colors.blue_03)

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

@@ -1,9 +1,11 @@
 package vn.momo.kits.navigation
 
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.absolutePadding
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.key
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.staticCompositionLocalOf
 import androidx.compose.ui.Alignment
@@ -19,6 +21,8 @@ import kotlinx.coroutines.launch
 import kotlinx.serialization.Serializable
 import vn.momo.kits.components.PopupAction
 import vn.momo.kits.components.PopupNotify
+import vn.momo.kits.layout.getScreenLayout
+import vn.momo.kits.modifier.conditional
 import vn.momo.kits.navigation.BottomHeader.*
 import vn.momo.kits.navigation.component.SnackBar
 import vn.momo.maxapi.IMaxApi
@@ -113,9 +117,10 @@ class Navigator(
         }
     }
     private suspend fun dismissOverplay(isDelay: Boolean = true) {
+        val dismissing = OverplayComponentRegistry.current()
         OverplayComponentRegistry.clear()
         if (isDelay) delay(300L.milliseconds)
-        OverplayComponentRegistry.hardClearAfterDismiss()
+        OverplayComponentRegistry.hardClearAfterDismiss(dismissing)
     }
 
     private suspend fun dismissScreen() {
@@ -182,9 +187,10 @@ class Navigator(
 
     fun hideSnackBar() {
         scope.launch {
+            val dismissing = OverplayComponentRegistry.current()
             OverplayComponentRegistry.clear()
             delay(250L.milliseconds)
-            OverplayComponentRegistry.hardClearAfterDismiss()
+            OverplayComponentRegistry.hardClearAfterDismiss(dismissing)
         }
     }
 
@@ -358,42 +364,59 @@ object OverplayComponentRegistry {
         requestClose = null
     }
 
+    internal fun current(): OverplayComponent? = currentOverlayComponent.value
+
+    // An overlay shown from the dismissed one's onDismiss, before the delayed clear, stays.
+    internal fun hardClearAfterDismiss(dismissing: OverplayComponent?) {
+        if (currentOverlayComponent.value === dismissing) hardClearAfterDismiss()
+    }
+
     @Composable
     internal fun OverlayComponent(){
         val overplay = currentOverlayComponent.value ?: return
 
-        when (val params = overplay.params) {
-            is OverplayComponentParams.BottomSheet -> {
-                BottomSheet(
-                    content = overplay.content,
-                    header = params.bottomSheetHeader ?: Title(),
-                    isSurface = params.isSurface,
-                    barrierDismissible = params.barrierDismissible,
-                    draggable = params.draggable,
-                    useBottomInset = params.useBottomInset,
-                    footerComponent = params.footerComponent,
-                    onDismiss = params.onDismiss
-                )
-            }
+        // every registration is its own composition (params are new instances), as SwiftUI's `.id(item.id)`:
+        // a sheet shown from another one's close must not inherit its finished animation and effects
+        key(overplay) {
+            when (val params = overplay.params) {
+                is OverplayComponentParams.BottomSheet -> {
+                    BottomSheet(
+                        content = overplay.content,
+                        header = params.bottomSheetHeader ?: Title(),
+                        isSurface = params.isSurface,
+                        barrierDismissible = params.barrierDismissible,
+                        draggable = params.draggable,
+                        useBottomInset = params.useBottomInset,
+                        footerComponent = params.footerComponent,
+                        onDismiss = params.onDismiss
+                    )
+                }
 
-            is OverplayComponentParams.Modal -> {
-                ModalScreen(
-                    content = overplay.content,
-                    barrierDismissible = params.barrierDismissible,
-                    onDismiss = params.onDismiss
-                )
-            }
+                is OverplayComponentParams.Modal -> {
+                    ModalScreen(
+                        content = overplay.content,
+                        barrierDismissible = params.barrierDismissible,
+                        onDismiss = params.onDismiss
+                    )
+                }
 
-            is OverplayComponentParams.SnackBar -> {
-                Box(
-                    modifier = Modifier.fillMaxSize(),
-                    contentAlignment = Alignment.BottomCenter
-                ) {
-                    overplay.content()
+                is OverplayComponentParams.SnackBar -> {
+                    val layout = getScreenLayout()
+                    Box(
+                        modifier = Modifier
+                            .fillMaxSize()
+                            // iPhone Duo: clear of the side toolbar strip, like the screen content
+                            .conditional(layout.isIPhoneDuo) {
+                                absolutePadding(left = layout.insetLeft, right = layout.insetRight)
+                            },
+                        contentAlignment = Alignment.BottomCenter
+                    ) {
+                        overplay.content()
+                    }
                 }
-            }
 
-            null -> {}
+                null -> {}
+            }
         }
     }
 }

package/compose/src/iosMain/kotlin/vn/momo/kits/platform/Platform.ios.kt

@@ -21,6 +21,8 @@ import androidx.compose.ui.backhandler.BackHandler as ComposeBackHandler
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.NativePaint
 import androidx.compose.ui.graphics.toArgb
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.platform.LocalWindowInfo
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.viewinterop.UIKitInteropProperties
@@ -29,8 +31,6 @@ import cocoapods.lottie_ios.CompatibleAnimation
 import cocoapods.lottie_ios.CompatibleAnimationKeypath
 import cocoapods.lottie_ios.CompatibleAnimationView
 import kotlinx.cinterop.ExperimentalForeignApi
-import kotlinx.cinterop.get
-import kotlinx.cinterop.memScoped
 import androidx.navigationevent.NavigationEventDispatcher
 import androidx.navigationevent.NavigationEventDispatcherOwner
 import org.jetbrains.skia.FilterBlurMode
@@ -38,7 +38,6 @@ import org.jetbrains.skia.MaskFilter
 import platform.Foundation.NSBundle
 import platform.UIKit.UIColor
 import platform.UIKit.UIDevice
-import platform.UIKit.UIScreen
 import platform.UIKit.UIUserInterfaceIdiomPhone
 import vn.momo.kits.navigation.AttachHostBackGesture
 import vn.momo.kits.navigation.Navigator
@@ -48,15 +47,17 @@ actual fun getPlatformName(): String = "iOS"
 actual fun isPhoneIdiom(): Boolean =
     UIDevice.currentDevice.userInterfaceIdiom == UIUserInterfaceIdiomPhone
 
-@OptIn(ExperimentalForeignApi::class)
+// AI-GENERATED START: window size, not UIScreen.main (stays on one display on iPhone Duo); recomposes on fold/unfold
 @Composable
-actual fun getScreenDimensions(): ScreenDimension = memScoped {
-    val config = UIScreen.mainScreen.bounds.ptr[0]
+actual fun getScreenDimensions(): ScreenDimension {
+    val density = LocalDensity.current
+    val size = LocalWindowInfo.current.containerSize
     return ScreenDimension(
-        config.size.width.toInt(),
-        config.size.height.toInt()
+        (size.width / density.density).toInt(),
+        (size.height / density.density).toInt()
     )
 }
+// AI-GENERATED END: window size, not UIScreen.main (stays on one display on iPhone Duo); recomposes on fold/unfold
 
 actual fun NativePaint.setMaskFilter(blurRadius: Float) {
     this.maskFilter = MaskFilter.makeBlur(FilterBlurMode.NORMAL, blurRadius / 2, true)

package/gradle.properties

@@ -18,7 +18,7 @@ kotlin.apple.xcodeCompatibility.nowarn=true
 name="ComposeKits"
 group=vn.momo.kits
 artifact.id=kits
-version=0.162.49
+version=0.162.50
 
 repo=GitLab
 url=https://gitlab.mservice.com.vn/api/v4/projects/5400/packages/maven

package/ios/Application/DesignSystemKits.swift

@@ -36,6 +36,10 @@ public final class DesignSystemKits: ObservableObject {
 
     @Published private var configs = DesignSystemKitsConfigs()
     @Published public private(set) var osFontScale: CGFloat = DesignSystemKits.currentOsFontScale()
+    // AI-GENERATED START: republish the font scale when the window scene is resized (iPhone Duo fold/unfold)
+    @Published public private(set) var windowShortSide: CGFloat = DesignSystemKits.currentWindowShortSide()
+    private var geometryObservations: [ObjectIdentifier: NSKeyValueObservation] = [:]
+    // AI-GENERATED END: republish the font scale when the window scene is resized (iPhone Duo fold/unfold)
 
     private init() {
         NotificationCenter.default.addObserver(
@@ -44,6 +48,19 @@ public final class DesignSystemKits: ObservableObject {
             name: UIContentSizeCategory.didChangeNotification,
             object: nil
         )
+        // AI-GENERATED START: republish the font scale when the window scene is resized (iPhone Duo fold/unfold)
+        NotificationCenter.default.addObserver(
+            self,
+            selector: #selector(sceneDidActivate(_:)),
+            name: UIScene.didActivateNotification,
+            object: nil
+        )
+        onMain {
+            UIApplication.shared.connectedScenes
+                .compactMap { $0 as? UIWindowScene }
+                .forEach(self.observeGeometry(of:))
+        }
+        // AI-GENERATED END: republish the font scale when the window scene is resized (iPhone Duo fold/unfold)
     }
 
     public func setConfigs(_ configs: DesignSystemKitsConfigs) {
@@ -62,7 +79,10 @@ public final class DesignSystemKits: ObservableObject {
         FontScale(
             userScaleRate: configs.userScaleRate,
             useOSScaleRate: configs.useOSScaleRate,
-            osFontScale: osFontScale
+            osFontScale: osFontScale,
+            // AI-GENERATED START: republish the font scale when the window scene is resized (iPhone Duo fold/unfold)
+            windowShortSide: windowShortSide
+            // AI-GENERATED END: republish the font scale when the window scene is resized (iPhone Duo fold/unfold)
         )
     }
 
@@ -72,6 +92,49 @@ public final class DesignSystemKits: ObservableObject {
         osFontScale = next
     }
 
+    // AI-GENERATED START: republish the font scale when the window scene is resized (iPhone Duo fold/unfold)
+    @objc private func sceneDidActivate(_ notification: Notification) {
+        guard let scene = notification.object as? UIWindowScene else { return }
+        observeGeometry(of: scene)
+        refreshWindowShortSide()
+    }
+
+    private func observeGeometry(of scene: UIWindowScene) {
+        guard #available(iOS 16.0, *) else { return }
+        let key = ObjectIdentifier(scene)
+        guard geometryObservations[key] == nil else { return }
+        geometryObservations[key] = scene.observe(\.effectiveGeometry, options: [.new]) { [weak self] _, _ in
+            // The window is resized after the scene geometry, so read it on the next turn.
+            DispatchQueue.main.async { self?.refreshWindowShortSide() }
+        }
+    }
+
+    private func refreshWindowShortSide() {
+        let next = Self.currentWindowShortSide()
+        guard next > 0, next != windowShortSide else { return }
+        windowShortSide = next
+    }
+
+    /// UIScreen.main stays on one display on iPhone Duo, so measure the foreground window instead.
+    static func currentWindowShortSide() -> CGFloat {
+        guard Thread.isMainThread else {
+            return min(UIScreen.main.bounds.width, UIScreen.main.bounds.height)
+        }
+        let scenes = UIApplication.shared.connectedScenes.compactMap { $0 as? UIWindowScene }
+        let scene = scenes.first { $0.activationState == .foregroundActive } ?? scenes.first
+        let window = scene?.windows.first { $0.isKeyWindow } ?? scene?.windows.first
+        let size: CGSize
+        if let window, window.bounds.width > 0 {
+            size = window.bounds.size
+        } else if let scene {
+            size = scene.coordinateSpace.bounds.size
+        } else {
+            size = UIScreen.main.bounds.size
+        }
+        return min(size.width, size.height)
+    }
+    // AI-GENERATED END: republish the font scale when the window scene is resized (iPhone Duo fold/unfold)
+
     /// Same factor Compose's iOS `ProvideOsFontScale` derives from
     /// `UIFont.preferredFont(forTextStyle: .body).pointSize / 17`, so both iOS surfaces scale alike.
     static func currentOsFontScale() -> CGFloat {

package/ios/Layout/ScreenLayout.swift

@@ -32,7 +32,8 @@ public struct ScreenLayout: Equatable {
     public let width: CGFloat
     public let height: CGFloat
     public let isIPhoneDuo: Bool
-    /// The device has a hinge, folded or not, whatever the window size; drives popups, modal and bottom sheet.
+    /// iPhone Duo folded or not, whatever the window size (its hinge, or the outer display's one-sided strip);
+    /// drives popups, modal and bottom sheet.
     public let isDuoDevice: Bool
     public let insets: EdgeInsets
     public let insetLeft: CGFloat
@@ -75,6 +76,11 @@ enum DuoMetrics {
     static let floatingTabBarHeight: CGFloat = 62
     static let floatingTabBarMargin: CGFloat = 20
     static let floatingTabBarInsetOverlap: CGFloat = 13
+    // Width of a system alert on the inner display, in both orientations.
+    static let modalMaxWidth: CGFloat = 440
+    // Fits a PopupNotify with image, scrolled description and actions at the max width (RN
+    // Application/device.ts); taller content scrolls instead of filling the inner display.
+    static let modalMaxHeight: CGFloat = 640
 }
 
 enum HeaderMetrics {
@@ -178,8 +184,10 @@ extension ScreenLayout {
             )
         }
 
+        // the outer display reports no hinge; its one-sided strip still gives it away
         return ScreenLayout(
-            width: width, height: height, isIPhoneDuo: true, isDuoDevice: isDuoDevice, insets: insets,
+            width: width, height: height, isIPhoneDuo: true,
+            isDuoDevice: isDuoDevice || insets.leading != insets.trailing, insets: insets,
             insetLeft: insets.leading, insetRight: insets.trailing,
             contentWidth: width - insets.leading - insets.trailing,
             headerHeight: headerHeight, headerStatusBarHeight: headerStatusBarHeight, sideBar: sideBar,
@@ -256,12 +264,24 @@ extension ScreenLayout {
     public var duoTopInset: CGFloat {
         max(insets.top, height > width ? max(insets.leading, insets.trailing) * 2 : 0)
     }
+
+    /// Room for a dialog on iPhone Duo: inside the safe area, so clear of the side toolbar strip, and
+    /// capped so it stays a dialog on the inner display.
+    var duoModalMaxWidth: CGFloat {
+        min(width - insets.leading - insets.trailing - Spacing.XL * 2, DuoMetrics.modalMaxWidth)
+    }
+
+    var duoModalMaxHeight: CGFloat {
+        min(height - insets.top - insets.bottom - Spacing.XL * 2, DuoMetrics.modalMaxHeight)
+    }
 }
 
 /// Snapshot for call sites without `\.screenLayout`; not reactive. `windowSize` is ignored,
 /// kept for host call sites.
 public func isIPhoneDuoDevice(windowSize: CGSize? = nil) -> Bool {
-    isPhoneIdiom && FoldableDevice.isFoldable(measuredIn: keyWindow)
+    guard isPhoneIdiom else { return false }
+    let insets = keyWindow?.safeAreaInsets
+    return FoldableDevice.isFoldable(measuredIn: keyWindow) || insets.map { $0.left != $0.right } == true
 }
 
 /// Apple's foldable check (as the host's `SideTabRailView.isFoldableDevice`): only a device with a

package/ios/Navigation/BottomSheet.swift

@@ -15,16 +15,25 @@ import SwiftUI
 
 /// Mirrors Compose's `sealed class BottomHeader` (Title / Custom).
 public struct BottomSheetHeader {
+    struct Back {
+        let icon: String
+        let action: () -> Void
+    }
+
     enum Style {
-        case title(String)
+        case title(String, back: Back?)
         case custom(() -> AnyView)
     }
 
     let style: Style
 
-    /// Mirrors `BottomHeader.Title`.
-    public static func title(_ text: String = "Bottom Sheet Title") -> BottomSheetHeader {
-        BottomSheetHeader(style: .title(text))
+    /// Mirrors `BottomHeader.Title`. `onBack` shows a back button; the sheet closes, then it runs.
+    public static func title(
+        _ text: String = "Bottom Sheet Title",
+        backIcon: String = "arrow-back",
+        onBack: (() -> Void)? = nil
+    ) -> BottomSheetHeader {
+        BottomSheetHeader(style: .title(text, back: onBack.map { Back(icon: backIcon, action: $0) }))
     }
 
     /// Mirrors `BottomHeader.Custom`.
@@ -68,6 +77,9 @@ struct BottomSheetView<Content: View>: View {
     /// Mirrors Compose's `sheetCloseOffset` (100dp drag threshold to dismiss).
     private let closeThreshold: CGFloat = 100
 
+    private let indicatorHeight: CGFloat = 16
+    private let headerRowHeight: CGFloat = 56
+
     /// Mirrors Compose's per-term peak (0.3f). Combined with `backgroundAlpha` the
     /// steady-state (fully open) scrim peaks at 0.6, matching ModalScreen's peak.
     private let maxDynamicAlpha: CGFloat = 0.3
@@ -78,6 +90,21 @@ struct BottomSheetView<Content: View>: View {
     private var isDuo: Bool { layout.isDuoDevice }
     // iPhone Duo inner display: center the sheet instead of spanning the width
     private var isDuoCentered: Bool { isDuo && layout.width >= 600 }
+    /// Outer display: the sheet floats Spacing.M off the side edges like system sheets, its content
+    /// stays in the safe area and its buttons move to the side bar column (HIG).
+    private var isDuoFloating: Bool { isDuo && !isDuoCentered }
+
+    private var titleBack: BottomSheetHeader.Back? {
+        if case .title(_, let back) = header.style { return back }
+        return nil
+    }
+
+    private var sideColumn: SideBarLayout? {
+        guard isDuoFloating, case .title = header.style, let sideBar = layout.sideBar,
+              sideBar.width - Spacing.M >= DuoMetrics.controlSize + Spacing.M
+        else { return nil }
+        return sideBar
+    }
 
     /// Keeps the portrait width in landscape, like system sheets.
     private var duoCenteredWidth: CGFloat {
@@ -87,18 +114,19 @@ struct BottomSheetView<Content: View>: View {
         )
     }
 
-    /// Landscape side buttons span the full height, so the content is inset; in portrait the
-    /// side status bar only covers the top corner.
+    /// The floating sheet spans the side safe area, its content stays clear of it.
     private var sideInsetLeading: CGFloat {
-        isDuo && !isDuoCentered && layout.width > layout.height ? layout.insets.leading : 0
+        isDuoFloating ? max(layout.insets.leading - Spacing.M, 0) : 0
     }
 
     private var sideInsetTrailing: CGFloat {
-        isDuo && !isDuoCentered && layout.width > layout.height ? layout.insets.trailing : 0
+        isDuoFloating ? max(layout.insets.trailing - Spacing.M, 0) : 0
     }
 
     private var maxHeight: CGFloat {
-        isDuo ? layout.height - max(layout.duoTopInset, Spacing.XL) : screenHeight - 90
+        guard isDuo else { return screenHeight - 90 }
+        // with its buttons in the side column the sheet can pass the side status bar
+        return layout.height - max(sideColumn != nil ? layout.insets.top : layout.duoTopInset, Spacing.XL)
     }
     private var bottomInset: CGFloat { useBottomInset ? safeAreaBottomInset() : 0 }
     /// While the keyboard is up, it already covers the home-indicator area, so it
@@ -170,19 +198,21 @@ struct BottomSheetView<Content: View>: View {
                         .frame(width: 40, height: 4)
                     Spacer().frame(height: 4)
                     headerView
-                        .frame(height: 56)
+                        .frame(height: headerRowHeight)
                         .padding(.horizontal, Spacing.M)
-                        .padding(.leading, sideInsetLeading)
-                        .padding(.trailing, sideInsetTrailing)
                 }
+                .padding(.leading, sideInsetLeading)
+                .padding(.trailing, sideInsetTrailing)
                 .frame(maxWidth: .infinity)
-                .frame(height: 72)
+                .frame(height: indicatorHeight + headerRowHeight)
                 .contentShape(Rectangle())
                 .gesture(dragGesture, including: draggable ? .all : .subviews)
 
                 Rectangle()
                     .fill(theme.colors.border.default)
                     .frame(height: 1)
+                    .padding(.leading, sideInsetLeading)
+                    .padding(.trailing, sideInsetTrailing)
 
                 content()
                     .padding(.leading, sideInsetLeading)
@@ -191,7 +221,7 @@ struct BottomSheetView<Content: View>: View {
                     .layoutPriority(-1)
 
                 if let footer {
-                    BottomSheetFooter(content: footer)
+                    BottomSheetFooter(content: footer, leadingInset: sideInsetLeading, trailingInset: sideInsetTrailing)
                 }
             }
             // The filler stays outside the cap, which shrinks by it instead: the sheet still ends at
@@ -209,27 +239,61 @@ struct BottomSheetView<Content: View>: View {
             }
         )
         .background(backgroundColor)
-        .clipShape(RoundedCorner(radius: Radius.M, corners: [.topLeft, .topRight]))
+        .overlay {
+            if let sideColumn {
+                BottomSheetSideColumn(
+                    sideBar: sideColumn,
+                    windowHeight: layout.height,
+                    topOffset: indicatorHeight + (headerRowHeight - DuoMetrics.controlSize) / 2,
+                    back: titleBack,
+                    onBack: goBack,
+                    onClose: { close() }
+                )
+            }
+        }
+        .clipShape(RoundedCorner(radius: isDuo ? Radius.XL : Radius.M, corners: [.topLeft, .topRight]))
+        .padding(.horizontal, isDuoFloating ? Spacing.M : 0)
     }
 
     @ViewBuilder
     private var headerView: some View {
         switch header.style {
-        case .title(let text):
+        case .title(let text, let back):
+            // the side column holds back and close, the row keeps only the title
+            let showsButtons = sideColumn == nil
             HStack(spacing: 0) {
-                Color.clear.frame(width: 24, height: 24)
+                if showsButtons {
+                    if let back {
+                        headerButton(icon: back.icon, accessibilityId: "btn_bottom_sheet_back") { goBack(back) }
+                    } else {
+                        Color.clear.frame(width: 24, height: 24)
+                    }
+                }
                 MomoText(text, typography: .headerDefaultBold, color: Colors.black17)
                     .frame(maxWidth: .infinity, alignment: .center)
-                Icon(source: "navigation_close", size: 24, color: Colors.black17)
-                    .frame(width: 24, height: 24)
-                    .contentShape(Rectangle())
-                    .onTapGesture { close() }
+                    .padding(.horizontal, showsButtons ? 0 : Spacing.M)
+                if showsButtons {
+                    headerButton(icon: "navigation_close", accessibilityId: "btn_bottom_sheet_close") { close() }
+                }
             }
         case .custom(let builder):
             builder()
         }
     }
 
+    private func headerButton(icon: String, accessibilityId: String, action: @escaping () -> Void) -> some View {
+        Icon(source: icon, size: 24, color: Colors.black17)
+            .frame(width: 24, height: 24)
+            .contentShape(Rectangle())
+            .onTapGesture(perform: action)
+            .accessibilityIdentifier(accessibilityId)
+    }
+
+    /// RN `leftOptions.onPressIconLeft`: the sheet closes first, then the back runs.
+    private func goBack(_ back: BottomSheetHeader.Back) {
+        close(then: back.action)
+    }
+
     // MARK: - Drag handling (mirrors Compose's detectDragGestures)
 
     private var dragGesture: some Gesture {
@@ -282,7 +346,7 @@ struct BottomSheetView<Content: View>: View {
 
     /// Mirrors Compose's `closeEvent`: slide out over 200ms, then fade the scrim
     /// out over 100ms only after the slide finishes, then dismiss.
-    private func close() {
+    private func close(then onClosed: (() -> Void)? = nil) {
         guard !isClosing else { return }
         isClosing = true
         withAnimation(.timingCurve(0.3, 0, 0.8, 0.15, duration: 0.2)) {
@@ -294,7 +358,67 @@ struct BottomSheetView<Content: View>: View {
             }
         }
         DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) {
+            // a newer overlay replaced this one: it stays, and this sheet's back is dropped
+            guard navigator.overplay?.id == overplayId else { return }
             navigator.finishOverplayDismiss(id: overplayId)
+            onClosed?()
+        }
+    }
+}
+
+/// iPhone Duo outer display: back and close sit on the part of the sheet under the side safe area,
+/// 12pt from the strip's inner edge like the screen side bar. They follow the header row while the
+/// sheet is short and stay below the status bar cluster while it is tall.
+private struct BottomSheetSideColumn: View {
+    let sideBar: SideBarLayout
+    let windowHeight: CGFloat
+    /// Lines the controls up with the header row.
+    let topOffset: CGFloat
+    let back: BottomSheetHeader.Back?
+    let onBack: (BottomSheetHeader.Back) -> Void
+    let onClose: () -> Void
+
+    @Environment(\.appTheme) private var theme
+
+    private var isRight: Bool { sideBar.edge == .right }
+
+    private var columnHeight: CGFloat {
+        let count: CGFloat = back != nil ? 2 : 1
+        return count * DuoMetrics.controlSize + (count - 1) * Spacing.M
+    }
+
+    private var headerColor: HeaderColor {
+        getHeaderColor(isAnimated: false, isSurface: true, opacity: 1, tintColor: nil, defaultColor: theme.colors.text.default)
+    }
+
+    var body: some View {
+        GeometryReader { proxy in
+            let sheetHeight = proxy.size.height
+            // the sheet rests on the window bottom; its slide is an offset outside this layout
+            let sheetTop = windowHeight - sheetHeight
+            // clear of a camera at the bottom end of the strip when it can
+            let lowest = sheetHeight - sideBar.bottom - columnHeight
+            let top = max(min(max(sideBar.top - sheetTop, topOffset), lowest), 0)
+            VStack(alignment: isRight ? .leading : .trailing, spacing: Spacing.M) {
+                if let back {
+                    SideBarButton(
+                        icon: back.icon,
+                        headerColor: headerColor,
+                        accessibilityId: "btn_bottom_sheet_back",
+                        action: { onBack(back) }
+                    )
+                }
+                SideBarButton(
+                    icon: "navigation_close",
+                    headerColor: headerColor,
+                    accessibilityId: "btn_bottom_sheet_close",
+                    action: onClose
+                )
+            }
+            .padding(isRight ? .leading : .trailing, Spacing.M)
+            .frame(width: sideBar.width - Spacing.M, alignment: isRight ? .leading : .trailing)
+            .padding(.top, top)
+            .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: isRight ? .topTrailing : .topLeading)
         }
     }
 }
@@ -371,12 +495,16 @@ private struct CapHeightLayout: Layout {
 /// Mirrors Compose's `BottomSheetFooter`: a surface band with a soft shadow cast on the content.
 private struct BottomSheetFooter: View {
     let content: () -> AnyView
+    var leadingInset: CGFloat = 0
+    var trailingInset: CGFloat = 0
 
     @Environment(\.appTheme) private var theme
 
     var body: some View {
         content()
             .frame(maxWidth: .infinity)
+            .padding(.leading, leadingInset)
+            .padding(.trailing, trailingInset)
             .padding(.vertical, Spacing.S)
             .background(theme.colors.background.surface)
             .overlay(alignment: .top) {