@trustsig/react 2.3.0 → 2.4.0

package/README.md

@@ -1,6 +1,7 @@
 # @trustsig/react
 
-React Context Provider and hooks for TrustSig bot protection. React 18 or 19.
+React context provider and hooks for TrustSig bot protection. Supports React
+18 and 19.
 
 ## Installation
 
@@ -10,8 +11,7 @@ npm install @trustsig/react
 
 ## Usage
 
-### 1. Setup Provider
-Wrap your application or specific routes with the provider.
+Wrap your application or specific routes with the provider:
 
 ```tsx
 "use client";
@@ -26,8 +26,7 @@ export default function RootLayout({ children }) {
 }
 ```
 
-### 2. Using the Hook
-Use `useTrustSig` to access the analysis methods.
+Access the analysis methods with `useTrustSig`:
 
 ```tsx
 "use client";
@@ -61,7 +60,7 @@ export function ActionForm() {
 ```
 
 `getResponse()` resolves to `{ request_id, token }` or `null` (script failed
-to load, timed out, or no verdict yet — inspect `error`). The server is the
+to load, timed out, or no verdict yet; inspect `error`). The server is the
 trust boundary: always verify the token with `@trustsig/server`.
 
 ## API
@@ -77,5 +76,53 @@ trust boundary: always verify the token with `@trustsig/server`.
 ### Provider props
 
 `siteKey` (required), `scriptUrl`, `interceptRequests`, `autoScan`, `debug`,
-`nonce`, `env`, `customData`. Changing `customData` updates the running script
-in place — it does **not** re-inject the script or reset state.
+`nonce`, `env`, `customData`. Changing `customData` updates the running
+script in place; it does not re-inject the script or reset state.
+
+## TrustSig Pro
+
+`TrustSigProProvider` and `useTrustSigPro` drive TrustSig Pro (account-level
+fraud intelligence). They are separate, opt-in exports; the Vanilla
+`TrustSigProvider` / `useTrustSig` above are unchanged. Each provider uses
+its own React context, but the underlying edge script build is shared and
+refuses to initialize twice, so do not mount both providers on the same
+page; whichever script loads first wins. Import from the main entry or from
+`@trustsig/react/pro`.
+
+The provider takes a project publishable key (`pk_...` / `PK_...`) instead
+of a `siteKey`. Everything else matches the Vanilla provider.
+
+```tsx
+"use client";
+import { TrustSigProProvider, useTrustSigPro } from '@trustsig/react';
+
+export default function RootLayout({ children }) {
+  return (
+    <TrustSigProProvider publishableKey="PK_live_..." autoScan>
+      {children}
+    </TrustSigProProvider>
+  );
+}
+
+function LoginForm() {
+  const { getResponse, isLoaded } = useTrustSigPro();
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    const res = await getResponse(); // { request_id, token } | null
+    // Send res.token to your backend; verify and bind it with @trustsig/server.
+  };
+
+  return <button onClick={handleSubmit} disabled={!isLoaded}>Login</button>;
+}
+```
+
+`useTrustSigPro()` exposes the same shape as `useTrustSig()`: `isLoaded`,
+`error`, `getResponse()`, `scan()`, `setCustomData()`. The returned token
+feeds `TrustSigPro` on the server (`@trustsig/server`), whose verdicts use
+the `ALLOW | REVIEW | BLOCK` decision set.
+
+### Provider props
+
+`publishableKey` (required), `scriptUrl`, `interceptRequests`, `autoScan`,
+`debug`, `nonce`, `env`, `customData`.

package/dist/chunk-SIOYXKET.js

@@ -0,0 +1,91 @@
+"use client";
+
+// src/TrustSigProProvider.tsx
+import React, { createContext, useContext, useEffect, useRef, useState, useMemo } from "react";
+import { TrustSigProClient } from "@trustsig/client";
+var TrustSigProContext = createContext(null);
+function stableStringify(value) {
+  return JSON.stringify(value, (_key, val) => {
+    if (val && typeof val === "object" && !Array.isArray(val)) {
+      return Object.keys(val).sort().reduce((acc, k) => {
+        acc[k] = val[k];
+        return acc;
+      }, {});
+    }
+    return val;
+  });
+}
+var TrustSigProProvider = ({
+  publishableKey,
+  scriptUrl,
+  interceptRequests,
+  autoScan,
+  debug,
+  nonce,
+  env,
+  customData,
+  children
+}) => {
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [error, setError] = useState(null);
+  const initialCustomData = useRef(customData).current;
+  const client = useMemo(
+    () => new TrustSigProClient({
+      publishableKey,
+      scriptUrl,
+      interceptRequests,
+      autoScan,
+      debug,
+      nonce,
+      env,
+      customData: initialCustomData
+    }),
+    [publishableKey, scriptUrl, interceptRequests, autoScan, debug, nonce, env, initialCustomData]
+  );
+  useEffect(() => {
+    let mounted = true;
+    client.load().then(() => {
+      if (mounted) setIsLoaded(true);
+    }).catch((err) => {
+      if (mounted) setError(err);
+    });
+    return () => {
+      mounted = false;
+    };
+  }, [client]);
+  const customDataKey = customData ? stableStringify(customData) : "";
+  useEffect(() => {
+    if (customData) {
+      client.setCustomData(customData);
+    }
+  }, [client, customDataKey]);
+  const value = useMemo(
+    () => ({
+      isLoaded,
+      error,
+      getResponse: () => client.getResponse(),
+      scan: () => client.scan(),
+      setCustomData: (data) => client.setCustomData(data)
+    }),
+    [isLoaded, error, client]
+  );
+  return React.createElement(TrustSigProContext.Provider, { value }, children);
+};
+var useTrustSigProContext = () => {
+  const context = useContext(TrustSigProContext);
+  if (!context) {
+    throw new Error("useTrustSigPro must be used within a <TrustSigProProvider>");
+  }
+  return context;
+};
+
+// src/useTrustSigPro.ts
+var useTrustSigPro = () => {
+  return useTrustSigProContext();
+};
+
+export {
+  TrustSigProProvider,
+  useTrustSigProContext,
+  useTrustSigPro
+};

package/dist/index.cjs

@@ -32,9 +32,12 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  TrustSigProProvider: () => TrustSigProProvider,
   TrustSigProvider: () => TrustSigProvider,
   useTrustSig: () => useTrustSig,
-  useTrustSigContext: () => useTrustSigContext
+  useTrustSigContext: () => useTrustSigContext,
+  useTrustSigPro: () => useTrustSigPro,
+  useTrustSigProContext: () => useTrustSigProContext
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -121,9 +124,96 @@ var useTrustSigContext = () => {
 var useTrustSig = () => {
   return useTrustSigContext();
 };
+
+// src/TrustSigProProvider.tsx
+var import_react2 = __toESM(require("react"), 1);
+var import_client2 = require("@trustsig/client");
+var TrustSigProContext = (0, import_react2.createContext)(null);
+function stableStringify2(value) {
+  return JSON.stringify(value, (_key, val) => {
+    if (val && typeof val === "object" && !Array.isArray(val)) {
+      return Object.keys(val).sort().reduce((acc, k) => {
+        acc[k] = val[k];
+        return acc;
+      }, {});
+    }
+    return val;
+  });
+}
+var TrustSigProProvider = ({
+  publishableKey,
+  scriptUrl,
+  interceptRequests,
+  autoScan,
+  debug,
+  nonce,
+  env,
+  customData,
+  children
+}) => {
+  const [isLoaded, setIsLoaded] = (0, import_react2.useState)(false);
+  const [error, setError] = (0, import_react2.useState)(null);
+  const initialCustomData = (0, import_react2.useRef)(customData).current;
+  const client = (0, import_react2.useMemo)(
+    () => new import_client2.TrustSigProClient({
+      publishableKey,
+      scriptUrl,
+      interceptRequests,
+      autoScan,
+      debug,
+      nonce,
+      env,
+      customData: initialCustomData
+    }),
+    [publishableKey, scriptUrl, interceptRequests, autoScan, debug, nonce, env, initialCustomData]
+  );
+  (0, import_react2.useEffect)(() => {
+    let mounted = true;
+    client.load().then(() => {
+      if (mounted) setIsLoaded(true);
+    }).catch((err) => {
+      if (mounted) setError(err);
+    });
+    return () => {
+      mounted = false;
+    };
+  }, [client]);
+  const customDataKey = customData ? stableStringify2(customData) : "";
+  (0, import_react2.useEffect)(() => {
+    if (customData) {
+      client.setCustomData(customData);
+    }
+  }, [client, customDataKey]);
+  const value = (0, import_react2.useMemo)(
+    () => ({
+      isLoaded,
+      error,
+      getResponse: () => client.getResponse(),
+      scan: () => client.scan(),
+      setCustomData: (data) => client.setCustomData(data)
+    }),
+    [isLoaded, error, client]
+  );
+  return import_react2.default.createElement(TrustSigProContext.Provider, { value }, children);
+};
+var useTrustSigProContext = () => {
+  const context = (0, import_react2.useContext)(TrustSigProContext);
+  if (!context) {
+    throw new Error("useTrustSigPro must be used within a <TrustSigProProvider>");
+  }
+  return context;
+};
+
+// src/useTrustSigPro.ts
+var useTrustSigPro = () => {
+  return useTrustSigProContext();
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  TrustSigProProvider,
   TrustSigProvider,
   useTrustSig,
-  useTrustSigContext
+  useTrustSigContext,
+  useTrustSigPro,
+  useTrustSigProContext
 });

package/dist/index.d.cts

@@ -1,5 +1,7 @@
 import React from 'react';
 import { TrustSigResponse, TrustSigEnv } from '@trustsig/types';
+export { TrustSigProContextValue, TrustSigProProvider, TrustSigProProviderProps, useTrustSigPro, useTrustSigProContext } from './pro.cjs';
+import '@trustsig/client';
 
 interface TrustSigContextValue {
     isLoaded: boolean;

package/dist/index.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
 import { TrustSigResponse, TrustSigEnv } from '@trustsig/types';
+export { TrustSigProContextValue, TrustSigProProvider, TrustSigProProviderProps, useTrustSigPro, useTrustSigProContext } from './pro.js';
+import '@trustsig/client';
 
 interface TrustSigContextValue {
     isLoaded: boolean;

package/dist/index.js

@@ -1,5 +1,10 @@
 "use client";
 "use client";
+import {
+  TrustSigProProvider,
+  useTrustSigPro,
+  useTrustSigProContext
+} from "./chunk-SIOYXKET.js";
 
 // src/TrustSigProvider.tsx
 import React, { createContext, useContext, useEffect, useRef, useState, useMemo } from "react";
@@ -85,7 +90,10 @@ var useTrustSig = () => {
   return useTrustSigContext();
 };
 export {
+  TrustSigProProvider,
   TrustSigProvider,
   useTrustSig,
-  useTrustSigContext
+  useTrustSigContext,
+  useTrustSigPro,
+  useTrustSigProContext
 };

package/dist/pro.cjs

@@ -0,0 +1,129 @@
+"use client";
+"use strict";
+"use client";
+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/pro.ts
+var pro_exports = {};
+__export(pro_exports, {
+  TrustSigProProvider: () => TrustSigProProvider,
+  useTrustSigPro: () => useTrustSigPro,
+  useTrustSigProContext: () => useTrustSigProContext
+});
+module.exports = __toCommonJS(pro_exports);
+
+// src/TrustSigProProvider.tsx
+var import_react = __toESM(require("react"), 1);
+var import_client = require("@trustsig/client");
+var TrustSigProContext = (0, import_react.createContext)(null);
+function stableStringify(value) {
+  return JSON.stringify(value, (_key, val) => {
+    if (val && typeof val === "object" && !Array.isArray(val)) {
+      return Object.keys(val).sort().reduce((acc, k) => {
+        acc[k] = val[k];
+        return acc;
+      }, {});
+    }
+    return val;
+  });
+}
+var TrustSigProProvider = ({
+  publishableKey,
+  scriptUrl,
+  interceptRequests,
+  autoScan,
+  debug,
+  nonce,
+  env,
+  customData,
+  children
+}) => {
+  const [isLoaded, setIsLoaded] = (0, import_react.useState)(false);
+  const [error, setError] = (0, import_react.useState)(null);
+  const initialCustomData = (0, import_react.useRef)(customData).current;
+  const client = (0, import_react.useMemo)(
+    () => new import_client.TrustSigProClient({
+      publishableKey,
+      scriptUrl,
+      interceptRequests,
+      autoScan,
+      debug,
+      nonce,
+      env,
+      customData: initialCustomData
+    }),
+    [publishableKey, scriptUrl, interceptRequests, autoScan, debug, nonce, env, initialCustomData]
+  );
+  (0, import_react.useEffect)(() => {
+    let mounted = true;
+    client.load().then(() => {
+      if (mounted) setIsLoaded(true);
+    }).catch((err) => {
+      if (mounted) setError(err);
+    });
+    return () => {
+      mounted = false;
+    };
+  }, [client]);
+  const customDataKey = customData ? stableStringify(customData) : "";
+  (0, import_react.useEffect)(() => {
+    if (customData) {
+      client.setCustomData(customData);
+    }
+  }, [client, customDataKey]);
+  const value = (0, import_react.useMemo)(
+    () => ({
+      isLoaded,
+      error,
+      getResponse: () => client.getResponse(),
+      scan: () => client.scan(),
+      setCustomData: (data) => client.setCustomData(data)
+    }),
+    [isLoaded, error, client]
+  );
+  return import_react.default.createElement(TrustSigProContext.Provider, { value }, children);
+};
+var useTrustSigProContext = () => {
+  const context = (0, import_react.useContext)(TrustSigProContext);
+  if (!context) {
+    throw new Error("useTrustSigPro must be used within a <TrustSigProProvider>");
+  }
+  return context;
+};
+
+// src/useTrustSigPro.ts
+var useTrustSigPro = () => {
+  return useTrustSigProContext();
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TrustSigProProvider,
+  useTrustSigPro,
+  useTrustSigProContext
+});

package/dist/pro.d.cts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { ProClientResponse } from '@trustsig/client';
+import { TrustSigEnv } from '@trustsig/types';
+
+interface TrustSigProContextValue {
+    isLoaded: boolean;
+    error: Error | null;
+    getResponse: () => Promise<ProClientResponse | null>;
+    scan: () => Promise<ProClientResponse | null>;
+    setCustomData: (data: Record<string, unknown>) => void;
+}
+interface TrustSigProProviderProps {
+    publishableKey: string;
+    scriptUrl?: string;
+    interceptRequests?: boolean;
+    autoScan?: boolean;
+    debug?: boolean;
+    nonce?: string;
+    env?: TrustSigEnv;
+    customData?: Record<string, unknown>;
+    children: React.ReactNode;
+}
+/**
+ * React provider for **TrustSig Pro**. Mirrors {@link TrustSigProvider} but
+ * drives the Pro edge loader (publishable key, `epro` script, `REVIEW`-aware
+ * verdicts) and exposes its state through a separate context, so a single app
+ * can mount both editions without collision.
+ */
+declare const TrustSigProProvider: React.FC<TrustSigProProviderProps>;
+declare const useTrustSigProContext: () => TrustSigProContextValue;
+
+declare const useTrustSigPro: () => TrustSigProContextValue;
+
+export { type TrustSigProContextValue, TrustSigProProvider, type TrustSigProProviderProps, useTrustSigPro, useTrustSigProContext };

package/dist/pro.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { ProClientResponse } from '@trustsig/client';
+import { TrustSigEnv } from '@trustsig/types';
+
+interface TrustSigProContextValue {
+    isLoaded: boolean;
+    error: Error | null;
+    getResponse: () => Promise<ProClientResponse | null>;
+    scan: () => Promise<ProClientResponse | null>;
+    setCustomData: (data: Record<string, unknown>) => void;
+}
+interface TrustSigProProviderProps {
+    publishableKey: string;
+    scriptUrl?: string;
+    interceptRequests?: boolean;
+    autoScan?: boolean;
+    debug?: boolean;
+    nonce?: string;
+    env?: TrustSigEnv;
+    customData?: Record<string, unknown>;
+    children: React.ReactNode;
+}
+/**
+ * React provider for **TrustSig Pro**. Mirrors {@link TrustSigProvider} but
+ * drives the Pro edge loader (publishable key, `epro` script, `REVIEW`-aware
+ * verdicts) and exposes its state through a separate context, so a single app
+ * can mount both editions without collision.
+ */
+declare const TrustSigProProvider: React.FC<TrustSigProProviderProps>;
+declare const useTrustSigProContext: () => TrustSigProContextValue;
+
+declare const useTrustSigPro: () => TrustSigProContextValue;
+
+export { type TrustSigProContextValue, TrustSigProProvider, type TrustSigProProviderProps, useTrustSigPro, useTrustSigProContext };

package/dist/pro.js

@@ -0,0 +1,12 @@
+"use client";
+"use client";
+import {
+  TrustSigProProvider,
+  useTrustSigPro,
+  useTrustSigProContext
+} from "./chunk-SIOYXKET.js";
+export {
+  TrustSigProProvider,
+  useTrustSigPro,
+  useTrustSigProContext
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trustsig/react",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "React Context Provider and hooks for TrustSig bot protection",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -16,6 +16,11 @@
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
+    "./pro": {
+      "types": "./dist/pro.d.ts",
+      "import": "./dist/pro.js",
+      "require": "./dist/pro.cjs"
+    },
     "./package.json": "./package.json"
   },
   "scripts": {
@@ -45,8 +50,8 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@trustsig/client": "^2.3.0",
-    "@trustsig/types": "^2.3.0"
+    "@trustsig/client": "^2.4.0",
+    "@trustsig/types": "^2.4.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",