@blotch/angular-lynx-native 22.2.4 → 22.2.6

package/templates/android/app/src/main/java/dev/angularlynx/shell/WebAuthModule.kt

@@ -0,0 +1,77 @@
+package dev.angularlynx.shell
+
+import android.content.Context
+import android.net.Uri
+import android.os.Handler
+import android.os.Looper
+import com.lynx.jsbridge.LynxMethod
+import com.lynx.jsbridge.LynxModule
+import com.lynx.react.bridge.Callback
+import com.lynx.react.bridge.JavaOnlyMap
+import com.lynx.react.bridge.ReadableMap
+
+/**
+ * The native module behind the runtime's `LynxWebAuthSession`, which calls it
+ * as `NativeModules.AngularLynxWebAuth` (from the background thread, where
+ * NativeModules lives).
+ *
+ * Lynx has no popups or redirects, so a sign-in page can't run inside the
+ * app. The activity opens it in a Custom Tab instead, and the page's redirect
+ * to the callback scheme comes back to it as a deep link, which is why the
+ * scheme has to be one of the app's `deepLinkSchemes`.
+ */
+class WebAuthModule(context: Context, param: Any?) : LynxModule(context, param) {
+    private val host = param as Host
+    private val main = Handler(Looper.getMainLooper())
+
+    interface Host {
+        /**
+         * Opens [url] and calls [done] once with the URL the page redirected
+         * to on [callbackScheme], or with why it didn't.
+         */
+        fun startWebAuthSession(url: Uri, callbackScheme: String, done: (Result) -> Unit)
+    }
+
+    /** How a session ended: the URL the page returned to, or why it didn't. */
+    sealed interface Result {
+        data class Returned(val url: String) : Result
+        data object Canceled : Result
+        data class Failed(val message: String) : Result
+    }
+
+    /**
+     * Calls back once with `{ url }` or `{ error, message }`, where `error` is
+     * `canceled` or `failed`, as the iOS module does.
+     */
+    @LynxMethod
+    fun start(request: ReadableMap, callback: Callback) {
+        val url = request.getString("url", "")
+        val scheme = request.getString("callbackScheme", "")
+        if (url.isEmpty() || scheme.isEmpty()) {
+            callback.invoke(failed("The sign-in needs a URL and a callback scheme."))
+            return
+        }
+        // Lynx calls modules off the main thread, and the activity starts the
+        // Custom Tab.
+        main.post {
+            host.startWebAuthSession(Uri.parse(url), scheme) { result ->
+                callback.invoke(
+                    when (result) {
+                        is Result.Returned -> JavaOnlyMap.from(mapOf("url" to result.url))
+                        Result.Canceled -> JavaOnlyMap.from(
+                            mapOf("error" to "canceled", "message" to "The sign-in was canceled."),
+                        )
+                        is Result.Failed -> failed(result.message)
+                    },
+                )
+            }
+        }
+    }
+
+    private fun failed(message: String) =
+        JavaOnlyMap.from(mapOf("error" to "failed", "message" to message))
+
+    companion object {
+        const val NAME = "AngularLynxWebAuth"
+    }
+}

package/templates/android/app/src/main/res/values/colors.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <!--
+      The window background, which shows before the first Lynx frame and
+      behind the system bars. MainActivity sets it again when dark mode
+      switches while the app is open, from values-night's.
+    -->
+    <color name="window_background">#FFFFFFFF</color>
+</resources>

package/templates/android/app/src/main/res/values/themes.xml

@@ -6,7 +6,7 @@
       light/dark page background instead of flashing.
     -->
     <style name="Theme.AngularLynxShell" parent="android:Theme.Material.Light.NoActionBar">
-        <item name="android:windowBackground">@android:color/white</item>
+        <item name="android:windowBackground">@color/window_background</item>
         <item name="android:windowLightStatusBar">true</item>
         <item name="android:windowLightNavigationBar">true</item>
     </style>

package/templates/android/app/src/main/res/values-night/colors.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="window_background">#FF000000</color>
+</resources>

package/templates/android/app/src/main/res/values-night/themes.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
     <style name="Theme.AngularLynxShell" parent="android:Theme.Material.NoActionBar">
-        <item name="android:windowBackground">@android:color/black</item>
+        <item name="android:windowBackground">@color/window_background</item>
         <item name="android:windowLightStatusBar">false</item>
         <item name="android:windowLightNavigationBar">false</item>
     </style>

package/templates/ios/App/BlurView.swift

@@ -0,0 +1,149 @@
+import Lynx
+import UIKit
+import XElement
+
+/// XElement's `<blur-view>`, with what the shell adds to it:
+///
+/// - `blur-material`, for UIKit's adaptive blur materials (iOS 13 and later).
+///   Lynx's blur-view has only the `blur-effect` styles from before iOS 13
+///   (`light`, `dark` and `extra-light`): one weight, in one appearance. The
+///   bars, menus and alerts of iOS 13 to 25 drew on materials in a weight for
+///   each role, which follow light and dark mode, here the blur-view's
+///   `ios-user-interface-style`. The glass components draw their frosted
+///   design, before iOS 26, on them.
+/// - Liquid Glass that comes and goes inside a `glass-container` animates, as
+///   UIKit's does when the change is animated: it materializes when it's
+///   added or shown, dissolves when it's removed or hidden, and eases between
+///   effects. Lynx's blur-view sets its effect at once, so glass popped in and
+///   out. See GlassTransitions.
+/// - `glass-effect-id`, which pairs two glass shapes across a change, as
+///   SwiftUI's `glassEffectID` does: when one with an id goes and one with the
+///   same id comes in the same update, they're one piece of glass changing
+///   shape. A container morphs the first into the second; elsewhere, such as
+///   from a button to the menu it opens, the second takes over from the
+///   first, with its content fading out.
+///
+/// `blur-material` is `ultra-thin`, `thin`, `regular`, `thick` or `chrome`
+/// (`systemUltraThinMaterial` to `systemThickMaterial`, and the bars'
+/// `systemChromeMaterial`). While it's set, it replaces what `blur-effect` and
+/// `blur-radius` draw, with Apple's own blur. A host without this element,
+/// such as Lynx Explorer, ignores both attributes: it draws the `blur-effect`,
+/// so the components set both, and its glass pops in and out as before.
+///
+/// XElementRegistry registers this class for `blur-view`, and everything else
+/// is LynxUIBlurView's.
+final class BlurView: LynxUIBlurView {
+  private static let materials: [String: UIBlurEffect.Style] = [
+    "ultra-thin": .systemUltraThinMaterial,
+    "thin": .systemThinMaterial,
+    "regular": .systemMaterial,
+    "thick": .systemThickMaterial,
+    "chrome": .systemChromeMaterial,
+  ]
+
+  /// The attributes this class adds, as Lynx finds a Swift element's: an
+  /// Objective-C one declares them with LYNX_PROP_SETTER. Lynx looks for an
+  /// attribute here first, then in LynxUIBlurView's.
+  @objc static func propSetterLookUp() -> [[String]] {
+    [
+      ["blur-material", NSStringFromSelector(#selector(setBlurMaterial(_:requestReset:)))],
+      ["glass-effect-id", NSStringFromSelector(#selector(setGlassEffectId(_:requestReset:)))],
+    ]
+  }
+
+  override func createView() -> UIVisualEffectView? {
+    // LynxUIBlurView's own sets up its state too. Its view, a plain
+    // UIVisualEffectView, is replaced by one that can hold the material and
+    // tell its transitions apart from Lynx's changes.
+    _ = super.createView()
+    return BlurEffectView()
+  }
+
+  private var effectView: BlurEffectView? { view() as? BlurEffectView }
+
+  /// Lynx passes the value as it is (an `id`), and `NSNull` with
+  /// `requestReset` when the attribute is removed.
+  @objc func setBlurMaterial(_ value: Any?, requestReset: Bool) {
+    let material = requestReset ? nil : (value as? String).flatMap { Self.materials[$0] }
+    effectView?.material = material
+  }
+
+  @objc func setGlassEffectId(_ value: Any?, requestReset: Bool) {
+    effectView?.glassEffectId = requestReset ? nil : value as? String
+  }
+
+  /// LynxUIBlurView sets a new effect here when `blur-effect` or a glass
+  /// attribute changed: in a container, the change animates.
+  override func propsDidUpdate() {
+    let drawn = effectView?.lynxEffect
+    super.propsDidUpdate()
+    if #available(iOS 26.0, *), let effectView, effectView.lynxEffect !== drawn {
+      GlassTransitions.shared.effectChanged(effectView, from: drawn)
+    }
+  }
+}
+
+/// A blur-view's view. It draws `material` while one is set, and otherwise
+/// the effect LynxUIBlurView gives it. LynxUIBlurView sets its effect
+/// whenever `blur-effect`, `blur-radius` or the glass attributes change, so
+/// the view keeps that effect aside, to restore when the material goes and to
+/// animate the glass to.
+final class BlurEffectView: UIVisualEffectView {
+  var material: UIBlurEffect.Style? {
+    didSet {
+      guard material != oldValue else { return }
+      // Cleared first, as LynxUIBlurView clears it: UIKit reads a blur
+      // effect's settings (Lynx's radius) only when its style changes.
+      super.effect = nil
+      super.effect = material.map { UIBlurEffect(style: $0) } ?? lynxEffect
+    }
+  }
+
+  /// The `glass-effect-id` attribute.
+  var glassEffectId: String?
+
+  /// The effect Lynx last set, which a transition may not be drawing yet.
+  private(set) var lynxEffect: UIVisualEffect?
+
+  override var effect: UIVisualEffect? {
+    get { super.effect }
+    set {
+      lynxEffect = newValue
+      if material == nil {
+        super.effect = newValue
+      }
+    }
+  }
+
+  /// Draws `effect` while leaving the one Lynx set alone: for a transition,
+  /// which starts from nothing or from the effect Lynx just replaced.
+  func draw(_ effect: UIVisualEffect?) {
+    super.effect = effect
+  }
+
+  /// UIKit calls this as Lynx inserts the view, or the element around it, and
+  /// as it removes one, while the view is still on screen, and as an overlay
+  /// shows or hides with the view in it. LynxUI has a hook of its own, but its
+  /// header promises a window that's nil on removal, which Swift can't take.
+  override func willMove(toWindow newWindow: UIWindow?) {
+    super.willMove(toWindow: newWindow)
+    if #available(iOS 26.0, *) {
+      GlassTransitions.shared.view(self, willMoveFrom: window, to: newWindow)
+    }
+  }
+
+  /// Lynx's `visibility`. Hiding takes the glass off screen at once, so the
+  /// transition needs to know before, while it can still see it.
+  override var isHidden: Bool {
+    willSet {
+      if #available(iOS 26.0, *), newValue, !isHidden {
+        GlassTransitions.shared.viewWillHide(self)
+      }
+    }
+    didSet {
+      if #available(iOS 26.0, *), !isHidden, oldValue {
+        GlassTransitions.shared.viewDidShow(self)
+      }
+    }
+  }
+}

package/templates/ios/App/GlassTransitions.swift

@@ -0,0 +1,408 @@
+import UIKit
+
+/// Animates Liquid Glass coming and going, as UIKit animates its own glass
+/// and SwiftUI's GlassEffectContainer does:
+///
+/// - In a `glass-container`, a shape that's added, or whose `visibility` turns
+///   visible, materializes: its effect animates from nothing to the glass, and
+///   its content fades in. One that's removed, or hidden, dissolves in place.
+/// - A shape that goes and one with the same `glass-effect-id` that comes, in
+///   the same update, are one piece of glass changing shape, as SwiftUI's
+///   `glassEffectID` pairs them. In the same container, the new one grows out
+///   of the old one's frame and corners while a copy of the old one flows into
+///   it and dissolves, and the container merges the two as they move. Across
+///   containers or windows, such as a button and the menu it opens in an
+///   overlay, the new one takes over where it is, from the old one's corners,
+///   with the old content fading out over it: a component that grows one out
+///   of the other moves it there itself, as the menus and popovers do.
+/// - In a container, a shape whose effect changes (its tint, its style, glass
+///   turned off) eases to the new one.
+///
+/// Lynx's blur-view sets its effect directly, outside any animation, so all
+/// of these happened in one frame. Only glass in a container that was already
+/// on screen materializes or dissolves: a screen that appears with its glass,
+/// such as a new page, draws it at once, as UIKit does. Under Reduce Motion
+/// nothing moves: a pair cross-fades in place.
+///
+/// Lynx tells the shell about each change while it applies an update (see
+/// BlurView), before it has laid out the elements it added, and removes an
+/// element by detaching it, so a removal and a move look alike until the
+/// update ends. The coordinator writes each change down and settles them all
+/// at the end of the run loop pass, before Core Animation commits it: what
+/// was on screen and isn't anymore went, what wasn't and is came, and an
+/// element that left and came back was moved.
+@available(iOS 26.0, *)
+final class GlassTransitions {
+  static let shared = GlassTransitions()
+
+  /// How long a shape takes to materialize or dissolve, and its content to
+  /// fade, in seconds: UIKit's own default animation length.
+  private static let fadeDuration: TimeInterval = 0.35
+  /// The spring a pair moves on: a little longer than a fade, with a touch of
+  /// bounce, as SwiftUI's default animation.
+  private static let morphDuration: TimeInterval = 0.5
+  private static let morphBounce: CGFloat = 0.15
+
+  /// What a view looked like when it went: enough to draw a copy of it (a
+  /// ghost) where it was, since Lynx has already taken the view itself away.
+  private struct Departure {
+    /// The container it was in, if it was in one that stays on screen.
+    weak var container: BlurEffectView?
+    let effect: UIVisualEffect
+    /// Its frame on the screen, for a ghost in its container.
+    let frame: CGRect
+    let cornerRadius: CGFloat
+    let cornerCurve: CALayerCornerCurve
+    let content: UIView?
+    let id: String?
+  }
+
+  /// A view that changed during this run loop pass.
+  private final class Change {
+    weak var view: BlurEffectView?
+    /// Whether it was drawing when the pass began.
+    let wasShown: Bool
+    /// Whether its last change took it off screen.
+    var leaving: Bool
+    /// Its look as it went, if it was glass that can still be seen going.
+    var departure: Departure?
+
+    init(view: BlurEffectView, wasShown: Bool, leaving: Bool) {
+      self.view = view
+      self.wasShown = wasShown
+      self.leaving = leaving
+    }
+  }
+
+  private var changes: [ObjectIdentifier: Change] = [:]
+  private var observer: CFRunLoopObserver?
+
+  // MARK: - Changes, as Lynx applies them
+
+  /// The view joins a window, leaves one (`to` is nil), or moves from one to
+  /// another, as an element a context menu lifts into its overlay does.
+  func view(_ view: BlurEffectView, willMoveFrom from: UIWindow?, to: UIWindow?) {
+    if to == nil {
+      note(view, wasShown: !view.isHidden, leaving: true)
+    } else {
+      note(view, wasShown: from != nil && !view.isHidden, leaving: false)
+    }
+  }
+
+  func viewWillHide(_ view: BlurEffectView) {
+    note(view, wasShown: view.window != nil, leaving: true)
+  }
+
+  func viewDidShow(_ view: BlurEffectView) {
+    note(view, wasShown: false, leaving: false)
+  }
+
+  /// Lynx gave the view a new effect: one in a container that's on screen,
+  /// and that isn't coming or going in this pass, eases from the old one.
+  func effectChanged(_ view: BlurEffectView, from old: UIVisualEffect?) {
+    guard changes[ObjectIdentifier(view)] == nil, !view.isHidden,
+      view.window != nil, let container = container(of: view), isSettled(container)
+    else { return }
+    let new = view.lynxEffect
+    UIView.performWithoutAnimation { view.draw(old) }
+    UIView.animate(
+      withDuration: Self.fadeDuration, delay: 0, options: [.allowUserInteraction, .curveEaseInOut]
+    ) {
+      view.draw(new)
+    }
+  }
+
+  /// Writes the change down. The first change in a pass says whether the
+  /// view was on screen when it began; a view that leaves is copied then,
+  /// while it still draws.
+  private func note(_ view: BlurEffectView, wasShown: Bool, leaving: Bool) {
+    let key = ObjectIdentifier(view)
+    let change: Change
+    if let noted = changes[key] {
+      change = noted
+      change.leaving = leaving
+    } else {
+      change = Change(view: view, wasShown: wasShown, leaving: leaving)
+      changes[key] = change
+    }
+    if leaving, change.wasShown, change.departure == nil {
+      change.departure = departure(of: view)
+    }
+    scheduleSettle()
+  }
+
+  /// The view's look as it goes, if anything could show it going: a
+  /// container that stays, or a shape with its id coming somewhere else.
+  private func departure(of view: BlurEffectView) -> Departure? {
+    guard view.lynxEffect is UIGlassEffect, let effect = view.effect,
+      let screen = view.window?.screen
+    else { return nil }
+    let container = container(of: view).flatMap { container in
+      isSettled(container) && changes[ObjectIdentifier(container)]?.leaving != true
+        ? container : nil
+    }
+    guard container != nil || view.glassEffectId != nil else { return nil }
+    return Departure(
+      container: container,
+      effect: effect,
+      frame: view.convert(view.bounds, to: screen.coordinateSpace),
+      // As last drawn: an overlay that hides with its glass lays it out at
+      // nothing in the same update, and Lynx has applied that by now.
+      cornerRadius: (view.layer.presentation() ?? view.layer).cornerRadius,
+      cornerCurve: view.layer.cornerCurve,
+      content: view.contentView.snapshotView(afterScreenUpdates: false),
+      id: view.glassEffectId)
+  }
+
+  // MARK: - The end of the pass
+
+  /// Settles the changes at the end of this run loop pass, after Lynx has
+  /// applied the whole update and before Core Animation commits it (its
+  /// observer has order 2,000,000), so the first frame drawn already shows
+  /// the transition's start.
+  private func scheduleSettle() {
+    guard observer == nil else { return }
+    let observer = CFRunLoopObserverCreateWithHandler(
+      kCFAllocatorDefault,
+      CFRunLoopActivity.beforeWaiting.rawValue | CFRunLoopActivity.exit.rawValue,
+      false, 1_000_000
+    ) { [weak self] _, _ in
+      self?.settle()
+    }
+    CFRunLoopAddObserver(CFRunLoopGetMain(), observer, .commonModes)
+    self.observer = observer
+  }
+
+  private func settle() {
+    if let observer { CFRunLoopObserverInvalidate(observer) }
+    observer = nil
+    let changes = Array(self.changes.values)
+    self.changes = [:]
+
+    var departures: [Departure] = []
+    var arrivals: [(view: BlurEffectView, container: BlurEffectView?)] = []
+    for change in changes {
+      let view = change.view
+      let shown = view.map { $0.window != nil && !$0.isHidden } ?? false
+      if change.wasShown, !shown, let departure = change.departure {
+        departures.append(departure)
+      } else if !change.wasShown, shown, let view, view.lynxEffect is UIGlassEffect {
+        // Glass in a container that was already on screen materializes, and
+        // glass with an id can take over from a shape that went.
+        let container = container(of: view).flatMap {
+          isSettled($0, in: changes) ? $0 : nil
+        }
+        if container != nil || view.glassEffectId != nil {
+          arrivals.append((view, container))
+        }
+      }
+    }
+
+    // Pair each shape that came with one that went under the same id, from
+    // its own container first.
+    for (view, container) in arrivals {
+      let index = view.glassEffectId.flatMap { id in
+        departures.firstIndex { $0.id == id && $0.container === container && container != nil }
+          ?? departures.firstIndex { $0.id == id }
+      }
+      if let index {
+        let departure = departures.remove(at: index)
+        if let container, departure.container === container {
+          morph(departure, into: view, in: container)
+        } else {
+          takeOver(from: departure, view)
+        }
+      } else if container != nil {
+        materialize(view)
+      }
+    }
+    for departure in departures where departure.container?.window != nil {
+      dissolve(departure)
+    }
+  }
+
+  // MARK: - Transitions
+
+  private func materialize(_ view: BlurEffectView) {
+    let effect = view.lynxEffect
+    UIView.performWithoutAnimation {
+      view.draw(nil)
+      view.contentView.alpha = 0
+    }
+    UIView.animate(
+      withDuration: Self.fadeDuration, delay: 0, options: [.allowUserInteraction, .curveEaseOut]
+    ) {
+      view.draw(effect)
+      view.contentView.alpha = 1
+    }
+  }
+
+  /// A copy of the shape that went, where it was, which dissolves.
+  private func dissolve(_ departure: Departure) {
+    guard let ghost = ghost(of: departure) else { return }
+    UIView.animate(withDuration: Self.fadeDuration, delay: 0, options: [.curveEaseIn]) {
+      ghost.effect = nil
+      ghost.contentView.alpha = 0
+    } completion: { _ in
+      ghost.removeFromSuperview()
+    }
+  }
+
+  /// `view` grows out of the shape that went, in the same container, and the
+  /// shape that went, as a ghost, flows into it while it dissolves. The
+  /// container draws the two as one glass shape that changes.
+  private func morph(_ departure: Departure, into view: BlurEffectView, in container: BlurEffectView) {
+    guard !UIAccessibility.isReduceMotionEnabled, let superview = view.superview,
+      let screen = view.window?.screen.coordinateSpace,
+      CATransform3DIsIdentity(view.layer.transform), let ghost = ghost(of: departure)
+    else {
+      // A cross-fade: no movement under Reduce Motion, nor for a view with a
+      // transform, whose frame isn't its own to animate.
+      materialize(view)
+      dissolve(departure)
+      return
+    }
+    let frame = view.frame
+    let cornerRadius = view.layer.cornerRadius
+    let target = superview.convert(frame, to: container.contentView)
+    UIView.performWithoutAnimation {
+      view.frame = screen.convert(departure.frame, to: superview)
+      view.layer.cornerRadius = departure.cornerRadius
+      view.contentView.alpha = 0
+    }
+    UIView.animate(
+      springDuration: Self.morphDuration, bounce: Self.morphBounce, initialSpringVelocity: 0,
+      delay: 0, options: [.allowUserInteraction]
+    ) {
+      view.frame = frame
+      view.layer.cornerRadius = cornerRadius
+      ghost.frame = target
+      ghost.layer.cornerRadius = cornerRadius
+    }
+    fadeContent(of: view)
+    // The old content goes quickly, and the old glass dissolves into the new
+    // as they move.
+    UIView.animate(withDuration: Self.fadeDuration / 2, delay: 0, options: [.curveEaseIn]) {
+      ghost.contentView.alpha = 0
+    }
+    UIView.animate(withDuration: Self.morphDuration, delay: 0, options: [.curveEaseInOut]) {
+      ghost.effect = nil
+    } completion: { _ in
+      ghost.removeFromSuperview()
+    }
+  }
+
+  /// `view` takes over from the shape that went somewhere else, another
+  /// container or window, where it is: it starts from that shape's corners,
+  /// and the old content fades out over it as its own fades in. The two
+  /// can't merge, and the old one's frame isn't known by then (an overlay
+  /// that hides with its glass lays it out at nothing in the same update), so
+  /// a component that grows one out of the other places it there itself, as
+  /// the menus and popovers do. The old glass isn't drawn again: the new
+  /// continues it.
+  private func takeOver(from departure: Departure, _ view: BlurEffectView) {
+    guard !UIAccessibility.isReduceMotionEnabled, let superview = view.superview else {
+      materialize(view)
+      return
+    }
+    let cornerRadius = view.layer.cornerRadius
+    // Corners rounder than half the shape draw as half of it, a capsule.
+    let startRadius = min(departure.cornerRadius, min(view.bounds.width, view.bounds.height) / 2)
+    // The old content goes over the new shape rather than in it: a visual
+    // effect view's content view is the only place for subviews, and the new
+    // content fading in there would take it along.
+    let content = departure.content
+    UIView.performWithoutAnimation {
+      view.layer.cornerRadius = startRadius
+      view.contentView.alpha = 0
+      if let content {
+        content.center = view.center
+        content.isUserInteractionEnabled = false
+        superview.insertSubview(content, aboveSubview: view)
+      }
+    }
+    UIView.animate(
+      springDuration: Self.morphDuration, bounce: Self.morphBounce, initialSpringVelocity: 0,
+      delay: 0, options: [.allowUserInteraction]
+    ) {
+      view.layer.cornerRadius = cornerRadius
+    }
+    // A cross-fade, at once: the shape stays where it is, so the new content
+    // has room from the start, and a menu closing into its button has faded
+    // its own already.
+    fadeContent(of: view, after: 0)
+    if let content {
+      UIView.animate(withDuration: Self.fadeDuration / 2, delay: 0, options: [.curveEaseIn]) {
+        content.alpha = 0
+      } completion: { _ in
+        content.removeFromSuperview()
+      }
+    }
+  }
+
+  /// The new shape's content fades in, by default once the old one's has
+  /// gone and the shape has grown some.
+  private func fadeContent(of view: BlurEffectView, after delay: TimeInterval = fadeDuration / 2) {
+    UIView.animate(
+      withDuration: Self.fadeDuration, delay: delay,
+      options: [.allowUserInteraction, .curveEaseOut]
+    ) {
+      view.contentView.alpha = 1
+    }
+  }
+
+  /// A glass shape like the one that went, with a picture of its content, in
+  /// its container. It sits above the container's own children, where Lynx's
+  /// index-based inserts don't see it, and it merges with them as any glass
+  /// in the container does.
+  private func ghost(of departure: Departure) -> UIVisualEffectView? {
+    guard let container = departure.container,
+      let screen = container.window?.screen.coordinateSpace
+    else { return nil }
+    let ghost = UIVisualEffectView(effect: departure.effect)
+    ghost.frame = screen.convert(departure.frame, to: container.contentView)
+    ghost.layer.cornerRadius = departure.cornerRadius
+    ghost.layer.cornerCurve = departure.cornerCurve
+    ghost.clipsToBounds = true
+    ghost.isUserInteractionEnabled = false
+    ghost.accessibilityElementsHidden = true
+    if let content = departure.content {
+      // Centered, so it stays where it was as the ghost grows around it.
+      content.center = CGPoint(x: ghost.bounds.midX, y: ghost.bounds.midY)
+      content.autoresizingMask = [
+        .flexibleLeftMargin, .flexibleRightMargin, .flexibleTopMargin, .flexibleBottomMargin,
+      ]
+      ghost.contentView.addSubview(content)
+    }
+    container.contentView.addSubview(ghost)
+    return ghost
+  }
+
+  // MARK: - Containers
+
+  /// The glass container `view` is in: the nearest blur-view around it, if
+  /// that's a container. Glass in other glass isn't in a container, and
+  /// neither is glass in a scroll view, whose cells come and go as it
+  /// scrolls.
+  private func container(of view: UIView) -> BlurEffectView? {
+    var ancestor = view.superview
+    while let current = ancestor, !(current is UIScrollView) {
+      if let blur = current as? BlurEffectView {
+        return blur.lynxEffect is UIGlassContainerEffect ? blur : nil
+      }
+      ancestor = current.superview
+    }
+    return nil
+  }
+
+  /// Whether `container` was on screen before this pass, rather than coming
+  /// with the glass in it.
+  private func isSettled(_ container: BlurEffectView) -> Bool {
+    container.window != nil && changes[ObjectIdentifier(container)].map { $0.wasShown } != false
+  }
+
+  private func isSettled(_ container: BlurEffectView, in changes: [Change]) -> Bool {
+    container.window != nil && !container.isHidden
+      && !changes.contains { $0.view === container && !$0.wasShown }
+  }
+}

package/templates/ios/App/LynxViewController.swift

@@ -13,8 +13,11 @@ final class LynxViewController: UIViewController {
 
     let fetcher = BundleResourceFetcher.shared
     let screenSize = UIScreen.main.bounds.size
+    // The shell's native modules, which the runtime's services call.
+    let config = LynxConfig(provider: LynxEnv.sharedInstance().config.templateProvider)
+    config.register(WebAuthModule.self)
     let lynxView = LynxView { builder in
-      builder.config = LynxConfig(provider: LynxEnv.sharedInstance().config.templateProvider)
+      builder.config = config
       builder.screenSize = screenSize
       builder.fontScale = 1.0
       builder.enableGenericResourceFetcher = .true