@mochabug/adapt-web 1.0.0-rc43 → 1.0.0-rc44

package/dist/esm/index.js

@@ -36,9 +36,14 @@ const DEFAULT_STYLES = `
   --mb-adapt-dialog-z: 1000;
   --mb-adapt-dialog-width: 80%;
   --mb-adapt-dialog-height: 80%;
-  --mb-adapt-drag-handle-width: 6px;
-  --mb-adapt-drag-handle-color: #d1d5db;
-  --mb-adapt-drag-handle-hover: #6b7280;
+  --mb-adapt-drag-handle-width: 8px;
+  --mb-adapt-drag-handle-color: #cbd5e1;
+  --mb-adapt-drag-handle-hover: #94a3b8;
+  --mb-adapt-toolbar-height: 32px;
+  --mb-adapt-toolbar-bg: rgba(249, 250, 251, 0.85);
+  --mb-adapt-toolbar-border: #e5e7eb;
+  --mb-adapt-toolbar-color: #6b7280;
+  --mb-adapt-toolbar-btn-hover: #e5e7eb;
   --mb-adapt-banner-height: 40px;
   --mb-adapt-banner-bg: #f9fafb;
   --mb-adapt-banner-border: #e5e7eb;
@@ -70,8 +75,12 @@ const DEFAULT_STYLES = `
   --mb-adapt-dialog-bg: #1f2937;
   --mb-adapt-banner-bg: #111827;
   --mb-adapt-banner-border: #374151;
-  --mb-adapt-drag-handle-color: #4b5563;
-  --mb-adapt-drag-handle-hover: #6b7280;
+  --mb-adapt-drag-handle-color: #475569;
+  --mb-adapt-drag-handle-hover: #64748b;
+  --mb-adapt-toolbar-bg: rgba(17, 24, 39, 0.85);
+  --mb-adapt-toolbar-border: #374151;
+  --mb-adapt-toolbar-color: #9ca3af;
+  --mb-adapt-toolbar-btn-hover: #374151;
   --mb-adapt-button-color: #e5e7eb;
   --mb-adapt-button-hover-bg: #374151;
 
@@ -121,12 +130,6 @@ const DEFAULT_STYLES = `
   transition: opacity 0.1s ease-out;
 }
 
-/* When inside main-container (dialog mode), allow iframe to size itself */
-.mb-adapt__main-container .mb-adapt__iframe {
-  height: auto;
-  min-height: 300px;
-}
-
 .mb-adapt__iframe--visible {
   opacity: 1;
 }
@@ -143,11 +146,32 @@ const DEFAULT_STYLES = `
   background-color: var(--mb-adapt-drag-handle-color);
   cursor: ew-resize;
   z-index: 10;
-  transition: background-color 0.2s, left 0.15s ease-out;
+  transition: background-color 0.2s, left 0.15s ease-out, box-shadow 0.2s;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04);
+}
+
+.mb-adapt__drag-handle::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 4px;
+  height: 24px;
+  background-image: radial-gradient(circle, currentColor 1px, transparent 1px);
+  background-size: 4px 6px;
+  background-position: center;
+  opacity: 0.5;
+  color: var(--mb-adapt-drag-handle-hover);
 }
 
 .mb-adapt__drag-handle:hover {
   background-color: var(--mb-adapt-drag-handle-hover);
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
+}
+
+.mb-adapt__drag-handle:hover::after {
+  opacity: 0.8;
 }
 
 .mb-adapt__drag-overlay {
@@ -228,43 +252,42 @@ const DEFAULT_STYLES = `
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
-  background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,250,252,0.98) 100%);
-  border: none;
-  color: #64748b;
+  background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(241,245,249,0.98) 100%);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  color: #475569;
   cursor: pointer;
-  width: 14px;
-  height: 48px;
+  width: 22px;
+  height: 64px;
   display: none;
   align-items: center;
   justify-content: center;
   z-index: 100;
   transition: all 0.2s ease-out;
-  font-size: 14px;
+  font-size: 16px;
+  font-weight: 600;
   line-height: 1;
   padding: 0;
   box-shadow:
-    0 2px 8px rgba(0, 0, 0, 0.12),
-    0 1px 3px rgba(0, 0, 0, 0.08),
-    inset 0 1px 0 rgba(255, 255, 255, 0.8);
-  border-radius: 4px;
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
+    0 2px 12px rgba(0, 0, 0, 0.14),
+    0 1px 4px rgba(0, 0, 0, 0.10);
+  border-radius: 6px;
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
 }
 
 .mb-adapt__expand-button:hover {
-  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(241,245,249,1) 100%);
-  color: #475569;
-  transform: translateY(-50%) scale(1.02);
+  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(226,232,240,1) 100%);
+  color: #1e293b;
+  transform: translateY(-50%) scale(1.04);
   box-shadow:
-    0 4px 12px rgba(0, 0, 0, 0.15),
-    0 2px 4px rgba(0, 0, 0, 0.1),
-    inset 0 1px 0 rgba(255, 255, 255, 1);
+    0 4px 16px rgba(0, 0, 0, 0.18),
+    0 2px 6px rgba(0, 0, 0, 0.12);
 }
 
 .mb-adapt__expand-button:active {
-  transform: translateY(-50%) scale(0.98);
+  transform: translateY(-50%) scale(0.97);
   box-shadow:
-    0 1px 4px rgba(0, 0, 0, 0.1),
+    0 1px 4px rgba(0, 0, 0, 0.10),
     0 1px 2px rgba(0, 0, 0, 0.06);
 }
 
@@ -276,83 +299,79 @@ const DEFAULT_STYLES = `
   left: 0;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
+  border-left: none;
   box-shadow:
-    2px 2px 8px rgba(0, 0, 0, 0.12),
-    1px 1px 3px rgba(0, 0, 0, 0.08),
-    inset 0 1px 0 rgba(255, 255, 255, 0.8);
+    2px 2px 12px rgba(0, 0, 0, 0.14),
+    1px 1px 4px rgba(0, 0, 0, 0.10);
 }
 
 .mb-adapt__expand-button--left:hover {
   box-shadow:
-    3px 4px 12px rgba(0, 0, 0, 0.15),
-    2px 2px 4px rgba(0, 0, 0, 0.1),
-    inset 0 1px 0 rgba(255, 255, 255, 1);
+    3px 4px 16px rgba(0, 0, 0, 0.18),
+    2px 2px 6px rgba(0, 0, 0, 0.12);
 }
 
 .mb-adapt__expand-button--right {
   right: 0;
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
+  border-right: none;
   box-shadow:
-    -2px 2px 8px rgba(0, 0, 0, 0.12),
-    -1px 1px 3px rgba(0, 0, 0, 0.08),
-    inset 0 1px 0 rgba(255, 255, 255, 0.8);
+    -2px 2px 12px rgba(0, 0, 0, 0.14),
+    -1px 1px 4px rgba(0, 0, 0, 0.10);
 }
 
 .mb-adapt__expand-button--right:hover {
   box-shadow:
-    -3px 4px 12px rgba(0, 0, 0, 0.15),
-    -2px 2px 4px rgba(0, 0, 0, 0.1),
-    inset 0 1px 0 rgba(255, 255, 255, 1);
+    -3px 4px 16px rgba(0, 0, 0, 0.18),
+    -2px 2px 6px rgba(0, 0, 0, 0.12);
 }
 
 .mb-adapt__expand-button--dialog {
   left: 50%;
   top: 0;
   transform: translateX(-50%);
-  width: 56px;
-  height: 20px;
+  width: 64px;
+  height: 24px;
   font-size: 16px;
-  line-height: 20px;
+  line-height: 24px;
   vertical-align: middle;
   text-align: center;
-  border-radius: 6px;
+  border-radius: 8px;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
+  border-top: none;
   box-shadow:
-    0 3px 8px rgba(0, 0, 0, 0.12),
-    0 1px 3px rgba(0, 0, 0, 0.08),
-    inset 0 1px 0 rgba(255, 255, 255, 0.8);
+    0 3px 12px rgba(0, 0, 0, 0.14),
+    0 1px 4px rgba(0, 0, 0, 0.10);
 }
 
 .mb-adapt__expand-button--dialog:hover {
-  transform: translateX(-50%) scale(1.02);
+  transform: translateX(-50%) scale(1.04);
   box-shadow:
-    0 5px 12px rgba(0, 0, 0, 0.15),
-    0 2px 4px rgba(0, 0, 0, 0.1),
-    inset 0 1px 0 rgba(255, 255, 255, 1);
+    0 5px 16px rgba(0, 0, 0, 0.18),
+    0 2px 6px rgba(0, 0, 0, 0.12);
 }
 
 .mb-adapt__expand-button--dialog:active {
-  transform: translateX(-50%) scale(0.98);
+  transform: translateX(-50%) scale(0.97);
 }
 
 .mb-adapt--dark .mb-adapt__expand-button {
-  background: linear-gradient(180deg, rgba(31,41,55,0.98) 0%, rgba(17,24,39,0.98) 100%);
-  color: #9ca3af;
+  background: linear-gradient(180deg, rgba(51,65,85,0.98) 0%, rgba(30,41,59,0.98) 100%);
+  border-color: rgba(255, 255, 255, 0.1);
+  color: #cbd5e1;
   box-shadow:
-    0 2px 8px rgba(0, 0, 0, 0.3),
-    0 1px 3px rgba(0, 0, 0, 0.2),
-    inset 0 1px 0 rgba(255, 255, 255, 0.1);
+    0 2px 12px rgba(0, 0, 0, 0.35),
+    0 1px 4px rgba(0, 0, 0, 0.25);
 }
 
 .mb-adapt--dark .mb-adapt__expand-button:hover {
-  background: linear-gradient(180deg, rgba(55,65,81,1) 0%, rgba(31,41,55,1) 100%);
-  color: #d1d5db;
+  background: linear-gradient(180deg, rgba(71,85,105,1) 0%, rgba(51,65,85,1) 100%);
+  color: #f1f5f9;
   box-shadow:
-    0 4px 12px rgba(0, 0, 0, 0.4),
-    0 2px 4px rgba(0, 0, 0, 0.3),
-    inset 0 1px 0 rgba(255, 255, 255, 0.15);
+    0 4px 16px rgba(0, 0, 0, 0.45),
+    0 2px 6px rgba(0, 0, 0, 0.35);
 }
 
 .mb-adapt__drag-handle--disabled {
@@ -360,14 +379,90 @@ const DEFAULT_STYLES = `
   opacity: 0.3;
 }
 
+.mb-adapt__frame--has-toolbar {
+  display: flex;
+  flex-direction: column;
+}
+
+.mb-adapt__frame--has-toolbar.mb-adapt__frame--hidden {
+  display: none;
+}
+
+.mb-adapt__frame--has-toolbar .mb-adapt__iframe {
+  flex: 1;
+  height: auto;
+}
+
+.mb-adapt__toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  height: var(--mb-adapt-toolbar-height);
+  background: var(--mb-adapt-toolbar-bg);
+  border-bottom: 1px solid var(--mb-adapt-toolbar-border);
+  padding: 0 4px;
+  flex-shrink: 0;
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  gap: 2px;
+}
+
+.mb-adapt__toolbar-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--mb-adapt-toolbar-color);
+  cursor: pointer;
+  padding: 0;
+  transition: background-color 0.15s, color 0.15s;
+}
+
+.mb-adapt__toolbar-btn:hover {
+  background: var(--mb-adapt-toolbar-btn-hover);
+  color: var(--mb-adapt-button-color);
+}
+
+.mb-adapt__toolbar-btn svg {
+  width: 14px;
+  height: 14px;
+  stroke: currentColor;
+  stroke-width: 2;
+  fill: none;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.mb-adapt__toolbar-btn--exit:hover {
+  background: #fecaca;
+  color: #dc2626;
+}
+
+.mb-adapt--dark .mb-adapt__toolbar-btn--exit:hover {
+  background: rgba(220, 38, 38, 0.2);
+  color: #fca5a5;
+}
+
 .mb-adapt__main-container {
   position: relative;
+  display: flex;
+  flex-direction: column;
   width: 100%;
-  flex: 0 0 auto;
+  flex: 1;
+  min-height: 0;
   overflow: visible;
   background: transparent;
 }
 
+.mb-adapt__main-container .mb-adapt__iframe {
+  flex: 1;
+  min-height: 0;
+}
+
 /* Responsive dialog - full screen on small viewports */
 @media (max-width: 600px) {
   .mb-adapt__dialog {
@@ -453,6 +548,7 @@ export class AdaptWebClient {
         this.dragHandleElement = null;
         this.mainExpandButton = null;
         this.forkExpandButton = null;
+        this.forkToolbarElement = null;
         // Dialog elements
         this.mainContainer = null;
         this.dialogBackdrop = null;
@@ -665,6 +761,7 @@ export class AdaptWebClient {
         this.dragHandleElement = null;
         this.mainExpandButton = null;
         this.forkExpandButton = null;
+        this.forkToolbarElement = null;
         this.mainContainer = null;
         this.dialogBackdrop = null;
         this.dialogElement = null;
@@ -720,14 +817,10 @@ export class AdaptWebClient {
             this.dialogBackdrop.removeEventListener("click", this.backdropClickHandler);
             this.backdropClickHandler = null;
         }
-        // Add new handler if enabled
+        // Add new handler if enabled (acts as minimize)
         if (enabled) {
             this.backdropClickHandler = () => {
-                if (this.currentFork) {
-                    this.forkQueue.unshift(this.currentFork);
-                }
-                this.currentFork = null;
-                this.updateDialogVisibility();
+                this.handleForkMinimize();
             };
             this.dialogBackdrop.addEventListener("click", this.backdropClickHandler);
         }
@@ -1021,6 +1114,7 @@ export class AdaptWebClient {
         this.dragHandleElement = null;
         this.mainExpandButton = null;
         this.forkExpandButton = null;
+        this.forkToolbarElement = null;
         this.mainContainer = null;
         this.dialogBackdrop = null;
         this.dialogElement = null;
@@ -1070,23 +1164,19 @@ export class AdaptWebClient {
         if (!fork) {
             return;
         }
-        // Remove from queue
-        this.forkQueue = this.forkQueue.filter((item) => item.fork !== fork);
-        // If current fork is done, clear tracking but keep iframe mounted
-        // Then check if there's another fork waiting
+        // Remove from queue (but not the current fork — it's tracked separately).
+        // Also discard any previously-completed (stale) forks from the queue.
+        this.forkQueue = this.forkQueue.filter((item) => item.fork !== fork && !item.completed);
         if (this.currentFork?.fork === fork) {
-            this.currentFork = null;
-            // Check if there's another fork in queue to display
             if (this.forkQueue.length > 0) {
+                // Another fork is waiting — advance to it
+                this.currentFork = null;
                 this.activateNextFork();
             }
             else {
-                // No more forks - update visibility (hide fork frame in side-by-side,
-                // or keep dialog open until user closes it)
-                if (this.options.forkDisplayMode === "side-by-side") {
-                    this.updateSideBySideVisibility();
-                }
-                // For dialog mode: keep dialog open until user clicks close or backdrop
+                // No active forks remain — keep this fork visible (graceful completion)
+                // but mark it so it gets evicted when a new fork arrives.
+                this.currentFork.completed = true;
             }
         }
     }
@@ -1148,9 +1238,10 @@ export class AdaptWebClient {
             this.mainToken = token;
             this.updateMainIframe();
         }
-        // Add to queue and activate if no current fork
+        // Add to queue and activate if no current fork or current fork is completed.
         this.forkQueue.push(forkItem);
-        if (!this.currentFork) {
+        if (!this.currentFork || this.currentFork.completed) {
+            this.currentFork = null;
             this.activateNextFork();
         }
     }
@@ -1191,11 +1282,16 @@ export class AdaptWebClient {
     updateForkIframe() {
         if (!this.currentFork || !this.forkIframe)
             return;
-        // Update iframe src if changed
         const newSrc = getIframeSrc(this.currentFork.url, this.currentFork.token);
-        if (this.forkIframe.src !== newSrc) {
-            this.forkIframe.src = newSrc;
-        }
+        // Replace iframe to force a fresh load — browsers don't reload when only
+        // the hash fragment changes (same plugin URL, different fork token).
+        const parent = this.forkIframe.parentElement;
+        if (parent) {
+            const fresh = this.createHiddenIframe();
+            parent.replaceChild(fresh, this.forkIframe);
+            this.forkIframe = fresh;
+        }
+        this.forkIframe.src = newSrc;
         // Show the iframe with fade-in
         this.showIframe(this.forkIframe);
     }
@@ -1228,6 +1324,10 @@ export class AdaptWebClient {
         // Reset border radius in case coming from dialog mode
         this.forkIframe.style.borderRadius = "";
         this.mainFrameElement.appendChild(this.mainIframe);
+        // Fork toolbar with minimize + exit
+        this.forkToolbarElement = this.createForkToolbar();
+        this.forkFrameElement.classList.add("mb-adapt__frame--has-toolbar");
+        this.forkFrameElement.appendChild(this.forkToolbarElement);
         this.forkFrameElement.appendChild(this.forkIframe);
         // Drag handle - initially hidden until fork arrives
         this.dragHandleElement = document.createElement("div");
@@ -1374,6 +1474,76 @@ export class AdaptWebClient {
         this.forkFrameElement.style.width = `${forkWidth}%`;
         this.dragHandleElement.style.left = `${this.splitPercentage}%`;
     }
+    createForkToolbar() {
+        const toolbar = document.createElement("div");
+        toolbar.className =
+            this.options.classNames?.toolbar || "mb-adapt__toolbar";
+        // Minimize button (horizontal line icon)
+        const minimizeBtn = document.createElement("button");
+        minimizeBtn.className =
+            this.options.classNames?.toolbarButton || "mb-adapt__toolbar-btn";
+        minimizeBtn.setAttribute("aria-label", "Minimize fork");
+        minimizeBtn.setAttribute("title", "Minimize");
+        minimizeBtn.innerHTML = `<svg viewBox="0 0 16 16"><line x1="3" y1="8" x2="13" y2="8"/></svg>`;
+        minimizeBtn.addEventListener("click", () => {
+            this.handleForkMinimize();
+        });
+        // Exit button (X icon) — stops the fork via the API
+        const exitBtn = document.createElement("button");
+        exitBtn.className = `${this.options.classNames?.toolbarButton || "mb-adapt__toolbar-btn"} mb-adapt__toolbar-btn--exit`;
+        exitBtn.setAttribute("aria-label", "Close fork");
+        exitBtn.setAttribute("title", "Close");
+        exitBtn.innerHTML = `<svg viewBox="0 0 16 16"><line x1="4" y1="4" x2="12" y2="12"/><line x1="12" y1="4" x2="4" y2="12"/></svg>`;
+        exitBtn.addEventListener("click", () => {
+            this.handleForkExit();
+        });
+        toolbar.appendChild(minimizeBtn);
+        toolbar.appendChild(exitBtn);
+        return toolbar;
+    }
+    handleForkMinimize() {
+        if (!this.currentFork)
+            return;
+        if (this.options.forkDisplayMode === "side-by-side") {
+            this.splitPercentage = 100;
+            this.updateSideBySideVisibility();
+        }
+        else {
+            // Dialog mode: hide dialog, put fork back in queue so expand button shows
+            this.forkQueue.unshift(this.currentFork);
+            this.currentFork = null;
+            this.updateDialogVisibility();
+        }
+    }
+    handleForkExit() {
+        if (!this.currentFork)
+            return;
+        const fork = this.currentFork.fork;
+        // Stop the fork via the API (best-effort, just like Run.tsx/ClientWindow.tsx)
+        if (this.sessionToken) {
+            this.client.stop(this.sessionToken, fork).catch(() => { });
+        }
+        // Remove from queue immediately (user-dismissable, same as ClientWindow.tsx)
+        this.forkQueue = this.forkQueue.filter((item) => item.fork !== fork);
+        this.currentFork = null;
+        if (this.forkQueue.length > 0) {
+            this.activateNextFork();
+        }
+        else {
+            // Clear the fork iframe
+            if (this.forkIframe) {
+                this.forkIframe.src = "about:blank";
+                this.forkIframe.classList.remove("mb-adapt__iframe--visible");
+                this.forkIframe.classList.add("mb-adapt__iframe--hidden");
+            }
+            if (this.options.forkDisplayMode === "side-by-side") {
+                this.updateSideBySideVisibility();
+            }
+            else {
+                this.updateDialogVisibility();
+            }
+        }
+    }
     createDialogStructure() {
         if (this.mainContainer)
             return;
@@ -1401,14 +1571,10 @@ export class AdaptWebClient {
         this.dialogBackdrop = document.createElement("div");
         this.dialogBackdrop.className =
             this.options.classNames?.dialogBackdrop || "mb-adapt__dialog-backdrop";
-        // Set up backdrop click handler if enabled
+        // Set up backdrop click handler if enabled (acts as minimize)
         if (this.options.dialogBackdropClose) {
             this.backdropClickHandler = () => {
-                if (this.currentFork) {
-                    this.forkQueue.unshift(this.currentFork);
-                }
-                this.currentFork = null;
-                this.updateDialogVisibility();
+                this.handleForkMinimize();
             };
             this.dialogBackdrop.addEventListener("click", this.backdropClickHandler);
         }
@@ -1416,28 +1582,13 @@ export class AdaptWebClient {
         this.dialogElement = document.createElement("div");
         this.dialogElement.className =
             this.options.classNames?.dialog || "mb-adapt__dialog";
-        const banner = document.createElement("div");
-        banner.className =
-            this.options.classNames?.dialogBanner || "mb-adapt__dialog-banner";
-        const closeBtn = document.createElement("button");
-        closeBtn.className =
-            this.options.classNames?.dialogClose || "mb-adapt__dialog-close";
-        closeBtn.innerHTML = "×";
-        closeBtn.setAttribute("aria-label", "Close dialog");
-        closeBtn.setAttribute("title", "Close dialog");
-        closeBtn.addEventListener("click", () => {
-            // Put current fork back in queue before closing
-            if (this.currentFork) {
-                this.forkQueue.unshift(this.currentFork);
-            }
-            this.currentFork = null;
-            this.updateDialogVisibility();
-        });
-        banner.appendChild(closeBtn);
-        this.dialogElement.appendChild(banner);
+        // Same toolbar as side-by-side (minimize + exit)
+        this.forkToolbarElement = this.createForkToolbar();
+        this.dialogElement.appendChild(this.forkToolbarElement);
         const iframeContainer = document.createElement("div");
         iframeContainer.style.flex = "1";
-        iframeContainer.style.overflow = "hidden";
+        iframeContainer.style.overflow = "auto";
+        iframeContainer.style.minHeight = "0";
         // Reuse existing fork iframe or create new one
         if (!this.forkIframe) {
             this.forkIframe = this.createHiddenIframe();