@mochabug/adapt-web 1.0.0-rc62 → 1.0.0-rc63

package/dist/esm/index.js

@@ -40,6 +40,7 @@ export function clearPersistedState(automationId, storage = "both") {
  */
 const DEFAULT_STYLES = `
 .mb-adapt {
+  position: relative;
   width: 100%;
   min-height: inherit;
   display: flex;
@@ -566,16 +567,18 @@ cap-widget::part(attribution) {
 }
 
 .mb-adapt__status-message {
+  position: absolute;
+  inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 100%;
-  height: 100%;
-  min-height: 200px;
+  z-index: 1;
   background: transparent;
+  pointer-events: none;
 }
 
 .mb-adapt__status-card {
+  pointer-events: auto;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -2174,7 +2177,8 @@ export class AdaptWebClient {
         this.statusMessageElement.className =
             this.options.classNames?.statusMessage ?? "mb-adapt__status-message";
         const card = document.createElement("div");
-        card.className = "mb-adapt__status-card";
+        card.className =
+            this.options.classNames?.statusCard ?? "mb-adapt__status-card";
         // Icon
         const iconWrap = document.createElement("div");
         iconWrap.className =
@@ -2192,10 +2196,8 @@ export class AdaptWebClient {
         msg.textContent = text;
         card.appendChild(msg);
         this.statusMessageElement.appendChild(card);
-        const parent = this.mainFrameElement || this.mainContainer;
-        // Ensure the parent frame is visible so the status message can be seen
-        parent.classList.remove("mb-adapt__frame--hidden");
-        parent.appendChild(this.statusMessageElement);
+        // Append to root element so it overlays the entire container, centered
+        this.rootElement.appendChild(this.statusMessageElement);
     }
     removeStatusMessage() {
         if (this.statusMessageElement) {

package/dist/types/types.d.ts

@@ -361,8 +361,10 @@ export interface AdaptWebClientOptions {
         dragHandle?: string;
         /** Expand button for collapsed panels. Default: `'mb-adapt__expand-button'` */
         expandButton?: string;
-        /** Status message overlay (stopped / error). Default: `'mb-adapt__status-message'` */
+        /** Status message overlay container. Default: `'mb-adapt__status-message'` */
         statusMessage?: string;
+        /** Status card inside the overlay. Default: `'mb-adapt__status-card'` */
+        statusCard?: string;
         /** Fork toolbar container. Default: `'mb-adapt__toolbar'` */
         toolbar?: string;
         /** Fork toolbar title text. Default: `'mb-adapt__toolbar-title'` */

package/dist/umd/adapt-web.js

@@ -7549,7 +7549,7 @@ var MbAdapt = (() => {
   // src/index.ts
   if (typeof window !== "undefined" && true && !window.CAP_CUSTOM_WASM_URL) {
     window.CAP_CUSTOM_WASM_URL = new URL(
-      "https://cdn.mochabug.com/adapt/web/1.0.0-rc62/cap_wasm.js",
+      "https://cdn.mochabug.com/adapt/web/1.0.0-rc63/cap_wasm.js",
       window.location.href
     ).href;
   }
@@ -7564,6 +7564,7 @@ var MbAdapt = (() => {
   }
   var DEFAULT_STYLES = `
 .mb-adapt {
+  position: relative;
   width: 100%;
   min-height: inherit;
   display: flex;
@@ -8090,16 +8091,18 @@ cap-widget::part(attribution) {
 }
 
 .mb-adapt__status-message {
+  position: absolute;
+  inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 100%;
-  height: 100%;
-  min-height: 200px;
+  z-index: 1;
   background: transparent;
+  pointer-events: none;
 }
 
 .mb-adapt__status-card {
+  pointer-events: auto;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -9423,7 +9426,7 @@ cap-widget::part(attribution) {
       this.statusMessageElement = document.createElement("div");
       this.statusMessageElement.className = this.options.classNames?.statusMessage ?? "mb-adapt__status-message";
       const card = document.createElement("div");
-      card.className = "mb-adapt__status-card";
+      card.className = this.options.classNames?.statusCard ?? "mb-adapt__status-card";
       const iconWrap = document.createElement("div");
       iconWrap.className = kind === "stopped" ? "mb-adapt__status-icon mb-adapt__status-icon--stopped" : "mb-adapt__status-icon";
       iconWrap.innerHTML = kind === "stopped" ? `<svg viewBox="0 0 24 24" fill="none" stroke="#6b7280" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="6" width="12" height="12" rx="2"/></svg>` : `<svg viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>`;
@@ -9433,9 +9436,7 @@ cap-widget::part(attribution) {
       msg.textContent = text;
       card.appendChild(msg);
       this.statusMessageElement.appendChild(card);
-      const parent = this.mainFrameElement || this.mainContainer;
-      parent.classList.remove("mb-adapt__frame--hidden");
-      parent.appendChild(this.statusMessageElement);
+      this.rootElement.appendChild(this.statusMessageElement);
     }
     removeStatusMessage() {
       if (this.statusMessageElement) {