@mochabug/adapt-svelte

Svelte component for Adapt.

npm install @mochabug/adapt-svelte

Requires Svelte 4 or 5.

Quickstart

<script>
  import { AdaptAutomation } from '@mochabug/adapt-svelte';
</script>

<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 (SvelteKit)

Keep auth token on server:

// +page.server.ts
import { startSession } from '@mochabug/adapt-core';

export async function load() {
  const authToken = await getAuthTokenFromBackend();
  const { token } = await startSession({ id: 'auto-123' }, authToken);
  return { sessionToken: token };
}

<!-- +page.svelte -->
<script>
  import { AdaptAutomation } from '@mochabug/adapt-svelte';
  export let data;
</script>

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

Session inheritance

<!-- direct -->
<AdaptAutomation automationId="auto-123" inheritToken="token-from-parent" />

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

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' }} />

Callbacks

<AdaptAutomation
  automationId="auto-123"
  onsession={(e) => console.log(e.status, e.fork)}
  onoutput={(e) => console.log(e.output)}
  onforkactive={(e) => console.log(e.active)}
/>

2. AdaptCap

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

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

  const client = createConnectClient({ id: 'YOUR_ID' });

  function handleSolve(event: { token: string; expires: Date }) {
    console.log('Solved:', event.token, event.expires);
  }
</script>

<AdaptCap
  automationId="YOUR_ID"
  {client}
  onsolve={handleSolve}
  onerror={(e) => console.error(e.error)}
/>

Props

| Prop | Type | |------|------| | automationId | string (required) | | client | AutomationClient (required) | | workerCount | number | | i18n | CapWidgetI18n | | darkMode | boolean | | onsolve | (event: { token: string; expires: Date }) => void | | onerror | (event: { error: Error }) => void |

Headless (no UI)

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

import { createChallenge, redeemChallenge, createConnectClient } from '@mochabug/adapt-svelte/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 theme Adapt, from simplest to most advanced. Pick whichever fits your workflow -- they can be combined.

1. theme prop (recommended)

Pass an AdaptTheme object for semantic, token-based theming with no CSS required:

<script>
  import { AdaptAutomation } from '@mochabug/adapt-svelte';

  const myTheme = {
    mode: 'dark',
    primary: '#6366f1',
    background: '#0f172a',
    surface: '#1e293b',
    text: '#f1f5f9',
    textSecondary: '#94a3b8',
    border: '#334155',
    font: '"Inter", sans-serif',
  };
</script>

<AdaptAutomation automationId="auto-123" theme={myTheme} />

AdaptTheme tokens

| Token | Effect | |---|---| | mode | 'light' | 'dark' -- controls dark-mode class and shadow/border defaults | | primary | Accent color -- derives separator, drop-target, status-icon, and cap-spinner colors | | background | Main background (--mb-adapt-bg, active tab bg, status-card bg) | | surface | Panel / tab surface (--mb-adapt-fork-bg, --mb-adapt-fork-tab-bg) | | text | Primary text color (tab text, status text, cap text) | | textSecondary | Muted / inactive tab text | | border | Border and separator color (tabs, status cards, cap widget) | | font | Font family for all panel UI and cap widget text |

vars escape hatch

For any variable not covered by the semantic tokens, add a vars map. Keys are variable names without the --mb-adapt- prefix:

<script>
  const myTheme = {
    mode: 'light',
    primary: '#6366f1',
    vars: {
      'floating-radius': '16px',
      'cap-border-radius': '24px',
      'border-radius': '12px',
    },
  };
</script>

<AdaptAutomation automationId="auto-123" theme={myTheme} />

2. CSS custom properties

Set --mb-adapt-* variables on the .mb-adapt root class. Because .mb-adapt lives inside the custom element, use :global() in your Svelte component's <style> block:

<style>
  :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;
  }

  :global(.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 global CSS file in your layout:

<!-- +layout.svelte -->
<script>
  import '../adapt-theme.css';
</script>

/* adapt-theme.css */
.mb-adapt {
  --mb-adapt-fork-bg: #ffffff;
  --mb-adapt-fork-separator: #e0e0e0;
}

.mb-adapt--dark {
  --mb-adapt-fork-bg: #1e1e1e;
  --mb-adapt-fork-separator: #3a3a3a;
}

3. Direct CSS on internal classes

There is no Shadow DOM -- all internal classes live in the light DOM, so you can target them directly. Use :global() in a Svelte <style> block to escape scoping.

Animated gradient toolbar

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

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

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

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

  /* Dark mode variant */
  :global(.mb-adapt--dark .mb-group-header) {
    background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460, #1a1a2e);
    background-size: 300% 300%;
    animation: gradient-shift 6s ease infinite;
  }

  :global(.mb-adapt--dark .mb-group-header .mb-tab[data-active="true"]) {
    background: rgba(255, 255, 255, 0.1);
  }
</style>

Key internal classes

| Class | Element | |---|---| | .mb-adapt | Root container | | .mb-adapt--dark | Root container in dark mode | | .mb-group | Panel group wrapper | | .mb-group-header | Toolbar / tab bar | | .mb-group-header-actions | Toolbar action buttons area | | .mb-group-tabs | Tab list within toolbar | | .mb-tab | Individual tab | | .mb-tab-label | Tab label text | | .mb-tab-actions | Tab action buttons (close, pop-out) | | .mb-group-content | Panel content area (holds iframes) | | .mb-panel | Individual panel wrapper | | .mb-floating-overlay | Floating / dialog overlay | | .mb-drag-ghost | Ghost element during tab drag |

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 } | | styles | Partial<CSSStyleDeclaration> | | onsession | (event) => void | | onoutput | (event) => void | | onforkactive | (event) => void |

License

ISC (c) mochabug AB