@quiltt/react 3.9.3 → 3.9.5

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @quiltt/react
 
+## 3.9.5
+
+### Patch Changes
+
+- [#325](https://github.com/quiltt/quiltt-js/pull/325) [`62b7323`](https://github.com/quiltt/quiltt-js/commit/62b732371a8d57242170e0ae838baa4ca8e78059) Thanks [@zubairaziz](https://github.com/zubairaziz)! - Improve useSession and useStorage hooks
+
+- Updated dependencies [[`62b7323`](https://github.com/quiltt/quiltt-js/commit/62b732371a8d57242170e0ae838baa4ca8e78059)]:
+  - @quiltt/core@3.9.5
+
+## 3.9.4
+
+### Patch Changes
+
+- [#321](https://github.com/quiltt/quiltt-js/pull/321) [`642ec0f`](https://github.com/quiltt/quiltt-js/commit/642ec0f34f2506672993b82785b5b5ddb5c69069) Thanks [@zubairaziz](https://github.com/zubairaziz)! - Bugfix: iOS WebView header drag behavior and scrolling
+
+- Updated dependencies [[`642ec0f`](https://github.com/quiltt/quiltt-js/commit/642ec0f34f2506672993b82785b5b5ddb5c69069)]:
+  - @quiltt/core@3.9.4
+
 ## 3.9.3
 
 ### Patch Changes

package/dist/{QuilttAuthProvider-client-D6Iok6TS.js → QuilttAuthProvider-client-CER-TOln.js}

@@ -2,11 +2,11 @@
 import { useCallback, useRef, useMemo, useEffect } from 'react';
 import { JsonWebTokenParse, QuilttClient, InMemoryCache } from '@quiltt/core';
 import '@apollo/client/react/hooks/useApolloClient.js';
-import './useQuilttSettings-client-DU_Qfc8X.js';
-import './useSession-client-CG5lGS9F.js';
+import './QuilttSettings-client-BK-0SQME.js';
+import './useSession-client-CCAvnROP.js';
 import { jsx } from 'react/jsx-runtime';
 import { ApolloProvider } from '@apollo/client/react/context/ApolloProvider.js';
-import { u as useQuilttSession } from './useQuilttSession-client-KZRjdl5I.js';
+import { u as useQuilttSession } from './useQuilttSession-client-D2mjVT4S.js';
 
 const useIdentifySession = (auth, setSession)=>{
     const identifySession = useCallback(async (payload, callbacks)=>{

package/dist/QuilttSettings-client-BK-0SQME.js

@@ -0,0 +1,6 @@
+'use client';
+import { createContext } from 'react';
+
+const QuilttSettings = createContext({});
+
+export { QuilttSettings as Q };

package/dist/{QuilttSettingsProvider-client-EfyHgg4i.js → QuilttSettingsProvider-client-Va7uJ_dQ.js}

@@ -1,10 +1,7 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
-import '@quiltt/core';
-import '@apollo/client/react/hooks/useApolloClient.js';
-import { Q as QuilttSettings } from './useQuilttSettings-client-DU_Qfc8X.js';
-import './useSession-client-CG5lGS9F.js';
+import { Q as QuilttSettings } from './QuilttSettings-client-BK-0SQME.js';
 
 const QuilttSettingsProvider = ({ clientId, children })=>{
     const [_clientId] = useState(clientId);

package/dist/index.d.ts

@@ -1,6 +1,5 @@
 import { Maybe, QuilttJWT, UsernamePayload, UnprocessableData, AuthAPI, PasscodePayload, ConnectorSDKConnectorOptions, ConnectorSDKCallbacks } from '@quiltt/core';
 export * from '@quiltt/core';
-import * as react from 'react';
 import { RefObject, useLayoutEffect, Dispatch, SetStateAction, FC, PropsWithChildren, JSX, ComponentType, ElementType, MouseEvent } from 'react';
 import { useApolloClient } from '@apollo/client/react/hooks/useApolloClient.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
@@ -18,18 +17,17 @@ declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
 
 type SetSession = Dispatch<SetStateAction<Maybe<string> | undefined>>;
 /**
- * useSession uses useStorage to support a global singleton style of access. When
- * updated, all components, and windows should also invalidate.
+ * Custom hook to manage JWT session state with automatic expiration handling.
+ * Provides global singleton access to the session across components and windows.
  *
  * TODO: Support Rotation before Expiry
  *
- * Dataflow can come from two directions:
- *  1. Login - Bottom Up
- *    This happens on login, when a token is passed up through the setSession
- *    callback. From here it needs to be stored, and shared for usage.
- *  2. Refresh - Top Down
- *    This happens when a page is reloaded or a person returns, and everything is
- *    reinitialized.
+ * Handles two types of data flow:
+ * 1. Bottom-up (Login): Token passed through setSession callback
+ * 2. Top-down (Refresh): State reinitialized on page reload
+ *
+ * @param storageKey - Key used for storing session in useStorage (defaults to 'session')
+ * @returns [session, setSession] - Current session state and setter function
  */
 declare const useSession: (storageKey?: string) => [Maybe<QuilttJWT> | undefined, SetSession];
 
@@ -78,12 +76,8 @@ type UseQuilttSession = (environmentId?: string) => {
 };
 declare const useQuilttSession: UseQuilttSession;
 
-type QuilttSettingsContext = {
-    clientId?: string | undefined;
-};
-declare const QuilttSettings: react.Context<QuilttSettingsContext>;
 declare const useQuilttSettings: () => {
-    clientId?: string | undefined;
+    clientId?: string;
 };
 
 /**
@@ -159,4 +153,4 @@ type QuilttContainerProps<T extends ElementType> = PropsWithChildren<{
  */
 declare const QuilttContainer: <T extends ElementType = "div">({ as, connectorId, connectionId, onEvent, onLoad, onExit, onExitSuccess, onExitAbort, onExitError, children, ...props }: QuilttContainerProps<T> & PropsOf<T>) => react_jsx_runtime.JSX.Element;
 
-export { type AuthenticateSession, type IdentifySession, type ImportSession, QuilttAuthProvider, QuilttButton, QuilttContainer, QuilttProvider, QuilttSettings, QuilttSettingsProvider, type RevokeSession, type SetSession, type UseQuilttSession, useAuthenticateSession, useEventListener, useIdentifySession, useImportSession, useIsomorphicLayoutEffect, useQuilttClient, useQuilttConnector, useQuilttSession, useQuilttSettings, useRevokeSession, useSession, useStorage };
+export { type AuthenticateSession, type IdentifySession, type ImportSession, QuilttAuthProvider, QuilttButton, QuilttContainer, QuilttProvider, QuilttSettingsProvider, type RevokeSession, type SetSession, type UseQuilttSession, useAuthenticateSession, useEventListener, useIdentifySession, useImportSession, useIsomorphicLayoutEffect, useQuilttClient, useQuilttConnector, useQuilttSession, useQuilttSettings, useRevokeSession, useSession, useStorage };

package/dist/index.js

@@ -1,16 +1,16 @@
 export * from '@quiltt/core';
 export { u as useEventListener } from './useEventListener-client-DVM5xwKY.js';
 export { u as useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect-client-DeTHOKz1.js';
-import { Q as QuilttAuthProvider } from './QuilttAuthProvider-client-D6Iok6TS.js';
-export { b as useAuthenticateSession, a as useIdentifySession, u as useImportSession, c as useRevokeSession } from './QuilttAuthProvider-client-D6Iok6TS.js';
+import { Q as QuilttAuthProvider } from './QuilttAuthProvider-client-CER-TOln.js';
+export { b as useAuthenticateSession, a as useIdentifySession, u as useImportSession, c as useRevokeSession } from './QuilttAuthProvider-client-CER-TOln.js';
 export { u as useQuilttClient } from './useQuilttClient-client-CAAUait1.js';
-import { u as useQuilttConnector } from './useQuilttConnector-client-720xcXap.js';
-export { u as useQuilttSession } from './useQuilttSession-client-KZRjdl5I.js';
-export { Q as QuilttSettings, u as useQuilttSettings } from './useQuilttSettings-client-DU_Qfc8X.js';
-export { u as useSession } from './useSession-client-CG5lGS9F.js';
-export { u as useStorage } from './useStorage-client-B3keU-oI.js';
+import { u as useQuilttConnector } from './useQuilttConnector-client-CwD2X-Ms.js';
+export { u as useQuilttSession } from './useQuilttSession-client-D2mjVT4S.js';
+export { u as useQuilttSettings } from './useQuilttSettings-client-BOCBjFXe.js';
+export { u as useSession } from './useSession-client-CCAvnROP.js';
+export { u as useStorage } from './useStorage-client-DHcq3Kuh.js';
 import { jsx } from 'react/jsx-runtime';
-import { Q as QuilttSettingsProvider } from './QuilttSettingsProvider-client-EfyHgg4i.js';
+import { Q as QuilttSettingsProvider } from './QuilttSettingsProvider-client-Va7uJ_dQ.js';
 
 const QuilttProvider = ({ clientId, token, children })=>{
     return /*#__PURE__*/ jsx(QuilttSettingsProvider, {

package/dist/{useQuilttConnector-client-720xcXap.js → useQuilttConnector-client-CwD2X-Ms.js}

@@ -1,10 +1,10 @@
 'use client';
 import { useState, useEffect, useCallback } from 'react';
 import { cdnBase } from '@quiltt/core';
-import { u as useQuilttSession } from './useQuilttSession-client-KZRjdl5I.js';
+import { u as useQuilttSession } from './useQuilttSession-client-D2mjVT4S.js';
 import { u as useScript } from './useScript-client-CWRBlZBC.js';
 
-var version = "3.9.3";
+var version = "3.9.5";
 
 const useQuilttConnector = (connectorId, options)=>{
     const status = useScript(`${cdnBase}/v1/connector.js?agent=react-${version}`);

package/dist/{useQuilttSession-client-KZRjdl5I.js → useQuilttSession-client-D2mjVT4S.js}

@@ -1,9 +1,9 @@
 'use client';
 import { useCallback } from 'react';
 import { AuthAPI } from '@quiltt/core';
-import { u as useImportSession, a as useIdentifySession, b as useAuthenticateSession, c as useRevokeSession } from './QuilttAuthProvider-client-D6Iok6TS.js';
-import { u as useQuilttSettings } from './useQuilttSettings-client-DU_Qfc8X.js';
-import { u as useSession } from './useSession-client-CG5lGS9F.js';
+import { u as useImportSession, a as useIdentifySession, b as useAuthenticateSession, c as useRevokeSession } from './QuilttAuthProvider-client-CER-TOln.js';
+import { u as useQuilttSettings } from './useQuilttSettings-client-BOCBjFXe.js';
+import { u as useSession } from './useSession-client-CCAvnROP.js';
 
 const useQuilttSession = (environmentId)=>{
     const { clientId } = useQuilttSettings();

package/dist/useQuilttSettings-client-BOCBjFXe.js

@@ -0,0 +1,10 @@
+'use client';
+import { useContext } from 'react';
+import { Q as QuilttSettings } from './QuilttSettings-client-BK-0SQME.js';
+
+const useQuilttSettings = ()=>{
+    const settings = useContext(QuilttSettings);
+    return settings;
+};
+
+export { useQuilttSettings as u };

package/dist/useSession-client-CCAvnROP.js

@@ -0,0 +1,69 @@
+'use client';
+import { useMemo, useEffect, useCallback } from 'react';
+import { Timeoutable, JsonWebTokenParse } from '@quiltt/core';
+import { u as useStorage } from './useStorage-client-DHcq3Kuh.js';
+
+// Initialize JWT parser with our specific claims type
+const parse = JsonWebTokenParse;
+// Global timer to manage token expiration across all hook instances
+const sessionTimer = new Timeoutable();
+/**
+ * Custom hook to manage JWT session state with automatic expiration handling.
+ * Provides global singleton access to the session across components and windows.
+ *
+ * TODO: Support Rotation before Expiry
+ *
+ * Handles two types of data flow:
+ * 1. Bottom-up (Login): Token passed through setSession callback
+ * 2. Top-down (Refresh): State reinitialized on page reload
+ *
+ * @param storageKey - Key used for storing session in useStorage (defaults to 'session')
+ * @returns [session, setSession] - Current session state and setter function
+ */ const useSession = (storageKey = 'session')=>{
+    const [token, setToken] = useStorage(storageKey);
+    // Parse token into session data, updates when token changes
+    const session = useMemo(()=>parse(token), [
+        token
+    ]);
+    // Handle session expiration
+    useEffect(()=>{
+        if (!session) return;
+        const expirationMS = session.claims.exp * 1000;
+        const expire = ()=>setToken(null);
+        // Clear immediately if already expired
+        if (Date.now() >= expirationMS) {
+            expire();
+        } else {
+            // Set timer to clear session at expiration time
+            sessionTimer.set(expire, expirationMS - Date.now());
+            return ()=>sessionTimer.clear(expire);
+        }
+    }, [
+        session,
+        setToken
+    ]);
+    /**
+   * Validates and updates the session token.
+   * - Handles both direct values and updater functions
+   * - Validates new tokens before setting them
+   * - Prevents unnecessary updates for same token value
+   * - Allows clearing the session with null/undefined
+   */ const setSession = useCallback((nextState)=>{
+        const newState = nextState instanceof Function ? nextState(token) : nextState;
+        // Only update if:
+        // 1. The token has actually changed AND
+        // 2. Either the new state is falsy (clearing session) OR it's a valid token
+        if (token !== newState && (!newState || parse(newState))) {
+            setToken(newState);
+        }
+    }, [
+        token,
+        setToken
+    ]);
+    return [
+        session,
+        setSession
+    ];
+};
+
+export { useSession as u };

package/dist/{useStorage-client-B3keU-oI.js → useStorage-client-DHcq3Kuh.js}

@@ -21,9 +21,8 @@ import { GlobalStorage } from '@quiltt/core';
  * @returns {Array} [storage, setStorage]
  */ const useStorage = (key, initialState)=>{
     const getStorage = useCallback(()=>{
-        let state;
-        // biome-ignore lint/suspicious/noAssignInExpressions: <explanation>
-        if ((state = GlobalStorage.get(key)) !== undefined) {
+        const state = GlobalStorage.get(key);
+        if (state !== undefined) {
             return state;
         }
         return initialState;
@@ -36,23 +35,33 @@ import { GlobalStorage } from '@quiltt/core';
         const newState = nextState instanceof Function ? nextState(hookState) : nextState;
         if (hookState !== newState) {
             GlobalStorage.set(key, newState);
+            // Immediately update hook state as well
+            setHookState(newState);
         }
     }, [
         key,
         hookState
     ]);
-    /**
-   * The empty dependency array ensures that the effect runs only once when the component mounts
-   * and doesn't re-run unnecessarily on subsequent renders because it doesn't depend on any
-   * props or state variables that could change during the component's lifetime.
-   *
-   * Use an empty dependency array to avoid unnecessary re-renders.
-   */ // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
     useEffect(()=>{
-        GlobalStorage.subscribe(key, setHookState);
-        setHookState(getStorage());
+        // Subscribe to storage changes and ensure state is synchronized
+        // Reruns when key or state changes to maintain consistency
+        GlobalStorage.subscribe(key, (newValue)=>{
+            // Only update if the value is different from current state
+            if (newValue !== hookState) {
+                setHookState(newValue);
+            }
+        });
+        // Initial sync
+        const initialValue = getStorage();
+        if (initialValue !== hookState) {
+            setHookState(initialValue);
+        }
         return ()=>GlobalStorage.unsubscribe(key, setHookState);
-    }, []);
+    }, [
+        key,
+        hookState,
+        getStorage
+    ]);
     return [
         hookState,
         setStorage

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quiltt/react",
-  "version": "3.9.3",
+  "version": "3.9.5",
   "description": "React Components and Hooks for Quiltt Connector",
   "keywords": [
     "quiltt",
@@ -35,14 +35,14 @@
   "main": "dist/index.js",
   "dependencies": {
     "@apollo/client": "^3.12.4",
-    "@quiltt/core": "3.9.3"
+    "@quiltt/core": "3.9.5"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
-    "@types/node": "22.10.5",
+    "@types/node": "22.13.2",
     "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1",
-    "bunchee": "6.2.0",
+    "bunchee": "6.3.4",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "rimraf": "6.0.1",

package/src/components/QuilttButton.tsx

@@ -2,8 +2,8 @@ import type { ElementType, MouseEvent, PropsWithChildren } from 'react'
 
 import type { ConnectorSDKCallbacks } from '@quiltt/core'
 
-import { useQuilttConnector } from '../hooks/useQuilttConnector'
-import type { PropsOf } from '../types'
+import { useQuilttConnector } from '@/hooks/useQuilttConnector'
+import type { PropsOf } from '@/types'
 
 // Base button props without callback-specific properties
 type BaseQuilttButtonProps<T extends ElementType> = {

package/src/components/QuilttContainer.tsx

@@ -2,8 +2,8 @@ import type { ElementType, PropsWithChildren } from 'react'
 
 import type { ConnectorSDKCallbacks } from '@quiltt/core'
 
-import { useQuilttConnector } from '../hooks/useQuilttConnector'
-import type { PropsOf } from '../types'
+import { useQuilttConnector } from '@/hooks/useQuilttConnector'
+import type { PropsOf } from '@/types'
 
 type QuilttContainerProps<T extends ElementType> = PropsWithChildren<
   {

package/src/contexts/QuilttSettings.ts

@@ -0,0 +1,9 @@
+'use client'
+
+import { createContext } from 'react'
+
+type QuilttSettingsContext = {
+  clientId?: string
+}
+
+export const QuilttSettings = createContext<QuilttSettingsContext>({})

package/src/contexts/index.ts

@@ -0,0 +1 @@
+export * from './QuilttSettings'

package/src/hooks/session/useAuthenticateSession.ts

@@ -8,7 +8,7 @@ import type {
   UnprocessableResponse,
 } from '@quiltt/core'
 
-import type { SetSession } from '..'
+import type { SetSession } from '@/hooks/useSession'
 
 type AuthenticateSessionCallbacks = {
   onSuccess?: () => unknown

package/src/hooks/session/useIdentifySession.ts

@@ -8,7 +8,7 @@ import type {
   UsernamePayload,
 } from '@quiltt/core'
 
-import type { SetSession } from '../useSession'
+import type { SetSession } from '@/hooks/useSession'
 
 type IdentifySessionCallbacks = {
   onSuccess?: () => unknown

package/src/hooks/session/useImportSession.ts

@@ -4,7 +4,7 @@ import type { AuthAPI, Maybe, QuilttJWT } from '@quiltt/core'
 import { JsonWebTokenParse } from '@quiltt/core'
 import type { PrivateClaims } from '@quiltt/core'
 
-import type { SetSession } from '../useSession'
+import type { SetSession } from '@/hooks/useSession'
 
 export type ImportSession = (token: string) => Promise<boolean>
 

package/src/hooks/session/useRevokeSession.ts

@@ -2,7 +2,7 @@ import { useCallback } from 'react'
 
 import type { AuthAPI, Maybe, QuilttJWT } from '@quiltt/core'
 
-import type { SetSession } from '../useSession'
+import type { SetSession } from '@/hooks/useSession'
 
 export type RevokeSession = () => Promise<void>
 

package/src/hooks/useQuilttConnector.ts

@@ -3,16 +3,15 @@
 import { useCallback, useEffect, useState } from 'react'
 
 import { cdnBase } from '@quiltt/core'
-
 import type {
   ConnectorSDK,
   ConnectorSDKConnector,
   ConnectorSDKConnectorOptions,
 } from '@quiltt/core'
 
-import { version } from '../version'
-import { useQuilttSession } from './useQuilttSession'
-import { useScript } from './useScript'
+import { useQuilttSession } from '@/hooks/useQuilttSession'
+import { useScript } from '@/hooks/useScript'
+import { version } from '@/version'
 
 declare const Quiltt: ConnectorSDK
 

package/src/hooks/useQuilttSettings.ts

@@ -1,17 +1,13 @@
 'use client'
 
-import { createContext, useContext } from 'react'
+import { useContext } from 'react'
 
-type QuilttSettingsContext = {
-  clientId?: string | undefined
-}
-
-export const QuilttSettings = createContext<QuilttSettingsContext>({})
+import { QuilttSettings } from '@/contexts/QuilttSettings'
 
 export const useQuilttSettings = () => {
   const settings = useContext(QuilttSettings)
 
-  return { ...settings }
+  return settings
 }
 
 export default useQuilttSettings

package/src/hooks/useSession.ts

@@ -10,52 +10,62 @@ import { useStorage } from './useStorage'
 
 export type SetSession = Dispatch<SetStateAction<Maybe<string> | undefined>>
 
+// Initialize JWT parser with our specific claims type
 const parse = JsonWebTokenParse<PrivateClaims>
 
-/**
- * Singleton timeout, allows hooks to come and go, while ensuring that there is
- * one notification being sent, preventing race conditions.
- */
+// Global timer to manage token expiration across all hook instances
 const sessionTimer = new Timeoutable()
 
 /**
- * useSession uses useStorage to support a global singleton style of access. When
- * updated, all components, and windows should also invalidate.
+ * Custom hook to manage JWT session state with automatic expiration handling.
+ * Provides global singleton access to the session across components and windows.
  *
  * TODO: Support Rotation before Expiry
  *
- * Dataflow can come from two directions:
- *  1. Login - Bottom Up
- *    This happens on login, when a token is passed up through the setSession
- *    callback. From here it needs to be stored, and shared for usage.
- *  2. Refresh - Top Down
- *    This happens when a page is reloaded or a person returns, and everything is
- *    reinitialized.
+ * Handles two types of data flow:
+ * 1. Bottom-up (Login): Token passed through setSession callback
+ * 2. Top-down (Refresh): State reinitialized on page reload
+ *
+ * @param storageKey - Key used for storing session in useStorage (defaults to 'session')
+ * @returns [session, setSession] - Current session state and setter function
  */
 export const useSession = (storageKey = 'session'): [Maybe<QuilttJWT> | undefined, SetSession] => {
   const [token, setToken] = useStorage<string>(storageKey)
+
+  // Parse token into session data, updates when token changes
   const session = useMemo(() => parse(token), [token])
 
-  // Clear session if/when it expires
+  // Handle session expiration
   useEffect(() => {
     if (!session) return
 
     const expirationMS = session.claims.exp * 1000
     const expire = () => setToken(null)
 
+    // Clear immediately if already expired
     if (Date.now() >= expirationMS) {
       expire()
     } else {
+      // Set timer to clear session at expiration time
       sessionTimer.set(expire, expirationMS - Date.now())
       return () => sessionTimer.clear(expire)
     }
   }, [session, setToken])
 
-  // Bubbles up from Login
+  /**
+   * Validates and updates the session token.
+   * - Handles both direct values and updater functions
+   * - Validates new tokens before setting them
+   * - Prevents unnecessary updates for same token value
+   * - Allows clearing the session with null/undefined
+   */
   const setSession = useCallback(
     (nextState: Maybe<string> | SetStateAction<Maybe<string> | undefined> | undefined) => {
       const newState = nextState instanceof Function ? nextState(token) : nextState
 
+      // Only update if:
+      // 1. The token has actually changed AND
+      // 2. Either the new state is falsy (clearing session) OR it's a valid token
       if (token !== newState && (!newState || parse(newState))) {
         setToken(newState)
       }

package/src/hooks/useStorage.ts

@@ -29,10 +29,8 @@ export const useStorage = <T>(
   initialState?: Maybe<T>
 ): [Maybe<T> | undefined, Dispatch<SetStateAction<Maybe<T> | undefined>>] => {
   const getStorage = useCallback(() => {
-    let state: Maybe<T>
-
-    // biome-ignore lint/suspicious/noAssignInExpressions: <explanation>
-    if ((state = GlobalStorage.get(key)) !== undefined) {
+    const state = GlobalStorage.get(key)
+    if (state !== undefined) {
       return state
     }
 
@@ -44,29 +42,33 @@ export const useStorage = <T>(
   const setStorage = useCallback(
     (nextState: Maybe<T> | SetStateAction<Maybe<T> | undefined>) => {
       const newState = nextState instanceof Function ? nextState(hookState) : nextState
-
       if (hookState !== newState) {
         GlobalStorage.set(key, newState)
+        // Immediately update hook state as well
+        setHookState(newState)
       }
     },
     [key, hookState]
   )
 
-  /**
-   * The empty dependency array ensures that the effect runs only once when the component mounts
-   * and doesn't re-run unnecessarily on subsequent renders because it doesn't depend on any
-   * props or state variables that could change during the component's lifetime.
-   *
-   * Use an empty dependency array to avoid unnecessary re-renders.
-   */
-  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
   useEffect(() => {
-    GlobalStorage.subscribe(key, setHookState)
+    // Subscribe to storage changes and ensure state is synchronized
+    // Reruns when key or state changes to maintain consistency
+    GlobalStorage.subscribe(key, (newValue) => {
+      // Only update if the value is different from current state
+      if (newValue !== hookState) {
+        setHookState(newValue)
+      }
+    })
 
-    setHookState(getStorage())
+    // Initial sync
+    const initialValue = getStorage()
+    if (initialValue !== hookState) {
+      setHookState(initialValue)
+    }
 
     return () => GlobalStorage.unsubscribe(key, setHookState)
-  }, [])
+  }, [key, hookState, getStorage])
 
   return [hookState, setStorage]
 }

package/src/providers/QuilttSettingsProvider.tsx

@@ -3,7 +3,7 @@
 import type { FC, PropsWithChildren } from 'react'
 import { useState } from 'react'
 
-import { QuilttSettings } from '../hooks'
+import { QuilttSettings } from '@/contexts/QuilttSettings'
 
 type QuilttSettingsProviderProps = PropsWithChildren & {
   /** The Client ID to use for the client-side Auth API */

package/dist/useQuilttSettings-client-DU_Qfc8X.js

@@ -1,12 +0,0 @@
-'use client';
-import { createContext, useContext } from 'react';
-
-const QuilttSettings = createContext({});
-const useQuilttSettings = ()=>{
-    const settings = useContext(QuilttSettings);
-    return {
-        ...settings
-    };
-};
-
-export { QuilttSettings as Q, useQuilttSettings as u };

package/dist/useSession-client-CG5lGS9F.js

@@ -1,60 +0,0 @@
-'use client';
-import { useMemo, useEffect, useCallback } from 'react';
-import { Timeoutable, JsonWebTokenParse } from '@quiltt/core';
-import { u as useStorage } from './useStorage-client-B3keU-oI.js';
-
-const parse = JsonWebTokenParse;
-/**
- * Singleton timeout, allows hooks to come and go, while ensuring that there is
- * one notification being sent, preventing race conditions.
- */ const sessionTimer = new Timeoutable();
-/**
- * useSession uses useStorage to support a global singleton style of access. When
- * updated, all components, and windows should also invalidate.
- *
- * TODO: Support Rotation before Expiry
- *
- * Dataflow can come from two directions:
- *  1. Login - Bottom Up
- *    This happens on login, when a token is passed up through the setSession
- *    callback. From here it needs to be stored, and shared for usage.
- *  2. Refresh - Top Down
- *    This happens when a page is reloaded or a person returns, and everything is
- *    reinitialized.
- */ const useSession = (storageKey = 'session')=>{
-    const [token, setToken] = useStorage(storageKey);
-    const session = useMemo(()=>parse(token), [
-        token
-    ]);
-    // Clear session if/when it expires
-    useEffect(()=>{
-        if (!session) return;
-        const expirationMS = session.claims.exp * 1000;
-        const expire = ()=>setToken(null);
-        if (Date.now() >= expirationMS) {
-            expire();
-        } else {
-            sessionTimer.set(expire, expirationMS - Date.now());
-            return ()=>sessionTimer.clear(expire);
-        }
-    }, [
-        session,
-        setToken
-    ]);
-    // Bubbles up from Login
-    const setSession = useCallback((nextState)=>{
-        const newState = nextState instanceof Function ? nextState(token) : nextState;
-        if (token !== newState && (!newState || parse(newState))) {
-            setToken(newState);
-        }
-    }, [
-        token,
-        setToken
-    ]);
-    return [
-        session,
-        setSession
-    ];
-};
-
-export { useSession as u };