@donotdev/ui 0.0.2 → 0.0.3

package/dist/utils/useAuthSafe.d.ts

@@ -3,18 +3,31 @@
  * @description Provides auth functionality when @donotdev/auth is installed,
  * gracefully degrades to no-op when not installed.
  *
- * **How it works:**
- * 1. Import @donotdev/auth (Vite aliases to empty module if not installed)
- * 2. Check if useAuth export exists
- * 3. If exists → use real hook | If not → use stub
- *
- * **Why this pattern:**
- * - Vite aliases missing packages to empty modules at build time
- * - Decision is made ONCE at import time, never changes
- * - No conditional hook calls = no Rules of Hooks violations
- * - Real hook handles all runtime state (Firebase, consent) internally
- *
- * @version 0.0.1
+ * ## CRITICAL: DO NOT USE DYNAMIC IMPORTS
+ *
+ * This file MUST use sync `import * as authModule from '@donotdev/auth'`
+ * at module level. DO NOT refactor to use async `import('@donotdev/auth').then(...)`.
+ *
+ * ### Why sync import is required:
+ *
+ * 1. **Bundler aliasing**: Vite/webpack alias missing packages to empty modules
+ *    at BUILD TIME. The import completes immediately (no async).
+ *
+ * 2. **Rules of Hooks**: If we use async dynamic import:
+ *    - First render: `realUseAuth = null` → uses stub (0 hooks)
+ *    - Async completes: `realUseAuth = useAuth` → now has hooks
+ *    - Next render: React sees different hook count → CRASH
+ *
+ * 3. **Monorepo gotcha**: Dynamic imports resolve workspace packages even when
+ *    the consuming app doesn't have them as dependencies. This causes the
+ *    real hook to activate unexpectedly → Rules of Hooks violation.
+ *
+ * 4. **Decision is immutable**: With sync import, `authModule?.useAuth` is
+ *    evaluated ONCE at module load. It's either the real hook or undefined.
+ *    This never changes during the app lifecycle.
+ *
+ * @see docs/development/GRACEFUL_DEGRADATION.md
+ * @version 0.0.4
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */

package/dist/utils/useAuthSafe.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAuthSafe.d.ts","sourceRoot":"","sources":["../../src/utils/useAuthSafe.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAkB9C;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,MAAM,OAAO,EAAE,GAAG,EAAE,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,CAKvE;AAED;;GAEG;AACH,eAAO,MAAM,eAAe,SAAoC,CAAC"}
+{"version":3,"file":"useAuthSafe.d.ts","sourceRoot":"","sources":["../../src/utils/useAuthSafe.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AAEH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAoB9C;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,MAAM,OAAO,EAAE,GAAG,EAAE,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,CAKvE;AAED;;GAEG;AACH,eAAO,MAAM,eAAe,SAAoC,CAAC"}

package/dist/utils/useAuthSafe.js

@@ -1,7 +1,9 @@
 // packages/ui/src/utils/useAuthSafe.ts
 import { DEGRADED_AUTH_API } from '@donotdev/core';
+// Sync import - bundler aliases to empty module if not installed
+// Decision made ONCE at module load time, never changes
 import * as authModule from '@donotdev/auth';
-// Check if real hook exists (will be undefined if Vite aliased to empty module)
+// Extract useAuth if available (undefined if package not installed/aliased)
 const realUseAuth = authModule?.useAuth;
 /**
  * Stub that returns degraded auth values.

package/dist/utils/useAuthVisibility.d.ts

@@ -20,9 +20,9 @@ export interface AuthVisibilityState {
  * Hook to determine auth UI visibility and loading states
  *
  * **Visibility Rules:**
- * - Hide if `!initialized || !isAvailable` (not ready or not installed)
- * - Show with loading if `loading` during operations (user action in progress)
- * - Show normal UI when `initialized && isAvailable && !loading`
+ * - Hide if `status !== 'ready' || !isAvailable` (not ready or not installed)
+ * - Show with loading if `status === 'initializing'` during operations
+ * - Show normal UI when `status === 'ready' && isAvailable`
  *
  * @returns AuthVisibilityState with visibility flags
  *

package/dist/utils/useAuthVisibility.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAuthVisibility.d.ts","sourceRoot":"","sources":["../../src/utils/useAuthVisibility.ts"],"names":[],"mappings":"AAkBA,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,UAAU,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,eAAe,EAAE,OAAO,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,iBAAiB,IAAI,mBAAmB,CAkBvD"}
+{"version":3,"file":"useAuthVisibility.d.ts","sourceRoot":"","sources":["../../src/utils/useAuthVisibility.ts"],"names":[],"mappings":"AAoBA,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,UAAU,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,eAAe,EAAE,OAAO,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,iBAAiB,IAAI,mBAAmB,CAqBvD"}

package/dist/utils/useAuthVisibility.js

@@ -1,25 +1,26 @@
 // packages/ui/src/utils/useAuthVisibility.ts
 /**
  * @fileoverview useAuthVisibility Hook
- * @description Determines when to show/hide auth UI based on initialization and loading states
+ * @description Determines when to show/hide auth UI based on feature status
  *
  * This hook encapsulates the common pattern for auth UI visibility:
- * - Hide if not initialized or not available (not ready yet)
- * - Show with loading state during operations (user action in progress)
- * - Show normal UI when ready
+ * - Hide if status !== 'ready' or not available (not ready yet)
+ * - Show with loading state during initialization
+ * - Show normal UI when status === 'ready'
  *
- * @version 0.0.1
+ * @version 0.0.3
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */
+import { useMemo } from 'react';
 import { useAuthSafe } from './useAuthSafe';
 /**
  * Hook to determine auth UI visibility and loading states
  *
  * **Visibility Rules:**
- * - Hide if `!initialized || !isAvailable` (not ready or not installed)
- * - Show with loading if `loading` during operations (user action in progress)
- * - Show normal UI when `initialized && isAvailable && !loading`
+ * - Hide if `status !== 'ready' || !isAvailable` (not ready or not installed)
+ * - Show with loading if `status === 'initializing'` during operations
+ * - Show normal UI when `status === 'ready' && isAvailable`
  *
  * @returns AuthVisibilityState with visibility flags
  *
@@ -41,19 +42,22 @@ import { useAuthSafe } from './useAuthSafe';
  * ```
  */
 export function useAuthVisibility() {
-    const initialized = useAuthSafe('initialized');
-    const authStateChecked = useAuthSafe('authStateChecked');
-    const loading = useAuthSafe('loading');
+    // Read all values first - each triggers subscription
+    const status = useAuthSafe('status');
     const isAvailable = useAuthSafe('isAvailable');
     const user = useAuthSafe('user');
-    const shouldHide = !initialized || !isAvailable;
-    const isLoading = Boolean(loading);
-    const isReady = initialized && isAvailable && authStateChecked;
-    const isAuthenticated = Boolean(user);
-    return {
-        shouldHide,
-        isLoading,
-        isReady,
-        isAuthenticated,
-    };
+    // Derive all visibility state atomically from current values
+    // useMemo ensures consistent state within a single render
+    return useMemo(() => {
+        const shouldHide = status !== 'ready' || !isAvailable;
+        const isLoading = status === 'initializing';
+        const isReady = status === 'ready' && isAvailable;
+        const isAuthenticated = Boolean(user);
+        return {
+            shouldHide,
+            isLoading,
+            isReady,
+            isAuthenticated,
+        };
+    }, [status, isAvailable, user]);
 }

package/dist/utils/useBillingVisibility.d.ts

@@ -17,8 +17,8 @@ export interface BillingVisibilityState {
  *
  * **Visibility Rules:**
  * - Hide if `!isAvailable` (not installed/configured)
- * - Show with loading if `loading` during operations (user action in progress)
- * - Show normal UI when `isAvailable && !loading`
+ * - Show with loading if `status === 'initializing'` during operations
+ * - Show normal UI when `isAvailable && status === 'ready'`
  *
  * @returns BillingVisibilityState with visibility flags
  *

package/dist/utils/useBillingVisibility.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useBillingVisibility.d.ts","sourceRoot":"","sources":["../../src/utils/useBillingVisibility.ts"],"names":[],"mappings":"AAmBA,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,UAAU,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,oBAAoB,IAAI,sBAAsB,CA2B7D"}
+{"version":3,"file":"useBillingVisibility.d.ts","sourceRoot":"","sources":["../../src/utils/useBillingVisibility.ts"],"names":[],"mappings":"AAmBA,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,UAAU,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,oBAAoB,IAAI,sBAAsB,CA0B7D"}

package/dist/utils/useBillingVisibility.js

@@ -1,14 +1,14 @@
 // packages/ui/src/utils/useBillingVisibility.ts
 /**
  * @fileoverview useBillingVisibility Hook
- * @description Determines when to show/hide billing UI based on availability and loading states
+ * @description Determines when to show/hide billing UI based on feature status
  *
  * This hook encapsulates the common pattern for billing UI visibility:
  * - Hide if not available (not installed/configured)
- * - Show with loading state during operations
- * - Show normal UI when ready
+ * - Show with loading state during initialization
+ * - Show normal UI when status === 'ready'
  *
- * @version 0.0.1
+ * @version 0.0.3
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */
@@ -19,8 +19,8 @@ import { useStripeBillingSafe } from './useStripeBillingSafe';
  *
  * **Visibility Rules:**
  * - Hide if `!isAvailable` (not installed/configured)
- * - Show with loading if `loading` during operations (user action in progress)
- * - Show normal UI when `isAvailable && !loading`
+ * - Show with loading if `status === 'initializing'` during operations
+ * - Show normal UI when `isAvailable && status === 'ready'`
  *
  * @returns BillingVisibilityState with visibility flags
  *
@@ -42,16 +42,15 @@ import { useStripeBillingSafe } from './useStripeBillingSafe';
 export function useBillingVisibility() {
     // Get auth state for billing (required for isAvailable to work)
     const user = useAuthSafe('user');
-    const initialized = useAuthSafe('initialized');
-    const authStateChecked = useAuthSafe('authStateChecked');
-    const authState = { user, initialized, authStateChecked };
-    const loading = useStripeBillingSafe('loading', authState);
+    const status = useAuthSafe('status');
+    const authState = { user, status };
+    const billingStatus = useStripeBillingSafe('status', authState);
     const isAvailable = useStripeBillingSafe('isAvailable', authState);
     const shouldHide = !isAvailable;
-    const isLoading = Boolean(loading);
-    const isReady = isAvailable;
+    const isLoading = billingStatus === 'initializing';
+    const isReady = isAvailable && billingStatus === 'ready';
     console.log('[useBillingVisibility]', {
-        loading,
+        billingStatus,
         isAvailable,
         shouldHide,
         isLoading,

package/dist/utils/useCrudSafe.d.ts

@@ -17,7 +17,7 @@ interface UseCrudOptions<T> {
  * @example
  * ```typescript
  * const crud = useCrudSafe('users', { backend: 'firestore', schema: UserSchema });
- * const { data, loading, error, get, set } = crud;
+ * const { data, status, error, get, set } = crud;
  * ```
  */
 export declare function useCrudSafe<T = unknown>(collection: string, options?: UseCrudOptions<T>): CrudAPI<T>;

package/dist/utils/useCrudSafe.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCrudSafe.d.ts","sourceRoot":"","sources":["../../src/utils/useCrudSafe.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAK3D,KAAK,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC;AAE7C,UAAU,cAAc,CAAC,CAAC;IACxB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,MAAM,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;CACzB;AAeD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,WAAW,CAAC,CAAC,GAAG,OAAO,EACrC,UAAU,EAAE,MAAM,EAClB,OAAO,GAAE,cAAc,CAAC,CAAC,CAAM,GAC9B,OAAO,CAAC,CAAC,CAAC,CAKZ;AAED;;GAEG;AACH,eAAO,MAAM,eAAe,SAAoC,CAAC"}
+{"version":3,"file":"useCrudSafe.d.ts","sourceRoot":"","sources":["../../src/utils/useCrudSafe.ts"],"names":[],"mappings":"AAqCA,OAAO,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAK3D,KAAK,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC;AAE7C,UAAU,cAAc,CAAC,CAAC;IACxB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,MAAM,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;CACzB;AAeD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,WAAW,CAAC,CAAC,GAAG,OAAO,EACrC,UAAU,EAAE,MAAM,EAClB,OAAO,GAAE,cAAc,CAAC,CAAC,CAAM,GAC9B,OAAO,CAAC,CAAC,CAAC,CAKZ;AAED;;GAEG;AACH,eAAO,MAAM,eAAe,SAAoC,CAAC"}

package/dist/utils/useCrudSafe.js

@@ -4,18 +4,31 @@
  * @description Provides CRUD functionality when @donotdev/crud is installed,
  * gracefully degrades to no-op when not installed.
  *
- * **How it works:**
- * 1. Import @donotdev/crud (Vite aliases to empty module if not installed)
- * 2. Check if useCrud export exists
- * 3. If exists → use real hook | If not → use stub
- *
- * **Why this pattern:**
- * - Vite aliases missing packages to empty modules at build time
- * - Decision is made ONCE at import time, never changes
- * - No conditional hook calls = no Rules of Hooks violations
- * - Real hook handles all runtime state (Firebase, consent) internally
- *
- * @version 0.0.1
+ * ## CRITICAL: DO NOT USE DYNAMIC IMPORTS
+ *
+ * This file MUST use sync `import * as crudModule from '@donotdev/crud'`
+ * at module level. DO NOT refactor to use async `import('@donotdev/crud').then(...)`.
+ *
+ * ### Why sync import is required:
+ *
+ * 1. **Bundler aliasing**: Vite/webpack alias missing packages to empty modules
+ *    at BUILD TIME. The import completes immediately (no async).
+ *
+ * 2. **Rules of Hooks**: If we use async dynamic import:
+ *    - First render: `realUseCrud = null` → uses stub (0 hooks)
+ *    - Async completes: `realUseCrud = useCrud` → now has hooks
+ *    - Next render: React sees different hook count → CRASH
+ *
+ * 3. **Monorepo gotcha**: Dynamic imports resolve workspace packages even when
+ *    the consuming app doesn't have them as dependencies. This causes the
+ *    real hook to activate unexpectedly → Rules of Hooks violation.
+ *
+ * 4. **Decision is immutable**: With sync import, `crudModule?.useCrud`
+ *    is evaluated ONCE at module load. It's either the real hook or undefined.
+ *    This never changes during the app lifecycle.
+ *
+ * @see docs/development/GRACEFUL_DEGRADATION.md
+ * @version 0.0.4
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */
@@ -43,7 +56,7 @@ function useCrudStub() {
  * @example
  * ```typescript
  * const crud = useCrudSafe('users', { backend: 'firestore', schema: UserSchema });
- * const { data, loading, error, get, set } = crud;
+ * const { data, status, error, get, set } = crud;
  * ```
  */
 export function useCrudSafe(collection, options = {}) {

package/dist/utils/useOAuthSafe.d.ts

@@ -3,18 +3,31 @@
  * @description Provides OAuth functionality when @donotdev/oauth is installed,
  * gracefully degrades to no-op when not installed.
  *
- * **How it works:**
- * 1. Import @donotdev/oauth (Vite aliases to empty module if not installed)
- * 2. Check if useOAuth export exists
- * 3. If exists → use real hook | If not → use stub
- *
- * **Why this pattern:**
- * - Vite aliases missing packages to empty modules at build time
- * - Decision is made ONCE at import time, never changes
- * - No conditional hook calls = no Rules of Hooks violations
- * - Real hook handles all runtime state (credentials, consent) internally
- *
- * @version 0.0.1
+ * ## CRITICAL: DO NOT USE DYNAMIC IMPORTS
+ *
+ * This file MUST use sync `import * as oauthModule from '@donotdev/oauth'`
+ * at module level. DO NOT refactor to use async `import('@donotdev/oauth').then(...)`.
+ *
+ * ### Why sync import is required:
+ *
+ * 1. **Bundler aliasing**: Vite/webpack alias missing packages to empty modules
+ *    at BUILD TIME. The import completes immediately (no async).
+ *
+ * 2. **Rules of Hooks**: If we use async dynamic import:
+ *    - First render: `realUseOAuth = null` → uses stub (0 hooks)
+ *    - Async completes: `realUseOAuth = useOAuth` → now has hooks
+ *    - Next render: React sees different hook count → CRASH
+ *
+ * 3. **Monorepo gotcha**: Dynamic imports resolve workspace packages even when
+ *    the consuming app doesn't have them as dependencies. This causes the
+ *    real hook to activate unexpectedly → Rules of Hooks violation.
+ *
+ * 4. **Decision is immutable**: With sync import, `oauthModule?.useOAuth`
+ *    is evaluated ONCE at module load. It's either the real hook or undefined.
+ *    This never changes during the app lifecycle.
+ *
+ * @see docs/development/GRACEFUL_DEGRADATION.md
+ * @version 0.0.2
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */

package/dist/utils/useOAuthSafe.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useOAuthSafe.d.ts","sourceRoot":"","sources":["../../src/utils/useOAuthSafe.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAkB/C;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,MAAM,QAAQ,EAAE,GAAG,EAAE,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAK1E;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,SAAqC,CAAC"}
+{"version":3,"file":"useOAuthSafe.d.ts","sourceRoot":"","sources":["../../src/utils/useOAuthSafe.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AAEH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAkB/C;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,MAAM,QAAQ,EAAE,GAAG,EAAE,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAK1E;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,SAAqC,CAAC"}

package/dist/utils/useStripeBillingSafe.d.ts

@@ -3,18 +3,31 @@
  * @description Provides billing functionality when @donotdev/billing is installed,
  * gracefully degrades to no-op when not installed.
  *
- * **How it works:**
- * 1. Import @donotdev/billing (Vite aliases to empty module if not installed)
- * 2. Check if useStripeBilling export exists
- * 3. If exists → use real hook | If not → use stub
- *
- * **Why this pattern:**
- * - Vite aliases missing packages to empty modules at build time
- * - Decision is made ONCE at import time, never changes
- * - No conditional hook calls = no Rules of Hooks violations
- * - Real hook handles all runtime state (auth, consent) internally
- *
- * @version 0.0.1
+ * ## CRITICAL: DO NOT USE DYNAMIC IMPORTS
+ *
+ * This file MUST use sync `import * as billingModule from '@donotdev/billing'`
+ * at module level. DO NOT refactor to use async `import('@donotdev/billing').then(...)`.
+ *
+ * ### Why sync import is required:
+ *
+ * 1. **Bundler aliasing**: Vite/webpack alias missing packages to empty modules
+ *    at BUILD TIME. The import completes immediately (no async).
+ *
+ * 2. **Rules of Hooks**: If we use async dynamic import:
+ *    - First render: `realUseStripeBilling = null` → uses stub (0 hooks)
+ *    - Async completes: `realUseStripeBilling = useStripeBilling` → now has hooks
+ *    - Next render: React sees different hook count → CRASH
+ *
+ * 3. **Monorepo gotcha**: Dynamic imports resolve workspace packages even when
+ *    the consuming app doesn't have them as dependencies. This causes the
+ *    real hook to activate unexpectedly → Rules of Hooks violation.
+ *
+ * 4. **Decision is immutable**: With sync import, `billingModule?.useStripeBilling`
+ *    is evaluated ONCE at module load. It's either the real hook or undefined.
+ *    This never changes during the app lifecycle.
+ *
+ * @see docs/development/GRACEFUL_DEGRADATION.md
+ * @version 0.0.4
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */
@@ -28,23 +41,22 @@ export type { BillingAuthState } from '@donotdev/billing';
  * - If not installed → returns degraded API values
  *
  * **IMPORTANT:** For `isAvailable` to return `true`, you must pass `authState`.
- * Without auth state, billing will return `isAvailable: false` until auth resolves.
+ * Without auth state, billing will return `isAvailable: false` until auth status is `ready`.
  *
  * @param key - Property name to access from billing API
- * @param authState - Auth state from useAuthSafe (user, initialized, authStateChecked)
+ * @param authState - Auth state from useAuthSafe (user, status)
  * @returns The billing API value, or degraded value if billing unavailable
  *
  * @example
  * ```typescript
  * // Get auth state first
  * const user = useAuthSafe('user');
- * const initialized = useAuthSafe('initialized');
- * const authStateChecked = useAuthSafe('authStateChecked');
- * const authState = { user, initialized, authStateChecked };
+ * const status = useAuthSafe('status'); // 'initializing' | 'ready' | 'degraded' | 'error'
+ * const authState = { user, status };
  *
  * // Pass to billing
  * const checkout = useStripeBillingSafe('checkout', authState);
- * const loading = useStripeBillingSafe('loading', authState);
+ * const billingStatus = useStripeBillingSafe('status', authState);
  * const isAvailable = useStripeBillingSafe('isAvailable', authState);
  * ```
  */

package/dist/utils/useStripeBillingSafe.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useStripeBillingSafe.d.ts","sourceRoot":"","sources":["../../src/utils/useStripeBillingSafe.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAIjD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAG1D,YAAY,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAoB1D;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,MAAM,UAAU,EAC7D,GAAG,EAAE,CAAC,EACN,SAAS,CAAC,EAAE,gBAAgB,GAC3B,UAAU,CAAC,CAAC,CAAC,CAKf;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB,SAA6C,CAAC"}
+{"version":3,"file":"useStripeBillingSafe.d.ts","sourceRoot":"","sources":["../../src/utils/useStripeBillingSafe.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAIjD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAG1D,YAAY,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAoB1D;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,MAAM,UAAU,EAC7D,GAAG,EAAE,CAAC,EACN,SAAS,CAAC,EAAE,gBAAgB,GAC3B,UAAU,CAAC,CAAC,CAAC,CAKf;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB,SAA6C,CAAC"}

package/dist/utils/useStripeBillingSafe.js

@@ -17,23 +17,22 @@ function useStripeBillingStub(key) {
  * - If not installed → returns degraded API values
  *
  * **IMPORTANT:** For `isAvailable` to return `true`, you must pass `authState`.
- * Without auth state, billing will return `isAvailable: false` until auth resolves.
+ * Without auth state, billing will return `isAvailable: false` until auth status is `ready`.
  *
  * @param key - Property name to access from billing API
- * @param authState - Auth state from useAuthSafe (user, initialized, authStateChecked)
+ * @param authState - Auth state from useAuthSafe (user, status)
  * @returns The billing API value, or degraded value if billing unavailable
  *
  * @example
  * ```typescript
  * // Get auth state first
  * const user = useAuthSafe('user');
- * const initialized = useAuthSafe('initialized');
- * const authStateChecked = useAuthSafe('authStateChecked');
- * const authState = { user, initialized, authStateChecked };
+ * const status = useAuthSafe('status'); // 'initializing' | 'ready' | 'degraded' | 'error'
+ * const authState = { user, status };
  *
  * // Pass to billing
  * const checkout = useStripeBillingSafe('checkout', authState);
- * const loading = useStripeBillingSafe('loading', authState);
+ * const billingStatus = useStripeBillingSafe('status', authState);
  * const isAvailable = useStripeBillingSafe('isAvailable', authState);
  * ```
  */

package/dist/vite-routing/AppRoutes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppRoutes.d.ts","sourceRoot":"","sources":["../../src/vite-routing/AppRoutes.tsx"],"names":[],"mappings":"AAyDA,OAAO,EAAiB,KAAK,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAkFlE;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,MAAM,EAAE,KAAK,CAAC;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,SAAS,EAAE,GAAG,CAAC;QACf,IAAI,CAAC,EAAE,GAAG,CAAC;QACX,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;KACpB,CAAC,CAAC;CACJ;AAED;;GAEG;AACH,UAAU,sBAAsB;IAC9B,4CAA4C;IAC5C,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oCAAoC;IACpC,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,sBAAsB,yCAgE9D"}
+{"version":3,"file":"AppRoutes.d.ts","sourceRoot":"","sources":["../../src/vite-routing/AppRoutes.tsx"],"names":[],"mappings":"AAoDA,OAAO,EAAiB,KAAK,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAuFlE;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,MAAM,EAAE,KAAK,CAAC;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,SAAS,EAAE,GAAG,CAAC;QACf,IAAI,CAAC,EAAE,GAAG,CAAC;QACX,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;KACpB,CAAC,CAAC;CACJ;AAED;;GAEG;AACH,UAAU,sBAAsB;IAC9B,4CAA4C;IAC5C,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oCAAoC;IACpC,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,sBAAsB,yCA8D9D"}

package/dist/vite-routing/AppRoutes.js

@@ -32,7 +32,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * - **Suspense Boundaries**: Proper loading states prevent UI flicker
  * - **Native Scroll Restoration**: Built-in scroll position memory
  *
- * @version 0.0.2
+ * @version 0.0.3
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  * @license Commercial
@@ -46,7 +46,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * <RouterProvider router={router} />
  * ```
  */
-import { lazy, Suspense, } from 'react';
+import { lazy, Suspense } from 'react';
 import { createBrowserRouter } from 'react-router-dom';
 import {} from '@donotdev/core';
 import { RootLayout } from './RootLayout';
@@ -87,7 +87,7 @@ const LazyRoute = ({ component, path }) => {
         lazyComponentCache.set(path, lazy(component));
     }
     const Component = lazyComponentCache.get(path);
-    return _jsx(Component, {});
+    return (_jsx(Suspense, { fallback: _jsx(Loader, {}), children: _jsx(Component, {}) }));
 };
 /**
  * Parse auth configuration to PageAuth | false for AuthGuard
@@ -177,9 +177,9 @@ export function createAppRouter(options) {
             element: _jsx(RootLayout, { layout: layout }),
             children: [
                 {
-                    /** HomePage route - discovered from HomePage.tsx */
+                    /** HomePage route - lazy loaded, public (no AuthGuard) */
                     index: true,
-                    element: homePageRoute.parsedAuth === false ? (_jsx(LazyRoute, { component: homePageRoute.component, path: homePageRoute.path })) : (_jsx(AuthGuard, { auth: homePageRoute.parsedAuth, children: _jsx(LazyRoute, { component: homePageRoute.component, path: homePageRoute.path }) })),
+                    element: (_jsx(LazyRoute, { component: homePageRoute.component, path: homePageRoute.path })),
                 },
                 /** All other routes are discovered and rendered here */
                 ...routesWithParsedAuth

package/dist/vite-routing/RootLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RootLayout.d.ts","sourceRoot":"","sources":["../../src/vite-routing/RootLayout.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AA8JnD;;GAEG;AACH,UAAU,oBAAoB;IAC5B,2BAA2B;IAC3B,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,UAAU,CAAC,EAAE,MAAM,EAAE,EAAE,oBAAoB,2CAmC1D"}
+{"version":3,"file":"RootLayout.d.ts","sourceRoot":"","sources":["../../src/vite-routing/RootLayout.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAuLnD;;GAEG;AACH,UAAU,oBAAoB;IAC5B,2BAA2B;IAC3B,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,UAAU,CAAC,EAAE,MAAM,EAAE,EAAE,oBAAoB,2CA6B1D"}

package/dist/vite-routing/RootLayout.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 // packages/ui/src/vite-routing/RootLayout.tsx
 /**
  * @fileoverview RootLayout - Root route layout component
@@ -18,11 +18,8 @@ import { Outlet, useLocation } from 'react-router-dom';
 import { globalEmitter, isClient } from '@donotdev/core';
 import Loader from '../components/common/Loader';
 import { DnDevLayout } from '../internal/layout/DnDevLayout';
-// Lazy load providers and components
-const QueryProviders = lazy(() => import('@donotdev/core').then((m) => ({ default: m.QueryProviders })));
-const UIProviders = lazy(() => import('../internal/providers/UIProviders').then((m) => ({
-    default: m.UIProviders,
-})));
+import { UIProviders } from '../internal/providers/UIProviders';
+// Only lazy load non-critical components (not in render path)
 const AutoMetaTags = lazy(() => import('../internal/layout/components/AutoMetaTags').then((m) => ({
     default: m.default,
 })));
@@ -145,6 +142,36 @@ function FrameworkReadySignal({ children }) {
     }, []);
     return _jsx("div", { ref: frameworkRef, children: children });
 }
+/**
+ * RouteReadySignal - Signals when route content is painted
+ *
+ * Emits 'DNDEV_ROUTE_READY' event when route content (inside Suspense) is painted.
+ * Used in coordination with FrameworkReadySignal to time shell loader removal.
+ *
+ * Shell loader removed only when BOTH framework AND route are ready,
+ * preventing "late arrival" of route content after Header/Footer paint.
+ *
+ * @version 0.0.1
+ * @since 0.0.1
+ * @author AMBROISE PARK Consulting
+ */
+function RouteReadySignal({ children }) {
+    const hasSignaled = useRef(false);
+    useLayoutEffect(() => {
+        if (!isClient() || hasSignaled.current)
+            return;
+        // Wait for two animation frames to ensure paint completion
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+                if (hasSignaled.current)
+                    return;
+                hasSignaled.current = true;
+                globalEmitter.emit('DNDEV_ROUTE_READY');
+            });
+        });
+    }, []);
+    return _jsx(_Fragment, { children: children });
+}
 /**
  * RootLayout - Root route layout component
  *
@@ -179,5 +206,5 @@ function FrameworkReadySignal({ children }) {
  * @author AMBROISE PARK Consulting
  */
 export function RootLayout({ layout }) {
-    return (_jsx(QueryProviders, { children: _jsxs(UIProviders, { children: [_jsx(AutoMetaTags, {}), _jsxs(FrameworkReadySignal, { children: [_jsx(DnDevLayout, { layout: layout, children: _jsx(Suspense, { fallback: _jsx(Loader, {}), children: _jsx(Outlet, {}) }) }), _jsx(CustomScrollRestoration, {}), _jsx(ConsentBanner, {}), _jsx(PWAUpdateNotification, {}), _jsx(LicenseWatermark, {})] })] }) }));
+    return (_jsxs(UIProviders, { children: [_jsx(Suspense, { fallback: null, children: _jsx(AutoMetaTags, {}) }), _jsxs(FrameworkReadySignal, { children: [_jsx(DnDevLayout, { layout: layout, children: _jsx(RouteReadySignal, { children: _jsx(Outlet, {}) }) }), _jsx(CustomScrollRestoration, {}), _jsxs(Suspense, { fallback: null, children: [_jsx(ConsentBanner, {}), _jsx(PWAUpdateNotification, {}), _jsx(LicenseWatermark, {})] })] })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@donotdev/ui",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "type": "module",
   "private": false,
   "license": "SEE LICENSE IN LICENSE.md",
@@ -53,14 +53,14 @@
     "react-hook-form": "^7.68.0"
   },
   "peerDependencies": {
-    "@donotdev/adv-comps": "0.0.2",
-    "@donotdev/auth": "0.0.2",
-    "@donotdev/billing": "0.0.2",
-    "@donotdev/components": "0.0.2",
-    "@donotdev/core": "0.0.2",
-    "@donotdev/crud": "0.0.2",
-    "@donotdev/firebase": "0.0.2",
-    "@donotdev/oauth": "0.0.2",
+    "@donotdev/adv-comps": "0.0.3",
+    "@donotdev/auth": "0.0.3",
+    "@donotdev/billing": "0.0.3",
+    "@donotdev/components": "0.0.3",
+    "@donotdev/core": "0.0.3",
+    "@donotdev/crud": "0.0.3",
+    "@donotdev/firebase": "0.0.3",
+    "@donotdev/oauth": "0.0.3",
     "firebase": "^12.5.0",
     "lucide-react": "^0.562.0",
     "react": "^19.2.3",

package/dist/internal/devtools/components/AuthTab.d.ts

@@ -1,2 +0,0 @@
-export declare const AuthTab: () => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=AuthTab.d.ts.map

package/dist/internal/devtools/components/AuthTab.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AuthTab.d.ts","sourceRoot":"","sources":["../../../../src/internal/devtools/components/AuthTab.tsx"],"names":[],"mappings":"AAiCA,eAAO,MAAM,OAAO,+CAyNnB,CAAC"}