@multiplayer-app/session-recorder-react 1.2.15

package/README.md

@@ -0,0 +1,386 @@
+![Description](./docs/img/header-js.png)
+
+<div align="center">
+<a href="https://github.com/multiplayer-app/multiplayer-session-recorder-javascript">
+  <img src="https://img.shields.io/github/stars/multiplayer-app/multiplayer-session-recorder-javascript?style=social&label=Star&maxAge=2592000" alt="GitHub stars">
+</a>
+  <a href="https://github.com/multiplayer-app/multiplayer-session-recorder-javascript/blob/main/LICENSE">
+    <img src="https://img.shields.io/github/license/multiplayer-app/multiplayer-session-recorder-javascript" alt="License">
+  </a>
+  <a href="https://multiplayer.app">
+    <img src="https://img.shields.io/badge/Visit-multiplayer.app-blue" alt="Visit Multiplayer">
+  </a>
+
+</div>
+<div>
+  <p align="center">
+    <a href="https://x.com/trymultiplayer">
+      <img src="https://img.shields.io/badge/Follow%20on%20X-000000?style=for-the-badge&logo=x&logoColor=white" alt="Follow on X" />
+    </a>
+    <a href="https://www.linkedin.com/company/multiplayer-app/">
+      <img src="https://img.shields.io/badge/Follow%20on%20LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white" alt="Follow on LinkedIn" />
+    </a>
+    <a href="https://discord.com/invite/q9K3mDzfrx">
+      <img src="https://img.shields.io/badge/Join%20our%20Discord-5865F2?style=for-the-badge&logo=discord&logoColor=white" alt="Join our Discord" />
+    </a>
+  </p>
+</div>
+
+# Multiplayer Session Recorder React
+
+React bindings for the [Multiplayer Full Stack Session Recorder](../session-recorder-browser/README.md).
+
+Use this wrapper to wire the browser SDK into your React or Next.js application with idiomatic hooks, context helpers, and navigation tracking.
+
+## Installation
+
+```bash
+npm install @multiplayer-app/session-recorder-react @opentelemetry/api
+# or
+yarn add @multiplayer-app/session-recorder-react @opentelemetry/api
+```
+
+To get full‑stack session recording working, set up one of our backend SDKs/CLI apps:
+
+- [Node.js](https://github.com/multiplayer-app/multiplayer-session-recorder-javascript/tree/main/packages/session-recorder-node)
+- [Python](https://github.com/multiplayer-app/multiplayer-session-recorder-python?tab=readme-ov-file)
+- [Java](https://github.com/multiplayer-app/multiplayer-session-recorder-java?tab=readme-ov-file)
+- [.NET](https://github.com/multiplayer-app/multiplayer-session-recorder-dotnet?tab=readme-ov-file)
+- [Go](https://github.com/multiplayer-app/multiplayer-session-recorder-go?tab=readme-ov-file)
+- [Ruby](https://github.com/multiplayer-app/multiplayer-session-recorder-ruby?tab=readme-ov-file)
+
+## Quick start
+
+1. Wrap your application with the `SessionRecorderProvider`.
+2. Pass the same configuration you would supply to the browser SDK.
+3. Start or stop sessions using the widget or the provided hooks.
+
+### Minimal setup with manual initialization
+
+```tsx
+// src/main.tsx or src/index.tsx app root
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+import { SessionRecorderProvider } from '@multiplayer-app/session-recorder-react'
+
+const sessionRecorderConfig = {
+  version: '1.0.0',
+  environment: 'production',
+  application: 'my-react-app',
+  apiKey: 'YOUR_MULTIPLAYER_API_KEY',
+  // IMPORTANT: in order to propagate OTLP headers to a backend
+  // domain(s) with a different origin, add backend domain(s) below.
+  // e.g. if you serve your website from www.example.com
+  // and your backend domain is at api.example.com set value as shown below:
+  // format: string|RegExp|Array
+  propagateTraceHeaderCorsUrls: [new RegExp('https://api.example.com', 'i')]
+}
+
+// Initialize the session recorder manually
+SessionRecorderProvider.init(sessionRecorderConfig)
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <SessionRecorderProvider>
+    <App />
+  </SessionRecorderProvider>
+)
+```
+
+### Minimal setup with provider initialization
+
+```tsx
+// src/main.tsx or src/index.tsx app root
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+import { SessionRecorderProvider } from '@multiplayer-app/session-recorder-react'
+
+const sessionRecorderConfig = {
+  version: '1.0.0',
+  environment: 'production',
+  application: 'my-react-app',
+  apiKey: 'YOUR_MULTIPLAYER_API_KEY'
+}
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <SessionRecorderProvider options={sessionRecorderConfig}>
+    <App />
+  </SessionRecorderProvider>
+)
+```
+
+Behind the scenes, the provider initializes the shared Browser SDK (if you pass the configuration as options to the provider) — or you can initialize it manually as shown in the example above. It then sets up listeners and exposes helper APIs through React context and selectors.
+
+### Set session attributes to provide context for the session
+
+Use session attributes to attach user context to recordings. The provided `userName` and `userId` will be visible in the Multiplayer sessions list and in the session details (shown as the reporter), making it easier to identify who reported or recorded the session.
+
+```tsx
+import { useEffect } from 'react'
+import SessionRecorder from '@multiplayer-app/session-recorder-react'
+//... your code
+
+const MyComponent = () => {
+  useEffect(() => {
+    SessionRecorder.setSessionAttributes({
+      userId: '12345', // replace with your user id
+      userName: 'John Doe' // replace with your user name
+    })
+  }, [])
+
+  //... your code
+}
+
+//... your code
+```
+
+### Using without the built‑in widget (imperative‑only)
+
+If you prefer not to render our floating widget, disable it and rely purely on the imperative hooks. Use the context hook when you need imperative control (for example, to bind to buttons or QA tooling) as shown in the example below:
+
+```tsx
+// Provider configuration
+<SessionRecorderProvider
+  options={{
+    application: 'my-react-app',
+    version: '1.0.0',
+    environment: 'production',
+    apiKey: 'YOUR_MULTIPLAYER_API_KEY',
+    showWidget: false // hide the built-in widget
+  }}
+>
+  <App />
+</SessionRecorderProvider>
+```
+
+#### Conditional controls with state (recommended UX)
+
+Create your own UI and wire it to the hook methods. Render only the relevant actions based on the current session state (e.g., show Stop only when recording is started):
+
+```tsx
+import React from 'react'
+import { useSessionRecorder, useSessionRecordingState, SessionState, SessionType } from '@multiplayer-app/session-recorder-react'
+
+export function SmartSessionControls() {
+  const { startSession, stopSession, pauseSession, resumeSession } = useSessionRecorder()
+  const sessionState = useSessionRecordingState()
+
+  const isStarted = sessionState === SessionState.started
+  const isPaused = sessionState === SessionState.paused
+
+  return (
+    <div>
+      {/* Idle state: allow starting */}
+      {!isStarted && !isPaused && (
+        <>
+          <button onClick={() => startSession()}>Start</button>
+          <button onClick={() => startSession(SessionType.CONTINUOUS)}>Start Continuous</button>
+        </>
+      )}
+
+      {/* Started state: allow pause or stop */}
+      {isStarted && (
+        <>
+          <button onClick={() => pauseSession()}>Pause</button>
+          <button onClick={() => stopSession('Finished recording')}>Stop</button>
+        </>
+      )}
+
+      {/* Paused state: allow resume or stop */}
+      {isPaused && (
+        <>
+          <button onClick={() => resumeSession()}>Resume</button>
+          <button onClick={() => stopSession('Finished recording')}>Stop</button>
+        </>
+      )}
+    </div>
+  )
+}
+```
+
+## Reading recorder state with selectors
+
+The package ships a lightweight observable store that mirrors the browser SDK. Use the selectors to drive UI state without forcing rerenders on unrelated updates.
+
+```tsx
+import React from 'react'
+import {
+  useSessionRecordingState,
+  useSessionType,
+  useIsInitialized,
+  SessionState,
+  SessionType
+} from '@multiplayer-app/session-recorder-react'
+
+export function RecorderStatusBanner() {
+  const isReady = useIsInitialized()
+  const sessionState = useSessionRecordingState()
+  const sessionType = useSessionType()
+
+  if (!isReady) {
+    return <span>Session recorder initializing…</span>
+  }
+
+  return (
+    <span>
+      State: {sessionState ?? SessionState.stopped} | Mode: {sessionType ?? SessionType.MANUAL}
+    </span>
+  )
+}
+```
+
+## Recording navigation in React apps
+
+The Session Recorder React package includes a `useNavigationRecorder` hook that forwards router changes to the shared navigation recorder. Attach it inside your routing layer to correlate screen changes with traces and replays.
+
+```tsx
+// React Router v7/v6
+import { useLocation, useNavigationType } from 'react-router-dom'
+import { useNavigationRecorder } from '@multiplayer-app/session-recorder-react'
+
+export function NavigationTracker() {
+  const location = useLocation()
+  const navigationType = useNavigationType()
+
+  useNavigationRecorder(location.pathname, {
+    navigationType,
+    params: location.state as Record<string, unknown> | undefined
+  })
+
+  return null
+}
+```
+
+```tsx
+// React Router v5 (older)
+import { useLocation, useHistory } from 'react-router-dom'
+import { useNavigationRecorder } from '@multiplayer-app/session-recorder-react'
+
+export function NavigationTrackerLegacy() {
+  const location = useLocation()
+  const history = useHistory()
+
+  // PUSH | REPLACE | POP => push | replace | pop
+  const navigationType = (history.action || 'PUSH').toLowerCase()
+
+  useNavigationRecorder(location.pathname, {
+    navigationType,
+    params: location.state as Record<string, unknown> | undefined
+  })
+
+  return null
+}
+```
+
+### Advanced navigation metadata
+
+`useNavigationRecorder` accepts an options object allowing you to override the detected `path`, attach custom `routeName`, include query params, or disable document title capture. For full control you can call `SessionRecorder.navigation.record({ ... })` directly using the shared browser instance exported by this package.
+
+## Configuration reference
+
+The `options` prop passed to `SessionRecorderProvider` is forwarded to the underlying browser SDK. Refer to the [browser README](../session-recorder-browser/README.md#initialize) for the full option list, including:
+
+- `application`, `version`, `environment`, `apiKey`
+- `showWidget`, `showContinuousRecording`
+- `recordNavigation`, `recordCanvas`, `recordGestures`
+- `propagateTraceHeaderCorsUrls`, `ignoreUrls`
+- `masking`, `captureBody`, `captureHeaders`
+- `maxCapturingHttpPayloadSize` and other advanced HTTP controls
+
+Any time `recordNavigation` is enabled, the browser SDK will emit OpenTelemetry navigation spans and keep an in-memory stack of visited routes. You can access the navigation helpers through `SessionRecorder.navigation` if you need to introspect from React components.
+
+## Next.js integration tips
+
+- Initialize the provider in a Client Component (for example `app/providers.tsx`) because the browser SDK requires `window`.
+- In the App Router, render the `SessionRecorderProvider` at the top of `app/layout.tsx` and add the `NavigationTracker` component inside your root layout so every route change is captured.
+- If your frontend calls APIs on different origins, set `propagateTraceHeaderCorsUrls` so backend traces correlate correctly.
+
+### Next.js support (coming soon) and temporary solution
+
+An official Next.js-specific wrapper is coming soon. Until then, you can use this package safely in Next.js by:
+
+1. Initializing in a Client Component
+
+```tsx
+'use client'
+import React from 'react'
+import { SessionRecorderProvider } from '@multiplayer-app/session-recorder-react'
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <SessionRecorderProvider
+      options={{
+        application: 'my-next-app',
+        version: '1.0.0',
+        environment: 'production',
+        apiKey: 'YOUR_MULTIPLAYER_API_KEY',
+        showWidget: true
+      }}
+    >
+      {children}
+    </SessionRecorderProvider>
+  )
+}
+```
+
+2. Tracking navigation (App Router)
+
+```tsx
+'use client'
+import { usePathname, useSearchParams } from 'next/navigation'
+import { useNavigationRecorder } from '@multiplayer-app/session-recorder-react'
+
+export function NavigationTracker() {
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+
+  // Convert search params to an object for richer metadata
+  const params = Object.fromEntries(searchParams?.entries?.() ?? [])
+
+  // Hook records whenever pathname changes (query changes included via params)
+  useNavigationRecorder(pathname || '/', {
+    params,
+    framework: 'nextjs',
+    source: 'next/navigation'
+  })
+
+  return null
+}
+```
+
+3. Tracking navigation (Pages Router, older)
+
+```tsx
+'use client'
+import { useRouter } from 'next/router'
+import { useNavigationRecorder } from '@multiplayer-app/session-recorder-react'
+
+export function NavigationTrackerLegacy() {
+  const { asPath, query } = useRouter()
+  const pathname = asPath.split('?')[0]
+
+  useNavigationRecorder(pathname, {
+    params: query,
+    framework: 'nextjs',
+    source: 'next/router'
+  })
+
+  return null
+}
+```
+
+## TypeScript support
+
+All hooks and helpers ship with TypeScript types. To extend the navigation metadata, annotate the `params` or `metadata` properties in your own app code. The package re-exports all relevant browser SDK types for convenience.
+
+## Troubleshooting
+
+- Ensure the provider wraps your entire component tree so context hooks resolve.
+- Confirm `SessionRecorder.init` runs only once. The provider handles this automatically if you pass the configuration as options to the provider; do not call it manually elsewhere.
+- Ensure the session recorder required options are passed and the API key is valid.
+- For SSR environments, guard any direct `document` or `window` usage behind `typeof window !== 'undefined'` checks (the helper hooks already do this).
+
+## License
+
+Distributed under the [MIT License](../session-recorder-browser/LICENSE).

package/dist/context/SessionRecorderContext.d.ts

@@ -0,0 +1,19 @@
+import React, { type PropsWithChildren } from 'react';
+import SessionRecorder, { SessionType } from '@multiplayer-app/session-recorder-browser';
+type SessionRecorderOptions = any;
+interface SessionRecorderContextType {
+    instance: typeof SessionRecorder;
+    startSession: (sessionType?: SessionType) => void | Promise<void>;
+    stopSession: (comment?: string) => Promise<void>;
+    pauseSession: () => Promise<void>;
+    resumeSession: () => Promise<void>;
+    cancelSession: () => Promise<void>;
+    saveSession: () => Promise<any>;
+}
+export interface SessionRecorderProviderProps extends PropsWithChildren {
+    options?: SessionRecorderOptions;
+}
+export declare const SessionRecorderProvider: React.FC<SessionRecorderProviderProps>;
+export declare const useSessionRecorder: () => SessionRecorderContextType;
+export {};
+//# sourceMappingURL=SessionRecorderContext.d.ts.map

package/dist/context/SessionRecorderContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SessionRecorderContext.d.ts","sourceRoot":"","sources":["../../src/context/SessionRecorderContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAqD,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAA;AACxG,OAAO,eAAe,EAAE,EAAgB,WAAW,EAAE,MAAM,2CAA2C,CAAA;AAGtG,KAAK,sBAAsB,GAAG,GAAG,CAAA;AAEjC,UAAU,0BAA0B;IAClC,QAAQ,EAAE,OAAO,eAAe,CAAA;IAChC,YAAY,EAAE,CAAC,WAAW,CAAC,EAAE,WAAW,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IACjE,WAAW,EAAE,CAAC,OAAO,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IAChD,YAAY,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;IACjC,aAAa,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;IAClC,aAAa,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;IAClC,WAAW,EAAE,MAAM,OAAO,CAAC,GAAG,CAAC,CAAA;CAChC;AAID,MAAM,WAAW,4BAA6B,SAAQ,iBAAiB;IACrE,OAAO,CAAC,EAAE,sBAAsB,CAAA;CACjC;AAED,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,4BAA4B,CAqE1E,CAAA;AAED,eAAO,MAAM,kBAAkB,QAAO,0BAMrC,CAAA"}

package/dist/context/SessionRecorderContext.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useCallback } from 'react';
+import SessionRecorder, { SessionType } from '@multiplayer-app/session-recorder-browser';
+import { sessionRecorderStore } from './SessionRecorderStore';
+const SessionRecorderContext = createContext(null);
+export const SessionRecorderProvider = ({ children, options }) => {
+    useEffect(() => {
+        if (options) {
+            SessionRecorder.init(options);
+        }
+        sessionRecorderStore.setState({ isInitialized: SessionRecorder.isInitialized });
+    }, []);
+    useEffect(() => {
+        sessionRecorderStore.setState({
+            sessionState: SessionRecorder.sessionState,
+            sessionType: SessionRecorder.sessionType
+        });
+        const onStateChange = (sessionState) => {
+            sessionRecorderStore.setState({ sessionState });
+        };
+        const onInit = () => {
+            sessionRecorderStore.setState({ isInitialized: true });
+        };
+        SessionRecorder.on('state-change', onStateChange);
+        SessionRecorder.on('init', onInit);
+        return () => {
+            SessionRecorder.off('state-change', onStateChange);
+            SessionRecorder.off('init', onInit);
+        };
+    }, []);
+    const startSession = useCallback((sessionType = SessionType.MANUAL) => {
+        return SessionRecorder.start(sessionType);
+    }, []);
+    const stopSession = useCallback((comment) => {
+        return SessionRecorder.stop(comment);
+    }, []);
+    const pauseSession = useCallback(() => {
+        return SessionRecorder.pause();
+    }, []);
+    const resumeSession = useCallback(() => {
+        return SessionRecorder.resume();
+    }, []);
+    const cancelSession = useCallback(() => {
+        return SessionRecorder.cancel();
+    }, []);
+    const saveSession = useCallback(() => {
+        return SessionRecorder.save();
+    }, []);
+    return (_jsx(SessionRecorderContext.Provider, { value: {
+            instance: SessionRecorder,
+            startSession,
+            stopSession,
+            pauseSession,
+            resumeSession,
+            cancelSession,
+            saveSession
+        }, children: children }));
+};
+export const useSessionRecorder = () => {
+    const context = useContext(SessionRecorderContext);
+    if (!context) {
+        throw new Error('useSessionRecorder must be used within a SessionRecorderProvider');
+    }
+    return context;
+};
+//# sourceMappingURL=SessionRecorderContext.js.map

package/dist/context/SessionRecorderContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SessionRecorderContext.js","sourceRoot":"","sources":["../../src/context/SessionRecorderContext.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,aAAa,EAAE,UAAU,EAAE,SAAS,EAAE,WAAW,EAA0B,MAAM,OAAO,CAAA;AACxG,OAAO,eAAe,EAAE,EAAgB,WAAW,EAAE,MAAM,2CAA2C,CAAA;AACtG,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAc7D,MAAM,sBAAsB,GAAG,aAAa,CAAoC,IAAI,CAAC,CAAA;AAMrF,MAAM,CAAC,MAAM,uBAAuB,GAA2C,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE;IACvG,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,EAAE,CAAC;YACZ,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;QAC/B,CAAC;QACD,oBAAoB,CAAC,QAAQ,CAAC,EAAE,aAAa,EAAE,eAAe,CAAC,aAAa,EAAE,CAAC,CAAA;IACjF,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,SAAS,CAAC,GAAG,EAAE;QACb,oBAAoB,CAAC,QAAQ,CAAC;YAC5B,YAAY,EAAE,eAAe,CAAC,YAAY;YAC1C,WAAW,EAAE,eAAe,CAAC,WAAW;SACzC,CAAC,CAAA;QAEF,MAAM,aAAa,GAAG,CAAC,YAA0B,EAAE,EAAE;YACnD,oBAAoB,CAAC,QAAQ,CAAC,EAAE,YAAY,EAAE,CAAC,CAAA;QACjD,CAAC,CAAA;QACD,MAAM,MAAM,GAAG,GAAG,EAAE;YAClB,oBAAoB,CAAC,QAAQ,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAA;QACxD,CAAC,CAAA;QAED,eAAe,CAAC,EAAE,CAAC,cAAc,EAAE,aAAa,CAAC,CAAA;QACjD,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;QAClC,OAAO,GAAG,EAAE;YACV,eAAe,CAAC,GAAG,CAAC,cAAc,EAAE,aAAa,CAAC,CAAA;YAClD,eAAe,CAAC,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;QACrC,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,YAAY,GAAG,WAAW,CAAC,CAAC,cAA2B,WAAW,CAAC,MAAM,EAAE,EAAE;QACjF,OAAO,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,CAAA;IAC3C,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,OAAgB,EAAE,EAAE;QACnD,OAAO,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;IACtC,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE;QACpC,OAAO,eAAe,CAAC,KAAK,EAAE,CAAA;IAChC,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,aAAa,GAAG,WAAW,CAAC,GAAG,EAAE;QACrC,OAAO,eAAe,CAAC,MAAM,EAAE,CAAA;IACjC,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,aAAa,GAAG,WAAW,CAAC,GAAG,EAAE;QACrC,OAAO,eAAe,CAAC,MAAM,EAAE,CAAA;IACjC,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,OAAO,eAAe,CAAC,IAAI,EAAE,CAAA;IAC/B,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,CACL,KAAC,sBAAsB,CAAC,QAAQ,IAC9B,KAAK,EAAE;YACL,QAAQ,EAAE,eAAe;YACzB,YAAY;YACZ,WAAW;YACX,YAAY;YACZ,aAAa;YACb,aAAa;YACb,WAAW;SACZ,YAEA,QAAQ,GAEuB,CACnC,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAA+B,EAAE;IACjE,MAAM,OAAO,GAAG,UAAU,CAAC,sBAAsB,CAAC,CAAA;IAClD,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,kEAAkE,CAAC,CAAA;IACrF,CAAC;IACD,OAAO,OAAO,CAAA;AAChB,CAAC,CAAA"}

package/dist/context/SessionRecorderStore.d.ts

@@ -0,0 +1,11 @@
+import { type Store } from './createStore';
+import { SessionState, SessionType } from '@multiplayer-app/session-recorder-browser';
+export type SessionRecorderState = {
+    isInitialized: boolean;
+    sessionType: SessionType | null;
+    sessionState: SessionState | null;
+    isOnline: boolean;
+    error: string | null;
+};
+export declare const sessionRecorderStore: Store<SessionRecorderState>;
+//# sourceMappingURL=SessionRecorderStore.d.ts.map

package/dist/context/SessionRecorderStore.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SessionRecorderStore.d.ts","sourceRoot":"","sources":["../../src/context/SessionRecorderStore.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,KAAK,EAAE,MAAM,eAAe,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,2CAA2C,CAAC;AAGtF,MAAM,MAAM,oBAAoB,GAAG;IACjC,aAAa,EAAE,OAAO,CAAC;IACvB,WAAW,EAAE,WAAW,GAAG,IAAI,CAAC;IAChC,YAAY,EAAE,YAAY,GAAG,IAAI,CAAC;IAClC,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,oBAAoB,CAOzD,CAAC"}

package/dist/context/SessionRecorderStore.js

@@ -0,0 +1,9 @@
+import { createStore } from './createStore';
+export const sessionRecorderStore = createStore({
+    isInitialized: false,
+    sessionType: null,
+    sessionState: null,
+    isOnline: true,
+    error: null,
+});
+//# sourceMappingURL=SessionRecorderStore.js.map

package/dist/context/SessionRecorderStore.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SessionRecorderStore.js","sourceRoot":"","sources":["../../src/context/SessionRecorderStore.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAc,MAAM,eAAe,CAAC;AAYxD,MAAM,CAAC,MAAM,oBAAoB,GAC/B,WAAW,CAAuB;IAChC,aAAa,EAAE,KAAK;IACpB,WAAW,EAAE,IAAI;IACjB,YAAY,EAAE,IAAI;IAClB,QAAQ,EAAE,IAAI;IACd,KAAK,EAAE,IAAI;CACZ,CAAC,CAAC"}

package/dist/context/createStore.d.ts

@@ -0,0 +1,16 @@
+export type SessionRecorderState = {
+    isInitialized: boolean;
+    sessionType: any | null;
+    sessionState: any | null;
+    isOnline: boolean;
+    error: string | null;
+};
+type Listener<T> = (state: T, prev: T) => void;
+export type Store<T> = {
+    getState: () => T;
+    setState: (partial: Partial<T> | ((prev: T) => T)) => void;
+    subscribe: (listener: Listener<T>) => () => void;
+};
+export declare function createStore<T extends object>(initialState: T): Store<T>;
+export {};
+//# sourceMappingURL=createStore.d.ts.map

package/dist/context/createStore.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createStore.d.ts","sourceRoot":"","sources":["../../src/context/createStore.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,oBAAoB,GAAG;IACjC,aAAa,EAAE,OAAO,CAAA;IACtB,WAAW,EAAE,GAAG,GAAG,IAAI,CAAA;IACvB,YAAY,EAAE,GAAG,GAAG,IAAI,CAAA;IACxB,QAAQ,EAAE,OAAO,CAAA;IACjB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;CACrB,CAAA;AAED,KAAK,QAAQ,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,KAAK,IAAI,CAAA;AAE9C,MAAM,MAAM,KAAK,CAAC,CAAC,IAAI;IACrB,QAAQ,EAAE,MAAM,CAAC,CAAA;IACjB,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC,KAAK,IAAI,CAAA;IAC1D,SAAS,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,MAAM,IAAI,CAAA;CACjD,CAAA;AAED,wBAAgB,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,YAAY,EAAE,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAoBvE"}

package/dist/context/createStore.js

@@ -0,0 +1,19 @@
+export function createStore(initialState) {
+    let state = initialState;
+    const listeners = new Set();
+    const getState = () => state;
+    const setState = (partial) => {
+        const prev = state;
+        const next = typeof partial === 'function' ? partial(prev) : { ...prev, ...partial };
+        if (Object.is(next, prev))
+            return;
+        state = next;
+        listeners.forEach((l) => l(state, prev));
+    };
+    const subscribe = (listener) => {
+        listeners.add(listener);
+        return () => listeners.delete(listener);
+    };
+    return { getState, setState, subscribe };
+}
+//# sourceMappingURL=createStore.js.map

package/dist/context/createStore.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createStore.js","sourceRoot":"","sources":["../../src/context/createStore.ts"],"names":[],"mappings":"AAgBA,MAAM,UAAU,WAAW,CAAmB,YAAe;IAC3D,IAAI,KAAK,GAAG,YAAY,CAAA;IACxB,MAAM,SAAS,GAAG,IAAI,GAAG,EAAe,CAAA;IAExC,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,KAAK,CAAA;IAE5B,MAAM,QAAQ,GAAyB,CAAC,OAAO,EAAE,EAAE;QACjD,MAAM,IAAI,GAAG,KAAK,CAAA;QAClB,MAAM,IAAI,GAAG,OAAO,OAAO,KAAK,UAAU,CAAC,CAAC,CAAE,OAAuB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAE,EAAE,GAAG,IAAI,EAAE,GAAG,OAAO,EAAQ,CAAA;QAC5G,IAAI,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC;YAAE,OAAM;QACjC,KAAK,GAAG,IAAI,CAAA;QACZ,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAA;IAC1C,CAAC,CAAA;IAED,MAAM,SAAS,GAA0B,CAAC,QAAQ,EAAE,EAAE;QACpD,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA;QACvB,OAAO,GAAG,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAA;IACzC,CAAC,CAAA;IAED,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAA;AAC1C,CAAC"}

package/dist/context/useSessionRecorderStore.d.ts

@@ -0,0 +1,24 @@
+import { SessionState, SessionType } from '@multiplayer-app/session-recorder-browser';
+import { type SessionRecorderState } from './SessionRecorderStore';
+/**
+ * Select a derived slice from the shared Session Recorder store.
+ * Works in both React (web) and React Native since the store shape is identical.
+ *
+ * @param selector - Function that maps the full store state to the slice you need
+ * @param equalityFn - Optional comparator to avoid unnecessary re-renders
+ * @returns The selected slice of state
+ */
+export declare function useSessionRecorderStore<TSlice>(selector: (s: SessionRecorderState) => TSlice, equalityFn?: (a: TSlice, b: TSlice) => boolean): TSlice;
+/**
+ * Read the current session recording state (started, paused, stopped).
+ */
+export declare function useSessionRecordingState(): SessionState | null;
+/**
+ * Read the current session type (MANUAL/CONTINUOUS).
+ */
+export declare function useSessionType(): SessionType | null;
+/**
+ * Check whether the Session Recorder has been initialized.
+ */
+export declare function useIsInitialized(): boolean;
+//# sourceMappingURL=useSessionRecorderStore.d.ts.map

package/dist/context/useSessionRecorderStore.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSessionRecorderStore.d.ts","sourceRoot":"","sources":["../../src/context/useSessionRecorderStore.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,2CAA2C,CAAC;AAEtF,OAAO,EACL,KAAK,oBAAoB,EAE1B,MAAM,wBAAwB,CAAC;AAGhC;;;;;;;GAOG;AACH,wBAAgB,uBAAuB,CAAC,MAAM,EAC5C,QAAQ,EAAE,CAAC,CAAC,EAAE,oBAAoB,KAAK,MAAM,EAC7C,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,OAAO,GAC7C,MAAM,CAMR;AAED;;GAEG;AACH,wBAAgB,wBAAwB,wBAEvC;AAED;;GAEG;AACH,wBAAgB,cAAc,uBAE7B;AAED;;GAEG;AACH,wBAAgB,gBAAgB,YAE/B"}

package/dist/context/useSessionRecorderStore.js

@@ -0,0 +1,32 @@
+import { sessionRecorderStore, } from './SessionRecorderStore';
+import { useStoreSelector } from './useStoreSelector';
+/**
+ * Select a derived slice from the shared Session Recorder store.
+ * Works in both React (web) and React Native since the store shape is identical.
+ *
+ * @param selector - Function that maps the full store state to the slice you need
+ * @param equalityFn - Optional comparator to avoid unnecessary re-renders
+ * @returns The selected slice of state
+ */
+export function useSessionRecorderStore(selector, equalityFn) {
+    return useStoreSelector(sessionRecorderStore, selector, equalityFn);
+}
+/**
+ * Read the current session recording state (started, paused, stopped).
+ */
+export function useSessionRecordingState() {
+    return useSessionRecorderStore((s) => s.sessionState);
+}
+/**
+ * Read the current session type (MANUAL/CONTINUOUS).
+ */
+export function useSessionType() {
+    return useSessionRecorderStore((s) => s.sessionType);
+}
+/**
+ * Check whether the Session Recorder has been initialized.
+ */
+export function useIsInitialized() {
+    return useSessionRecorderStore((s) => s.isInitialized);
+}
+//# sourceMappingURL=useSessionRecorderStore.js.map

package/dist/context/useSessionRecorderStore.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSessionRecorderStore.js","sourceRoot":"","sources":["../../src/context/useSessionRecorderStore.ts"],"names":[],"mappings":"AAEA,OAAO,EAEL,oBAAoB,GACrB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD;;;;;;;GAOG;AACH,MAAM,UAAU,uBAAuB,CACrC,QAA6C,EAC7C,UAA8C;IAE9C,OAAO,gBAAgB,CACrB,oBAAoB,EACpB,QAAQ,EACR,UAAU,CACX,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,wBAAwB;IACtC,OAAO,uBAAuB,CAAsB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC;AAC7E,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,cAAc;IAC5B,OAAO,uBAAuB,CAAqB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC;AAC3E,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,gBAAgB;IAC9B,OAAO,uBAAuB,CAAU,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;AAClE,CAAC"}

package/dist/context/useStoreSelector.d.ts

@@ -0,0 +1,5 @@
+import { type Store } from './createStore';
+import { shallowEqual } from '../utils/shallowEqual';
+export declare function useStoreSelector<TState extends object, TSlice>(store: Store<TState>, selector: (state: TState) => TSlice, equalityFn?: (a: TSlice, b: TSlice) => boolean): TSlice;
+export declare const shallow: typeof shallowEqual;
+//# sourceMappingURL=useStoreSelector.d.ts.map

package/dist/context/useStoreSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStoreSelector.d.ts","sourceRoot":"","sources":["../../src/context/useStoreSelector.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAErD,wBAAgB,gBAAgB,CAAC,MAAM,SAAS,MAAM,EAAE,MAAM,EAC5D,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,EACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,EACnC,UAAU,GAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,OAAmB,GACxD,MAAM,CAyBR;AAED,eAAO,MAAM,OAAO,qBAAe,CAAC"}

package/dist/context/useStoreSelector.js

@@ -0,0 +1,25 @@
+import { useEffect, useRef, useState } from 'react';
+import { shallowEqual } from '../utils/shallowEqual';
+export function useStoreSelector(store, selector, equalityFn = Object.is) {
+    const latestSelectorRef = useRef(selector);
+    const latestEqualityRef = useRef(equalityFn);
+    latestSelectorRef.current = selector;
+    latestEqualityRef.current = equalityFn;
+    const [slice, setSlice] = useState(() => latestSelectorRef.current(store.getState()));
+    useEffect(() => {
+        function handleChange(nextState, prevState) {
+            const nextSlice = latestSelectorRef.current(nextState);
+            const prevSlice = latestSelectorRef.current(prevState);
+            if (!latestEqualityRef.current(nextSlice, prevSlice)) {
+                setSlice(nextSlice);
+            }
+        }
+        const unsubscribe = store.subscribe(handleChange);
+        // Sync once in case changed between render and effect
+        handleChange(store.getState(), store.getState());
+        return unsubscribe;
+    }, [store]);
+    return slice;
+}
+export const shallow = shallowEqual;
+//# sourceMappingURL=useStoreSelector.js.map

package/dist/context/useStoreSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStoreSelector.js","sourceRoot":"","sources":["../../src/context/useStoreSelector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAErD,MAAM,UAAU,gBAAgB,CAC9B,KAAoB,EACpB,QAAmC,EACnC,aAAgD,MAAM,CAAC,EAAE;IAEzD,MAAM,iBAAiB,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC3C,MAAM,iBAAiB,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;IAC7C,iBAAiB,CAAC,OAAO,GAAG,QAAQ,CAAC;IACrC,iBAAiB,CAAC,OAAO,GAAG,UAAU,CAAC;IAEvC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAS,GAAG,EAAE,CAC9C,iBAAiB,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAC5C,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,YAAY,CAAC,SAAiB,EAAE,SAAiB;YACxD,MAAM,SAAS,GAAG,iBAAiB,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;YACvD,MAAM,SAAS,GAAG,iBAAiB,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;YACvD,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,SAAS,EAAE,SAAS,CAAC,EAAE,CAAC;gBACrD,QAAQ,CAAC,SAAS,CAAC,CAAC;YACtB,CAAC;QACH,CAAC;QACD,MAAM,WAAW,GAAG,KAAK,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;QAClD,sDAAsD;QACtD,YAAY,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;QACjD,OAAO,WAAW,CAAC;IACrB,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,KAAK,CAAC;AACf,CAAC;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,YAAY,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+import SessionRecorderBrowser from '@multiplayer-app/session-recorder-browser';
+export * from '@multiplayer-app/session-recorder-browser';
+export * from './context/SessionRecorderContext';
+export * from './context/useSessionRecorderStore';
+export { useNavigationRecorder } from './navigation';
+export type { UseNavigationRecorderOptions } from './navigation';
+export default SessionRecorderBrowser;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,MAAM,2CAA2C,CAAC;AAE/E,cAAc,2CAA2C,CAAC;AAC1D,cAAc,kCAAkC,CAAC;AACjD,cAAc,mCAAmC,CAAC;AAElD,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAA;AACpD,YAAY,EAAE,4BAA4B,EAAE,MAAM,cAAc,CAAA;AAEhE,eAAe,sBAAsB,CAAA"}

package/dist/index.js

@@ -0,0 +1,7 @@
+import SessionRecorderBrowser from '@multiplayer-app/session-recorder-browser';
+export * from '@multiplayer-app/session-recorder-browser';
+export * from './context/SessionRecorderContext';
+export * from './context/useSessionRecorderStore';
+export { useNavigationRecorder } from './navigation';
+export default SessionRecorderBrowser;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,MAAM,2CAA2C,CAAC;AAE/E,cAAc,2CAA2C,CAAC;AAC1D,cAAc,kCAAkC,CAAC;AACjD,cAAc,mCAAmC,CAAC;AAElD,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAA;AAGpD,eAAe,sBAAsB,CAAA"}

package/dist/navigation.d.ts

@@ -0,0 +1,20 @@
+import { NavigationSignal } from '@multiplayer-app/session-recorder-browser';
+export interface UseNavigationRecorderOptions extends Partial<Omit<NavigationSignal, 'path' | 'timestamp'>> {
+    /**
+     * Overrides the path sent to the recorder. Defaults to the provided pathname argument.
+     */
+    path?: string;
+    /**
+     * When true (default), document.title is captured if available.
+     */
+    captureDocumentTitle?: boolean;
+}
+/**
+ * React Router compatible navigation recorder hook.
+ * Call inside a component where you can access current location and navigation events.
+ * Example:
+ *   const location = useLocation();
+ *   useNavigationRecorder(location.pathname);
+ */
+export declare function useNavigationRecorder(pathname: string, options?: UseNavigationRecorderOptions): void;
+//# sourceMappingURL=navigation.d.ts.map

package/dist/navigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../src/navigation.ts"],"names":[],"mappings":"AACA,OAA+B,EAC7B,gBAAgB,EACjB,MAAM,2CAA2C,CAAA;AAElD,MAAM,WAAW,4BACf,SAAQ,OAAO,CAAC,IAAI,CAAC,gBAAgB,EAAE,MAAM,GAAG,WAAW,CAAC,CAAC;IAC7D;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAA;CAC/B;AAED;;;;;;GAMG;AACH,wBAAgB,qBAAqB,CACnC,QAAQ,EAAE,MAAM,EAChB,OAAO,CAAC,EAAE,4BAA4B,GACrC,IAAI,CA0DN"}

package/dist/navigation.js

@@ -0,0 +1,59 @@
+import { useEffect, useRef } from 'react';
+import SessionRecorderBrowser from '@multiplayer-app/session-recorder-browser';
+/**
+ * React Router compatible navigation recorder hook.
+ * Call inside a component where you can access current location and navigation events.
+ * Example:
+ *   const location = useLocation();
+ *   useNavigationRecorder(location.pathname);
+ */
+export function useNavigationRecorder(pathname, options) {
+    const optionsRef = useRef(options);
+    const hasRecordedInitialRef = useRef(false);
+    const lastPathRef = useRef(null);
+    useEffect(() => {
+        optionsRef.current = options;
+    }, [options]);
+    useEffect(() => {
+        if (!pathname || !SessionRecorderBrowser?.navigation) {
+            return;
+        }
+        const resolvedOptions = optionsRef.current || {};
+        const resolvedPath = resolvedOptions.path ?? pathname;
+        if (!resolvedPath) {
+            return;
+        }
+        if (lastPathRef.current === resolvedPath && !resolvedOptions.navigationType) {
+            return;
+        }
+        const captureDocumentTitle = resolvedOptions.captureDocumentTitle ?? true;
+        const signal = {
+            path: resolvedPath,
+            routeName: resolvedOptions.routeName ?? resolvedPath,
+            title: resolvedOptions.title ??
+                (captureDocumentTitle && typeof document !== 'undefined'
+                    ? document.title
+                    : undefined),
+            url: resolvedOptions.url,
+            params: resolvedOptions.params,
+            state: resolvedOptions.state,
+            navigationType: resolvedOptions.navigationType ??
+                (hasRecordedInitialRef.current ? undefined : 'initial'),
+            framework: resolvedOptions.framework ?? 'react',
+            source: resolvedOptions.source ?? 'react-router',
+            metadata: resolvedOptions.metadata,
+        };
+        try {
+            SessionRecorderBrowser.navigation.record(signal);
+            hasRecordedInitialRef.current = true;
+            lastPathRef.current = resolvedPath;
+        }
+        catch (error) {
+            if (process.env.NODE_ENV !== 'production') {
+                // eslint-disable-next-line no-console
+                console.warn('[SessionRecorder][React] Failed to record navigation', error);
+            }
+        }
+    }, [pathname]);
+}
+//# sourceMappingURL=navigation.js.map

package/dist/navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation.js","sourceRoot":"","sources":["../src/navigation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,sBAEN,MAAM,2CAA2C,CAAA;AAclD;;;;;;GAMG;AACH,MAAM,UAAU,qBAAqB,CACnC,QAAgB,EAChB,OAAsC;IAEtC,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,CAAA;IAClC,MAAM,qBAAqB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;IAC3C,MAAM,WAAW,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAA;IAE/C,SAAS,CAAC,GAAG,EAAE;QACb,UAAU,CAAC,OAAO,GAAG,OAAO,CAAA;IAC9B,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IAEb,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,QAAQ,IAAI,CAAC,sBAAsB,EAAE,UAAU,EAAE,CAAC;YACrD,OAAM;QACR,CAAC;QAED,MAAM,eAAe,GAAG,UAAU,CAAC,OAAO,IAAI,EAAE,CAAA;QAChD,MAAM,YAAY,GAAG,eAAe,CAAC,IAAI,IAAI,QAAQ,CAAA;QAErD,IAAI,CAAC,YAAY,EAAE,CAAC;YAClB,OAAM;QACR,CAAC;QAED,IAAI,WAAW,CAAC,OAAO,KAAK,YAAY,IAAI,CAAC,eAAe,CAAC,cAAc,EAAE,CAAC;YAC5E,OAAM;QACR,CAAC;QAED,MAAM,oBAAoB,GACxB,eAAe,CAAC,oBAAoB,IAAI,IAAI,CAAA;QAE9C,MAAM,MAAM,GAAqB;YAC/B,IAAI,EAAE,YAAY;YAClB,SAAS,EAAE,eAAe,CAAC,SAAS,IAAI,YAAY;YACpD,KAAK,EACH,eAAe,CAAC,KAAK;gBACrB,CAAC,oBAAoB,IAAI,OAAO,QAAQ,KAAK,WAAW;oBACtD,CAAC,CAAC,QAAQ,CAAC,KAAK;oBAChB,CAAC,CAAC,SAAS,CAAC;YAChB,GAAG,EAAE,eAAe,CAAC,GAAG;YACxB,MAAM,EAAE,eAAe,CAAC,MAAM;YAC9B,KAAK,EAAE,eAAe,CAAC,KAAK;YAC5B,cAAc,EACZ,eAAe,CAAC,cAAc;gBAC9B,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;YACzD,SAAS,EAAE,eAAe,CAAC,SAAS,IAAI,OAAO;YAC/C,MAAM,EAAE,eAAe,CAAC,MAAM,IAAI,cAAc;YAChD,QAAQ,EAAE,eAAe,CAAC,QAAQ;SACnC,CAAA;QAED,IAAI,CAAC;YACH,sBAAsB,CAAC,UAAU,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA;YAChD,qBAAqB,CAAC,OAAO,GAAG,IAAI,CAAA;YACpC,WAAW,CAAC,OAAO,GAAG,YAAY,CAAA;QACpC,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,EAAE,CAAC;gBAC1C,sCAAsC;gBACtC,OAAO,CAAC,IAAI,CAAC,sDAAsD,EAAE,KAAK,CAAC,CAAA;YAC7E,CAAC;QACH,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;AAChB,CAAC"}

package/dist/utils/shallowEqual.d.ts

@@ -0,0 +1,2 @@
+export declare function shallowEqual<T extends Record<string, any>>(a: T, b: T): boolean;
+//# sourceMappingURL=shallowEqual.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"shallowEqual.d.ts","sourceRoot":"","sources":["../../src/utils/shallowEqual.ts"],"names":[],"mappings":"AAAA,wBAAgB,YAAY,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EACxD,CAAC,EAAE,CAAC,EACJ,CAAC,EAAE,CAAC,GACH,OAAO,CAgBT"}

package/dist/utils/shallowEqual.js

@@ -0,0 +1,19 @@
+export function shallowEqual(a, b) {
+    if (Object.is(a, b))
+        return true;
+    if (!a || !b)
+        return false;
+    const aKeys = Object.keys(a);
+    const bKeys = Object.keys(b);
+    if (aKeys.length !== bKeys.length)
+        return false;
+    for (let i = 0; i < aKeys.length; i++) {
+        const key = aKeys[i];
+        if (!Object.prototype.hasOwnProperty.call(b, key) ||
+            !Object.is(a[key], b[key])) {
+            return false;
+        }
+    }
+    return true;
+}
+//# sourceMappingURL=shallowEqual.js.map

package/dist/utils/shallowEqual.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shallowEqual.js","sourceRoot":"","sources":["../../src/utils/shallowEqual.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,YAAY,CAC1B,CAAI,EACJ,CAAI;IAEJ,IAAI,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;QAAE,OAAO,IAAI,CAAC;IACjC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC;QAAE,OAAO,KAAK,CAAC;IAC3B,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAC7B,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAC7B,IAAI,KAAK,CAAC,MAAM,KAAK,KAAK,CAAC,MAAM;QAAE,OAAO,KAAK,CAAC;IAChD,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QACtC,MAAM,GAAG,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;QACrB,IACE,CAAC,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,EAAE,GAAI,CAAC;YAC9C,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,GAAI,CAAC,EAAE,CAAC,CAAC,GAAI,CAAC,CAAC,EAC5B,CAAC;YACD,OAAO,KAAK,CAAC;QACf,CAAC;IACH,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC"}

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@multiplayer-app/session-recorder-react",
+  "version": "1.2.15",
+  "description": "Multiplayer Fullstack Session Recorder for React (browser wrapper)",
+  "author": {
+    "name": "Multiplayer Software, Inc.",
+    "url": "https://www.multiplayer.app"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/multiplayer-app/multiplayer-session-recorder-javascript.git"
+  },
+  "bugs": {
+    "url": "https://github.com/multiplayer-app/multiplayer-session-recorder-javascript/issues"
+  },
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "lint": "eslint src/**/*.{ts,tsx}",
+    "build": "rm -rf dist tsconfig.tsbuildinfo && tsc --build tsconfig.json",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=17",
+    "react-dom": ">=17",
+    "@opentelemetry/api": "^1.9.0"
+  },
+  "dependencies": {
+    "@multiplayer-app/session-recorder-browser": "1.2.15",
+    "@multiplayer-app/session-recorder-common": "1.2.15"
+  },
+  "devDependencies": {
+    "eslint": "8.48.0",
+    "typescript": "5.7.3",
+    "@types/react": "^18.2.66"
+  }
+}

package/src/context/SessionRecorderContext.tsx

@@ -0,0 +1,100 @@
+import React, { createContext, useContext, useEffect, useCallback, type PropsWithChildren } from 'react'
+import SessionRecorder, { SessionState, SessionType } from '@multiplayer-app/session-recorder-browser'
+import { sessionRecorderStore } from './SessionRecorderStore'
+
+type SessionRecorderOptions = any
+
+interface SessionRecorderContextType {
+  instance: typeof SessionRecorder
+  startSession: (sessionType?: SessionType) => void | Promise<void>
+  stopSession: (comment?: string) => Promise<void>
+  pauseSession: () => Promise<void>
+  resumeSession: () => Promise<void>
+  cancelSession: () => Promise<void>
+  saveSession: () => Promise<any>
+}
+
+const SessionRecorderContext = createContext<SessionRecorderContextType | null>(null)
+
+export interface SessionRecorderProviderProps extends PropsWithChildren {
+  options?: SessionRecorderOptions
+}
+
+export const SessionRecorderProvider: React.FC<SessionRecorderProviderProps> = ({ children, options }) => {
+  useEffect(() => {
+    if (options) {
+      SessionRecorder.init(options)
+    }
+    sessionRecorderStore.setState({ isInitialized: SessionRecorder.isInitialized })
+  }, [])
+
+  useEffect(() => {
+    sessionRecorderStore.setState({
+      sessionState: SessionRecorder.sessionState,
+      sessionType: SessionRecorder.sessionType
+    })
+
+    const onStateChange = (sessionState: SessionState) => {
+      sessionRecorderStore.setState({ sessionState })
+    }
+    const onInit = () => {
+      sessionRecorderStore.setState({ isInitialized: true })
+    }
+
+    SessionRecorder.on('state-change', onStateChange)
+    SessionRecorder.on('init', onInit)
+    return () => {
+      SessionRecorder.off('state-change', onStateChange)
+      SessionRecorder.off('init', onInit)
+    }
+  }, [])
+
+  const startSession = useCallback((sessionType: SessionType = SessionType.MANUAL) => {
+    return SessionRecorder.start(sessionType)
+  }, [])
+
+  const stopSession = useCallback((comment?: string) => {
+    return SessionRecorder.stop(comment)
+  }, [])
+
+  const pauseSession = useCallback(() => {
+    return SessionRecorder.pause()
+  }, [])
+
+  const resumeSession = useCallback(() => {
+    return SessionRecorder.resume()
+  }, [])
+
+  const cancelSession = useCallback(() => {
+    return SessionRecorder.cancel()
+  }, [])
+
+  const saveSession = useCallback(() => {
+    return SessionRecorder.save()
+  }, [])
+
+  return (
+    <SessionRecorderContext.Provider
+      value={{
+        instance: SessionRecorder,
+        startSession,
+        stopSession,
+        pauseSession,
+        resumeSession,
+        cancelSession,
+        saveSession
+      }}
+    >
+      {children}
+      {/* No widget component here; consumer can import the browser widget if needed */}
+    </SessionRecorderContext.Provider>
+  )
+}
+
+export const useSessionRecorder = (): SessionRecorderContextType => {
+  const context = useContext(SessionRecorderContext)
+  if (!context) {
+    throw new Error('useSessionRecorder must be used within a SessionRecorderProvider')
+  }
+  return context
+}

package/src/context/SessionRecorderStore.ts

@@ -0,0 +1,20 @@
+import { createStore, type Store } from './createStore';
+import { SessionState, SessionType } from '@multiplayer-app/session-recorder-browser';
+
+
+export type SessionRecorderState = {
+  isInitialized: boolean;
+  sessionType: SessionType | null;
+  sessionState: SessionState | null;
+  isOnline: boolean;
+  error: string | null;
+};
+
+export const sessionRecorderStore: Store<SessionRecorderState> =
+  createStore<SessionRecorderState>({
+    isInitialized: false,
+    sessionType: null,
+    sessionState: null,
+    isOnline: true,
+    error: null,
+  });

package/src/context/createStore.ts

@@ -0,0 +1,37 @@
+export type SessionRecorderState = {
+  isInitialized: boolean
+  sessionType: any | null
+  sessionState: any | null
+  isOnline: boolean
+  error: string | null
+}
+
+type Listener<T> = (state: T, prev: T) => void
+
+export type Store<T> = {
+  getState: () => T
+  setState: (partial: Partial<T> | ((prev: T) => T)) => void
+  subscribe: (listener: Listener<T>) => () => void
+}
+
+export function createStore<T extends object>(initialState: T): Store<T> {
+  let state = initialState
+  const listeners = new Set<Listener<T>>()
+
+  const getState = () => state
+
+  const setState: Store<T>['setState'] = (partial) => {
+    const prev = state
+    const next = typeof partial === 'function' ? (partial as (p: T) => T)(prev) : ({ ...prev, ...partial } as T)
+    if (Object.is(next, prev)) return
+    state = next
+    listeners.forEach((l) => l(state, prev))
+  }
+
+  const subscribe: Store<T>['subscribe'] = (listener) => {
+    listeners.add(listener)
+    return () => listeners.delete(listener)
+  }
+
+  return { getState, setState, subscribe }
+}

package/src/context/useSessionRecorderStore.ts

@@ -0,0 +1,47 @@
+import { SessionState, SessionType } from '@multiplayer-app/session-recorder-browser';
+
+import {
+  type SessionRecorderState,
+  sessionRecorderStore,
+} from './SessionRecorderStore';
+import { useStoreSelector } from './useStoreSelector';
+
+/**
+ * Select a derived slice from the shared Session Recorder store.
+ * Works in both React (web) and React Native since the store shape is identical.
+ *
+ * @param selector - Function that maps the full store state to the slice you need
+ * @param equalityFn - Optional comparator to avoid unnecessary re-renders
+ * @returns The selected slice of state
+ */
+export function useSessionRecorderStore<TSlice>(
+  selector: (s: SessionRecorderState) => TSlice,
+  equalityFn?: (a: TSlice, b: TSlice) => boolean
+): TSlice {
+  return useStoreSelector<SessionRecorderState, TSlice>(
+    sessionRecorderStore,
+    selector,
+    equalityFn
+  );
+}
+
+/**
+ * Read the current session recording state (started, paused, stopped).
+ */
+export function useSessionRecordingState() {
+  return useSessionRecorderStore<SessionState | null>((s) => s.sessionState);
+}
+
+/**
+ * Read the current session type (MANUAL/CONTINUOUS).
+ */
+export function useSessionType() {
+  return useSessionRecorderStore<SessionType | null>((s) => s.sessionType);
+}
+
+/**
+ * Check whether the Session Recorder has been initialized.
+ */
+export function useIsInitialized() {
+  return useSessionRecorderStore<boolean>((s) => s.isInitialized);
+}

package/src/context/useStoreSelector.ts

@@ -0,0 +1,36 @@
+import { useEffect, useRef, useState } from 'react';
+import { type Store } from './createStore';
+import { shallowEqual } from '../utils/shallowEqual';
+
+export function useStoreSelector<TState extends object, TSlice>(
+  store: Store<TState>,
+  selector: (state: TState) => TSlice,
+  equalityFn: (a: TSlice, b: TSlice) => boolean = Object.is
+): TSlice {
+  const latestSelectorRef = useRef(selector);
+  const latestEqualityRef = useRef(equalityFn);
+  latestSelectorRef.current = selector;
+  latestEqualityRef.current = equalityFn;
+
+  const [slice, setSlice] = useState<TSlice>(() =>
+    latestSelectorRef.current(store.getState())
+  );
+
+  useEffect(() => {
+    function handleChange(nextState: TState, prevState: TState) {
+      const nextSlice = latestSelectorRef.current(nextState);
+      const prevSlice = latestSelectorRef.current(prevState);
+      if (!latestEqualityRef.current(nextSlice, prevSlice)) {
+        setSlice(nextSlice);
+      }
+    }
+    const unsubscribe = store.subscribe(handleChange);
+    // Sync once in case changed between render and effect
+    handleChange(store.getState(), store.getState());
+    return unsubscribe;
+  }, [store]);
+
+  return slice;
+}
+
+export const shallow = shallowEqual;

package/src/index.ts

@@ -0,0 +1,10 @@
+import SessionRecorderBrowser from '@multiplayer-app/session-recorder-browser';
+
+export * from '@multiplayer-app/session-recorder-browser';
+export * from './context/SessionRecorderContext';
+export * from './context/useSessionRecorderStore';
+
+export { useNavigationRecorder } from './navigation'
+export type { UseNavigationRecorderOptions } from './navigation'
+
+export default SessionRecorderBrowser

package/src/navigation.ts

@@ -0,0 +1,86 @@
+import { useEffect, useRef } from 'react'
+import SessionRecorderBrowser, {
+  NavigationSignal,
+} from '@multiplayer-app/session-recorder-browser'
+
+export interface UseNavigationRecorderOptions
+  extends Partial<Omit<NavigationSignal, 'path' | 'timestamp'>> {
+  /**
+   * Overrides the path sent to the recorder. Defaults to the provided pathname argument.
+   */
+  path?: string
+  /**
+   * When true (default), document.title is captured if available.
+   */
+  captureDocumentTitle?: boolean
+}
+
+/**
+ * React Router compatible navigation recorder hook.
+ * Call inside a component where you can access current location and navigation events.
+ * Example:
+ *   const location = useLocation();
+ *   useNavigationRecorder(location.pathname);
+ */
+export function useNavigationRecorder(
+  pathname: string,
+  options?: UseNavigationRecorderOptions,
+): void {
+  const optionsRef = useRef(options)
+  const hasRecordedInitialRef = useRef(false)
+  const lastPathRef = useRef<string | null>(null)
+
+  useEffect(() => {
+    optionsRef.current = options
+  }, [options])
+
+  useEffect(() => {
+    if (!pathname || !SessionRecorderBrowser?.navigation) {
+      return
+    }
+
+    const resolvedOptions = optionsRef.current || {}
+    const resolvedPath = resolvedOptions.path ?? pathname
+
+    if (!resolvedPath) {
+      return
+    }
+
+    if (lastPathRef.current === resolvedPath && !resolvedOptions.navigationType) {
+      return
+    }
+
+    const captureDocumentTitle =
+      resolvedOptions.captureDocumentTitle ?? true
+
+    const signal: NavigationSignal = {
+      path: resolvedPath,
+      routeName: resolvedOptions.routeName ?? resolvedPath,
+      title:
+        resolvedOptions.title ??
+        (captureDocumentTitle && typeof document !== 'undefined'
+          ? document.title
+          : undefined),
+      url: resolvedOptions.url,
+      params: resolvedOptions.params,
+      state: resolvedOptions.state,
+      navigationType:
+        resolvedOptions.navigationType ??
+        (hasRecordedInitialRef.current ? undefined : 'initial'),
+      framework: resolvedOptions.framework ?? 'react',
+      source: resolvedOptions.source ?? 'react-router',
+      metadata: resolvedOptions.metadata,
+    }
+
+    try {
+      SessionRecorderBrowser.navigation.record(signal)
+      hasRecordedInitialRef.current = true
+      lastPathRef.current = resolvedPath
+    } catch (error) {
+      if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line no-console
+        console.warn('[SessionRecorder][React] Failed to record navigation', error)
+      }
+    }
+  }, [pathname])
+}

package/src/utils/shallowEqual.ts

@@ -0,0 +1,20 @@
+export function shallowEqual<T extends Record<string, any>>(
+  a: T,
+  b: T
+): boolean {
+  if (Object.is(a, b)) return true;
+  if (!a || !b) return false;
+  const aKeys = Object.keys(a);
+  const bKeys = Object.keys(b);
+  if (aKeys.length !== bKeys.length) return false;
+  for (let i = 0; i < aKeys.length; i++) {
+    const key = aKeys[i];
+    if (
+      !Object.prototype.hasOwnProperty.call(b, key!) ||
+      !Object.is(a[key!], b[key!])
+    ) {
+      return false;
+    }
+  }
+  return true;
+}

package/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "outDir": "dist",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "jsx": "react-jsx",
+    "types": ["react"]
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}