@mochabug/adapt-react 1.0.0-rc2 → 1.0.0-rc20

package/dist/esm/AdaptCap.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AdaptCapElement, } from "@mochabug/adapt-web";
+import { forwardRef, useLayoutEffect, useRef } from "react";
+// Re-export for direct use
+export { AdaptCapWidget, } from "@mochabug/adapt-web";
+// Ensure custom element is registered
+void AdaptCapElement;
+/**
+ * React component for Cap.js proof-of-work challenges.
+ * Renders `<adapt-cap>` custom element and syncs non-serializable properties via ref.
+ */
+export const AdaptCap = forwardRef(function AdaptCap({ automationId, client, onSolve, onError, workerCount, i18n, darkMode, className, style, }, ref) {
+    const internalRef = useRef(null);
+    // Merge refs
+    const setRef = (element) => {
+        internalRef.current = element;
+        if (typeof ref === "function") {
+            ref(element);
+        }
+        else if (ref) {
+            ref.current = element;
+        }
+    };
+    // Sync non-serializable properties
+    useLayoutEffect(() => {
+        const el = internalRef.current;
+        if (!el)
+            return;
+        el.client = client;
+        el.i18n = i18n;
+        el.onSolveCallback = onSolve;
+        el.onErrorCallback = onError;
+    });
+    return (_jsx("adapt-cap", { ref: setRef, className: className, style: style, "automation-id": automationId, "dark-mode": darkMode ? "" : undefined, "worker-count": workerCount !== undefined ? String(workerCount) : undefined }));
+});

package/dist/esm/index.js

@@ -1,14 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { AdaptWebClient, } from "@mochabug/adapt-web";
-import { forwardRef, useEffect, useRef } from "react";
+import { AdaptAutomationElement, } from "@mochabug/adapt-web";
+import { forwardRef, useLayoutEffect, useRef } from "react";
+// Re-export everything from web
+export * from "@mochabug/adapt-web";
+// Export standalone Cap widget component
+export { AdaptCap } from "./AdaptCap.js";
+// Ensure custom element is registered
+void AdaptAutomationElement;
 /**
  * React component for embedding Adapt automations.
+ * Renders `<adapt-automation>` custom element and syncs non-serializable properties via ref.
  */
-export const Adapt = forwardRef(function Adapt({ id, sessionToken, authToken, transmitter, signals, inheritToken, inheritFrom, forkDisplayMode, sideBySideSplit, dialogBackdropClose, onSession, onOutput, classNames, className, style, }, ref) {
-    const clientRef = useRef(null);
+export const Adapt = forwardRef(function Adapt({ id, sessionToken, authToken, transmitter, signals, challengeToken, requiresChallenge, capWidgetOptions, inheritToken, inheritFrom, forkDisplayMode, sideBySideSplit, dialogBackdropClose, darkMode, autoResizing, onSession, onOutput, classNames, styles, className, style, }, ref) {
     const internalRef = useRef(null);
-    const containerIdRef = useRef(`adapt-${Math.random().toString(36).slice(2, 11)}`);
-    const containerId = containerIdRef.current;
     // Merge refs
     const setRef = (element) => {
         internalRef.current = element;
@@ -19,28 +23,20 @@ export const Adapt = forwardRef(function Adapt({ id, sessionToken, authToken, tr
             ref.current = element;
         }
     };
-    useEffect(() => {
-        clientRef.current = new AdaptWebClient({
-            container: containerId,
-            id,
-            sessionToken,
-            authToken,
-            transmitter,
-            signals,
-            inheritToken,
-            inheritFrom,
-            forkDisplayMode,
-            sideBySideSplit,
-            dialogBackdropClose,
-            onSession,
-            onOutput,
-            classNames,
-        });
-        return () => {
-            clientRef.current?.destroy();
-            clientRef.current = null;
-        };
-        // Only recreate client if automation ID changes
-    }, [id]);
-    return (_jsx("div", { ref: setRef, id: containerId, className: className, style: style }));
+    // Sync non-serializable properties to the element
+    useLayoutEffect(() => {
+        const el = internalRef.current;
+        if (!el)
+            return;
+        el.signals = signals;
+        el.capWidgetOptions = capWidgetOptions;
+        el.inheritFrom = inheritFrom;
+        el.classNames = classNames;
+        el.styles = styles;
+        el.onSessionCallback = onSession;
+        el.onOutputCallback = onOutput;
+    });
+    // React doesn't natively set properties on custom elements (pre-19),
+    // so we use attributes for serializable values and ref for the rest.
+    return (_jsx("adapt-automation", { ref: setRef, className: className, style: style, "automation-id": id, "session-token": sessionToken, "auth-token": authToken, transmitter: transmitter, "challenge-token": challengeToken, "requires-challenge": requiresChallenge ? "" : undefined, "inherit-token": inheritToken, "fork-display-mode": forkDisplayMode, "side-by-side-split": sideBySideSplit !== undefined ? String(sideBySideSplit) : undefined, "dialog-backdrop-close": dialogBackdropClose ? "" : undefined, "dark-mode": darkMode ? "" : undefined, "auto-resizing": autoResizing ? "" : undefined }));
 });

package/dist/types/AdaptCap.d.ts

@@ -0,0 +1,35 @@
+import type { AutomationClient } from "@mochabug/adapt-core";
+import { AdaptCapElement, type CapWidgetI18n } from "@mochabug/adapt-web";
+export { AdaptCapWidget, type AdaptCapWidgetOptions, } from "@mochabug/adapt-web";
+declare module "react" {
+    namespace JSX {
+        interface IntrinsicElements {
+            "adapt-cap": React.DetailedHTMLProps<React.HTMLAttributes<AdaptCapElement> & {
+                "automation-id"?: string;
+                "dark-mode"?: string;
+                "worker-count"?: string;
+            }, AdaptCapElement>;
+        }
+    }
+}
+/**
+ * Props for the AdaptCap React component.
+ */
+export interface AdaptCapProps {
+    automationId: string;
+    client: AutomationClient;
+    workerCount?: number;
+    i18n?: CapWidgetI18n;
+    darkMode?: boolean;
+    onSolve?: (token: string, expires: Date) => void;
+    onError?: (error: Error) => void;
+    /** CSS class name for the container */
+    className?: string;
+    /** Inline styles for the container */
+    style?: React.CSSProperties;
+}
+/**
+ * React component for Cap.js proof-of-work challenges.
+ * Renders `<adapt-cap>` custom element and syncs non-serializable properties via ref.
+ */
+export declare const AdaptCap: import("react").ForwardRefExoticComponent<AdaptCapProps & import("react").RefAttributes<AdaptCapElement>>;

package/dist/types/index.d.ts

@@ -1,16 +1,62 @@
-import type { Output, SignalDataJson, StatusJson } from "@mochabug/adapt-core";
-import { type AdaptWebClientOptions } from "@mochabug/adapt-web";
-export type { AdaptWebClientOptions, Output, SignalDataJson, StatusJson };
+import { AdaptAutomationElement, type AdaptWebClientOptions, type Output, type SignalValue, type StatusJson } from "@mochabug/adapt-web";
+declare module "react" {
+    namespace JSX {
+        interface IntrinsicElements {
+            "adapt-automation": React.DetailedHTMLProps<React.HTMLAttributes<AdaptAutomationElement> & {
+                "automation-id"?: string;
+                "session-token"?: string;
+                "auth-token"?: string;
+                transmitter?: string;
+                "challenge-token"?: string;
+                "requires-challenge"?: string;
+                "inherit-token"?: string;
+                "fork-display-mode"?: string;
+                "side-by-side-split"?: string;
+                "dialog-backdrop-close"?: string;
+                "dark-mode"?: string;
+                "auto-resizing"?: string;
+            }, AdaptAutomationElement>;
+        }
+    }
+}
+export * from "@mochabug/adapt-web";
+export { AdaptCap, type AdaptCapProps } from "./AdaptCap.js";
 /**
  * Props for the Adapt React component.
  */
-export interface AdaptProps extends Pick<AdaptWebClientOptions, "id" | "sessionToken" | "authToken" | "transmitter" | "signals" | "inheritToken" | "inheritFrom" | "forkDisplayMode" | "sideBySideSplit" | "dialogBackdropClose" | "onSession" | "onOutput" | "classNames"> {
-    /** CSS class name for the container */
+export interface AdaptProps {
+    id: string;
+    sessionToken?: string;
+    authToken?: string;
+    transmitter?: string;
+    signals?: {
+        [key: string]: SignalValue;
+    };
+    challengeToken?: string;
+    requiresChallenge?: boolean;
+    capWidgetOptions?: AdaptWebClientOptions["capWidgetOptions"];
+    inheritToken?: string;
+    inheritFrom?: {
+        hash: string;
+    } | {
+        param: string;
+    };
+    forkDisplayMode?: "side-by-side" | "dialog";
+    sideBySideSplit?: number;
+    dialogBackdropClose?: boolean;
+    darkMode?: boolean;
+    autoResizing?: boolean;
+    onSession?: (status: StatusJson, fork?: string) => void;
+    onOutput?: (output: Output) => void;
+    classNames?: AdaptWebClientOptions["classNames"];
+    styles?: Partial<CSSStyleDeclaration>;
+    /** CSS class name for the host element */
     className?: string;
-    /** Inline styles for the container */
+    /** Inline styles for the host element */
     style?: React.CSSProperties;
 }
 /**
  * React component for embedding Adapt automations.
+ * Renders `<adapt-automation>` custom element and syncs non-serializable properties via ref.
  */
-export declare const Adapt: import("react").ForwardRefExoticComponent<AdaptProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Adapt: import("react").ForwardRefExoticComponent<AdaptProps & import("react").RefAttributes<AdaptAutomationElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mochabug/adapt-react",
-  "version": "1.0.0-rc2",
+  "version": "1.0.0-rc20",
   "description": "React component for Adapt automation platform",
   "type": "module",
   "main": "./dist/esm/index.js",
@@ -18,7 +18,7 @@
     "build:esm": "tsc --project tsconfig.esm.json",
     "build:types": "tsc --project tsconfig.types.json",
     "build": "rm -rf dist && npm run build:esm && npm run build:types",
-    "sample": "cd sample && npm run dev"
+    "sample": "npm run build && cd sample && npm run dev"
   },
   "keywords": [
     "adapt",
@@ -32,11 +32,11 @@
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@types/react": "^19.2.6",
-    "react": "^19.2.0",
+    "@types/react": "^19.2.14",
+    "react": "^19.2.4",
     "typescript": "^5.9.3"
   },
   "dependencies": {
-    "@mochabug/adapt-web": "^1.0.0-rc23"
+    "@mochabug/adapt-web": "^1.0.0-rc42"
   }
 }