@tenxyte/react 0.5.0 → 0.5.1

package/README.md

@@ -0,0 +1,192 @@
+# @tenxyte/react
+
+React bindings for the [Tenxyte SDK](https://www.npmjs.com/package/@tenxyte/core). Provides reactive hooks that automatically re-render your components when authentication state changes.
+
+## Installation
+
+```bash
+npm install @tenxyte/core @tenxyte/react
+```
+
+## Quick Start
+
+### 1. Create the client and wrap your app
+
+```tsx
+import { TenxyteClient } from '@tenxyte/core';
+import { TenxyteProvider } from '@tenxyte/react';
+import App from './App';
+
+const tx = new TenxyteClient({
+    baseUrl: 'https://api.example.com',
+    applicationId: 'your-app-id',
+    apiKey: 'your-api-key',
+});
+
+function Root() {
+    return (
+        <TenxyteProvider client={tx}>
+            <App />
+        </TenxyteProvider>
+    );
+}
+```
+
+### 2. Use hooks in any component
+
+```tsx
+import { useAuth, useUser, useRbac, useOrganization } from '@tenxyte/react';
+
+function Dashboard() {
+    const { isAuthenticated, loading, logout } = useAuth();
+    const { user } = useUser();
+    const { hasRole } = useRbac();
+
+    if (loading) return <p>Loading...</p>;
+    if (!isAuthenticated) return <LoginPage />;
+
+    return (
+        <div>
+            <p>Welcome, {user?.email}</p>
+            {hasRole('admin') && <AdminPanel />}
+            <button onClick={logout}>Logout</button>
+        </div>
+    );
+}
+```
+
+## Hooks
+
+### `useAuth()`
+
+Reactive authentication state and actions.
+
+```tsx
+const {
+    isAuthenticated, // boolean — true if access token is valid and not expired
+    loading,         // boolean — true while initial state loads from storage
+    accessToken,     // string | null — raw JWT access token
+    loginWithEmail,  // (data: { email, password, device_info?, totp_code? }) => Promise<void>
+    loginWithPhone,  // (data: { phone_country_code, phone_number, password, device_info? }) => Promise<void>
+    logout,          // () => Promise<void>
+    register,        // (data) => Promise<void>
+} = useAuth();
+```
+
+**Example — Login form:**
+
+```tsx
+function LoginPage() {
+    const { loginWithEmail } = useAuth();
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+
+    const handleSubmit = async (e: FormEvent) => {
+        e.preventDefault();
+        await loginWithEmail({ email, password });
+    };
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <input value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" />
+            <input value={password} onChange={(e) => setPassword(e.target.value)} type="password" />
+            <button type="submit">Sign In</button>
+        </form>
+    );
+}
+```
+
+### `useUser()`
+
+Decoded JWT user and profile management.
+
+```tsx
+const {
+    user,          // DecodedTenxyteToken | null — decoded JWT payload
+    loading,       // boolean
+    getProfile,    // () => Promise<UserProfile> — fetch full profile from API
+    updateProfile, // (data) => Promise<unknown>
+} = useUser();
+```
+
+**Example:**
+
+```tsx
+function UserBadge() {
+    const { user, loading } = useUser();
+    if (loading || !user) return null;
+    return <span>{user.email}</span>;
+}
+```
+
+### `useOrganization()`
+
+Multi-tenant organization context (B2B).
+
+```tsx
+const {
+    activeOrg,          // string | null — current org slug
+    switchOrganization, // (slug: string) => void
+    clearOrganization,  // () => void
+} = useOrganization();
+```
+
+**Example:**
+
+```tsx
+function OrgSwitcher({ orgs }: { orgs: { slug: string; name: string }[] }) {
+    const { activeOrg, switchOrganization, clearOrganization } = useOrganization();
+
+    return (
+        <select
+            value={activeOrg ?? ''}
+            onChange={(e) =>
+                e.target.value ? switchOrganization(e.target.value) : clearOrganization()
+            }
+        >
+            <option value="">No organization</option>
+            {orgs.map((o) => (
+                <option key={o.slug} value={o.slug}>{o.name}</option>
+            ))}
+        </select>
+    );
+}
+```
+
+### `useRbac()`
+
+Synchronous role and permission checks from the current JWT.
+
+```tsx
+const {
+    hasRole,       // (role: string) => boolean
+    hasPermission, // (permission: string) => boolean
+    hasAnyRole,    // (roles: string[]) => boolean
+    hasAllRoles,   // (roles: string[]) => boolean
+} = useRbac();
+```
+
+**Example:**
+
+```tsx
+function AdminPanel() {
+    const { hasRole } = useRbac();
+    if (!hasRole('admin')) return <p>Access denied</p>;
+    return <AdminDashboard />;
+}
+```
+
+## How It Works
+
+`TenxyteProvider` places the `TenxyteClient` instance into React context. Each hook subscribes to SDK events (`token:stored`, `token:refreshed`, `session:expired`) and triggers a re-render when the auth state changes. All state updates are automatic — no manual invalidation needed.
+
+## Peer Dependencies
+
+| Package | Version |
+|---|---|
+| `@tenxyte/core` | `^0.9.2` |
+| `react` | `^18.0.0 \|\| ^19.0.0` |
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,188 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  TenxyteContext: () => TenxyteContext,
+  TenxyteProvider: () => TenxyteProvider,
+  useAuth: () => useAuth,
+  useOrganization: () => useOrganization,
+  useRbac: () => useRbac,
+  useTenxyteClient: () => useTenxyteClient,
+  useTenxyteState: () => useTenxyteState,
+  useUser: () => useUser
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/context.tsx
+var import_react = require("react");
+var TenxyteContext = (0, import_react.createContext)(null);
+function useTenxyteClient() {
+  const client = (0, import_react.useContext)(TenxyteContext);
+  if (!client) {
+    throw new Error(
+      "[@tenxyte/react] useTenxyteClient must be used within a <TenxyteProvider>. Wrap your app with <TenxyteProvider client={tx}>."
+    );
+  }
+  return client;
+}
+
+// src/provider.tsx
+var import_react2 = __toESM(require("react"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
+function TenxyteProvider({ client, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TenxyteContext.Provider, { value: client, children });
+}
+function useTenxyteState() {
+  const client = import_react2.default.useContext(TenxyteContext);
+  if (!client) {
+    throw new Error("[@tenxyte/react] useTenxyteState must be used within a <TenxyteProvider>.");
+  }
+  const [state, setState] = (0, import_react2.useState)({
+    isAuthenticated: false,
+    user: null,
+    accessToken: null,
+    activeOrg: null,
+    isAgentMode: false
+  });
+  const [loading, setLoading] = (0, import_react2.useState)(true);
+  const refresh = (0, import_react2.useCallback)(async () => {
+    const snapshot = await client.getState();
+    setState(snapshot);
+    setLoading(false);
+  }, [client]);
+  (0, import_react2.useEffect)(() => {
+    refresh();
+    const unsubs = [
+      client.on("token:stored", () => {
+        refresh();
+      }),
+      client.on("token:refreshed", () => {
+        refresh();
+      }),
+      client.on("session:expired", () => {
+        refresh();
+      })
+    ];
+    return () => {
+      unsubs.forEach((unsub) => unsub());
+    };
+  }, [client, refresh]);
+  return (0, import_react2.useMemo)(() => ({ ...state, loading }), [state, loading]);
+}
+
+// src/hooks.ts
+var import_react3 = require("react");
+function useAuth() {
+  const client = useTenxyteClient();
+  const { isAuthenticated, loading, accessToken } = useTenxyteState();
+  const loginWithEmail = (0, import_react3.useCallback)(
+    async (data) => {
+      await client.auth.loginWithEmail({ ...data, device_info: data.device_info ?? "" });
+    },
+    [client]
+  );
+  const loginWithPhone = (0, import_react3.useCallback)(
+    async (data) => {
+      await client.auth.loginWithPhone({ ...data, device_info: data.device_info ?? "" });
+    },
+    [client]
+  );
+  const logout = (0, import_react3.useCallback)(async () => {
+    await client.auth.logoutAll();
+  }, [client]);
+  const register = (0, import_react3.useCallback)(
+    async (data) => {
+      await client.auth.register(data);
+    },
+    [client]
+  );
+  return { isAuthenticated, loading, accessToken, loginWithEmail, loginWithPhone, logout, register };
+}
+function useUser() {
+  const client = useTenxyteClient();
+  const { user, loading } = useTenxyteState();
+  const getProfile = (0, import_react3.useCallback)(() => client.user.getProfile(), [client]);
+  const updateProfile = (0, import_react3.useCallback)(
+    (data) => client.user.updateProfile(data),
+    [client]
+  );
+  return { user, loading, getProfile, updateProfile };
+}
+function useOrganization() {
+  const client = useTenxyteClient();
+  const { activeOrg } = useTenxyteState();
+  const switchOrganization = (0, import_react3.useCallback)(
+    (slug) => {
+      client.b2b.switchOrganization(slug);
+    },
+    [client]
+  );
+  const clearOrganization = (0, import_react3.useCallback)(
+    () => {
+      client.b2b.clearOrganization();
+    },
+    [client]
+  );
+  return { activeOrg, switchOrganization, clearOrganization };
+}
+function useRbac() {
+  const client = useTenxyteClient();
+  const { accessToken } = useTenxyteState();
+  const hasRole = (0, import_react3.useCallback)(
+    (role) => client.rbac.hasRole(role, accessToken ?? void 0),
+    [client, accessToken]
+  );
+  const hasPermission = (0, import_react3.useCallback)(
+    (permission) => client.rbac.hasPermission(permission, accessToken ?? void 0),
+    [client, accessToken]
+  );
+  const hasAnyRole = (0, import_react3.useCallback)(
+    (roles) => client.rbac.hasAnyRole(roles, accessToken ?? void 0),
+    [client, accessToken]
+  );
+  const hasAllRoles = (0, import_react3.useCallback)(
+    (roles) => client.rbac.hasAllRoles(roles, accessToken ?? void 0),
+    [client, accessToken]
+  );
+  return { hasRole, hasPermission, hasAnyRole, hasAllRoles };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TenxyteContext,
+  TenxyteProvider,
+  useAuth,
+  useOrganization,
+  useRbac,
+  useTenxyteClient,
+  useTenxyteState,
+  useUser
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/context.tsx","../src/provider.tsx","../src/hooks.ts"],"sourcesContent":["export { TenxyteContext, useTenxyteClient } from './context';\nexport { TenxyteProvider, useTenxyteState } from './provider';\nexport type { TenxyteProviderProps } from './provider';\nexport { useAuth, useUser, useOrganization, useRbac } from './hooks';\nexport type { UseAuthReturn, UseUserReturn, UseOrganizationReturn, UseRbacReturn } from './hooks';\n","import { createContext, useContext } from 'react';\nimport type { TenxyteClient } from '@tenxyte/core';\n\n/**\n * React context holding the TenxyteClient instance.\n * Must be provided via <TenxyteProvider>.\n */\nexport const TenxyteContext = createContext<TenxyteClient | null>(null);\n\n/**\n * Internal hook to access the TenxyteClient instance.\n * Throws if used outside of a <TenxyteProvider>.\n */\nexport function useTenxyteClient(): TenxyteClient {\n    const client = useContext(TenxyteContext);\n    if (!client) {\n        throw new Error(\n            '[@tenxyte/react] useTenxyteClient must be used within a <TenxyteProvider>. ' +\n            'Wrap your app with <TenxyteProvider client={tx}>.',\n        );\n    }\n    return client;\n}\n","import React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport type { TenxyteClient, TenxyteClientState } from '@tenxyte/core';\nimport { TenxyteContext } from './context';\n\nexport interface TenxyteProviderProps {\n    /** The initialized TenxyteClient instance. */\n    client: TenxyteClient;\n    children: React.ReactNode;\n}\n\n/**\n * Provides the TenxyteClient to all descendant components and manages\n * reactive state synchronization via SDK events.\n *\n * @example\n * ```tsx\n * import { TenxyteClient } from '@tenxyte/core';\n * import { TenxyteProvider } from '@tenxyte/react';\n *\n * const tx = new TenxyteClient({ baseUrl: '...' });\n *\n * function App() {\n *     return (\n *         <TenxyteProvider client={tx}>\n *             <MyApp />\n *         </TenxyteProvider>\n *     );\n * }\n * ```\n */\nexport function TenxyteProvider({ client, children }: TenxyteProviderProps): React.JSX.Element {\n    return (\n        <TenxyteContext.Provider value={client}>\n            {children}\n        </TenxyteContext.Provider>\n    );\n}\n\n/**\n * Internal hook that subscribes to SDK events and returns a reactive state snapshot.\n * Re-renders consuming components whenever auth state changes.\n */\nexport function useTenxyteState(): TenxyteClientState & { loading: boolean } {\n    const client = React.useContext(TenxyteContext);\n    if (!client) {\n        throw new Error('[@tenxyte/react] useTenxyteState must be used within a <TenxyteProvider>.');\n    }\n\n    const [state, setState] = useState<TenxyteClientState>({\n        isAuthenticated: false,\n        user: null,\n        accessToken: null,\n        activeOrg: null,\n        isAgentMode: false,\n    });\n    const [loading, setLoading] = useState(true);\n\n    const refresh = useCallback(async () => {\n        const snapshot = await client.getState();\n        setState(snapshot);\n        setLoading(false);\n    }, [client]);\n\n    useEffect(() => {\n        // Initial state load\n        refresh();\n\n        // Subscribe to all state-changing events\n        const unsubs = [\n            client.on('token:stored', () => { refresh(); }),\n            client.on('token:refreshed', () => { refresh(); }),\n            client.on('session:expired', () => { refresh(); }),\n        ];\n\n        return () => {\n            unsubs.forEach((unsub) => unsub());\n        };\n    }, [client, refresh]);\n\n    return useMemo(() => ({ ...state, loading }), [state, loading]);\n}\n","import { useCallback } from 'react';\nimport type { DecodedTenxyteToken } from '@tenxyte/core';\nimport { useTenxyteClient } from './context';\nimport { useTenxyteState } from './provider';\n\n// ─── useAuth ───\n\nexport interface UseAuthReturn {\n    /** Whether the user has a valid, non-expired access token. */\n    isAuthenticated: boolean;\n    /** Whether the initial state is still loading from storage. */\n    loading: boolean;\n    /** Raw access token string, or null. */\n    accessToken: string | null;\n    /** Login with email/password. Triggers re-render on success. */\n    loginWithEmail: (data: { email: string; password: string; device_info?: string; totp_code?: string }) => Promise<void>;\n    /** Login with phone/password. */\n    loginWithPhone: (data: { phone_country_code: string; phone_number: string; password: string; device_info?: string }) => Promise<void>;\n    /** Logout from all sessions. */\n    logout: () => Promise<void>;\n    /** Register a new account. */\n    register: (data: Record<string, unknown>) => Promise<void>;\n}\n\n/**\n * Reactive authentication hook.\n * Automatically re-renders when the auth state changes (login, logout, refresh, expiry).\n *\n * @example\n * ```tsx\n * function LoginPage() {\n *     const { isAuthenticated, loginWithEmail, logout, loading } = useAuth();\n *\n *     if (loading) return <p>Loading...</p>;\n *     if (isAuthenticated) return <button onClick={logout}>Logout</button>;\n *\n *     return <button onClick={() => loginWithEmail({ email: '...', password: '...' })}>Login</button>;\n * }\n * ```\n */\nexport function useAuth(): UseAuthReturn {\n    const client = useTenxyteClient();\n    const { isAuthenticated, loading, accessToken } = useTenxyteState();\n\n    const loginWithEmail = useCallback(\n        async (data: { email: string; password: string; device_info?: string; totp_code?: string }) => {\n            await client.auth.loginWithEmail({ ...data, device_info: data.device_info ?? '' });\n        },\n        [client],\n    );\n\n    const loginWithPhone = useCallback(\n        async (data: { phone_country_code: string; phone_number: string; password: string; device_info?: string }) => {\n            await client.auth.loginWithPhone({ ...data, device_info: data.device_info ?? '' });\n        },\n        [client],\n    );\n\n    const logout = useCallback(async () => {\n        await client.auth.logoutAll();\n    }, [client]);\n\n    const register = useCallback(\n        async (data: Record<string, unknown>) => {\n            await client.auth.register(data as any);\n        },\n        [client],\n    );\n\n    return { isAuthenticated, loading, accessToken, loginWithEmail, loginWithPhone, logout, register };\n}\n\n// ─── useUser ───\n\nexport interface UseUserReturn {\n    /** Decoded JWT payload of the current access token, or null. */\n    user: DecodedTenxyteToken | null;\n    /** Whether the initial state is still loading. */\n    loading: boolean;\n    /** Fetch the full user profile from the backend. */\n    getProfile: () => ReturnType<typeof import('@tenxyte/core').TenxyteClient.prototype.user.getProfile>;\n    /** Update the current user's profile. */\n    updateProfile: (data: Record<string, unknown>) => Promise<unknown>;\n}\n\n/**\n * Reactive user hook.\n * Returns the decoded JWT user and convenience methods for profile management.\n *\n * @example\n * ```tsx\n * function UserBadge() {\n *     const { user, loading } = useUser();\n *     if (loading || !user) return null;\n *     return <span>{user.email}</span>;\n * }\n * ```\n */\nexport function useUser(): UseUserReturn {\n    const client = useTenxyteClient();\n    const { user, loading } = useTenxyteState();\n\n    const getProfile = useCallback(() => client.user.getProfile(), [client]);\n\n    const updateProfile = useCallback(\n        (data: Record<string, unknown>) => client.user.updateProfile(data),\n        [client],\n    );\n\n    return { user, loading, getProfile, updateProfile };\n}\n\n// ─── useOrganization ───\n\nexport interface UseOrganizationReturn {\n    /** Currently active organization slug, or null. */\n    activeOrg: string | null;\n    /** Switch the SDK to operate within an organization context. */\n    switchOrganization: (slug: string) => void;\n    /** Clear the organization context. */\n    clearOrganization: () => void;\n}\n\n/**\n * Reactive organization context hook.\n * Returns the current org slug and methods to switch/clear context.\n *\n * @example\n * ```tsx\n * function OrgSwitcher({ orgs }) {\n *     const { activeOrg, switchOrganization, clearOrganization } = useOrganization();\n *     return (\n *         <select value={activeOrg ?? ''} onChange={(e) =>\n *             e.target.value ? switchOrganization(e.target.value) : clearOrganization()\n *         }>\n *             <option value=\"\">No org</option>\n *             {orgs.map(o => <option key={o.slug} value={o.slug}>{o.name}</option>)}\n *         </select>\n *     );\n * }\n * ```\n */\nexport function useOrganization(): UseOrganizationReturn {\n    const client = useTenxyteClient();\n    const { activeOrg } = useTenxyteState();\n\n    const switchOrganization = useCallback(\n        (slug: string) => { client.b2b.switchOrganization(slug); },\n        [client],\n    );\n\n    const clearOrganization = useCallback(\n        () => { client.b2b.clearOrganization(); },\n        [client],\n    );\n\n    return { activeOrg, switchOrganization, clearOrganization };\n}\n\n// ─── useRbac ───\n\nexport interface UseRbacReturn {\n    /** Check if the current user has a specific role (synchronous JWT check). */\n    hasRole: (role: string) => boolean;\n    /** Check if the current user has a specific permission (synchronous JWT check). */\n    hasPermission: (permission: string) => boolean;\n    /** Check if the current user has any of the given roles. */\n    hasAnyRole: (roles: string[]) => boolean;\n    /** Check if the current user has all of the given roles. */\n    hasAllRoles: (roles: string[]) => boolean;\n}\n\n/**\n * Reactive RBAC hook.\n * Provides synchronous role/permission checks based on the current JWT.\n *\n * @example\n * ```tsx\n * function AdminPanel() {\n *     const { hasRole } = useRbac();\n *     if (!hasRole('admin')) return <p>Access denied</p>;\n *     return <AdminDashboard />;\n * }\n * ```\n */\nexport function useRbac(): UseRbacReturn {\n    const client = useTenxyteClient();\n    const { accessToken } = useTenxyteState();\n\n    const hasRole = useCallback(\n        (role: string) => client.rbac.hasRole(role, accessToken ?? undefined),\n        [client, accessToken],\n    );\n\n    const hasPermission = useCallback(\n        (permission: string) => client.rbac.hasPermission(permission, accessToken ?? undefined),\n        [client, accessToken],\n    );\n\n    const hasAnyRole = useCallback(\n        (roles: string[]) => client.rbac.hasAnyRole(roles, accessToken ?? undefined),\n        [client, accessToken],\n    );\n\n    const hasAllRoles = useCallback(\n        (roles: string[]) => client.rbac.hasAllRoles(roles, accessToken ?? undefined),\n        [client, accessToken],\n    );\n\n    return { hasRole, hasPermission, hasAnyRole, hasAllRoles };\n}\n"],"mappings":"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","names":["import_react","React","import_react"]}

package/dist/index.d.cts

@@ -0,0 +1,171 @@
+import * as React from 'react';
+import React__default from 'react';
+import * as _tenxyte_core from '@tenxyte/core';
+import { TenxyteClient, TenxyteClientState, DecodedTenxyteToken } from '@tenxyte/core';
+
+/**
+ * React context holding the TenxyteClient instance.
+ * Must be provided via <TenxyteProvider>.
+ */
+declare const TenxyteContext: React.Context<TenxyteClient | null>;
+/**
+ * Internal hook to access the TenxyteClient instance.
+ * Throws if used outside of a <TenxyteProvider>.
+ */
+declare function useTenxyteClient(): TenxyteClient;
+
+interface TenxyteProviderProps {
+    /** The initialized TenxyteClient instance. */
+    client: TenxyteClient;
+    children: React__default.ReactNode;
+}
+/**
+ * Provides the TenxyteClient to all descendant components and manages
+ * reactive state synchronization via SDK events.
+ *
+ * @example
+ * ```tsx
+ * import { TenxyteClient } from '@tenxyte/core';
+ * import { TenxyteProvider } from '@tenxyte/react';
+ *
+ * const tx = new TenxyteClient({ baseUrl: '...' });
+ *
+ * function App() {
+ *     return (
+ *         <TenxyteProvider client={tx}>
+ *             <MyApp />
+ *         </TenxyteProvider>
+ *     );
+ * }
+ * ```
+ */
+declare function TenxyteProvider({ client, children }: TenxyteProviderProps): React__default.JSX.Element;
+/**
+ * Internal hook that subscribes to SDK events and returns a reactive state snapshot.
+ * Re-renders consuming components whenever auth state changes.
+ */
+declare function useTenxyteState(): TenxyteClientState & {
+    loading: boolean;
+};
+
+interface UseAuthReturn {
+    /** Whether the user has a valid, non-expired access token. */
+    isAuthenticated: boolean;
+    /** Whether the initial state is still loading from storage. */
+    loading: boolean;
+    /** Raw access token string, or null. */
+    accessToken: string | null;
+    /** Login with email/password. Triggers re-render on success. */
+    loginWithEmail: (data: {
+        email: string;
+        password: string;
+        device_info?: string;
+        totp_code?: string;
+    }) => Promise<void>;
+    /** Login with phone/password. */
+    loginWithPhone: (data: {
+        phone_country_code: string;
+        phone_number: string;
+        password: string;
+        device_info?: string;
+    }) => Promise<void>;
+    /** Logout from all sessions. */
+    logout: () => Promise<void>;
+    /** Register a new account. */
+    register: (data: Record<string, unknown>) => Promise<void>;
+}
+/**
+ * Reactive authentication hook.
+ * Automatically re-renders when the auth state changes (login, logout, refresh, expiry).
+ *
+ * @example
+ * ```tsx
+ * function LoginPage() {
+ *     const { isAuthenticated, loginWithEmail, logout, loading } = useAuth();
+ *
+ *     if (loading) return <p>Loading...</p>;
+ *     if (isAuthenticated) return <button onClick={logout}>Logout</button>;
+ *
+ *     return <button onClick={() => loginWithEmail({ email: '...', password: '...' })}>Login</button>;
+ * }
+ * ```
+ */
+declare function useAuth(): UseAuthReturn;
+interface UseUserReturn {
+    /** Decoded JWT payload of the current access token, or null. */
+    user: DecodedTenxyteToken | null;
+    /** Whether the initial state is still loading. */
+    loading: boolean;
+    /** Fetch the full user profile from the backend. */
+    getProfile: () => ReturnType<typeof _tenxyte_core.TenxyteClient.prototype.user.getProfile>;
+    /** Update the current user's profile. */
+    updateProfile: (data: Record<string, unknown>) => Promise<unknown>;
+}
+/**
+ * Reactive user hook.
+ * Returns the decoded JWT user and convenience methods for profile management.
+ *
+ * @example
+ * ```tsx
+ * function UserBadge() {
+ *     const { user, loading } = useUser();
+ *     if (loading || !user) return null;
+ *     return <span>{user.email}</span>;
+ * }
+ * ```
+ */
+declare function useUser(): UseUserReturn;
+interface UseOrganizationReturn {
+    /** Currently active organization slug, or null. */
+    activeOrg: string | null;
+    /** Switch the SDK to operate within an organization context. */
+    switchOrganization: (slug: string) => void;
+    /** Clear the organization context. */
+    clearOrganization: () => void;
+}
+/**
+ * Reactive organization context hook.
+ * Returns the current org slug and methods to switch/clear context.
+ *
+ * @example
+ * ```tsx
+ * function OrgSwitcher({ orgs }) {
+ *     const { activeOrg, switchOrganization, clearOrganization } = useOrganization();
+ *     return (
+ *         <select value={activeOrg ?? ''} onChange={(e) =>
+ *             e.target.value ? switchOrganization(e.target.value) : clearOrganization()
+ *         }>
+ *             <option value="">No org</option>
+ *             {orgs.map(o => <option key={o.slug} value={o.slug}>{o.name}</option>)}
+ *         </select>
+ *     );
+ * }
+ * ```
+ */
+declare function useOrganization(): UseOrganizationReturn;
+interface UseRbacReturn {
+    /** Check if the current user has a specific role (synchronous JWT check). */
+    hasRole: (role: string) => boolean;
+    /** Check if the current user has a specific permission (synchronous JWT check). */
+    hasPermission: (permission: string) => boolean;
+    /** Check if the current user has any of the given roles. */
+    hasAnyRole: (roles: string[]) => boolean;
+    /** Check if the current user has all of the given roles. */
+    hasAllRoles: (roles: string[]) => boolean;
+}
+/**
+ * Reactive RBAC hook.
+ * Provides synchronous role/permission checks based on the current JWT.
+ *
+ * @example
+ * ```tsx
+ * function AdminPanel() {
+ *     const { hasRole } = useRbac();
+ *     if (!hasRole('admin')) return <p>Access denied</p>;
+ *     return <AdminDashboard />;
+ * }
+ * ```
+ */
+declare function useRbac(): UseRbacReturn;
+
+export { TenxyteContext, TenxyteProvider, type TenxyteProviderProps, type UseAuthReturn, type UseOrganizationReturn, type UseRbacReturn, type UseUserReturn, useAuth, useOrganization, useRbac, useTenxyteClient, useTenxyteState, useUser };

package/dist/index.d.ts

@@ -0,0 +1,171 @@
+import * as React from 'react';
+import React__default from 'react';
+import * as _tenxyte_core from '@tenxyte/core';
+import { TenxyteClient, TenxyteClientState, DecodedTenxyteToken } from '@tenxyte/core';
+
+/**
+ * React context holding the TenxyteClient instance.
+ * Must be provided via <TenxyteProvider>.
+ */
+declare const TenxyteContext: React.Context<TenxyteClient | null>;
+/**
+ * Internal hook to access the TenxyteClient instance.
+ * Throws if used outside of a <TenxyteProvider>.
+ */
+declare function useTenxyteClient(): TenxyteClient;
+
+interface TenxyteProviderProps {
+    /** The initialized TenxyteClient instance. */
+    client: TenxyteClient;
+    children: React__default.ReactNode;
+}
+/**
+ * Provides the TenxyteClient to all descendant components and manages
+ * reactive state synchronization via SDK events.
+ *
+ * @example
+ * ```tsx
+ * import { TenxyteClient } from '@tenxyte/core';
+ * import { TenxyteProvider } from '@tenxyte/react';
+ *
+ * const tx = new TenxyteClient({ baseUrl: '...' });
+ *
+ * function App() {
+ *     return (
+ *         <TenxyteProvider client={tx}>
+ *             <MyApp />
+ *         </TenxyteProvider>
+ *     );
+ * }
+ * ```
+ */
+declare function TenxyteProvider({ client, children }: TenxyteProviderProps): React__default.JSX.Element;
+/**
+ * Internal hook that subscribes to SDK events and returns a reactive state snapshot.
+ * Re-renders consuming components whenever auth state changes.
+ */
+declare function useTenxyteState(): TenxyteClientState & {
+    loading: boolean;
+};
+
+interface UseAuthReturn {
+    /** Whether the user has a valid, non-expired access token. */
+    isAuthenticated: boolean;
+    /** Whether the initial state is still loading from storage. */
+    loading: boolean;
+    /** Raw access token string, or null. */
+    accessToken: string | null;
+    /** Login with email/password. Triggers re-render on success. */
+    loginWithEmail: (data: {
+        email: string;
+        password: string;
+        device_info?: string;
+        totp_code?: string;
+    }) => Promise<void>;
+    /** Login with phone/password. */
+    loginWithPhone: (data: {
+        phone_country_code: string;
+        phone_number: string;
+        password: string;
+        device_info?: string;
+    }) => Promise<void>;
+    /** Logout from all sessions. */
+    logout: () => Promise<void>;
+    /** Register a new account. */
+    register: (data: Record<string, unknown>) => Promise<void>;
+}
+/**
+ * Reactive authentication hook.
+ * Automatically re-renders when the auth state changes (login, logout, refresh, expiry).
+ *
+ * @example
+ * ```tsx
+ * function LoginPage() {
+ *     const { isAuthenticated, loginWithEmail, logout, loading } = useAuth();
+ *
+ *     if (loading) return <p>Loading...</p>;
+ *     if (isAuthenticated) return <button onClick={logout}>Logout</button>;
+ *
+ *     return <button onClick={() => loginWithEmail({ email: '...', password: '...' })}>Login</button>;
+ * }
+ * ```
+ */
+declare function useAuth(): UseAuthReturn;
+interface UseUserReturn {
+    /** Decoded JWT payload of the current access token, or null. */
+    user: DecodedTenxyteToken | null;
+    /** Whether the initial state is still loading. */
+    loading: boolean;
+    /** Fetch the full user profile from the backend. */
+    getProfile: () => ReturnType<typeof _tenxyte_core.TenxyteClient.prototype.user.getProfile>;
+    /** Update the current user's profile. */
+    updateProfile: (data: Record<string, unknown>) => Promise<unknown>;
+}
+/**
+ * Reactive user hook.
+ * Returns the decoded JWT user and convenience methods for profile management.
+ *
+ * @example
+ * ```tsx
+ * function UserBadge() {
+ *     const { user, loading } = useUser();
+ *     if (loading || !user) return null;
+ *     return <span>{user.email}</span>;
+ * }
+ * ```
+ */
+declare function useUser(): UseUserReturn;
+interface UseOrganizationReturn {
+    /** Currently active organization slug, or null. */
+    activeOrg: string | null;
+    /** Switch the SDK to operate within an organization context. */
+    switchOrganization: (slug: string) => void;
+    /** Clear the organization context. */
+    clearOrganization: () => void;
+}
+/**
+ * Reactive organization context hook.
+ * Returns the current org slug and methods to switch/clear context.
+ *
+ * @example
+ * ```tsx
+ * function OrgSwitcher({ orgs }) {
+ *     const { activeOrg, switchOrganization, clearOrganization } = useOrganization();
+ *     return (
+ *         <select value={activeOrg ?? ''} onChange={(e) =>
+ *             e.target.value ? switchOrganization(e.target.value) : clearOrganization()
+ *         }>
+ *             <option value="">No org</option>
+ *             {orgs.map(o => <option key={o.slug} value={o.slug}>{o.name}</option>)}
+ *         </select>
+ *     );
+ * }
+ * ```
+ */
+declare function useOrganization(): UseOrganizationReturn;
+interface UseRbacReturn {
+    /** Check if the current user has a specific role (synchronous JWT check). */
+    hasRole: (role: string) => boolean;
+    /** Check if the current user has a specific permission (synchronous JWT check). */
+    hasPermission: (permission: string) => boolean;
+    /** Check if the current user has any of the given roles. */
+    hasAnyRole: (roles: string[]) => boolean;
+    /** Check if the current user has all of the given roles. */
+    hasAllRoles: (roles: string[]) => boolean;
+}
+/**
+ * Reactive RBAC hook.
+ * Provides synchronous role/permission checks based on the current JWT.
+ *
+ * @example
+ * ```tsx
+ * function AdminPanel() {
+ *     const { hasRole } = useRbac();
+ *     if (!hasRole('admin')) return <p>Access denied</p>;
+ *     return <AdminDashboard />;
+ * }
+ * ```
+ */
+declare function useRbac(): UseRbacReturn;
+
+export { TenxyteContext, TenxyteProvider, type TenxyteProviderProps, type UseAuthReturn, type UseOrganizationReturn, type UseRbacReturn, type UseUserReturn, useAuth, useOrganization, useRbac, useTenxyteClient, useTenxyteState, useUser };

package/dist/index.js

@@ -0,0 +1,144 @@
+// src/context.tsx
+import { createContext, useContext } from "react";
+var TenxyteContext = createContext(null);
+function useTenxyteClient() {
+  const client = useContext(TenxyteContext);
+  if (!client) {
+    throw new Error(
+      "[@tenxyte/react] useTenxyteClient must be used within a <TenxyteProvider>. Wrap your app with <TenxyteProvider client={tx}>."
+    );
+  }
+  return client;
+}
+
+// src/provider.tsx
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+function TenxyteProvider({ client, children }) {
+  return /* @__PURE__ */ jsx(TenxyteContext.Provider, { value: client, children });
+}
+function useTenxyteState() {
+  const client = React.useContext(TenxyteContext);
+  if (!client) {
+    throw new Error("[@tenxyte/react] useTenxyteState must be used within a <TenxyteProvider>.");
+  }
+  const [state, setState] = useState({
+    isAuthenticated: false,
+    user: null,
+    accessToken: null,
+    activeOrg: null,
+    isAgentMode: false
+  });
+  const [loading, setLoading] = useState(true);
+  const refresh = useCallback(async () => {
+    const snapshot = await client.getState();
+    setState(snapshot);
+    setLoading(false);
+  }, [client]);
+  useEffect(() => {
+    refresh();
+    const unsubs = [
+      client.on("token:stored", () => {
+        refresh();
+      }),
+      client.on("token:refreshed", () => {
+        refresh();
+      }),
+      client.on("session:expired", () => {
+        refresh();
+      })
+    ];
+    return () => {
+      unsubs.forEach((unsub) => unsub());
+    };
+  }, [client, refresh]);
+  return useMemo(() => ({ ...state, loading }), [state, loading]);
+}
+
+// src/hooks.ts
+import { useCallback as useCallback2 } from "react";
+function useAuth() {
+  const client = useTenxyteClient();
+  const { isAuthenticated, loading, accessToken } = useTenxyteState();
+  const loginWithEmail = useCallback2(
+    async (data) => {
+      await client.auth.loginWithEmail({ ...data, device_info: data.device_info ?? "" });
+    },
+    [client]
+  );
+  const loginWithPhone = useCallback2(
+    async (data) => {
+      await client.auth.loginWithPhone({ ...data, device_info: data.device_info ?? "" });
+    },
+    [client]
+  );
+  const logout = useCallback2(async () => {
+    await client.auth.logoutAll();
+  }, [client]);
+  const register = useCallback2(
+    async (data) => {
+      await client.auth.register(data);
+    },
+    [client]
+  );
+  return { isAuthenticated, loading, accessToken, loginWithEmail, loginWithPhone, logout, register };
+}
+function useUser() {
+  const client = useTenxyteClient();
+  const { user, loading } = useTenxyteState();
+  const getProfile = useCallback2(() => client.user.getProfile(), [client]);
+  const updateProfile = useCallback2(
+    (data) => client.user.updateProfile(data),
+    [client]
+  );
+  return { user, loading, getProfile, updateProfile };
+}
+function useOrganization() {
+  const client = useTenxyteClient();
+  const { activeOrg } = useTenxyteState();
+  const switchOrganization = useCallback2(
+    (slug) => {
+      client.b2b.switchOrganization(slug);
+    },
+    [client]
+  );
+  const clearOrganization = useCallback2(
+    () => {
+      client.b2b.clearOrganization();
+    },
+    [client]
+  );
+  return { activeOrg, switchOrganization, clearOrganization };
+}
+function useRbac() {
+  const client = useTenxyteClient();
+  const { accessToken } = useTenxyteState();
+  const hasRole = useCallback2(
+    (role) => client.rbac.hasRole(role, accessToken ?? void 0),
+    [client, accessToken]
+  );
+  const hasPermission = useCallback2(
+    (permission) => client.rbac.hasPermission(permission, accessToken ?? void 0),
+    [client, accessToken]
+  );
+  const hasAnyRole = useCallback2(
+    (roles) => client.rbac.hasAnyRole(roles, accessToken ?? void 0),
+    [client, accessToken]
+  );
+  const hasAllRoles = useCallback2(
+    (roles) => client.rbac.hasAllRoles(roles, accessToken ?? void 0),
+    [client, accessToken]
+  );
+  return { hasRole, hasPermission, hasAnyRole, hasAllRoles };
+}
+export {
+  TenxyteContext,
+  TenxyteProvider,
+  useAuth,
+  useOrganization,
+  useRbac,
+  useTenxyteClient,
+  useTenxyteState,
+  useUser
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/context.tsx","../src/provider.tsx","../src/hooks.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\nimport type { TenxyteClient } from '@tenxyte/core';\n\n/**\n * React context holding the TenxyteClient instance.\n * Must be provided via <TenxyteProvider>.\n */\nexport const TenxyteContext = createContext<TenxyteClient | null>(null);\n\n/**\n * Internal hook to access the TenxyteClient instance.\n * Throws if used outside of a <TenxyteProvider>.\n */\nexport function useTenxyteClient(): TenxyteClient {\n    const client = useContext(TenxyteContext);\n    if (!client) {\n        throw new Error(\n            '[@tenxyte/react] useTenxyteClient must be used within a <TenxyteProvider>. ' +\n            'Wrap your app with <TenxyteProvider client={tx}>.',\n        );\n    }\n    return client;\n}\n","import React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport type { TenxyteClient, TenxyteClientState } from '@tenxyte/core';\nimport { TenxyteContext } from './context';\n\nexport interface TenxyteProviderProps {\n    /** The initialized TenxyteClient instance. */\n    client: TenxyteClient;\n    children: React.ReactNode;\n}\n\n/**\n * Provides the TenxyteClient to all descendant components and manages\n * reactive state synchronization via SDK events.\n *\n * @example\n * ```tsx\n * import { TenxyteClient } from '@tenxyte/core';\n * import { TenxyteProvider } from '@tenxyte/react';\n *\n * const tx = new TenxyteClient({ baseUrl: '...' });\n *\n * function App() {\n *     return (\n *         <TenxyteProvider client={tx}>\n *             <MyApp />\n *         </TenxyteProvider>\n *     );\n * }\n * ```\n */\nexport function TenxyteProvider({ client, children }: TenxyteProviderProps): React.JSX.Element {\n    return (\n        <TenxyteContext.Provider value={client}>\n            {children}\n        </TenxyteContext.Provider>\n    );\n}\n\n/**\n * Internal hook that subscribes to SDK events and returns a reactive state snapshot.\n * Re-renders consuming components whenever auth state changes.\n */\nexport function useTenxyteState(): TenxyteClientState & { loading: boolean } {\n    const client = React.useContext(TenxyteContext);\n    if (!client) {\n        throw new Error('[@tenxyte/react] useTenxyteState must be used within a <TenxyteProvider>.');\n    }\n\n    const [state, setState] = useState<TenxyteClientState>({\n        isAuthenticated: false,\n        user: null,\n        accessToken: null,\n        activeOrg: null,\n        isAgentMode: false,\n    });\n    const [loading, setLoading] = useState(true);\n\n    const refresh = useCallback(async () => {\n        const snapshot = await client.getState();\n        setState(snapshot);\n        setLoading(false);\n    }, [client]);\n\n    useEffect(() => {\n        // Initial state load\n        refresh();\n\n        // Subscribe to all state-changing events\n        const unsubs = [\n            client.on('token:stored', () => { refresh(); }),\n            client.on('token:refreshed', () => { refresh(); }),\n            client.on('session:expired', () => { refresh(); }),\n        ];\n\n        return () => {\n            unsubs.forEach((unsub) => unsub());\n        };\n    }, [client, refresh]);\n\n    return useMemo(() => ({ ...state, loading }), [state, loading]);\n}\n","import { useCallback } from 'react';\nimport type { DecodedTenxyteToken } from '@tenxyte/core';\nimport { useTenxyteClient } from './context';\nimport { useTenxyteState } from './provider';\n\n// ─── useAuth ───\n\nexport interface UseAuthReturn {\n    /** Whether the user has a valid, non-expired access token. */\n    isAuthenticated: boolean;\n    /** Whether the initial state is still loading from storage. */\n    loading: boolean;\n    /** Raw access token string, or null. */\n    accessToken: string | null;\n    /** Login with email/password. Triggers re-render on success. */\n    loginWithEmail: (data: { email: string; password: string; device_info?: string; totp_code?: string }) => Promise<void>;\n    /** Login with phone/password. */\n    loginWithPhone: (data: { phone_country_code: string; phone_number: string; password: string; device_info?: string }) => Promise<void>;\n    /** Logout from all sessions. */\n    logout: () => Promise<void>;\n    /** Register a new account. */\n    register: (data: Record<string, unknown>) => Promise<void>;\n}\n\n/**\n * Reactive authentication hook.\n * Automatically re-renders when the auth state changes (login, logout, refresh, expiry).\n *\n * @example\n * ```tsx\n * function LoginPage() {\n *     const { isAuthenticated, loginWithEmail, logout, loading } = useAuth();\n *\n *     if (loading) return <p>Loading...</p>;\n *     if (isAuthenticated) return <button onClick={logout}>Logout</button>;\n *\n *     return <button onClick={() => loginWithEmail({ email: '...', password: '...' })}>Login</button>;\n * }\n * ```\n */\nexport function useAuth(): UseAuthReturn {\n    const client = useTenxyteClient();\n    const { isAuthenticated, loading, accessToken } = useTenxyteState();\n\n    const loginWithEmail = useCallback(\n        async (data: { email: string; password: string; device_info?: string; totp_code?: string }) => {\n            await client.auth.loginWithEmail({ ...data, device_info: data.device_info ?? '' });\n        },\n        [client],\n    );\n\n    const loginWithPhone = useCallback(\n        async (data: { phone_country_code: string; phone_number: string; password: string; device_info?: string }) => {\n            await client.auth.loginWithPhone({ ...data, device_info: data.device_info ?? '' });\n        },\n        [client],\n    );\n\n    const logout = useCallback(async () => {\n        await client.auth.logoutAll();\n    }, [client]);\n\n    const register = useCallback(\n        async (data: Record<string, unknown>) => {\n            await client.auth.register(data as any);\n        },\n        [client],\n    );\n\n    return { isAuthenticated, loading, accessToken, loginWithEmail, loginWithPhone, logout, register };\n}\n\n// ─── useUser ───\n\nexport interface UseUserReturn {\n    /** Decoded JWT payload of the current access token, or null. */\n    user: DecodedTenxyteToken | null;\n    /** Whether the initial state is still loading. */\n    loading: boolean;\n    /** Fetch the full user profile from the backend. */\n    getProfile: () => ReturnType<typeof import('@tenxyte/core').TenxyteClient.prototype.user.getProfile>;\n    /** Update the current user's profile. */\n    updateProfile: (data: Record<string, unknown>) => Promise<unknown>;\n}\n\n/**\n * Reactive user hook.\n * Returns the decoded JWT user and convenience methods for profile management.\n *\n * @example\n * ```tsx\n * function UserBadge() {\n *     const { user, loading } = useUser();\n *     if (loading || !user) return null;\n *     return <span>{user.email}</span>;\n * }\n * ```\n */\nexport function useUser(): UseUserReturn {\n    const client = useTenxyteClient();\n    const { user, loading } = useTenxyteState();\n\n    const getProfile = useCallback(() => client.user.getProfile(), [client]);\n\n    const updateProfile = useCallback(\n        (data: Record<string, unknown>) => client.user.updateProfile(data),\n        [client],\n    );\n\n    return { user, loading, getProfile, updateProfile };\n}\n\n// ─── useOrganization ───\n\nexport interface UseOrganizationReturn {\n    /** Currently active organization slug, or null. */\n    activeOrg: string | null;\n    /** Switch the SDK to operate within an organization context. */\n    switchOrganization: (slug: string) => void;\n    /** Clear the organization context. */\n    clearOrganization: () => void;\n}\n\n/**\n * Reactive organization context hook.\n * Returns the current org slug and methods to switch/clear context.\n *\n * @example\n * ```tsx\n * function OrgSwitcher({ orgs }) {\n *     const { activeOrg, switchOrganization, clearOrganization } = useOrganization();\n *     return (\n *         <select value={activeOrg ?? ''} onChange={(e) =>\n *             e.target.value ? switchOrganization(e.target.value) : clearOrganization()\n *         }>\n *             <option value=\"\">No org</option>\n *             {orgs.map(o => <option key={o.slug} value={o.slug}>{o.name}</option>)}\n *         </select>\n *     );\n * }\n * ```\n */\nexport function useOrganization(): UseOrganizationReturn {\n    const client = useTenxyteClient();\n    const { activeOrg } = useTenxyteState();\n\n    const switchOrganization = useCallback(\n        (slug: string) => { client.b2b.switchOrganization(slug); },\n        [client],\n    );\n\n    const clearOrganization = useCallback(\n        () => { client.b2b.clearOrganization(); },\n        [client],\n    );\n\n    return { activeOrg, switchOrganization, clearOrganization };\n}\n\n// ─── useRbac ───\n\nexport interface UseRbacReturn {\n    /** Check if the current user has a specific role (synchronous JWT check). */\n    hasRole: (role: string) => boolean;\n    /** Check if the current user has a specific permission (synchronous JWT check). */\n    hasPermission: (permission: string) => boolean;\n    /** Check if the current user has any of the given roles. */\n    hasAnyRole: (roles: string[]) => boolean;\n    /** Check if the current user has all of the given roles. */\n    hasAllRoles: (roles: string[]) => boolean;\n}\n\n/**\n * Reactive RBAC hook.\n * Provides synchronous role/permission checks based on the current JWT.\n *\n * @example\n * ```tsx\n * function AdminPanel() {\n *     const { hasRole } = useRbac();\n *     if (!hasRole('admin')) return <p>Access denied</p>;\n *     return <AdminDashboard />;\n * }\n * ```\n */\nexport function useRbac(): UseRbacReturn {\n    const client = useTenxyteClient();\n    const { accessToken } = useTenxyteState();\n\n    const hasRole = useCallback(\n        (role: string) => client.rbac.hasRole(role, accessToken ?? undefined),\n        [client, accessToken],\n    );\n\n    const hasPermission = useCallback(\n        (permission: string) => client.rbac.hasPermission(permission, accessToken ?? undefined),\n        [client, accessToken],\n    );\n\n    const hasAnyRole = useCallback(\n        (roles: string[]) => client.rbac.hasAnyRole(roles, accessToken ?? undefined),\n        [client, accessToken],\n    );\n\n    const hasAllRoles = useCallback(\n        (roles: string[]) => client.rbac.hasAllRoles(roles, accessToken ?? undefined),\n        [client, accessToken],\n    );\n\n    return { hasRole, hasPermission, hasAnyRole, hasAllRoles };\n}\n"],"mappings":";AAAA,SAAS,eAAe,kBAAkB;AAOnC,IAAM,iBAAiB,cAAoC,IAAI;AAM/D,SAAS,mBAAkC;AAC9C,QAAM,SAAS,WAAW,cAAc;AACxC,MAAI,CAAC,QAAQ;AACT,UAAM,IAAI;AAAA,MACN;AAAA,IAEJ;AAAA,EACJ;AACA,SAAO;AACX;;;ACtBA,OAAO,SAAS,aAAa,WAAW,SAAS,gBAAgB;AAgCzD;AAFD,SAAS,gBAAgB,EAAE,QAAQ,SAAS,GAA4C;AAC3F,SACI,oBAAC,eAAe,UAAf,EAAwB,OAAO,QAC3B,UACL;AAER;AAMO,SAAS,kBAA6D;AACzE,QAAM,SAAS,MAAM,WAAW,cAAc;AAC9C,MAAI,CAAC,QAAQ;AACT,UAAM,IAAI,MAAM,2EAA2E;AAAA,EAC/F;AAEA,QAAM,CAAC,OAAO,QAAQ,IAAI,SAA6B;AAAA,IACnD,iBAAiB;AAAA,IACjB,MAAM;AAAA,IACN,aAAa;AAAA,IACb,WAAW;AAAA,IACX,aAAa;AAAA,EACjB,CAAC;AACD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,IAAI;AAE3C,QAAM,UAAU,YAAY,YAAY;AACpC,UAAM,WAAW,MAAM,OAAO,SAAS;AACvC,aAAS,QAAQ;AACjB,eAAW,KAAK;AAAA,EACpB,GAAG,CAAC,MAAM,CAAC;AAEX,YAAU,MAAM;AAEZ,YAAQ;AAGR,UAAM,SAAS;AAAA,MACX,OAAO,GAAG,gBAAgB,MAAM;AAAE,gBAAQ;AAAA,MAAG,CAAC;AAAA,MAC9C,OAAO,GAAG,mBAAmB,MAAM;AAAE,gBAAQ;AAAA,MAAG,CAAC;AAAA,MACjD,OAAO,GAAG,mBAAmB,MAAM;AAAE,gBAAQ;AAAA,MAAG,CAAC;AAAA,IACrD;AAEA,WAAO,MAAM;AACT,aAAO,QAAQ,CAAC,UAAU,MAAM,CAAC;AAAA,IACrC;AAAA,EACJ,GAAG,CAAC,QAAQ,OAAO,CAAC;AAEpB,SAAO,QAAQ,OAAO,EAAE,GAAG,OAAO,QAAQ,IAAI,CAAC,OAAO,OAAO,CAAC;AAClE;;;AChFA,SAAS,eAAAA,oBAAmB;AAwCrB,SAAS,UAAyB;AACrC,QAAM,SAAS,iBAAiB;AAChC,QAAM,EAAE,iBAAiB,SAAS,YAAY,IAAI,gBAAgB;AAElE,QAAM,iBAAiBC;AAAA,IACnB,OAAO,SAAwF;AAC3F,YAAM,OAAO,KAAK,eAAe,EAAE,GAAG,MAAM,aAAa,KAAK,eAAe,GAAG,CAAC;AAAA,IACrF;AAAA,IACA,CAAC,MAAM;AAAA,EACX;AAEA,QAAM,iBAAiBA;AAAA,IACnB,OAAO,SAAuG;AAC1G,YAAM,OAAO,KAAK,eAAe,EAAE,GAAG,MAAM,aAAa,KAAK,eAAe,GAAG,CAAC;AAAA,IACrF;AAAA,IACA,CAAC,MAAM;AAAA,EACX;AAEA,QAAM,SAASA,aAAY,YAAY;AACnC,UAAM,OAAO,KAAK,UAAU;AAAA,EAChC,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,WAAWA;AAAA,IACb,OAAO,SAAkC;AACrC,YAAM,OAAO,KAAK,SAAS,IAAW;AAAA,IAC1C;AAAA,IACA,CAAC,MAAM;AAAA,EACX;AAEA,SAAO,EAAE,iBAAiB,SAAS,aAAa,gBAAgB,gBAAgB,QAAQ,SAAS;AACrG;AA4BO,SAAS,UAAyB;AACrC,QAAM,SAAS,iBAAiB;AAChC,QAAM,EAAE,MAAM,QAAQ,IAAI,gBAAgB;AAE1C,QAAM,aAAaA,aAAY,MAAM,OAAO,KAAK,WAAW,GAAG,CAAC,MAAM,CAAC;AAEvE,QAAM,gBAAgBA;AAAA,IAClB,CAAC,SAAkC,OAAO,KAAK,cAAc,IAAI;AAAA,IACjE,CAAC,MAAM;AAAA,EACX;AAEA,SAAO,EAAE,MAAM,SAAS,YAAY,cAAc;AACtD;AAgCO,SAAS,kBAAyC;AACrD,QAAM,SAAS,iBAAiB;AAChC,QAAM,EAAE,UAAU,IAAI,gBAAgB;AAEtC,QAAM,qBAAqBA;AAAA,IACvB,CAAC,SAAiB;AAAE,aAAO,IAAI,mBAAmB,IAAI;AAAA,IAAG;AAAA,IACzD,CAAC,MAAM;AAAA,EACX;AAEA,QAAM,oBAAoBA;AAAA,IACtB,MAAM;AAAE,aAAO,IAAI,kBAAkB;AAAA,IAAG;AAAA,IACxC,CAAC,MAAM;AAAA,EACX;AAEA,SAAO,EAAE,WAAW,oBAAoB,kBAAkB;AAC9D;AA4BO,SAAS,UAAyB;AACrC,QAAM,SAAS,iBAAiB;AAChC,QAAM,EAAE,YAAY,IAAI,gBAAgB;AAExC,QAAM,UAAUA;AAAA,IACZ,CAAC,SAAiB,OAAO,KAAK,QAAQ,MAAM,eAAe,MAAS;AAAA,IACpE,CAAC,QAAQ,WAAW;AAAA,EACxB;AAEA,QAAM,gBAAgBA;AAAA,IAClB,CAAC,eAAuB,OAAO,KAAK,cAAc,YAAY,eAAe,MAAS;AAAA,IACtF,CAAC,QAAQ,WAAW;AAAA,EACxB;AAEA,QAAM,aAAaA;AAAA,IACf,CAAC,UAAoB,OAAO,KAAK,WAAW,OAAO,eAAe,MAAS;AAAA,IAC3E,CAAC,QAAQ,WAAW;AAAA,EACxB;AAEA,QAAM,cAAcA;AAAA,IAChB,CAAC,UAAoB,OAAO,KAAK,YAAY,OAAO,eAAe,MAAS;AAAA,IAC5E,CAAC,QAAQ,WAAW;AAAA,EACxB;AAEA,SAAO,EAAE,SAAS,eAAe,YAAY,YAAY;AAC7D;","names":["useCallback","useCallback"]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@tenxyte/react",
-    "version": "0.5.0",
+    "version": "0.5.1",
     "description": "React bindings for the Tenxyte SDK",
     "main": "./dist/index.cjs",
     "module": "./dist/index.js",
@@ -22,7 +22,8 @@
     ],
     "sideEffects": false,
     "publishConfig": {
-        "access": "public"
+        "access": "public",
+        "provenance": true
     },
     "scripts": {
         "build": "tsup",