@mochabug/adapt-astro

Astro component for Adapt.

npm install @mochabug/adapt-astro

Requires Astro 3, 4, 5, or 6.

Quickstart

---
import AdaptAutomation from '@mochabug/adapt-astro/AdaptAutomation.astro';
---

<AdaptAutomation automationId="auto-123" style="height: 600px;" />

With authentication:

<AdaptAutomation automationId="auto-123" authToken="your-token" style="height: 600px;" />

With proof-of-work challenge:

<AdaptAutomation automationId="auto-123" requiresChallenge style="height: 600px;" />

SSR

Keep auth token on server. Enable SSR in astro.config.mjs:

// astro.config.mjs
export default defineConfig({
  output: 'server'
});

---
import AdaptAutomation from '@mochabug/adapt-astro/AdaptAutomation.astro';
import { startSession } from '@mochabug/adapt-core';

const authToken = await getAuthTokenFromBackend();
const { token } = await startSession({ id: 'auto-123' }, authToken);
---

<AdaptAutomation automationId="auto-123" sessionToken={token} style="height: 600px;" />

Session inheritance

<!-- from URL hash: example.com#mb_session=xxx -->
<AdaptAutomation automationId="auto-123" inheritFrom={{ hash: 'mb_session' }} />

<!-- from URL param: example.com?token=xxx -->
<AdaptAutomation automationId="auto-123" inheritFrom={{ param: 'token' }} />

Fork display

<!-- side-by-side (default) -->
<AdaptAutomation automationId="auto-123" forkDisplay={{ mode: 'side-by-side', split: 60 }} />

<!-- dialog -->
<AdaptAutomation automationId="auto-123" forkDisplay={{ mode: 'dialog' }} />

Events

Listen via addEventListener on the underlying <adapt-automation> element:

<AdaptAutomation automationId="auto-123" style="height: 600px;" />
<script>
  const el = document.querySelector('adapt-automation');
  el?.addEventListener('adapt-session', (e) => console.log(e.detail));
  el?.addEventListener('adapt-output', (e) => console.log(e.detail));
</script>

2. AdaptCap

Standalone proof-of-work challenge widget. Use when you manage the automation client yourself.

Since Astro components are server-rendered, you must set the client property via JavaScript after the element is in the DOM:

---
import AdaptCap from '@mochabug/adapt-astro/AdaptCap.astro';
---

<AdaptCap automationId="YOUR_ID" />

<script>
  import { createConnectClient, AdaptCapElement } from '@mochabug/adapt-astro/cap';

  void AdaptCapElement; // ensure custom element is registered

  const el = document.querySelector<AdaptCapElement>('adapt-cap');
  if (el) {
    el.client = createConnectClient({ id: 'YOUR_ID' });
    el.addEventListener('adapt-cap-solve', (e) => {
      const { token, expires } = (e as CustomEvent).detail;
      console.log('Solved:', token, expires);
    });
    el.addEventListener('adapt-cap-error', (e) => {
      console.error((e as CustomEvent).detail.error);
    });
  }
</script>

Props

| Prop | Type | |------|------| | automationId | string (required) | | workerCount | number | | i18n | CapWidgetI18n | | darkMode | boolean | | class | string | | style | string |

JS-only properties

| Property | Type | |----------|------| | client | AutomationClient — required, set via JS | | i18n | CapWidgetI18n — label overrides |

Events

| Event | Detail | |-------|--------| | adapt-cap-solve | { token: string, expires: Date } | | adapt-cap-error | { error: Error } |

Headless (no UI)

Use the lower-level API to create and redeem challenges yourself:

import { createChallenge, redeemChallenge, createConnectClient } from '@mochabug/adapt-astro/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

There are three ways to style the Adapt component, from simplest to most powerful.

1. theme prop (recommended)

Pass an AdaptTheme object for semantic token-based theming. Define the theme in frontmatter and pass it as a prop:

---
import AdaptAutomation from '@mochabug/adapt-astro/AdaptAutomation.astro';
import type { AdaptTheme } from '@mochabug/adapt-astro';

const myTheme: AdaptTheme = {
  mode: 'light',
  primary: '#4f46e5',
  background: '#ffffff',
  surface: '#f0f4ff',
  text: '#1e293b',
  textSecondary: '#64748b',
  border: '#cbd5e1',
  font: '"Inter", sans-serif',
};
---

<AdaptAutomation automationId="auto-123" theme={myTheme} style="height: 600px;" />

AdaptTheme tokens

| Token | Type | Description | |---|---|---| | mode | 'light' \| 'dark' | Controls dark mode class and shadow/border defaults | | primary | string | Accent color -- derives separator, drop target, status icon, and spinner colors | | background | string | Main background (panels, active tabs, status cards) | | surface | string | Surface color (toolbar, inactive tabs) | | text | string | Primary text color (tabs, status, cap widget) | | textSecondary | string | Secondary/muted text (inactive tabs) | | border | string | Border/separator color (tabs, panels, cap widget, status cards) | | font | string | Font family for all panel UI text | | vars | Record<string, string> | Direct CSS variable overrides (see below) |

vars escape hatch

For any variable not covered by the semantic tokens, use vars with variable names without the --mb-adapt- prefix. These override everything, including derived values:

---
const myTheme: AdaptTheme = {
  mode: 'dark',
  primary: '#818cf8',
  background: '#0f172a',
  surface: '#1e293b',
  text: '#f1f5f9',
  border: '#334155',
  vars: {
    'fork-tab-active-bg': '#0f172a',
    'floating-radius': '12px',
    'cap-spinner-color': '#a5b4fc',
  },
};
---

<AdaptAutomation automationId="auto-123" theme={myTheme} style="height: 600px;" />

2. CSS custom properties

Override --mb-adapt-* variables on .mb-adapt using <style is:global> in your layout or page, or import a CSS file in frontmatter.

Inline in a layout or page:

<style is:global>
  .mb-adapt {
    --mb-adapt-fork-bg: #ffffff;
    --mb-adapt-fork-tab-bg: #f5f5f5;
    --mb-adapt-fork-tab-active-bg: #ffffff;
    --mb-adapt-fork-tab-color: #1a1a1a;
    --mb-adapt-fork-tab-inactive-color: #888;
    --mb-adapt-fork-separator: #e0e0e0;
    --mb-adapt-font: "Inter", sans-serif;
  }

  .mb-adapt--dark {
    --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;
  }
</style>

Or import a CSS file in frontmatter:

---
import '../styles/adapt-theme.css';
---

/* src/styles/adapt-theme.css */

.mb-adapt {
  --mb-adapt-fork-bg: #ffffff;
  --mb-adapt-fork-tab-bg: #f0f4ff;
  --mb-adapt-fork-tab-active-bg: #ffffff;
  --mb-adapt-fork-tab-color: #1e293b;
  --mb-adapt-fork-tab-inactive-color: #64748b;
  --mb-adapt-fork-separator: #cbd5e1;
  --mb-adapt-separator-active: rgba(79, 70, 229, 0.5);
  --mb-adapt-cap-background: #ffffff;
  --mb-adapt-cap-border-color: #e2e8f0;
  --mb-adapt-cap-color: #1e293b;
  --mb-adapt-cap-spinner-color: #4f46e5;
  --mb-adapt-status-card-bg: #ffffff;
  --mb-adapt-status-card-border: #e2e8f0;
  --mb-adapt-status-text: #334155;
}

.mb-adapt--dark {
  --mb-adapt-fork-bg: #0f172a;
  --mb-adapt-fork-tab-bg: #1e293b;
  --mb-adapt-fork-tab-active-bg: #0f172a;
  --mb-adapt-fork-tab-color: #f1f5f9;
  --mb-adapt-fork-tab-inactive-color: #94a3b8;
  --mb-adapt-fork-separator: #334155;
  --mb-adapt-separator-active: rgba(129, 140, 248, 0.6);
  --mb-adapt-cap-background: #1e293b;
  --mb-adapt-cap-border-color: #334155;
  --mb-adapt-cap-color: #f1f5f9;
  --mb-adapt-cap-spinner-color: #818cf8;
  --mb-adapt-status-card-bg: #1e293b;
  --mb-adapt-status-card-border: #334155;
  --mb-adapt-status-text: #e2e8f0;
}

3. Direct CSS on internal classes

There is no Shadow DOM -- all classes are in the light DOM, so you can target internal elements directly with <style is:global>.

Animated gradient toolbar:

<style is:global>
  @keyframes mb-gradient-shift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  .mb-group-header {
    background: linear-gradient(135deg, #667eea, #764ba2, #f093fb, #667eea);
    background-size: 300% 300%;
    animation: mb-gradient-shift 6s ease infinite;
  }

  .mb-group-header .mb-tab[data-active="true"] {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
  }

  .mb-group-header .mb-tab {
    color: rgba(255, 255, 255, 0.7);
  }

  /* Dark mode variant */
  .mb-adapt--dark .mb-group-header {
    background: linear-gradient(135deg, #1e1b4b, #312e81, #4c1d95, #1e1b4b);
    background-size: 300% 300%;
    animation: mb-gradient-shift 6s ease infinite;
  }

  .mb-adapt--dark .mb-group-header .mb-tab[data-active="true"] {
    background: rgba(255, 255, 255, 0.15);
    color: #e0e7ff;
  }

  .mb-adapt--dark .mb-group-header .mb-tab {
    color: rgba(224, 231, 255, 0.6);
  }
</style>

Key internal classes

| Class | Element | |---|---| | .mb-adapt | Root container | | .mb-adapt--dark | Dark mode modifier on root | | .mb-group-header | Toolbar / tab bar | | .mb-tab | Individual tab | | .mb-tab[data-active="true"] | Active tab | | .mb-tab-label | Tab label text | | .mb-group-content | Panel content area | | .mb-group-header-actions | Toolbar action buttons (close, pop-out) | | .mb-layout-separator | Resize handle between panels | | .mb-split-leaf | Individual panel leaf in a split layout |

Tip: The class prop styles the outer <adapt-automation> host element. Use classNames to add classes to the internal .mb-adapt structure.

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 | | --mb-adapt-tab-radius | 0 | | Tab border-radius (use 999px for pill shape) | | --mb-adapt-tab-shadow | none | | Tab box-shadow | | --mb-adapt-tab-active-shadow | none | | Active tab box-shadow | | --mb-adapt-tab-gap | 0px | | Tab margin (spacing between tabs) | | --mb-adapt-tab-padding | 0 14px | | Tab padding | | --mb-adapt-tab-font-size | 13px | | Tab label font size | | --mb-adapt-toolbar-height | 40px | | Toolbar / tab bar height | | --mb-adapt-toolbar-padding | 0 | | Toolbar inner padding (standard CSS shorthand) | | --mb-adapt-tab-min-width | 100px | | Tab minimum width | | --mb-adapt-tab-spacing | 6px | | Gap between tab label and action buttons |

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 | |

Z-index / stacking

| Variable | Default | Description | |---|---|---| | --mb-adapt-z-base | 0 | Base z-index offset — added to all internal z-index values |

Set --mb-adapt-z-base to shift all internal z-index values. Useful when embedding inside modals or drawers that have their own stacking context. Example: --mb-adapt-z-base: 10000 lifts all layers by 10000.

Internal stacking order from low to high: separators (1), resize handles (10), minimized tabs (100), floating panels (100000+), status/cap (200000), confirm dialog (300000), drop targets (999998), drag ghost (999999). All values are offset by --mb-adapt-z-base.

Props

| Prop | Type | |------|------| | automationId | string (required) | | sessionToken | string | | authToken | string | | transmitter | string | | signals | { [key: string]: SignalValue } | | challengeToken | string | | requiresChallenge | boolean | | capWidgetOptions | { workerCount?: number; i18n?: CapWidgetI18n } | | inheritToken | string | | inheritFrom | { hash: string } \| { param: string } | | 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) | | confirmOnClose | boolean — show confirmation dialog before leaving page (default false) | | persist | boolean \| PersistOptions | | text | StatusText | | theme | AdaptTheme | | classNames | { root?: string; iframe?: string; statusMessage?: string; statusCard?: string } | | class | string | | style | string |

License

ISC (c) mochabug AB