@mochabug/adapt-web 1.0.1-rc.13 → 1.0.1-rc.15
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/dist/README.md +15 -15
- package/dist/esm/cap-adapter.js +1 -1
- package/dist/esm/css-panel.js +2 -2
- package/dist/styles.css +2 -2
- package/dist/types/css-panel.d.ts +1 -1
- 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 +2 -2
- package/dist/umd/adapt-web.core.js.br +0 -0
- package/dist/umd/adapt-web.core.min.js +2 -2
- package/dist/umd/adapt-web.core.min.js.br +0 -0
- package/dist/umd/adapt-web.js +3 -3
- package/dist/umd/adapt-web.js.br +0 -0
- package/dist/umd/adapt-web.min.js +3 -3
- package/dist/umd/adapt-web.min.js.br +0 -0
- package/dist/umd/styles.css +2 -2
- 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.15/`
|
|
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.15/adapt-core.min.js"></script>
|
|
24
|
+
<script src="https://cdn.mochabug.com/adapt/web/1.0.1-rc.15/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.15/adapt-web.min.js" as="script">
|
|
47
|
+
<link rel="stylesheet" href="https://cdn.mochabug.com/adapt/web/1.0.1-rc.15/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.15/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.15/adapt-web.core.min.js" as="script">
|
|
60
|
+
<link rel="stylesheet" href="https://cdn.mochabug.com/adapt/web/1.0.1-rc.15/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.15/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.15/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.15/adapt-web.core.min.js"></script>
|
|
82
82
|
```
|
|
83
83
|
|
|
84
84
|
### ESM
|
|
@@ -160,12 +160,12 @@ Requires a `client` JS property — set it after the element is in the DOM.
|
|
|
160
160
|
|
|
161
161
|
```html
|
|
162
162
|
<head>
|
|
163
|
-
<link rel="preload" href="https://cdn.mochabug.com/adapt/web/1.0.1-rc.
|
|
164
|
-
<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.15/adapt-web.cap.min.js" as="script">
|
|
164
|
+
<link rel="stylesheet" href="https://cdn.mochabug.com/adapt/web/1.0.1-rc.15/styles.css">
|
|
165
165
|
</head>
|
|
166
166
|
<body>
|
|
167
167
|
<adapt-cap automation-id="YOUR_ID"></adapt-cap>
|
|
168
|
-
<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.15/adapt-web.cap.min.js"></script>
|
|
169
169
|
<script>
|
|
170
170
|
var el = document.querySelector('adapt-cap');
|
|
171
171
|
el.client = MbAdapt.createConnectClient({ id: 'YOUR_ID' });
|
|
@@ -180,7 +180,7 @@ Requires a `client` JS property — set it after the element is in the DOM.
|
|
|
180
180
|
|
|
181
181
|
```html
|
|
182
182
|
<adapt-cap automation-id="YOUR_ID"></adapt-cap>
|
|
183
|
-
<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.15/adapt-web.cap.min.js"></script>
|
|
184
184
|
<script>
|
|
185
185
|
var el = document.querySelector('adapt-cap');
|
|
186
186
|
el.client = MbAdapt.createConnectClient({ id: 'YOUR_ID' });
|
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.15/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/css-panel.js
CHANGED
|
@@ -203,7 +203,7 @@ const PANEL_MANAGER_CSS=`/* ====================================================
|
|
|
203
203
|
|
|
204
204
|
.mb-group-tabs {
|
|
205
205
|
display: flex;
|
|
206
|
-
align-items:
|
|
206
|
+
align-items: stretch;
|
|
207
207
|
overflow-x: auto;
|
|
208
208
|
overflow-y: hidden;
|
|
209
209
|
flex: 0 1 auto;
|
|
@@ -239,7 +239,7 @@ const PANEL_MANAGER_CSS=`/* ====================================================
|
|
|
239
239
|
}
|
|
240
240
|
|
|
241
241
|
.mb-group[data-main-group="true"] .mb-group-content {
|
|
242
|
-
background: var(--
|
|
242
|
+
background: var(--_fork-bg);
|
|
243
243
|
}
|
|
244
244
|
|
|
245
245
|
|
package/dist/styles.css
CHANGED
|
@@ -203,7 +203,7 @@
|
|
|
203
203
|
|
|
204
204
|
.mb-group-tabs {
|
|
205
205
|
display: flex;
|
|
206
|
-
align-items:
|
|
206
|
+
align-items: stretch;
|
|
207
207
|
overflow-x: auto;
|
|
208
208
|
overflow-y: hidden;
|
|
209
209
|
flex: 0 1 auto;
|
|
@@ -239,7 +239,7 @@
|
|
|
239
239
|
}
|
|
240
240
|
|
|
241
241
|
.mb-group[data-main-group="true"] .mb-group-content {
|
|
242
|
-
background: var(--
|
|
242
|
+
background: var(--_fork-bg);
|
|
243
243
|
}
|
|
244
244
|
|
|
245
245
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const PANEL_MANAGER_CSS = "/* ==========================================================================\n Mochabug Adapt Web \u2014 Combined Styles\n Panel Manager CSS + Cap Widget CSS\n ========================================================================== */\n\n:root { --mb-adapt-styles-loaded: 1; }\n\n/* \u2500\u2500 Root \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.mb-adapt {\n position: relative;\n width: 100%;\n height: 100%;\n min-height: inherit;\n display: flex;\n flex-direction: column;\n\n /* Two-layer CSS variables: --_X reads user-set --mb-adapt-X first, falls back to light default */\n --_bg: var(--mb-adapt-bg, transparent);\n --_font: var(--mb-adapt-font, system-ui, -apple-system, sans-serif);\n --_button-hover-bg: var(--mb-adapt-button-hover-bg, rgba(128, 128, 128, 0.2));\n --_separator-active: var(--mb-adapt-separator-active, rgba(59, 130, 246, 0.5));\n --_floating-shadow: var(--mb-adapt-floating-shadow, 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 12px 24px -8px rgba(0, 0, 0, 0.15));\n --_floating-border: var(--mb-adapt-floating-border, none);\n --_floating-backdrop: var(--mb-adapt-floating-backdrop, none);\n --_floating-radius: var(--mb-adapt-floating-radius, 8px);\n --_status-card-bg: var(--mb-adapt-status-card-bg, #ffffff);\n --_status-card-border: var(--mb-adapt-status-card-border, #e5e7eb);\n --_status-card-shadow: var(--mb-adapt-status-card-shadow, 0 4px 24px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04));\n --_status-icon-bg: var(--mb-adapt-status-icon-bg, #fef2f2);\n --_status-icon-stopped-bg: var(--mb-adapt-status-icon-stopped-bg, var(--mb-adapt-status-icon-bg, #f3f4f6));\n --_status-text: var(--mb-adapt-status-text, #374151);\n --_drag-ghost-shadow: var(--mb-adapt-drag-ghost-shadow, 0 4px 12px rgba(0, 0, 0, 0.15));\n --_border-radius: var(--mb-adapt-border-radius, 8px);\n --mb-adapt-responsive-breakpoint: 768;\n --mb-adapt-responsive-hysteresis: 40;\n\n /* Cap.js widget variables */\n --_cap-background: var(--mb-adapt-cap-background, #ffffff);\n --_cap-border-color: var(--mb-adapt-cap-border-color, #e2e8f0);\n --_cap-border-radius: var(--mb-adapt-cap-border-radius, 16px);\n --_cap-height: var(--mb-adapt-cap-height, 72px);\n --_cap-width: var(--mb-adapt-cap-width, 380px);\n --_cap-padding: var(--mb-adapt-cap-padding, 20px 28px);\n --_cap-gap: var(--mb-adapt-cap-gap, 20px);\n --_cap-color: var(--mb-adapt-cap-color, #1e293b);\n --_cap-checkbox-size: var(--mb-adapt-cap-checkbox-size, 36px);\n --_cap-checkbox-border: var(--mb-adapt-cap-checkbox-border, 2px solid #cbd5e1);\n --_cap-checkbox-radius: var(--mb-adapt-cap-checkbox-radius, 10px);\n --_cap-checkbox-background: var(--mb-adapt-cap-checkbox-background, #f8fafc);\n --_cap-spinner-color: var(--mb-adapt-cap-spinner-color, #6366f1);\n --_cap-spinner-bg: var(--mb-adapt-cap-spinner-bg, #e2e8f0);\n --_cap-font: var(--mb-adapt-cap-font, inherit);\n --_cap-spinner-thickness: var(--mb-adapt-cap-spinner-thickness, 3px);\n --_cap-shadow: var(--mb-adapt-cap-shadow, 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04));\n --_cap-shadow-hover: var(--mb-adapt-cap-shadow-hover, 0 8px 30px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06));\n\n /* Fork panel theming */\n --_fork-bg: var(--mb-adapt-fork-bg, #ffffff);\n --_fork-tab-bg: var(--mb-adapt-fork-tab-bg, #f3f3f3);\n --_fork-tab-active-bg: var(--mb-adapt-fork-tab-active-bg, #ffffff);\n --_fork-tab-color: var(--mb-adapt-fork-tab-color, rgb(51, 51, 51));\n --_fork-tab-inactive-color: var(--mb-adapt-fork-tab-inactive-color, rgba(51, 51, 51, 0.7));\n --_fork-separator: var(--mb-adapt-fork-separator, rgba(128, 128, 128, 0.35));\n\n /* Tab shape */\n --_tab-radius: var(--mb-adapt-tab-radius, 0);\n --_tab-shadow: var(--mb-adapt-tab-shadow, none);\n --_tab-active-shadow: var(--mb-adapt-tab-active-shadow, none);\n --_tab-gap: var(--mb-adapt-tab-gap, 0px);\n --_tab-padding: var(--mb-adapt-tab-padding, 0 14px);\n --_tab-font-size: var(--mb-adapt-tab-font-size, 13px);\n --_tab-min-width: var(--mb-adapt-tab-min-width, 100px);\n --_tab-spacing: var(--mb-adapt-tab-spacing, 6px);\n --_toolbar-height: var(--mb-adapt-toolbar-height, 40px);\n --_toolbar-padding: var(--mb-adapt-toolbar-padding, 0);\n\n /* Drop targets \u2014 light defaults */\n --_drop-header-bg: var(--mb-adapt-drop-header-bg, rgba(99, 102, 241, 0.18));\n --_drop-center-bg: var(--mb-adapt-drop-center-bg, rgba(99, 102, 241, 0.12));\n --_drop-split-bg: var(--mb-adapt-drop-split-bg, rgba(99, 102, 241, 0.14));\n --_drop-border: var(--mb-adapt-drop-border, rgba(99, 102, 241, 0.55));\n\n background: var(--_bg);\n}\n\n.mb-adapt--dark {\n /* Cap.js widget dark mode */\n --_cap-background: var(--mb-adapt-cap-background, #1e293b);\n --_cap-border-color: var(--mb-adapt-cap-border-color, #334155);\n --_cap-color: var(--mb-adapt-cap-color, #f1f5f9);\n --_cap-checkbox-border: var(--mb-adapt-cap-checkbox-border, 2px solid #475569);\n --_cap-checkbox-background: var(--mb-adapt-cap-checkbox-background, #0f172a);\n --_cap-spinner-color: var(--mb-adapt-cap-spinner-color, #818cf8);\n --_cap-spinner-bg: var(--mb-adapt-cap-spinner-bg, #334155);\n --_cap-shadow: var(--mb-adapt-cap-shadow, 0 4px 20px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.15));\n --_cap-shadow-hover: var(--mb-adapt-cap-shadow-hover, 0 8px 30px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.2));\n\n /* Status card dark mode */\n --_status-card-bg: var(--mb-adapt-status-card-bg, #1e293b);\n --_status-card-border: var(--mb-adapt-status-card-border, #334155);\n --_status-icon-bg: var(--mb-adapt-status-icon-bg, #351c1c);\n --_status-icon-stopped-bg: var(--mb-adapt-status-icon-stopped-bg, var(--mb-adapt-status-icon-bg, #1e293b));\n --_status-text: var(--mb-adapt-status-text, #e2e8f0);\n\n /* Panel dark mode overrides */\n --_button-hover-bg: var(--mb-adapt-button-hover-bg, rgba(128, 128, 128, 0.3));\n --_separator-active: var(--mb-adapt-separator-active, rgba(99, 130, 246, 0.6));\n --_floating-shadow: var(--mb-adapt-floating-shadow, 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 12px 24px -8px rgba(0, 0, 0, 0.3));\n --_floating-border: var(--mb-adapt-floating-border, 1px solid rgba(255, 255, 255, 0.06));\n --_status-card-shadow: var(--mb-adapt-status-card-shadow, 0 4px 24px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.15));\n --_drag-ghost-shadow: var(--mb-adapt-drag-ghost-shadow, 0 4px 12px rgba(0, 0, 0, 0.35));\n\n /* Fork panel dark mode */\n --_fork-bg: var(--mb-adapt-fork-bg, #1e1e1e);\n --_fork-tab-bg: var(--mb-adapt-fork-tab-bg, #252526);\n --_fork-tab-active-bg: var(--mb-adapt-fork-tab-active-bg, #1e1e1e);\n --_fork-tab-color: var(--mb-adapt-fork-tab-color, #ffffff);\n --_fork-tab-inactive-color: var(--mb-adapt-fork-tab-inactive-color, #969696);\n --_fork-separator: var(--mb-adapt-fork-separator, rgb(68, 68, 68));\n\n /* Drop target dark mode */\n --_drop-header-bg: var(--mb-adapt-drop-header-bg, rgba(129, 140, 248, 0.22));\n --_drop-center-bg: var(--mb-adapt-drop-center-bg, rgba(129, 140, 248, 0.15));\n --_drop-split-bg: var(--mb-adapt-drop-split-bg, rgba(129, 140, 248, 0.18));\n --_drop-border: var(--mb-adapt-drop-border, rgba(129, 140, 248, 0.6));\n}\n\n/* \u2500\u2500 Layout (recursive split tree) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.mb-layout {\n flex: 1;\n min-height: 0;\n position: relative;\n display: flex;\n}\n\n.mb-split-container {\n display: flex;\n min-width: 0;\n min-height: 0;\n}\n\n.mb-split-horizontal { flex-direction: row; }\n.mb-split-vertical { flex-direction: column; }\n\n.mb-split-leaf {\n min-width: 0;\n min-height: 0;\n overflow: hidden;\n}\n\n/* Animated flex transition \u2014 applied temporarily during dock/undock/maximize */\n.mb-split-leaf--animating {\n transition: flex 0.25s ease;\n}\n.mb-split-container--animating {\n transition: flex 0.25s ease;\n}\n.mb-layout-separator--animating {\n transition: opacity 0.25s ease;\n}\n\n/* Draggable separator between split panels */\n.mb-layout-separator {\n flex: 0 0 5px;\n background: var(--_fork-separator);\n transition: background 0.15s;\n position: relative;\n z-index: 1;\n touch-action: none;\n}\n\n.mb-layout-separator-v { cursor: col-resize; }\n.mb-layout-separator-h { cursor: row-resize; }\n\n.mb-layout-separator:hover,\n.mb-layout-separator--active {\n background: var(--_separator-active);\n}\n\n/* \u2500\u2500 Group \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.mb-group {\n display: flex;\n flex-direction: column;\n height: 100%;\n background: var(--_bg);\n}\n\n.mb-group-header {\n display: flex;\n align-items: stretch;\n height: var(--_toolbar-height);\n min-height: var(--_toolbar-height);\n padding: var(--_toolbar-padding);\n background: var(--_fork-tab-bg);\n border-bottom: 1px solid var(--_fork-separator);\n user-select: none;\n}\n\n.mb-group-header-prefix {\n display: flex;\n align-items: stretch;\n}\n\n.mb-group-tabs {\n display: flex;\n align-items: center;\n overflow-x: auto;\n overflow-y: hidden;\n flex: 0 1 auto;\n min-width: 0;\n}\n\n.mb-group-tabs::-webkit-scrollbar {\n height: 2px;\n}\n\n/* Drag handle \u2014 fills remaining header space so the user can grab it */\n.mb-group-header-void {\n flex: 1;\n min-width: 40px;\n touch-action: none;\n}\n\n.mb-group-header-actions {\n display: flex;\n align-items: center;\n}\n\n.mb-group-content {\n flex: 1;\n position: relative;\n overflow: hidden;\n background: var(--_fork-bg);\n}\n\n/* Main group overrides */\n.mb-group[data-main-group=\"true\"] {\n background: var(--_bg);\n}\n\n.mb-group[data-main-group=\"true\"] .mb-group-content {\n background: var(--_bg);\n}\n\n\n/* \u2500\u2500 Tab \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.mb-tab {\n display: flex;\n align-items: center;\n gap: var(--_tab-spacing);\n padding: var(--_tab-padding);\n min-width: var(--_tab-min-width);\n font-size: var(--_tab-font-size);\n font-family: var(--_font);\n white-space: nowrap;\n cursor: pointer;\n touch-action: none;\n color: var(--_fork-tab-inactive-color);\n background: var(--_fork-tab-bg);\n border-right: 1px solid var(--_fork-separator);\n border-radius: var(--_tab-radius);\n box-shadow: var(--_tab-shadow);\n margin: var(--_tab-gap);\n transition: background 0.15s, box-shadow 0.15s;\n}\n\n.mb-tab[data-active=\"true\"] {\n color: var(--_fork-tab-color);\n background: var(--_fork-tab-active-bg);\n box-shadow: var(--_tab-active-shadow);\n}\n\n.mb-tab:hover {\n background: var(--_fork-tab-active-bg);\n}\n\n.mb-tab-label {\n display: flex;\n align-items: center;\n}\n\n.mb-tab-label svg {\n width: 14px;\n height: 14px;\n opacity: 0.7;\n flex-shrink: 0;\n}\n\n.mb-tab[data-active=\"true\"] .mb-tab-label svg {\n opacity: 1;\n}\n\n.mb-tab-actions {\n display: flex;\n align-items: center;\n gap: 2px;\n width: 40px;\n flex-shrink: 0;\n justify-content: flex-end;\n margin-left: auto;\n}\n\n.mb-tab-close {\n width: 18px;\n height: 18px;\n padding: 0;\n border: none;\n background: transparent;\n color: inherit;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 3px;\n opacity: 0;\n transition: opacity 0.15s, background 0.15s;\n}\n\n.mb-tab:hover .mb-tab-close {\n opacity: 0.7;\n}\n\n.mb-tab-close:hover {\n opacity: 1 !important;\n background: var(--_button-hover-bg);\n}\n\n.mb-tab-close svg {\n width: 12px;\n height: 12px;\n}\n\n/* \u2500\u2500 Panel visibility \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.mb-panel {\n width: 100%;\n height: 100%;\n position: absolute;\n inset: 0;\n}\n\n.mb-panel[data-active=\"false\"] {\n display: none;\n}\n\n.mb-panel[data-active=\"true\"] {\n display: block;\n}\n\n/* \u2500\u2500 Floating overlay \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.mb-floating-overlay {\n position: fixed;\n z-index: 100000;\n box-shadow: var(--_floating-shadow);\n border: var(--_floating-border);\n backdrop-filter: var(--_floating-backdrop);\n -webkit-backdrop-filter: var(--_floating-backdrop);\n border-radius: var(--_floating-radius);\n display: flex;\n flex-direction: column;\n /* No overflow:hidden here \u2014 resize handles use negative offsets (top:-3px etc.)\n and would be clipped. The inner .mb-group already has overflow:hidden for\n its own border-radius clipping. */\n}\n\n.mb-floating-overlay > .mb-group {\n flex: 1;\n border-radius: var(--_floating-radius);\n overflow: hidden;\n}\n\n/* Internal split layout inside a floating overlay */\n.mb-floating-overlay > .mb-layout {\n position: relative;\n inset: auto;\n height: auto;\n flex: 1;\n min-width: 0;\n min-height: 0;\n border-radius: var(--_floating-radius);\n overflow: hidden;\n}\n\n.mb-floating-maximized {\n border-radius: 0;\n box-shadow: none;\n}\n\n.mb-floating-maximized .mb-group {\n border-radius: 0;\n}\n\n.mb-floating-maximized .mb-resize-handle {\n display: none !important;\n}\n\n.mb-floating-maximized .mb-group-header-void {\n pointer-events: none;\n}\n\n/* \u2500\u2500 Resize handles \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.mb-resize-handle {\n position: absolute;\n z-index: 10;\n touch-action: none;\n}\n\n.mb-resize-n { top: -3px; left: 8px; right: 8px; height: 6px; cursor: n-resize; }\n.mb-resize-s { bottom: -3px; left: 8px; right: 8px; height: 6px; cursor: s-resize; }\n.mb-resize-e { right: -3px; top: 8px; bottom: 8px; width: 6px; cursor: e-resize; }\n.mb-resize-w { left: -3px; top: 8px; bottom: 8px; width: 6px; cursor: w-resize; }\n.mb-resize-ne { top: -3px; right: -3px; width: 12px; height: 12px; cursor: ne-resize; }\n.mb-resize-nw { top: -3px; left: -3px; width: 12px; height: 12px; cursor: nw-resize; }\n.mb-resize-se { bottom: -3px; right: -3px; width: 12px; height: 12px; cursor: se-resize; }\n.mb-resize-sw { bottom: -3px; left: -3px; width: 12px; height: 12px; cursor: sw-resize; }\n\n/* \u2500\u2500 Iframe styling \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.mb-adapt__iframe {\n width: 100%;\n height: 100%;\n min-height: 0;\n border: 0;\n display: block;\n background: transparent;\n border-radius: var(--_border-radius);\n pointer-events: auto;\n opacity: 0;\n transition: opacity 0.1s ease-out;\n}\n\n.mb-adapt__iframe--visible {\n opacity: 1;\n}\n\n.mb-adapt__iframe--hidden {\n display: none;\n}\n\n/* \u2500\u2500 Status message overlay \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.mb-adapt__status-message {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 200000;\n background: transparent;\n pointer-events: none;\n}\n\n.mb-adapt__status-card {\n pointer-events: auto;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 16px;\n padding: 32px 40px;\n max-width: 380px;\n border-radius: 16px;\n background: var(--_status-card-bg);\n border: 1px solid var(--_status-card-border);\n box-shadow: var(--_status-card-shadow);\n font-family: var(--_font);\n text-align: center;\n}\n\n.mb-adapt__status-icon {\n width: 48px;\n height: 48px;\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--_status-icon-bg);\n}\n\n.mb-adapt__status-icon svg {\n width: 24px;\n height: 24px;\n}\n\n.mb-adapt__status-icon--stopped {\n background: var(--_status-icon-stopped-bg);\n}\n\n.mb-adapt__status-text {\n color: var(--_status-text);\n font-size: 15px;\n line-height: 1.5;\n margin: 0;\n}\n\n.mb-adapt__status-restart {\n padding: 8px 20px;\n border: 1px solid var(--_status-card-border);\n border-radius: 8px;\n background: transparent;\n color: var(--_status-text);\n font-size: 14px;\n font-weight: 500;\n font-family: var(--_font);\n cursor: pointer;\n transition: background 0.15s, border-color 0.15s;\n}\n\n.mb-adapt__status-restart:hover {\n background: var(--_status-card-border);\n}\n\n/* \u2500\u2500 Confirm-on-close dialog \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mb-adapt__confirm-overlay {\n position: fixed;\n inset: 0;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n z-index: 300000;\n background: rgba(0, 0, 0, 0.4);\n height: auto;\n min-height: 0;\n}\n\n.mb-adapt--dark.mb-adapt__confirm-overlay {\n background: rgba(0, 0, 0, 0.55);\n}\n\n.mb-adapt__confirm-card {\n display: flex;\n flex-direction: column;\n align-items: stretch;\n gap: 16px;\n padding: 24px 28px;\n max-width: 360px;\n width: 100%;\n border-radius: var(--_floating-radius);\n background: var(--_fork-tab-active-bg);\n border: 1px solid var(--_fork-separator);\n box-shadow: var(--_floating-shadow);\n font-family: var(--_font);\n text-align: center;\n}\n\n.mb-adapt__confirm-text {\n font-size: 14px;\n line-height: 1.5;\n color: var(--_fork-tab-color);\n margin: 0;\n}\n\n.mb-adapt__confirm-buttons {\n display: flex;\n gap: 8px;\n justify-content: flex-end;\n}\n\n.mb-adapt__confirm-btn {\n padding: 8px 16px;\n border-radius: 6px;\n font-size: 13px;\n font-family: var(--_font);\n cursor: pointer;\n font-weight: 500;\n transition: background 0.15s, border-color 0.15s;\n}\n\n.mb-adapt__confirm-btn--cancel {\n background: transparent;\n border: 1px solid var(--_fork-separator);\n color: var(--_fork-tab-color);\n}\n\n.mb-adapt__confirm-btn--cancel:hover {\n background: var(--_button-hover-bg);\n}\n\n.mb-adapt__confirm-btn--confirm {\n background: var(--_fork-tab-color);\n color: var(--_fork-tab-active-bg);\n border: 1px solid transparent;\n}\n\n.mb-adapt__confirm-btn--confirm:hover {\n opacity: 0.85;\n}\n\n/* \u2500\u2500 Cap.js widget positioning \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.mb-adapt-cap {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n pointer-events: none;\n z-index: 200000;\n}\n\n.mb-adapt-cap > * {\n pointer-events: auto;\n}\n\n/* Cap.js widget styling */\n.mb-adapt cap-widget {\n --cap-background: var(--_cap-background);\n --cap-border-color: var(--_cap-border-color);\n --cap-border-radius: var(--_cap-border-radius);\n --cap-widget-height: var(--_cap-height);\n --cap-widget-width: var(--_cap-width);\n --cap-widget-padding: var(--_cap-padding);\n --cap-gap: var(--_cap-gap);\n --cap-color: var(--_cap-color);\n --cap-checkbox-size: var(--_cap-checkbox-size);\n --cap-checkbox-border: var(--_cap-checkbox-border);\n --cap-checkbox-border-radius: var(--_cap-checkbox-radius);\n --cap-checkbox-background: var(--_cap-checkbox-background);\n --cap-checkbox-margin: 0;\n --cap-font: var(--_cap-font);\n --cap-spinner-color: var(--_cap-spinner-color);\n --cap-spinner-background-color: var(--_cap-spinner-bg);\n --cap-spinner-thickness: var(--_cap-spinner-thickness);\n}\n\n/* Hide Cap.js credits */\ncap-widget::part(attribution) {\n display: none;\n}\n\n/* \u2500\u2500 Fork group action buttons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.mb-adapt-fork-actions {\n display: flex;\n align-items: center;\n gap: 2px;\n padding-right: 4px;\n}\n.mb-adapt-fork-actions button {\n width: 20px;\n height: 20px;\n padding: 0;\n border: none;\n background: transparent;\n color: var(--_fork-tab-color);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 3px;\n opacity: 0.7;\n transition: opacity 0.15s, background 0.15s;\n}\n.mb-adapt-fork-actions button:hover {\n opacity: 1;\n background: var(--_button-hover-bg);\n}\n.mb-adapt-fork-actions button svg {\n width: 14px;\n height: 14px;\n}\n\n/* \u2500\u2500 Minimized-group tabs bar (at the top, NOT an overlay) \u2500\u2500\u2500 */\n/* Sits at the top of .mb-adapt as a normal flow element so the layout\n underneath shrinks to accommodate it. This prevents scrollbars when\n docked panels are minimized \u2014 the iframe gets the remaining height. */\n.mb-adapt-minimized-tabs {\n display: none;\n height: var(--_toolbar-height);\n flex-shrink: 0;\n z-index: 100;\n align-items: stretch;\n background: var(--_fork-tab-bg);\n border-bottom: 1px solid var(--_fork-separator);\n user-select: none;\n}\n.mb-adapt-minimized-tab {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 0 12px;\n flex: 1;\n background: var(--_fork-tab-bg);\n color: var(--_fork-tab-color);\n font-size: var(--_tab-font-size);\n font-family: var(--_font);\n white-space: nowrap;\n border-right: 1px solid var(--_fork-separator);\n cursor: default;\n}\n.mb-adapt-minimized-tab-label {\n flex: 1;\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.mb-adapt-minimized-tab-label svg {\n width: 14px;\n height: 14px;\n opacity: 0.8;\n flex-shrink: 0;\n}\n.mb-adapt-minimized-tab-action {\n width: 22px;\n height: 22px;\n padding: 0;\n border: none;\n background: transparent;\n color: inherit;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n opacity: 0.6;\n transition: opacity 0.15s, background 0.15s;\n}\n.mb-adapt-minimized-tab-action:hover {\n opacity: 1;\n background: var(--_button-hover-bg);\n}\n.mb-adapt-minimized-tab-action svg {\n width: 14px;\n height: 14px;\n}\n\n/* Minimized tab drag handle cursor */\n.mb-adapt-minimized-tab {\n cursor: grab;\n touch-action: none;\n}\n\n/* Drop target highlight for minimized tab merge */\n.mb-adapt-minimized-tab--drop-target {\n background: var(--_drop-header-bg) !important;\n box-shadow: inset 0 0 0 2px var(--_drop-border);\n}\n\n/* \u2500\u2500 Pointer-drag ghost element \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.mb-drag-ghost {\n position: fixed;\n pointer-events: none;\n z-index: 999999;\n padding: 4px 10px;\n background: var(--_fork-tab-bg);\n color: var(--_fork-tab-color);\n border: 1px solid var(--_fork-separator);\n border-radius: var(--_tab-radius, 4px);\n font-size: var(--_tab-font-size);\n font-family: var(--_font);\n white-space: nowrap;\n box-shadow: var(--_drag-ghost-shadow);\n opacity: 0.92;\n display: flex;\n align-items: center;\n}\n\n.mb-drag-ghost svg {\n width: 16px;\n height: 16px;\n}\n\n/* \u2500\u2500 Drop target highlight on group header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.mb-group-header--drop-target {\n background: var(--_drop-header-bg) !important;\n box-shadow: inset 0 0 0 2px var(--_drop-border);\n}\n\n/* \u2500\u2500 Drop overlay (content-area and dock-strip indicators) */\n.mb-drop-overlay {\n position: fixed;\n pointer-events: none;\n z-index: 999998;\n display: none;\n box-sizing: border-box;\n border-radius: 6px;\n transition: opacity 0.1s ease-out;\n}\n\n.mb-drop-overlay[data-zone=\"center\"] {\n background: var(--_drop-center-bg);\n border: 2px solid var(--_drop-border);\n}\n\n.mb-drop-overlay[data-zone=\"top\"],\n.mb-drop-overlay[data-zone=\"bottom\"],\n.mb-drop-overlay[data-zone=\"left\"],\n.mb-drop-overlay[data-zone=\"right\"] {\n background: var(--_drop-split-bg);\n border: 2px solid var(--_drop-border);\n}\n\n/* \u2500\u2500 Iframe pointer-event guard during drag \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\nhtml.mb-dragging iframe,\nhtml.mb-dragging webview {\n pointer-events: none !important;\n}\n\n/* \u2500\u2500 Tab pop-out button \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.mb-tab-popout {\n width: 18px;\n height: 18px;\n padding: 0;\n border: none;\n background: transparent;\n color: inherit;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 3px;\n opacity: 0;\n transition: opacity 0.15s, background 0.15s;\n}\n\n.mb-tab:hover .mb-tab-popout {\n opacity: 0.7;\n}\n\n.mb-tab-popout:hover {\n opacity: 1 !important;\n background: var(--_button-hover-bg);\n}\n\n.mb-tab-popout svg {\n width: 12px;\n height: 12px;\n}\n\n/* Hide pop-out button on main group (never floats), when overlay\n has 0 or 1 total tabs (nothing to pop out), and when floating is disallowed. */\n.mb-group[data-main-group=\"true\"] .mb-tab-popout,\n.mb-floating-overlay[data-total-tab-count=\"0\"] .mb-tab-popout,\n.mb-floating-overlay[data-total-tab-count=\"1\"] .mb-tab-popout,\n.mb-group[data-allow-floating=\"false\"] .mb-tab-popout {\n display: none !important;\n}\n\n\n/* \u2500\u2500 Iframe portal layer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n/* MUST NOT create a stacking context \u2014 portal entries' z-indexes\n must compete with floating overlays in the parent stacking context.\n position: absolute + no z-index achieves this. */\n.mb-iframe-portal-layer {\n position: absolute;\n width: 0;\n height: 0;\n overflow: visible;\n pointer-events: none;\n}\n.mb-iframe-portal {\n position: fixed;\n pointer-events: auto;\n overflow: hidden;\n}\n\n/* \u2500\u2500 Touch device adjustments \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n@media (hover: none) {\n .mb-tab-close {\n opacity: 0.5;\n }\n\n .mb-tab-popout {\n opacity: 0.5;\n }\n\n .mb-tab:hover .mb-tab-close,\n .mb-tab:hover .mb-tab-popout {\n opacity: 0.7;\n }\n}\n\n@media (pointer: coarse) {\n .mb-tab-close,\n .mb-tab-popout {\n width: 24px;\n height: 24px;\n }\n\n .mb-adapt-fork-actions button {\n width: 26px;\n height: 26px;\n }\n\n .mb-adapt-minimized-tab-action {\n width: 28px;\n height: 28px;\n }\n}";
|
|
1
|
+
export declare const PANEL_MANAGER_CSS = "/* ==========================================================================\n Mochabug Adapt Web \u2014 Combined Styles\n Panel Manager CSS + Cap Widget CSS\n ========================================================================== */\n\n:root { --mb-adapt-styles-loaded: 1; }\n\n/* \u2500\u2500 Root \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.mb-adapt {\n position: relative;\n width: 100%;\n height: 100%;\n min-height: inherit;\n display: flex;\n flex-direction: column;\n\n /* Two-layer CSS variables: --_X reads user-set --mb-adapt-X first, falls back to light default */\n --_bg: var(--mb-adapt-bg, transparent);\n --_font: var(--mb-adapt-font, system-ui, -apple-system, sans-serif);\n --_button-hover-bg: var(--mb-adapt-button-hover-bg, rgba(128, 128, 128, 0.2));\n --_separator-active: var(--mb-adapt-separator-active, rgba(59, 130, 246, 0.5));\n --_floating-shadow: var(--mb-adapt-floating-shadow, 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 12px 24px -8px rgba(0, 0, 0, 0.15));\n --_floating-border: var(--mb-adapt-floating-border, none);\n --_floating-backdrop: var(--mb-adapt-floating-backdrop, none);\n --_floating-radius: var(--mb-adapt-floating-radius, 8px);\n --_status-card-bg: var(--mb-adapt-status-card-bg, #ffffff);\n --_status-card-border: var(--mb-adapt-status-card-border, #e5e7eb);\n --_status-card-shadow: var(--mb-adapt-status-card-shadow, 0 4px 24px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04));\n --_status-icon-bg: var(--mb-adapt-status-icon-bg, #fef2f2);\n --_status-icon-stopped-bg: var(--mb-adapt-status-icon-stopped-bg, var(--mb-adapt-status-icon-bg, #f3f4f6));\n --_status-text: var(--mb-adapt-status-text, #374151);\n --_drag-ghost-shadow: var(--mb-adapt-drag-ghost-shadow, 0 4px 12px rgba(0, 0, 0, 0.15));\n --_border-radius: var(--mb-adapt-border-radius, 8px);\n --mb-adapt-responsive-breakpoint: 768;\n --mb-adapt-responsive-hysteresis: 40;\n\n /* Cap.js widget variables */\n --_cap-background: var(--mb-adapt-cap-background, #ffffff);\n --_cap-border-color: var(--mb-adapt-cap-border-color, #e2e8f0);\n --_cap-border-radius: var(--mb-adapt-cap-border-radius, 16px);\n --_cap-height: var(--mb-adapt-cap-height, 72px);\n --_cap-width: var(--mb-adapt-cap-width, 380px);\n --_cap-padding: var(--mb-adapt-cap-padding, 20px 28px);\n --_cap-gap: var(--mb-adapt-cap-gap, 20px);\n --_cap-color: var(--mb-adapt-cap-color, #1e293b);\n --_cap-checkbox-size: var(--mb-adapt-cap-checkbox-size, 36px);\n --_cap-checkbox-border: var(--mb-adapt-cap-checkbox-border, 2px solid #cbd5e1);\n --_cap-checkbox-radius: var(--mb-adapt-cap-checkbox-radius, 10px);\n --_cap-checkbox-background: var(--mb-adapt-cap-checkbox-background, #f8fafc);\n --_cap-spinner-color: var(--mb-adapt-cap-spinner-color, #6366f1);\n --_cap-spinner-bg: var(--mb-adapt-cap-spinner-bg, #e2e8f0);\n --_cap-font: var(--mb-adapt-cap-font, inherit);\n --_cap-spinner-thickness: var(--mb-adapt-cap-spinner-thickness, 3px);\n --_cap-shadow: var(--mb-adapt-cap-shadow, 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04));\n --_cap-shadow-hover: var(--mb-adapt-cap-shadow-hover, 0 8px 30px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06));\n\n /* Fork panel theming */\n --_fork-bg: var(--mb-adapt-fork-bg, #ffffff);\n --_fork-tab-bg: var(--mb-adapt-fork-tab-bg, #f3f3f3);\n --_fork-tab-active-bg: var(--mb-adapt-fork-tab-active-bg, #ffffff);\n --_fork-tab-color: var(--mb-adapt-fork-tab-color, rgb(51, 51, 51));\n --_fork-tab-inactive-color: var(--mb-adapt-fork-tab-inactive-color, rgba(51, 51, 51, 0.7));\n --_fork-separator: var(--mb-adapt-fork-separator, rgba(128, 128, 128, 0.35));\n\n /* Tab shape */\n --_tab-radius: var(--mb-adapt-tab-radius, 0);\n --_tab-shadow: var(--mb-adapt-tab-shadow, none);\n --_tab-active-shadow: var(--mb-adapt-tab-active-shadow, none);\n --_tab-gap: var(--mb-adapt-tab-gap, 0px);\n --_tab-padding: var(--mb-adapt-tab-padding, 0 14px);\n --_tab-font-size: var(--mb-adapt-tab-font-size, 13px);\n --_tab-min-width: var(--mb-adapt-tab-min-width, 100px);\n --_tab-spacing: var(--mb-adapt-tab-spacing, 6px);\n --_toolbar-height: var(--mb-adapt-toolbar-height, 40px);\n --_toolbar-padding: var(--mb-adapt-toolbar-padding, 0);\n\n /* Drop targets \u2014 light defaults */\n --_drop-header-bg: var(--mb-adapt-drop-header-bg, rgba(99, 102, 241, 0.18));\n --_drop-center-bg: var(--mb-adapt-drop-center-bg, rgba(99, 102, 241, 0.12));\n --_drop-split-bg: var(--mb-adapt-drop-split-bg, rgba(99, 102, 241, 0.14));\n --_drop-border: var(--mb-adapt-drop-border, rgba(99, 102, 241, 0.55));\n\n background: var(--_bg);\n}\n\n.mb-adapt--dark {\n /* Cap.js widget dark mode */\n --_cap-background: var(--mb-adapt-cap-background, #1e293b);\n --_cap-border-color: var(--mb-adapt-cap-border-color, #334155);\n --_cap-color: var(--mb-adapt-cap-color, #f1f5f9);\n --_cap-checkbox-border: var(--mb-adapt-cap-checkbox-border, 2px solid #475569);\n --_cap-checkbox-background: var(--mb-adapt-cap-checkbox-background, #0f172a);\n --_cap-spinner-color: var(--mb-adapt-cap-spinner-color, #818cf8);\n --_cap-spinner-bg: var(--mb-adapt-cap-spinner-bg, #334155);\n --_cap-shadow: var(--mb-adapt-cap-shadow, 0 4px 20px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.15));\n --_cap-shadow-hover: var(--mb-adapt-cap-shadow-hover, 0 8px 30px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.2));\n\n /* Status card dark mode */\n --_status-card-bg: var(--mb-adapt-status-card-bg, #1e293b);\n --_status-card-border: var(--mb-adapt-status-card-border, #334155);\n --_status-icon-bg: var(--mb-adapt-status-icon-bg, #351c1c);\n --_status-icon-stopped-bg: var(--mb-adapt-status-icon-stopped-bg, var(--mb-adapt-status-icon-bg, #1e293b));\n --_status-text: var(--mb-adapt-status-text, #e2e8f0);\n\n /* Panel dark mode overrides */\n --_button-hover-bg: var(--mb-adapt-button-hover-bg, rgba(128, 128, 128, 0.3));\n --_separator-active: var(--mb-adapt-separator-active, rgba(99, 130, 246, 0.6));\n --_floating-shadow: var(--mb-adapt-floating-shadow, 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 12px 24px -8px rgba(0, 0, 0, 0.3));\n --_floating-border: var(--mb-adapt-floating-border, 1px solid rgba(255, 255, 255, 0.06));\n --_status-card-shadow: var(--mb-adapt-status-card-shadow, 0 4px 24px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.15));\n --_drag-ghost-shadow: var(--mb-adapt-drag-ghost-shadow, 0 4px 12px rgba(0, 0, 0, 0.35));\n\n /* Fork panel dark mode */\n --_fork-bg: var(--mb-adapt-fork-bg, #1e1e1e);\n --_fork-tab-bg: var(--mb-adapt-fork-tab-bg, #252526);\n --_fork-tab-active-bg: var(--mb-adapt-fork-tab-active-bg, #1e1e1e);\n --_fork-tab-color: var(--mb-adapt-fork-tab-color, #ffffff);\n --_fork-tab-inactive-color: var(--mb-adapt-fork-tab-inactive-color, #969696);\n --_fork-separator: var(--mb-adapt-fork-separator, rgb(68, 68, 68));\n\n /* Drop target dark mode */\n --_drop-header-bg: var(--mb-adapt-drop-header-bg, rgba(129, 140, 248, 0.22));\n --_drop-center-bg: var(--mb-adapt-drop-center-bg, rgba(129, 140, 248, 0.15));\n --_drop-split-bg: var(--mb-adapt-drop-split-bg, rgba(129, 140, 248, 0.18));\n --_drop-border: var(--mb-adapt-drop-border, rgba(129, 140, 248, 0.6));\n}\n\n/* \u2500\u2500 Layout (recursive split tree) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.mb-layout {\n flex: 1;\n min-height: 0;\n position: relative;\n display: flex;\n}\n\n.mb-split-container {\n display: flex;\n min-width: 0;\n min-height: 0;\n}\n\n.mb-split-horizontal { flex-direction: row; }\n.mb-split-vertical { flex-direction: column; }\n\n.mb-split-leaf {\n min-width: 0;\n min-height: 0;\n overflow: hidden;\n}\n\n/* Animated flex transition \u2014 applied temporarily during dock/undock/maximize */\n.mb-split-leaf--animating {\n transition: flex 0.25s ease;\n}\n.mb-split-container--animating {\n transition: flex 0.25s ease;\n}\n.mb-layout-separator--animating {\n transition: opacity 0.25s ease;\n}\n\n/* Draggable separator between split panels */\n.mb-layout-separator {\n flex: 0 0 5px;\n background: var(--_fork-separator);\n transition: background 0.15s;\n position: relative;\n z-index: 1;\n touch-action: none;\n}\n\n.mb-layout-separator-v { cursor: col-resize; }\n.mb-layout-separator-h { cursor: row-resize; }\n\n.mb-layout-separator:hover,\n.mb-layout-separator--active {\n background: var(--_separator-active);\n}\n\n/* \u2500\u2500 Group \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.mb-group {\n display: flex;\n flex-direction: column;\n height: 100%;\n background: var(--_bg);\n}\n\n.mb-group-header {\n display: flex;\n align-items: stretch;\n height: var(--_toolbar-height);\n min-height: var(--_toolbar-height);\n padding: var(--_toolbar-padding);\n background: var(--_fork-tab-bg);\n border-bottom: 1px solid var(--_fork-separator);\n user-select: none;\n}\n\n.mb-group-header-prefix {\n display: flex;\n align-items: stretch;\n}\n\n.mb-group-tabs {\n display: flex;\n align-items: stretch;\n overflow-x: auto;\n overflow-y: hidden;\n flex: 0 1 auto;\n min-width: 0;\n}\n\n.mb-group-tabs::-webkit-scrollbar {\n height: 2px;\n}\n\n/* Drag handle \u2014 fills remaining header space so the user can grab it */\n.mb-group-header-void {\n flex: 1;\n min-width: 40px;\n touch-action: none;\n}\n\n.mb-group-header-actions {\n display: flex;\n align-items: center;\n}\n\n.mb-group-content {\n flex: 1;\n position: relative;\n overflow: hidden;\n background: var(--_fork-bg);\n}\n\n/* Main group overrides */\n.mb-group[data-main-group=\"true\"] {\n background: var(--_bg);\n}\n\n.mb-group[data-main-group=\"true\"] .mb-group-content {\n background: var(--_fork-bg);\n}\n\n\n/* \u2500\u2500 Tab \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.mb-tab {\n display: flex;\n align-items: center;\n gap: var(--_tab-spacing);\n padding: var(--_tab-padding);\n min-width: var(--_tab-min-width);\n font-size: var(--_tab-font-size);\n font-family: var(--_font);\n white-space: nowrap;\n cursor: pointer;\n touch-action: none;\n color: var(--_fork-tab-inactive-color);\n background: var(--_fork-tab-bg);\n border-right: 1px solid var(--_fork-separator);\n border-radius: var(--_tab-radius);\n box-shadow: var(--_tab-shadow);\n margin: var(--_tab-gap);\n transition: background 0.15s, box-shadow 0.15s;\n}\n\n.mb-tab[data-active=\"true\"] {\n color: var(--_fork-tab-color);\n background: var(--_fork-tab-active-bg);\n box-shadow: var(--_tab-active-shadow);\n}\n\n.mb-tab:hover {\n background: var(--_fork-tab-active-bg);\n}\n\n.mb-tab-label {\n display: flex;\n align-items: center;\n}\n\n.mb-tab-label svg {\n width: 14px;\n height: 14px;\n opacity: 0.7;\n flex-shrink: 0;\n}\n\n.mb-tab[data-active=\"true\"] .mb-tab-label svg {\n opacity: 1;\n}\n\n.mb-tab-actions {\n display: flex;\n align-items: center;\n gap: 2px;\n width: 40px;\n flex-shrink: 0;\n justify-content: flex-end;\n margin-left: auto;\n}\n\n.mb-tab-close {\n width: 18px;\n height: 18px;\n padding: 0;\n border: none;\n background: transparent;\n color: inherit;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 3px;\n opacity: 0;\n transition: opacity 0.15s, background 0.15s;\n}\n\n.mb-tab:hover .mb-tab-close {\n opacity: 0.7;\n}\n\n.mb-tab-close:hover {\n opacity: 1 !important;\n background: var(--_button-hover-bg);\n}\n\n.mb-tab-close svg {\n width: 12px;\n height: 12px;\n}\n\n/* \u2500\u2500 Panel visibility \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.mb-panel {\n width: 100%;\n height: 100%;\n position: absolute;\n inset: 0;\n}\n\n.mb-panel[data-active=\"false\"] {\n display: none;\n}\n\n.mb-panel[data-active=\"true\"] {\n display: block;\n}\n\n/* \u2500\u2500 Floating overlay \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.mb-floating-overlay {\n position: fixed;\n z-index: 100000;\n box-shadow: var(--_floating-shadow);\n border: var(--_floating-border);\n backdrop-filter: var(--_floating-backdrop);\n -webkit-backdrop-filter: var(--_floating-backdrop);\n border-radius: var(--_floating-radius);\n display: flex;\n flex-direction: column;\n /* No overflow:hidden here \u2014 resize handles use negative offsets (top:-3px etc.)\n and would be clipped. The inner .mb-group already has overflow:hidden for\n its own border-radius clipping. */\n}\n\n.mb-floating-overlay > .mb-group {\n flex: 1;\n border-radius: var(--_floating-radius);\n overflow: hidden;\n}\n\n/* Internal split layout inside a floating overlay */\n.mb-floating-overlay > .mb-layout {\n position: relative;\n inset: auto;\n height: auto;\n flex: 1;\n min-width: 0;\n min-height: 0;\n border-radius: var(--_floating-radius);\n overflow: hidden;\n}\n\n.mb-floating-maximized {\n border-radius: 0;\n box-shadow: none;\n}\n\n.mb-floating-maximized .mb-group {\n border-radius: 0;\n}\n\n.mb-floating-maximized .mb-resize-handle {\n display: none !important;\n}\n\n.mb-floating-maximized .mb-group-header-void {\n pointer-events: none;\n}\n\n/* \u2500\u2500 Resize handles \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.mb-resize-handle {\n position: absolute;\n z-index: 10;\n touch-action: none;\n}\n\n.mb-resize-n { top: -3px; left: 8px; right: 8px; height: 6px; cursor: n-resize; }\n.mb-resize-s { bottom: -3px; left: 8px; right: 8px; height: 6px; cursor: s-resize; }\n.mb-resize-e { right: -3px; top: 8px; bottom: 8px; width: 6px; cursor: e-resize; }\n.mb-resize-w { left: -3px; top: 8px; bottom: 8px; width: 6px; cursor: w-resize; }\n.mb-resize-ne { top: -3px; right: -3px; width: 12px; height: 12px; cursor: ne-resize; }\n.mb-resize-nw { top: -3px; left: -3px; width: 12px; height: 12px; cursor: nw-resize; }\n.mb-resize-se { bottom: -3px; right: -3px; width: 12px; height: 12px; cursor: se-resize; }\n.mb-resize-sw { bottom: -3px; left: -3px; width: 12px; height: 12px; cursor: sw-resize; }\n\n/* \u2500\u2500 Iframe styling \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.mb-adapt__iframe {\n width: 100%;\n height: 100%;\n min-height: 0;\n border: 0;\n display: block;\n background: transparent;\n border-radius: var(--_border-radius);\n pointer-events: auto;\n opacity: 0;\n transition: opacity 0.1s ease-out;\n}\n\n.mb-adapt__iframe--visible {\n opacity: 1;\n}\n\n.mb-adapt__iframe--hidden {\n display: none;\n}\n\n/* \u2500\u2500 Status message overlay \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.mb-adapt__status-message {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 200000;\n background: transparent;\n pointer-events: none;\n}\n\n.mb-adapt__status-card {\n pointer-events: auto;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 16px;\n padding: 32px 40px;\n max-width: 380px;\n border-radius: 16px;\n background: var(--_status-card-bg);\n border: 1px solid var(--_status-card-border);\n box-shadow: var(--_status-card-shadow);\n font-family: var(--_font);\n text-align: center;\n}\n\n.mb-adapt__status-icon {\n width: 48px;\n height: 48px;\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--_status-icon-bg);\n}\n\n.mb-adapt__status-icon svg {\n width: 24px;\n height: 24px;\n}\n\n.mb-adapt__status-icon--stopped {\n background: var(--_status-icon-stopped-bg);\n}\n\n.mb-adapt__status-text {\n color: var(--_status-text);\n font-size: 15px;\n line-height: 1.5;\n margin: 0;\n}\n\n.mb-adapt__status-restart {\n padding: 8px 20px;\n border: 1px solid var(--_status-card-border);\n border-radius: 8px;\n background: transparent;\n color: var(--_status-text);\n font-size: 14px;\n font-weight: 500;\n font-family: var(--_font);\n cursor: pointer;\n transition: background 0.15s, border-color 0.15s;\n}\n\n.mb-adapt__status-restart:hover {\n background: var(--_status-card-border);\n}\n\n/* \u2500\u2500 Confirm-on-close dialog \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mb-adapt__confirm-overlay {\n position: fixed;\n inset: 0;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n z-index: 300000;\n background: rgba(0, 0, 0, 0.4);\n height: auto;\n min-height: 0;\n}\n\n.mb-adapt--dark.mb-adapt__confirm-overlay {\n background: rgba(0, 0, 0, 0.55);\n}\n\n.mb-adapt__confirm-card {\n display: flex;\n flex-direction: column;\n align-items: stretch;\n gap: 16px;\n padding: 24px 28px;\n max-width: 360px;\n width: 100%;\n border-radius: var(--_floating-radius);\n background: var(--_fork-tab-active-bg);\n border: 1px solid var(--_fork-separator);\n box-shadow: var(--_floating-shadow);\n font-family: var(--_font);\n text-align: center;\n}\n\n.mb-adapt__confirm-text {\n font-size: 14px;\n line-height: 1.5;\n color: var(--_fork-tab-color);\n margin: 0;\n}\n\n.mb-adapt__confirm-buttons {\n display: flex;\n gap: 8px;\n justify-content: flex-end;\n}\n\n.mb-adapt__confirm-btn {\n padding: 8px 16px;\n border-radius: 6px;\n font-size: 13px;\n font-family: var(--_font);\n cursor: pointer;\n font-weight: 500;\n transition: background 0.15s, border-color 0.15s;\n}\n\n.mb-adapt__confirm-btn--cancel {\n background: transparent;\n border: 1px solid var(--_fork-separator);\n color: var(--_fork-tab-color);\n}\n\n.mb-adapt__confirm-btn--cancel:hover {\n background: var(--_button-hover-bg);\n}\n\n.mb-adapt__confirm-btn--confirm {\n background: var(--_fork-tab-color);\n color: var(--_fork-tab-active-bg);\n border: 1px solid transparent;\n}\n\n.mb-adapt__confirm-btn--confirm:hover {\n opacity: 0.85;\n}\n\n/* \u2500\u2500 Cap.js widget positioning \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.mb-adapt-cap {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n pointer-events: none;\n z-index: 200000;\n}\n\n.mb-adapt-cap > * {\n pointer-events: auto;\n}\n\n/* Cap.js widget styling */\n.mb-adapt cap-widget {\n --cap-background: var(--_cap-background);\n --cap-border-color: var(--_cap-border-color);\n --cap-border-radius: var(--_cap-border-radius);\n --cap-widget-height: var(--_cap-height);\n --cap-widget-width: var(--_cap-width);\n --cap-widget-padding: var(--_cap-padding);\n --cap-gap: var(--_cap-gap);\n --cap-color: var(--_cap-color);\n --cap-checkbox-size: var(--_cap-checkbox-size);\n --cap-checkbox-border: var(--_cap-checkbox-border);\n --cap-checkbox-border-radius: var(--_cap-checkbox-radius);\n --cap-checkbox-background: var(--_cap-checkbox-background);\n --cap-checkbox-margin: 0;\n --cap-font: var(--_cap-font);\n --cap-spinner-color: var(--_cap-spinner-color);\n --cap-spinner-background-color: var(--_cap-spinner-bg);\n --cap-spinner-thickness: var(--_cap-spinner-thickness);\n}\n\n/* Hide Cap.js credits */\ncap-widget::part(attribution) {\n display: none;\n}\n\n/* \u2500\u2500 Fork group action buttons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.mb-adapt-fork-actions {\n display: flex;\n align-items: center;\n gap: 2px;\n padding-right: 4px;\n}\n.mb-adapt-fork-actions button {\n width: 20px;\n height: 20px;\n padding: 0;\n border: none;\n background: transparent;\n color: var(--_fork-tab-color);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 3px;\n opacity: 0.7;\n transition: opacity 0.15s, background 0.15s;\n}\n.mb-adapt-fork-actions button:hover {\n opacity: 1;\n background: var(--_button-hover-bg);\n}\n.mb-adapt-fork-actions button svg {\n width: 14px;\n height: 14px;\n}\n\n/* \u2500\u2500 Minimized-group tabs bar (at the top, NOT an overlay) \u2500\u2500\u2500 */\n/* Sits at the top of .mb-adapt as a normal flow element so the layout\n underneath shrinks to accommodate it. This prevents scrollbars when\n docked panels are minimized \u2014 the iframe gets the remaining height. */\n.mb-adapt-minimized-tabs {\n display: none;\n height: var(--_toolbar-height);\n flex-shrink: 0;\n z-index: 100;\n align-items: stretch;\n background: var(--_fork-tab-bg);\n border-bottom: 1px solid var(--_fork-separator);\n user-select: none;\n}\n.mb-adapt-minimized-tab {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 0 12px;\n flex: 1;\n background: var(--_fork-tab-bg);\n color: var(--_fork-tab-color);\n font-size: var(--_tab-font-size);\n font-family: var(--_font);\n white-space: nowrap;\n border-right: 1px solid var(--_fork-separator);\n cursor: default;\n}\n.mb-adapt-minimized-tab-label {\n flex: 1;\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.mb-adapt-minimized-tab-label svg {\n width: 14px;\n height: 14px;\n opacity: 0.8;\n flex-shrink: 0;\n}\n.mb-adapt-minimized-tab-action {\n width: 22px;\n height: 22px;\n padding: 0;\n border: none;\n background: transparent;\n color: inherit;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n opacity: 0.6;\n transition: opacity 0.15s, background 0.15s;\n}\n.mb-adapt-minimized-tab-action:hover {\n opacity: 1;\n background: var(--_button-hover-bg);\n}\n.mb-adapt-minimized-tab-action svg {\n width: 14px;\n height: 14px;\n}\n\n/* Minimized tab drag handle cursor */\n.mb-adapt-minimized-tab {\n cursor: grab;\n touch-action: none;\n}\n\n/* Drop target highlight for minimized tab merge */\n.mb-adapt-minimized-tab--drop-target {\n background: var(--_drop-header-bg) !important;\n box-shadow: inset 0 0 0 2px var(--_drop-border);\n}\n\n/* \u2500\u2500 Pointer-drag ghost element \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.mb-drag-ghost {\n position: fixed;\n pointer-events: none;\n z-index: 999999;\n padding: 4px 10px;\n background: var(--_fork-tab-bg);\n color: var(--_fork-tab-color);\n border: 1px solid var(--_fork-separator);\n border-radius: var(--_tab-radius, 4px);\n font-size: var(--_tab-font-size);\n font-family: var(--_font);\n white-space: nowrap;\n box-shadow: var(--_drag-ghost-shadow);\n opacity: 0.92;\n display: flex;\n align-items: center;\n}\n\n.mb-drag-ghost svg {\n width: 16px;\n height: 16px;\n}\n\n/* \u2500\u2500 Drop target highlight on group header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.mb-group-header--drop-target {\n background: var(--_drop-header-bg) !important;\n box-shadow: inset 0 0 0 2px var(--_drop-border);\n}\n\n/* \u2500\u2500 Drop overlay (content-area and dock-strip indicators) */\n.mb-drop-overlay {\n position: fixed;\n pointer-events: none;\n z-index: 999998;\n display: none;\n box-sizing: border-box;\n border-radius: 6px;\n transition: opacity 0.1s ease-out;\n}\n\n.mb-drop-overlay[data-zone=\"center\"] {\n background: var(--_drop-center-bg);\n border: 2px solid var(--_drop-border);\n}\n\n.mb-drop-overlay[data-zone=\"top\"],\n.mb-drop-overlay[data-zone=\"bottom\"],\n.mb-drop-overlay[data-zone=\"left\"],\n.mb-drop-overlay[data-zone=\"right\"] {\n background: var(--_drop-split-bg);\n border: 2px solid var(--_drop-border);\n}\n\n/* \u2500\u2500 Iframe pointer-event guard during drag \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\nhtml.mb-dragging iframe,\nhtml.mb-dragging webview {\n pointer-events: none !important;\n}\n\n/* \u2500\u2500 Tab pop-out button \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.mb-tab-popout {\n width: 18px;\n height: 18px;\n padding: 0;\n border: none;\n background: transparent;\n color: inherit;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 3px;\n opacity: 0;\n transition: opacity 0.15s, background 0.15s;\n}\n\n.mb-tab:hover .mb-tab-popout {\n opacity: 0.7;\n}\n\n.mb-tab-popout:hover {\n opacity: 1 !important;\n background: var(--_button-hover-bg);\n}\n\n.mb-tab-popout svg {\n width: 12px;\n height: 12px;\n}\n\n/* Hide pop-out button on main group (never floats), when overlay\n has 0 or 1 total tabs (nothing to pop out), and when floating is disallowed. */\n.mb-group[data-main-group=\"true\"] .mb-tab-popout,\n.mb-floating-overlay[data-total-tab-count=\"0\"] .mb-tab-popout,\n.mb-floating-overlay[data-total-tab-count=\"1\"] .mb-tab-popout,\n.mb-group[data-allow-floating=\"false\"] .mb-tab-popout {\n display: none !important;\n}\n\n\n/* \u2500\u2500 Iframe portal layer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n/* MUST NOT create a stacking context \u2014 portal entries' z-indexes\n must compete with floating overlays in the parent stacking context.\n position: absolute + no z-index achieves this. */\n.mb-iframe-portal-layer {\n position: absolute;\n width: 0;\n height: 0;\n overflow: visible;\n pointer-events: none;\n}\n.mb-iframe-portal {\n position: fixed;\n pointer-events: auto;\n overflow: hidden;\n}\n\n/* \u2500\u2500 Touch device adjustments \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n@media (hover: none) {\n .mb-tab-close {\n opacity: 0.5;\n }\n\n .mb-tab-popout {\n opacity: 0.5;\n }\n\n .mb-tab:hover .mb-tab-close,\n .mb-tab:hover .mb-tab-popout {\n opacity: 0.7;\n }\n}\n\n@media (pointer: coarse) {\n .mb-tab-close,\n .mb-tab-popout {\n width: 24px;\n height: 24px;\n }\n\n .mb-adapt-fork-actions button {\n width: 26px;\n height: 26px;\n }\n\n .mb-adapt-minimized-tab-action {\n width: 28px;\n height: 28px;\n }\n}";
|
|
@@ -4324,7 +4324,7 @@ var MbAdapt = (() => {
|
|
|
4324
4324
|
// src/cap-adapter.ts
|
|
4325
4325
|
if (typeof window !== "undefined" && true && !window.CAP_CUSTOM_WASM_URL) {
|
|
4326
4326
|
window.CAP_CUSTOM_WASM_URL = new URL(
|
|
4327
|
-
"https://cdn.mochabug.com/adapt/web/1.0.1-rc.
|
|
4327
|
+
"https://cdn.mochabug.com/adapt/web/1.0.1-rc.15/cap_wasm.js",
|
|
4328
4328
|
window.location.href
|
|
4329
4329
|
).href;
|
|
4330
4330
|
}
|
|
Binary file
|