@mochabug/adapt-web 1.0.1-rc.12 → 1.0.1-rc.13
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 +104 -137
- package/dist/README.md +119 -152
- package/dist/esm/AdaptAutomationElement.js +1 -1
- package/dist/esm/cap-adapter.js +1 -1
- package/dist/esm/core.js +1 -1
- package/dist/esm/css-panel.js +198 -166
- package/dist/esm/index.js +1 -1
- package/dist/esm/theme.js +1 -0
- package/dist/styles.css +198 -166
- package/dist/types/AdaptAutomationElement.d.ts +4 -0
- package/dist/types/core.d.ts +2 -1
- package/dist/types/css-panel.d.ts +1 -1
- package/dist/types/index.d.ts +12 -1
- package/dist/types/theme.d.ts +42 -0
- package/dist/types/types.d.ts +25 -0
- package/dist/umd/adapt-web.cap.js +1 -1
- package/dist/umd/adapt-web.cap.js.br +0 -0
- package/dist/umd/adapt-web.cap.min.js +1 -1
- package/dist/umd/adapt-web.cap.min.js.br +0 -0
- package/dist/umd/adapt-web.core.js +314 -167
- package/dist/umd/adapt-web.core.js.br +0 -0
- package/dist/umd/adapt-web.core.min.js +201 -169
- package/dist/umd/adapt-web.core.min.js.br +0 -0
- package/dist/umd/adapt-web.js +313 -167
- package/dist/umd/adapt-web.js.br +0 -0
- package/dist/umd/adapt-web.min.js +204 -172
- package/dist/umd/adapt-web.min.js.br +0 -0
- package/dist/umd/styles.css +198 -166
- package/dist/umd/styles.css.br +0 -0
- package/package.json +1 -1
package/dist/README.md
CHANGED
|
@@ -6,7 +6,7 @@ Embed Adapt automations in any website.
|
|
|
6
6
|
npm install @mochabug/adapt-web
|
|
7
7
|
```
|
|
8
8
|
|
|
9
|
-
**CDN base:** `https://cdn.mochabug.com/adapt/web/1.0.1-rc.
|
|
9
|
+
**CDN base:** `https://cdn.mochabug.com/adapt/web/1.0.1-rc.13/`
|
|
10
10
|
|
|
11
11
|
| Bundle | File | Includes |
|
|
12
12
|
|--------|------|----------|
|
|
@@ -20,8 +20,8 @@ npm install @mochabug/adapt-web
|
|
|
20
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:
|
|
21
21
|
|
|
22
22
|
```html
|
|
23
|
-
<script src="https://cdn.mochabug.com/adapt/web/1.0.1-rc.
|
|
24
|
-
<script src="https://cdn.mochabug.com/adapt/web/1.0.1-rc.
|
|
23
|
+
<script src="https://cdn.mochabug.com/adapt/web/1.0.1-rc.13/adapt-core.min.js"></script>
|
|
24
|
+
<script src="https://cdn.mochabug.com/adapt/web/1.0.1-rc.13/adapt-web.cap.min.js"></script>
|
|
25
25
|
<script>
|
|
26
26
|
// MbAdapt has exports from both scripts
|
|
27
27
|
var client = MbAdapt.createAdaptClient(
|
|
@@ -43,12 +43,12 @@ Preload the script and load the stylesheet in `<head>` to eliminate flash of uns
|
|
|
43
43
|
|
|
44
44
|
```html
|
|
45
45
|
<head>
|
|
46
|
-
<link rel="preload" href="https://cdn.mochabug.com/adapt/web/1.0.1-rc.
|
|
47
|
-
<link rel="stylesheet" href="https://cdn.mochabug.com/adapt/web/1.0.1-rc.
|
|
46
|
+
<link rel="preload" href="https://cdn.mochabug.com/adapt/web/1.0.1-rc.13/adapt-web.min.js" as="script">
|
|
47
|
+
<link rel="stylesheet" href="https://cdn.mochabug.com/adapt/web/1.0.1-rc.13/styles.css">
|
|
48
48
|
</head>
|
|
49
49
|
<body>
|
|
50
50
|
<adapt-automation automation-id="YOUR_ID" requires-challenge style="height: 600px"></adapt-automation>
|
|
51
|
-
<script src="https://cdn.mochabug.com/adapt/web/1.0.1-rc.
|
|
51
|
+
<script src="https://cdn.mochabug.com/adapt/web/1.0.1-rc.13/adapt-web.min.js"></script>
|
|
52
52
|
</body>
|
|
53
53
|
```
|
|
54
54
|
|
|
@@ -56,12 +56,12 @@ No challenges? Use the core bundle and drop `requires-challenge`:
|
|
|
56
56
|
|
|
57
57
|
```html
|
|
58
58
|
<head>
|
|
59
|
-
<link rel="preload" href="https://cdn.mochabug.com/adapt/web/1.0.1-rc.
|
|
60
|
-
<link rel="stylesheet" href="https://cdn.mochabug.com/adapt/web/1.0.1-rc.
|
|
59
|
+
<link rel="preload" href="https://cdn.mochabug.com/adapt/web/1.0.1-rc.13/adapt-web.core.min.js" as="script">
|
|
60
|
+
<link rel="stylesheet" href="https://cdn.mochabug.com/adapt/web/1.0.1-rc.13/styles.css">
|
|
61
61
|
</head>
|
|
62
62
|
<body>
|
|
63
63
|
<adapt-automation automation-id="YOUR_ID" style="height: 600px"></adapt-automation>
|
|
64
|
-
<script src="https://cdn.mochabug.com/adapt/web/1.0.1-rc.
|
|
64
|
+
<script src="https://cdn.mochabug.com/adapt/web/1.0.1-rc.13/adapt-web.core.min.js"></script>
|
|
65
65
|
</body>
|
|
66
66
|
```
|
|
67
67
|
|
|
@@ -71,14 +71,14 @@ Just the element and script. CSS is auto-injected at runtime.
|
|
|
71
71
|
|
|
72
72
|
```html
|
|
73
73
|
<adapt-automation automation-id="YOUR_ID" requires-challenge style="height: 600px"></adapt-automation>
|
|
74
|
-
<script src="https://cdn.mochabug.com/adapt/web/1.0.1-rc.
|
|
74
|
+
<script src="https://cdn.mochabug.com/adapt/web/1.0.1-rc.13/adapt-web.min.js"></script>
|
|
75
75
|
```
|
|
76
76
|
|
|
77
77
|
Without challenges:
|
|
78
78
|
|
|
79
79
|
```html
|
|
80
80
|
<adapt-automation automation-id="YOUR_ID" style="height: 600px"></adapt-automation>
|
|
81
|
-
<script src="https://cdn.mochabug.com/adapt/web/1.0.1-rc.
|
|
81
|
+
<script src="https://cdn.mochabug.com/adapt/web/1.0.1-rc.13/adapt-web.core.min.js"></script>
|
|
82
82
|
```
|
|
83
83
|
|
|
84
84
|
### ESM
|
|
@@ -132,6 +132,7 @@ Set via element reference — not available as HTML attributes.
|
|
|
132
132
|
| `styles` | `Partial<CSSStyleDeclaration>` |
|
|
133
133
|
| `persistOptions` | `{ storage?: 'session' \| 'local'; ttl?: number; key?: string }` |
|
|
134
134
|
| `text` | `StatusText` |
|
|
135
|
+
| `theme` | `AdaptTheme` |
|
|
135
136
|
|
|
136
137
|
### Events
|
|
137
138
|
|
|
@@ -159,12 +160,12 @@ Requires a `client` JS property — set it after the element is in the DOM.
|
|
|
159
160
|
|
|
160
161
|
```html
|
|
161
162
|
<head>
|
|
162
|
-
<link rel="preload" href="https://cdn.mochabug.com/adapt/web/1.0.1-rc.
|
|
163
|
-
<link rel="stylesheet" href="https://cdn.mochabug.com/adapt/web/1.0.1-rc.
|
|
163
|
+
<link rel="preload" href="https://cdn.mochabug.com/adapt/web/1.0.1-rc.13/adapt-web.cap.min.js" as="script">
|
|
164
|
+
<link rel="stylesheet" href="https://cdn.mochabug.com/adapt/web/1.0.1-rc.13/styles.css">
|
|
164
165
|
</head>
|
|
165
166
|
<body>
|
|
166
167
|
<adapt-cap automation-id="YOUR_ID"></adapt-cap>
|
|
167
|
-
<script src="https://cdn.mochabug.com/adapt/web/1.0.1-rc.
|
|
168
|
+
<script src="https://cdn.mochabug.com/adapt/web/1.0.1-rc.13/adapt-web.cap.min.js"></script>
|
|
168
169
|
<script>
|
|
169
170
|
var el = document.querySelector('adapt-cap');
|
|
170
171
|
el.client = MbAdapt.createConnectClient({ id: 'YOUR_ID' });
|
|
@@ -179,7 +180,7 @@ Requires a `client` JS property — set it after the element is in the DOM.
|
|
|
179
180
|
|
|
180
181
|
```html
|
|
181
182
|
<adapt-cap automation-id="YOUR_ID"></adapt-cap>
|
|
182
|
-
<script src="https://cdn.mochabug.com/adapt/web/1.0.1-rc.
|
|
183
|
+
<script src="https://cdn.mochabug.com/adapt/web/1.0.1-rc.13/adapt-web.cap.min.js"></script>
|
|
183
184
|
<script>
|
|
184
185
|
var el = document.querySelector('adapt-cap');
|
|
185
186
|
el.client = MbAdapt.createConnectClient({ id: 'YOUR_ID' });
|
|
@@ -228,172 +229,128 @@ el.addEventListener('adapt-cap-solve', (e) => {
|
|
|
228
229
|
|
|
229
230
|
## Styling
|
|
230
231
|
|
|
231
|
-
|
|
232
|
+
Three ways to theme, from simplest to most powerful:
|
|
232
233
|
|
|
233
|
-
###
|
|
234
|
+
### 1. `theme` prop (recommended)
|
|
234
235
|
|
|
235
|
-
|
|
236
|
+
Set the `theme` JS property for semantic theming. Derives 30+ CSS variables from a few tokens.
|
|
236
237
|
|
|
237
|
-
```
|
|
238
|
-
|
|
239
|
-
.
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
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
|
-
}
|
|
238
|
+
```javascript
|
|
239
|
+
const el = document.querySelector('adapt-automation');
|
|
240
|
+
el.theme = {
|
|
241
|
+
mode: 'dark',
|
|
242
|
+
primary: '#6366f1',
|
|
243
|
+
background: '#0f172a',
|
|
244
|
+
surface: '#1e293b',
|
|
245
|
+
text: '#f1f5f9',
|
|
246
|
+
border: '#334155',
|
|
247
|
+
font: '"Inter", sans-serif',
|
|
248
|
+
};
|
|
257
249
|
```
|
|
258
250
|
|
|
259
|
-
|
|
251
|
+
**`AdaptTheme` interface:**
|
|
260
252
|
|
|
261
|
-
|
|
|
262
|
-
|
|
263
|
-
|
|
|
264
|
-
|
|
|
265
|
-
|
|
|
266
|
-
|
|
|
267
|
-
|
|
|
268
|
-
|
|
|
269
|
-
|
|
|
253
|
+
| Token | Effect |
|
|
254
|
+
|-------|--------|
|
|
255
|
+
| `mode` | `'light'` or `'dark'` — toggles dark mode class |
|
|
256
|
+
| `primary` | Accent color — derives separator, drop target, spinner colors |
|
|
257
|
+
| `background` | Root bg, active tab bg, status card bg |
|
|
258
|
+
| `surface` | Panel content bg, tab bar bg |
|
|
259
|
+
| `text` | Active tab text, status text, cap widget text |
|
|
260
|
+
| `textSecondary` | Inactive tab text |
|
|
261
|
+
| `border` | Tab separators, status card border, cap border |
|
|
262
|
+
| `font` | All panel UI text + cap widget |
|
|
263
|
+
| `vars` | `Record<string, string>` — direct variable overrides (key = name without `--mb-adapt-` prefix) |
|
|
264
|
+
|
|
265
|
+
The `vars` escape hatch lets you override any variable:
|
|
266
|
+
|
|
267
|
+
```javascript
|
|
268
|
+
el.theme = {
|
|
269
|
+
primary: '#6366f1',
|
|
270
|
+
vars: {
|
|
271
|
+
'floating-shadow': 'none',
|
|
272
|
+
'floating-border': '2px solid #6366f1',
|
|
273
|
+
'cap-border-radius': '0px',
|
|
274
|
+
},
|
|
275
|
+
};
|
|
276
|
+
```
|
|
270
277
|
|
|
271
|
-
###
|
|
278
|
+
### 2. CSS custom properties
|
|
272
279
|
|
|
273
|
-
|
|
280
|
+
Set `--mb-adapt-*` variables on `.mb-adapt` or any ancestor. No Shadow DOM — standard CSS inheritance works.
|
|
274
281
|
|
|
275
282
|
```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
283
|
.mb-adapt {
|
|
283
|
-
|
|
284
|
-
--mb-adapt-fork-bg:
|
|
285
|
-
--mb-adapt-fork-tab-
|
|
286
|
-
--mb-adapt-fork-
|
|
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;
|
|
284
|
+
--mb-adapt-fork-bg: #ffffff;
|
|
285
|
+
--mb-adapt-fork-tab-bg: #f5f5f5;
|
|
286
|
+
--mb-adapt-fork-tab-color: #1a1a1a;
|
|
287
|
+
--mb-adapt-fork-separator: #e0e0e0;
|
|
304
288
|
}
|
|
305
289
|
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
--mb-adapt-fork-bg:
|
|
309
|
-
--mb-adapt-fork-tab-
|
|
310
|
-
--mb-adapt-fork-
|
|
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;
|
|
290
|
+
.mb-adapt--dark {
|
|
291
|
+
--mb-adapt-fork-bg: #1e1e1e;
|
|
292
|
+
--mb-adapt-fork-tab-bg: #2a2a2a;
|
|
293
|
+
--mb-adapt-fork-tab-color: #e0e0e0;
|
|
294
|
+
--mb-adapt-fork-separator: #3a3a3a;
|
|
325
295
|
}
|
|
326
296
|
```
|
|
327
297
|
|
|
328
|
-
###
|
|
298
|
+
### 3. Direct CSS on internal classes
|
|
329
299
|
|
|
330
|
-
|
|
300
|
+
No Shadow DOM — all internal elements use plain CSS classes. Target them directly for effects that CSS variables can't express: animations, pseudo-elements, transitions, media queries.
|
|
331
301
|
|
|
332
|
-
|
|
333
|
-
.mb-adapt {
|
|
334
|
-
--mb-adapt-font: "Inter", sans-serif;
|
|
335
|
-
}
|
|
336
|
-
```
|
|
337
|
-
|
|
338
|
-
### Elevation and borders
|
|
339
|
-
|
|
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.
|
|
302
|
+
**Animated gradient toolbar (liquid glass):**
|
|
341
303
|
|
|
342
304
|
```css
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
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 */
|
|
305
|
+
@keyframes toolbar-glow {
|
|
306
|
+
0%, 100% { background-position: 0% 50%; }
|
|
307
|
+
50% { background-position: 100% 50%; }
|
|
353
308
|
}
|
|
354
309
|
|
|
355
|
-
/*
|
|
356
|
-
.mb-adapt
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
310
|
+
/* Light mode — warm aurora */
|
|
311
|
+
.mb-adapt .mb-group-header {
|
|
312
|
+
background: linear-gradient(
|
|
313
|
+
135deg,
|
|
314
|
+
rgba(99, 102, 241, 0.08) 0%,
|
|
315
|
+
rgba(168, 85, 247, 0.08) 25%,
|
|
316
|
+
rgba(236, 72, 153, 0.06) 50%,
|
|
317
|
+
rgba(99, 102, 241, 0.08) 100%
|
|
318
|
+
) !important;
|
|
319
|
+
background-size: 300% 300%;
|
|
320
|
+
animation: toolbar-glow 8s ease infinite;
|
|
361
321
|
}
|
|
362
|
-
```
|
|
363
322
|
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
323
|
+
/* Dark mode — deep neon */
|
|
324
|
+
.mb-adapt--dark .mb-group-header {
|
|
325
|
+
background: linear-gradient(
|
|
326
|
+
135deg,
|
|
327
|
+
rgba(99, 102, 241, 0.15) 0%,
|
|
328
|
+
rgba(168, 85, 247, 0.12) 25%,
|
|
329
|
+
rgba(236, 72, 153, 0.10) 50%,
|
|
330
|
+
rgba(99, 102, 241, 0.15) 100%
|
|
331
|
+
) !important;
|
|
332
|
+
background-size: 300% 300%;
|
|
333
|
+
animation: toolbar-glow 8s ease infinite;
|
|
373
334
|
}
|
|
374
335
|
```
|
|
375
336
|
|
|
376
|
-
**
|
|
377
|
-
|
|
378
|
-
```css
|
|
379
|
-
.mb-adapt {
|
|
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;
|
|
385
|
-
}
|
|
386
|
-
```
|
|
337
|
+
**Key classes you can target:**
|
|
387
338
|
|
|
388
|
-
|
|
339
|
+
| Class | Element |
|
|
340
|
+
|-------|---------|
|
|
341
|
+
| `.mb-group-header` | Tab toolbar |
|
|
342
|
+
| `.mb-tab` | Individual tab |
|
|
343
|
+
| `.mb-tab[data-active="true"]` | Active tab |
|
|
344
|
+
| `.mb-group-content` | Panel content area |
|
|
345
|
+
| `.mb-floating-overlay` | Floating panel container |
|
|
346
|
+
| `.mb-layout-separator` | Resize handle between panels |
|
|
347
|
+
| `.mb-drag-ghost` | Tab drag preview |
|
|
348
|
+
| `.mb-adapt__status-card` | Error/stopped status card |
|
|
349
|
+
| `.mb-adapt__status-icon` | Status card icon |
|
|
350
|
+
| `.mb-adapt-minimized-tab` | Minimized panel tab |
|
|
351
|
+
| `.mb-drop-overlay` | Drop target highlight |
|
|
389
352
|
|
|
390
|
-
|
|
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` |
|
|
353
|
+
All three approaches compose — use `theme` for colors, CSS variables for fine-tuning, and direct class targeting for animations.
|
|
397
354
|
|
|
398
355
|
<details>
|
|
399
356
|
<summary>Full CSS variable reference</summary>
|
|
@@ -418,6 +375,16 @@ Floating panels, status cards, and drag ghosts each have independent shadow, bor
|
|
|
418
375
|
| `--mb-adapt-fork-tab-color` | `rgb(51,51,51)` | `#ffffff` | Active tab text |
|
|
419
376
|
| `--mb-adapt-fork-tab-inactive-color` | `rgba(51,51,51,0.7)` | `#969696` | Inactive tab text |
|
|
420
377
|
| `--mb-adapt-fork-separator` | `rgba(128,128,128,0.35)` | `rgb(68,68,68)` | Tab/panel borders |
|
|
378
|
+
| `--mb-adapt-tab-radius` | `0` | | Tab border-radius (use `999px` for pill shape) |
|
|
379
|
+
| `--mb-adapt-tab-shadow` | `none` | | Tab box-shadow |
|
|
380
|
+
| `--mb-adapt-tab-active-shadow` | `none` | | Active tab box-shadow |
|
|
381
|
+
| `--mb-adapt-tab-gap` | `0px` | | Tab margin (spacing between tabs) |
|
|
382
|
+
| `--mb-adapt-tab-padding` | `0 14px` | | Tab padding |
|
|
383
|
+
| `--mb-adapt-tab-font-size` | `13px` | | Tab label font size |
|
|
384
|
+
| `--mb-adapt-toolbar-height` | `40px` | | Toolbar / tab bar height |
|
|
385
|
+
| `--mb-adapt-toolbar-padding` | `0` | | Toolbar inner padding (standard CSS shorthand) |
|
|
386
|
+
| `--mb-adapt-tab-min-width` | `100px` | | Tab minimum width |
|
|
387
|
+
| `--mb-adapt-tab-spacing` | `6px` | | Gap between tab label and action buttons |
|
|
421
388
|
|
|
422
389
|
### Floating panels (elevation)
|
|
423
390
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{AdaptWebClient}from"./index.js";const OBSERVED_ATTRIBUTES=["automation-id","session-token","auth-token","transmitter","challenge-token","requires-challenge","inherit-token","fork-display-mode","side-by-side-split","dark-mode","auto-resizing","allow-floating","allow-docking","allow-dialog-docking","allow-minimize","allow-maximize","floating-auto-resize","confirm-on-close","persist"],BaseElement=typeof HTMLElement<"u"?HTMLElement:class{};class AdaptAutomationElement extends BaseElement{constructor(){super();this._client=null}static get observedAttributes(){return OBSERVED_ATTRIBUTES}get automationId(){return this.getAttribute("automation-id")}set automationId(v){v===null?this.removeAttribute("automation-id"):this.setAttribute("automation-id",v)}get darkMode(){return this.hasAttribute("dark-mode")}set darkMode(v){v?this.setAttribute("dark-mode",""):this.removeAttribute("dark-mode")}get autoResizing(){return this.hasAttribute("auto-resizing")}set autoResizing(v){v?this.setAttribute("auto-resizing",""):this.removeAttribute("auto-resizing")}get allowFloating(){return!this.hasAttribute("allow-floating")||this.getAttribute("allow-floating")!=="false"}set allowFloating(v){v?this.removeAttribute("allow-floating"):this.setAttribute("allow-floating","false")}get allowDocking(){return!this.hasAttribute("allow-docking")||this.getAttribute("allow-docking")!=="false"}set allowDocking(v){v?this.removeAttribute("allow-docking"):this.setAttribute("allow-docking","false")}get allowDialogDocking(){return!this.hasAttribute("allow-dialog-docking")||this.getAttribute("allow-dialog-docking")!=="false"}set allowDialogDocking(v){v?this.removeAttribute("allow-dialog-docking"):this.setAttribute("allow-dialog-docking","false")}get allowMinimize(){return!this.hasAttribute("allow-minimize")||this.getAttribute("allow-minimize")!=="false"}set allowMinimize(v){v?this.removeAttribute("allow-minimize"):this.setAttribute("allow-minimize","false")}get allowMaximize(){return!this.hasAttribute("allow-maximize")||this.getAttribute("allow-maximize")!=="false"}set allowMaximize(v){v?this.removeAttribute("allow-maximize"):this.setAttribute("allow-maximize","false")}get floatingAutoResize(){return this.hasAttribute("floating-auto-resize")}set floatingAutoResize(v){v?this.setAttribute("floating-auto-resize",""):this.removeAttribute("floating-auto-resize")}get confirmOnClose(){return this.hasAttribute("confirm-on-close")}set confirmOnClose(v){v?this.setAttribute("confirm-on-close",""):this.removeAttribute("confirm-on-close")}get forkDisplayMode(){return this.getAttribute("fork-display-mode")==="dialog"?"dialog":"side-by-side"}set forkDisplayMode(v){this.setAttribute("fork-display-mode",v)}get persist(){return this.hasAttribute("persist")}set persist(v){v?this.setAttribute("persist",""):this.removeAttribute("persist")}async newSession(){this._client&&await this._client.newSession()}connectedCallback(){queueMicrotask(()=>this._tryInit())}disconnectedCallback(){this._destroyClient()}attributeChangedCallback(name,oldValue,newValue){if(oldValue!==newValue){if(name==="automation-id"||name==="persist"){this._destroyClient(),queueMicrotask(()=>this._tryInit());return}if(this._client)switch(name){case"fork-display-mode":this._client.setForkDisplayMode(this.forkDisplayMode);break;case"dark-mode":this._client.setDarkMode(this.darkMode);break;case"auto-resizing":this._client.setAutoResizing(this.autoResizing);break;case"allow-floating":this._client.setAllowFloating(this.allowFloating);break;case"allow-docking":this._client.setAllowDocking(this.allowDocking);break;case"allow-dialog-docking":this._client.setAllowDialogDocking(this.allowDialogDocking);break;case"allow-minimize":this._client.setAllowMinimize(this.allowMinimize);break;case"allow-maximize":this._client.setAllowMaximize(this.allowMaximize);break;case"floating-auto-resize":this._client.setFloatingAutoResize(this.floatingAutoResize);break;case"confirm-on-close":this._client.setConfirmOnClose(this.confirmOnClose);break}}}_tryInit(){if(this._client||!this.isConnected)return;const automationId=this.automationId;if(!automationId)return;const sessionToken=this.getAttribute("session-token"),authToken=this.getAttribute("auth-token"),transmitter=this.getAttribute("transmitter"),challengeToken=this.getAttribute("challenge-token"),requiresChallenge=this.hasAttribute("requires-challenge"),inheritToken=this.getAttribute("inherit-token"),sideBySideSplitAttr=this.getAttribute("side-by-side-split");let forkDisplay;this.forkDisplayMode==="dialog"?forkDisplay={mode:"dialog"}:forkDisplay={mode:"side-by-side",...sideBySideSplitAttr!==null&&{split:Number(sideBySideSplitAttr)}};const options={container:this,automationId,forkDisplay,darkMode:this.darkMode,autoResizing:this.autoResizing,onSession:(status,fork)=>{this.onSessionCallback?.(status,fork),this.dispatchEvent(new CustomEvent("adapt-session",{detail:{status,fork},bubbles:!0}))},onOutput:output=>{this.onOutputCallback?.(output),this.dispatchEvent(new CustomEvent("adapt-output",{detail:{output},bubbles:!0}))},onForkActive:active=>{this.onForkActiveCallback?.(active),this.dispatchEvent(new CustomEvent("adapt-fork-active",{detail:{active},bubbles:!0}))}};this.allowFloating||(options.allowFloating=!1),this.allowDocking||(options.allowDocking=!1),this.allowDialogDocking||(options.allowDialogDocking=!1),this.allowMinimize||(options.allowMinimize=!1),this.allowMaximize||(options.allowMaximize=!1),this.floatingAutoResize&&(options.floatingAutoResize=!0),this.confirmOnClose&&(options.confirmOnClose=!0),sessionToken&&(options.sessionToken=sessionToken),authToken&&(options.authToken=authToken),transmitter&&(options.transmitter=transmitter),challengeToken&&(options.challengeToken=challengeToken),requiresChallenge&&(options.requiresChallenge=!0),inheritToken&&(options.inheritToken=inheritToken),this.signals!==void 0&&(options.signals=this.signals),this.capWidgetOptions!==void 0&&(options.capWidgetOptions=this.capWidgetOptions),this.inheritFrom!==void 0&&(options.inheritFrom=this.inheritFrom),this.classNames!==void 0&&(options.classNames=this.classNames),this.styles!==void 0&&(options.styles=this.styles),this.text!==void 0&&(options.text=this.text),this.persistOptions!==void 0?options.persist=this.persistOptions:this.persist&&(options.persist=!0),this._client=new AdaptWebClient(options)}_destroyClient(){this._client&&(this._client.destroy(),this._client=null)}}if(typeof customElements<"u"&&!customElements.get("adapt-automation")){customElements.define("adapt-automation",AdaptAutomationElement);const styleId="adapt-element-display";if(!document.getElementById(styleId)){const s=document.createElement("style");s.id=styleId,s.textContent="adapt-automation, adapt-cap { display: block; }",document.head.appendChild(s)}}export{AdaptAutomationElement};
|
|
1
|
+
import{AdaptWebClient}from"./index.js";const OBSERVED_ATTRIBUTES=["automation-id","session-token","auth-token","transmitter","challenge-token","requires-challenge","inherit-token","fork-display-mode","side-by-side-split","dark-mode","auto-resizing","allow-floating","allow-docking","allow-dialog-docking","allow-minimize","allow-maximize","floating-auto-resize","confirm-on-close","persist"],BaseElement=typeof HTMLElement<"u"?HTMLElement:class{};class AdaptAutomationElement extends BaseElement{constructor(){super();this._client=null}static get observedAttributes(){return OBSERVED_ATTRIBUTES}get theme(){return this._theme}set theme(v){this._theme=v,this._client?.setTheme(v)}get automationId(){return this.getAttribute("automation-id")}set automationId(v){v===null?this.removeAttribute("automation-id"):this.setAttribute("automation-id",v)}get darkMode(){return this.hasAttribute("dark-mode")}set darkMode(v){v?this.setAttribute("dark-mode",""):this.removeAttribute("dark-mode")}get autoResizing(){return this.hasAttribute("auto-resizing")}set autoResizing(v){v?this.setAttribute("auto-resizing",""):this.removeAttribute("auto-resizing")}get allowFloating(){return!this.hasAttribute("allow-floating")||this.getAttribute("allow-floating")!=="false"}set allowFloating(v){v?this.removeAttribute("allow-floating"):this.setAttribute("allow-floating","false")}get allowDocking(){return!this.hasAttribute("allow-docking")||this.getAttribute("allow-docking")!=="false"}set allowDocking(v){v?this.removeAttribute("allow-docking"):this.setAttribute("allow-docking","false")}get allowDialogDocking(){return!this.hasAttribute("allow-dialog-docking")||this.getAttribute("allow-dialog-docking")!=="false"}set allowDialogDocking(v){v?this.removeAttribute("allow-dialog-docking"):this.setAttribute("allow-dialog-docking","false")}get allowMinimize(){return!this.hasAttribute("allow-minimize")||this.getAttribute("allow-minimize")!=="false"}set allowMinimize(v){v?this.removeAttribute("allow-minimize"):this.setAttribute("allow-minimize","false")}get allowMaximize(){return!this.hasAttribute("allow-maximize")||this.getAttribute("allow-maximize")!=="false"}set allowMaximize(v){v?this.removeAttribute("allow-maximize"):this.setAttribute("allow-maximize","false")}get floatingAutoResize(){return this.hasAttribute("floating-auto-resize")}set floatingAutoResize(v){v?this.setAttribute("floating-auto-resize",""):this.removeAttribute("floating-auto-resize")}get confirmOnClose(){return this.hasAttribute("confirm-on-close")}set confirmOnClose(v){v?this.setAttribute("confirm-on-close",""):this.removeAttribute("confirm-on-close")}get forkDisplayMode(){return this.getAttribute("fork-display-mode")==="dialog"?"dialog":"side-by-side"}set forkDisplayMode(v){this.setAttribute("fork-display-mode",v)}get persist(){return this.hasAttribute("persist")}set persist(v){v?this.setAttribute("persist",""):this.removeAttribute("persist")}async newSession(){this._client&&await this._client.newSession()}connectedCallback(){queueMicrotask(()=>this._tryInit())}disconnectedCallback(){this._destroyClient()}attributeChangedCallback(name,oldValue,newValue){if(oldValue!==newValue){if(name==="automation-id"||name==="persist"){this._destroyClient(),queueMicrotask(()=>this._tryInit());return}if(this._client)switch(name){case"fork-display-mode":this._client.setForkDisplayMode(this.forkDisplayMode);break;case"dark-mode":this._client.setDarkMode(this.darkMode);break;case"auto-resizing":this._client.setAutoResizing(this.autoResizing);break;case"allow-floating":this._client.setAllowFloating(this.allowFloating);break;case"allow-docking":this._client.setAllowDocking(this.allowDocking);break;case"allow-dialog-docking":this._client.setAllowDialogDocking(this.allowDialogDocking);break;case"allow-minimize":this._client.setAllowMinimize(this.allowMinimize);break;case"allow-maximize":this._client.setAllowMaximize(this.allowMaximize);break;case"floating-auto-resize":this._client.setFloatingAutoResize(this.floatingAutoResize);break;case"confirm-on-close":this._client.setConfirmOnClose(this.confirmOnClose);break}}}_tryInit(){if(this._client||!this.isConnected)return;const automationId=this.automationId;if(!automationId)return;const sessionToken=this.getAttribute("session-token"),authToken=this.getAttribute("auth-token"),transmitter=this.getAttribute("transmitter"),challengeToken=this.getAttribute("challenge-token"),requiresChallenge=this.hasAttribute("requires-challenge"),inheritToken=this.getAttribute("inherit-token"),sideBySideSplitAttr=this.getAttribute("side-by-side-split");let forkDisplay;this.forkDisplayMode==="dialog"?forkDisplay={mode:"dialog"}:forkDisplay={mode:"side-by-side",...sideBySideSplitAttr!==null&&{split:Number(sideBySideSplitAttr)}};const options={container:this,automationId,forkDisplay,darkMode:this.darkMode,autoResizing:this.autoResizing,onSession:(status,fork)=>{this.onSessionCallback?.(status,fork),this.dispatchEvent(new CustomEvent("adapt-session",{detail:{status,fork},bubbles:!0}))},onOutput:output=>{this.onOutputCallback?.(output),this.dispatchEvent(new CustomEvent("adapt-output",{detail:{output},bubbles:!0}))},onForkActive:active=>{this.onForkActiveCallback?.(active),this.dispatchEvent(new CustomEvent("adapt-fork-active",{detail:{active},bubbles:!0}))}};this.allowFloating||(options.allowFloating=!1),this.allowDocking||(options.allowDocking=!1),this.allowDialogDocking||(options.allowDialogDocking=!1),this.allowMinimize||(options.allowMinimize=!1),this.allowMaximize||(options.allowMaximize=!1),this.floatingAutoResize&&(options.floatingAutoResize=!0),this.confirmOnClose&&(options.confirmOnClose=!0),sessionToken&&(options.sessionToken=sessionToken),authToken&&(options.authToken=authToken),transmitter&&(options.transmitter=transmitter),challengeToken&&(options.challengeToken=challengeToken),requiresChallenge&&(options.requiresChallenge=!0),inheritToken&&(options.inheritToken=inheritToken),this.signals!==void 0&&(options.signals=this.signals),this.capWidgetOptions!==void 0&&(options.capWidgetOptions=this.capWidgetOptions),this.inheritFrom!==void 0&&(options.inheritFrom=this.inheritFrom),this.classNames!==void 0&&(options.classNames=this.classNames),this.styles!==void 0&&(options.styles=this.styles),this.text!==void 0&&(options.text=this.text),this._theme!==void 0&&(options.theme=this._theme),this.persistOptions!==void 0?options.persist=this.persistOptions:this.persist&&(options.persist=!0),this._client=new AdaptWebClient(options)}_destroyClient(){this._client&&(this._client.destroy(),this._client=null)}}if(typeof customElements<"u"&&!customElements.get("adapt-automation")){customElements.define("adapt-automation",AdaptAutomationElement);const styleId="adapt-element-display";if(!document.getElementById(styleId)){const s=document.createElement("style");s.id=styleId,s.textContent="adapt-automation, adapt-cap { display: block; }",document.head.appendChild(s)}}export{AdaptAutomationElement};
|
package/dist/esm/cap-adapter.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
typeof window<"u"&&!window.CAP_CUSTOM_WASM_URL&&(window.CAP_CUSTOM_WASM_URL=new URL("https://cdn.mochabug.com/adapt/web/1.0.1-rc.
|
|
1
|
+
typeof window<"u"&&!window.CAP_CUSTOM_WASM_URL&&(window.CAP_CUSTOM_WASM_URL=new URL("https://cdn.mochabug.com/adapt/web/1.0.1-rc.13/cap_wasm.js",window.location.href).href);import{timestampDate}from"@bufbuild/protobuf/wkt";let currentClient=null,currentAutomationId=null;const verificationTokens=new Map;async function createChallenge(client,id){const response=await client.createChallenge({id});return{count:response.count,size:response.size,difficulty:response.difficulty,expires:response.expires?timestampDate(response.expires):new Date,token:response.token,verificationToken:response.verificationToken}}async function redeemChallenge(client,id,verificationToken,solutions){const response=await client.redeemChallenge({id,verificationToken,solutions});return{token:response.token,expires:response.expires?timestampDate(response.expires):new Date}}typeof window<"u"&&(window.CAP_CUSTOM_FETCH=async(url,options)=>{const urlStr=url.toString();if(urlStr.endsWith("/challenge")){if(!currentClient||!currentAutomationId)return new Response(JSON.stringify({error:"Cap adapter not initialized"}),{status:500,headers:{"Content-Type":"application/json"}});try{const challengeInfo=await createChallenge(currentClient,currentAutomationId);return verificationTokens.set(currentAutomationId,challengeInfo.verificationToken),new Response(JSON.stringify({challenge:{c:challengeInfo.count,s:challengeInfo.size,d:challengeInfo.difficulty},token:challengeInfo.token,expires:challengeInfo.expires.toISOString()}),{status:200,headers:{"Content-Type":"application/json"}})}catch(error){return new Response(JSON.stringify({error:String(error)}),{status:500,headers:{"Content-Type":"application/json"}})}}if(urlStr.endsWith("/redeem")){if(!currentClient||!currentAutomationId)return new Response(JSON.stringify({error:"Cap adapter not initialized"}),{status:500,headers:{"Content-Type":"application/json"}});const verificationToken=verificationTokens.get(currentAutomationId);if(!verificationToken)return new Response(JSON.stringify({error:"No verification token found - challenge must be created first"}),{status:400,headers:{"Content-Type":"application/json"}});try{const solutions=((options?.body?JSON.parse(options.body):{}).solutions||[]).map(s=>BigInt(s)),redeemed=await redeemChallenge(currentClient,currentAutomationId,verificationToken,solutions);return verificationTokens.delete(currentAutomationId),new Response(JSON.stringify({success:!0,token:redeemed.token,expires:redeemed.expires.toISOString()}),{status:200,headers:{"Content-Type":"application/json"}})}catch(error){return new Response(JSON.stringify({error:String(error)}),{status:500,headers:{"Content-Type":"application/json"}})}}return fetch(url,options)});function setupCapAdapter(client,automationId){currentClient=client,currentAutomationId=automationId}function cleanupCapAdapter(){currentAutomationId&&verificationTokens.delete(currentAutomationId),currentClient=null,currentAutomationId=null}export{cleanupCapAdapter,createChallenge,redeemChallenge,setupCapAdapter};
|
package/dist/esm/core.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{AdaptWebClient}from"./index.js";import{createConnectClient}from"@mochabug/adapt-core/connect";import{configure,resetConfig}from"@mochabug/adapt-core";import{AdaptAutomationElement}from"./AdaptAutomationElement.js";import{IframePanelComponent,ForkGroupActions,FloatingToolbar,MinimizeManager}from"./panel-setup.js";import{PanelManager}from"./panel-manager.js";import{clearPersistedState}from"./index.js";export{AdaptAutomationElement,FloatingToolbar,ForkGroupActions,IframePanelComponent,MinimizeManager,PanelManager,AdaptWebClient as WebClient,clearPersistedState,configure,createConnectClient,resetConfig};
|
|
1
|
+
import{AdaptWebClient}from"./index.js";import{resolveTheme}from"./theme.js";import{createConnectClient}from"@mochabug/adapt-core/connect";import{configure,resetConfig}from"@mochabug/adapt-core";import{AdaptAutomationElement}from"./AdaptAutomationElement.js";import{IframePanelComponent,ForkGroupActions,FloatingToolbar,MinimizeManager}from"./panel-setup.js";import{PanelManager}from"./panel-manager.js";import{clearPersistedState}from"./index.js";export{AdaptAutomationElement,FloatingToolbar,ForkGroupActions,IframePanelComponent,MinimizeManager,PanelManager,AdaptWebClient as WebClient,clearPersistedState,configure,createConnectClient,resetConfig,resolveTheme};
|