@djangocfg/ui-nextjs 2.1.45 → 2.1.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-nextjs",
-  "version": "2.1.45",
+  "version": "2.1.46",
   "description": "Next.js UI component library with Radix UI primitives, Tailwind CSS styling, charts, and form components",
   "keywords": [
     "ui-components",
@@ -58,8 +58,8 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.45",
-    "@djangocfg/ui-core": "^2.1.45",
+    "@djangocfg/api": "^2.1.46",
+    "@djangocfg/ui-core": "^2.1.46",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",
     "consola": "^3.4.2",
@@ -106,7 +106,7 @@
     "vidstack": "next"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^2.1.45",
+    "@djangocfg/typescript-config": "^2.1.46",
     "@types/node": "^24.7.2",
     "eslint": "^9.37.0",
     "tailwindcss-animate": "1.0.7",

package/src/hooks/useBrowserDetect.ts

@@ -26,6 +26,23 @@ export interface BrowserInfo {
   isSamsungBrowser: boolean;
   isUCBrowser: boolean;
 
+  // Additional browsers
+  isComet: boolean; // Perplexity's Comet browser (Chromium-based, supports push)
+  isOperaMini: boolean; // Opera Mini (does NOT support push notifications)
+  isIE: boolean; // Internet Explorer (does NOT support push notifications)
+
+  // In-App Browsers (WebViews) - typically do NOT support push notifications
+  isFacebookInApp: boolean; // Facebook's in-app browser
+  isInstagramInApp: boolean; // Instagram's in-app browser
+  isTikTokInApp: boolean; // TikTok's in-app browser
+  isSnapchatInApp: boolean; // Snapchat's in-app browser
+  isWeChatInApp: boolean; // WeChat's in-app browser
+  isThreadsInApp: boolean; // Threads' in-app browser
+  isLinkedInInApp: boolean; // LinkedIn's in-app browser (uses Chrome WebView - supports push on Android)
+  isTwitterInApp: boolean; // Twitter/X's in-app browser (uses Chrome WebView - supports push on Android)
+  isInAppBrowser: boolean; // Any in-app browser detected
+  isWebView: boolean; // Generic WebView detection
+
   // Browser name
   browserName: string;
 
@@ -34,6 +51,25 @@ export interface BrowserInfo {
   isBlink: boolean; // Chromium's engine
   isGecko: boolean; // Firefox's engine
 
+  // Push notification support
+  /**
+   * Whether the browser supports Web Push Notifications.
+   * Returns false for browsers known to NOT support push:
+   * - Opera Mini (no service worker support)
+   * - Internet Explorer (deprecated, no Push API)
+   * - UC Browser (unreliable push support)
+   * - In-App browsers (Facebook, Instagram, TikTok, Snapchat, etc.)
+   * - Generic WebViews (except Twitter/LinkedIn on Android which use Chrome WebView)
+   *
+   * Note: Comet (Perplexity) is Chromium-based and DOES support push notifications.
+   * Note: This is a browser-level check. For full push support,
+   * also check 'serviceWorker' in navigator && 'PushManager' in window
+   */
+  supportsPushNotifications: boolean;
+
+  // iOS specific
+  isIOSBrowser: boolean; // Any browser on iOS (all use WebKit, limited push support)
+
   // For debugging
   userAgent: string;
 }
@@ -70,10 +106,25 @@ export function useBrowserDetect(): BrowserInfo {
         isYandex: false,
         isSamsungBrowser: false,
         isUCBrowser: false,
+        isComet: false,
+        isOperaMini: false,
+        isIE: false,
+        isFacebookInApp: false,
+        isInstagramInApp: false,
+        isTikTokInApp: false,
+        isSnapchatInApp: false,
+        isWeChatInApp: false,
+        isThreadsInApp: false,
+        isLinkedInInApp: false,
+        isTwitterInApp: false,
+        isInAppBrowser: false,
+        isWebView: false,
         browserName: 'unknown',
         isWebKit: false,
         isBlink: false,
         isGecko: false,
+        supportsPushNotifications: false,
+        isIOSBrowser: false,
         userAgent: '',
       };
     }
@@ -103,8 +154,93 @@ export function useBrowserDetect(): BrowserInfo {
     // UC Browser
     const isUCBrowser = ua.includes('ucbrowser') || ua.includes('uc browser');
 
+    // Comet Browser (Perplexity's AI browser, Chromium-based)
+    // May have 'comet' in UA or can be detected by specific markers
+    const isComet = ua.includes('comet') || ua.includes('perplexity');
+
+    // Opera Mini (does NOT support service workers or push)
+    const isOperaMini = ua.includes('opera mini') || ua.includes('opios');
+
+    // Internet Explorer (deprecated, no Push API support)
+    const isIE = ua.includes('msie') || ua.includes('trident/');
+
+    // ============================================================================
+    // In-App Browsers Detection (WebViews)
+    // These browsers typically do NOT support web push notifications
+    // ============================================================================
+
+    // Facebook In-App Browser
+    // UA contains: FBAN (Facebook App Name) or FBAV (Facebook App Version)
+    const isFacebookInApp = ua.includes('fban') || ua.includes('fbav') || ua.includes('fb_iab');
+
+    // Instagram In-App Browser
+    // UA contains: Instagram
+    const isInstagramInApp = ua.includes('instagram');
+
+    // TikTok In-App Browser
+    // UA contains: TikTok or BytedanceWebview or ByteLocale
+    const isTikTokInApp = ua.includes('tiktok') || ua.includes('bytedancewebview') || ua.includes('bytelocale');
+
+    // Snapchat In-App Browser
+    // UA contains: Snapchat
+    const isSnapchatInApp = ua.includes('snapchat');
+
+    // WeChat In-App Browser
+    // UA contains: MicroMessenger
+    const isWeChatInApp = ua.includes('micromessenger');
+
+    // Threads In-App Browser (Meta's app)
+    // UA contains: Threads or uses same markers as Instagram
+    const isThreadsInApp = ua.includes('barcelona'); // Threads codename is Barcelona
+
+    // LinkedIn In-App Browser
+    // UA contains: LinkedIn - NOTE: Uses Chrome WebView on Android, may support push
+    const isLinkedInInApp = ua.includes('linkedinapp');
+
+    // Twitter/X In-App Browser
+    // UA contains: Twitter - NOTE: Uses Chrome WebView on Android, may support push
+    const isTwitterInApp = ua.includes('twitter');
+
+    // Pinterest In-App Browser
+    const isPinterestInApp = ua.includes('pinterest');
+
+    // Telegram In-App Browser
+    const isTelegramInApp = ua.includes('telegram');
+
+    // Line In-App Browser
+    const isLineInApp = ua.includes('line/');
+
+    // Kakao In-App Browser (Korea)
+    const isKakaoInApp = ua.includes('kakaotalk');
+
+    // Generic WebView detection
+    // Android WebView: contains 'wv' in UA or specific WebView markers
+    // iOS WebView: WKWebView doesn't have distinct UA, but some markers exist
+    const isWebView = ua.includes('wv)') || // Android WebView marker
+                     ua.includes('webview') ||
+                     ua.includes('; wv') ||
+                     (ua.includes('iphone') && !ua.includes('safari')) || // iOS WebView (no Safari)
+                     (ua.includes('ipad') && !ua.includes('safari'));
+
+    // Aggregate: Any in-app browser
+    const isInAppBrowser = isFacebookInApp ||
+                          isInstagramInApp ||
+                          isTikTokInApp ||
+                          isSnapchatInApp ||
+                          isWeChatInApp ||
+                          isThreadsInApp ||
+                          isLinkedInInApp ||
+                          isTwitterInApp ||
+                          isPinterestInApp ||
+                          isTelegramInApp ||
+                          isLineInApp ||
+                          isKakaoInApp;
+
+    // iOS detection (all iOS browsers use WebKit, limited push support)
+    const isIOSBrowser = ua.includes('iphone') || ua.includes('ipad') || ua.includes('ipod');
+
     // Opera (modern Chromium-based)
-    const isOpera = ua.includes('opr/') || ua.includes('opera');
+    const isOpera = (ua.includes('opr/') || ua.includes('opera')) && !isOperaMini;
 
     // Chrome (not Edge, not other Chromium browsers)
     const isChrome = ua.includes('chrome') &&
@@ -114,7 +250,8 @@ export function useBrowserDetect(): BrowserInfo {
                     !isSamsungBrowser &&
                     !isVivaldi &&
                     !isArc &&
-                    !isBrave;
+                    !isBrave &&
+                    !isComet;
 
     // Firefox
     const isFirefox = ua.includes('firefox') && !ua.includes('seamonkey');
@@ -138,7 +275,8 @@ export function useBrowserDetect(): BrowserInfo {
                       isVivaldi ||
                       isArc ||
                       isBrave ||
-                      isUCBrowser;
+                      isUCBrowser ||
+                      isComet;
 
     // Engine detection
     const isWebKit = !isChromium && isSafari;
@@ -146,8 +284,24 @@ export function useBrowserDetect(): BrowserInfo {
     const isGecko = isFirefox;
 
     // Determine browser name
+    // In-app browsers take priority in naming
     let browserName = 'unknown';
-    if (isBrave) browserName = 'Brave';
+    if (isFacebookInApp) browserName = 'Facebook In-App';
+    else if (isInstagramInApp) browserName = 'Instagram In-App';
+    else if (isTikTokInApp) browserName = 'TikTok In-App';
+    else if (isSnapchatInApp) browserName = 'Snapchat In-App';
+    else if (isWeChatInApp) browserName = 'WeChat In-App';
+    else if (isThreadsInApp) browserName = 'Threads In-App';
+    else if (isLinkedInInApp) browserName = 'LinkedIn In-App';
+    else if (isTwitterInApp) browserName = 'Twitter In-App';
+    else if (isPinterestInApp) browserName = 'Pinterest In-App';
+    else if (isTelegramInApp) browserName = 'Telegram In-App';
+    else if (isLineInApp) browserName = 'Line In-App';
+    else if (isKakaoInApp) browserName = 'KakaoTalk In-App';
+    else if (isComet) browserName = 'Comet';
+    else if (isOperaMini) browserName = 'Opera Mini';
+    else if (isIE) browserName = 'Internet Explorer';
+    else if (isBrave) browserName = 'Brave';
     else if (isArc) browserName = 'Arc';
     else if (isVivaldi) browserName = 'Vivaldi';
     else if (isYandex) browserName = 'Yandex';
@@ -158,6 +312,39 @@ export function useBrowserDetect(): BrowserInfo {
     else if (isChrome) browserName = 'Chrome';
     else if (isSafari) browserName = 'Safari';
     else if (isFirefox) browserName = 'Firefox';
+    else if (isWebView) browserName = 'WebView';
+
+    // Determine push notification support
+    // These browsers are known to NOT support Web Push:
+    // - Opera Mini: no service worker support
+    // - Internet Explorer: deprecated, no Push API
+    // - UC Browser: unreliable push support on many versions
+    // - Most In-App browsers (Facebook, Instagram, TikTok, etc.)
+    // - Generic WebViews (except Twitter/LinkedIn on Android)
+    //
+    // Note: Comet (Perplexity) is Chromium-based and DOES support push notifications.
+    // Note: Twitter and LinkedIn on Android use Chrome WebView and DO support push.
+    // However, we err on the side of caution and disable for all in-app browsers.
+    const browserBlocksPush = isOperaMini ||
+                             isIE ||
+                             isUCBrowser ||
+                             isFacebookInApp ||
+                             isInstagramInApp ||
+                             isTikTokInApp ||
+                             isSnapchatInApp ||
+                             isWeChatInApp ||
+                             isThreadsInApp ||
+                             isPinterestInApp ||
+                             isTelegramInApp ||
+                             isLineInApp ||
+                             isKakaoInApp ||
+                             isWebView;
+
+    // Twitter and LinkedIn on Android use Chrome WebView - they actually support push
+    // But only on Android, not iOS
+    const twitterLinkedInAndroid = (isTwitterInApp || isLinkedInInApp) && !isIOSBrowser;
+
+    const supportsPushNotifications = !browserBlocksPush || twitterLinkedInAndroid;
 
     return {
       isChrome,
@@ -172,10 +359,25 @@ export function useBrowserDetect(): BrowserInfo {
       isYandex,
       isSamsungBrowser,
       isUCBrowser,
+      isComet,
+      isOperaMini,
+      isIE,
+      isFacebookInApp,
+      isInstagramInApp,
+      isTikTokInApp,
+      isSnapchatInApp,
+      isWeChatInApp,
+      isThreadsInApp,
+      isLinkedInInApp,
+      isTwitterInApp,
+      isInAppBrowser,
+      isWebView,
       browserName,
       isWebKit,
       isBlink,
       isGecko,
+      supportsPushNotifications,
+      isIOSBrowser,
       userAgent: window.navigator.userAgent,
     };
   }, []);