@mochabug/adapt-web 1.0.0-rc21 → 1.0.0-rc23

package/dist/esm/index.js

@@ -1,164 +1,966 @@
-// Re-export from the new PubsubClient module
-export * from "./pubsub-client.js";
-// Default configuration
-const defaultConfig = {
-    baseUrl: "https://adapt-dev.mochabugapis.com/v1/automations",
-    wsBaseUrl: "wss://adapt-dev.mochabugapis.com/v1/automations",
-};
-// Global configuration
-let globalConfig = { ...defaultConfig };
-// Configure the Adapt client
-export function configure(config) {
-    globalConfig = { ...globalConfig, ...config };
-}
-// Get current configuration
-export function getConfig() {
-    return { ...globalConfig };
-}
-// Reset to default configuration
-export function resetConfig() {
-    globalConfig = { ...defaultConfig };
-}
-// Retry configuration
-const RETRY_CONFIG = {
-    maxAttempts: 5,
-    initialDelay: 50, // 50ms
-    maxDelay: 5000, // 5 seconds
-    retryableStatusCodes: [429, 502, 503, 504], // Too Many Requests, Bad Gateway, Service Unavailable, Gateway Timeout
-};
-// Sleep helper
-function sleep(ms) {
-    return new Promise((resolve) => setTimeout(resolve, ms));
-}
-// Retry wrapper with exponential backoff
-async function fetchWithRetry(url, options) {
-    let lastError;
-    for (let attempt = 1; attempt <= RETRY_CONFIG.maxAttempts; attempt++) {
-        try {
-            const response = await fetch(url, options);
-            if (response.ok) {
-                return response;
-            }
-            if (RETRY_CONFIG.retryableStatusCodes.includes(response.status)) {
-                lastError = new RestClientError(response);
-                if (attempt < RETRY_CONFIG.maxAttempts) {
-                    const delay = Math.min(RETRY_CONFIG.initialDelay * Math.pow(2, attempt - 1), RETRY_CONFIG.maxDelay);
-                    console.warn(`Request failed with ${response.status}, retrying in ${delay}ms (attempt ${attempt}/${RETRY_CONFIG.maxAttempts})`);
-                    await sleep(delay);
-                    continue;
+import { inheritSession, PubsubClient, startSession, stopSession, } from "@mochabug/adapt-core";
+/**
+ * Default CSS styles with CSS Custom Properties for theming.
+ */
+const DEFAULT_STYLES = `
+.mb-adapt {
+  width: 100%;
+  height: 100%;
+  --mb-adapt-border-radius: 8px;
+  --mb-adapt-backdrop-color: rgba(0, 0, 0, 0.5);
+  --mb-adapt-dialog-bg: transparent;
+  --mb-adapt-backdrop-z: 999;
+  --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-banner-height: 40px;
+  --mb-adapt-banner-bg: #f9fafb;
+  --mb-adapt-banner-border: #e5e7eb;
+  --mb-adapt-button-color: #374151;
+  --mb-adapt-button-hover-bg: #e5e7eb;
+}
+
+.mb-adapt__wrapper {
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: 100%;
+}
+
+.mb-adapt__frame {
+  position: relative;
+  min-width: 0;
+  overflow: hidden;
+  transition: width 0.15s ease-out;
+}
+
+.mb-adapt__iframe {
+  width: 100%;
+  height: 100%;
+  border: 0;
+  display: block;
+  border-radius: var(--mb-adapt-border-radius);
+  pointer-events: auto;
+}
+
+.mb-adapt__drag-handle {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: var(--mb-adapt-drag-handle-width);
+  background-color: var(--mb-adapt-drag-handle-color);
+  cursor: ew-resize;
+  z-index: 10;
+  transition: background-color 0.2s, left 0.15s ease-out;
+}
+
+.mb-adapt__drag-handle:hover {
+  background-color: var(--mb-adapt-drag-handle-hover);
+}
+
+.mb-adapt__drag-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 9999;
+  cursor: ew-resize;
+}
+
+.mb-adapt__iframe-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 5;
+}
+
+.mb-adapt__dialog-backdrop {
+  position: fixed;
+  inset: 0;
+  background-color: var(--mb-adapt-backdrop-color);
+  z-index: var(--mb-adapt-backdrop-z);
+  display: none;
+}
+
+.mb-adapt__dialog-backdrop--visible {
+  display: block;
+}
+
+.mb-adapt__dialog {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: var(--mb-adapt-dialog-width);
+  height: var(--mb-adapt-dialog-height);
+  background-color: var(--mb-adapt-dialog-bg);
+  border-radius: var(--mb-adapt-border-radius);
+  z-index: var(--mb-adapt-dialog-z);
+  overflow: hidden;
+  flex-direction: column;
+  display: none;
+}
+
+.mb-adapt__dialog--visible {
+  display: flex;
+}
+
+.mb-adapt__dialog-banner {
+  height: var(--mb-adapt-banner-height);
+  background-color: var(--mb-adapt-banner-bg);
+  border-bottom: 1px solid var(--mb-adapt-banner-border);
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 0 8px;
+  flex-shrink: 0;
+}
+
+.mb-adapt__dialog-close {
+  background: none;
+  border: none;
+  color: var(--mb-adapt-button-color);
+  cursor: pointer;
+  font-size: 20px;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+}
+
+.mb-adapt__dialog-close:hover {
+  background-color: var(--mb-adapt-button-hover-bg);
+}
+
+.mb-adapt__expand-button {
+  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;
+  cursor: pointer;
+  width: 14px;
+  height: 48px;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+  transition: all 0.2s ease-out;
+  font-size: 14px;
+  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);
+}
+
+.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);
+  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);
+}
+
+.mb-adapt__expand-button:active {
+  transform: translateY(-50%) scale(0.98);
+  box-shadow:
+    0 1px 4px rgba(0, 0, 0, 0.1),
+    0 1px 2px rgba(0, 0, 0, 0.06);
+}
+
+.mb-adapt__expand-button--visible {
+  display: flex !important;
+}
+
+.mb-adapt__expand-button--left {
+  left: 0;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  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);
+}
+
+.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);
+}
+
+.mb-adapt__expand-button--right {
+  right: 0;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  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);
+}
+
+.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);
+}
+
+.mb-adapt__expand-button--dialog {
+  left: 50%;
+  top: 0;
+  transform: translateX(-50%);
+  width: 56px;
+  height: 20px;
+  font-size: 16px;
+  line-height: 20px;
+  vertical-align: middle;
+  text-align: center;
+  border-radius: 6px;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  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);
+}
+
+.mb-adapt__expand-button--dialog:hover {
+  transform: translateX(-50%) scale(1.02);
+  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);
+}
+
+.mb-adapt__expand-button--dialog:active {
+  transform: translateX(-50%) scale(0.98);
+}
+
+.mb-adapt__drag-handle--disabled {
+  pointer-events: none;
+  opacity: 0.3;
+}
+
+.mb-adapt__main-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+
+/* Responsive dialog - full screen on small viewports */
+@media (max-width: 600px) {
+  .mb-adapt__dialog {
+    width: 100%;
+    height: 100%;
+    border-radius: 0;
+    top: 0;
+    left: 0;
+    transform: none;
+  }
+}
+`;
+/**
+ * Browser client for rendering Adapt automation sessions in iframes.
+ *
+ * Architecture:
+ * - Keeps all iframes mounted, just toggles visibility
+ * - Uses visibility toggling instead of DOM destruction
+ * - Immediate snap when reaching collapse threshold during drag
+ */
+export class AdaptWebClient {
+    constructor(options) {
+        this.rootElement = null;
+        this.mainUrl = null;
+        this.forkQueue = [];
+        this.currentFork = null;
+        this.sessionToken = null;
+        this.isDragging = false;
+        // Persistent DOM elements - created once, reused always
+        this.wrapperElement = null;
+        this.mainFrameElement = null;
+        this.forkFrameElement = null;
+        this.mainIframe = null;
+        this.forkIframe = null;
+        this.dragHandleElement = null;
+        this.mainExpandButton = null;
+        this.forkExpandButton = null;
+        // Dialog elements
+        this.mainContainer = null;
+        this.dialogBackdrop = null;
+        this.dialogElement = null;
+        this.dialogExpandButton = null;
+        // Event listener references for cleanup
+        this.mouseMoveHandler = null;
+        this.mouseUpHandler = null;
+        this.resizeObserver = null;
+        this.destroyed = false;
+        this.options = {
+            ...options,
+            forkDisplayMode: options.forkDisplayMode ?? "side-by-side",
+        };
+        this.splitPercentage = options.sideBySideSplit ?? 50;
+        const container = document.getElementById(options.container);
+        if (!container) {
+            throw new Error(`Container with id '${options.container}' not found`);
+        }
+        this.container = container;
+        this.pubsub = new PubsubClient(false);
+        this.injectDefaultStyles();
+        this.createRootElement();
+        this.setupDragListeners();
+        this.setupResizeObserver();
+        this.init();
+    }
+    setupResizeObserver() {
+        if (!this.rootElement)
+            return;
+        this.resizeObserver = new ResizeObserver(() => {
+            if (this.options.forkDisplayMode === "side-by-side" && this.currentFork) {
+                this.updateSideBySideVisibility();
+            }
+        });
+        this.resizeObserver.observe(this.rootElement);
+    }
+    setupDragListeners() {
+        let unclampedSplit = this.splitPercentage;
+        let wasCollapsed = false;
+        const handleMouseMove = (e) => {
+            if (!this.isDragging || !this.rootElement)
+                return;
+            const rect = this.rootElement.getBoundingClientRect();
+            if (rect.width === 0)
+                return; // Prevent division by zero
+            const offsetX = e.clientX - rect.left;
+            unclampedSplit = (offsetX / rect.width) * 100;
+            // Check if we should snap to collapsed state
+            const mainWidth = unclampedSplit;
+            const forkWidth = 100 - unclampedSplit;
+            if (mainWidth < AdaptWebClient.COLLAPSE_THRESHOLD) {
+                // Snap to collapsed left
+                if (!wasCollapsed) {
+                    wasCollapsed = true;
+                    this.splitPercentage = 0;
+                    this.updateSideBySideVisibility();
+                }
+            }
+            else if (forkWidth < AdaptWebClient.COLLAPSE_THRESHOLD) {
+                // Snap to collapsed right
+                if (!wasCollapsed) {
+                    wasCollapsed = true;
+                    this.splitPercentage = 100;
+                    this.updateSideBySideVisibility();
                 }
             }
-            throw new RestClientError(response);
-        }
-        catch (error) {
-            if (error instanceof RestClientError) {
-                throw error;
-            }
-            if (attempt < RETRY_CONFIG.maxAttempts) {
-                const delay = Math.min(RETRY_CONFIG.initialDelay * Math.pow(2, attempt - 1), RETRY_CONFIG.maxDelay);
-                console.warn(`Network error, retrying in ${delay}ms (attempt ${attempt}/${RETRY_CONFIG.maxAttempts})`, error);
-                await sleep(delay);
-                continue;
-            }
-            throw error;
-        }
-    }
-    throw lastError || new Error("All retry attempts failed");
-}
-// REST API functions
-export async function startSession(req, token) {
-    const headers = new Headers({
-        "Content-Type": "application/json",
-        "Response-Type": "application/json",
-    });
-    if (token) {
-        headers.set("Authorization", `Bearer ${token}`);
-    }
-    const response = await fetchWithRetry(`${globalConfig.baseUrl}/${req.id}/session/start`, {
-        method: "POST",
-        body: JSON.stringify(req),
-        headers,
-    });
-    return await response.json();
-}
-export async function inheritSession(id, sessionToken) {
-    const response = await fetchWithRetry(`${globalConfig.baseUrl}/${id}/session/inherit`, {
-        method: "POST",
-        body: JSON.stringify({ id }),
-        headers: {
-            "Content-Type": "application/json",
-            "Response-Type": "application/json",
-            Authorization: `Bearer ${sessionToken}`,
-        },
-    });
-    return await response.json();
-}
-export async function getSession(id, sessionToken) {
-    const response = await fetchWithRetry(`${globalConfig.baseUrl}/${id}/session`, {
-        method: "GET",
-        headers: {
-            "Response-Type": "application/json",
-            Authorization: `Bearer ${sessionToken}`,
-        },
-    });
-    return await response.json();
-}
-export async function readOutput(id, sessionToken, options) {
-    const params = new URLSearchParams();
-    if (options?.pageSize !== undefined) {
-        params.set("page_size", options.pageSize.toString());
-    }
-    if (options?.vertex) {
-        params.set("vertex", options.vertex);
-    }
-    if (options?.newerThan) {
-        params.set("newer_than", options.newerThan);
-    }
-    const queryString = params.toString();
-    const url = `${globalConfig.baseUrl}/${id}/session/output${queryString ? `?${queryString}` : ""}`;
-    const response = await fetchWithRetry(url, {
-        method: "GET",
-        headers: {
-            "Response-Type": "application/json",
-            Authorization: `Bearer ${sessionToken}`,
-        },
-    });
-    return await response.json();
-}
-export async function readUrls(id, sessionToken, options) {
-    const params = new URLSearchParams();
-    if (options?.pageSize !== undefined) {
-        params.set("page_size", options.pageSize.toString());
-    }
-    if (options?.newerThan) {
-        params.set("newer_than", options.newerThan);
-    }
-    const queryString = params.toString();
-    const url = `${globalConfig.baseUrl}/${id}/session/urls${queryString ? `?${queryString}` : ""}`;
-    const response = await fetchWithRetry(url, {
-        method: "GET",
-        headers: {
-            "Response-Type": "application/json",
-            Authorization: `Bearer ${sessionToken}`,
-        },
-    });
-    return await response.json();
-}
-export async function stopSession(id, sessionToken) {
-    await fetchWithRetry(`${globalConfig.baseUrl}/${id}/session`, {
-        method: "DELETE",
-        headers: {
-            Authorization: `Bearer ${sessionToken}`,
-        },
-    });
-}
-export class RestClientError extends Error {
-    constructor(response) {
-        super(`HTTP Error: ${response.status} ${response.statusText}`);
-        this.name = "RestClientError";
-        this.status = response.status;
-        this.statusText = response.statusText;
-        this.response = response;
+            else {
+                // Normal drag - clamp to prevent collapse
+                wasCollapsed = false;
+                this.splitPercentage = Math.max(AdaptWebClient.COLLAPSE_THRESHOLD, Math.min(100 - AdaptWebClient.COLLAPSE_THRESHOLD, unclampedSplit));
+                this.updateSideBySideWidths();
+            }
+        };
+        const handleMouseUp = () => {
+            if (!this.isDragging)
+                return;
+            this.isDragging = false;
+            wasCollapsed = false;
+            document.getElementById("mb-adapt-drag-overlay")?.remove();
+            this.rootElement
+                ?.querySelectorAll(".mb-adapt__iframe-overlay")
+                .forEach((el) => el.remove());
+            // Re-enable transitions after drag
+            if (this.mainFrameElement)
+                this.mainFrameElement.style.transition = "";
+            if (this.forkFrameElement)
+                this.forkFrameElement.style.transition = "";
+            if (this.dragHandleElement)
+                this.dragHandleElement.style.transition = "";
+            // Finalize position - use unclamped value if not collapsed
+            if (this.splitPercentage !== 0 &&
+                this.splitPercentage !== 100 &&
+                unclampedSplit >= AdaptWebClient.COLLAPSE_THRESHOLD &&
+                100 - unclampedSplit >= AdaptWebClient.COLLAPSE_THRESHOLD) {
+                this.splitPercentage = unclampedSplit;
+            }
+            // Reset for next drag
+            unclampedSplit = this.splitPercentage;
+        };
+        this.mouseMoveHandler = handleMouseMove;
+        this.mouseUpHandler = handleMouseUp;
+        document.addEventListener("mousemove", this.mouseMoveHandler);
+        document.addEventListener("mouseup", this.mouseUpHandler);
+    }
+    injectDefaultStyles() {
+        if (document.getElementById("mb-adapt-styles"))
+            return;
+        const style = document.createElement("style");
+        style.id = "mb-adapt-styles";
+        style.textContent = DEFAULT_STYLES;
+        document.head.appendChild(style);
+    }
+    createRootElement() {
+        this.rootElement = document.createElement("div");
+        this.rootElement.className = this.options.classNames?.root || "mb-adapt";
+        if (this.options.styles) {
+            Object.assign(this.rootElement.style, this.options.styles);
+        }
+        this.container.appendChild(this.rootElement);
+    }
+    parseInheritToken() {
+        const inheritFrom = this.options.inheritFrom;
+        if (!inheritFrom)
+            return null;
+        if ("hash" in inheritFrom) {
+            return this.parseFromHash(inheritFrom.hash);
+        }
+        else {
+            return this.parseFromParam(inheritFrom.param);
+        }
+    }
+    parseFromHash(key) {
+        const hash = window.location.hash.slice(1); // Remove leading #
+        if (!hash)
+            return null;
+        const params = new URLSearchParams(hash);
+        const token = params.get(key);
+        if (!token)
+            return null;
+        // Remove the key from hash and clean URL
+        params.delete(key);
+        const newHash = params.toString();
+        const newUrl = window.location.pathname +
+            window.location.search +
+            (newHash ? "#" + newHash : "");
+        history.replaceState(null, "", newUrl);
+        return decodeURIComponent(token);
+    }
+    parseFromParam(key) {
+        const params = new URLSearchParams(window.location.search);
+        const token = params.get(key);
+        if (!token)
+            return null;
+        // Remove the key from params and clean URL
+        params.delete(key);
+        const newSearch = params.toString();
+        const newUrl = window.location.pathname +
+            (newSearch ? "?" + newSearch : "") +
+            window.location.hash;
+        history.replaceState(null, "", newUrl);
+        return decodeURIComponent(token);
+    }
+    async init() {
+        // Priority: sessionToken > inheritToken/inheritFrom > authToken
+        if (this.options.sessionToken) {
+            // Use pre-created session token directly (server-side scenario)
+            this.sessionToken = this.options.sessionToken;
+        }
+        else {
+            // Determine inherit token: URL-parsed takes precedence over option
+            const urlToken = this.parseInheritToken();
+            const inheritToken = urlToken || this.options.inheritToken;
+            // If inheritFrom was specified but no token found in URL, error out
+            if (this.options.inheritFrom && !urlToken) {
+                const source = "hash" in this.options.inheritFrom
+                    ? `hash key '${this.options.inheritFrom.hash}'`
+                    : `param '${this.options.inheritFrom.param}'`;
+                console.error(`[AdaptWebClient] No inherit token found in URL ${source}`);
+                return;
+            }
+            // Either inherit existing session or start new one
+            let result;
+            if (inheritToken) {
+                result = await inheritSession(this.options.id, inheritToken);
+            }
+            else {
+                const req = {
+                    id: this.options.id,
+                };
+                if (this.options.transmitter) {
+                    req.transmitter = this.options.transmitter;
+                }
+                if (this.options.signals) {
+                    req.signals = this.options.signals;
+                }
+                result = await startSession(req, this.options.authToken);
+            }
+            this.sessionToken = result.token;
+        }
+        const subscribeOptions = {
+            id: this.options.id,
+            sessionToken: this.sessionToken,
+            onUrl: (msg) => this.onUrl(msg),
+            onSession: (sessionJson) => {
+                // Handle session completion - minimize all forks, show only main
+                if (sessionJson.status === "STATUS_COMPLETED" && !sessionJson.fork) {
+                    this.handleSessionComplete();
+                }
+                if (this.options.onSession) {
+                    this.options.onSession(sessionJson.status || "STATUS_UNSPECIFIED", sessionJson.fork);
+                }
+            },
+        };
+        if (this.options.onOutput) {
+            subscribeOptions.onOutput = this.options.onOutput;
+        }
+        await this.pubsub.subscribe(subscribeOptions);
+    }
+    async destroy() {
+        this.destroyed = true;
+        // We stop best-effort. Sometimes you will get perm denied etc...
+        if (this.sessionToken) {
+            stopSession(this.options.id, this.sessionToken);
+        }
+        await this.pubsub.unsubscribe();
+        // Remove event listeners to prevent memory leaks
+        if (this.mouseMoveHandler) {
+            document.removeEventListener("mousemove", this.mouseMoveHandler);
+        }
+        if (this.mouseUpHandler) {
+            document.removeEventListener("mouseup", this.mouseUpHandler);
+        }
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+        this.rootElement?.parentNode?.removeChild(this.rootElement);
+        // Don't remove shared styles - they're reused across instances
+        // Clear internal state
+        this.mainUrl = null;
+        this.mainToken = undefined;
+        this.forkQueue = [];
+        this.currentFork = null;
+        this.sessionToken = null;
+        this.rootElement = null;
+        this.wrapperElement = null;
+        this.mainFrameElement = null;
+        this.forkFrameElement = null;
+        this.mainIframe = null;
+        this.forkIframe = null;
+        this.dragHandleElement = null;
+        this.mainExpandButton = null;
+        this.forkExpandButton = null;
+        this.mainContainer = null;
+        this.dialogBackdrop = null;
+        this.dialogElement = null;
+        this.dialogExpandButton = null;
+        this.mouseMoveHandler = null;
+        this.mouseUpHandler = null;
+        this.resizeObserver = null;
+    }
+    onUrl(msg) {
+        if (this.destroyed)
+            return;
+        const fork = msg.fork || "";
+        if (msg.done) {
+            this.handleDoneMessage(fork);
+            return;
+        }
+        if (!msg.url)
+            return;
+        if (!fork) {
+            // Main URL update - never affects dialog open/close state
+            this.handleMainUrl(msg.url, msg.token);
+        }
+        else {
+            // Fork URL - should open dialog
+            this.handleForkUrl(msg.url, msg.token, fork);
+        }
+    }
+    handleSessionComplete() {
+        // Clear all forks and minimize to show only main frame
+        this.currentFork = null;
+        this.forkQueue = [];
+        if (this.options.forkDisplayMode === "side-by-side") {
+            this.updateSideBySideVisibility();
+        }
+        else if (this.options.forkDisplayMode === "dialog") {
+            this.updateDialogVisibility();
+        }
+    }
+    handleDoneMessage(fork) {
+        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
+        if (this.currentFork?.fork === fork) {
+            this.currentFork = null;
+            // Check if there's another fork in queue to display
+            if (this.forkQueue.length > 0) {
+                this.activateNextFork();
+            }
+            // If no more forks, iframe stays mounted but we don't close dialog
+            // Dialog will close when user clicks close or backdrop
+        }
+    }
+    handleMainUrl(url, token) {
+        this.mainUrl = url;
+        this.mainToken = token;
+        // Update main iframe only - never touch dialog state
+        this.updateMainIframe();
+    }
+    handleForkUrl(url, token, fork) {
+        const depth = (fork.match(/\//g) || []).length;
+        const forkItem = {
+            url,
+            token,
+            fork,
+            depth,
+            time: Date.now(),
+        };
+        // If no main URL yet, use fork as main temporarily
+        if (!this.mainUrl) {
+            this.mainUrl = url;
+            this.mainToken = token;
+            this.updateMainIframe();
+        }
+        // Add to queue and activate if no current fork
+        this.forkQueue.push(forkItem);
+        if (!this.currentFork) {
+            this.activateNextFork();
+        }
+    }
+    activateNextFork() {
+        if (this.forkQueue.length === 0)
+            return;
+        // Sort: deepest first, then newest
+        this.forkQueue.sort((a, b) => {
+            if (a.depth !== b.depth)
+                return b.depth - a.depth;
+            return b.time - a.time;
+        });
+        this.currentFork = this.forkQueue.shift();
+        // Update fork iframe and show dialog
+        this.updateForkIframe();
+        if (this.options.forkDisplayMode === "dialog") {
+            this.updateDialogVisibility();
+        }
+        else {
+            this.updateSideBySideVisibility();
+        }
+    }
+    updateMainIframe() {
+        if (!this.rootElement || !this.mainUrl)
+            return;
+        // Ensure structure exists
+        if (this.options.forkDisplayMode === "dialog") {
+            if (!this.mainContainer) {
+                this.createDialogStructure();
+            }
+            // Update main iframe if URL changed
+            const newSrc = this.getIframeSrc(this.mainUrl, this.mainToken);
+            if (!this.mainIframe || this.mainIframe.src !== newSrc) {
+                this.mainIframe = this.createIframe(this.mainUrl, this.mainToken);
+                const oldIframe = this.mainContainer.querySelector(".mb-adapt__iframe");
+                if (oldIframe)
+                    oldIframe.remove();
+                this.mainContainer.insertBefore(this.mainIframe, this.mainContainer.firstChild);
+            }
+        }
+        else {
+            // Side-by-side
+            if (!this.wrapperElement) {
+                this.createSideBySideStructure();
+            }
+            const newSrc = this.getIframeSrc(this.mainUrl, this.mainToken);
+            if (!this.mainIframe || this.mainIframe.src !== newSrc) {
+                this.mainIframe = this.createIframe(this.mainUrl, this.mainToken);
+                this.mainFrameElement.innerHTML = "";
+                this.mainFrameElement.appendChild(this.mainIframe);
+            }
+            this.updateSideBySideVisibility();
+        }
+    }
+    updateForkIframe() {
+        if (!this.currentFork)
+            return;
+        const newSrc = this.getIframeSrc(this.currentFork.url, this.currentFork.token);
+        if (this.options.forkDisplayMode === "dialog") {
+            if (!this.mainContainer) {
+                this.createDialogStructure();
+            }
+            if (!this.forkIframe || this.forkIframe.src !== newSrc) {
+                this.forkIframe = this.createIframe(this.currentFork.url, this.currentFork.token);
+                this.forkIframe.style.borderRadius = "0";
+                const iframeContainer = this.dialogElement.children[1];
+                iframeContainer.innerHTML = "";
+                iframeContainer.appendChild(this.forkIframe);
+            }
+        }
+        else {
+            // Side-by-side
+            if (!this.wrapperElement) {
+                this.createSideBySideStructure();
+            }
+            if (!this.forkIframe || this.forkIframe.src !== newSrc) {
+                this.forkIframe = this.createIframe(this.currentFork.url, this.currentFork.token);
+                this.forkFrameElement.innerHTML = "";
+                this.forkFrameElement.appendChild(this.forkIframe);
+            }
+        }
+    }
+    createSideBySideStructure() {
+        if (this.wrapperElement)
+            return;
+        this.rootElement.innerHTML = "";
+        this.wrapperElement = document.createElement("div");
+        this.wrapperElement.className =
+            this.options.classNames?.wrapper || "mb-adapt__wrapper";
+        // Main frame
+        this.mainFrameElement = document.createElement("div");
+        this.mainFrameElement.className =
+            this.options.classNames?.frameMain ||
+                `${this.options.classNames?.frame || "mb-adapt__frame"} mb-adapt__frame--main`;
+        // Fork frame
+        this.forkFrameElement = document.createElement("div");
+        this.forkFrameElement.className =
+            this.options.classNames?.frameFork ||
+                `${this.options.classNames?.frame || "mb-adapt__frame"} mb-adapt__frame--fork`;
+        // Drag handle
+        this.dragHandleElement = document.createElement("div");
+        this.dragHandleElement.className =
+            this.options.classNames?.dragHandle || "mb-adapt__drag-handle";
+        this.dragHandleElement.style.transform = "translateX(-50%)";
+        this.dragHandleElement.addEventListener("mousedown", (e) => {
+            e.preventDefault();
+            this.isDragging = true;
+            // Disable transitions during drag for smooth performance
+            if (this.mainFrameElement)
+                this.mainFrameElement.style.transition = "none";
+            if (this.forkFrameElement)
+                this.forkFrameElement.style.transition = "none";
+            if (this.dragHandleElement)
+                this.dragHandleElement.style.transition = "none";
+            const overlay = document.createElement("div");
+            overlay.className = "mb-adapt__drag-overlay";
+            overlay.id = "mb-adapt-drag-overlay";
+            this.rootElement.appendChild(overlay);
+            [this.mainFrameElement, this.forkFrameElement].forEach((frame) => {
+                if (frame) {
+                    const iframeOverlay = document.createElement("div");
+                    iframeOverlay.className = "mb-adapt__iframe-overlay";
+                    frame.appendChild(iframeOverlay);
+                }
+            });
+        });
+        // Main expand button - shows on LEFT when main collapsed, arrow points RIGHT
+        this.mainExpandButton = document.createElement("button");
+        this.mainExpandButton.className =
+            this.options.classNames?.expandButton || "mb-adapt__expand-button";
+        this.mainExpandButton.classList.add("mb-adapt__expand-button--left");
+        this.mainExpandButton.innerHTML = "›"; // Arrow points RIGHT (where main will expand)
+        this.mainExpandButton.setAttribute("aria-label", "Expand main frame");
+        this.mainExpandButton.setAttribute("title", "Expand main frame");
+        this.mainExpandButton.addEventListener("click", () => {
+            this.splitPercentage = 50;
+            this.updateSideBySideVisibility();
+        });
+        // Fork expand button - shows on RIGHT when fork collapsed, arrow points LEFT
+        this.forkExpandButton = document.createElement("button");
+        this.forkExpandButton.className =
+            this.options.classNames?.expandButton || "mb-adapt__expand-button";
+        this.forkExpandButton.classList.add("mb-adapt__expand-button--right");
+        this.forkExpandButton.innerHTML = "‹"; // Arrow points LEFT (where fork will expand)
+        this.forkExpandButton.setAttribute("aria-label", "Expand fork frame");
+        this.forkExpandButton.setAttribute("title", "Expand fork frame");
+        this.forkExpandButton.addEventListener("click", () => {
+            this.splitPercentage = 50;
+            this.updateSideBySideVisibility();
+        });
+        this.wrapperElement.appendChild(this.mainFrameElement);
+        this.wrapperElement.appendChild(this.forkFrameElement);
+        this.wrapperElement.appendChild(this.dragHandleElement);
+        this.wrapperElement.appendChild(this.mainExpandButton);
+        this.wrapperElement.appendChild(this.forkExpandButton);
+        this.rootElement.appendChild(this.wrapperElement);
+    }
+    isResponsiveMode() {
+        if (!this.rootElement)
+            return false;
+        return this.rootElement.offsetWidth < AdaptWebClient.RESPONSIVE_BREAKPOINT;
+    }
+    updateSideBySideVisibility() {
+        if (!this.mainFrameElement ||
+            !this.forkFrameElement ||
+            !this.dragHandleElement)
+            return;
+        // No current fork - show only main at 100%
+        if (!this.currentFork) {
+            this.mainFrameElement.style.width = "100%";
+            this.mainFrameElement.style.display = "block";
+            this.forkFrameElement.style.display = "none";
+            this.dragHandleElement.style.display = "none";
+            this.mainExpandButton.classList.remove("mb-adapt__expand-button--visible");
+            this.forkExpandButton.classList.remove("mb-adapt__expand-button--visible");
+            return;
+        }
+        // Responsive mode: show only fork when container is narrow
+        if (this.isResponsiveMode()) {
+            this.mainFrameElement.style.width = "0%";
+            this.mainFrameElement.style.display = "none";
+            this.forkFrameElement.style.width = "100%";
+            this.forkFrameElement.style.display = "block";
+            this.dragHandleElement.style.display = "none";
+            this.mainExpandButton.classList.add("mb-adapt__expand-button--visible");
+            this.forkExpandButton.classList.remove("mb-adapt__expand-button--visible");
+            return;
+        }
+        // Normal side-by-side mode
+        const mainWidth = this.splitPercentage;
+        const forkWidth = 100 - this.splitPercentage;
+        const mainCollapsed = mainWidth < AdaptWebClient.COLLAPSE_THRESHOLD;
+        const forkCollapsed = forkWidth < AdaptWebClient.COLLAPSE_THRESHOLD;
+        // Update main frame
+        this.mainFrameElement.style.width = mainCollapsed ? "0%" : `${mainWidth}%`;
+        this.mainFrameElement.style.display = mainCollapsed ? "none" : "block";
+        // Update fork frame
+        this.forkFrameElement.style.width = forkCollapsed ? "0%" : `${forkWidth}%`;
+        this.forkFrameElement.style.display = forkCollapsed ? "none" : "block";
+        // Update drag handle
+        this.dragHandleElement.style.left = `${this.splitPercentage}%`;
+        this.dragHandleElement.style.display = "block";
+        if (mainCollapsed || forkCollapsed) {
+            this.dragHandleElement.classList.add("mb-adapt__drag-handle--disabled");
+        }
+        else {
+            this.dragHandleElement.classList.remove("mb-adapt__drag-handle--disabled");
+        }
+        // Update expand buttons
+        if (mainCollapsed) {
+            this.mainExpandButton.classList.add("mb-adapt__expand-button--visible");
+        }
+        else {
+            this.mainExpandButton.classList.remove("mb-adapt__expand-button--visible");
+        }
+        if (forkCollapsed) {
+            this.forkExpandButton.classList.add("mb-adapt__expand-button--visible");
+        }
+        else {
+            this.forkExpandButton.classList.remove("mb-adapt__expand-button--visible");
+        }
+    }
+    updateSideBySideWidths() {
+        if (!this.mainFrameElement ||
+            !this.forkFrameElement ||
+            !this.dragHandleElement)
+            return;
+        const mainWidth = this.splitPercentage;
+        const forkWidth = 100 - this.splitPercentage;
+        this.mainFrameElement.style.width = `${mainWidth}%`;
+        this.forkFrameElement.style.width = `${forkWidth}%`;
+        this.dragHandleElement.style.left = `${this.splitPercentage}%`;
+    }
+    createDialogStructure() {
+        if (this.mainContainer)
+            return;
+        this.rootElement.innerHTML = "";
+        // Main container
+        this.mainContainer = document.createElement("div");
+        this.mainContainer.className = "mb-adapt__main-container";
+        // Dialog expand button
+        this.dialogExpandButton = document.createElement("button");
+        this.dialogExpandButton.className =
+            this.options.classNames?.expandButton || "mb-adapt__expand-button";
+        this.dialogExpandButton.classList.add("mb-adapt__expand-button--dialog");
+        this.dialogExpandButton.innerHTML = "⌄";
+        this.dialogExpandButton.setAttribute("aria-label", "Open fork dialog");
+        this.dialogExpandButton.setAttribute("title", "Open fork dialog");
+        this.dialogExpandButton.addEventListener("click", () => {
+            this.activateNextFork();
+        });
+        // Backdrop
+        this.dialogBackdrop = document.createElement("div");
+        this.dialogBackdrop.className =
+            this.options.classNames?.dialogBackdrop || "mb-adapt__dialog-backdrop";
+        if (this.options.dialogBackdropClose) {
+            this.dialogBackdrop.addEventListener("click", () => {
+                // Put current fork back in queue before closing
+                if (this.currentFork) {
+                    this.forkQueue.unshift(this.currentFork);
+                }
+                this.currentFork = null;
+                this.updateDialogVisibility();
+            });
+        }
+        // Dialog
+        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);
+        const iframeContainer = document.createElement("div");
+        iframeContainer.style.flex = "1";
+        iframeContainer.style.overflow = "hidden";
+        this.dialogElement.appendChild(iframeContainer);
+        this.mainContainer.appendChild(this.dialogExpandButton);
+        this.rootElement.appendChild(this.mainContainer);
+        this.rootElement.appendChild(this.dialogBackdrop);
+        this.rootElement.appendChild(this.dialogElement);
+    }
+    updateDialogVisibility() {
+        if (!this.dialogExpandButton || !this.dialogBackdrop || !this.dialogElement)
+            return;
+        const hasForkAvailable = this.forkQueue.length > 0;
+        const hasForkShowing = this.currentFork !== null;
+        // Show expand button if fork available but not showing
+        if (!hasForkShowing && hasForkAvailable) {
+            this.dialogExpandButton.classList.add("mb-adapt__expand-button--visible");
+        }
+        else {
+            this.dialogExpandButton.classList.remove("mb-adapt__expand-button--visible");
+        }
+        // Show/hide dialog
+        if (hasForkShowing) {
+            this.dialogBackdrop.classList.add("mb-adapt__dialog-backdrop--visible");
+            this.dialogElement.classList.add("mb-adapt__dialog--visible");
+        }
+        else {
+            this.dialogBackdrop.classList.remove("mb-adapt__dialog-backdrop--visible");
+            this.dialogElement.classList.remove("mb-adapt__dialog--visible");
+        }
+    }
+    getIframeSrc(url, token) {
+        return `${url}${token ? "#" + token : ""}`;
+    }
+    createIframe(url, token) {
+        const iframe = document.createElement("iframe");
+        iframe.className = this.options.classNames?.iframe || "mb-adapt__iframe";
+        iframe.src = this.getIframeSrc(url, token);
+        iframe.setAttribute("sandbox", "allow-downloads allow-same-origin allow-scripts allow-popups allow-forms allow-modals");
+        iframe.setAttribute("allow", "geolocation; accelerometer; midi; microphone; camera; magnetometer; gyroscope; fullscreen; payment;");
+        return iframe;
     }
 }
+AdaptWebClient.COLLAPSE_THRESHOLD = 15;
+AdaptWebClient.RESPONSIVE_BREAKPOINT = 600; // px - below this, auto-collapse to single view
 //# sourceMappingURL=index.js.map