@mochabug/adapt-web 1.0.1-rc.0 → 1.0.1-rc.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +410 -157
- package/dist/README.md +478 -0
- package/dist/esm/AdaptAutomationElement.js +1 -282
- package/dist/esm/AdaptCapElement.js +1 -147
- package/dist/esm/AdaptCapWidget.js +1 -289
- package/dist/esm/adapt.js +1 -0
- package/dist/esm/cap-adapter.js +1 -146
- package/dist/esm/cap.js +1 -0
- package/dist/esm/core.js +1 -0
- package/dist/esm/css-cap.js +96 -0
- package/dist/esm/css-panel.js +854 -0
- package/dist/esm/elements.js +1 -4
- package/dist/esm/iframe-url.js +1 -24
- package/dist/esm/index.js +1 -2316
- package/dist/esm/panel-manager.js +1 -0
- package/dist/esm/panel-setup.js +1 -0
- package/dist/esm/types.js +0 -1
- package/dist/esm/umd-cap-entry.js +1 -0
- package/dist/esm/umd-entry.js +1 -0
- package/dist/esm/umd-full-entry.js +1 -0
- package/dist/esm/umd-headless-entry.js +1 -0
- package/dist/styles.css +951 -0
- package/dist/types/AdaptAutomationElement.d.ts +15 -5
- package/dist/types/AdaptCapElement.d.ts +50 -11
- package/dist/types/AdaptCapWidget.d.ts +36 -19
- package/dist/types/adapt.d.ts +27 -0
- package/dist/types/cap-adapter.d.ts +5 -0
- package/dist/types/cap.d.ts +24 -0
- package/dist/types/core.d.ts +20 -0
- package/dist/types/css-cap.d.ts +1 -0
- package/dist/types/css-panel.d.ts +1 -0
- package/dist/types/elements.d.ts +0 -1
- package/dist/types/index.d.ts +146 -87
- package/dist/types/panel-manager.d.ts +540 -0
- package/dist/types/panel-setup.d.ts +231 -0
- package/dist/types/types.d.ts +122 -60
- package/dist/types/umd-cap-entry.d.ts +1 -0
- package/dist/types/umd-entry.d.ts +2 -0
- package/dist/types/umd-full-entry.d.ts +2 -0
- package/dist/types/umd-headless-entry.d.ts +2 -0
- package/dist/umd/adapt-core.js +6702 -0
- package/dist/umd/adapt-core.js.br +0 -0
- package/dist/umd/adapt-core.min.js +4 -0
- package/dist/umd/adapt-core.min.js.br +0 -0
- package/dist/umd/adapt-web.cap.js +6987 -0
- package/dist/umd/adapt-web.cap.js.br +0 -0
- package/dist/umd/adapt-web.cap.min.js +101 -0
- package/dist/umd/adapt-web.cap.min.js.br +0 -0
- package/dist/umd/adapt-web.core.js +12436 -0
- package/dist/umd/adapt-web.core.js.br +0 -0
- package/dist/umd/adapt-web.core.min.js +857 -0
- package/dist/umd/adapt-web.core.min.js.br +0 -0
- package/dist/umd/adapt-web.js +6813 -2992
- package/dist/umd/adapt-web.js.br +0 -0
- package/dist/umd/adapt-web.min.js +736 -521
- package/dist/umd/adapt-web.min.js.br +0 -0
- package/dist/umd/cap_wasm.js.br +0 -0
- package/dist/umd/cap_wasm_bg.wasm.br +0 -0
- package/dist/umd/styles.css +951 -0
- package/dist/umd/styles.css.br +0 -0
- package/package.json +31 -14
package/README.md
CHANGED
|
@@ -6,220 +6,473 @@ Embed Adapt automations in any website.
|
|
|
6
6
|
npm install @mochabug/adapt-web
|
|
7
7
|
```
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
**CDN base:** `https://cdn.mochabug.com/adapt/web/__VERSION__/`
|
|
10
|
+
|
|
11
|
+
| Bundle | File | Includes |
|
|
12
|
+
|--------|------|----------|
|
|
13
|
+
| Full | `adapt-web.min.js` | Automation + Cap.js challenges |
|
|
14
|
+
| Core | `adapt-web.core.min.js` | Automation only (~40KB smaller) |
|
|
15
|
+
| Cap | `adapt-web.cap.min.js` | Cap.js challenge widget only |
|
|
16
|
+
| Headless | `adapt-core.min.js` | Headless client (no UI) |
|
|
17
|
+
|
|
18
|
+
### Composable loading
|
|
19
|
+
|
|
20
|
+
Bundles merge into a single `MbAdapt` global, so you can combine them. For example, headless + Cap for automations that need proof-of-work but no UI:
|
|
10
21
|
|
|
11
22
|
```html
|
|
12
|
-
<
|
|
13
|
-
<script src="https://cdn.
|
|
23
|
+
<script src="https://cdn.mochabug.com/adapt/web/__VERSION__/adapt-core.min.js"></script>
|
|
24
|
+
<script src="https://cdn.mochabug.com/adapt/web/__VERSION__/adapt-web.cap.min.js"></script>
|
|
14
25
|
<script>
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
id:
|
|
18
|
-
|
|
26
|
+
// MbAdapt has exports from both scripts
|
|
27
|
+
var client = MbAdapt.createAdaptClient(
|
|
28
|
+
MbAdapt.createConnectClient({ id: "YOUR_ID" }),
|
|
29
|
+
"YOUR_ID"
|
|
30
|
+
);
|
|
19
31
|
</script>
|
|
20
32
|
```
|
|
21
33
|
|
|
22
|
-
|
|
34
|
+
---
|
|
23
35
|
|
|
24
|
-
##
|
|
36
|
+
## 1. `<adapt-automation>`
|
|
25
37
|
|
|
26
|
-
|
|
27
|
-
import { AdaptWebClient } from '@mochabug/adapt-web';
|
|
38
|
+
The main component. Drop it in, set `automation-id`, done.
|
|
28
39
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
40
|
+
### Optimal — `<head>` access available
|
|
41
|
+
|
|
42
|
+
Preload the script and load the stylesheet in `<head>` to eliminate flash of unstyled content.
|
|
43
|
+
|
|
44
|
+
```html
|
|
45
|
+
<head>
|
|
46
|
+
<link rel="preload" href="https://cdn.mochabug.com/adapt/web/__VERSION__/adapt-web.min.js" as="script">
|
|
47
|
+
<link rel="stylesheet" href="https://cdn.mochabug.com/adapt/web/__VERSION__/styles.css">
|
|
48
|
+
</head>
|
|
49
|
+
<body>
|
|
50
|
+
<adapt-automation automation-id="YOUR_ID" requires-challenge style="height: 600px"></adapt-automation>
|
|
51
|
+
<script src="https://cdn.mochabug.com/adapt/web/__VERSION__/adapt-web.min.js"></script>
|
|
52
|
+
</body>
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
No challenges? Use the core bundle and drop `requires-challenge`:
|
|
33
56
|
|
|
34
|
-
|
|
35
|
-
|
|
57
|
+
```html
|
|
58
|
+
<head>
|
|
59
|
+
<link rel="preload" href="https://cdn.mochabug.com/adapt/web/__VERSION__/adapt-web.core.min.js" as="script">
|
|
60
|
+
<link rel="stylesheet" href="https://cdn.mochabug.com/adapt/web/__VERSION__/styles.css">
|
|
61
|
+
</head>
|
|
62
|
+
<body>
|
|
63
|
+
<adapt-automation automation-id="YOUR_ID" style="height: 600px"></adapt-automation>
|
|
64
|
+
<script src="https://cdn.mochabug.com/adapt/web/__VERSION__/adapt-web.core.min.js"></script>
|
|
65
|
+
</body>
|
|
36
66
|
```
|
|
37
67
|
|
|
38
|
-
|
|
68
|
+
### Embedded — no `<head>` access (Wix, Squarespace, WordPress, etc.)
|
|
69
|
+
|
|
70
|
+
Just the element and script. CSS is auto-injected at runtime.
|
|
71
|
+
|
|
72
|
+
```html
|
|
73
|
+
<adapt-automation automation-id="YOUR_ID" requires-challenge style="height: 600px"></adapt-automation>
|
|
74
|
+
<script src="https://cdn.mochabug.com/adapt/web/__VERSION__/adapt-web.min.js"></script>
|
|
75
|
+
```
|
|
39
76
|
|
|
40
|
-
|
|
77
|
+
Without challenges:
|
|
78
|
+
|
|
79
|
+
```html
|
|
80
|
+
<adapt-automation automation-id="YOUR_ID" style="height: 600px"></adapt-automation>
|
|
81
|
+
<script src="https://cdn.mochabug.com/adapt/web/__VERSION__/adapt-web.core.min.js"></script>
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
### ESM
|
|
41
85
|
|
|
42
86
|
```typescript
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
id: 'your-automation-id',
|
|
46
|
-
authToken: 'your-token'
|
|
47
|
-
});
|
|
87
|
+
import '@mochabug/adapt-web'; // with challenges
|
|
88
|
+
import '@mochabug/adapt-web/styles.css';
|
|
48
89
|
```
|
|
49
90
|
|
|
50
|
-
|
|
91
|
+
```typescript
|
|
92
|
+
import '@mochabug/adapt-web/core'; // without challenges (lighter)
|
|
93
|
+
import '@mochabug/adapt-web/styles.css';
|
|
94
|
+
```
|
|
51
95
|
|
|
52
96
|
```html
|
|
53
|
-
|
|
54
|
-
|
|
97
|
+
<adapt-automation automation-id="YOUR_ID" style="height: 600px"></adapt-automation>
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
### Attributes
|
|
101
|
+
|
|
102
|
+
| Attribute | Description |
|
|
103
|
+
|-----------|-------------|
|
|
104
|
+
| `automation-id` | **Required.** Automation ID |
|
|
105
|
+
| `requires-challenge` | Require proof-of-work before starting (full bundle only) |
|
|
106
|
+
| `auth-token` | Client-side auth token |
|
|
107
|
+
| `session-token` | Server-created session token |
|
|
108
|
+
| `inherit-token` | Join an existing session |
|
|
109
|
+
| `challenge-token` | Pre-solved challenge token |
|
|
110
|
+
| `transmitter` | Transmitter ID |
|
|
111
|
+
| `fork-display-mode` | `side-by-side` (default) or `dialog` |
|
|
112
|
+
| `side-by-side-split` | Split percentage, e.g. `60` |
|
|
113
|
+
| `dark-mode` | Enable dark mode |
|
|
114
|
+
| `auto-resizing` | Container follows iframe content height |
|
|
115
|
+
| `allow-floating` | Set to `"false"` to hide pop-out buttons and block user-initiated floating |
|
|
116
|
+
| `allow-docking` | Set to `"false"` to hide dock buttons and block user-initiated docking |
|
|
117
|
+
| `allow-dialog-docking` | Set to `"false"` to prevent tab splits inside floating dialog overlays |
|
|
118
|
+
| `floating-auto-resize` | Floating overlays auto-resize based on iframe content height |
|
|
119
|
+
| `persist` | Persist session across page refreshes |
|
|
120
|
+
| `confirm-on-close` | Show a confirmation dialog before the user leaves the page while a session is active |
|
|
121
|
+
|
|
122
|
+
### JS-only properties
|
|
123
|
+
|
|
124
|
+
Set via element reference — not available as HTML attributes.
|
|
125
|
+
|
|
126
|
+
| Property | Type |
|
|
127
|
+
|----------|------|
|
|
128
|
+
| `signals` | `Record<string, SignalValue>` |
|
|
129
|
+
| `capWidgetOptions` | `{ workerCount?: number; i18n?: CapWidgetI18n }` |
|
|
130
|
+
| `inheritFrom` | `{ hash: string } \| { param: string }` |
|
|
131
|
+
| `classNames` | `{ root?: string; iframe?: string; statusMessage?: string; statusCard?: string }` |
|
|
132
|
+
| `styles` | `Partial<CSSStyleDeclaration>` |
|
|
133
|
+
| `persistOptions` | `{ storage?: 'session' \| 'local'; ttl?: number; key?: string }` |
|
|
134
|
+
| `text` | `StatusText` |
|
|
135
|
+
|
|
136
|
+
### Events
|
|
137
|
+
|
|
138
|
+
| Event | Detail |
|
|
139
|
+
|-------|--------|
|
|
140
|
+
| `adapt-session` | `{ status: StatusJson, fork?: string }` |
|
|
141
|
+
| `adapt-output` | `{ output: Output }` |
|
|
142
|
+
| `adapt-fork-active` | `{ active: boolean }` |
|
|
143
|
+
|
|
144
|
+
### Methods
|
|
145
|
+
|
|
146
|
+
| Method | Description |
|
|
147
|
+
|--------|-------------|
|
|
148
|
+
| `newSession()` | Ends the current session and starts a new one. Returns a `Promise<void>`. |
|
|
55
149
|
|
|
56
|
-
|
|
57
|
-
<script src="https://cdn.jsdelivr.net/npm/@mochabug/adapt-web@1.0.0/dist/umd/adapt-web.min.js"></script>
|
|
150
|
+
---
|
|
58
151
|
|
|
59
|
-
|
|
60
|
-
<script src="https://cdn.jsdelivr.net/npm/@mochabug/adapt-web@1.0/dist/umd/adapt-web.min.js"></script>
|
|
152
|
+
## 2. `<adapt-cap>`
|
|
61
153
|
|
|
62
|
-
|
|
63
|
-
|
|
154
|
+
Standalone proof-of-work challenge widget. Use when you manage the automation client yourself.
|
|
155
|
+
|
|
156
|
+
Requires a `client` JS property — set it after the element is in the DOM.
|
|
157
|
+
|
|
158
|
+
### Optimal
|
|
159
|
+
|
|
160
|
+
```html
|
|
161
|
+
<head>
|
|
162
|
+
<link rel="preload" href="https://cdn.mochabug.com/adapt/web/__VERSION__/adapt-web.cap.min.js" as="script">
|
|
163
|
+
<link rel="stylesheet" href="https://cdn.mochabug.com/adapt/web/__VERSION__/styles.css">
|
|
164
|
+
</head>
|
|
165
|
+
<body>
|
|
166
|
+
<adapt-cap automation-id="YOUR_ID"></adapt-cap>
|
|
167
|
+
<script src="https://cdn.mochabug.com/adapt/web/__VERSION__/adapt-web.cap.min.js"></script>
|
|
168
|
+
<script>
|
|
169
|
+
var el = document.querySelector('adapt-cap');
|
|
170
|
+
el.client = MbAdapt.createConnectClient({ id: 'YOUR_ID' });
|
|
171
|
+
el.addEventListener('adapt-cap-solve', function(e) {
|
|
172
|
+
console.log('Token:', e.detail.token);
|
|
173
|
+
});
|
|
174
|
+
</script>
|
|
175
|
+
</body>
|
|
64
176
|
```
|
|
65
177
|
|
|
66
|
-
|
|
178
|
+
### Embedded
|
|
67
179
|
|
|
68
|
-
|
|
180
|
+
```html
|
|
181
|
+
<adapt-cap automation-id="YOUR_ID"></adapt-cap>
|
|
182
|
+
<script src="https://cdn.mochabug.com/adapt/web/__VERSION__/adapt-web.cap.min.js"></script>
|
|
183
|
+
<script>
|
|
184
|
+
var el = document.querySelector('adapt-cap');
|
|
185
|
+
el.client = MbAdapt.createConnectClient({ id: 'YOUR_ID' });
|
|
186
|
+
el.addEventListener('adapt-cap-solve', function(e) {
|
|
187
|
+
console.log('Token:', e.detail.token);
|
|
188
|
+
});
|
|
189
|
+
</script>
|
|
190
|
+
```
|
|
191
|
+
|
|
192
|
+
### ESM
|
|
69
193
|
|
|
70
194
|
```typescript
|
|
71
|
-
|
|
72
|
-
import
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
id: 'auto-123',
|
|
79
|
-
sessionToken: token // not authToken
|
|
195
|
+
import { createConnectClient } from '@mochabug/adapt-web/cap';
|
|
196
|
+
import '@mochabug/adapt-web/styles.css';
|
|
197
|
+
|
|
198
|
+
const el = document.querySelector('adapt-cap')!;
|
|
199
|
+
el.client = createConnectClient({ id: 'YOUR_ID' });
|
|
200
|
+
el.addEventListener('adapt-cap-solve', (e) => {
|
|
201
|
+
console.log('Token:', e.detail.token);
|
|
80
202
|
});
|
|
81
203
|
```
|
|
82
204
|
|
|
83
|
-
|
|
205
|
+
### Attributes
|
|
84
206
|
|
|
85
|
-
|
|
207
|
+
| Attribute | Description |
|
|
208
|
+
|-----------|-------------|
|
|
209
|
+
| `automation-id` | **Required.** Automation ID |
|
|
210
|
+
| `dark-mode` | Enable dark mode |
|
|
211
|
+
| `worker-count` | Number of WASM workers |
|
|
86
212
|
|
|
87
|
-
|
|
88
|
-
// direct token
|
|
89
|
-
new AdaptWebClient({
|
|
90
|
-
container: 'auto',
|
|
91
|
-
id: 'auto-123',
|
|
92
|
-
inheritToken: 'token-from-parent'
|
|
93
|
-
});
|
|
213
|
+
### JS-only properties
|
|
94
214
|
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
inheritFrom: { hash: 'mb_session' }
|
|
100
|
-
});
|
|
215
|
+
| Property | Type |
|
|
216
|
+
|----------|------|
|
|
217
|
+
| `client` | `AutomationClient` — **required**, set via JS |
|
|
218
|
+
| `i18n` | `CapWidgetI18n` — label overrides (set before `client`) |
|
|
101
219
|
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
}
|
|
220
|
+
### Events
|
|
221
|
+
|
|
222
|
+
| Event | Detail |
|
|
223
|
+
|-------|--------|
|
|
224
|
+
| `adapt-cap-solve` | `{ token: string, expires: Date }` |
|
|
225
|
+
| `adapt-cap-error` | `{ error: Error }` |
|
|
226
|
+
|
|
227
|
+
---
|
|
228
|
+
|
|
229
|
+
## Styling
|
|
230
|
+
|
|
231
|
+
All visuals are controlled via CSS custom properties on `.mb-adapt`. The `dark-mode` attribute on the element automatically switches to dark defaults, but you can override any variable for either mode.
|
|
232
|
+
|
|
233
|
+
### Matching your site's toolbar
|
|
234
|
+
|
|
235
|
+
Map your site's existing design tokens to the panel toolbar. These six variables control almost everything you see in the tab bar:
|
|
236
|
+
|
|
237
|
+
```css
|
|
238
|
+
/* Light mode — derive from your site's surface/text colors */
|
|
239
|
+
.mb-adapt {
|
|
240
|
+
--mb-adapt-fork-bg: #ffffff; /* panel content background */
|
|
241
|
+
--mb-adapt-fork-tab-bg: #f5f5f5; /* inactive tab / toolbar background */
|
|
242
|
+
--mb-adapt-fork-tab-active-bg: #ffffff; /* active tab background */
|
|
243
|
+
--mb-adapt-fork-tab-color: #1a1a1a; /* active tab text */
|
|
244
|
+
--mb-adapt-fork-tab-inactive-color: #888; /* inactive tab text */
|
|
245
|
+
--mb-adapt-fork-separator: #e0e0e0; /* borders between tabs & panels */
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
/* Dark mode — add `dark-mode` attribute, then override */
|
|
249
|
+
.mb-adapt[dark-mode] {
|
|
250
|
+
--mb-adapt-fork-bg: #1e1e1e;
|
|
251
|
+
--mb-adapt-fork-tab-bg: #2a2a2a;
|
|
252
|
+
--mb-adapt-fork-tab-active-bg: #1e1e1e;
|
|
253
|
+
--mb-adapt-fork-tab-color: #e0e0e0;
|
|
254
|
+
--mb-adapt-fork-tab-inactive-color: #777;
|
|
255
|
+
--mb-adapt-fork-separator: #3a3a3a;
|
|
256
|
+
}
|
|
108
257
|
```
|
|
109
258
|
|
|
110
|
-
|
|
259
|
+
**Typical mapping from your site's design system:**
|
|
111
260
|
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
261
|
+
| Your site has | Maps to |
|
|
262
|
+
|---|---|
|
|
263
|
+
| Surface / card background | `--mb-adapt-fork-bg` |
|
|
264
|
+
| Secondary / muted background | `--mb-adapt-fork-tab-bg` |
|
|
265
|
+
| Primary text color | `--mb-adapt-fork-tab-color` |
|
|
266
|
+
| Muted / secondary text | `--mb-adapt-fork-tab-inactive-color` |
|
|
267
|
+
| Border / divider color | `--mb-adapt-fork-separator` |
|
|
268
|
+
| Accent color | `--mb-adapt-separator-active` (resize handle highlight) |
|
|
269
|
+
| Interactive hover tint | `--mb-adapt-button-hover-bg` |
|
|
120
270
|
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
271
|
+
### Custom theme (light & dark)
|
|
272
|
+
|
|
273
|
+
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:
|
|
274
|
+
|
|
275
|
+
```css
|
|
276
|
+
/*
|
|
277
|
+
* Example: brand theme using primary / secondary / accent colors.
|
|
278
|
+
* Maps your design-system tokens to Adapt's CSS variables for both modes.
|
|
279
|
+
*/
|
|
280
|
+
|
|
281
|
+
/* ── Light mode ────────────────────────────────── */
|
|
282
|
+
.mb-adapt {
|
|
283
|
+
/* Brand palette */
|
|
284
|
+
--mb-adapt-fork-bg: #ffffff; /* surface */
|
|
285
|
+
--mb-adapt-fork-tab-bg: #f0f4ff; /* primary-50 */
|
|
286
|
+
--mb-adapt-fork-tab-active-bg: #ffffff; /* surface */
|
|
287
|
+
--mb-adapt-fork-tab-color: #1e293b; /* on-surface */
|
|
288
|
+
--mb-adapt-fork-tab-inactive-color: #64748b; /* on-surface-muted */
|
|
289
|
+
--mb-adapt-fork-separator: #cbd5e1; /* outline */
|
|
290
|
+
|
|
291
|
+
/* Accent — resize handle highlight */
|
|
292
|
+
--mb-adapt-separator-active: rgba(79, 70, 229, 0.5); /* primary */
|
|
293
|
+
|
|
294
|
+
/* Cap widget */
|
|
295
|
+
--mb-adapt-cap-background: #ffffff;
|
|
296
|
+
--mb-adapt-cap-border-color: #e2e8f0;
|
|
297
|
+
--mb-adapt-cap-color: #1e293b;
|
|
298
|
+
--mb-adapt-cap-spinner-color: #4f46e5; /* primary */
|
|
299
|
+
|
|
300
|
+
/* Status cards */
|
|
301
|
+
--mb-adapt-status-card-bg: #ffffff;
|
|
302
|
+
--mb-adapt-status-card-border: #e2e8f0;
|
|
303
|
+
--mb-adapt-status-text: #334155;
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
/* ── Dark mode ─────────────────────────────────── */
|
|
307
|
+
.mb-adapt[dark-mode] {
|
|
308
|
+
--mb-adapt-fork-bg: #0f172a; /* surface-dark */
|
|
309
|
+
--mb-adapt-fork-tab-bg: #1e293b; /* primary-900 */
|
|
310
|
+
--mb-adapt-fork-tab-active-bg: #0f172a; /* surface-dark */
|
|
311
|
+
--mb-adapt-fork-tab-color: #f1f5f9; /* on-surface-dark */
|
|
312
|
+
--mb-adapt-fork-tab-inactive-color: #94a3b8; /* muted-dark */
|
|
313
|
+
--mb-adapt-fork-separator: #334155; /* outline-dark */
|
|
314
|
+
|
|
315
|
+
--mb-adapt-separator-active: rgba(129, 140, 248, 0.6); /* primary-light */
|
|
316
|
+
|
|
317
|
+
--mb-adapt-cap-background: #1e293b;
|
|
318
|
+
--mb-adapt-cap-border-color: #334155;
|
|
319
|
+
--mb-adapt-cap-color: #f1f5f9;
|
|
320
|
+
--mb-adapt-cap-spinner-color: #818cf8; /* primary-light */
|
|
321
|
+
|
|
322
|
+
--mb-adapt-status-card-bg: #1e293b;
|
|
323
|
+
--mb-adapt-status-card-border: #334155;
|
|
324
|
+
--mb-adapt-status-text: #e2e8f0;
|
|
325
|
+
}
|
|
128
326
|
```
|
|
129
327
|
|
|
130
|
-
|
|
328
|
+
### Font
|
|
131
329
|
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
});
|
|
330
|
+
Set `--mb-adapt-font` to match your site's typeface. This applies to tab labels, status messages, drag ghosts, and all panel UI text.
|
|
331
|
+
|
|
332
|
+
```css
|
|
333
|
+
.mb-adapt {
|
|
334
|
+
--mb-adapt-font: "Inter", sans-serif;
|
|
335
|
+
}
|
|
139
336
|
```
|
|
140
337
|
|
|
141
|
-
|
|
338
|
+
### Elevation and borders
|
|
142
339
|
|
|
143
|
-
|
|
340
|
+
Floating panels, status cards, and drag ghosts each have independent shadow, border, and radius variables. Use these to match your site's elevation system.
|
|
144
341
|
|
|
145
|
-
```
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
342
|
+
```css
|
|
343
|
+
/* Subtle, modern elevation */
|
|
344
|
+
.mb-adapt {
|
|
345
|
+
--mb-adapt-floating-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
|
|
346
|
+
--mb-adapt-floating-border: 1px solid rgba(0, 0, 0, 0.06);
|
|
347
|
+
--mb-adapt-floating-radius: 12px;
|
|
348
|
+
--mb-adapt-floating-backdrop: none;
|
|
349
|
+
|
|
350
|
+
--mb-adapt-status-card-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
|
351
|
+
--mb-adapt-drag-ghost-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
352
|
+
--mb-adapt-border-radius: 8px; /* iframe border radius */
|
|
353
|
+
}
|
|
155
354
|
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
mimeType: 'application/pdf',
|
|
164
|
-
filename: 'document.pdf',
|
|
165
|
-
data: base64FileContent
|
|
166
|
-
}
|
|
167
|
-
};
|
|
168
|
-
|
|
169
|
-
new AdaptWebClient({
|
|
170
|
-
container: 'auto',
|
|
171
|
-
id: 'auto-123',
|
|
172
|
-
authToken: 'your-token',
|
|
173
|
-
transmitter: 'file-processor',
|
|
174
|
-
signals
|
|
175
|
-
});
|
|
355
|
+
/* Dark mode — increase shadow density, add subtle light border */
|
|
356
|
+
.mb-adapt[dark-mode] {
|
|
357
|
+
--mb-adapt-floating-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
|
358
|
+
--mb-adapt-floating-border: 1px solid rgba(255, 255, 255, 0.08);
|
|
359
|
+
--mb-adapt-status-card-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
|
|
360
|
+
--mb-adapt-drag-ghost-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
|
|
361
|
+
}
|
|
176
362
|
```
|
|
177
363
|
|
|
178
|
-
|
|
364
|
+
**Frosted glass effect** — set a translucent background and enable `backdrop-filter`:
|
|
179
365
|
|
|
180
|
-
```
|
|
181
|
-
{
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
sessionToken?: string; // uses pre-created session (SSR)
|
|
188
|
-
inheritToken?: string; // joins existing session
|
|
189
|
-
inheritFrom?: { hash: string } | { param: string };
|
|
190
|
-
|
|
191
|
-
// advanced start options
|
|
192
|
-
transmitter?: string; // specific transmitter to start from
|
|
193
|
-
signals?: { [key: string]: SignalDataJson }; // initial signals
|
|
194
|
-
|
|
195
|
-
// fork display
|
|
196
|
-
forkDisplayMode?: 'side-by-side' | 'dialog';
|
|
197
|
-
sideBySideSplit?: number; // 0-100, default 50
|
|
198
|
-
dialogBackdropClose?: boolean;
|
|
199
|
-
|
|
200
|
-
// callbacks
|
|
201
|
-
onSession?: (status, fork?) => void;
|
|
202
|
-
onOutput?: (output) => void;
|
|
203
|
-
|
|
204
|
-
// styling
|
|
205
|
-
classNames?: { root?, wrapper?, frame?, iframe?, dialog?, ... };
|
|
206
|
-
styles?: CSSStyleDeclaration;
|
|
366
|
+
```css
|
|
367
|
+
.mb-adapt {
|
|
368
|
+
--mb-adapt-fork-bg: rgba(255, 255, 255, 0.7);
|
|
369
|
+
--mb-adapt-fork-tab-bg: rgba(245, 245, 245, 0.5);
|
|
370
|
+
--mb-adapt-floating-backdrop: blur(16px) saturate(180%);
|
|
371
|
+
--mb-adapt-floating-border: 1px solid rgba(255, 255, 255, 0.2);
|
|
372
|
+
--mb-adapt-floating-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
|
|
207
373
|
}
|
|
208
374
|
```
|
|
209
375
|
|
|
210
|
-
|
|
376
|
+
**Flat / borderless** — remove all elevation:
|
|
211
377
|
|
|
212
378
|
```css
|
|
213
379
|
.mb-adapt {
|
|
214
|
-
--mb-adapt-
|
|
215
|
-
--mb-adapt-
|
|
216
|
-
--mb-adapt-
|
|
217
|
-
--mb-adapt-
|
|
218
|
-
--mb-adapt-drag-
|
|
219
|
-
--mb-adapt-drag-handle-color: #d1d5db;
|
|
380
|
+
--mb-adapt-floating-shadow: none;
|
|
381
|
+
--mb-adapt-floating-border: 1px solid var(--mb-adapt-fork-separator);
|
|
382
|
+
--mb-adapt-floating-radius: 4px;
|
|
383
|
+
--mb-adapt-status-card-shadow: none;
|
|
384
|
+
--mb-adapt-drag-ghost-shadow: none;
|
|
220
385
|
}
|
|
221
386
|
```
|
|
222
387
|
|
|
388
|
+
**Typical mapping from your site's design system:**
|
|
389
|
+
|
|
390
|
+
| Your site has | Maps to |
|
|
391
|
+
|---|---|
|
|
392
|
+
| Card shadow / `--shadow-lg` | `--mb-adapt-floating-shadow` |
|
|
393
|
+
| Card border / `--border-subtle` | `--mb-adapt-floating-border` |
|
|
394
|
+
| Card radius / `--radius-lg` | `--mb-adapt-floating-radius` |
|
|
395
|
+
| Tooltip/popover shadow | `--mb-adapt-status-card-shadow`, `--mb-adapt-drag-ghost-shadow` |
|
|
396
|
+
| Glass/blur effect | `--mb-adapt-floating-backdrop` |
|
|
397
|
+
|
|
398
|
+
<details>
|
|
399
|
+
<summary>Full CSS variable reference</summary>
|
|
400
|
+
|
|
401
|
+
### General
|
|
402
|
+
|
|
403
|
+
| Variable | Light default | Dark default | Description |
|
|
404
|
+
|---|---|---|---|
|
|
405
|
+
| `--mb-adapt-bg` | `transparent` | | Root & group backgrounds |
|
|
406
|
+
| `--mb-adapt-font` | `system-ui, -apple-system, sans-serif` | | All panel UI text |
|
|
407
|
+
| `--mb-adapt-button-hover-bg` | `rgba(128,128,128,0.2)` | `rgba(128,128,128,0.3)` | Close/popout/action button hover |
|
|
408
|
+
| `--mb-adapt-separator-active` | `rgba(59,130,246,0.5)` | `rgba(99,130,246,0.6)` | Resize handle hover/active |
|
|
409
|
+
| `--mb-adapt-border-radius` | `8px` | | Iframe border radius |
|
|
410
|
+
|
|
411
|
+
### Toolbar and tabs
|
|
412
|
+
|
|
413
|
+
| Variable | Light default | Dark default | Description |
|
|
414
|
+
|---|---|---|---|
|
|
415
|
+
| `--mb-adapt-fork-bg` | `#ffffff` | `#1e1e1e` | Panel content background |
|
|
416
|
+
| `--mb-adapt-fork-tab-bg` | `#f3f3f3` | `#252526` | Toolbar / inactive tab bg |
|
|
417
|
+
| `--mb-adapt-fork-tab-active-bg` | `#ffffff` | `#1e1e1e` | Active tab background |
|
|
418
|
+
| `--mb-adapt-fork-tab-color` | `rgb(51,51,51)` | `#ffffff` | Active tab text |
|
|
419
|
+
| `--mb-adapt-fork-tab-inactive-color` | `rgba(51,51,51,0.7)` | `#969696` | Inactive tab text |
|
|
420
|
+
| `--mb-adapt-fork-separator` | `rgba(128,128,128,0.35)` | `rgb(68,68,68)` | Tab/panel borders |
|
|
421
|
+
|
|
422
|
+
### Floating panels (elevation)
|
|
423
|
+
|
|
424
|
+
| Variable | Light default | Dark default | Description |
|
|
425
|
+
|---|---|---|---|
|
|
426
|
+
| `--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 |
|
|
427
|
+
| `--mb-adapt-floating-border` | `none` | `1px solid rgba(255,255,255,0.06)` | Overlay border |
|
|
428
|
+
| `--mb-adapt-floating-backdrop` | `none` | | Overlay backdrop-filter |
|
|
429
|
+
| `--mb-adapt-floating-radius` | `8px` | | Overlay border-radius |
|
|
430
|
+
| `--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 |
|
|
431
|
+
| `--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 |
|
|
432
|
+
|
|
433
|
+
### Drop targets
|
|
434
|
+
|
|
435
|
+
| Variable | Light default | Dark default |
|
|
436
|
+
|---|---|---|
|
|
437
|
+
| `--mb-adapt-drop-header-bg` | `rgba(99,102,241,0.18)` | `rgba(129,140,248,0.22)` |
|
|
438
|
+
| `--mb-adapt-drop-center-bg` | `rgba(99,102,241,0.12)` | `rgba(129,140,248,0.15)` |
|
|
439
|
+
| `--mb-adapt-drop-split-bg` | `rgba(99,102,241,0.14)` | `rgba(129,140,248,0.18)` |
|
|
440
|
+
| `--mb-adapt-drop-border` | `rgba(99,102,241,0.55)` | `rgba(129,140,248,0.6)` |
|
|
441
|
+
|
|
442
|
+
### Status cards
|
|
443
|
+
|
|
444
|
+
| Variable | Light default | Dark default |
|
|
445
|
+
|---|---|---|
|
|
446
|
+
| `--mb-adapt-status-card-bg` | `#ffffff` | `#1e293b` |
|
|
447
|
+
| `--mb-adapt-status-card-border` | `#e5e7eb` | `#334155` |
|
|
448
|
+
| `--mb-adapt-status-icon-bg` | `#fef2f2` | `#351c1c` |
|
|
449
|
+
| `--mb-adapt-status-text` | `#374151` | `#e2e8f0` |
|
|
450
|
+
|
|
451
|
+
### Cap widget
|
|
452
|
+
|
|
453
|
+
| Variable | Light default | Dark default |
|
|
454
|
+
|---|---|---|
|
|
455
|
+
| `--mb-adapt-cap-background` | `#ffffff` | `#1e293b` |
|
|
456
|
+
| `--mb-adapt-cap-border-color` | `#e2e8f0` | `#334155` |
|
|
457
|
+
| `--mb-adapt-cap-border-radius` | `16px` | |
|
|
458
|
+
| `--mb-adapt-cap-height` | `72px` | |
|
|
459
|
+
| `--mb-adapt-cap-width` | `380px` | |
|
|
460
|
+
| `--mb-adapt-cap-padding` | `20px 28px` | |
|
|
461
|
+
| `--mb-adapt-cap-gap` | `20px` | |
|
|
462
|
+
| `--mb-adapt-cap-color` | `#1e293b` | `#f1f5f9` |
|
|
463
|
+
| `--mb-adapt-cap-checkbox-size` | `36px` | |
|
|
464
|
+
| `--mb-adapt-cap-checkbox-border` | `2px solid #cbd5e1` | `2px solid #475569` |
|
|
465
|
+
| `--mb-adapt-cap-checkbox-radius` | `10px` | |
|
|
466
|
+
| `--mb-adapt-cap-checkbox-background` | `#f8fafc` | `#0f172a` |
|
|
467
|
+
| `--mb-adapt-cap-spinner-color` | `#6366f1` | `#818cf8` |
|
|
468
|
+
| `--mb-adapt-cap-spinner-bg` | `#e2e8f0` | `#334155` |
|
|
469
|
+
| `--mb-adapt-cap-spinner-thickness` | `3px` | |
|
|
470
|
+
| `--mb-adapt-cap-font` | `inherit` | |
|
|
471
|
+
|
|
472
|
+
</details>
|
|
473
|
+
|
|
474
|
+
---
|
|
475
|
+
|
|
223
476
|
## License
|
|
224
477
|
|
|
225
|
-
ISC
|
|
478
|
+
ISC (c) mochabug AB
|