@momo-kits/native-kits 0.162.44 → 0.162.45-debug

package/ios/Layout/Card.swift

@@ -0,0 +1,50 @@
+import SwiftUI
+
+/// Rounded surface laid out on the kit grid (8pt gutter), inset by the screen margin.
+/// Mirrors `vn.momo.kits.layout.Card`.
+public struct CardView<Content: View>: View {
+    @Environment(\.appTheme) private var theme
+
+    // MARK: Lifecycle
+
+    public init(
+        useShadow: Bool = false,
+        backgroundImage: String? = nil,
+        backgroundColor: Color? = nil,
+        contentPadding: EdgeInsets = EdgeInsets(top: Spacing.M, leading: Spacing.M, bottom: Spacing.M, trailing: Spacing.M),
+        @ViewBuilder content: @escaping () -> Content
+    ) {
+        self.useShadow = useShadow
+        self.backgroundImage = backgroundImage
+        self.backgroundColor = backgroundColor
+        self.contentPadding = contentPadding
+        self.content = content
+    }
+
+    // MARK: Public
+
+    public var body: some View {
+        GridFlow(gutter: Spacing.S, content: content)
+            .padding(contentPadding)
+            .background(background)
+            .background(backgroundColor ?? theme.colors.background.surface)
+            .clipShape(RoundedRectangle(cornerRadius: Radius.M))
+            // Approximates Compose `shadow(6.dp)` elevation.
+            .shadow(color: Color.black.opacity(useShadow ? 0.12 : 0), radius: useShadow ? 6 : 0, x: 0, y: useShadow ? 3 : 0)
+            .padding(.horizontal, Spacing.M)
+    }
+
+    // MARK: Private
+
+    private let useShadow: Bool
+    private let backgroundImage: String?
+    private let backgroundColor: Color?
+    private let contentPadding: EdgeInsets
+    private let content: () -> Content
+
+    @ViewBuilder private var background: some View {
+        if let backgroundImage {
+            ImageView(backgroundImage, contentMode: .fill).clipped()
+        }
+    }
+}

package/ios/Layout/GridContext.swift

@@ -1,20 +1,31 @@
 import SwiftUI
 
-/// Grid metrics published by a layout container (`SectionView`) so span-based children
+/// Grid metrics published by a layout container (`SectionView`, `CardView`) so span-based children
 /// can size themselves. Mirrors `vn.momo.kits.layout.GridContext`.
 public struct GridContext: Equatable {
     public let numberOfColumns: Int
     public let gutter: CGFloat
     public let sizePerSpan: CGFloat
+    /// Pixels per point; span sizes are floored onto the pixel grid when it is set.
+    public let displayScale: CGFloat
 
-    public init(numberOfColumns: Int = 12, gutter: CGFloat = Spacing.M, sizePerSpan: CGFloat = 0) {
+    public init(
+        numberOfColumns: Int = 12,
+        gutter: CGFloat = Spacing.M,
+        sizePerSpan: CGFloat = 0,
+        displayScale: CGFloat = 0
+    ) {
         self.numberOfColumns = numberOfColumns
         self.gutter = gutter
         self.sizePerSpan = sizePerSpan
+        self.displayScale = displayScale
     }
 
     public func sizeForSpan(_ span: Int) -> CGFloat {
-        sizePerSpan * CGFloat(span) + gutter * CGFloat(span - 1)
+        let size = sizePerSpan * CGFloat(span) + gutter * CGFloat(span - 1)
+        guard displayScale > 0 else { return size }
+        // Compose floors in pixels so a full row of spans never overflows by a sub-pixel.
+        return floor(size * displayScale) / displayScale
     }
 }
 
@@ -28,3 +39,176 @@ public extension EnvironmentValues {
         set { self[GridContextKey.self] = newValue }
     }
 }
+
+/// Measures the width it is given, publishes the grid for it and wraps children in a flow row.
+/// Shared body of `SectionView` and `CardView` (Compose `gridColumns()` + `gridContext()` + `FlowRow`).
+struct GridFlow<Content: View>: View {
+    let gutter: CGFloat
+    let content: () -> Content
+
+    @Environment(\.screenLayout) private var screenLayout
+    @Environment(\.displayScale) private var displayScale
+    /// The Compose `BoxWithConstraints` width.
+    @State private var availableWidth: CGFloat = 0
+
+    var body: some View {
+        flow
+            .environment(\.gridContext, grid)
+            .frame(maxWidth: .infinity, alignment: .topLeading)
+            .background(widthReader)
+    }
+
+    private var grid: GridContext {
+        let columns = screenLayout.contentWidth > 600 ? 24 : 12
+        let column = (availableWidth - gutter * CGFloat(columns - 1)) / CGFloat(columns)
+        return GridContext(
+            numberOfColumns: columns,
+            gutter: gutter,
+            sizePerSpan: max(0, column),
+            displayScale: displayScale
+        )
+    }
+
+    @ViewBuilder private var flow: some View {
+        if #available(iOS 16.0, *) {
+            FlowRowLayout(gutter: gutter) { content() }
+        } else {
+            _VariadicView.Tree(FlowRowFallback(gutter: gutter, maxWidth: availableWidth)) { content() }
+        }
+    }
+
+    private var widthReader: some View {
+        GeometryReader { proxy in
+            Color.clear.preference(key: GridWidthKey.self, value: proxy.size.width)
+        }
+        .onPreferenceChange(GridWidthKey.self) { availableWidth = $0 }
+    }
+}
+
+private struct GridWidthKey: PreferenceKey {
+    static var defaultValue: CGFloat = 0
+
+    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
+        value = max(value, nextValue())
+    }
+}
+
+/// iOS 15 has no `Layout`: the children are measured, then pinned to the same rows as
+/// `FlowRowLayout` through alignment guides.
+private struct FlowRowFallback: _VariadicView_UnaryViewRoot {
+    let gutter: CGFloat
+    let maxWidth: CGFloat
+
+    func body(children: _VariadicView.Children) -> some View {
+        FlowRowPlacement(children: children, gutter: gutter, maxWidth: maxWidth)
+    }
+}
+
+private struct FlowRowPlacement: View {
+    let children: _VariadicView.Children
+    let gutter: CGFloat
+    let maxWidth: CGFloat
+    @State private var sizes: [AnyHashable: CGSize] = [:]
+
+    var body: some View {
+        let placement = place()
+        ZStack(alignment: .topLeading) {
+            ForEach(children) { child in
+                child
+                    // FlowRowLayout proposes no height
+                    .fixedSize(horizontal: false, vertical: true)
+                    .background(
+                        GeometryReader { proxy in
+                            Color.clear.preference(key: FlowChildSizesKey.self, value: [child.id: proxy.size])
+                        }
+                    )
+                    .alignmentGuide(.leading) { _ in -(placement.origins[child.id]?.x ?? 0) }
+                    .alignmentGuide(.top) { _ in -(placement.origins[child.id]?.y ?? 0) }
+            }
+        }
+        .frame(height: placement.height, alignment: .topLeading)
+        .onPreferenceChange(FlowChildSizesKey.self) { sizes = $0 }
+    }
+
+    private func place() -> (origins: [AnyHashable: CGPoint], height: CGFloat) {
+        var origins: [AnyHashable: CGPoint] = [:]
+        var x: CGFloat = 0
+        var y: CGFloat = 0
+        var rowHeight: CGFloat = 0
+        for child in children {
+            let size = sizes[child.id] ?? .zero
+            // Sub-point tolerance: spans are computed to land exactly on `maxWidth`.
+            if x > 0, x + size.width > maxWidth + 0.5 {
+                x = 0
+                y += rowHeight + gutter
+                rowHeight = 0
+            }
+            origins[child.id] = CGPoint(x: x, y: y)
+            x += size.width + gutter
+            rowHeight = max(rowHeight, size.height)
+        }
+        return (origins, y + rowHeight)
+    }
+}
+
+private struct FlowChildSizesKey: PreferenceKey {
+    static var defaultValue: [AnyHashable: CGSize] = [:]
+
+    static func reduce(value: inout [AnyHashable: CGSize], nextValue: () -> [AnyHashable: CGSize]) {
+        value.merge(nextValue()) { $1 }
+    }
+}
+
+/// Wrapping row with equal horizontal/vertical spacing — the Compose `FlowRow` equivalent.
+@available(iOS 16.0, *)
+private struct FlowRowLayout: Layout {
+    struct Row {
+        var items: [(index: Int, size: CGSize)] = []
+        var width: CGFloat = 0
+        var height: CGFloat = 0
+    }
+
+    let gutter: CGFloat
+
+    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout Void) -> CGSize {
+        let maxWidth = proposal.width ?? .infinity
+        let rows = rows(for: subviews, maxWidth: maxWidth)
+        let height = rows.reduce(0) { $0 + $1.height } + gutter * CGFloat(max(0, rows.count - 1))
+        return CGSize(width: proposal.width ?? rows.map(\.width).max() ?? 0, height: height)
+    }
+
+    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout Void) {
+        var y = bounds.minY
+        for row in rows(for: subviews, maxWidth: bounds.width) {
+            var x = bounds.minX
+            for item in row.items {
+                subviews[item.index].place(
+                    at: CGPoint(x: x, y: y),
+                    anchor: .topLeading,
+                    proposal: ProposedViewSize(item.size)
+                )
+                x += item.size.width + gutter
+            }
+            y += row.height + gutter
+        }
+    }
+
+    private func rows(for subviews: Subviews, maxWidth: CGFloat) -> [Row] {
+        var rows: [Row] = []
+        var current = Row()
+        for index in subviews.indices {
+            let size = subviews[index].sizeThatFits(ProposedViewSize(width: maxWidth, height: nil))
+            let widthIfAppended = current.items.isEmpty ? size.width : current.width + gutter + size.width
+            // Sub-point tolerance: spans are computed to land exactly on `maxWidth`.
+            if !current.items.isEmpty, widthIfAppended > maxWidth + 0.5 {
+                rows.append(current)
+                current = Row()
+            }
+            current.width = current.items.isEmpty ? size.width : current.width + gutter + size.width
+            current.height = max(current.height, size.height)
+            current.items.append((index, size))
+        }
+        if !current.items.isEmpty { rows.append(current) }
+        return rows
+    }
+}

package/ios/Layout/Item.swift

@@ -1,12 +1,13 @@
 import SwiftUI
 
-/// Span-sized cell inside a `SectionView`. Reads the grid published by its container;
+/// Span-sized cell inside a `SectionView` / `CardView`. Reads the grid published by its container;
 /// without one it just wraps its content. Mirrors `vn.momo.kits.layout.Item`.
 public struct ItemView<Content: View>: View {
     // MARK: Lifecycle
 
+    /// `widthSpan` nil spans the full row, whatever the container's column count.
     public init(
-        widthSpan: Int = 12,
+        widthSpan: Int? = nil,
         heightSpan: Int = 0,
         @ViewBuilder content: @escaping () -> Content
     ) {
@@ -26,14 +27,14 @@ public struct ItemView<Content: View>: View {
 
     // MARK: Private
 
-    private let widthSpan: Int
+    private let widthSpan: Int?
     private let heightSpan: Int
     private let content: () -> Content
 
     @Environment(\.gridContext) private var grid
 
     private var width: CGFloat? {
-        grid.map { $0.sizeForSpan(widthSpan) }
+        grid.map { $0.sizeForSpan(widthSpan ?? $0.numberOfColumns) }
     }
 
     private var height: CGFloat? {

package/ios/Layout/ScreenLayout.swift

@@ -0,0 +1,385 @@
+//
+//  ScreenLayout.swift
+//  MoMoUIKits
+//
+//  Port of momo-kits RN `useScreenLayout` (Layout/utils.ts) and `Application/device.ts`:
+//  window size, safe-area insets, content width, header geometry and the iPhone Duo side bar.
+//
+
+import SwiftUI
+import UIKit
+
+public enum SideBarEdge: Equatable {
+    case left, right
+}
+
+public struct SideBarLayout: Equatable {
+    public let edge: SideBarEdge
+    public let width: CGFloat
+    /// Preferred window y of the first control; StackScreen still keeps the column above the bottom bars.
+    public let top: CGFloat
+    /// Room kept free above the window bottom, clear of a camera at the bottom end of the strip.
+    public let bottom: CGFloat
+}
+
+/// Room the header row keeps from each side for the status bar clock and battery clusters.
+public struct StatusBarClearance: Equatable {
+    public let left: CGFloat
+    public let right: CGFloat
+}
+
+public struct ScreenLayout: Equatable {
+    public let width: CGFloat
+    public let height: CGFloat
+    public let isIPhoneDuo: Bool
+    public let insets: EdgeInsets
+    public let insetLeft: CGFloat
+    public let insetRight: CGFloat
+    public let contentWidth: CGFloat
+    public let headerHeight: CGFloat
+    /// 0 when the status bar is off the top edge, so the bar row fills the header and keeps the title centered.
+    public let headerStatusBarHeight: CGFloat
+    /// iPhone Duo moves back and toolkit into a column in the side safe area; nil while they stay in the bar.
+    public let sideBar: SideBarLayout?
+    /// iPhone Duo inner display in portrait: the header row shares the status bar band, between its clusters.
+    public let statusBarClearance: StatusBarClearance?
+
+    public var headerBarHeight: CGFloat { headerHeight - headerStatusBarHeight }
+}
+
+// Measured by momo-kits RN (Layout/utils.ts) on the iOS 27.1 iPhone Duo simulator; keep both in sync.
+enum DuoMetrics {
+    // Inner display is ~1.42, outer ~1.45; every slab iPhone is 1.77 or taller.
+    static let maxAspectRatio: CGFloat = 1.6
+    // Outer display is 466pt tall in landscape, inner 669pt.
+    static let innerMinHeight: CGFloat = 600
+    static let controlSize: CGFloat = 48
+    static let itemPitch: CGFloat = 50
+    static let firstItemTop: CGFloat = 170
+    static let firstItemTopLandscape: CGFloat = 120
+    // Outer display in portrait: the header is 4pt taller than the iPhone floor and its title
+    // lines up with the camera punchout (y 24–66 at the top of the strip).
+    static let outerHeaderHeight: CGFloat = 76
+    static let outerCameraCenterY: CGFloat = 45
+    // Outer display in landscape has no status bar in the strip: controls keep this far from
+    // both ends unless a reserved region (the camera at either end) asks for more.
+    static let edgeInset: CGFloat = 24
+    // Inner display in portrait: the clock and connectivity cluster sits at the top right corner
+    // (x 550–643 of 669, clock digits centered on y 47); its reserved region is taller than the glyphs.
+    static let innerStatusBarCenterY: CGFloat = 47
+    static let innerStatusBarWidth: CGFloat = 120
+    // Host app's iOS 26 tab bar on the inner display in portrait: a 62pt glass pill sized to its tabs,
+    // QR as a 62pt platter beside it, ≥ 20pt from the sides, 13pt into the home indicator inset.
+    static let floatingTabBarHeight: CGFloat = 62
+    static let floatingTabBarMargin: CGFloat = 20
+    static let floatingTabBarInsetOverlap: CGFloat = 13
+    // Widest short side of any single-display iPhone.
+    static let iPhoneMaxShortSide: CGFloat = 440
+}
+
+enum HeaderMetrics {
+    static let barHeight: CGFloat = HEADER_HEIGHT
+    static let iPhoneMinHeight: CGFloat = 72
+    // A smaller top inset means the status bar is not on the top edge.
+    static let statusBarMinInset: CGFloat = 20
+}
+
+private var isPhoneIdiom: Bool { UIDevice.current.userInterfaceIdiom == .phone }
+
+private var keyWindow: UIWindow? {
+    UIApplication.shared.connectedScenes
+        .compactMap { ($0 as? UIWindowScene)?.keyWindow }
+        .first
+}
+
+extension ScreenLayout {
+    /// Snapshot of the key window; not reactive, so views read `\.screenLayout` instead.
+    public static var current: ScreenLayout {
+        guard let window = keyWindow else {
+            return make(size: UIScreen.main.bounds.size, insets: EdgeInsets())
+        }
+        let inset = window.safeAreaInsets
+        return make(
+            size: window.bounds.size,
+            insets: EdgeInsets(top: inset.top, leading: inset.left, bottom: inset.bottom, trailing: inset.right)
+        )
+    }
+
+    static func make(
+        size: CGSize,
+        insets: EdgeInsets,
+        reservedRegions: [CGRect] = ReservedRegions.current,
+        isPhone: Bool = isPhoneIdiom
+    ) -> ScreenLayout {
+        let width = size.width
+        let height = size.height
+        var (headerHeight, headerStatusBarHeight) = headerGeometry(topInset: insets.top, isPhone: isPhone)
+        let isDuo = isPhone && isIPhoneDuoWindow(width: width, height: height, insets: insets)
+        guard isDuo else {
+            return ScreenLayout(
+                width: width, height: height, isIPhoneDuo: false, insets: insets,
+                insetLeft: 0, insetRight: 0, contentWidth: width,
+                headerHeight: headerHeight, headerStatusBarHeight: headerStatusBarHeight, sideBar: nil,
+                statusBarClearance: nil
+            )
+        }
+
+        var statusBarClearance: StatusBarClearance?
+        let isInnerPortrait = height > width && width >= DuoMetrics.innerMinHeight
+        if isInnerPortrait && insets.top >= HeaderMetrics.statusBarMinInset {
+            statusBarClearance = statusBarClusters(reservedRegions, windowWidth: width, topInset: insets.top)
+                ?? StatusBarClearance(left: 0, right: DuoMetrics.innerStatusBarWidth + Spacing.S)
+            // centered on the clock digits; the cluster's region center sits above them
+            headerHeight = DuoMetrics.innerStatusBarCenterY * 2
+            headerStatusBarHeight = 0
+        }
+
+        var sideBar: SideBarLayout?
+        let sideInset = max(insets.leading, insets.trailing)
+        // narrower strips cannot host a control 12pt from the inner edge
+        if sideInset >= DuoMetrics.controlSize + Spacing.M {
+            let edge: SideBarEdge = insets.trailing >= insets.leading ? .right : .left
+            let stripLeft = edge == .right ? width - sideInset : 0
+            // clear of the camera and of the status bar cluster, which grows for calls and Live
+            // Activities; region frames already include the system's margin
+            let occlusion = stripOcclusion(reservedRegions, stripLeft: stripLeft, stripRight: stripLeft + sideInset, windowHeight: height)
+
+            var top = statusBarClearance != nil
+                ? headerHeight + Spacing.M
+                : insets.top + HeaderMetrics.barHeight + Spacing.M
+            if insets.top < HeaderMetrics.statusBarMinInset {
+                // status bar lives in the strip: start under its cluster, as the native bar does
+                if width <= height {
+                    top = DuoMetrics.firstItemTop
+                } else if height >= DuoMetrics.innerMinHeight {
+                    top = DuoMetrics.firstItemTopLandscape
+                } else {
+                    // outer display in landscape: no status bar in the strip, the title row centers
+                    // on the camera when it sits at the top end, otherwise on the back button
+                    top = DuoMetrics.edgeInset
+                    let titleCenterY = occlusion.top > top ? occlusion.topCenter : top + DuoMetrics.controlSize / 2
+                    (headerHeight, headerStatusBarHeight) = centeredHeaderGeometry(centerY: titleCenterY)
+                }
+
+                if height > width && width < DuoMetrics.innerMinHeight {
+                    // outer display: the row starts below the top so the title centers on the camera
+                    headerHeight = DuoMetrics.outerHeaderHeight
+                    headerStatusBarHeight = DuoMetrics.outerCameraCenterY * 2 - DuoMetrics.outerHeaderHeight
+                }
+            }
+
+            sideBar = SideBarLayout(
+                edge: edge,
+                width: sideInset,
+                top: max(top, occlusion.top),
+                bottom: max(DuoMetrics.edgeInset, occlusion.bottom)
+            )
+        }
+
+        return ScreenLayout(
+            width: width, height: height, isIPhoneDuo: true, insets: insets,
+            insetLeft: insets.leading, insetRight: insets.trailing,
+            contentWidth: width - insets.leading - insets.trailing,
+            headerHeight: headerHeight, headerStatusBarHeight: headerStatusBarHeight, sideBar: sideBar,
+            statusBarClearance: statusBarClearance
+        )
+    }
+
+    private static func headerGeometry(topInset: CGFloat, isPhone: Bool) -> (CGFloat, CGFloat) {
+        let height = topInset + HeaderMetrics.barHeight
+        guard isPhone else { return (height, topInset) }
+        return (
+            max(height, HeaderMetrics.iPhoneMinHeight),
+            topInset < HeaderMetrics.statusBarMinInset ? 0 : topInset
+        )
+    }
+
+    /// Bar row centered on a window y, at least iPhoneMinHeight tall and reaching 8pt below
+    /// a side bar control centered there.
+    private static func centeredHeaderGeometry(centerY: CGFloat) -> (CGFloat, CGFloat) {
+        let height = max(HeaderMetrics.iPhoneMinHeight, centerY + DuoMetrics.controlSize / 2 + Spacing.S)
+        return (height, max(0, centerY * 2 - height))
+    }
+
+    /// How far system regions reach into a side strip from its top and from its bottom end
+    /// (e.g. the camera, which sits at either end depending on the rotation), and the center y
+    /// of the region reaching furthest from the top.
+    private static func stripOcclusion(
+        _ regions: [CGRect],
+        stripLeft: CGFloat,
+        stripRight: CGFloat,
+        windowHeight: CGFloat
+    ) -> (top: CGFloat, topCenter: CGFloat, bottom: CGFloat) {
+        regions.reduce(into: (top: CGFloat(0), topCenter: CGFloat(0), bottom: CGFloat(0))) { occlusion, region in
+            guard region.minX < stripRight && region.maxX > stripLeft else { return }
+            if region.midY < windowHeight / 2 {
+                if region.maxY > occlusion.top {
+                    occlusion.top = region.maxY
+                    occlusion.topCenter = region.midY
+                }
+            } else {
+                occlusion.bottom = max(occlusion.bottom, windowHeight - region.minY)
+            }
+        }
+    }
+
+    /// How far the clock and battery clusters of a status bar on the top edge reach in from each
+    /// side; nil without reserved regions there.
+    private static func statusBarClusters(_ regions: [CGRect], windowWidth: CGFloat, topInset: CGFloat) -> StatusBarClearance? {
+        let midX = windowWidth / 2
+        let clusters = regions.filter {
+            $0.minY < topInset && $0.maxY <= topInset && ($0.maxX <= midX || $0.minX >= midX)
+        }
+        guard !clusters.isEmpty else { return nil }
+        var left: CGFloat = 0
+        var right: CGFloat = 0
+        for region in clusters {
+            if region.minX < midX {
+                left = max(left, region.maxX)
+            } else {
+                right = max(right, windowWidth - region.minX)
+            }
+        }
+        return StatusBarClearance(left: left, right: right)
+    }
+
+    // Slab iPhones report equal side insets in landscape; iPhone Duo moves the status bar to one side.
+    private static func isIPhoneDuoWindow(width: CGFloat, height: CGFloat, insets: EdgeInsets) -> Bool {
+        let shortSide = min(width, height)
+        let isSquare = shortSide > 0 && max(width, height) / shortSide < DuoMetrics.maxAspectRatio
+        return isSquare || insets.leading != insets.trailing
+    }
+
+    /// Below the side status bar: in portrait it is about twice as tall as its inset is wide.
+    public var duoTopInset: CGFloat {
+        max(insets.top, height > width ? max(insets.leading, insets.trailing) * 2 : 0)
+    }
+}
+
+/// Port of RN `device.ts` `isIPhoneDuo()`: UIScreen stays on the outer display, so this
+/// still matches when Split View narrows the window. Used by popups and overlays.
+public func isIPhoneDuoDevice(windowSize: CGSize? = nil) -> Bool {
+    guard isPhoneIdiom else { return false }
+    let screen = UIScreen.main.bounds.size
+    let window = windowSize ?? keyWindow?.bounds.size ?? screen
+    return max(min(screen.width, screen.height), min(window.width, window.height)) > DuoMetrics.iPhoneMaxShortSide
+}
+
+// MARK: - Reserved regions
+
+/// System occlusion regions (iOS 27.1+) in window coordinates: the iPhone Duo camera, and the
+/// status bar cluster as it grows for a call or a Live Activity. Empty before iOS 27.1.
+enum ReservedRegions {
+    // last report of a probe, so `ScreenLayout.current` includes it
+    private(set) static var current: [CGRect] = []
+    static let didChange = Notification.Name("MoMoUIKitsReservedRegionsDidChange")
+
+    fileprivate static func publish(_ regions: [CGRect]) {
+        guard regions != current else { return }
+        current = regions
+        NotificationCenter.default.post(name: didChange, object: nil)
+    }
+}
+
+/// Invisible probe: reading the regions in layoutSubviews makes UIKit run it again when they
+/// change, so nothing polls. Port of RN `@momo-kits/reserved-regions`.
+private final class ReservedRegionsProbe: UIView {
+    override init(frame: CGRect) {
+        super.init(frame: frame)
+        isUserInteractionEnabled = false
+    }
+
+    required init?(coder: NSCoder) { nil }
+
+    override func layoutSubviews() {
+        super.layoutSubviews()
+        // read even when not publishing, so UIKit keeps re-running this when they change
+        let regions = occlusionRegions()
+        // every screen has a probe but the regions are window-wide: one sliding in on a push or
+        // a present, or off the window, would overwrite them with a partial read
+        guard spansWindow else { return }
+        // layout pass: publish on the next turn instead of mutating SwiftUI state mid-update
+        DispatchQueue.main.async { ReservedRegions.publish(regions) }
+    }
+
+    private var spansWindow: Bool {
+        guard let window else { return false }
+        let frame = convert(bounds, to: nil)
+        return abs(frame.minX) < 1 && abs(frame.maxX - window.bounds.width) < 1 && abs(frame.minY) < 1
+    }
+
+    override func didMoveToWindow() {
+        super.didMoveToWindow()
+        setNeedsLayout()
+    }
+
+    // The API is newer than the SDKs hosts may build with, so it is reached through the runtime.
+    private func occlusionRegions() -> [CGRect] {
+        let regionsOfKind = NSSelectorFromString("reservedRegionsOfKind:")
+        guard window != nil, responds(to: regionsOfKind),
+              let kindType = NSClassFromString("UIViewReservedRegionKind") as? NSObject.Type,
+              let kind = (kindType as AnyObject).perform(NSSelectorFromString("occlusionRegionKind"))?.takeUnretainedValue(),
+              let regions = perform(regionsOfKind, with: kind)?.takeUnretainedValue() as? [NSObject]
+        else { return [] }
+        return regions.compactMap { ($0.value(forKey: "frame") as? NSValue)?.cgRectValue }
+            .map { convert($0, to: nil) }
+    }
+}
+
+private struct ReservedRegionsProbeView: UIViewRepresentable {
+    func makeUIView(context: Context) -> ReservedRegionsProbe { ReservedRegionsProbe() }
+
+    func updateUIView(_ probe: ReservedRegionsProbe, context: Context) {}
+}
+
+// MARK: - Environment
+
+private struct ScreenLayoutKey: EnvironmentKey {
+    // Computed so an un-injected subtree (bare UIHostingController) still reads the live window.
+    static var defaultValue: ScreenLayout { .current }
+}
+
+public extension EnvironmentValues {
+    var screenLayout: ScreenLayout {
+        get { self[ScreenLayoutKey.self] }
+        set { self[ScreenLayoutKey.self] = newValue }
+    }
+}
+
+/// Re-reads the window whenever this view's size changes (rotation, fold/unfold, Split View).
+private struct ScreenLayoutReader: ViewModifier {
+    @State private var layout: ScreenLayout = .current
+
+    func body(content: Content) -> some View {
+        content
+            .environment(\.screenLayout, layout)
+            .background(
+                GeometryReader { proxy in
+                    Color.clear
+                        .onAppear { refresh() }
+                        .onChange(of: proxy.size) { _ in refresh() }
+                        .onChange(of: proxy.safeAreaInsets) { _ in refresh() }
+                }
+            )
+            .background(ReservedRegionsProbeView().ignoresSafeArea())
+            // any screen's probe may report, so every reader follows the shared value
+            .onReceive(NotificationCenter.default.publisher(for: ReservedRegions.didChange)) { _ in
+                refresh()
+            }
+            .onReceive(NotificationCenter.default.publisher(for: UIDevice.orientationDidChangeNotification)) { _ in
+                refresh()
+            }
+    }
+
+    private func refresh() {
+        let next = ScreenLayout.current
+        if next != layout { layout = next }
+    }
+}
+
+public extension View {
+    /// Provides `\.screenLayout`; NavigationContainer applies it, a bare UIHostingController root should too.
+    func momoScreenLayout() -> some View {
+        modifier(ScreenLayoutReader())
+    }
+}