@webview-native-ui/engine 1.0.1 → 1.0.2-0

package/ios/Sources/WebViewNativeUIControls/Components/NativeUITabBar.swift

@@ -0,0 +1,213 @@
+import UIKit
+
+enum NativeUITabBar {
+    struct Anchor: Decodable, Equatable {
+        let x: Double
+        let y: Double
+        var isValid: Bool { [0, 0.5, 1].contains(x) && [0, 1].contains(y) }
+    }
+
+    /// Optimistic tab selection until the Web selected state catches up (or times out).
+    struct PendingSelection: Equatable {
+        var id: String
+        var until: CFAbsoluteTime
+        static func start(_ id: String, ttl: CFTimeInterval = 1) -> PendingSelection {
+            PendingSelection(id: id, until: CFAbsoluteTimeGetCurrent() + ttl)
+        }
+
+        // UIKit and SwiftUI keep the same optimistic selection until Web confirms it.
+        static func reconcile(_ pending: inout PendingSelection?, domSelection: String?,
+                              isAvailable: (String) -> Bool, now: CFAbsoluteTime = CFAbsoluteTimeGetCurrent()) -> String? {
+            guard let current = pending else { return domSelection }
+            if current.id == domSelection || now >= current.until || !isAvailable(current.id) {
+                pending = nil
+                return domSelection
+            }
+            return current.id
+        }
+    }
+
+    static let kind = NativeUIComponent.tabBar
+    /// Tab bars waiting for an iOS 26 title-layout warmup after the next `fit`.
+    private static var pendingTitleWarmup = Set<ObjectIdentifier>()
+
+    static func make(_ node: NativeUIControl, rendering: NativeUIControlRendering, delegate: UITabBarDelegate) -> UITabBar {
+        let control = UITabBar()
+        configureLayout(control)
+        control.delegate = delegate
+        update(control, node: node, rendering: rendering)
+        return control
+    }
+
+    static func configureLayout(_ tabBar: UITabBar) {
+        // The reader accepts icon-top tabs. Keep that layout local to the native
+        // bar instead of letting the iPad idiom turn it into inline items.
+        if #available(iOS 17.0, *) {
+            tabBar.traitOverrides.horizontalSizeClass = .compact
+            tabBar.traitOverrides.verticalSizeClass = .regular
+        }
+        tabBar.itemPositioning = .fill
+    }
+
+    static func update(_ tabBar: UITabBar, node: NativeUIControl, rendering: NativeUIControlRendering) {
+        var pending: PendingSelection?
+        update(tabBar, node: node, rendering: rendering, pendingSelection: &pending)
+    }
+
+    static func update(_ tabBar: UITabBar, node: NativeUIControl, rendering: NativeUIControlRendering,
+                       pendingSelection: inout PendingSelection?) {
+        tabBar.tintColor = node.tabTint.map { rendering.color($0) }
+        let items = node.items
+        let ids = items.map(\.id)
+        var needsTitleWarmup = false
+        // Keep UIKit's item identities and interaction state across DOM selection updates.
+        if tabBar.items?.map({ $0.accessibilityIdentifier ?? "" }) != ids {
+            tabBar.items = items.map { item in
+                let tab = UITabBarItem(title: item.content.label, image: rendering.image(item.content), tag: 0)
+                tab.accessibilityIdentifier = item.id
+                return tab
+            }
+            needsTitleWarmup = true
+        }
+        let nativeItems = tabBar.items ?? []
+        for (tab, item) in zip(nativeItems, items) {
+            let title = item.content.label
+            if tab.title != title {
+                tab.title = title
+                needsTitleWarmup = true
+            }
+            let icon = rendering.image(item.content)
+            if tab.image !== icon {
+                tab.image = icon
+                needsTitleWarmup = true
+            }
+            if tab.selectedImage !== icon { tab.selectedImage = icon }
+            tab.isEnabled = !item.content.disabled
+            tab.accessibilityLabel = item.content.accessibilityLabel
+            if applyTypography(item.content, to: tab) { needsTitleWarmup = true }
+            applyBadge(item.content.badge, to: tab, rendering: rendering)
+        }
+        let selectedID = PendingSelection.reconcile(&pendingSelection,
+                                                    domSelection: items.first(where: { $0.content.selected })?.id,
+                                                    isAvailable: { id in items.contains { $0.id == id && !$0.content.disabled } })
+        let selectedItem = nativeItems.first { $0.accessibilityIdentifier == selectedID }
+        if tabBar.selectedItem !== selectedItem { tabBar.selectedItem = selectedItem }
+        tabBar.semanticContentAttribute = node.rtl ? .forceRightToLeft : .forceLeftToRight
+        tabBar.accessibilityIdentifier = node.id
+        // Warm after `fit` settles geometry — not on every motion-driven frame sync.
+        if needsTitleWarmup { pendingTitleWarmup.insert(ObjectIdentifier(tabBar)) }
+    }
+
+    @discardableResult
+    static func applyTypography(_ content: NativeUIItemContent, to item: UITabBarItem) -> Bool {
+        let weight: UIFont.Weight
+        switch content.fontWeight {
+        case ..<150: weight = .ultraLight
+        case ..<250: weight = .thin
+        case ..<350: weight = .light
+        case ..<450: weight = .regular
+        case ..<550: weight = .medium
+        case ..<650: weight = .semibold
+        case ..<750: weight = .bold
+        case ..<850: weight = .heavy
+        default: weight = .black
+        }
+        let font = UIFont.systemFont(ofSize: content.fontSize, weight: weight)
+        var changed = false
+        for state in [UIControl.State.normal, .selected] where item.titleTextAttributes(for: state)?[.font] as? UIFont != font {
+            item.setTitleTextAttributes([.font: font], for: state)
+            changed = true
+        }
+        return changed
+    }
+
+    static func applyBadge(_ badge: NativeUIBadge?, to item: UITabBarItem, rendering: NativeUIControlRendering) {
+        // nil removes a badge; an empty string keeps the native notification dot.
+        item.badgeValue = badge?.value
+        item.accessibilityValue = badge?.value
+        item.badgeColor = badge.map { rendering.color($0.color) }
+        let attributes = badge.map { [NSAttributedString.Key.foregroundColor: rendering.color($0.textColor)] }
+        item.setBadgeTextAttributes(attributes, for: .normal)
+        item.setBadgeTextAttributes(attributes, for: .selected)
+    }
+
+    static func fit(_ tabBar: UITabBar, node: NativeUIControl, bounds: CGRect) -> Bool {
+        // Place a new bar before asking UIKit for its safe-area-dependent size.
+        // Measuring at the initial zero frame makes a restored iPad bar 5pt shorter.
+        if tabBar.bounds.isEmpty {
+            tabBar.frame = bounds
+            tabBar.layoutIfNeeded()
+        }
+        let fitted = tabBar.sizeThatFits(bounds.size)
+        var size = CGSize(width: bounds.width,
+                          height: max(bounds.height, fitted.height))
+        if tabBar.bounds.size != size { tabBar.bounds.size = size }
+        tabBar.layoutIfNeeded()
+        // UIKit's tab content occupies only part of UITabBar's outer frame.
+        // Align that content to ion-tab-bar, whose CSS already owns placement.
+        guard var content = contentFrame(tabBar) else {
+            return false
+        }
+        // Reserve ion-tab-bar's width for the tab content, excluding UIKit's outer gutters.
+        // UIKit can cap the content width for a small number of items.
+        // Do not keep expanding the outer frame beyond its natural size.
+        size.width = min(bounds.width + tabBar.bounds.width - content.width,
+                         max(bounds.width, fitted.width))
+        if abs(tabBar.bounds.width - size.width) > 0.1 {
+            tabBar.bounds.size = size
+            tabBar.layoutIfNeeded()
+            guard let measured = contentFrame(tabBar) else {
+                return false
+            }
+            content = measured
+        }
+        // UIKit owns the adaptive platter size, including changes after badge/title updates.
+        // Preserve the DOM placement anchor instead of requiring identical item widths.
+        let anchor = node.tabBarAnchor
+        let x = anchor?.x ?? 0
+        let y = anchor?.y ?? 0
+        let center = CGPoint(x: bounds.minX + (bounds.width - content.width) * x - content.minX + size.width / 2,
+                             y: bounds.minY + (bounds.height - content.height) * y - content.minY + size.height / 2)
+        if tabBar.center != center { tabBar.center = center }
+        if pendingTitleWarmup.remove(ObjectIdentifier(tabBar)) != nil {
+            warmUnselectedTitleLayout(tabBar)
+        }
+        return true
+    }
+
+    /// iOS 26 only: programmatically visit each unselected item so UIKit measures
+    /// its title the same way a user tap would. Selection does not call the
+    /// tab-bar delegate. No-op on iOS 27+, where first paint already matches Web.
+    static func warmUnselectedTitleLayout(_ tabBar: UITabBar) {
+        let version = ProcessInfo.processInfo.operatingSystemVersion
+        guard version.majorVersion == 26, let items = tabBar.items, items.count > 1 else { return }
+        let selected = tabBar.selectedItem
+        UIView.performWithoutAnimation {
+            for item in items where item !== selected {
+                tabBar.selectedItem = item
+                tabBar.layoutIfNeeded()
+            }
+            if tabBar.selectedItem !== selected {
+                tabBar.selectedItem = selected
+                tabBar.layoutIfNeeded()
+            }
+        }
+    }
+
+    static func contentFrame(_ tabBar: UITabBar) -> CGRect? {
+        contentFrames(tabBar).reduce(nil) { (result: CGRect?, frame) in result.map { $0.union(frame) } ?? frame }
+    }
+
+    static func contentFrames(_ tabBar: UITabBar) -> [CGRect] {
+        contentViews(tabBar).map { $0.frame }
+    }
+
+    static func contentViews(_ tabBar: UITabBar) -> [UIView] {
+        func containsControl(_ view: UIView) -> Bool {
+            view is UIControl || view.subviews.contains(where: containsControl)
+        }
+        return tabBar.subviews
+            .filter { !$0.isHidden && $0.alpha > 0 && containsControl($0) }
+            .filter { !$0.frame.isEmpty }
+    }
+}

package/ios/Sources/WebViewNativeUIControls/Components/NativeUIToolbarTransition.swift

@@ -0,0 +1,186 @@
+import UIKit
+
+/// A toolbar shares the page animation's clock, including interactive reversal.
+/// Existing glass surfaces survive; only their content and geometry interpolate.
+@MainActor
+final class NativeUIToolbarTransition {
+    let id: Int
+    let controlIds: Set<String>
+    private var updates: [(CGFloat) -> Void] = []
+    private var restorations: [() -> Void] = []
+    private(set) var progress: CGFloat = 0
+
+    @available(iOS 26.0, *)
+    init(_ transition: NativeUIToolbarTransitionSnapshot, sources: [NativeUIControl], controls: [String: UIView],
+         scale: CGFloat, origin: CGPoint, rendering: NativeUIControlRendering) {
+        id = transition.id
+        controlIds = Set(transition.sourceIds + transition.destination.map(\.id))
+        let outgoing = sources.filter { transition.sourceIds.contains($0.id) }
+        var remaining = transition.destination
+        func bounds(_ node: NativeUIControl) -> CGRect {
+            CGRect(x: origin.x + node.frame.x * scale, y: origin.y + node.frame.y * scale,
+                   width: node.frame.width * scale, height: node.frame.height * scale)
+        }
+        for source in outgoing {
+            guard let view = controls[source.id] else { continue }
+            let match = remaining.firstIndex { $0.transitionId != nil && $0.transitionId == source.transitionId }
+            guard let match else {
+                // A removed surface exits in place instead of switching to the
+                // moving Web page. Keep the same clock so cancellation reverses it.
+                let alpha = view.alpha
+                let interactive = view.isUserInteractionEnabled
+                view.isUserInteractionEnabled = false
+                updates.append { value in view.alpha = alpha * (1 - value) }
+                restorations.append {
+                    view.alpha = alpha
+                    view.isUserInteractionEnabled = interactive
+                }
+                continue
+            }
+            let destination = remaining.remove(at: match)
+            let originalFrame = view.frame
+            let sourceGlass = source.kind == .buttons || source.items.first?.content.buttonFill != .clear
+            let targetGlass = destination.kind == .buttons || destination.items.first?.content.buttonFill != .clear
+            let container: UIView
+            if let button = view as? UIButton {
+                let configuration = button.configuration
+                var empty = configuration
+                empty?.title = nil
+                empty?.image = nil
+                button.configuration = empty
+                let sourceConfiguration = empty
+                let targetConfiguration: UIButton.Configuration = targetGlass ? .glass() : .plain()
+                var showingDestination = false
+                updates.append { value in
+                    guard sourceGlass != targetGlass, showingDestination != (value > 0) else { return }
+                    showingDestination = value > 0
+                    button.configuration = showingDestination ? targetConfiguration : sourceConfiguration
+                }
+                let labels = button.subviews.filter { $0 is UILabel }.map { ($0, $0.isHidden) }
+                labels.forEach { $0.0.isHidden = true }
+                restorations.append { labels.forEach { $0.0.isHidden = $0.1 } }
+                container = button
+                restorations.append { button.configuration = configuration }
+            } else if let glass = view as? UIVisualEffectView {
+                container = glass.contentView
+                let originalEffect = glass.effect
+                var showingDestination = false
+                updates.append { value in
+                    guard sourceGlass != targetGlass, showingDestination != (value > 0) else { return }
+                    showingDestination = value > 0
+                    glass.effect = showingDestination && !targetGlass ? nil : originalEffect
+                }
+                restorations.append { glass.effect = originalEffect }
+                let children = container.subviews.map { ($0, $0.isHidden) }
+                children.forEach { $0.0.isHidden = true }
+                restorations.append { children.forEach { $0.0.isHidden = $0.1 } }
+            } else { continue }
+            let from = bounds(source), to = bounds(destination)
+            updates.append { value in
+                view.frame = Self.interpolate(from, to, value)
+                if view is UIVisualEffectView { view.layer.cornerRadius = view.bounds.height / 2 }
+            }
+            restorations.append { view.frame = originalFrame }
+            var targetItems = destination.items
+            for item in source.items {
+                let index = targetItems.firstIndex { $0.content.transitionId != nil && $0.content.transitionId == item.content.transitionId }
+                let target = index.map { targetItems.remove(at: $0) }
+                addContent(item, target, to: container, fromSurface: from, toSurface: to, scale: scale, rtl: destination.rtl, rendering: rendering)
+            }
+            for item in targetItems { addContent(nil, item, to: container, fromSurface: from, toSurface: to, scale: scale, rtl: destination.rtl, rendering: rendering) }
+        }
+        // New destinations use their final native view from the first frame through
+        // commit. The normal control update reuses it when the page takes ownership.
+        for destination in remaining {
+            guard let view = controls[destination.id] else { continue }
+            let originalAlpha = view.alpha
+            let originalTransform = view.transform
+            let interactive = view.isUserInteractionEnabled
+            view.isUserInteractionEnabled = false
+            updates.append { value in
+                view.alpha = originalAlpha * value
+                view.transform = originalTransform.scaledBy(x: max(0.001, value), y: max(0.001, value))
+            }
+            restorations.append {
+                view.alpha = originalAlpha
+                view.transform = originalTransform
+                view.isUserInteractionEnabled = interactive
+            }
+        }
+        setProgress(0)
+    }
+
+    @available(iOS 26.0, *)
+    private func addContent(_ source: NativeUIItem?, _ destination: NativeUIItem?, to host: UIView,
+                            fromSurface: CGRect, toSurface: CGRect, scale: CGFloat, rtl: Bool, rendering: NativeUIControlRendering) {
+        // swiftlint:disable:next force_unwrapping
+        var from = (source ?? destination)!.frame.rect.applying(CGAffineTransform(scaleX: scale, y: scale))
+        // swiftlint:disable:next force_unwrapping
+        var to = (destination ?? source)!.frame.rect.applying(CGAffineTransform(scaleX: scale, y: scale))
+        // Preserve window position where possible. When a numbered surface moves
+        // past another action, grow/shrink its extra items from inside that surface.
+        func contained(_ rect: CGRect, in size: CGSize) -> CGRect {
+            let halfWidth = min(rect.width, size.width) / 2
+            let halfHeight = min(rect.height, size.height) / 2
+            let center = CGPoint(x: min(max(rect.midX, halfWidth), size.width - halfWidth),
+                                 y: min(max(rect.midY, halfHeight), size.height - halfHeight))
+            return CGRect(x: center.x - rect.width / 2, y: center.y - rect.height / 2, width: rect.width, height: rect.height)
+        }
+        if source == nil {
+            from = contained(to.offsetBy(dx: toSurface.minX - fromSurface.minX, dy: toSurface.minY - fromSurface.minY), in: fromSurface.size)
+        }
+        if destination == nil {
+            to = contained(from.offsetBy(dx: fromSurface.minX - toSurface.minX, dy: fromSurface.minY - toSurface.minY), in: toSurface.size)
+        }
+        let unchanged = source.map { from in destination.map { to in
+            let a = from.content, b = to.content
+            return a.label == b.label && a.icon == b.icon && a.iconWidth == b.iconWidth && a.iconHeight == b.iconHeight &&
+                a.fontSize == b.fontSize && a.fontWeight == b.fontWeight && a.color == b.color && a.badge == b.badge &&
+                a.disabled == b.disabled && a.selected == b.selected && a.iconPosition == b.iconPosition &&
+                a.imagePadding == b.imagePadding && a.contentInsetLeading == b.contentInsetLeading &&
+                a.contentInsetTrailing == b.contentInsetTrailing && a.iconTemplate == b.iconTemplate
+        } ?? false } ?? false
+        for (item, incoming) in [(source, false), (unchanged ? nil : destination, true)] {
+            guard let item else { continue }
+            let content = NativeUIButton.render(item.content, glass: false, rendering: rendering, activate: { _ in })
+            content.semanticContentAttribute = rtl ? .forceRightToLeft : .forceLeftToRight
+            content.isUserInteractionEnabled = false
+            content.accessibilityElementsHidden = true
+            host.addSubview(content)
+            updates.append { value in
+                let position = Self.interpolate(from, to, value)
+                // Native matched items keep their own text width while their centres move.
+                // Resizing both labels would truncate the destination until the transition ends.
+                content.bounds = CGRect(origin: .zero, size: (incoming ? to : from).size)
+                content.center = CGPoint(x: position.midX, y: position.midY)
+                // Matched native toolbar content adopts the destination as playback starts.
+                // Crossfading both glyphs superimposes Menu/Back and old/new titles.
+                if source == nil || destination == nil {
+                    // New/removed native items grow/shrink within the changing shared surface.
+                    let amount = incoming ? value : 1 - value
+                    content.transform = CGAffineTransform(scaleX: max(0.001, amount), y: max(0.001, amount))
+                    content.alpha = amount > 0 ? 1 : 0
+                } else {
+                    content.alpha = unchanged ? 1 : incoming ? (value > 0 ? 1 : 0) : (value == 0 ? 1 : 0)
+                }
+            }
+            restorations.append { content.removeFromSuperview() }
+        }
+    }
+
+    static func interpolate(_ from: CGRect, _ to: CGRect, _ value: CGFloat) -> CGRect {
+        CGRect(x: from.minX + (to.minX - from.minX) * value, y: from.minY + (to.minY - from.minY) * value,
+               width: from.width + (to.width - from.width) * value, height: from.height + (to.height - from.height) * value)
+    }
+
+    func setProgress(_ value: CGFloat) {
+        progress = min(1, max(0, value))
+        UIView.performWithoutAnimation { updates.forEach { $0(progress) } }
+    }
+
+    func restore() {
+        UIView.performWithoutAnimation { restorations.reversed().forEach { $0() } }
+        restorations.removeAll()
+        updates.removeAll()
+    }
+}