@ajuarezso/capacitor-liquid-glass 0.3.1 → 0.3.3

package/ios/Sources/LiquidGlassPlugin/LiquidGlassTabBarOverlay.swift

@@ -23,94 +23,142 @@ struct LiquidGlassTabItem {
 
 /// Visual style of the tab bar background.
 enum LiquidGlassTabBarStyle: String {
-    /// Translucent blurred — auto-applies Liquid Glass on iOS 26+ SDK.
+    /// Translucent blurred — adopta Liquid Glass automáticamente en iOS 26+
+    /// cuando el binario está linkeado contra el SDK iOS 26 (Xcode 26+).
     case `default`
-    /// Minimal blur (`systemUltraThinMaterial`) — more see-through than default.
+    /// Minimal blur (`systemUltraThinMaterial`) — más ver-through que default.
+    /// NOTA: este override CANCELA el adopt automático de Liquid Glass.
     case ultraThin
-    /// No background, no blur — content behind shows through 100%.
+    /// No background, no blur — content behind se ve completo.
+    /// NOTA: este override CANCELA el adopt automático de Liquid Glass.
     case transparent
-    /// REAL iOS 26 `UIGlassEffect` (Music + App Store material).
-    /// Fallback en iOS < 26 → `UIBlurEffect.systemThinMaterial`.
+    /// Liquid Glass nativo iOS 26 — alias funcional de `.default`. Se mantiene
+    /// como case separado para semántica explícita en el consumer ("este
+    /// layout pide específicamente Liquid Glass, no fallback genérico").
     case liquidGlass
 }
 
-/// A floating UITabBar overlay that adopts iOS 26 Liquid Glass automatically
-/// when the app is built against the iOS 26 SDK. On earlier iOS the bar falls
-/// back to the translucent blurred UITabBar appearance.
-final class LiquidGlassTabBarOverlay: NSObject {
+/// Tab bar flotante que adopta iOS 26 Liquid Glass automáticamente cuando la
+/// app se compila contra el SDK iOS 26.
+///
+/// **Decisión arquitectónica crítica**: este view controller se adjunta como
+/// CHILD del rootViewController del window, y el `UITabBar` vive como subview
+/// de `self.view`. Esto crea el view controller hierarchy completo que iOS 26
+/// necesita para aplicar el material Liquid Glass automáticamente al UITabBar.
+///
+/// Agregar el `UITabBar` directamente al `UIWindow` (sin view controller
+/// container) NO funciona — iOS 26 omite el adopt automático y la pill se
+/// renderiza con un material translúcido genérico que se ve opaco en
+/// comparación con el material real de Music / App Store.
+///
+/// Patrón inspirado en `stay-liquid` (alistairheath/stay-liquid GitHub).
+final class LiquidGlassTabBarOverlay: UIViewController {
 
     // Public callbacks
     var onTabSelected: ((Int, String) -> Void)?
     var onLayoutChanged: ((Double, Double) -> Void)?
 
     // Internal state
-    private weak var window: UIWindow?
-    private var tabBar: UITabBar?
+    private let tabBar = UITabBar()
     private var items: [LiquidGlassTabItem] = []
-    /// Overlay `UIVisualEffectView` que provee el material cuando el style es
-    /// `.liquidGlass`. Solo se monta cuando el estilo lo requiere, y se
-    /// destruye al cambiar a otro estilo. Vive como subview del window justo
-    /// DEBAJO del `tabBar` (que en este modo queda 100% transparente).
-    private var glassOverlayView: UIVisualEffectView?
+    private weak var hostVC: UIViewController?
+
+    /// Reemplaza `self.view` por una `PassThroughView` custom. El override
+    /// de `hitTest` vive en la `UIView` (no en el `UIViewController`), así
+    /// que necesitamos una subclase dedicada en lugar de override el VC.
+    override func loadView() {
+        let v = PassThroughView()
+        v.allowedHitView = tabBar
+        self.view = v
+    }
 
-    func attach(to window: UIWindow) {
-        if self.window === window, tabBar != nil { return }
-        self.window = window
+    override func viewDidLoad() {
+        super.viewDidLoad()
+        // Background transparente — solo el `UITabBar` (la pill flotante)
+        // ocupa espacio visible. El resto del área es transparente y la
+        // `PassThroughView` deja pasar los toques al webview por debajo.
+        view.backgroundColor = .clear
 
-        let tabBar = UITabBar()
         tabBar.translatesAutoresizingMaskIntoConstraints = false
         tabBar.delegate = self
 
         // Default appearance: triggers Liquid Glass automatically on iOS 26+.
-        // (Sobreescrito en `configure(...)` si el caller pidió otro estilo).
+        // Sobreescrito en `configure(...)` si el caller pidió otro estilo.
         applyAppearance(tabBar, style: .default)
 
-        window.addSubview(tabBar)
+        view.addSubview(tabBar)
 
         NSLayoutConstraint.activate([
-            tabBar.leadingAnchor.constraint(equalTo: window.leadingAnchor),
-            tabBar.trailingAnchor.constraint(equalTo: window.trailingAnchor),
-            tabBar.bottomAnchor.constraint(equalTo: window.bottomAnchor),
+            tabBar.leadingAnchor.constraint(equalTo: view.leadingAnchor),
+            tabBar.trailingAnchor.constraint(equalTo: view.trailingAnchor),
+            tabBar.bottomAnchor.constraint(equalTo: view.bottomAnchor),
         ])
+    }
+
+    /// View que cubre todo el rootVC pero solo absorbe taps que aterrizan
+    /// sobre `allowedHitView` (el `UITabBar` floating). El resto pasa al
+    /// webview de Capacitor por debajo. Sin esto, este overlay bloquearía
+    /// TODO el contenido de la app.
+    private final class PassThroughView: UIView {
+        weak var allowedHitView: UIView?
+
+        override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
+            let hit = super.hitTest(point, with: event)
+            guard let hit, let allowed = allowedHitView else { return nil }
+            if hit === allowed || hit.isDescendant(of: allowed) { return hit }
+            return nil
+        }
+    }
 
-        self.tabBar = tabBar
+    /// Adjunta este view controller como child del rootViewController del
+    /// window. Idempotente: si ya está adjuntado al mismo root, no-op.
+    func attach(to window: UIWindow) {
+        guard let rootVC = window.rootViewController else { return }
+        if self.parent === rootVC { return }
+        // Si está adjuntado a otro VC (cambio de root entre sesiones),
+        // detachar primero antes de re-adjuntar.
+        if self.parent != nil {
+            self.willMove(toParent: nil)
+            self.view.removeFromSuperview()
+            self.removeFromParent()
+        }
+
+        rootVC.addChild(self)
+        self.view.translatesAutoresizingMaskIntoConstraints = false
+        rootVC.view.addSubview(self.view)
+        NSLayoutConstraint.activate([
+            self.view.leadingAnchor.constraint(equalTo: rootVC.view.leadingAnchor),
+            self.view.trailingAnchor.constraint(equalTo: rootVC.view.trailingAnchor),
+            self.view.topAnchor.constraint(equalTo: rootVC.view.topAnchor),
+            self.view.bottomAnchor.constraint(equalTo: rootVC.view.bottomAnchor),
+        ])
+        self.didMove(toParent: rootVC)
+        self.hostVC = rootVC
         emitLayout()
     }
 
     /// Aplica el appearance correspondiente al estilo solicitado.
-    /// - `default`: Liquid Glass (iOS 26+) o blur translúcido como fallback.
+    /// - `default` / `liquidGlass`: Liquid Glass nativo iOS 26 (SDK 26 + runtime
+    ///   26). En iOS < 26 cae al blur translúcido legacy.
     /// - `ultraThin`: blur mínimo `systemUltraThinMaterial` — más ver-through.
     /// - `transparent`: sin background ni blur — content behind se ve completo.
-    /// - `liquidGlass`: tab bar 100% transparente + overlay `UIVisualEffectView`
-    ///    con `UIGlassEffect` (iOS 26+) o `systemThinMaterial` fallback.
     private func applyAppearance(_ tabBar: UITabBar, style: LiquidGlassTabBarStyle) {
         let appearance = UITabBarAppearance()
         switch style {
-        case .default:
+        case .default, .liquidGlass:
+            // En iOS 26+ con SDK 26, esto adopta Liquid Glass automáticamente.
+            // NO hacer override de `backgroundEffect` — eso anula el adopt y
+            // produce un material opaco genérico.
             appearance.configureWithDefaultBackground()
-            removeGlassOverlay()
         case .ultraThin:
             appearance.configureWithDefaultBackground()
             appearance.backgroundEffect = UIBlurEffect(style: .systemUltraThinMaterial)
             appearance.backgroundColor = UIColor.clear
-            removeGlassOverlay()
         case .transparent:
             appearance.configureWithTransparentBackground()
             appearance.backgroundEffect = nil
             appearance.backgroundColor = UIColor.clear
             appearance.shadowColor = UIColor.clear
-            removeGlassOverlay()
-        case .liquidGlass:
-            // Tab bar 100% transparente — el material lo aporta el overlay
-            // `UIVisualEffectView` con `UIGlassEffect` montado debajo del bar.
-            // Es el patrón canon de iOS 26 para aplicar Liquid Glass real a
-            // controles que no exponen API directa para asignarlo (UITabBar
-            // solo acepta `UIBlurEffect` en `backgroundEffect`).
-            appearance.configureWithTransparentBackground()
-            appearance.backgroundEffect = nil
-            appearance.backgroundColor = UIColor.clear
-            appearance.shadowColor = UIColor.clear
-            installGlassOverlay(behind: tabBar)
         }
         tabBar.standardAppearance = appearance
         if #available(iOS 15.0, *) {
@@ -118,53 +166,7 @@ final class LiquidGlassTabBarOverlay: NSObject {
         }
     }
 
-    /// Monta un `UIVisualEffectView` con `UIGlassEffect` (iOS 26+) o
-    /// `systemThinMaterial` como fallback, justo DEBAJO del `tabBar` en el
-    /// z-order del window. `tabBar` está en modo transparente, así que todo
-    /// el material visible viene del overlay.
-    ///
-    /// El overlay queda con `isUserInteractionEnabled = false` para no
-    /// interferir con los taps que el `tabBar` consume por encima.
-    private func installGlassOverlay(behind tabBar: UITabBar) {
-        guard let parent = tabBar.superview else { return }
-        // Idempotente: si ya existe overlay no recrearlo (evita flicker en
-        // re-configs por badge updates u otros cambios sin style change).
-        if glassOverlayView != nil { return }
-
-        let effect: UIVisualEffect
-        #if compiler(>=6.1)
-        if #available(iOS 26.0, *) {
-            effect = UIGlassEffect()
-        } else {
-            effect = UIBlurEffect(style: .systemThinMaterial)
-        }
-        #else
-        effect = UIBlurEffect(style: .systemThinMaterial)
-        #endif
-
-        let overlay = UIVisualEffectView(effect: effect)
-        overlay.translatesAutoresizingMaskIntoConstraints = false
-        overlay.isUserInteractionEnabled = false
-        parent.insertSubview(overlay, belowSubview: tabBar)
-
-        NSLayoutConstraint.activate([
-            overlay.leadingAnchor.constraint(equalTo: tabBar.leadingAnchor),
-            overlay.trailingAnchor.constraint(equalTo: tabBar.trailingAnchor),
-            overlay.topAnchor.constraint(equalTo: tabBar.topAnchor),
-            overlay.bottomAnchor.constraint(equalTo: tabBar.bottomAnchor),
-        ])
-
-        self.glassOverlayView = overlay
-    }
-
-    private func removeGlassOverlay() {
-        glassOverlayView?.removeFromSuperview()
-        glassOverlayView = nil
-    }
-
     func configure(items: [LiquidGlassTabItem], selectedIndex: Int, tintHex: String?, style: LiquidGlassTabBarStyle) {
-        guard let tabBar else { return }
-
         // Preserve selection across re-configs (badge changes, etc.)
         let previousSelectedId: String? = tabBar.selectedItem.flatMap { current in
             self.items.indices.contains(current.tag) ? self.items[current.tag].id : nil
@@ -189,8 +191,6 @@ final class LiquidGlassTabBarOverlay: NSObject {
 
         tabBar.setItems(uiItems, animated: false)
 
-        // Si el caller pidió explícitamente "no selection" (selectedIndex < 0),
-        // respetar eso y NO restaurar la selección previa — deja selectedItem = nil.
         if selectedIndex < 0 {
             tabBar.selectedItem = nil
         } else if let previousSelectedId, let restoreIdx = items.firstIndex(where: { $0.id == previousSelectedId }) {
@@ -206,7 +206,7 @@ final class LiquidGlassTabBarOverlay: NSObject {
     }
 
     func updateBadge(id: String, badge: String?) {
-        guard let tabBar, let tabBarItems = tabBar.items,
+        guard let tabBarItems = tabBar.items,
               let idx = items.firstIndex(where: { $0.id == id }),
               idx < tabBarItems.count else { return }
         let value = (badge?.isEmpty ?? true) ? nil : badge
@@ -214,20 +214,10 @@ final class LiquidGlassTabBarOverlay: NSObject {
     }
 
     func show() {
-        guard let tabBar = tabBar else { return }
-        // Si ya está visible, no hacer nada (evita flicker en re-show consecutivos)
         if !tabBar.isHidden && tabBar.alpha == 1.0 { emitLayout(); return }
-        // Reset estado pre-animación
         tabBar.isHidden = false
         tabBar.alpha = 0
         tabBar.transform = CGAffineTransform(translationX: 0, y: 20)
-        // Sincronizar el overlay glass (si está montado) con la misma curva,
-        // sino el material queda visible mientras el bar fade-out/in.
-        let overlay = glassOverlayView
-        overlay?.isHidden = false
-        overlay?.alpha = 0
-        overlay?.transform = CGAffineTransform(translationX: 0, y: 20)
-        // Fade-in + slide-up (curva native iOS para apariciones)
         UIView.animate(
             withDuration: 0.28,
             delay: 0,
@@ -235,10 +225,8 @@ final class LiquidGlassTabBarOverlay: NSObject {
             initialSpringVelocity: 0,
             options: [.curveEaseOut, .allowUserInteraction],
             animations: {
-                tabBar.alpha = 1
-                tabBar.transform = .identity
-                overlay?.alpha = 1
-                overlay?.transform = .identity
+                self.tabBar.alpha = 1
+                self.tabBar.transform = .identity
             },
             completion: nil
         )
@@ -246,32 +234,24 @@ final class LiquidGlassTabBarOverlay: NSObject {
     }
 
     func hide() {
-        guard let tabBar = tabBar else { return }
         if tabBar.isHidden { return }
-        // Fade-out + slide-down (más rápido que el show — el exit es snappy)
-        let overlay = glassOverlayView
         UIView.animate(
             withDuration: 0.18,
             delay: 0,
             options: [.curveEaseIn, .allowUserInteraction],
             animations: {
-                tabBar.alpha = 0
-                tabBar.transform = CGAffineTransform(translationX: 0, y: 20)
-                overlay?.alpha = 0
-                overlay?.transform = CGAffineTransform(translationX: 0, y: 20)
+                self.tabBar.alpha = 0
+                self.tabBar.transform = CGAffineTransform(translationX: 0, y: 20)
             },
             completion: { _ in
-                tabBar.isHidden = true
-                tabBar.transform = .identity
-                overlay?.isHidden = true
-                overlay?.transform = .identity
+                self.tabBar.isHidden = true
+                self.tabBar.transform = .identity
             }
         )
     }
 
     func setSelectedIndex(_ index: Int) {
-        guard let tabBar, let items = tabBar.items else { return }
-        // index < 0 → deseleccionar todos los tabs (selectedItem = nil)
+        guard let items = tabBar.items else { return }
         if index < 0 {
             tabBar.selectedItem = nil
             return
@@ -286,7 +266,6 @@ final class LiquidGlassTabBarOverlay: NSObject {
     }
 
     func currentLayout() -> (height: Double, bottomSafeArea: Double) {
-        guard let tabBar else { return (0, 0) }
         tabBar.layoutIfNeeded()
         let bottomInset = tabBar.safeAreaInsets.bottom
         return (Double(tabBar.frame.height), Double(bottomInset))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ajuarezso/capacitor-liquid-glass",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "description": "iOS 26 Liquid Glass native chrome (TabBar, NavigationBar, Alerts, Sheets) for Capacitor apps. Falls back gracefully on iOS < 26 and Android.",
   "main": "dist/plugin.cjs.js",
   "module": "dist/esm/index.js",