web-manager 4.1.2 → 4.1.4

package/CLAUDE.md

@@ -181,7 +181,7 @@ document.body.addEventListener('click', (e) => {
 - **loadScript Options**: src, async, defer, crossorigin, integrity, timeout, retries
 
 ### Utilities (`utilities.js`)
-- **Exports**: `clipboardCopy()`, `escapeHTML()`, `showNotification()`, `getPlatform()`, `getBrowser()`, `getRuntime()`, `isMobile()`, `getDeviceType()`, `getContext()`
+- **Exports**: `clipboardCopy()`, `escapeHTML()`, `showNotification()`, `getPlatform()`, `getBrowser()`, `getRuntime()`, `isMobile()`, `getDevice()`, `getContext()`
 
 ## Build System
 

package/README.md

@@ -108,7 +108,7 @@ Web Manager is designed to work in multiple environments:
 - **Firebase v12 Integration**: Modern Firebase Auth, Firestore, and Cloud Messaging
 - **Data Binding System**: Reactive DOM updates with `data-wm-bind` attributes
 - **Storage API**: Enhanced localStorage/sessionStorage with path-based access and JSON serialization
-- **Utilities**: `clipboardCopy()`, `escapeHTML()`, `getContext()`, `showNotification()`, `getPlatform()`, `getBrowser()`, `getRuntime()`, `isMobile()`, `getDeviceType()`
+- **Utilities**: `clipboardCopy()`, `escapeHTML()`, `getContext()`, `showNotification()`, `getPlatform()`, `getBrowser()`, `getRuntime()`, `isMobile()`, `getDevice()`
 - **DOM Utilities**: Dynamic script loading with retry/timeout support
 - **Service Worker Management**: Registration, messaging, and state tracking
 - **Push Notifications**: Firebase Cloud Messaging with auto-subscription
@@ -354,6 +354,35 @@ unsubscribe();
 Add these classes to elements for automatic auth functionality:
 - `.auth-signout-btn` - Sign out button (shows confirmation dialog)
 
+**⚠️ Auth State Timing**:
+
+On fresh page loads, Firebase Auth needs time to restore the user session from IndexedDB/localStorage. Methods like `auth.isAuthenticated()`, `auth.getUser()`, and `auth.getIdToken()` may return `null`/`false` if called before auth state is determined.
+
+**Problem:**
+```javascript
+// ❌ May fail on page load - auth state not yet determined
+await Manager.dom().ready();
+const token = await auth.getIdToken(); // Could throw if currentUser is null
+```
+
+**Solution:** Use `auth.listen({ once: true })` to wait for auth state:
+```javascript
+// ✅ Wait for auth state to be determined first
+auth.listen({ once: true }, async (result) => {
+  if (result.user) {
+    const token = await auth.getIdToken(); // Safe - user is authenticated
+  }
+});
+```
+
+**When this matters:**
+- Pages making authenticated API calls immediately on load
+- OAuth callback pages
+- Deep links requiring authentication
+
+**When NOT needed:**
+- User-triggered actions (button clicks) - auth state is always determined by then
+
 ### Data Binding System
 
 Reactive DOM updates with `data-wm-bind` attributes:
@@ -538,7 +567,7 @@ await notifications.syncSubscription();
 
 **Features**:
 - Stores subscription in localStorage and Firestore
-- Tracks device context (platform, runtime, deviceType)
+- Tracks device context (platform, runtime, device)
 - Auto-requests after configurable delay post-click
 - Syncs with user authentication state
 
@@ -663,7 +692,7 @@ import {
   getBrowser,
   getRuntime,
   isMobile,
-  getDeviceType,
+  getDevice,
   getContext
 } from 'web-manager/modules/utilities';
 // Or: const utils = Manager.utilities();
@@ -691,13 +720,13 @@ getBrowser(); // 'chrome', 'firefox', 'safari', 'edge', 'opera', 'brave', null
 getRuntime(); // 'web', 'browser-extension'
 
 // Device detection
-isMobile();     // true/false
-getDeviceType(); // 'mobile' (<768px), 'tablet' (768-1199px), 'desktop' (>=1200px)
+isMobile();   // true/false
+getDevice();  // 'mobile' (<768px), 'tablet' (768-1199px), 'desktop' (>=1200px)
 
 // Full context
 getContext();
 // {
-//   client: { language, mobile, deviceType, platform, browser, vendor, runtime, userAgent, url },
+//   client: { language, mobile, device, platform, browser, vendor, runtime, userAgent, url },
 //   geolocation: { ip, country, region, city, latitude, longitude }
 // }
 ```

package/dist/index.js

@@ -367,8 +367,8 @@ class Manager {
     // Set runtime - web, browser-extension, electron, node
     $html.dataset.runtime = this._utilities.getRuntime();
 
-    // Set device type - mobile, tablet, desktop
-    $html.dataset.device = this._utilities.getDeviceType();
+    // Set device - mobile, tablet, desktop
+    $html.dataset.device = this._utilities.getDevice();
   }
 
   async _initializeFirebase() {

package/dist/modules/utilities.js

@@ -81,8 +81,8 @@ class Utilities {
     const timeout = options.timeout !== undefined ? options.timeout : 5000;
 
     const $notification = document.createElement('div');
-    $notification.className = `alert alert-${type} alert-dismissible fade show position-fixed top-0 start-50 translate-middle-x mt-5`;
-    $notification.style.zIndex = '9999';
+    $notification.className = `alert alert-${type} alert-dismissible fade show position-fixed`;
+    $notification.style.cssText = 'z-index: 9999; top: 1rem; left: 50%; transform: translateX(-50%);';
     $notification.innerHTML = `
       ${text}
       <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
@@ -137,22 +137,27 @@ class Utilities {
     if (/edg/i.test(ua)) {
       return 'edge';
     }
+
     // Opera before Chrome (Opera includes "Chrome" in UA)
     if (/opera|opr/i.test(ua)) {
       return 'opera';
     }
+
     // Brave before Chrome (Brave includes "Chrome" in UA)
     if (navigator.brave || /brave/i.test(ua)) {
       return 'brave';
     }
+
     // Chrome (including Chromium-based browsers)
     if (/chrome|chromium|crios/i.test(ua)) {
       return 'chrome';
     }
+
     // Firefox
     if (/firefox|fxios/i.test(ua)) {
       return 'firefox';
     }
+
     // Safari last (most browsers include "Safari" in UA)
     if (/safari/i.test(ua)) {
       return 'safari';
@@ -202,8 +207,8 @@ class Utilities {
     }
   }
 
-  // Get device type based on screen width
-  getDeviceType() {
+  // Get device based on screen width
+  getDevice() {
     const width = window.innerWidth;
 
     // Mobile: < 768px (Bootstrap's md breakpoint)
@@ -227,7 +232,7 @@ class Utilities {
       client: {
         language: navigator.language,
         mobile: this.isMobile(),
-        deviceType: this.getDeviceType(),
+        device: this.getDevice(),
         platform: this.getPlatform(),
         browser: this.getBrowser(),
         vendor: navigator.vendor,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-manager",
-  "version": "4.1.2",
+  "version": "4.1.4",
   "description": "Easily access important variables such as the query string, current domain, and current page in a single object.",
   "main": "dist/index.js",
   "module": "src/index.js",