@mochabug/adapt-svelte

Svelte component for Adapt.

Requires Svelte 5 or newer because the components use $props, $state, and $effect runes. The Svelte version used to develop the package is not a consumer minimum.

npm install @mochabug/adapt-svelte

Framework requirements are declared in package.json.

Browser UI requires native Popover API support. Floating windows use the browser top layer and remain fixed in the viewport, including inside transformed, clipped, or scrolling containers. Docked panels and docked Maximize remain inside the embed. Docking, floating, splitting, and restoring preserve the loaded iframe document and its application state.

Windows use the viewport of the document containing the client. If that document is itself inside an iframe, its windows remain within that iframe.

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 | Local z-index offset and floating-window priority |

--mb-adapt-z-base offsets local stacking and sets the priority of this instance’s floating windows. Higher priorities appear above lower priorities; within the same priority, the most recently activated window appears on top across clients. Theme changes update this priority live.

Floating chrome and iframe content are ordered together in the native top layer. Drop indicators and drag ghosts appear above windows, and close confirmations appear above those. Host-page native dialogs and popovers follow browser top-layer ordering; numeric CSS z-index cannot override that ordering.

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 | | oncontentactive | (event: { active: boolean }) => void — any main/fork URL remains open, including retained or minimized content |

License

ISC (c) mochabug AB