@momo-kits/native-kits 0.162.49 → 0.162.50

package/CLAUDE.md

@@ -71,7 +71,7 @@ Publishing is automated (`publish.sh` + GitLab CI on `[ci build]` / `main`). Do
 ## Screen layout / iPhone Duo (port of RN `useScreenLayout`, momo-kits !664)
 
 - `layout/ScreenLayout.kt`: `getScreenLayout()` returns window size, raw top/bottom + side insets, `contentWidth`, header geometry, the iPhone Duo `sideBar` and `duoTopInset`. `NavigationContainer` computes it once and provides `LocalScreenLayout`; reactive to fold/unfold and rotation (window size + `WindowInsets`). Metrics (`DuoMetrics`, 72pt iPhone header floor, 20pt status-bar threshold) mirror RN `Layout/utils.ts` — change both together.
-- iPhone-only: everything gates on `isPhoneIdiom()` (`platform/`), never on "iOS", so iPad windows keep the regular layout. Two detectors, as in RN: `isIPhoneDuo` (window aspect < 1.6 or asymmetric side insets) drives layout; `isIPhoneDuoDevice` (Apple's foldable check: a `.division` reserved region, queried with include-inactive; Swift also latches on `UIHingeInteraction`) drives popups, modal and bottom sheet.
+- iPhone-only: everything gates on `isPhoneIdiom()` (`platform/`), never on "iOS", so iPad windows keep the regular layout. Two detectors, as in RN: `isIPhoneDuo` (window aspect < 1.6 or asymmetric side insets) drives layout; `isIPhoneDuoDevice` (Apple's foldable check: a `.division` reserved region, queried with include-inactive; Swift also latches on `UIHingeInteraction`; or asymmetric side insets, since the outer display reports no hinge) drives popups, modal and bottom sheet.
 - Header height is `headerHeight` (not `AppStatusBar + HEADER_HEIGHT`); the bar row is `headerBarHeight` and starts `headerStatusBarHeight` below the window top. When the status bar is off the top edge (iPhone landscape, iPhone Duo) `headerStatusBarHeight` is 0 so the title stays centered — except on the Duo outer display: in portrait the header is 76pt and the row starts at 14pt so the title centers on the camera punchout; in landscape the row centers on the camera when it sits at the top end of the strip (else on the back button) and the header reaches 8pt below the back button.
 - iPhone Duo inner display in portrait (status bar on top): the header row shares the status bar band — `headerHeight` 94pt (2 × the clock digits' y 47), `headerStatusBarHeight` 0 — and `ScreenLayout.statusBarClearance` keeps it between the clock / battery clusters (from reserved regions, else 128pt on the right). Back and toolkit use the 48pt side bar controls laid out horizontally (`ToolkitLayout.SideBarRow`); the collapsed search and a centered title stay clear of the clusters. Port of momo-kits `90af33ba2`.
 - 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).
@@ -80,8 +80,10 @@ Publishing is automated (`publish.sh` + GitLab CI on `[ci build]` / `main`). Do
 - 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.
-- Overlays on Duo: popups cap at 440pt wide and the room between `duoTopInset` and the bottom inset (body scrolls, actions stay); modal centers inside that room; bottom sheet uses the window height, centers at width ≥ 600 and pads by side insets in landscape.
+- Overlays on Duo: the modal sits inside the safe area (all four insets, so clear of the side toolbar strip) and caps its content at `duoModalMaxWidth` / `duoModalMaxHeight` (440 × 640pt, at least XL off the safe area); popups fill that width with radius XL and drop their own side padding (body scrolls, actions stay). Snackbars keep clear of the strip.
+- Bottom sheet on Duo: radius XL, window height, centered at width ≥ 600 (inner display, buttons stay in the header row). Below that (outer display) it floats `Spacing.M` off the side edges, pads header/content/footer by `inset − M`, and a `Title` header moves back / close into 48pt side bar buttons on the strip part of the sheet (HIG: sheet controls go vertical on the outer display) when the strip fits one; they follow the header row while the sheet is short and stay below `sideBar.top` when it is tall. `BottomHeader.Title(onBack)` / `.title(onBack:)` closes the sheet, then runs (RN `leftOptions.onPressIconLeft`).
 - Font scale deliberately uses the short side (`min(w, h)`), unlike RN which reads the window width — landscape must not inflate every font.
+- Font scale measures the **window**, never `UIScreen.main`: on iPhone Duo the main screen stays on one display while the window follows the one in use. Compose iOS `getScreenDimensions()` reads `LocalWindowInfo.containerSize` (recomposes on fold/unfold); SwiftUI `DesignSystemKits` KVO-observes each `UIWindowScene.effectiveGeometry` and republishes `windowShortSide`.
 - `StackScreen` pads content/footer/search/FAB by the side insets and provides an inset-consumed layout to its content; a bottom-tab root stays full width (tab bar + each tab's StackScreen handle insets). Grid columns use `contentWidth`.
 
 ## i18n / Localize (port of RN `Localize`)

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) {

package/ios/Navigation/Component/SnackBar.swift

@@ -57,6 +57,7 @@ struct SnackBarView: View {
     let bottomInset: CGFloat
 
     @EnvironmentObject private var navigator: Navigator
+    @Environment(\.screenLayout) private var layout
 
     @State private var contentHeight: CGFloat = 0
     @State private var offsetY: CGFloat = 0
@@ -75,6 +76,9 @@ struct SnackBarView: View {
                 )
                 .offset(y: offsetY)
                 .padding(.bottom, bottomInset)
+                // iPhone Duo: clear of the side toolbar strip, like the screen content (0 elsewhere)
+                .padding(.leading, layout.insetLeft)
+                .padding(.trailing, layout.insetRight)
         }
         .frame(maxWidth: .infinity, maxHeight: .infinity)
         .ignoresSafeArea()

package/ios/Navigation/ModalScreen.swift

@@ -34,11 +34,15 @@ struct ModalScreen<Content: View>: View {
                 }
 
             content()
+                // iPhone Duo: capped so it stays a dialog on the inner display; nil leaves the size alone
+                .frame(
+                    maxWidth: layout.isDuoDevice ? layout.duoModalMaxWidth : nil,
+                    maxHeight: layout.isDuoDevice ? layout.duoModalMaxHeight : nil
+                )
                 .scaleEffect(contentScale)
                 .opacity(contentOpacity)
-                // iPhone Duo: center below the side status bar and above the home indicator
-                .padding(.top, layout.isDuoDevice ? layout.duoTopInset : 0)
-                .padding(.bottom, layout.isDuoDevice ? layout.insets.bottom : 0)
+                // iPhone Duo: center in the safe area, clear of the side toolbar strip and the home indicator
+                .padding(layout.isDuoDevice ? layout.insets : EdgeInsets())
         }
         // Full screen like RN's Modal, so asymmetric landscape insets don't shift the content sideways.
         .frame(maxWidth: .infinity, maxHeight: .infinity)

package/ios/Popup/PopupDisplay.swift

@@ -107,7 +107,7 @@ public struct PopupDisplay: View {
             }
             .fixedSize(horizontal: false, vertical: true)
             .background(theme.colors.background.surface)
-            .clipShape(RoundedRectangle(cornerRadius: Radius.L))
+            .clipShape(RoundedRectangle(cornerRadius: layout.popupRadius()))
 
             if isShowCloseIcon {
                 PopupCloseButton(action: onClose)
@@ -115,7 +115,7 @@ public struct PopupDisplay: View {
             }
         }
         .frame(maxWidth: layout.popupMaxWidth)
-        .padding(.horizontal, 12)
+        .padding(.horizontal, layout.popupHorizontalPadding(12))
         .accessibilityElement(children: .contain)
         .accessibilityIdentifier("popup_notify")
     }

package/ios/Popup/PopupInput.swift

@@ -59,11 +59,11 @@ public struct PopupInput: View {
                     .offset(x: 11, y: -11)
             }
         }
-        .background(theme.colors.background.surface.cornerRadius(8))
+        .background(theme.colors.background.surface.cornerRadius(layout.popupRadius(8)))
         .shadow(color: .black.opacity(0.08), radius: 2, x: 0, y: 0)
         .shadow(color: .black.opacity(0.16), radius: 24, x: 0, y: 0)
         .frame(maxWidth: layout.popupMaxWidth)
-        .padding(.horizontal, 40)
+        .padding(.horizontal, layout.popupHorizontalPadding(40))
     }
 
     // MARK: Internal

package/ios/Popup/PopupLayout.swift

@@ -1,19 +1,26 @@
 import SDWebImageSwiftUI
 import SwiftUI
 
-// Width of a system alert on the iPhone Duo inner display, in both orientations (RN Popup/utils.ts).
-private let duoPopupMaxWidth: CGFloat = 440
-
 extension ScreenLayout {
-    /// Card width cap (Compose `popupMaxWidth`); unbounded off iPhone Duo, where the popup's own padding sets the width.
+    /// Card width cap on iPhone Duo (the modal bounds, Compose `popupMaxWidth`); unbounded elsewhere,
+    /// where the popup's own padding sets the width.
     var popupMaxWidth: CGFloat {
-        isDuoDevice ? duoPopupMaxWidth : .infinity
+        isDuoDevice ? duoModalMaxWidth : .infinity
+    }
+
+    /// The modal bounds already keep iPhone Duo popups off the edges, so their own side padding goes.
+    func popupHorizontalPadding(_ padding: CGFloat) -> CGFloat {
+        isDuoDevice ? 0 : padding
     }
 
-    /// Room left for a popup on iPhone Duo, where landscape is too short for it; nil elsewhere.
+    /// Tallest a popup gets on iPhone Duo, landscape and the inner display included; nil elsewhere.
     var popupMaxHeight: CGFloat? {
-        guard isDuoDevice else { return nil }
-        return height - duoTopInset - insets.bottom - Spacing.XL * 2
+        isDuoDevice ? duoModalMaxHeight : nil
+    }
+
+    /// Rounder on iPhone Duo, closer to its system alerts.
+    func popupRadius(_ regular: CGFloat = Radius.L) -> CGFloat {
+        isDuoDevice ? Radius.XL : regular
     }
 }
 

package/ios/Popup/PopupNotify.swift

@@ -105,7 +105,7 @@ public struct PopupNotify: View {
                     .popupReadHeight($actionsHeight)
             }
             .background(theme.colors.background.surface)
-            .clipShape(RoundedRectangle(cornerRadius: Radius.L))
+            .clipShape(RoundedRectangle(cornerRadius: layout.popupRadius()))
 
             if props.isShowCloseIcon {
                 PopupCloseButton(action: props.onIconClose)
@@ -113,7 +113,7 @@ public struct PopupNotify: View {
             }
         }
         .frame(maxWidth: layout.popupMaxWidth)
-        .padding(.horizontal, Spacing.M)
+        .padding(.horizontal, layout.popupHorizontalPadding(Spacing.M))
         .accessibilityElement(children: .contain)
         .accessibilityIdentifier("popup_notify")
     }

package/ios/Typography/FontScale.swift

@@ -19,11 +19,19 @@ public struct FontScale: Equatable {
     public let useOSScaleRate: Bool
     /// OS Dynamic Type factor at the time the snapshot was taken.
     public let osFontScale: CGFloat
+    // AI-GENERATED START: device scale from the app window, not UIScreen.main (fixed to one display on iPhone Duo)
+    public let windowShortSide: CGFloat
 
-    public init(userScaleRate: CGFloat = 1, useOSScaleRate: Bool = true, osFontScale: CGFloat = 1) {
+    public init(
+        userScaleRate: CGFloat = 1,
+        useOSScaleRate: Bool = true,
+        osFontScale: CGFloat = 1,
+        windowShortSide: CGFloat? = nil
+    ) {
         self.userScaleRate = userScaleRate
         self.useOSScaleRate = useOSScaleRate
         self.osFontScale = osFontScale
+        self.windowShortSide = windowShortSide ?? DesignSystemKits.currentWindowShortSide()
     }
 
     /// `callAsFunction` so call sites keep reading like Compose's `scaleSize(16)`.
@@ -31,8 +39,8 @@ public struct FontScale: Equatable {
         guard useOSScaleRate else { return size * userScaleRate }
 
         // Short side, not width: landscape must not inflate every font (and so every popup's height).
-        let bounds = UIScreen.main.bounds.size
-        let deviceScale = min(bounds.width, bounds.height) / Self.defaultScreenSize
+        let deviceScale = windowShortSide / Self.defaultScreenSize
+    // AI-GENERATED END: device scale from the app window, not UIScreen.main (fixed to one display on iPhone Duo)
 
         var deviceScaled = size
         var osScaled = size
@@ -58,7 +66,10 @@ public struct FontScale: Equatable {
         return FontScale(
             userScaleRate: userScaleRate ?? self.userScaleRate,
             useOSScaleRate: useOSScaleRate ?? self.useOSScaleRate,
-            osFontScale: osFontScale
+            osFontScale: osFontScale,
+            // AI-GENERATED START: keep the window size through context overrides
+            windowShortSide: windowShortSide
+            // AI-GENERATED END: keep the window size through context overrides
         )
     }
 }

package/ios/native-kits.podspec

@@ -1,6 +1,6 @@
 Pod::Spec.new do |s|
   s.name             = 'MoMoUIKits'
-  s.version          = '0.167.1-beta.22'
+  s.version          = '0.168.1-beta.8'
   s.summary          = 'MoMoUIKits for iOS'
   s.homepage         = 'https://momo.vn'
   s.license          = { :type => 'MIT' }

package/ios-demo/MoMoUIKitsDemo.podspec

@@ -1,6 +1,6 @@
 Pod::Spec.new do |s|
   s.name             = 'MoMoUIKitsDemo'
-  s.version          = '0.167.1-beta.22'
+  s.version          = '0.168.1-beta.8'
   s.summary          = 'Demo browser for MoMoUIKits SwiftUI components'
   s.homepage         = 'https://momo.vn'
   s.license          = { :type => 'MIT' }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/native-kits",
-  "version": "0.162.49",
+  "version": "0.162.50",
   "private": false,
   "dependeNavigationncies": {},
   "devDependencies": {},