@mochabug/adapt-react 1.0.1-rc.1 → 1.0.1-rc.11

package/README.md

@@ -11,15 +11,21 @@ Requires React 17, 18, or 19.
 ## Quickstart
 
 ```tsx
-import { Adapt } from '@mochabug/adapt-react';
+import { AdaptAutomation } from '@mochabug/adapt-react';
 
-<Adapt id="auto-123" style={{ height: 600 }} />
+<AdaptAutomation automationId="auto-123" style={{ height: 600 }} />
 ```
 
-If the automation requires authentication:
+With authentication:
 
 ```tsx
-<Adapt id="auto-123" authToken="your-token" style={{ height: 600 }} />
+<AdaptAutomation automationId="auto-123" authToken="your-token" style={{ height: 600 }} />
+```
+
+With proof-of-work challenge:
+
+```tsx
+<AdaptAutomation automationId="auto-123" requiresChallenge style={{ height: 600 }} />
 ```
 
 ## SSR (Next.js)
@@ -33,16 +39,15 @@ import { startSession } from '@mochabug/adapt-core';
 export default async function Page() {
   const authToken = await getAuthTokenFromBackend();
   const { token } = await startSession({ id: 'auto-123' }, authToken);
-
   return <AutomationClient sessionToken={token} />;
 }
 
 // components/AutomationClient.tsx (Client Component)
 'use client';
-import { Adapt } from '@mochabug/adapt-react';
+import { AdaptAutomation } from '@mochabug/adapt-react';
 
-export function AutomationClient({ sessionToken }) {
-  return <Adapt id="auto-123" sessionToken={sessionToken} style={{ height: 600 }} />;
+export function AutomationClient({ sessionToken }: { sessionToken: string }) {
+  return <AdaptAutomation automationId="auto-123" sessionToken={sessionToken} style={{ height: 600 }} />;
 }
 ```
 
@@ -50,83 +55,423 @@ export function AutomationClient({ sessionToken }) {
 
 ```tsx
 // direct
-<Adapt id="auto-123" inheritToken="token-from-parent" />
+<AdaptAutomation automationId="auto-123" inheritToken="token-from-parent" />
 
 // from URL hash: example.com#mb_session=xxx
-<Adapt id="auto-123" inheritFrom={{ hash: 'mb_session' }} />
+<AdaptAutomation automationId="auto-123" inheritFrom={{ hash: 'mb_session' }} />
 ```
 
 ## Fork display
 
 ```tsx
-// side-by-side
-<Adapt id="auto-123" forkDisplayMode="side-by-side" sideBySideSplit={60} />
+// side-by-side (default)
+<AdaptAutomation automationId="auto-123" forkDisplay={{ mode: 'side-by-side', split: 60 }} />
 
 // dialog
-<Adapt id="auto-123" forkDisplayMode="dialog" dialogBackdropClose />
+<AdaptAutomation automationId="auto-123" forkDisplay={{ mode: 'dialog' }} />
 ```
 
 ## Callbacks
 
 ```tsx
-<Adapt
-  id="auto-123"
+<AdaptAutomation
+  automationId="auto-123"
   onSession={(status, fork) => console.log(status, fork)}
   onOutput={(output) => console.log(output)}
+  onForkActive={(active) => console.log(active)}
+/>
+```
+
+---
+
+## 2. `AdaptCap`
+
+Standalone proof-of-work challenge widget. Use when you manage the automation client yourself.
+
+```tsx
+import { AdaptCap, createConnectClient } from '@mochabug/adapt-react/cap';
+
+function ChallengeWidget() {
+  const client = useMemo(() => createConnectClient({ id: 'YOUR_ID' }), []);
+
+  return (
+    <AdaptCap
+      automationId="YOUR_ID"
+      client={client}
+      onSolve={(token, expires) => {
+        console.log('Solved:', token, expires);
+      }}
+      onError={(error) => console.error(error)}
+    />
+  );
+}
+```
+
+### Props
+
+| Prop | Type |
+|------|------|
+| `automationId` | `string` (required) |
+| `client` | `AutomationClient` (required) |
+| `workerCount` | `number` |
+| `i18n` | `CapWidgetI18n` |
+| `darkMode` | `boolean` |
+| `onSolve` | `(token: string, expires: Date) => void` |
+| `onError` | `(error: Error) => void` |
+| `className` | `string` |
+| `style` | `CSSProperties` |
+
+### Headless (no UI)
+
+Use the lower-level API to create and redeem challenges yourself:
+
+```tsx
+import { createChallenge, redeemChallenge, createConnectClient } from '@mochabug/adapt-react/cap';
+
+const client = createConnectClient({ id: 'YOUR_ID' });
+const challenge = await createChallenge(client);
+// ... solve with Cap.js or your own solver ...
+const redeemed = await redeemChallenge(client, solutions);
+```
+
+---
+
+## Styling
+
+All visuals are controlled via CSS custom properties on `.mb-adapt`. The `darkMode` prop automatically switches to dark defaults, but you can override any variable for either mode.
+
+### Where to put the CSS
+
+Add a CSS file (e.g. `adapt-theme.css`) and import it in your app:
+
+```tsx
+// App.tsx or layout
+import './adapt-theme.css';
+```
+
+Or in Next.js, import from `app/layout.tsx` or `pages/_app.tsx`.
+
+### Matching your site's toolbar
+
+Map your existing design tokens to the panel toolbar. These six variables control almost everything you see in the tab bar:
+
+```css
+/* adapt-theme.css */
+
+/* Light mode — derive from your site's surface/text colors */
+.mb-adapt {
+  --mb-adapt-fork-bg: #ffffff;              /* panel content background */
+  --mb-adapt-fork-tab-bg: #f5f5f5;         /* inactive tab / toolbar background */
+  --mb-adapt-fork-tab-active-bg: #ffffff;   /* active tab background */
+  --mb-adapt-fork-tab-color: #1a1a1a;      /* active tab text */
+  --mb-adapt-fork-tab-inactive-color: #888; /* inactive tab text */
+  --mb-adapt-fork-separator: #e0e0e0;      /* borders between tabs & panels */
+}
+
+/* Dark mode — active when darkMode={true} */
+.mb-adapt[dark-mode] {
+  --mb-adapt-fork-bg: #1e1e1e;
+  --mb-adapt-fork-tab-bg: #2a2a2a;
+  --mb-adapt-fork-tab-active-bg: #1e1e1e;
+  --mb-adapt-fork-tab-color: #e0e0e0;
+  --mb-adapt-fork-tab-inactive-color: #777;
+  --mb-adapt-fork-separator: #3a3a3a;
+}
+```
+
+**Typical mapping from your site's design system:**
+
+| Your site has | Maps to |
+|---|---|
+| Surface / card background | `--mb-adapt-fork-bg` |
+| Secondary / muted background | `--mb-adapt-fork-tab-bg` |
+| Primary text color | `--mb-adapt-fork-tab-color` |
+| Muted / secondary text | `--mb-adapt-fork-tab-inactive-color` |
+| Border / divider color | `--mb-adapt-fork-separator` |
+| Accent color | `--mb-adapt-separator-active` (resize handle highlight) |
+| Interactive hover tint | `--mb-adapt-button-hover-bg` |
+
+### Custom theme (light & dark)
+
+A more complete example mapping a full brand palette — primary, secondary, and accent colors — to Adapt's CSS variables for both light and dark modes. Save this as a CSS file and import it:
+
+```tsx
+// App.tsx or layout
+import './adapt-brand-theme.css';
+```
+
+```css
+/* adapt-brand-theme.css */
+
+/*
+ * Example: brand theme using primary / secondary / accent colors.
+ * Maps your design-system tokens to Adapt's CSS variables for both modes.
+ */
+
+/* ── Light mode ────────────────────────────────── */
+.mb-adapt {
+  /* Brand palette */
+  --mb-adapt-fork-bg:               #ffffff;           /* surface          */
+  --mb-adapt-fork-tab-bg:           #f0f4ff;           /* primary-50       */
+  --mb-adapt-fork-tab-active-bg:    #ffffff;           /* surface          */
+  --mb-adapt-fork-tab-color:        #1e293b;           /* on-surface       */
+  --mb-adapt-fork-tab-inactive-color: #64748b;         /* on-surface-muted */
+  --mb-adapt-fork-separator:        #cbd5e1;           /* outline          */
+
+  /* Accent — resize handle highlight */
+  --mb-adapt-separator-active:      rgba(79, 70, 229, 0.5);  /* primary    */
+
+  /* Cap widget */
+  --mb-adapt-cap-background:        #ffffff;
+  --mb-adapt-cap-border-color:      #e2e8f0;
+  --mb-adapt-cap-color:             #1e293b;
+  --mb-adapt-cap-spinner-color:     #4f46e5;           /* primary          */
+
+  /* Status cards */
+  --mb-adapt-status-card-bg:        #ffffff;
+  --mb-adapt-status-card-border:    #e2e8f0;
+  --mb-adapt-status-text:           #334155;
+}
+
+/* ── Dark mode ─────────────────────────────────── */
+.mb-adapt[dark-mode] {
+  --mb-adapt-fork-bg:               #0f172a;           /* surface-dark     */
+  --mb-adapt-fork-tab-bg:           #1e293b;           /* primary-900      */
+  --mb-adapt-fork-tab-active-bg:    #0f172a;           /* surface-dark     */
+  --mb-adapt-fork-tab-color:        #f1f5f9;           /* on-surface-dark  */
+  --mb-adapt-fork-tab-inactive-color: #94a3b8;         /* muted-dark       */
+  --mb-adapt-fork-separator:        #334155;           /* outline-dark     */
+
+  --mb-adapt-separator-active:      rgba(129, 140, 248, 0.6); /* primary-light */
+
+  --mb-adapt-cap-background:        #1e293b;
+  --mb-adapt-cap-border-color:      #334155;
+  --mb-adapt-cap-color:             #f1f5f9;
+  --mb-adapt-cap-spinner-color:     #818cf8;           /* primary-light    */
+
+  --mb-adapt-status-card-bg:        #1e293b;
+  --mb-adapt-status-card-border:    #334155;
+  --mb-adapt-status-text:           #e2e8f0;
+}
+```
+
+### Font
+
+```css
+.mb-adapt {
+  --mb-adapt-font: "Inter", sans-serif;
+}
+```
+
+### Elevation and borders
+
+```css
+/* Subtle, modern elevation */
+.mb-adapt {
+  --mb-adapt-floating-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
+  --mb-adapt-floating-border: 1px solid rgba(0, 0, 0, 0.06);
+  --mb-adapt-floating-radius: 12px;
+  --mb-adapt-floating-backdrop: none;
+
+  --mb-adapt-status-card-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
+  --mb-adapt-drag-ghost-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  --mb-adapt-border-radius: 8px;  /* iframe border radius */
+}
+
+/* Dark mode */
+.mb-adapt[dark-mode] {
+  --mb-adapt-floating-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  --mb-adapt-floating-border: 1px solid rgba(255, 255, 255, 0.08);
+  --mb-adapt-status-card-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
+  --mb-adapt-drag-ghost-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
+}
+```
+
+**Frosted glass effect:**
+
+```css
+.mb-adapt {
+  --mb-adapt-fork-bg: rgba(255, 255, 255, 0.7);
+  --mb-adapt-fork-tab-bg: rgba(245, 245, 245, 0.5);
+  --mb-adapt-floating-backdrop: blur(16px) saturate(180%);
+  --mb-adapt-floating-border: 1px solid rgba(255, 255, 255, 0.2);
+  --mb-adapt-floating-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
+}
+```
+
+**Flat / borderless:**
+
+```css
+.mb-adapt {
+  --mb-adapt-floating-shadow: none;
+  --mb-adapt-floating-border: 1px solid var(--mb-adapt-fork-separator);
+  --mb-adapt-floating-radius: 4px;
+  --mb-adapt-status-card-shadow: none;
+  --mb-adapt-drag-ghost-shadow: none;
+}
+```
+
+### Using the `classNames` prop
+
+Override internal element classes for deeper customization:
+
+```tsx
+<AdaptAutomation
+  automationId="auto-123"
+  classNames={{
+    root: 'my-adapt-root',
+    iframe: 'my-adapt-iframe',
+    statusMessage: 'my-status-overlay',
+    statusCard: 'my-status-card',
+  }}
 />
 ```
 
-## Advanced: Multiple transmitters or initial signals
+### Using the `styles` prop
 
-For automations with multiple entry points or when you need to pass initial data:
+Apply inline styles to the internal root element (useful for sizing):
 
 ```tsx
-import { Adapt, type SignalDataJson } from '@mochabug/adapt-react';
-
-// Start from a specific transmitter
-<Adapt
-  id="auto-123"
-  authToken="your-token"
-  transmitter="my-transmitter"
-  style={{ height: 600 }}
+<AdaptAutomation
+  automationId="auto-123"
+  styles={{ height: '600px', maxWidth: '1200px', margin: '0 auto' }}
 />
+```
+
+> **Note:** `styles` targets the internal `.mb-adapt` root. Use the React `style` prop for styles on the outer `<adapt-automation>` host element.
 
-// Start with initial signals (data must be base64 encoded)
-const signals: { [key: string]: SignalDataJson } = {
-  'input': {
-    mimeType: 'text/plain',
-    data: btoa('Hello World')
-  }
-};
-
-<Adapt
-  id="auto-123"
-  authToken="your-token"
-  transmitter="file-processor"
-  signals={signals}
-  style={{ height: 600 }}
+### Tailwind
+
+Use `className` on the host element, and CSS variables via Tailwind's arbitrary property syntax:
+
+```tsx
+<AdaptAutomation
+  automationId="auto-123"
+  className="h-[600px] rounded-lg"
+  classNames={{ iframe: 'rounded-lg shadow-xl' }}
 />
 ```
 
+Or set variables in your Tailwind global CSS:
+
+```css
+/* globals.css */
+.mb-adapt {
+  --mb-adapt-fork-bg: theme('colors.white');
+  --mb-adapt-fork-separator: theme('colors.gray.200');
+  --mb-adapt-font: theme('fontFamily.sans');
+}
+```
+
+<details>
+<summary>Full CSS variable reference</summary>
+
+### General
+
+| Variable | Light default | Dark default | Description |
+|---|---|---|---|
+| `--mb-adapt-bg` | `transparent` | | Root & group backgrounds |
+| `--mb-adapt-font` | `system-ui, -apple-system, sans-serif` | | All panel UI text |
+| `--mb-adapt-button-hover-bg` | `rgba(128,128,128,0.2)` | `rgba(128,128,128,0.3)` | Close/popout/action button hover |
+| `--mb-adapt-separator-active` | `rgba(59,130,246,0.5)` | `rgba(99,130,246,0.6)` | Resize handle hover/active |
+| `--mb-adapt-border-radius` | `8px` | | Iframe border radius |
+
+### Toolbar and tabs
+
+| Variable | Light default | Dark default | Description |
+|---|---|---|---|
+| `--mb-adapt-fork-bg` | `#ffffff` | `#1e1e1e` | Panel content background |
+| `--mb-adapt-fork-tab-bg` | `#f3f3f3` | `#252526` | Toolbar / inactive tab bg |
+| `--mb-adapt-fork-tab-active-bg` | `#ffffff` | `#1e1e1e` | Active tab background |
+| `--mb-adapt-fork-tab-color` | `rgb(51,51,51)` | `#ffffff` | Active tab text |
+| `--mb-adapt-fork-tab-inactive-color` | `rgba(51,51,51,0.7)` | `#969696` | Inactive tab text |
+| `--mb-adapt-fork-separator` | `rgba(128,128,128,0.35)` | `rgb(68,68,68)` | Tab/panel borders |
+
+### Floating panels (elevation)
+
+| Variable | Light default | Dark default | Description |
+|---|---|---|---|
+| `--mb-adapt-floating-shadow` | `0 25px 50px -12px rgba(0,0,0,0.25), 0 12px 24px -8px rgba(0,0,0,0.15)` | `… rgba(0,0,0,0.5), … rgba(0,0,0,0.3)` | Overlay box-shadow |
+| `--mb-adapt-floating-border` | `none` | `1px solid rgba(255,255,255,0.06)` | Overlay border |
+| `--mb-adapt-floating-backdrop` | `none` | | Overlay backdrop-filter |
+| `--mb-adapt-floating-radius` | `8px` | | Overlay border-radius |
+| `--mb-adapt-status-card-shadow` | `0 4px 24px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04)` | `… rgba(0,0,0,0.25), … rgba(0,0,0,0.15)` | Status card box-shadow |
+| `--mb-adapt-drag-ghost-shadow` | `0 4px 12px rgba(0,0,0,0.15)` | `0 4px 12px rgba(0,0,0,0.35)` | Drag ghost box-shadow |
+
+### Drop targets
+
+| Variable | Light default | Dark default |
+|---|---|---|
+| `--mb-adapt-drop-header-bg` | `rgba(99,102,241,0.18)` | `rgba(129,140,248,0.22)` |
+| `--mb-adapt-drop-center-bg` | `rgba(99,102,241,0.12)` | `rgba(129,140,248,0.15)` |
+| `--mb-adapt-drop-split-bg` | `rgba(99,102,241,0.14)` | `rgba(129,140,248,0.18)` |
+| `--mb-adapt-drop-border` | `rgba(99,102,241,0.55)` | `rgba(129,140,248,0.6)` |
+
+### Status cards
+
+| Variable | Light default | Dark default |
+|---|---|---|
+| `--mb-adapt-status-card-bg` | `#ffffff` | `#1e293b` |
+| `--mb-adapt-status-card-border` | `#e5e7eb` | `#334155` |
+| `--mb-adapt-status-icon-bg` | `#fef2f2` | `#351c1c` |
+| `--mb-adapt-status-text` | `#374151` | `#e2e8f0` |
+
+### Cap widget
+
+| Variable | Light default | Dark default |
+|---|---|---|
+| `--mb-adapt-cap-background` | `#ffffff` | `#1e293b` |
+| `--mb-adapt-cap-border-color` | `#e2e8f0` | `#334155` |
+| `--mb-adapt-cap-border-radius` | `16px` | |
+| `--mb-adapt-cap-height` | `72px` | |
+| `--mb-adapt-cap-width` | `380px` | |
+| `--mb-adapt-cap-padding` | `20px 28px` | |
+| `--mb-adapt-cap-gap` | `20px` | |
+| `--mb-adapt-cap-color` | `#1e293b` | `#f1f5f9` |
+| `--mb-adapt-cap-checkbox-size` | `36px` | |
+| `--mb-adapt-cap-checkbox-border` | `2px solid #cbd5e1` | `2px solid #475569` |
+| `--mb-adapt-cap-checkbox-radius` | `10px` | |
+| `--mb-adapt-cap-checkbox-background` | `#f8fafc` | `#0f172a` |
+| `--mb-adapt-cap-spinner-color` | `#6366f1` | `#818cf8` |
+| `--mb-adapt-cap-spinner-bg` | `#e2e8f0` | `#334155` |
+| `--mb-adapt-cap-spinner-thickness` | `3px` | |
+| `--mb-adapt-cap-font` | `inherit` | |
+
+</details>
+
+---
+
 ## Props
 
 | Prop | Type |
 |------|------|
-| `id` | `string` (required) |
+| `automationId` | `string` (required) |
 | `sessionToken` | `string` |
 | `authToken` | `string` |
 | `transmitter` | `string` |
-| `signals` | `{ [key: string]: SignalDataJson }` |
+| `signals` | `{ [key: string]: SignalValue }` |
+| `challengeToken` | `string` |
+| `requiresChallenge` | `boolean` |
+| `capWidgetOptions` | `{ workerCount?: number; i18n?: CapWidgetI18n }` |
 | `inheritToken` | `string` |
 | `inheritFrom` | `{ hash: string } \| { param: string }` |
-| `forkDisplayMode` | `'side-by-side' \| 'dialog'` |
-| `sideBySideSplit` | `number` (0-100) |
-| `dialogBackdropClose` | `boolean` |
+| `forkDisplay` | `{ mode: 'side-by-side', split?: number } \| { mode: 'dialog' }` |
+| `darkMode` | `boolean` |
+| `autoResizing` | `boolean` |
+| `allowFloating` | `boolean` — hide pop-out buttons and block user-initiated floating (default `true`) |
+| `allowDocking` | `boolean` — hide dock buttons and block user-initiated docking (default `true`) |
+| `allowDialogDocking` | `boolean` — allow tab splits inside floating dialog overlays (default `true`) |
+| `floatingAutoResize` | `boolean` — floating overlays auto-resize from iframe content (default `false`) |
+| `persist` | `boolean \| PersistOptions` |
+| `text` | `StatusText` |
 | `onSession` | `(status, fork?) => void` |
 | `onOutput` | `(output) => void` |
+| `onForkActive` | `(active) => void` |
+| `classNames` | `{ root?: string; iframe?: string; statusMessage?: string; statusCard?: string }` |
+| `styles` | `Partial<CSSStyleDeclaration>` |
 | `className` | `string` |
 | `style` | `CSSProperties` |
 
 ## License
 
-ISC © mochabug AB
+ISC (c) mochabug AB

package/dist/esm/AdaptAutomation.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AdaptAutomationElement, } from "@mochabug/adapt-web";
+import "@mochabug/adapt-web/cap";
+import { forwardRef, useLayoutEffect, useRef } from "react";
+// 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 AdaptAutomation = forwardRef(function AdaptAutomation({ automationId, sessionToken, authToken, transmitter, signals, challengeToken, requiresChallenge, capWidgetOptions, inheritToken, inheritFrom, forkDisplay, darkMode, autoResizing, allowFloating, allowDocking, allowDialogDocking, allowMinimize, allowMaximize, floatingAutoResize, onSession, onOutput, onForkActive, classNames, styles, persist, text, 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 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.persistOptions = typeof persist === "object" ? persist : undefined;
+        el.text = text;
+        el.onSessionCallback = onSession;
+        el.onOutputCallback = onOutput;
+        el.onForkActiveCallback = onForkActive;
+    });
+    // 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": automationId, "session-token": sessionToken, "auth-token": authToken, transmitter: transmitter, "challenge-token": challengeToken, "requires-challenge": requiresChallenge ? "" : undefined, "inherit-token": inheritToken, "fork-display-mode": forkDisplay?.mode, "side-by-side-split": forkDisplay?.mode === "side-by-side" &&
+            forkDisplay.split !== undefined
+            ? String(forkDisplay.split)
+            : undefined, "dark-mode": darkMode ? "" : undefined, "auto-resizing": autoResizing ? "" : undefined, "allow-floating": allowFloating === false ? "false" : undefined, "allow-docking": allowDocking === false ? "false" : undefined, "allow-dialog-docking": allowDialogDocking === false ? "false" : undefined, "allow-minimize": allowMinimize === false ? "false" : undefined, "allow-maximize": allowMaximize === false ? "false" : undefined, "floating-auto-resize": floatingAutoResize ? "" : undefined, persist: persist ? "" : undefined }));
+});

package/dist/esm/AdaptCap.js

@@ -1,8 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { AdaptCapElement, } from "@mochabug/adapt-web";
+import { AdaptCapElement, } from "@mochabug/adapt-web/cap";
 import { forwardRef, useLayoutEffect, useRef } from "react";
-// Re-export for direct use
-export { AdaptCapWidget, } from "@mochabug/adapt-web";
 // Ensure custom element is registered
 void AdaptCapElement;
 /**

package/dist/esm/cap.js

@@ -0,0 +1,4 @@
+// Cap entry — standalone Cap.js widget for React
+import "@mochabug/adapt-web/cap";
+export { AdaptCap } from "./AdaptCap.js";
+export { Cap as AdaptCapWidget, createChallenge, redeemChallenge, AdaptCapElement, createConnectClient, } from "@mochabug/adapt-web/cap";

package/dist/esm/core.js

@@ -0,0 +1,3 @@
+// Core entry — Adapt component without Cap.js
+export * from "@mochabug/adapt-web/core";
+export { AdaptAutomation } from "./AdaptAutomation.js";

package/dist/esm/index.js

@@ -1,53 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-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, challengeToken, requiresChallenge, capWidgetOptions, inheritToken, inheritFrom, forkDisplay, darkMode, autoResizing, onSession, onOutput, onForkActive, classNames, styles, persist, text, 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 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.persistOptions = typeof persist === "object" ? persist : undefined;
-        el.text = text;
-        el.onSessionCallback = onSession;
-        el.onOutputCallback = onOutput;
-        el.onForkActiveCallback = onForkActive;
-    });
-    // 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": forkDisplay?.mode, "side-by-side-split": forkDisplay?.mode === "side-by-side" &&
-            forkDisplay.split !== undefined
-            ? String(forkDisplay.split)
-            : undefined, "dialog-backdrop-close": forkDisplay?.mode === "dialog" && forkDisplay.backdropClose !== false
-            ? ""
-            : undefined, "dialog-resize-to-content": forkDisplay?.mode === "dialog" &&
-            forkDisplay.resizeToContent !== false
-            ? ""
-            : undefined, "dark-mode": darkMode ? "" : undefined, "auto-resizing": autoResizing ? "" : undefined, persist: persist ? "" : undefined }));
-});
+// Re-export the React component
+export { AdaptAutomation } from "./AdaptAutomation.js";

package/dist/types/AdaptAutomation.d.ts

@@ -0,0 +1,74 @@
+import { AdaptAutomationElement, type AdaptWebClientOptions, type ForkDisplay, type Output, type PersistOptions, type SignalValue, type StatusJson, type StatusText } from "@mochabug/adapt-web";
+import "@mochabug/adapt-web/cap";
+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;
+                "dark-mode"?: string;
+                "auto-resizing"?: string;
+                persist?: string;
+                "allow-floating"?: string;
+                "allow-docking"?: string;
+                "allow-dialog-docking"?: string;
+                "allow-minimize"?: string;
+                "allow-maximize"?: string;
+                "floating-auto-resize"?: string;
+            }, AdaptAutomationElement>;
+        }
+    }
+}
+/**
+ * Props for the AdaptAutomation React component.
+ */
+export interface AdaptAutomationProps {
+    automationId: 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;
+    };
+    forkDisplay?: ForkDisplay;
+    darkMode?: boolean;
+    autoResizing?: boolean;
+    allowFloating?: boolean;
+    allowDocking?: boolean;
+    allowDialogDocking?: boolean;
+    allowMinimize?: boolean;
+    allowMaximize?: boolean;
+    floatingAutoResize?: boolean;
+    onSession?: (status: StatusJson, fork?: string) => void;
+    onOutput?: (output: Output) => void;
+    onForkActive?: (active: boolean) => void;
+    classNames?: AdaptWebClientOptions["classNames"];
+    styles?: Partial<CSSStyleDeclaration>;
+    persist?: boolean | PersistOptions;
+    text?: StatusText;
+    /** CSS class name for the host element */
+    className?: string;
+    /** 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 AdaptAutomation: import("react").ForwardRefExoticComponent<AdaptAutomationProps & import("react").RefAttributes<AdaptAutomationElement>>;

package/dist/types/AdaptCap.d.ts

@@ -1,6 +1,5 @@
 import type { AutomationClient } from "@mochabug/adapt-core";
-import { AdaptCapElement, type CapWidgetI18n } from "@mochabug/adapt-web";
-export { AdaptCapWidget, type AdaptCapWidgetOptions, } from "@mochabug/adapt-web";
+import { AdaptCapElement, type CapWidgetI18n } from "@mochabug/adapt-web/cap";
 declare module "react" {
     namespace JSX {
         interface IntrinsicElements {

package/dist/types/cap.d.ts

@@ -0,0 +1,3 @@
+import "@mochabug/adapt-web/cap";
+export { AdaptCap, type AdaptCapProps } from "./AdaptCap.js";
+export { Cap as AdaptCapWidget, type AdaptCapWidgetOptions, createChallenge, redeemChallenge, AdaptCapElement, createConnectClient, type ChallengeInfo, type RedeemedChallenge, type CapWidgetI18n, type CapWidgetOptions, } from "@mochabug/adapt-web/cap";

package/dist/types/core.d.ts

@@ -0,0 +1,2 @@
+export * from "@mochabug/adapt-web/core";
+export { AdaptAutomation, type AdaptAutomationProps } from "./AdaptAutomation.js";

package/dist/types/index.d.ts

@@ -1,65 +1,2 @@
-import { AdaptAutomationElement, type AdaptWebClientOptions, type ForkDisplay, type Output, type PersistOptions, type SignalValue, type StatusJson, type StatusText } 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;
-                "dialog-resize-to-content"?: string;
-                "dark-mode"?: string;
-                "auto-resizing"?: string;
-                persist?: string;
-            }, AdaptAutomationElement>;
-        }
-    }
-}
 export * from "@mochabug/adapt-web";
-export { AdaptCap, type AdaptCapProps } from "./AdaptCap.js";
-/**
- * Props for the Adapt React component.
- */
-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;
-    };
-    forkDisplay?: ForkDisplay;
-    darkMode?: boolean;
-    autoResizing?: boolean;
-    onSession?: (status: StatusJson, fork?: string) => void;
-    onOutput?: (output: Output) => void;
-    onForkActive?: (active: boolean) => void;
-    classNames?: AdaptWebClientOptions["classNames"];
-    styles?: Partial<CSSStyleDeclaration>;
-    persist?: boolean | PersistOptions;
-    text?: StatusText;
-    /** CSS class name for the host element */
-    className?: string;
-    /** 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<AdaptAutomationElement>>;
+export { AdaptAutomation, type AdaptAutomationProps } from "./AdaptAutomation.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mochabug/adapt-react",
-  "version": "1.0.1-rc.1",
+  "version": "1.0.1-rc.11",
   "description": "React component for Adapt automation platform",
   "type": "module",
   "main": "./dist/esm/index.js",
@@ -9,6 +9,14 @@
     ".": {
       "types": "./dist/types/index.d.ts",
       "import": "./dist/esm/index.js"
+    },
+    "./core": {
+      "types": "./dist/types/core.d.ts",
+      "import": "./dist/esm/core.js"
+    },
+    "./cap": {
+      "types": "./dist/types/cap.d.ts",
+      "import": "./dist/esm/cap.js"
     }
   },
   "files": [
@@ -17,7 +25,7 @@
   "scripts": {
     "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",
+    "build": "(cd ../web && npm run build) && rm -rf dist && npm run build:esm && npm run build:types",
     "sample": "npm run build && cd sample && npm run dev"
   },
   "keywords": [
@@ -37,6 +45,6 @@
     "typescript": "^5.9.3"
   },
   "dependencies": {
-    "@mochabug/adapt-web": "^1.0.1-rc.1"
+    "@mochabug/adapt-web": "^1.0.1-rc.11"
   }
 }