@openreplay/tracker 17.0.0-beta.0 → 17.0.1

package/dist/lib/entry.js

@@ -56,12 +56,12 @@ fl[28] = 258, revfl[258] = 28;
 var _b = freb(fdeb, 0), revfd = _b.r;
 // map of value to reverse (assuming 16 bits)
 var rev = new u16(32768);
-for (var i = 0; i < 32768; ++i) {
+for (var i$1 = 0; i$1 < 32768; ++i$1) {
     // reverse table algorithm from SO
-    var x$1 = ((i & 0xAAAA) >> 1) | ((i & 0x5555) << 1);
+    var x$1 = ((i$1 & 0xAAAA) >> 1) | ((i$1 & 0x5555) << 1);
     x$1 = ((x$1 & 0xCCCC) >> 2) | ((x$1 & 0x3333) << 2);
     x$1 = ((x$1 & 0xF0F0) >> 4) | ((x$1 & 0x0F0F) << 4);
-    rev[i] = (((x$1 & 0xFF00) >> 8) | ((x$1 & 0x00FF) << 8)) >> 1;
+    rev[i$1] = (((x$1 & 0xFF00) >> 8) | ((x$1 & 0x00FF) << 8)) >> 1;
 }
 // create huffman tree from u8 "map": index -> code length for code index
 // mb (max bits) must be at most 15
@@ -117,18 +117,18 @@ var hMap = (function (cd, mb, r) {
 });
 // fixed length tree
 var flt = new u8(288);
-for (var i = 0; i < 144; ++i)
-    flt[i] = 8;
-for (var i = 144; i < 256; ++i)
-    flt[i] = 9;
-for (var i = 256; i < 280; ++i)
-    flt[i] = 7;
-for (var i = 280; i < 288; ++i)
-    flt[i] = 8;
+for (var i$1 = 0; i$1 < 144; ++i$1)
+    flt[i$1] = 8;
+for (var i$1 = 144; i$1 < 256; ++i$1)
+    flt[i$1] = 9;
+for (var i$1 = 256; i$1 < 280; ++i$1)
+    flt[i$1] = 7;
+for (var i$1 = 280; i$1 < 288; ++i$1)
+    flt[i$1] = 8;
 // fixed distance tree
 var fdt = new u8(32);
-for (var i = 0; i < 32; ++i)
-    fdt[i] = 5;
+for (var i$1 = 0; i$1 < 32; ++i$1)
+    fdt[i$1] = 5;
 // fixed length map
 var flm = /*#__PURE__*/ hMap(flt, 9, 0);
 // fixed distance map
@@ -1110,93 +1110,6 @@ const mapCondition = (condition) => {
     return con;
 };
 
-class FeatureFlags {
-    constructor(app) {
-        this.app = app;
-        this.flags = [];
-        this.storageKey = '__openreplay_flags';
-        const persistFlags = this.app.sessionStorage.getItem(this.storageKey);
-        if (persistFlags) {
-            const persistFlagsStrArr = persistFlags.split(';').filter(Boolean);
-            this.flags = persistFlagsStrArr.map((flag) => JSON.parse(flag));
-        }
-    }
-    getFeatureFlag(flagName) {
-        return this.flags.find((flag) => flag.key === flagName);
-    }
-    isFlagEnabled(flagName) {
-        return this.flags.findIndex((flag) => flag.key === flagName) !== -1;
-    }
-    onFlagsLoad(cb) {
-        this.onFlagsCb = cb;
-    }
-    async reloadFlags(token) {
-        const persistFlagsStr = this.app.sessionStorage.getItem(this.storageKey);
-        const persistFlags = {};
-        if (persistFlagsStr) {
-            const persistArray = persistFlagsStr.split(';').filter(Boolean);
-            persistArray.forEach((flag) => {
-                const flagObj = JSON.parse(flag);
-                persistFlags[flagObj.key] = { key: flagObj.key, value: flagObj.value };
-            });
-        }
-        const sessionInfo = this.app.session.getInfo();
-        const userInfo = this.app.session.userInfo;
-        const requestObject = {
-            projectID: sessionInfo.projectID,
-            userID: sessionInfo.userID,
-            metadata: sessionInfo.metadata,
-            referrer: document.referrer,
-            os: userInfo.userOS,
-            device: userInfo.userDevice,
-            country: userInfo.userCountry,
-            state: userInfo.userState,
-            city: userInfo.userCity,
-            browser: userInfo.userBrowser,
-            persistFlags: persistFlags,
-        };
-        const authToken = token ?? this.app.session.getSessionToken();
-        const resp = await fetch(this.app.options.ingestPoint + '/v1/web/feature-flags', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                Authorization: `Bearer ${authToken}`,
-            },
-            body: JSON.stringify(requestObject),
-        });
-        if (resp.status === 200) {
-            const data = await resp.json();
-            return this.handleFlags(data.flags);
-        }
-    }
-    handleFlags(flags) {
-        const persistFlags = [];
-        flags.forEach((flag) => {
-            if (flag.is_persist)
-                persistFlags.push(flag);
-        });
-        let str = '';
-        const uniquePersistFlags = this.diffPersist(persistFlags);
-        uniquePersistFlags.forEach((flag) => {
-            str += `${JSON.stringify(flag)};`;
-        });
-        this.app.sessionStorage.setItem(this.storageKey, str);
-        this.flags = flags;
-        return this.onFlagsCb?.(flags);
-    }
-    clearPersistFlags() {
-        this.app.sessionStorage.removeItem(this.storageKey);
-    }
-    diffPersist(flags) {
-        const persistFlags = this.app.sessionStorage.getItem(this.storageKey);
-        if (!persistFlags)
-            return flags;
-        const persistFlagsStrArr = persistFlags.split(';').filter(Boolean);
-        const persistFlagsArr = persistFlagsStrArr.map((flag) => JSON.parse(flag));
-        return flags.filter((flag) => persistFlagsArr.findIndex((pf) => pf.key === flag.key) === -1);
-    }
-}
-
 const DEPRECATED_ATTRS = { htmlmasked: 'hidden', masked: 'obscured' };
 const IN_BROWSER = !(typeof window === 'undefined');
 const IS_FIREFOX = IN_BROWSER && navigator.userAgent.match(/firefox|fxios/i);
@@ -1712,6 +1625,13 @@ function SetNodeAttributeDictGlobal(id, name, value) {
         value,
     ];
 }
+function NodeAnimationResult(id, styles) {
+    return [
+        36 /* Messages.Type.NodeAnimationResult */,
+        id,
+        styles,
+    ];
+}
 function CSSInsertRule(id, rule, index) {
     return [
         37 /* Messages.Type.CSSInsertRule */,
@@ -1924,6 +1844,13 @@ function CustomIssue(name, payload) {
         payload,
     ];
 }
+function SetNodeSlot(id, slotID) {
+    return [
+        65 /* Messages.Type.SetNodeSlot */,
+        id,
+        slotID,
+    ];
+}
 function CSSInsertRuleURLBased(id, rule, index, baseURL) {
     return [
         67 /* Messages.Type.CSSInsertRuleURLBased */,
@@ -2243,6 +2170,7 @@ var _Messages = /*#__PURE__*/Object.freeze({
     NetworkRequest: NetworkRequest,
     NetworkRequestDeprecated: NetworkRequestDeprecated,
     NgRx: NgRx,
+    NodeAnimationResult: NodeAnimationResult,
     OTable: OTable,
     PageLoadTiming: PageLoadTiming,
     PageRenderTiming: PageRenderTiming,
@@ -2269,6 +2197,7 @@ var _Messages = /*#__PURE__*/Object.freeze({
     SetNodeData: SetNodeData,
     SetNodeFocus: SetNodeFocus,
     SetNodeScroll: SetNodeScroll,
+    SetNodeSlot: SetNodeSlot,
     SetPageLocation: SetPageLocation,
     SetPageLocationDeprecated: SetPageLocationDeprecated,
     SetPageVisibility: SetPageVisibility,
@@ -2417,986 +2346,6 @@ class TagWatcher {
     }
 }
 
-const bgStyle = {
-    position: 'fixed',
-    top: 0,
-    left: 0,
-    width: '100vw',
-    height: '100vh',
-    background: 'rgba(0, 0, 0, 0.40)',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    zIndex: 999999,
-    fontFamily: `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`,
-};
-const containerStyle = {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: '2rem',
-    alignItems: 'center',
-    padding: '1.5rem',
-    borderRadius: '2px',
-    border: '1px solid rgb(255 255 255 / var(--tw-bg-opacity, 1))',
-    background: '#FFF',
-    width: '22rem',
-};
-const containerWidgetStyle = {
-    display: 'flex',
-    'flex-direction': 'column',
-    gap: 'unset',
-    'align-items': 'center',
-    padding: 'unset',
-    fontFamily: `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`,
-    'border-radius': '2px',
-    border: '1px solid rgb(255 255 255 / var(--tw-bg-opacity, 1))',
-    background: 'rgba(255, 255, 255, 0.75)',
-    width: '22rem',
-};
-const titleStyle = {
-    fontFamily: 'Verdana, sans-serif',
-    fontSize: '1.25rem',
-    fontStyle: 'normal',
-    fontWeight: '500',
-    lineHeight: '1.75rem',
-    color: 'rgba(0, 0, 0, 0.85)',
-};
-const descriptionStyle = {
-    borderTop: '1px solid rgba(0, 0, 0, 0.06)',
-    borderBottom: '1px solid rgba(0, 0, 0, 0.06)',
-    padding: '1.25rem 0rem',
-    color: 'rgba(0, 0, 0, 0.85)',
-    fontFamily: 'Verdana, sans-serif',
-    fontSize: '13px',
-    fontStyle: 'normal',
-    fontWeight: '400',
-    lineHeight: 'auto',
-    whiteSpace: 'pre-wrap',
-};
-const buttonStyle = {
-    display: 'flex',
-    padding: '0.4rem 0.9375rem',
-    justifyContent: 'center',
-    alignItems: 'center',
-    gap: '0.625rem',
-    borderRadius: '0.25rem',
-    border: '1px solid #394EFF',
-    background: '#394EFF',
-    boxShadow: '0px 2px 0px 0px rgba(0, 0, 0, 0.04)',
-    color: '#FFF',
-    textAlign: 'center',
-    fontFamily: 'Verdana, sans-serif',
-    fontSize: '1rem',
-    fontStyle: 'normal',
-    fontWeight: '500',
-    lineHeight: '1.5rem',
-    cursor: 'pointer',
-};
-const sectionTitleStyle = {
-    fontFamily: 'Verdana, sans-serif',
-    fontSize: '13px',
-    fontWeight: '500',
-    lineHeight: 'auto',
-    display: 'flex',
-    justifyContent: 'space-between',
-    width: '100%',
-    cursor: 'pointer',
-};
-const contentStyle = {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'flex-start',
-    gap: '0.625rem',
-    fontSize: '13px',
-    lineHeight: 'auto',
-};
-// New widget styles
-const titleWidgetStyle = {
-    padding: '0.5rem',
-    gap: '0.5rem',
-    fontFamily: 'Verdana, sans-serif',
-    fontSize: '16px',
-    fontStyle: 'normal',
-    fontWeight: '500',
-    lineHeight: 'auto',
-    color: 'white',
-    display: 'flex',
-    alignItems: 'center',
-    width: '100%',
-    borderRadius: '2px',
-    background: 'rgba(0, 0, 0, 0.75)',
-    boxSizing: 'border-box',
-};
-const descriptionWidgetStyle = {
-    boxSizing: 'border-box',
-    display: 'block',
-    width: '100%',
-    borderBottom: '1px solid rgb(255 255 255 / var(--tw-bg-opacity, 1))',
-    background: '#FFF',
-    padding: '0.65rem',
-    alignSelf: 'stretch',
-    color: '#000',
-    fontFamily: 'Verdana, sans-serif',
-    // fontSize: '0.875rem',
-    fontStyle: 'normal',
-    fontWeight: '400',
-    // lineHeight: '1.375rem',
-};
-const endSectionStyle = {
-    ...descriptionWidgetStyle,
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    gap: '0.625rem',
-};
-const symbolIcon = {
-    fontSize: '1.25rem',
-    fontWeight: '500',
-    cursor: 'pointer',
-    color: '#394EFF',
-};
-const buttonWidgetStyle = {
-    display: 'flex',
-    padding: '0.4rem 0.9375rem',
-    justifyContent: 'center',
-    alignItems: 'center',
-    gap: '0.625rem',
-    borderRadius: '0.25rem',
-    border: '1px solid #394EFF',
-    background: '#394EFF',
-    boxShadow: '0px 2px 0px 0px rgba(0, 0, 0, 0.04)',
-    color: '#FFF',
-    textAlign: 'center',
-    fontFamily: 'Verdana, sans-serif',
-    fontSize: '1rem',
-    fontStyle: 'normal',
-    fontWeight: '500',
-    lineHeight: '1.5rem',
-    width: '100%',
-    boxSizing: 'border-box',
-    cursor: 'pointer',
-};
-const stopWidgetStyle = {
-    marginTop: '1rem',
-    marginBottom: '1rem',
-    cursor: 'pointer',
-    display: 'block',
-    fontWeight: '500',
-    fontSize: '13px!important',
-    lineHeight: 'auto',
-};
-const paginationStyle = {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    gap: '1rem',
-    padding: '0.5rem',
-    width: '100%',
-    boxSizing: 'border-box',
-};
-const taskNumberActive = {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: '6.25em',
-    outline: '1px solid #394EFF',
-    fontSize: '13px',
-    height: '24px',
-    width: '24px',
-};
-const taskNumberDone = {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: '6.25em',
-    outline: '1px solid #D2DFFF',
-    boxShadow: '0px 2px 0px 0px rgba(0, 0, 0, 0.04)',
-    background: '#D2DFFF',
-    fontSize: '13px',
-    height: '24px',
-    width: '24px',
-};
-const taskDescriptionCard = {
-    borderRadius: '0.375rem',
-    border: '1px solid rgba(0, 0, 0, 0.06)',
-    background: '#F5F7FF',
-    boxShadow: '0px 2px 0px 0px rgba(0, 0, 0, 0.04)',
-    display: 'flex',
-    flexDirection: 'column',
-    padding: '0.625rem 0.9375rem',
-    gap: '0.5rem',
-    alignSelf: 'stretch',
-};
-const taskTextStyle = {
-    fontWeight: 'bold',
-};
-const taskDescriptionStyle = {
-    fontSize: '13px',
-    lineHeight: 'auto',
-};
-const taskButtonStyle = {
-    marginRight: '0.5rem',
-    cursor: 'pointer',
-    color: '#394EFF',
-    textAlign: 'center',
-    fontFamily: 'Verdana, sans-serif',
-    fontSize: '13px',
-    fontStyle: 'normal',
-    fontWeight: '500',
-    lineHeight: 'auto',
-};
-const taskButtonBorderedStyle = {
-    ...taskButtonStyle,
-    display: 'flex',
-    padding: '0.25rem 0.9375rem',
-    justifyContent: 'center',
-    alignItems: 'center',
-    gap: '0.5rem',
-    borderRadius: '0.25rem',
-    border: '1px solid #394EFF',
-};
-const taskButtonsRow = {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    width: '100%',
-    boxSizing: 'border-box',
-};
-const spinnerStyles = {
-    border: '4px solid rgba(255, 255, 255, 0.4)',
-    width: '16px',
-    height: '16px',
-    borderRadius: '50%',
-    borderLeftColor: '#fff',
-    animation: 'spin 0.5s linear infinite',
-};
-
-const Quality = {
-    Standard: { width: 1280, height: 720 }};
-class Recorder {
-    constructor(app) {
-        this.app = app;
-        this.mediaRecorder = null;
-        this.recordedChunks = [];
-        this.stream = null;
-        this.recStartTs = null;
-    }
-    async startRecording(fps, quality, micReq, camReq) {
-        this.recStartTs = this.app.timestamp();
-        const videoConstraints = quality;
-        try {
-            this.stream = await navigator.mediaDevices.getUserMedia({
-                video: camReq ? { ...videoConstraints, frameRate: { ideal: fps } } : false,
-                audio: micReq,
-            });
-            this.mediaRecorder = new MediaRecorder(this.stream, {
-                mimeType: 'video/webm;codecs=vp9',
-            });
-            this.recordedChunks = [];
-            this.mediaRecorder.ondataavailable = (event) => {
-                if (event.data.size > 0) {
-                    this.recordedChunks.push(event.data);
-                }
-            };
-            this.mediaRecorder.start();
-        }
-        catch (error) {
-            console.error(error);
-        }
-    }
-    async stopRecording() {
-        return new Promise((resolve) => {
-            if (!this.mediaRecorder)
-                return;
-            this.mediaRecorder.onstop = () => {
-                const blob = new Blob(this.recordedChunks, {
-                    type: 'video/webm',
-                });
-                resolve(blob);
-            };
-            this.mediaRecorder.stop();
-        });
-    }
-    async sendToAPI() {
-        const blob = await this.stopRecording();
-        // const formData = new FormData()
-        // formData.append('file', blob, 'record.webm')
-        // formData.append('start', this.recStartTs?.toString() ?? '')
-        return fetch(`${this.app.options.ingestPoint}/v1/web/uxt/upload-url`, {
-            headers: {
-                Authorization: `Bearer ${this.app.session.getSessionToken()}`,
-            },
-        })
-            .then((r) => {
-            if (r.ok) {
-                return r.json();
-            }
-            else {
-                throw new Error('Failed to get upload url');
-            }
-        })
-            .then(({ url }) => {
-            return fetch(url, {
-                method: 'PUT',
-                headers: {
-                    'Content-Type': 'video/webm',
-                },
-                body: blob,
-            });
-        })
-            .catch(console.error)
-            .finally(() => {
-            this.discard();
-        });
-    }
-    async saveToFile(fileName = 'recorded-video.webm') {
-        const blob = await this.stopRecording();
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.style.display = 'none';
-        a.href = url;
-        a.download = fileName;
-        document.body.appendChild(a);
-        a.click();
-        window.URL.revokeObjectURL(url);
-        document.body.removeChild(a);
-    }
-    discard() {
-        this.mediaRecorder?.stop();
-        this.stream?.getTracks().forEach((track) => track.stop());
-    }
-}
-
-// @ts-nocheck
-function attachDND(element, dragTarget) {
-    dragTarget.onmousedown = function (event) {
-        const clientRect = element.getBoundingClientRect();
-        const shiftX = event.clientX - clientRect.left;
-        const shiftY = event.clientY - clientRect.top;
-        element.style.position = 'fixed';
-        element.style.zIndex = 99999999999999;
-        moveAt(event.pageX, event.pageY);
-        function moveAt(pageX, pageY) {
-            let leftC = pageX - shiftX;
-            let topC = pageY - shiftY;
-            if (leftC <= 5)
-                leftC = 5;
-            if (topC <= 5)
-                topC = 5;
-            if (leftC >= window.innerWidth - clientRect.width)
-                leftC = window.innerWidth - clientRect.width;
-            if (topC >= window.innerHeight - clientRect.height)
-                topC = window.innerHeight - clientRect.height;
-            element.style.left = `${leftC}px`;
-            element.style.top = `${topC}px`;
-        }
-        function onMouseMove(event) {
-            moveAt(event.pageX, event.pageY);
-        }
-        document.addEventListener('mousemove', onMouseMove);
-        const clearAll = () => {
-            document.removeEventListener('mousemove', onMouseMove);
-            document.removeEventListener('mouseup', clearAll);
-        };
-        document.addEventListener('mouseup', clearAll);
-    };
-    dragTarget.ondragstart = function () {
-        return false;
-    };
-}
-
-function generateGrid() {
-    const grid = document.createElement('div');
-    grid.className = 'grid';
-    for (let i = 0; i < 16; i++) {
-        const cell = document.createElement('div');
-        Object.assign(cell.style, {
-            width: '2px',
-            height: '2px',
-            borderRadius: '10px',
-            background: 'white',
-        });
-        cell.className = 'cell';
-        grid.appendChild(cell);
-    }
-    Object.assign(grid.style, {
-        display: 'grid',
-        gridTemplateColumns: 'repeat(4, 1fr)',
-        gridTemplateRows: 'repeat(4, 1fr)',
-        gap: '2px',
-        cursor: 'grab',
-    });
-    return grid;
-}
-function generateChevron() {
-    const triangle = document.createElement('div');
-    Object.assign(triangle.style, {
-        width: '0',
-        height: '0',
-        borderLeft: '7px solid transparent',
-        borderRight: '7px solid transparent',
-        borderBottom: '7px solid white',
-    });
-    const container = document.createElement('div');
-    container.appendChild(triangle);
-    Object.assign(container.style, {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        width: '16px',
-        height: '16px',
-        cursor: 'pointer',
-        marginLeft: 'auto',
-        transform: 'rotate(180deg)',
-    });
-    return container;
-}
-function addKeyframes() {
-    const styleSheet = document.createElement('style');
-    styleSheet.type = 'text/css';
-    styleSheet.innerText = `@keyframes spin {
-        0% { transform: rotate(0deg); }
-        100% { transform: rotate(360deg); }
-    }`;
-    document.head.appendChild(styleSheet);
-}
-function createSpinner() {
-    addKeyframes();
-    const spinner = document.createElement('div');
-    spinner.classList.add('spinner');
-    Object.assign(spinner.style, spinnerStyles);
-    return spinner;
-}
-function createElement(tag, className, styles, textContent, id) {
-    const element = document.createElement(tag);
-    element.className = className;
-    Object.assign(element.style, styles);
-    if (textContent) {
-        element.textContent = textContent;
-    }
-    if (id) {
-        element.id = id;
-    }
-    return element;
-}
-const TEST_START = 'or_uxt_test_start';
-const TASK_IND = 'or_uxt_task_index';
-const SESSION_ID = 'or_uxt_session_id';
-const TEST_ID = 'or_uxt_test_id';
-
-class SignalManager {
-    constructor(ingestPoint, getTimestamp, token, testId, storageKey, setStorageKey, removeStorageKey, getStorageKey, getSessionId) {
-        this.ingestPoint = ingestPoint;
-        this.getTimestamp = getTimestamp;
-        this.token = token;
-        this.testId = testId;
-        this.storageKey = storageKey;
-        this.setStorageKey = setStorageKey;
-        this.removeStorageKey = removeStorageKey;
-        this.getStorageKey = getStorageKey;
-        this.getSessionId = getSessionId;
-        this.durations = {
-            testStart: 0,
-            tasks: [],
-        };
-        this.getDurations = () => {
-            return this.durations;
-        };
-        this.setDurations = (durations) => {
-            this.durations.testStart = durations.testStart;
-            this.durations.tasks = durations.tasks;
-        };
-        this.signalTask = (taskId, status, taskAnswer) => {
-            if (!taskId)
-                return console.error('User Testing: No Task ID Given');
-            const taskStart = this.durations.tasks.find((t) => t.taskId === taskId);
-            const timestamp = this.getTimestamp();
-            const duration = taskStart ? timestamp - taskStart.started : 0;
-            return fetch(`${this.ingestPoint}/v1/web/uxt/signals/task`, {
-                method: 'POST',
-                headers: {
-                    // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-                    Authorization: `Bearer ${this.token}`,
-                },
-                body: JSON.stringify({
-                    testId: this.testId,
-                    taskId,
-                    status,
-                    duration,
-                    timestamp,
-                    taskAnswer,
-                }),
-            });
-        };
-        this.signalTest = (status) => {
-            const timestamp = this.getTimestamp();
-            if (status === 'begin' && this.testId) {
-                const sessionId = this.getSessionId();
-                this.setStorageKey(SESSION_ID, sessionId);
-                this.setStorageKey(this.storageKey, this.testId.toString());
-                this.setStorageKey(TEST_START, timestamp.toString());
-            }
-            else {
-                this.removeStorageKey(this.storageKey);
-                this.removeStorageKey(TASK_IND);
-                this.removeStorageKey(TEST_START);
-            }
-            const start = this.durations.testStart || timestamp;
-            const duration = timestamp - start;
-            return fetch(`${this.ingestPoint}/v1/web/uxt/signals/test`, {
-                method: 'POST',
-                headers: {
-                    // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-                    Authorization: `Bearer ${this.token}`,
-                },
-                body: JSON.stringify({
-                    testId: this.testId,
-                    status,
-                    duration,
-                    timestamp,
-                }),
-            });
-        };
-        const possibleStart = this.getStorageKey(TEST_START);
-        if (possibleStart) {
-            this.durations.testStart = parseInt(possibleStart, 10);
-        }
-    }
-}
-
-class UserTestManager {
-    constructor(app, storageKey) {
-        this.app = app;
-        this.storageKey = storageKey;
-        this.bg = createElement('div', 'bg', bgStyle, undefined, '__or_ut_bg');
-        this.container = createElement('div', 'container', containerStyle, undefined, '__or_ut_ct');
-        this.widgetGuidelinesVisible = true;
-        this.widgetTasksVisible = false;
-        this.widgetVisible = true;
-        this.isActive = false;
-        this.descriptionSection = null;
-        this.taskSection = null;
-        this.endSection = null;
-        this.stopButton = null;
-        this.stopButtonContainer = null;
-        this.test = null;
-        this.testId = null;
-        this.signalManager = null;
-        this.getTest = (id, token, inProgress) => {
-            this.testId = id;
-            const ingest = this.app.options.ingestPoint;
-            return fetch(`${ingest}/v1/web/uxt/test/${id}`, {
-                headers: {
-                    Authorization: `Bearer ${token}`,
-                },
-            })
-                .then((res) => res.json())
-                .then(({ test }) => {
-                this.isActive = true;
-                this.test = test;
-                this.signalManager = new SignalManager(this.app.options.ingestPoint, () => this.app.timestamp(), token, id, this.storageKey, (k, v) => this.app.localStorage.setItem(k, v), (k) => this.app.localStorage.removeItem(k), (k) => this.app.localStorage.getItem(k), () => this.app.getSessionID());
-                this.createGreeting(test.title, test.reqMic, test.reqCamera);
-                if (inProgress) {
-                    if (test.reqMic || test.reqCamera) {
-                        void this.userRecorder.startRecording(30, Quality.Standard, test.reqMic, test.reqCamera);
-                    }
-                    this.showWidget(test.description, test.tasks, true);
-                    this.showTaskSection();
-                }
-            })
-                .then(() => id)
-                .catch((err) => {
-                console.log('OR: Error fetching test', err);
-            });
-        };
-        this.hideTaskSection = () => false;
-        this.showTaskSection = () => true;
-        this.collapseWidget = () => false;
-        this.removeGreeting = () => false;
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        this.toggleDescriptionVisibility = () => { };
-        this.currentTaskIndex = 0;
-        this.userRecorder = new Recorder(app);
-        const sessionId = this.app.getSessionID();
-        const savedSessionId = this.app.localStorage.getItem(SESSION_ID);
-        if (sessionId !== savedSessionId) {
-            this.app.localStorage.removeItem(this.storageKey);
-            this.app.localStorage.removeItem(SESSION_ID);
-            this.app.localStorage.removeItem(TEST_ID);
-            this.app.localStorage.removeItem(TASK_IND);
-            this.app.localStorage.removeItem(TEST_START);
-        }
-        const taskIndex = this.app.localStorage.getItem(TASK_IND);
-        if (taskIndex) {
-            this.currentTaskIndex = parseInt(taskIndex, 10);
-        }
-    }
-    getTestId() {
-        return this.testId;
-    }
-    createGreeting(title, micRequired, cameraRequired) {
-        const titleElement = createElement('div', 'title', titleStyle, title);
-        const descriptionElement = createElement('div', 'description', descriptionStyle, `Welcome, you're here to help us improve, not to be judged. Your insights matter!\n
-📹 We're recording this browser tab to learn from your experience.
-🎤 Please enable mic and camera if asked, to give us a complete picture.`);
-        const buttonElement = createElement('div', 'button', buttonStyle, 'Read guidelines to begin');
-        this.removeGreeting = () => {
-            // this.container.innerHTML = ''
-            if (micRequired || cameraRequired) {
-                void this.userRecorder.startRecording(30, Quality.Standard, micRequired, cameraRequired);
-            }
-            this.container.removeChild(buttonElement);
-            this.container.removeChild(descriptionElement);
-            this.container.removeChild(titleElement);
-            return false;
-        };
-        buttonElement.onclick = () => {
-            this.removeGreeting();
-            const durations = this.signalManager?.getDurations();
-            if (durations && this.signalManager) {
-                durations.testStart = this.app.timestamp();
-                this.signalManager.setDurations(durations);
-            }
-            void this.signalManager?.signalTest('begin');
-            this.container.style.fontFamily = `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`;
-            Object.assign(this.container.style, containerWidgetStyle);
-            this.showWidget(this.test?.guidelines || '', this.test?.tasks || []);
-        };
-        this.container.append(titleElement, descriptionElement, buttonElement);
-        this.bg.appendChild(this.container);
-        document.body.appendChild(this.bg);
-    }
-    showWidget(guidelines, tasks, inProgress) {
-        this.container.innerHTML = '';
-        Object.assign(this.bg.style, {
-            position: 'fixed',
-            zIndex: 99999999999999,
-            right: '8px',
-            left: 'unset',
-            width: 'fit-content',
-            top: '8px',
-            height: 'fit-content',
-            background: 'unset',
-            display: 'unset',
-            alignItems: 'unset',
-            justifyContent: 'unset',
-        });
-        // Create title section
-        const titleSection = this.createTitleSection();
-        this.container.style.fontFamily = `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`;
-        Object.assign(this.container.style, containerWidgetStyle);
-        const descriptionSection = this.createDescriptionSection(guidelines);
-        const tasksSection = this.createTasksSection(tasks);
-        const stopButton = createElement('div', 'stop_bn_or', stopWidgetStyle, 'Abort Session');
-        const stopContainer = createElement('div', 'stop_ct_or', { fontSize: '13px!important' });
-        stopContainer.style.fontSize = '13px';
-        stopContainer.append(stopButton);
-        this.container.append(titleSection, descriptionSection, tasksSection, stopContainer);
-        this.taskSection = tasksSection;
-        this.descriptionSection = descriptionSection;
-        this.stopButton = stopButton;
-        this.stopButtonContainer = stopContainer;
-        stopButton.onclick = () => {
-            this.userRecorder.discard();
-            void this.signalManager?.signalTest('skipped');
-            document.body.removeChild(this.bg);
-            window.close();
-        };
-        if (!inProgress) {
-            this.hideTaskSection();
-        }
-        else {
-            this.toggleDescriptionVisibility();
-        }
-    }
-    createTitleSection() {
-        const title = createElement('div', 'title', titleWidgetStyle);
-        const leftIcon = generateGrid();
-        const titleText = createElement('div', 'title_text', {
-            maxWidth: '19rem',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            width: '100%',
-            fontSize: 16,
-            lineHeight: 'auto',
-            cursor: 'pointer',
-        }, this.test?.title);
-        const rightIcon = generateChevron();
-        title.append(leftIcon, titleText, rightIcon);
-        const toggleWidget = (isVisible) => {
-            this.widgetVisible = isVisible;
-            this.container.style.fontFamily = `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`;
-            Object.assign(this.container.style, this.widgetVisible
-                ? containerWidgetStyle
-                : { border: 'none', background: 'none', padding: 0 });
-            if (this.taskSection) {
-                Object.assign(this.taskSection.style, this.widgetVisible ? descriptionWidgetStyle : { display: 'none' });
-            }
-            if (this.descriptionSection) {
-                Object.assign(this.descriptionSection.style, this.widgetVisible ? descriptionWidgetStyle : { display: 'none' });
-            }
-            if (this.endSection) {
-                Object.assign(this.endSection.style, this.widgetVisible ? descriptionWidgetStyle : { display: 'none' });
-            }
-            if (this.stopButton) {
-                Object.assign(this.stopButton.style, this.widgetVisible ? stopWidgetStyle : { display: 'none' });
-            }
-            return isVisible;
-        };
-        const collapseWidget = () => {
-            Object.assign(rightIcon.style, {
-                transform: this.widgetVisible ? 'rotate(0deg)' : 'rotate(180deg)',
-            });
-            toggleWidget(!this.widgetVisible);
-        };
-        titleText.onclick = collapseWidget;
-        rightIcon.onclick = collapseWidget;
-        attachDND(this.bg, leftIcon);
-        this.collapseWidget = () => toggleWidget(false);
-        return title;
-    }
-    createDescriptionSection(guidelines) {
-        const section = createElement('div', 'description_section_or', descriptionWidgetStyle);
-        const titleContainer = createElement('div', 'description_s_title_or', sectionTitleStyle);
-        const title = createElement('div', 'title', {
-            fontSize: 13,
-            fontWeight: 500,
-            lineHeight: 'auto',
-        }, 'Introduction & Guidelines');
-        const icon = createElement('div', 'icon', symbolIcon, '-');
-        const content = createElement('div', 'content', contentStyle);
-        const descriptionC = createElement('div', 'text_description', {
-            maxHeight: '250px',
-            overflowY: 'auto',
-            whiteSpace: 'pre-wrap',
-            fontSize: 13,
-            color: '#454545',
-            lineHeight: 'auto',
-        });
-        descriptionC.innerHTML = guidelines;
-        const button = createElement('div', 'button_begin_or', buttonWidgetStyle, 'Begin Test');
-        titleContainer.append(title, icon);
-        content.append(descriptionC, button);
-        section.append(titleContainer, content);
-        const toggleDescriptionVisibility = () => {
-            this.widgetGuidelinesVisible = !this.widgetGuidelinesVisible;
-            icon.textContent = this.widgetGuidelinesVisible ? '-' : '+';
-            Object.assign(content.style, this.widgetGuidelinesVisible ? contentStyle : { display: 'none' });
-        };
-        titleContainer.onclick = toggleDescriptionVisibility;
-        this.toggleDescriptionVisibility = () => {
-            this.widgetGuidelinesVisible = false;
-            icon.textContent = this.widgetGuidelinesVisible ? '-' : '+';
-            Object.assign(content.style, this.widgetGuidelinesVisible ? contentStyle : { display: 'none' });
-            content.removeChild(button);
-        };
-        button.onclick = () => {
-            toggleDescriptionVisibility();
-            if (this.test) {
-                const durations = this.signalManager?.getDurations();
-                const taskDurationInd = durations
-                    ? durations.tasks.findIndex((t) => this.test && t.taskId === this.test.tasks[0].task_id)
-                    : null;
-                if (durations && taskDurationInd === -1) {
-                    durations.tasks.push({
-                        taskId: this.test.tasks[0].task_id,
-                        started: this.app.timestamp(),
-                    });
-                    this.signalManager?.setDurations(durations);
-                }
-                void this.signalManager?.signalTask(this.test.tasks[0].task_id, 'begin');
-            }
-            this.showTaskSection();
-            content.removeChild(button);
-        };
-        return section;
-    }
-    createTasksSection(tasks) {
-        this.container.style.fontFamily = `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`;
-        Object.assign(this.container.style, containerWidgetStyle);
-        const section = createElement('div', 'task_section_or', descriptionWidgetStyle);
-        const titleContainer = createElement('div', 'description_t_title_or', sectionTitleStyle);
-        const title = createElement('div', 'title', {
-            fontSize: '13px',
-            fontWeight: '500',
-            lineHeight: 'auto',
-        }, 'Tasks');
-        const icon = createElement('div', 'icon', symbolIcon, '-');
-        const content = createElement('div', 'content', contentStyle);
-        const pagination = createElement('div', 'pagination', paginationStyle);
-        // const leftArrow = createElement('span', 'leftArrow', {}, '<')
-        // const rightArrow = createElement('span', 'rightArrow', {}, '>')
-        const taskCard = createElement('div', 'taskCard', taskDescriptionCard);
-        const taskText = createElement('div', 'taskText', taskTextStyle);
-        const taskDescription = createElement('div', 'taskDescription', taskDescriptionStyle);
-        const taskButtons = createElement('div', 'taskButtons', taskButtonsRow);
-        const inputTitle = createElement('div', 'taskText', taskTextStyle);
-        inputTitle.textContent = 'Your answer';
-        const inputArea = createElement('textarea', 'taskDescription', {
-            resize: 'vertical',
-        });
-        const inputContainer = createElement('div', 'inputArea', taskDescriptionCard);
-        inputContainer.append(inputTitle, inputArea);
-        const closePanelButton = createElement('div', 'closePanelButton', taskButtonStyle, 'Collapse Panel');
-        const nextButton = createElement('div', 'nextButton', taskButtonBorderedStyle, 'Done, Next');
-        titleContainer.append(title, icon);
-        taskCard.append(taskText, taskDescription);
-        taskButtons.append(closePanelButton, nextButton);
-        content.append(pagination, taskCard, inputContainer, taskButtons);
-        section.append(titleContainer, content);
-        const updateTaskContent = () => {
-            const task = tasks[this.currentTaskIndex];
-            taskText.textContent = task.title;
-            taskDescription.textContent = task.description;
-            if (task.allow_typing) {
-                inputContainer.style.display = 'flex';
-            }
-            else {
-                inputContainer.style.display = 'none';
-            }
-        };
-        // pagination.appendChild(leftArrow)
-        tasks.forEach((_, index) => {
-            const pageNumber = createElement('span', `or_task_${index}`, {
-                outline: '1px solid #efefef',
-                fontSize: '13px',
-                height: '24px',
-                width: '24px',
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-                justifyContent: 'center',
-                borderRadius: '6.25em',
-            }, (index + 1).toString());
-            pageNumber.id = `or_task_${index}`;
-            pagination.append(pageNumber);
-        });
-        // pagination.appendChild(rightArrow)
-        const toggleTasksVisibility = () => {
-            this.widgetTasksVisible = !this.widgetTasksVisible;
-            icon.textContent = this.widgetTasksVisible ? '-' : '+';
-            Object.assign(content.style, this.widgetTasksVisible ? contentStyle : { display: 'none' });
-        };
-        this.hideTaskSection = () => {
-            icon.textContent = '+';
-            Object.assign(content.style, {
-                display: 'none',
-            });
-            this.widgetTasksVisible = false;
-            return false;
-        };
-        this.showTaskSection = () => {
-            icon.textContent = '-';
-            Object.assign(content.style, contentStyle);
-            this.widgetTasksVisible = true;
-            return true;
-        };
-        const highlightActive = () => {
-            const activeTaskEl = document.getElementById(`or_task_${this.currentTaskIndex}`);
-            if (activeTaskEl) {
-                Object.assign(activeTaskEl.style, taskNumberActive);
-            }
-            for (let i = 0; i < this.currentTaskIndex; i++) {
-                const taskEl = document.getElementById(`or_task_${i}`);
-                if (taskEl) {
-                    Object.assign(taskEl.style, taskNumberDone);
-                }
-            }
-        };
-        titleContainer.onclick = toggleTasksVisibility;
-        closePanelButton.onclick = this.collapseWidget;
-        nextButton.onclick = () => {
-            const textAnswer = tasks[this.currentTaskIndex].allow_typing ? inputArea.value : undefined;
-            inputArea.value = '';
-            void this.signalManager?.signalTask(tasks[this.currentTaskIndex].task_id, 'done', textAnswer);
-            if (this.currentTaskIndex < tasks.length - 1) {
-                this.currentTaskIndex++;
-                updateTaskContent();
-                const durations = this.signalManager?.getDurations();
-                if (durations &&
-                    durations.tasks.findIndex((t) => t.taskId === tasks[this.currentTaskIndex].task_id) === -1) {
-                    durations.tasks.push({
-                        taskId: tasks[this.currentTaskIndex].task_id,
-                        started: this.app.timestamp(),
-                    });
-                    this.signalManager?.setDurations(durations);
-                }
-                void this.signalManager?.signalTask(tasks[this.currentTaskIndex].task_id, 'begin');
-                highlightActive();
-            }
-            else {
-                this.showEndSection();
-            }
-            this.app.localStorage.setItem('or_uxt_task_index', this.currentTaskIndex.toString());
-        };
-        setTimeout(() => {
-            const firstTaskEl = document.getElementById('or_task_0');
-            if (firstTaskEl) {
-                Object.assign(firstTaskEl.style, taskNumberActive);
-            }
-            updateTaskContent();
-            highlightActive();
-        }, 1);
-        return section;
-    }
-    showEndSection() {
-        let isLoading = true;
-        void this.signalManager?.signalTest('done');
-        const section = createElement('div', 'end_section_or', endSectionStyle);
-        const title = createElement('div', 'end_title_or', {
-            fontSize: '1.25rem',
-            fontWeight: '500',
-        }, 'Thank you! 👍');
-        const description = createElement('div', 'end_description_or', {}, this.test?.conclusion ??
-            'Thank you for participating in our usability test. Your feedback has been captured and will be used to enhance our website. \n' +
-                '\n' +
-                'We appreciate your time and valuable input.');
-        const button = createElement('div', 'end_button_or', buttonWidgetStyle, 'Submitting Feedback');
-        const spinner = createSpinner();
-        button.appendChild(spinner);
-        if (this.test?.reqMic || this.test?.reqCamera) {
-            void this.userRecorder
-                .sendToAPI()
-                .then(() => {
-                button.removeChild(spinner);
-                button.textContent = 'End Session';
-                isLoading = false;
-            })
-                .catch((err) => {
-                console.error(err);
-                button.removeChild(spinner);
-                button.textContent = 'End Session';
-                isLoading = false;
-            });
-        }
-        else {
-            button.removeChild(spinner);
-            button.textContent = 'End Session';
-            isLoading = false;
-        }
-        if (this.taskSection) {
-            this.container.removeChild(this.taskSection);
-        }
-        if (this.descriptionSection) {
-            this.container.removeChild(this.descriptionSection);
-        }
-        if (this.stopButton && this.stopButtonContainer) {
-            this.container.removeChild(this.stopButtonContainer);
-        }
-        button.onclick = () => {
-            if (isLoading)
-                return;
-            window.close();
-            document.body.removeChild(this.bg);
-        };
-        section.append(title, description, button);
-        this.endSection = section;
-        this.container.append(section);
-    }
-}
-
 //@ts-ignore
 function isNode(sth) {
     return !!sth && sth.nodeType != null;
@@ -3729,6 +2678,27 @@ class Maintainer {
     }
 }
 
+// 4 levels, 128 frames between each level, 8_388_608 nodes per page
+// lets hope no one will need more :D
+const BITS_LEVEL = 2; // 4
+const BITS_ORDER = 7; // 128
+const BITS_NODE = 22; // 8_388_608
+const SHIFT_ORDER = BITS_NODE;
+const SHIFT_LEVEL = BITS_NODE + BITS_ORDER;
+const MASK_NODE = (1 << BITS_NODE) - 1;
+const MASK_ORDER = (1 << BITS_ORDER) - 1;
+const MASK_LEVEL = (1 << BITS_LEVEL) - 1;
+function pack(level, order, nodeId) {
+    if (level < 0 || level > MASK_LEVEL)
+        throw new RangeError('OR: nesting level overflow, max 4');
+    if (order < 0 || order > MASK_ORDER)
+        throw new RangeError('OR: frame order overflow, max 128');
+    const v = ((level & MASK_LEVEL) << SHIFT_LEVEL) |
+        ((order & MASK_ORDER) << SHIFT_ORDER) |
+        (nodeId & MASK_NODE);
+    return v >>> 0;
+}
+
 class Nodes {
     constructor(params) {
         this.nodes = new Map();
@@ -3756,6 +2726,9 @@ class Nodes {
             }
             listeners.push([type, listener, useCapture]);
         };
+        this.createFrameId = (level, frameOrder) => {
+            return pack(level, frameOrder, 0);
+        };
         this.unregisterNode = (node) => {
             const id = node[this.node_id];
             if (id !== undefined) {
@@ -3776,16 +2749,8 @@ class Nodes {
         this.maintainer = new Maintainer(this.nodes, this.unregisterNode, params.maintainer);
         this.maintainer.start();
     }
-    syntheticMode(frameOrder) {
-        const maxSafeNumber = Number.MAX_SAFE_INTEGER;
-        const placeholderSize = 99999999;
-        const nextFrameId = placeholderSize * frameOrder;
-        // I highly doubt that this will ever happen,
-        // but it will be easier to debug if it does
-        if (nextFrameId > maxSafeNumber) {
-            throw new Error('Placeholder id overflow');
-        }
-        this.nextNodeId = nextFrameId;
+    crossdomainMode(level, frameOrder) {
+        this.nextNodeId = this.createFrameId(level, frameOrder);
     }
     registerNode(node) {
         let id = node[this.node_id];
@@ -4220,9 +3185,24 @@ async function parseUseEl(useElement, mode, domParser) {
             return;
         }
         let [url, symbolId] = href.split('#');
+        if (!url && !symbolId) {
+            console.warn('Openreplay: Invalid xlink:href or href found on <use>.');
+            return;
+        }
+        if (iconCache[symbolId]) {
+            return iconCache[symbolId];
+        }
         // happens if svg spritemap is local, fastest case for us
         if (!url && symbolId) {
-            const symbol = document.querySelector(href);
+            const hasHashtag = href.startsWith('#');
+            let escapedURL;
+            if (hasHashtag) {
+                escapedURL = `#${CSS.escape(href.substring(1))}`;
+            }
+            else {
+                escapedURL = CSS.escape(href);
+            }
+            const symbol = document.querySelector(escapedURL);
             if (symbol) {
                 const inlineSvg = `
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="${symbol.getAttribute('viewBox') || '0 0 24 24'}">
@@ -4237,13 +3217,6 @@ async function parseUseEl(useElement, mode, domParser) {
                 return;
             }
         }
-        if (!url && !symbolId) {
-            console.warn('Openreplay: Invalid xlink:href or href found on <use>.');
-            return;
-        }
-        if (iconCache[symbolId]) {
-            return iconCache[symbolId];
-        }
         let svgDoc;
         if (svgUrlCache[url]) {
             if (svgUrlCache[url] === 1) {
@@ -4343,6 +3316,7 @@ class Observer {
         this.indexes = [];
         this.attributesMap = new Map();
         this.textSet = new Set();
+        this.slotMap = new Map();
         this.disableSprites = false;
         /**
          * this option means that, instead of using link element with href to load css,
@@ -4352,7 +3326,9 @@ class Observer {
         this.inlineRemoteCss = false;
         this.inlinerOptions = undefined;
         this.domParser = new DOMParser();
+        this.throttling = true;
         this.throttledSetNodeData = throttleWithTrailing((id, parentElement, data) => this.sendNodeData(id, parentElement, data), 30);
+        this.throttling = !Boolean(options.disableThrottling);
         this.disableSprites = Boolean(options.disableSprites);
         this.inlineRemoteCss = Boolean(options.inlineRemoteCss);
         this.inlinerOptions = options.inlinerOptions;
@@ -4533,6 +3509,17 @@ class Observer {
     }
     bindNode(node) {
         const [id, isNew] = this.app.nodes.registerNode(node);
+        if (isElementNode(node) && hasTag(node, 'slot')) {
+            this.app.nodes.attachNodeListener(node, 'slotchange', () => {
+                const sl = node;
+                sl.assignedNodes({ flatten: true }).forEach((n) => {
+                    const nid = this.app.nodes.getID(n);
+                    if (nid !== undefined) {
+                        this.recents.set(nid, RecentsType.Changed);
+                    }
+                });
+            });
+        }
         if (isNew) {
             this.recents.set(id, RecentsType.New);
         }
@@ -4563,6 +3550,9 @@ class Observer {
     }
     unbindTree(node) {
         const id = this.app.nodes.unregisterNode(node);
+        if (id !== undefined) {
+            this.slotMap.delete(id);
+        }
         if (id !== undefined && this.recents.get(id) === RecentsType.Removed) {
             // Sending RemoveNode only for parent to maintain
             this.app.send(RemoveNode(id));
@@ -4591,8 +3581,8 @@ class Observer {
         if (isRootNode(node)) {
             return true;
         }
-        // @ts-ignore SALESFORCE
-        const parent = node.assignedSlot ? node.assignedSlot : node.parentNode;
+        let slot = node.assignedSlot;
+        const parent = node.parentNode;
         let parentID;
         // Disable parent check for the upper context HTMLHtmlElement, because it is root there... (before)
         // TODO: get rid of "special" cases (there is an issue with CreateDocument altered behaviour though)
@@ -4664,12 +3654,35 @@ class Observer {
             else if (isTextNode(node)) {
                 // for text node id != 0, hence parentID !== undefined and parent is Element
                 this.app.send(CreateTextNode(id, parentID, index));
-                this.throttledSetNodeData(id, parent, node.data);
+                if (this.throttling) {
+                    this.throttledSetNodeData(id, parent, node.data);
+                }
+                else {
+                    this.sendNodeData(id, parent, node.data);
+                }
+            }
+            if (slot) {
+                const slotID = this.app.nodes.getID(slot);
+                if (slotID !== undefined) {
+                    this.slotMap.set(id, slotID);
+                    this.app.send(SetNodeSlot(id, slotID));
+                }
             }
             return true;
         }
         if (recentsType === RecentsType.Removed && parentID !== undefined) {
             this.app.send(MoveNode(id, parentID, index));
+            if (slot) {
+                const slotID = this.app.nodes.getID(slot);
+                if (slotID !== undefined && this.slotMap.get(id) !== slotID) {
+                    this.slotMap.set(id, slotID);
+                    this.app.send(SetNodeSlot(id, slotID));
+                }
+            }
+            else if (this.slotMap.has(id)) {
+                this.slotMap.delete(id);
+                this.app.send(SetNodeSlot(id, 0));
+            }
         }
         const attr = this.attributesMap.get(id);
         if (attr !== undefined) {
@@ -4685,7 +3698,12 @@ class Observer {
                 throw 'commitNode: node is not a text';
             }
             // for text node id != 0, hence parent is Element
-            this.throttledSetNodeData(id, parent, node.data);
+            if (this.throttling) {
+                this.throttledSetNodeData(id, parent, node.data);
+            }
+            else {
+                this.sendNodeData(id, parent, node.data);
+            }
         }
         return true;
     }
@@ -4832,16 +3850,18 @@ class IFrameOffsets {
 
 var InlineCssMode;
 (function (InlineCssMode) {
+    InlineCssMode[InlineCssMode["Unset"] = -1] = "Unset";
     /** default behavior -- will parse and cache the css file on backend */
     InlineCssMode[InlineCssMode["Disabled"] = 0] = "Disabled";
     /** will attempt to record the linked css file as AdoptedStyleSheet object */
     InlineCssMode[InlineCssMode["Inline"] = 1] = "Inline";
-    /** will fetch the file, then simulated AdoptedStyleSheets behavior programmaticaly for the replay */
+    /** will fetch the file, then simulate AdoptedStyleSheets behavior programmaticaly for the replay */
     InlineCssMode[InlineCssMode["InlineFetched"] = 2] = "InlineFetched";
     /** will fetch the file, then save it as plain css inside <style> node */
     InlineCssMode[InlineCssMode["PlainFetched"] = 3] = "PlainFetched";
 })(InlineCssMode || (InlineCssMode = {}));
-function getInlineOptions(mode) {
+const localhostStylesDoc = 'https://docs.openreplay.com/en/troubleshooting/localhost/';
+function getInlineOptions(mode, logger) {
     switch (mode) {
         case InlineCssMode.Inline:
             return {
@@ -4867,6 +3887,27 @@ function getInlineOptions(mode) {
                     forcePlain: true,
                 },
             };
+        case InlineCssMode.Unset:
+            const isLocalhost = /^https?:\/\/(localhost|127\.0\.0\.1)(:\d+)?\/?/.test(window.location.href);
+            if (isLocalhost) {
+                logger(`Enabling InlineCssMode by default on localhost to preserve css styles, refer to ${localhostStylesDoc} for details, set InlineCssMode to 0 to skip this behavior`);
+                return {
+                    inlineRemoteCss: true,
+                    inlinerOptions: {
+                        forceFetch: false,
+                        forcePlain: false,
+                    },
+                };
+            }
+            else {
+                return {
+                    inlineRemoteCss: false,
+                    inlinerOptions: {
+                        forceFetch: false,
+                        forcePlain: false,
+                    },
+                };
+            }
         case InlineCssMode.Disabled:
         default:
             return {
@@ -4888,7 +3929,8 @@ class TopObserver extends Observer {
         }, params.options);
         const observerOptions = {
             disableSprites: opts.disableSprites,
-            ...getInlineOptions(opts.inlineCss)
+            disableThrottling: opts.disableThrottling,
+            ...getInlineOptions(opts.inlineCss, console.warn),
         };
         super(params.app, true, observerOptions);
         this.iframeOffsets = new IFrameOffsets();
@@ -4987,7 +4029,7 @@ class TopObserver extends Observer {
             this.app.nodes.callNodeCallbacks(document, true);
         }, window.document.documentElement);
     }
-    crossdomainObserve(rootNodeId, frameOder) {
+    crossdomainObserve(rootNodeId, frameOder, frameLevel) {
         const observer = this;
         Element.prototype.attachShadow = function () {
             // eslint-disable-next-line
@@ -4996,7 +4038,7 @@ class TopObserver extends Observer {
             return shadow;
         };
         this.app.nodes.clear();
-        this.app.nodes.syntheticMode(frameOder);
+        this.app.nodes.crossdomainMode(frameLevel, frameOder);
         const iframeObserver = new IFrameObserver(this.app);
         this.iframeObservers.set(window.document, iframeObserver);
         iframeObserver.syntheticObserve(rootNodeId, window.document);
@@ -5101,6 +4143,7 @@ class Sanitizer {
     }
 }
 
+const tokenSeparator = '_$_';
 class Session {
     constructor(params) {
         this.metadata = {};
@@ -5125,6 +4168,26 @@ class Session {
             this.app.sessionStorage.setItem(this.options.session_pageno_key, pageNo.toString());
             return pageNo;
         };
+        this.getSessionToken = (projectKey) => {
+            const tokenWithProject = this.token || this.app.sessionStorage.getItem(this.options.session_token_key);
+            if (projectKey && tokenWithProject) {
+                const savedProject = tokenWithProject.split(tokenSeparator)[1];
+                if (!savedProject || savedProject !== projectKey) {
+                    this.app.sessionStorage.removeItem(this.options.session_token_key);
+                    this.token = undefined;
+                    return undefined;
+                }
+            }
+            const token = tokenWithProject ? tokenWithProject.split(tokenSeparator)[0] : null;
+            return token || undefined;
+        };
+        this.getRawTokenWithProject = () => {
+            return this.token || this.app.sessionStorage.getItem(this.options.session_token_key);
+        };
+        this.setSessionToken = (token, projectKey) => {
+            this.token = `${token}${tokenSeparator}${projectKey}`;
+            this.app.sessionStorage.setItem(this.options.session_token_key, `${token}${tokenSeparator}${projectKey}`);
+        };
         this.app = params.app;
         this.options = params.options;
         this.createTabId();
@@ -5171,14 +4234,6 @@ class Session {
     setUserInfo(userInfo) {
         this.userInfo = userInfo;
     }
-    getSessionToken() {
-        const token = this.token || this.app.sessionStorage.getItem(this.options.session_token_key);
-        return token || undefined;
-    }
-    setSessionToken(token) {
-        this.token = token;
-        this.app.sessionStorage.setItem(this.options.session_token_key, token);
-    }
     applySessionHash(hash) {
         const hashParts = decodeURI(hash).split('&');
         let token = hash;
@@ -5194,7 +4249,7 @@ class Session {
     }
     getSessionHash() {
         const pageNo = this.getPageNumber();
-        const token = this.getSessionToken();
+        const token = this.getRawTokenWithProject();
         if (pageNo === undefined || token === undefined) {
             return;
         }
@@ -5237,7 +4292,7 @@ class Session {
     }
 }
 
-function wrap(callback, n) {
+function wrap$1(callback, n) {
     let t = 0;
     return () => {
         if (t++ >= n) {
@@ -5265,7 +4320,7 @@ class Ticker {
         if (useSafe) {
             callback = this.app.safe(callback);
         }
-        this.callbacks.unshift(n ? wrap(callback, n) : callback) - 1;
+        this.callbacks.unshift(n ? wrap$1(callback, n) : callback) - 1;
     }
     start() {
         if (this.timer === null) {
@@ -5287,9 +4342,8 @@ class Ticker {
  * this value is injected during build time via rollup
  * */
 // @ts-ignore
-const workerBodyFn = "!function(){\"use strict\";class t{constructor(t,s,i,e=10,n=250,h,r){this.onUnauthorised=s,this.onFailure=i,this.MAX_ATTEMPTS_COUNT=e,this.ATTEMPT_TIMEOUT=n,this.onCompress=h,this.pageNo=r,this.attemptsCount=0,this.busy=!1,this.queue=[],this.token=null,this.lastBatchNum=0,this.ingestURL=t+\"/v1/web/i\",this.isCompressing=void 0!==h}getQueueStatus(){return 0===this.queue.length&&!this.busy}authorise(t){this.token=t,this.busy||this.sendNext()}push(t){if(this.busy||!this.token)this.queue.push(t);else if(this.busy=!0,this.isCompressing&&this.onCompress)this.onCompress(t);else{const s=++this.lastBatchNum;this.sendBatch(t,!1,s)}}sendNext(){const t=this.queue.shift();if(t)if(this.busy=!0,this.isCompressing&&this.onCompress)this.onCompress(t);else{const s=++this.lastBatchNum;this.sendBatch(t,!1,s)}else this.busy=!1}retry(t,s,i){this.attemptsCount>=this.MAX_ATTEMPTS_COUNT?this.onFailure(`Failed to send batch after ${this.attemptsCount} attempts.`):(this.attemptsCount++,setTimeout((()=>this.sendBatch(t,s,i)),this.ATTEMPT_TIMEOUT*this.attemptsCount))}sendBatch(t,s,i){var e;const n=null==i?void 0:i.toString().replace(/^([^_]+)_([^_]+).*/,\"$1_$2_$3\");this.busy=!0;const h={Authorization:`Bearer ${this.token}`};s&&(h[\"Content-Encoding\"]=\"gzip\"),null!==this.token?fetch(`${this.ingestURL}?batch=${null!==(e=this.pageNo)&&void 0!==e?e:\"noPageNum\"}_${null!=n?n:\"noBatchNum\"}`,{body:t,method:\"POST\",headers:h,keepalive:t.length<65536}).then((e=>{if(401===e.status)return this.busy=!1,void this.onUnauthorised();e.status>=400?this.retry(t,s,`${null!=i?i:\"noBatchNum\"}_network:${e.status}`):(this.attemptsCount=0,this.sendNext())})).catch((e=>{console.warn(\"OpenReplay:\",e),this.retry(t,s,`${null!=i?i:\"noBatchNum\"}_reject:${e.message}`)})):setTimeout((()=>{this.sendBatch(t,s,`${null!=i?i:\"noBatchNum\"}_newToken`)}),500)}sendCompressed(t){const s=++this.lastBatchNum;this.sendBatch(t,!0,s)}sendUncompressed(t){const s=++this.lastBatchNum;this.sendBatch(t,!1,s)}clean(){this.sendNext(),setTimeout((()=>{this.token=null,this.queue.length=0}),10)}}const s=\"function\"==typeof TextEncoder?new TextEncoder:{encode(t){const s=t.length,i=new Uint8Array(3*s);let e=-1;for(let n=0,h=0,r=0;r!==s;){if(n=t.charCodeAt(r),r+=1,n>=55296&&n<=56319){if(r===s){i[e+=1]=239,i[e+=1]=191,i[e+=1]=189;break}if(h=t.charCodeAt(r),!(h>=56320&&h<=57343)){i[e+=1]=239,i[e+=1]=191,i[e+=1]=189;continue}if(n=1024*(n-55296)+h-56320+65536,r+=1,n>65535){i[e+=1]=240|n>>>18,i[e+=1]=128|n>>>12&63,i[e+=1]=128|n>>>6&63,i[e+=1]=128|63&n;continue}}n<=127?i[e+=1]=0|n:n<=2047?(i[e+=1]=192|n>>>6,i[e+=1]=128|63&n):(i[e+=1]=224|n>>>12,i[e+=1]=128|n>>>6&63,i[e+=1]=128|63&n)}return i.subarray(0,e+1)}};class i{constructor(t){this.size=t,this.offset=0,this.checkpointOffset=0,this.data=new Uint8Array(t)}getCurrentOffset(){return this.offset}checkpoint(){this.checkpointOffset=this.offset}get isEmpty(){return 0===this.offset}skip(t){return this.offset+=t,this.offset<=this.size}set(t,s){this.data.set(t,s)}boolean(t){return this.data[this.offset++]=+t,this.offset<=this.size}uint(t){for((t<0||t>Number.MAX_SAFE_INTEGER)&&(t=0);t>=128;)this.data[this.offset++]=t%256|128,t=Math.floor(t/128);return this.data[this.offset++]=t,this.offset<=this.size}int(t){return t=Math.round(t),this.uint(t>=0?2*t:-2*t-1)}string(t){const i=s.encode(t),e=i.byteLength;return!(!this.uint(e)||this.offset+e>this.size)&&(this.data.set(i,this.offset),this.offset+=e,!0)}reset(){this.offset=0,this.checkpointOffset=0}flush(){const t=this.data.slice(0,this.checkpointOffset);return this.reset(),t}}class e extends i{encode(t){switch(t[0]){case 0:case 11:case 114:case 115:return this.uint(t[1]);case 4:case 44:case 47:return this.string(t[1])&&this.string(t[2])&&this.uint(t[3]);case 5:case 20:case 38:case 70:case 75:case 76:case 77:case 82:return this.uint(t[1])&&this.uint(t[2]);case 6:return this.int(t[1])&&this.int(t[2]);case 7:return!0;case 8:return this.uint(t[1])&&this.uint(t[2])&&this.uint(t[3])&&this.string(t[4])&&this.boolean(t[5]);case 9:case 10:case 24:case 35:case 51:return this.uint(t[1])&&this.uint(t[2])&&this.uint(t[3]);case 12:case 52:case 61:case 71:return this.uint(t[1])&&this.string(t[2])&&this.string(t[3]);case 13:case 14:case 17:case 34:case 50:case 54:return this.uint(t[1])&&this.string(t[2]);case 16:return this.uint(t[1])&&this.int(t[2])&&this.int(t[3]);case 18:return this.uint(t[1])&&this.string(t[2])&&this.int(t[3]);case 19:return this.uint(t[1])&&this.boolean(t[2]);case 21:return this.string(t[1])&&this.string(t[2])&&this.string(t[3])&&this.string(t[4])&&this.string(t[5])&&this.uint(t[6])&&this.uint(t[7])&&this.uint(t[8]);case 22:case 27:case 30:case 41:case 45:case 46:case 43:case 63:case 64:case 79:case 124:return this.string(t[1])&&this.string(t[2]);case 23:return this.uint(t[1])&&this.uint(t[2])&&this.uint(t[3])&&this.uint(t[4])&&this.uint(t[5])&&this.uint(t[6])&&this.uint(t[7])&&this.uint(t[8])&&this.uint(t[9]);case 28:case 29:case 42:case 117:case 118:return this.string(t[1]);case 37:return this.uint(t[1])&&this.string(t[2])&&this.uint(t[3]);case 39:return this.string(t[1])&&this.string(t[2])&&this.string(t[3])&&this.string(t[4])&&this.uint(t[5])&&this.uint(t[6])&&this.uint(t[7]);case 40:return this.string(t[1])&&this.uint(t[2])&&this.string(t[3])&&this.string(t[4]);case 48:return this.string(t[1])&&this.string(t[2])&&this.string(t[3])&&this.string(t[4])&&this.int(t[5]);case 49:return this.int(t[1])&&this.int(t[2])&&this.uint(t[3])&&this.uint(t[4]);case 53:return this.uint(t[1])&&this.uint(t[2])&&this.uint(t[3])&&this.uint(t[4])&&this.uint(t[5])&&this.uint(t[6])&&this.string(t[7])&&this.string(t[8]);case 55:return this.boolean(t[1]);case 57:case 60:return this.uint(t[1])&&this.string(t[2])&&this.string(t[3])&&this.string(t[4]);case 58:case 120:return this.int(t[1]);case 59:return this.uint(t[1])&&this.uint(t[2])&&this.uint(t[3])&&this.uint(t[4])&&this.string(t[5])&&this.string(t[6])&&this.string(t[7]);case 67:case 73:return this.uint(t[1])&&this.string(t[2])&&this.uint(t[3])&&this.string(t[4]);case 68:return this.uint(t[1])&&this.uint(t[2])&&this.string(t[3])&&this.string(t[4])&&this.uint(t[5])&&this.uint(t[6]);case 69:return this.uint(t[1])&&this.uint(t[2])&&this.string(t[3])&&this.string(t[4]);case 78:return this.string(t[1])&&this.string(t[2])&&this.string(t[3])&&this.string(t[4]);case 81:return this.uint(t[1])&&this.uint(t[2])&&this.uint(t[3])&&this.int(t[4])&&this.string(t[5]);case 83:return this.string(t[1])&&this.string(t[2])&&this.string(t[3])&&this.string(t[4])&&this.string(t[5])&&this.uint(t[6])&&this.uint(t[7])&&this.uint(t[8])&&this.uint(t[9]);case 84:return this.string(t[1])&&this.string(t[2])&&this.string(t[3])&&this.uint(t[4])&&this.string(t[5])&&this.string(t[6]);case 85:return this.uint(t[1])&&this.uint(t[2])&&this.uint(t[3])&&this.uint(t[4])&&this.uint(t[5])&&this.uint(t[6])&&this.string(t[7])&&this.string(t[8])&&this.uint(t[9])&&this.boolean(t[10])&&this.uint(t[11])&&this.uint(t[12])&&this.uint(t[13])&&this.uint(t[14])&&this.uint(t[15])&&this.uint(t[16])&&this.uint(t[17]);case 87:return this.string(t[1])&&this.int(t[2])&&this.int(t[3]);case 89:return this.string(t[1])&&this.int(t[2])&&this.int(t[3])&&this.int(t[4])&&this.int(t[5])&&this.string(t[6]);case 112:return this.uint(t[1])&&this.string(t[2])&&this.boolean(t[3])&&this.string(t[4])&&this.int(t[5])&&this.int(t[6]);case 113:return this.uint(t[1])&&this.uint(t[2])&&this.string(t[3]);case 116:return this.uint(t[1])&&this.uint(t[2])&&this.uint(t[3])&&this.uint(t[4])&&this.uint(t[5])&&this.uint(t[6])&&this.string(t[7])&&this.string(t[8])&&this.uint(t[9])&&this.boolean(t[10]);case 119:return this.string(t[1])&&this.uint(t[2]);case 121:return this.string(t[1])&&this.string(t[2])&&this.uint(t[3])&&this.uint(t[4]);case 122:return this.string(t[1])&&this.string(t[2])&&this.uint(t[3])&&this.string(t[4]);case 123:return this.string(t[1])&&this.string(t[2])&&this.string(t[3])&&this.string(t[4])&&this.uint(t[5])}}}class n{constructor(t,s,i,n,h,r){this.pageNo=t,this.timestamp=s,this.url=i,this.onBatch=n,this.tabId=h,this.onOfflineEnd=r,this.nextIndex=0,this.beaconSize=2e5,this.encoder=new e(this.beaconSize),this.sizeBuffer=new Uint8Array(3),this.isEmpty=!0,this.beaconSizeLimit=1e6,this.prepare()}writeType(t){return this.encoder.uint(t[0])}writeFields(t){return this.encoder.encode(t)}writeSizeAt(t,s){for(let s=0;s<3;s++)this.sizeBuffer[s]=t>>8*s;this.encoder.set(this.sizeBuffer,s)}prepare(){if(!this.encoder.isEmpty)return;const t=[81,1,this.pageNo,this.nextIndex,this.timestamp,this.url],s=[0,this.timestamp],i=[118,this.tabId];this.writeType(t),this.writeFields(t),this.writeWithSize(s),this.writeWithSize(i),this.isEmpty=!0}writeWithSize(t){const s=this.encoder;if(!this.writeType(t)||!s.skip(3))return!1;const i=s.getCurrentOffset(),e=this.writeFields(t);if(e){const e=s.getCurrentOffset()-i;if(e>16777215)return console.warn(\"OpenReplay: max message size overflow.\"),!1;this.writeSizeAt(e,i-3),s.checkpoint(),this.isEmpty=this.isEmpty&&0===t[0],this.nextIndex++}return e}setBeaconSizeLimit(t){this.beaconSizeLimit=t}writeMessage(t){if(\"q_end\"===t[0])return this.finaliseBatch(),this.onOfflineEnd();0===t[0]&&(this.timestamp=t[1]),122===t[0]&&(this.url=t[1]),this.writeWithSize(t)||(this.finaliseBatch(),this.writeWithSize(t)||(this.encoder=new e(this.beaconSizeLimit),this.prepare(),this.writeWithSize(t)?this.finaliseBatch():console.warn(\"OpenReplay: beacon size overflow. Skipping large message.\",t,this),this.encoder=new e(this.beaconSize),this.prepare()))}finaliseBatch(){if(this.isEmpty)return;const t=this.encoder.flush();this.onBatch(t),this.prepare()}clean(){this.encoder.reset()}}var h;!function(t){t[t.NotActive=0]=\"NotActive\",t[t.Starting=1]=\"Starting\",t[t.Stopping=2]=\"Stopping\",t[t.Active=3]=\"Active\",t[t.Stopped=4]=\"Stopped\"}(h||(h={}));let r=null,u=null,a=h.NotActive;function o(){u&&u.finaliseBatch()}function c(){return new Promise((t=>{a=h.Stopping,null!==p&&(clearInterval(p),p=null),u&&(u.clean(),u=null),r&&(r.clean(),setTimeout((()=>{r=null}),20)),setTimeout((()=>{a=h.NotActive,t(null)}),100)}))}function g(){[h.Stopped,h.Stopping].includes(a)||(postMessage(\"a_stop\"),c().then((()=>{postMessage(\"a_start\")})))}let l,p=null;self.onmessage=({data:s})=>{if(null!=s){if(\"stop\"===s)return o(),void c().then((()=>{a=h.Stopped}));if(\"forceFlushBatch\"!==s){if(!Array.isArray(s)){if(\"compressed\"===s.type){if(!r)return console.debug(\"OR WebWorker: sender not initialised. Compressed batch.\"),void g();s.batch&&r.sendCompressed(s.batch)}if(\"uncompressed\"===s.type){if(!r)return console.debug(\"OR WebWorker: sender not initialised. Uncompressed batch.\"),void g();s.batch&&r.sendUncompressed(s.batch)}return\"start\"===s.type?(a=h.Starting,r=new t(s.ingestPoint,(()=>{g()}),(t=>{!function(t){postMessage({type:\"failure\",reason:t}),c()}(t)}),s.connAttemptCount,s.connAttemptGap,(t=>{postMessage({type:\"compress\",batch:t},[t.buffer])}),s.pageNo),u=new n(s.pageNo,s.timestamp,s.url,(t=>{r&&r.push(t)}),s.tabId,(()=>postMessage({type:\"queue_empty\"}))),null===p&&(p=setInterval(o,1e4)),a=h.Active):\"auth\"===s.type?r?u?(r.authorise(s.token),void(s.beaconSizeLimit&&u.setBeaconSizeLimit(s.beaconSizeLimit))):(console.debug(\"OR WebWorker: writer not initialised. Received auth.\"),void g()):(console.debug(\"OR WebWorker: sender not initialised. Received auth.\"),void g()):void 0}if(u){const t=u;s.forEach((s=>{55===s[0]&&(s[1]?l=setTimeout((()=>g()),18e5):clearTimeout(l)),t.writeMessage(s)}))}else postMessage(\"not_init\"),g()}else o()}else o()}}();\n";
+const workerBodyFn = "!function(){\"use strict\";class t{constructor(t,s,i,e=10,n=250,h,r){this.onUnauthorised=s,this.onFailure=i,this.MAX_ATTEMPTS_COUNT=e,this.ATTEMPT_TIMEOUT=n,this.onCompress=h,this.pageNo=r,this.attemptsCount=0,this.busy=!1,this.queue=[],this.token=null,this.lastBatchNum=0,this.ingestURL=t+\"/v1/web/i\",this.isCompressing=void 0!==h}getQueueStatus(){return 0===this.queue.length&&!this.busy}authorise(t){this.token=t,this.busy||this.sendNext()}push(t){if(this.busy||!this.token)this.queue.push(t);else if(this.busy=!0,this.isCompressing&&this.onCompress)this.onCompress(t);else{const s=++this.lastBatchNum;this.sendBatch(t,!1,s)}}sendNext(){const t=this.queue.shift();if(t)if(this.busy=!0,this.isCompressing&&this.onCompress)this.onCompress(t);else{const s=++this.lastBatchNum;this.sendBatch(t,!1,s)}else this.busy=!1}retry(t,s,i){this.attemptsCount>=this.MAX_ATTEMPTS_COUNT?this.onFailure(`Failed to send batch after ${this.attemptsCount} attempts.`):(this.attemptsCount++,setTimeout((()=>this.sendBatch(t,s,i)),this.ATTEMPT_TIMEOUT*this.attemptsCount))}sendBatch(t,s,i){var e;const n=null==i?void 0:i.toString().replace(/^([^_]+)_([^_]+).*/,\"$1_$2_$3\");this.busy=!0;const h={Authorization:`Bearer ${this.token}`};s&&(h[\"Content-Encoding\"]=\"gzip\"),null!==this.token?fetch(`${this.ingestURL}?batch=${null!==(e=this.pageNo)&&void 0!==e?e:\"noPageNum\"}_${null!=n?n:\"noBatchNum\"}`,{body:t,method:\"POST\",headers:h,keepalive:t.length<65536}).then((e=>{if(401===e.status)return this.busy=!1,void this.onUnauthorised();e.status>=400?this.retry(t,s,`${null!=i?i:\"noBatchNum\"}_network:${e.status}`):(this.attemptsCount=0,this.sendNext())})).catch((e=>{console.warn(\"OpenReplay:\",e),this.retry(t,s,`${null!=i?i:\"noBatchNum\"}_reject:${e.message}`)})):setTimeout((()=>{this.sendBatch(t,s,`${null!=i?i:\"noBatchNum\"}_newToken`)}),500)}sendCompressed(t){const s=++this.lastBatchNum;this.sendBatch(t,!0,s)}sendUncompressed(t){const s=++this.lastBatchNum;this.sendBatch(t,!1,s)}clean(){this.sendNext(),setTimeout((()=>{this.token=null,this.queue.length=0}),10)}}const s=\"function\"==typeof TextEncoder?new TextEncoder:{encode(t){const s=t.length,i=new Uint8Array(3*s);let e=-1;for(let n=0,h=0,r=0;r!==s;){if(n=t.charCodeAt(r),r+=1,n>=55296&&n<=56319){if(r===s){i[e+=1]=239,i[e+=1]=191,i[e+=1]=189;break}if(h=t.charCodeAt(r),!(h>=56320&&h<=57343)){i[e+=1]=239,i[e+=1]=191,i[e+=1]=189;continue}if(n=1024*(n-55296)+h-56320+65536,r+=1,n>65535){i[e+=1]=240|n>>>18,i[e+=1]=128|n>>>12&63,i[e+=1]=128|n>>>6&63,i[e+=1]=128|63&n;continue}}n<=127?i[e+=1]=0|n:n<=2047?(i[e+=1]=192|n>>>6,i[e+=1]=128|63&n):(i[e+=1]=224|n>>>12,i[e+=1]=128|n>>>6&63,i[e+=1]=128|63&n)}return i.subarray(0,e+1)}};class i{constructor(t){this.size=t,this.offset=0,this.checkpointOffset=0,this.data=new Uint8Array(t)}getCurrentOffset(){return this.offset}checkpoint(){this.checkpointOffset=this.offset}get isEmpty(){return 0===this.offset}skip(t){return this.offset+=t,this.offset<=this.size}set(t,s){this.data.set(t,s)}boolean(t){return this.data[this.offset++]=+t,this.offset<=this.size}uint(t){for((t<0||t>Number.MAX_SAFE_INTEGER)&&(t=0);t>=128;)this.data[this.offset++]=t%256|128,t=Math.floor(t/128);return this.data[this.offset++]=t,this.offset<=this.size}int(t){return t=Math.round(t),this.uint(t>=0?2*t:-2*t-1)}string(t){const i=s.encode(t),e=i.byteLength;return!(!this.uint(e)||this.offset+e>this.size)&&(this.data.set(i,this.offset),this.offset+=e,!0)}reset(){this.offset=0,this.checkpointOffset=0}flush(){const t=this.data.slice(0,this.checkpointOffset);return this.reset(),t}}class e extends i{encode(t){switch(t[0]){case 0:case 11:case 114:case 115:return this.uint(t[1]);case 4:case 44:case 47:return this.string(t[1])&&this.string(t[2])&&this.uint(t[3]);case 5:case 20:case 38:case 65:case 70:case 75:case 76:case 77:case 82:return this.uint(t[1])&&this.uint(t[2]);case 6:return this.int(t[1])&&this.int(t[2]);case 7:return!0;case 8:return this.uint(t[1])&&this.uint(t[2])&&this.uint(t[3])&&this.string(t[4])&&this.boolean(t[5]);case 9:case 10:case 24:case 35:case 51:return this.uint(t[1])&&this.uint(t[2])&&this.uint(t[3]);case 12:case 52:case 61:case 71:return this.uint(t[1])&&this.string(t[2])&&this.string(t[3]);case 13:case 14:case 17:case 34:case 36:case 50:case 54:return this.uint(t[1])&&this.string(t[2]);case 16:return this.uint(t[1])&&this.int(t[2])&&this.int(t[3]);case 18:return this.uint(t[1])&&this.string(t[2])&&this.int(t[3]);case 19:return this.uint(t[1])&&this.boolean(t[2]);case 21:return this.string(t[1])&&this.string(t[2])&&this.string(t[3])&&this.string(t[4])&&this.string(t[5])&&this.uint(t[6])&&this.uint(t[7])&&this.uint(t[8]);case 22:case 27:case 30:case 41:case 45:case 46:case 43:case 63:case 64:case 79:case 124:return this.string(t[1])&&this.string(t[2]);case 23:return this.uint(t[1])&&this.uint(t[2])&&this.uint(t[3])&&this.uint(t[4])&&this.uint(t[5])&&this.uint(t[6])&&this.uint(t[7])&&this.uint(t[8])&&this.uint(t[9]);case 28:case 29:case 42:case 117:case 118:return this.string(t[1]);case 37:return this.uint(t[1])&&this.string(t[2])&&this.uint(t[3]);case 39:return this.string(t[1])&&this.string(t[2])&&this.string(t[3])&&this.string(t[4])&&this.uint(t[5])&&this.uint(t[6])&&this.uint(t[7]);case 40:return this.string(t[1])&&this.uint(t[2])&&this.string(t[3])&&this.string(t[4]);case 48:return this.string(t[1])&&this.string(t[2])&&this.string(t[3])&&this.string(t[4])&&this.int(t[5]);case 49:return this.int(t[1])&&this.int(t[2])&&this.uint(t[3])&&this.uint(t[4]);case 53:return this.uint(t[1])&&this.uint(t[2])&&this.uint(t[3])&&this.uint(t[4])&&this.uint(t[5])&&this.uint(t[6])&&this.string(t[7])&&this.string(t[8]);case 55:return this.boolean(t[1]);case 57:case 60:return this.uint(t[1])&&this.string(t[2])&&this.string(t[3])&&this.string(t[4]);case 58:case 120:return this.int(t[1]);case 59:return this.uint(t[1])&&this.uint(t[2])&&this.uint(t[3])&&this.uint(t[4])&&this.string(t[5])&&this.string(t[6])&&this.string(t[7]);case 67:case 73:return this.uint(t[1])&&this.string(t[2])&&this.uint(t[3])&&this.string(t[4]);case 68:return this.uint(t[1])&&this.uint(t[2])&&this.string(t[3])&&this.string(t[4])&&this.uint(t[5])&&this.uint(t[6]);case 69:return this.uint(t[1])&&this.uint(t[2])&&this.string(t[3])&&this.string(t[4]);case 78:return this.string(t[1])&&this.string(t[2])&&this.string(t[3])&&this.string(t[4]);case 81:return this.uint(t[1])&&this.uint(t[2])&&this.uint(t[3])&&this.int(t[4])&&this.string(t[5]);case 83:return this.string(t[1])&&this.string(t[2])&&this.string(t[3])&&this.string(t[4])&&this.string(t[5])&&this.uint(t[6])&&this.uint(t[7])&&this.uint(t[8])&&this.uint(t[9]);case 84:return this.string(t[1])&&this.string(t[2])&&this.string(t[3])&&this.uint(t[4])&&this.string(t[5])&&this.string(t[6]);case 85:return this.uint(t[1])&&this.uint(t[2])&&this.uint(t[3])&&this.uint(t[4])&&this.uint(t[5])&&this.uint(t[6])&&this.string(t[7])&&this.string(t[8])&&this.uint(t[9])&&this.boolean(t[10])&&this.uint(t[11])&&this.uint(t[12])&&this.uint(t[13])&&this.uint(t[14])&&this.uint(t[15])&&this.uint(t[16])&&this.uint(t[17]);case 87:return this.string(t[1])&&this.int(t[2])&&this.int(t[3]);case 89:return this.string(t[1])&&this.int(t[2])&&this.int(t[3])&&this.int(t[4])&&this.int(t[5])&&this.string(t[6]);case 112:return this.uint(t[1])&&this.string(t[2])&&this.boolean(t[3])&&this.string(t[4])&&this.int(t[5])&&this.int(t[6]);case 113:return this.uint(t[1])&&this.uint(t[2])&&this.string(t[3]);case 116:return this.uint(t[1])&&this.uint(t[2])&&this.uint(t[3])&&this.uint(t[4])&&this.uint(t[5])&&this.uint(t[6])&&this.string(t[7])&&this.string(t[8])&&this.uint(t[9])&&this.boolean(t[10]);case 119:return this.string(t[1])&&this.uint(t[2]);case 121:return this.string(t[1])&&this.string(t[2])&&this.uint(t[3])&&this.uint(t[4]);case 122:return this.string(t[1])&&this.string(t[2])&&this.uint(t[3])&&this.string(t[4]);case 123:return this.string(t[1])&&this.string(t[2])&&this.string(t[3])&&this.string(t[4])&&this.uint(t[5])}}}class n{constructor(t,s,i,n,h,r){this.pageNo=t,this.timestamp=s,this.url=i,this.onBatch=n,this.tabId=h,this.onOfflineEnd=r,this.nextIndex=0,this.beaconSize=2e5,this.encoder=new e(this.beaconSize),this.sizeBuffer=new Uint8Array(3),this.isEmpty=!0,this.checkpoints=[],this.beaconSizeLimit=1e6,this.prepare()}writeType(t){return this.encoder.uint(t[0])}writeFields(t){return this.encoder.encode(t)}writeSizeAt(t,s){for(let s=0;s<3;s++)this.sizeBuffer[s]=t>>8*s;this.encoder.set(this.sizeBuffer,s)}prepare(){if(!this.encoder.isEmpty)return;this.checkpoints.length=0;const t=[81,1,this.pageNo,this.nextIndex,this.timestamp,this.url],s=[0,this.timestamp],i=[118,this.tabId];this.writeType(t),this.writeFields(t),this.writeWithSize(s),this.writeWithSize(i),this.isEmpty=!0}writeWithSize(t){const s=this.encoder;if(!this.writeType(t)||!s.skip(3))return!1;const i=s.getCurrentOffset(),e=this.writeFields(t);if(e){const e=s.getCurrentOffset()-i;if(e>16777215)return console.warn(\"OpenReplay: max message size overflow.\"),!1;this.writeSizeAt(e,i-3),s.checkpoint(),this.checkpoints.push(s.getCurrentOffset()),this.isEmpty=this.isEmpty&&0===t[0],this.nextIndex++}return e}setBeaconSizeLimit(t){this.beaconSizeLimit=t}writeMessage(t){if(-1===t[0])return this.finaliseBatch(),this.onOfflineEnd();0===t[0]&&(this.timestamp=t[1]),122===t[0]&&(this.url=t[1]),this.writeWithSize(t)||(this.finaliseBatch(),this.writeWithSize(t)||(this.encoder=new e(this.beaconSizeLimit),this.prepare(),this.writeWithSize(t)?this.finaliseBatch():console.warn(\"OpenReplay: beacon size overflow. Skipping large message.\",t,this),this.encoder=new e(this.beaconSize),this.prepare()))}finaliseBatch(t=!1){if(this.isEmpty)return;const s=this.encoder.flush();this.onBatch(s,t),this.prepare()}clean(){this.encoder.reset(),this.checkpoints.length=0}}var h;!function(t){t[t.NotActive=0]=\"NotActive\",t[t.Starting=1]=\"Starting\",t[t.Stopping=2]=\"Stopping\",t[t.Active=3]=\"Active\",t[t.Stopped=4]=\"Stopped\"}(h||(h={}));let r=null,u=null,a=h.NotActive;function o(t){u&&u.finaliseBatch(t)}function c(){return new Promise((t=>{a=h.Stopping,null!==p&&(clearInterval(p),p=null),u&&(u.clean(),u=null),r&&(r.clean(),setTimeout((()=>{r=null}),20)),setTimeout((()=>{a=h.NotActive,t(null)}),100)}))}function g(){[h.Stopped,h.Stopping].includes(a)||(postMessage(\"a_stop\"),c().then((()=>{postMessage(\"a_start\")})))}let l,p=null;self.onmessage=({data:s})=>{if(\"stop\"===s)return o(),void c().then((()=>{a=h.Stopped}));if(\"forceFlushBatch\"!==s)if(\"closing\"!==s){if(!Array.isArray(s)){if(\"compressed\"===s.type){if(!r)return console.debug(\"OR WebWorker: sender not initialised. Compressed batch.\"),void g();s.batch&&r.sendCompressed(s.batch)}if(\"uncompressed\"===s.type){if(!r)return console.debug(\"OR WebWorker: sender not initialised. Uncompressed batch.\"),void g();s.batch&&r.sendUncompressed(s.batch)}return\"start\"===s.type?(a=h.Starting,r=new t(s.ingestPoint,(()=>{g()}),(t=>{!function(t){postMessage({type:\"failure\",reason:t}),c()}(t)}),s.connAttemptCount,s.connAttemptGap,(t=>{postMessage({type:\"compress\",batch:t},[t.buffer])}),s.pageNo),u=new n(s.pageNo,s.timestamp,s.url,((t,s)=>{r&&(s?r.sendUncompressed(t):r.push(t))}),s.tabId,(()=>postMessage({type:\"queue_empty\"}))),null===p&&(p=setInterval(o,3e4)),a=h.Active):\"auth\"===s.type?r?u?(r.authorise(s.token),void(s.beaconSizeLimit&&u.setBeaconSizeLimit(s.beaconSizeLimit))):(console.debug(\"OR WebWorker: writer not initialised. Received auth.\"),void g()):(console.debug(\"OR WebWorker: sender not initialised. Received auth.\"),void g()):void 0}if(u){const t=u;s.forEach((s=>{55===s[0]&&(s[1]?l=setTimeout((()=>g()),18e5):clearTimeout(l)),t.writeMessage(s)}))}else postMessage(\"not_init\"),g()}else o(!0);else o()}}();\n";
 const CANCELED = 'canceled';
-const uxtStorageKey = 'or_uxt_active';
 const bufferStorageKey = 'or_buffer_1';
 const UnsuccessfulStart = (reason) => ({ reason, success: false });
 const SuccessfulStart = (body) => ({ ...body, success: true });
@@ -5341,7 +4395,7 @@ class App {
         this.stopCallbacks = [];
         this.commitCallbacks = [];
         this.activityState = ActivityState.NotActive;
-        this.version = '17.0.0-beta.0'; // TODO: version compatability check inside each plugin.
+        this.version = '17.0.1'; // TODO: version compatability check inside each plugin.
         this.socketMode = false;
         this.compressionThreshold = 24 * 1000;
         this.bc = null;
@@ -5351,10 +4405,7 @@ class App {
         this.rootId = null;
         this.pageFrames = [];
         this.frameOderNumber = 0;
-        this.features = {
-            'feature-flags': true,
-            'usability-test': true,
-        };
+        this.frameLevel = 0;
         this.emptyBatchCounter = 0;
         /** used by child iframes for crossdomain only */
         this.parentActive = false;
@@ -5382,8 +4433,9 @@ class App {
             if (data.line === proto.iframeId) {
                 this.parentActive = true;
                 this.rootId = data.id;
-                this.session.setSessionToken(data.token);
+                this.session.setSessionToken(data.token, this.projectKey);
                 this.frameOderNumber = data.frameOrderNumber;
+                this.frameLevel = data.frameLevel;
                 this.debug.log('starting iframe tracking', data);
                 this.allowAppStart();
             }
@@ -5424,7 +4476,7 @@ class App {
                             this.trackedFrames.push(data.context);
                         }
                         await this.waitStarted();
-                        const token = this.session.getSessionToken();
+                        const token = this.session.getSessionToken(this.projectKey);
                         const order = this.trackedFrames.findIndex((f) => f === data.context) + 1;
                         if (order === 0) {
                             this.debug.error('Couldnt get order number for iframe', data.context, this.trackedFrames);
@@ -5433,8 +4485,8 @@ class App {
                             line: proto.iframeId,
                             id,
                             token,
-                            // since indexes go from 0 we +1
                             frameOrderNumber: order,
+                            frameLevel: this.frameLevel + 1,
                         };
                         this.debug.log('Got child frame signal; nodeId', id, event.source, iframeData);
                         // @ts-ignore
@@ -5452,7 +4504,8 @@ class App {
              * */
             if (data.line === proto.iframeBatch) {
                 const msgBatch = data.messages;
-                const mappedMessages = msgBatch.map((msg) => {
+                const mappedMessages = [];
+                msgBatch.forEach((msg) => {
                     if (msg[0] === 20 /* MType.MouseMove */) {
                         let fixedMessage = msg;
                         this.pageFrames.forEach((frame) => {
@@ -5462,7 +4515,7 @@ class App {
                                 fixedMessage = [type, x + left, y + top];
                             }
                         });
-                        return fixedMessage;
+                        mappedMessages.push(fixedMessage);
                     }
                     if (msg[0] === 68 /* MType.MouseClick */) {
                         let fixedMessage = msg;
@@ -5488,9 +4541,11 @@ class App {
                                 ];
                             }
                         });
-                        return fixedMessage;
+                        mappedMessages.push(fixedMessage);
+                    }
+                    if (![28 /* MType.UserID */, 29 /* MType.UserAnonymousID */, 30 /* MType.Metadata */].includes(msg[0])) {
+                        mappedMessages.push(msg);
                     }
-                    return msg;
                 });
                 this.messages.push(...mappedMessages);
             }
@@ -5661,7 +4716,6 @@ class App {
                 });
             });
         };
-        this.onUxtCb = [];
         this.contextId = Math.random().toString(36).slice(2);
         this.projectKey = projectKey;
         this.networkOptions = options.network;
@@ -5696,8 +4750,9 @@ class App {
                 useAnimationFrame: false,
             },
             forceNgOff: false,
-            inlineCss: 0,
+            inlineCss: InlineCssMode.Unset,
             disableSprites: false,
+            disableThrottling: false,
         };
         this.options = simpleMerge(defaultOptions, options);
         if (!this.insideIframe &&
@@ -5728,7 +4783,6 @@ class App {
             app: this,
             isDictDisabled: Boolean(this.options.disableStringDict || this.options.crossdomain?.enabled),
         });
-        this.featureFlags = new FeatureFlags(this);
         this.tagWatcher = new TagWatcher({
             sessionStorage: this.sessionStorage,
             errLog: this.debug.error,
@@ -5753,6 +4807,7 @@ class App {
              * listen for messages from parent window, so we can signal that we're alive
              * */
             window.addEventListener('message', this.parentCrossDomainFrameListener);
+            window.addEventListener('message', this.crossDomainIframeListener);
             setInterval(() => {
                 if (document.hidden) {
                     return;
@@ -5776,34 +4831,37 @@ class App {
                 line: proto.ask,
                 source: thisTab,
                 context: this.contextId,
+                projectKey: this.projectKey,
             });
             this.startTimeout = setTimeout(() => {
                 this.allowAppStart();
             }, 250);
             this.bc.onmessage = (ev) => {
-                if (ev.data.context === this.contextId) {
+                if (ev.data.context === this.contextId || this.projectKey !== ev.data.projectKey) {
+                    this.debug.log('same ctx event', ev);
                     return;
                 }
                 this.debug.log(ev);
                 if (ev.data.line === proto.resp) {
                     const sessionToken = ev.data.token;
-                    this.session.setSessionToken(sessionToken);
+                    this.session.setSessionToken(sessionToken, this.projectKey);
                     this.allowAppStart();
                 }
                 if (ev.data.line === proto.reg) {
                     const sessionToken = ev.data.token;
                     this.session.regenerateTabId();
-                    this.session.setSessionToken(sessionToken);
+                    this.session.setSessionToken(sessionToken, this.projectKey);
                     this.allowAppStart();
                 }
                 if (ev.data.line === proto.ask) {
-                    const token = this.session.getSessionToken();
+                    const token = this.session.getSessionToken(this.projectKey);
                     if (token && this.bc) {
                         this.bc.postMessage({
                             line: ev.data.source === thisTab ? proto.reg : proto.resp,
                             token,
                             source: thisTab,
                             context: this.contextId,
+                            projectKey: this.projectKey,
                         });
                     }
                 }
@@ -5860,16 +4918,23 @@ class App {
             this.worker.onmessage = ({ data }) => {
                 this.handleWorkerMsg(data);
             };
+            let closing = false;
             const alertWorker = () => {
+                if (closing) {
+                    return;
+                }
+                closing = true;
+                setTimeout(() => {
+                    closing = false;
+                }, 500);
                 if (this.worker) {
-                    this.worker.postMessage(null);
+                    this.worker.postMessage('closing');
                 }
             };
-            // keep better tactics, discard others?
-            this.attachEventListener(window, 'beforeunload', alertWorker, false);
             this.attachEventListener(document.body, 'mouseleave', alertWorker, false, false);
+            this.attachEventListener(window, 'pagehide', alertWorker, false, false);
             // TODO: stop session after inactivity timeout (make configurable)
-            this.attachEventListener(document, 'visibilitychange', alertWorker, false);
+            this.attachEventListener(document, 'visibilitychange', (e) => document.visibilityState === 'hidden' && alertWorker(), false);
         }
         catch (e) {
             this._debug('worker_start', e);
@@ -6064,7 +5129,7 @@ class App {
         };
     }
     getSessionToken() {
-        return this.session.getSessionToken();
+        return this.session.getSessionToken(this.projectKey);
     }
     getSessionID() {
         return this.session.getInfo().sessionID || undefined;
@@ -6126,7 +5191,7 @@ class App {
     checkSessionToken(forceNew) {
         const lsReset = this.sessionStorage.getItem(this.options.session_reset_key) !== null;
         const needNewSessionID = forceNew || lsReset;
-        const sessionToken = this.session.getSessionToken();
+        const sessionToken = this.session.getSessionToken(this.projectKey);
         return needNewSessionID || !sessionToken;
     }
     /**
@@ -6204,8 +5269,7 @@ class App {
         const { 
         // this token is needed to fetch conditions and flags,
         // but it can't be used to record a session
-        token, userBrowser, userCity, userCountry, userDevice, userOS, userState, projectID, features, } = await r.json();
-        this.features = features ? features : this.features;
+        token, userBrowser, userCity, userCountry, userDevice, userOS, userState, projectID, } = await r.json();
         this.session.assign({ projectID });
         this.session.setUserInfo({
             userBrowser,
@@ -6218,10 +5282,6 @@ class App {
         const onStartInfo = { sessionToken: token, userUUID: '', sessionID: '' };
         this.startCallbacks.forEach((cb) => cb(onStartInfo));
         await this.conditionsManager?.fetchConditions(projectID, token);
-        if (this.features['feature-flags']) {
-            await this.featureFlags.reloadFlags(token);
-            this.conditionsManager?.processFlags(this.featureFlags.flags);
-        }
         await this.tagWatcher.fetchTags(this.options.ingestPoint, token);
     }
     /**
@@ -6345,7 +5405,7 @@ class App {
         while (this.bufferedMessages1.length > 0) {
             await this.flushBuffer(this.bufferedMessages1);
         }
-        this.postToWorker([['q_end']]);
+        this.postToWorker([[-1]]);
         this.clearBuffers();
     }
     async _start(startOpts = {}, resetByWorker = false, conditionName) {
@@ -6393,7 +5453,7 @@ class App {
             connAttemptGap: this.options.connAttemptGap,
             tabId: this.session.getTabId(),
         });
-        const sessionToken = this.session.getSessionToken();
+        const sessionToken = this.session.getSessionToken(this.projectKey);
         const isNewSession = this.checkSessionToken(startOpts.forceNew);
         this.sessionStorage.removeItem(this.options.session_reset_key);
         this.debug.log('OpenReplay: starting session; need new session id?', isNewSession, 'session token: ', sessionToken);
@@ -6433,8 +5493,7 @@ class App {
             delay, //  derived from token
             sessionID, //  derived from token
             startTimestamp, // real startTS (server time), derived from sessionID
-            userBrowser, userCity, userCountry, userDevice, userOS, userState, canvasEnabled, canvasQuality, canvasFPS, assistOnly: socketOnly, features, } = await r.json();
-            this.features = features ? features : this.features;
+            userBrowser, userCity, userCountry, userDevice, userOS, userState, canvasEnabled, canvasQuality, canvasFPS, assistOnly: socketOnly, } = await r.json();
             if (typeof token !== 'string' ||
                 typeof userUUID !== 'string' ||
                 (typeof startTimestamp !== 'number' && typeof startTimestamp !== 'undefined') ||
@@ -6446,7 +5505,7 @@ class App {
                 return UnsuccessfulStart(reason);
             }
             this.delay = delay;
-            this.session.setSessionToken(token);
+            this.session.setSessionToken(token, this.projectKey);
             this.session.setUserInfo({
                 userBrowser,
                 userCity,
@@ -6487,12 +5546,9 @@ class App {
             if (startOpts.startCallback) {
                 startOpts.startCallback(SuccessfulStart(onStartInfo));
             }
-            if (this.features['feature-flags']) {
-                void this.featureFlags.reloadFlags();
-            }
             await this.tagWatcher.fetchTags(this.options.ingestPoint, token);
             this.activityState = ActivityState.Active;
-            if (this.options.crossdomain?.enabled && !this.insideIframe) {
+            if (this.options.crossdomain?.enabled) {
                 void this.bootChildrenFrames();
             }
             if (canvasEnabled && !this.options.canvas.disableCanvas) {
@@ -6518,47 +5574,14 @@ class App {
                 this.commit();
                 /** --------------- COLD START BUFFER ------------------*/
             }
+            if (this.insideIframe && this.rootId) {
+                this.observer.crossdomainObserve(this.rootId, this.frameOderNumber, this.frameLevel);
+            }
             else {
-                if (this.insideIframe && this.rootId) {
-                    this.observer.crossdomainObserve(this.rootId, this.frameOderNumber);
-                }
-                else {
-                    this.observer.observe();
-                }
-                this.ticker.start();
+                this.observer.observe();
             }
+            this.ticker.start();
             this.canvasRecorder?.startTracking();
-            if (this.features['usability-test'] && !this.insideIframe) {
-                this.uxtManager = this.uxtManager
-                    ? this.uxtManager
-                    : new UserTestManager(this, uxtStorageKey);
-                let uxtId;
-                const savedUxtTag = this.localStorage.getItem(uxtStorageKey);
-                if (savedUxtTag) {
-                    uxtId = parseInt(savedUxtTag, 10);
-                }
-                if (location?.search) {
-                    const query = new URLSearchParams(location.search);
-                    if (query.has('oruxt')) {
-                        const qId = query.get('oruxt');
-                        uxtId = qId ? parseInt(qId, 10) : undefined;
-                    }
-                }
-                if (uxtId) {
-                    if (!this.uxtManager.isActive) {
-                        // eslint-disable-next-line
-                        this.uxtManager.getTest(uxtId, token, Boolean(savedUxtTag)).then((id) => {
-                            if (id) {
-                                this.onUxtCb.forEach((cb) => cb(id));
-                            }
-                        });
-                    }
-                    else {
-                        // @ts-ignore
-                        this.onUxtCb.forEach((cb) => cb(uxtId));
-                    }
-                }
-            }
             return SuccessfulStart(onStartInfo);
         }
         catch (reason) {
@@ -6579,13 +5602,6 @@ class App {
             return UnsuccessfulStart(errorMessage);
         }
     }
-    addOnUxtCb(cb) {
-        // @ts-ignore
-        this.onUxtCb.push(cb);
-    }
-    getUxtId() {
-        return this.uxtManager?.getTestId();
-    }
     async waitStart() {
         return new Promise((resolve) => {
             const int = setInterval(() => {
@@ -6674,7 +5690,7 @@ class App {
     stop(stopWorker = true) {
         if (this.activityState !== ActivityState.NotActive) {
             try {
-                if (!this.insideIframe && this.options.crossdomain?.enabled) {
+                if (this.options.crossdomain?.enabled) {
                     this.killChildrenFrames();
                 }
                 this.attributeSender.clear();
@@ -6706,9 +5722,16 @@ function Connection (app) {
     if (connection === undefined) {
         return;
     }
-    const sendConnectionInformation = () => app.send(ConnectionInformation(Math.round(connection.downlink * 1000), connection.type || 'unknown'));
-    sendConnectionInformation();
-    connection.addEventListener('change', sendConnectionInformation);
+    const sendConnectionInformation = () => {
+        app.send(ConnectionInformation(Math.round(connection.downlink * 1000), connection.effectiveType || 'unknown'));
+    };
+    app.attachStartCallback(() => {
+        sendConnectionInformation();
+        connection.addEventListener('change', sendConnectionInformation);
+    });
+    app.attachStopCallback(() => {
+        connection.removeEventListener('change', sendConnectionInformation);
+    });
 }
 
 const printError = IN_BROWSER && 'InstallTrigger' in window // detect Firefox
@@ -7381,308 +6404,11 @@ function Input (app, opts) {
     }));
 }
 
-// License: MIT
-// Author: Anton Medvedev <anton@medv.io>
-// Source: https://github.com/antonmedv/finder
-const acceptedAttrNames = new Set(['role', 'name', 'aria-label', 'rel', 'href']);
-/** Check if attribute name and value are word-like. */
-function attr(name, value) {
-    let nameIsOk = acceptedAttrNames.has(name);
-    nameIsOk ||= name.startsWith('data-') && wordLike(name);
-    let valueIsOk = wordLike(value) && value.length < 100;
-    valueIsOk ||= value.startsWith('#') && wordLike(value.slice(1));
-    return nameIsOk && valueIsOk;
-}
-/** Check if id name is word-like. */
-function idName(name) {
-    return wordLike(name);
-}
-/** Check if class name is word-like. */
-function className(name) {
-    return wordLike(name);
-}
-/** Check if tag name is word-like. */
-function tagName(name) {
-    return true;
-}
-/** Finds unique CSS selectors for the given element. */
-function finder(input, options) {
-    if (input.nodeType !== Node.ELEMENT_NODE) {
-        throw new Error(`Can't generate CSS selector for non-element node type.`);
-    }
-    if (input.tagName.toLowerCase() === 'html') {
-        return 'html';
-    }
-    const defaults = {
-        root: document.body,
-        idName: idName,
-        className: className,
-        tagName: tagName,
-        attr: attr,
-        timeoutMs: 1000,
-        seedMinLength: 3,
-        optimizedMinLength: 2,
-        maxNumberOfPathChecks: Infinity,
-    };
-    const startTime = new Date();
-    const config = { ...defaults, ...options };
-    const rootDocument = findRootDocument(config.root, defaults);
-    let foundPath;
-    let count = 0;
-    for (const candidate of search(input, config, rootDocument)) {
-        const elapsedTimeMs = new Date().getTime() - startTime.getTime();
-        if (elapsedTimeMs > config.timeoutMs ||
-            count >= config.maxNumberOfPathChecks) {
-            const fPath = fallback(input, rootDocument);
-            if (!fPath) {
-                throw new Error(`Timeout: Can't find a unique selector after ${config.timeoutMs}ms`);
-            }
-            return selector(fPath);
-        }
-        count++;
-        if (unique(candidate, rootDocument)) {
-            foundPath = candidate;
-            break;
-        }
-    }
-    if (!foundPath) {
-        throw new Error(`Selector was not found.`);
-    }
-    const optimized = [
-        ...optimize(foundPath, input, config, rootDocument, startTime),
-    ];
-    optimized.sort(byPenalty);
-    if (optimized.length > 0) {
-        return selector(optimized[0]);
-    }
-    return selector(foundPath);
-}
-function* search(input, config, rootDocument) {
-    const stack = [];
-    let paths = [];
-    let current = input;
-    let i = 0;
-    while (current && current !== rootDocument) {
-        const level = tie(current, config);
-        for (const node of level) {
-            node.level = i;
-        }
-        stack.push(level);
-        current = current.parentElement;
-        i++;
-        paths.push(...combinations(stack));
-        if (i >= config.seedMinLength) {
-            paths.sort(byPenalty);
-            for (const candidate of paths) {
-                yield candidate;
-            }
-            paths = [];
-        }
-    }
-    paths.sort(byPenalty);
-    for (const candidate of paths) {
-        yield candidate;
-    }
-}
-function wordLike(name) {
-    if (/^[a-z\-]{3,}$/i.test(name)) {
-        const words = name.split(/-|[A-Z]/);
-        for (const word of words) {
-            if (word.length <= 2) {
-                return false;
-            }
-            if (/[^aeiou]{4,}/i.test(word)) {
-                return false;
-            }
-        }
-        return true;
-    }
-    return false;
-}
-function tie(element, config) {
-    const level = [];
-    const elementId = element.getAttribute('id');
-    if (elementId && config.idName(elementId)) {
-        level.push({
-            name: '#' + CSS.escape(elementId),
-            penalty: 0,
-        });
-    }
-    for (let i = 0; i < element.classList.length; i++) {
-        const name = element.classList[i];
-        if (config.className(name)) {
-            level.push({
-                name: '.' + CSS.escape(name),
-                penalty: 1,
-            });
-        }
-    }
-    for (let i = 0; i < element.attributes.length; i++) {
-        const attr = element.attributes[i];
-        if (config.attr(attr.name, attr.value)) {
-            level.push({
-                name: `[${CSS.escape(attr.name)}="${CSS.escape(attr.value)}"]`,
-                penalty: 2,
-            });
-        }
-    }
-    const tagName = element.tagName.toLowerCase();
-    if (config.tagName(tagName)) {
-        level.push({
-            name: tagName,
-            penalty: 5,
-        });
-        const index = indexOf(element, tagName);
-        if (index !== undefined) {
-            level.push({
-                name: nthOfType(tagName, index),
-                penalty: 10,
-            });
-        }
-    }
-    const nth = indexOf(element);
-    if (nth !== undefined) {
-        level.push({
-            name: nthChild(tagName, nth),
-            penalty: 50,
-        });
-    }
-    return level;
-}
-function selector(path) {
-    let node = path[0];
-    let query = node.name;
-    for (let i = 1; i < path.length; i++) {
-        const level = path[i].level || 0;
-        if (node.level === level - 1) {
-            query = `${path[i].name} > ${query}`;
-        }
-        else {
-            query = `${path[i].name} ${query}`;
-        }
-        node = path[i];
-    }
-    return query;
-}
-function penalty(path) {
-    return path.map((node) => node.penalty).reduce((acc, i) => acc + i, 0);
-}
-function byPenalty(a, b) {
-    return penalty(a) - penalty(b);
-}
-function indexOf(input, tagName) {
-    const parent = input.parentNode;
-    if (!parent) {
-        return undefined;
-    }
-    let child = parent.firstChild;
-    if (!child) {
-        return undefined;
-    }
-    let i = 0;
-    while (child) {
-        if (child.nodeType === Node.ELEMENT_NODE &&
-            (tagName === undefined ||
-                child.tagName.toLowerCase() === tagName)) {
-            i++;
-        }
-        if (child === input) {
-            break;
-        }
-        child = child.nextSibling;
-    }
-    return i;
-}
-function fallback(input, rootDocument) {
-    let i = 0;
-    let current = input;
-    const path = [];
-    while (current && current !== rootDocument) {
-        const tagName = current.tagName.toLowerCase();
-        const index = indexOf(current, tagName);
-        if (index === undefined) {
-            return;
-        }
-        path.push({
-            name: nthOfType(tagName, index),
-            penalty: NaN,
-            level: i,
-        });
-        current = current.parentElement;
-        i++;
-    }
-    if (unique(path, rootDocument)) {
-        return path;
-    }
-}
-function nthChild(tagName, index) {
-    if (tagName === 'html') {
-        return 'html';
-    }
-    return `${tagName}:nth-child(${index})`;
-}
-function nthOfType(tagName, index) {
-    if (tagName === 'html') {
-        return 'html';
-    }
-    return `${tagName}:nth-of-type(${index})`;
-}
-function* combinations(stack, path = []) {
-    if (stack.length > 0) {
-        for (let node of stack[0]) {
-            yield* combinations(stack.slice(1, stack.length), path.concat(node));
-        }
-    }
-    else {
-        yield path;
-    }
-}
-function findRootDocument(rootNode, defaults) {
-    if (rootNode.nodeType === Node.DOCUMENT_NODE) {
-        return rootNode;
-    }
-    if (rootNode === defaults.root) {
-        return rootNode.ownerDocument;
-    }
-    return rootNode;
-}
-function unique(path, rootDocument) {
-    const css = selector(path);
-    switch (rootDocument.querySelectorAll(css).length) {
-        case 0:
-            throw new Error(`Can't select any node with this selector: ${css}`);
-        case 1:
-            return true;
-        default:
-            return false;
-    }
-}
-function* optimize(path, input, config, rootDocument, startTime) {
-    if (path.length > 2 && path.length > config.optimizedMinLength) {
-        for (let i = 1; i < path.length - 1; i++) {
-            const elapsedTimeMs = new Date().getTime() - startTime.getTime();
-            if (elapsedTimeMs > config.timeoutMs) {
-                return;
-            }
-            const newPath = [...path];
-            newPath.splice(i, 1);
-            if (unique(newPath, rootDocument) &&
-                rootDocument.querySelector(selector(newPath)) === input) {
-                yield newPath;
-                yield* optimize(newPath, input, config, rootDocument, startTime);
-            }
-        }
-    }
-}
-
-function _getSelector(target, document, options) {
-    const selector = finder(target, {
-        root: document.body,
-        seedMinLength: 3,
-        optimizedMinLength: options?.minSelectorDepth || 2,
-        maxNumberOfPathChecks: options?.maxOptimiseTries || 10000,
-    });
-    return selector;
+const cssEscape = (typeof CSS !== 'undefined' && CSS.escape) || ((t) => t);
+const docClassCache = new WeakMap();
+function _getSelector(target) {
+    const selector = getCSSPath(target);
+    return selector || '';
 }
 function isClickable(element) {
     const tag = element.tagName.toUpperCase();
@@ -7802,8 +6528,8 @@ function Mouse (app, options) {
         }
     };
     const patchDocument = (document, topframe = false) => {
-        function getSelector(id, target, options) {
-            return (selectorMap[id] = selectorMap[id] || _getSelector(target, document, options));
+        function getSelector(id, target) {
+            return (selectorMap[id] = selectorMap[id] || _getSelector(target));
         }
         const attachListener = topframe
             ? app.attachEventListener.bind(app) // attached/removed on start/stop
@@ -7842,7 +6568,7 @@ function Mouse (app, options) {
                 const normalizedY = roundNumber(clickY / contentHeight);
                 sendMouseMove();
                 const label = getTargetLabel(target);
-                app.send(MouseClick(id, mouseTarget === target ? Math.round(performance.now() - mouseTargetTime) : 0, app.sanitizer.privateMode ? label.replaceAll(/./g, '*') : label, isClickable(target) && !disableClickmaps ? getSelector(id, target, options) : '', normalizedX, normalizedY), true);
+                app.send(MouseClick(id, mouseTarget === target ? Math.round(performance.now() - mouseTargetTime) : 0, app.sanitizer.privateMode ? label.replaceAll(/./g, '*') : label, isClickable(target) && !disableClickmaps ? getSelector(id, target) : '', normalizedX, normalizedY), true);
             }
             mouseTarget = null;
         });
@@ -7862,8 +6588,90 @@ function Mouse (app, options) {
 function roundNumber(num) {
     return Math.round(num * 1e4);
 }
+function isDocUniqueClass(cls, doc) {
+    let cache = docClassCache.get(doc);
+    if (!cache) {
+        cache = Object.create(null);
+        docClassCache.set(doc, cache);
+    }
+    if (cls in cache)
+        return cache[cls];
+    const unique = doc.querySelectorAll(`.${cssEscape(cls)}`).length === 1;
+    cache[cls] = unique;
+    return unique;
+}
+function wordLike(name) {
+    if (/^[a-z\-]{3,}$/i.test(name)) {
+        const words = name.split(/-|[A-Z]/);
+        for (const word of words) {
+            if (word.length <= 2) {
+                return false;
+            }
+            if (/[^aeiou]{4,}/i.test(word)) {
+                return false;
+            }
+        }
+        return true;
+    }
+    return false;
+}
+function getCSSPath(el) {
+    if (!el || el.nodeType !== 1)
+        return false;
+    if (el.id)
+        return `#${cssEscape(el.id)}`;
+    const parts = [];
+    while (el && el.nodeType === 1 && el !== el.ownerDocument) {
+        if (el.id) {
+            parts.unshift(`#${cssEscape(el.id)}`);
+            break;
+        }
+        const tag = el.tagName.toLowerCase();
+        if (el.classList?.length) {
+            for (const cls of el.classList) {
+                if (wordLike(cls) && isDocUniqueClass(cls, el.ownerDocument)) {
+                    parts.unshift(`${tag}.${cssEscape(cls)}`);
+                    return parts.join(' > ');
+                }
+            }
+        }
+        const sibCls = getUniqueSiblingClass(el);
+        if (sibCls) {
+            parts.unshift(`${tag}.${cssEscape(sibCls)}`);
+        }
+        else if (el === el.ownerDocument.body ||
+            el === el.ownerDocument.documentElement) {
+            parts.unshift(tag);
+        }
+        else {
+            let idx = 1;
+            for (let sib = el.previousElementSibling; sib; sib = sib.previousElementSibling) {
+                if (sib.tagName.toLowerCase() === tag)
+                    idx++;
+            }
+            parts.unshift(`${tag}:nth-of-type(${idx})`);
+        }
+        el = el.parentNode;
+    }
+    return parts.join(' > ');
+}
+function getUniqueSiblingClass(el) {
+    if (!el.classList?.length || !el.parentNode)
+        return null;
+    const sibs = el.parentNode.children;
+    outer: for (const cls of el.classList) {
+        if (!wordLike(cls) || !isDocUniqueClass(cls, el.ownerDocument))
+            continue;
+        for (const sib of sibs) {
+            if (sib !== el && sib.classList?.contains(cls))
+                continue outer;
+        }
+        return cls;
+    }
+    return null;
+}
 
-var e,o=-1,a=function(e){addEventListener("pageshow",(function(n){n.persisted&&(o=n.timeStamp,e(n));}),true);},c=function(){var e=self.performance&&performance.getEntriesByType&&performance.getEntriesByType("navigation")[0];if(e&&e.responseStart>0&&e.responseStart<performance.now())return e},u=function(){var e=c();return e&&e.activationStart||0},f=function(e,n){var t=c(),r="navigate";o>=0?r="back-forward-cache":t&&(document.prerendering||u()>0?r="prerender":document.wasDiscarded?r="restore":t.type&&(r=t.type.replace(/_/g,"-")));return {name:e,value:void 0===n?-1:n,rating:"good",delta:0,entries:[],id:"v4-".concat(Date.now(),"-").concat(Math.floor(8999999999999*Math.random())+1e12),navigationType:r}},s=function(e,n,t){try{if(PerformanceObserver.supportedEntryTypes.includes(e)){var r=new PerformanceObserver((function(e){Promise.resolve().then((function(){n(e.getEntries());}));}));return r.observe(Object.assign({type:e,buffered:!0},t||{})),r}}catch(e){}},d=function(e,n,t,r){var i,o;return function(a){n.value>=0&&(a||r)&&((o=n.value-(i||0))||void 0===i)&&(i=n.value,n.delta=o,n.rating=function(e,n){return e>n[1]?"poor":e>n[0]?"needs-improvement":"good"}(n.value,t),e(n));}},l=function(e){requestAnimationFrame((function(){return requestAnimationFrame((function(){return e()}))}));},p=function(e){document.addEventListener("visibilitychange",(function(){"hidden"===document.visibilityState&&e();}));},v=function(e){var n=false;return function(){n||(e(),n=true);}},m=-1,h=function(){return "hidden"!==document.visibilityState||document.prerendering?1/0:0},g=function(e){"hidden"===document.visibilityState&&m>-1&&(m="visibilitychange"===e.type?e.timeStamp:0,T());},y=function(){addEventListener("visibilitychange",g,true),addEventListener("prerenderingchange",g,true);},T=function(){removeEventListener("visibilitychange",g,true),removeEventListener("prerenderingchange",g,true);},E=function(){return m<0&&(m=h(),y(),a((function(){setTimeout((function(){m=h(),y();}),0);}))),{get firstHiddenTime(){return m}}},C=function(e){document.prerendering?addEventListener("prerenderingchange",(function(){return e()}),true):e();},b=[1800,3e3],S=function(e,n){n=n||{},C((function(){var t,r=E(),i=f("FCP"),o=s("paint",(function(e){e.forEach((function(e){"first-contentful-paint"===e.name&&(o.disconnect(),e.startTime<r.firstHiddenTime&&(i.value=Math.max(e.startTime-u(),0),i.entries.push(e),t(true)));}));}));o&&(t=d(e,i,b,n.reportAllChanges),a((function(r){i=f("FCP"),t=d(e,i,b,n.reportAllChanges),l((function(){i.value=performance.now()-r.timeStamp,t(true);}));})));}));},L=[.1,.25],w=function(e,n){n=n||{},S(v((function(){var t,r=f("CLS",0),i=0,o=[],c=function(e){e.forEach((function(e){if(!e.hadRecentInput){var n=o[0],t=o[o.length-1];i&&e.startTime-t.startTime<1e3&&e.startTime-n.startTime<5e3?(i+=e.value,o.push(e)):(i=e.value,o=[e]);}})),i>r.value&&(r.value=i,r.entries=o,t());},u=s("layout-shift",c);u&&(t=d(e,r,L,n.reportAllChanges),p((function(){c(u.takeRecords()),t(true);})),a((function(){i=0,r=f("CLS",0),t=d(e,r,L,n.reportAllChanges),l((function(){return t()}));})),setTimeout(t,0));})));},A=0,I=1/0,P=0,M=function(e){e.forEach((function(e){e.interactionId&&(I=Math.min(I,e.interactionId),P=Math.max(P,e.interactionId),A=P?(P-I)/7+1:0);}));},k=function(){return e?A:performance.interactionCount||0},F=function(){"interactionCount"in performance||e||(e=s("event",M,{type:"event",buffered:true,durationThreshold:0}));},D=[],x=new Map,R=0,B=function(){var e=Math.min(D.length-1,Math.floor((k()-R)/50));return D[e]},H=[],q=function(e){if(H.forEach((function(n){return n(e)})),e.interactionId||"first-input"===e.entryType){var n=D[D.length-1],t=x.get(e.interactionId);if(t||D.length<10||e.duration>n.latency){if(t)e.duration>t.latency?(t.entries=[e],t.latency=e.duration):e.duration===t.latency&&e.startTime===t.entries[0].startTime&&t.entries.push(e);else {var r={id:e.interactionId,latency:e.duration,entries:[e]};x.set(r.id,r),D.push(r);}D.sort((function(e,n){return n.latency-e.latency})),D.length>10&&D.splice(10).forEach((function(e){return x.delete(e.id)}));}}},O=function(e){var n=self.requestIdleCallback||self.setTimeout,t=-1;return e=v(e),"hidden"===document.visibilityState?e():(t=n(e),p(e)),t},N=[200,500],j=function(e,n){"PerformanceEventTiming"in self&&"interactionId"in PerformanceEventTiming.prototype&&(n=n||{},C((function(){var t;F();var r,i=f("INP"),o=function(e){O((function(){e.forEach(q);var n=B();n&&n.latency!==i.value&&(i.value=n.latency,i.entries=n.entries,r());}));},c=s("event",o,{durationThreshold:null!==(t=n.durationThreshold)&&void 0!==t?t:40});r=d(e,i,N,n.reportAllChanges),c&&(c.observe({type:"first-input",buffered:true}),p((function(){o(c.takeRecords()),r(true);})),a((function(){R=k(),D.length=0,x.clear(),i=f("INP"),r=d(e,i,N,n.reportAllChanges);})));})));},_=[2500,4e3],z={},G=function(e,n){n=n||{},C((function(){var t,r=E(),i=f("LCP"),o=function(e){n.reportAllChanges||(e=e.slice(-1)),e.forEach((function(e){e.startTime<r.firstHiddenTime&&(i.value=Math.max(e.startTime-u(),0),i.entries=[e],t());}));},c=s("largest-contentful-paint",o);if(c){t=d(e,i,_,n.reportAllChanges);var m=v((function(){z[i.id]||(o(c.takeRecords()),c.disconnect(),z[i.id]=true,t(true));}));["keydown","click"].forEach((function(e){addEventListener(e,(function(){return O(m)}),{once:true,capture:true});})),p(m),a((function(r){i=f("LCP"),t=d(e,i,_,n.reportAllChanges),l((function(){i.value=performance.now()-r.timeStamp,z[i.id]=true,t(true);}));}));}}));},J=[800,1800],K=function e(n){document.prerendering?C((function(){return e(n)})):"complete"!==document.readyState?addEventListener("load",(function(){return e(n)}),true):setTimeout(n,0);},Q=function(e,n){n=n||{};var t=f("TTFB"),r=d(e,t,J,n.reportAllChanges);K((function(){var i=c();i&&(t.value=Math.max(i.responseStart-u(),0),t.entries=[i],r(true),a((function(){t=f("TTFB",0),(r=d(e,t,J,n.reportAllChanges))(true);})));}));};
+let e=-1;const t=t=>{addEventListener("pageshow",(n=>{n.persisted&&(e=n.timeStamp,t(n));}),true);},n=(e,t,n,i)=>{let s,o;return r=>{t.value>=0&&(r||i)&&(o=t.value-(s??0),(o||void 0===s)&&(s=t.value,t.delta=o,t.rating=((e,t)=>e>t[1]?"poor":e>t[0]?"needs-improvement":"good")(t.value,n),e(t)));}},i=e=>{requestAnimationFrame((()=>requestAnimationFrame((()=>e()))));},s=()=>{const e=performance.getEntriesByType("navigation")[0];if(e&&e.responseStart>0&&e.responseStart<performance.now())return e},o=()=>{const e=s();return e?.activationStart??0},r=(t,n=-1)=>{const i=s();let r="navigate";e>=0?r="back-forward-cache":i&&(document.prerendering||o()>0?r="prerender":document.wasDiscarded?r="restore":i.type&&(r=i.type.replace(/_/g,"-")));return {name:t,value:n,rating:"good",delta:0,entries:[],id:`v5-${Date.now()}-${Math.floor(8999999999999*Math.random())+1e12}`,navigationType:r}},c=new WeakMap;function a(e,t){return c.get(e)||c.set(e,new t),c.get(e)}class d{t;i=0;o=[];h(e){if(e.hadRecentInput)return;const t=this.o[0],n=this.o.at(-1);this.i&&t&&n&&e.startTime-n.startTime<1e3&&e.startTime-t.startTime<5e3?(this.i+=e.value,this.o.push(e)):(this.i=e.value,this.o=[e]),this.t?.(e);}}const h=(e,t,n={})=>{try{if(PerformanceObserver.supportedEntryTypes.includes(e)){const i=new PerformanceObserver((e=>{Promise.resolve().then((()=>{t(e.getEntries());}));}));return i.observe({type:e,buffered:!0,...n}),i}}catch{}},f=e=>{let t=false;return ()=>{t||(e(),t=true);}};let u=-1;const l=new Set,m=()=>"hidden"!==document.visibilityState||document.prerendering?1/0:0,p=e=>{if("hidden"===document.visibilityState){if("visibilitychange"===e.type)for(const e of l)e();isFinite(u)||(u="visibilitychange"===e.type?e.timeStamp:0,removeEventListener("prerenderingchange",p,true));}},v=()=>{if(u<0){const e=o(),n=document.prerendering?void 0:globalThis.performance.getEntriesByType("visibility-state").filter((t=>"hidden"===t.name&&t.startTime>e))[0]?.startTime;u=n??m(),addEventListener("visibilitychange",p,true),addEventListener("prerenderingchange",p,true),t((()=>{setTimeout((()=>{u=m();}));}));}return {get firstHiddenTime(){return u},onHidden(e){l.add(e);}}},g=e=>{document.prerendering?addEventListener("prerenderingchange",(()=>e()),true):e();},y=[1800,3e3],E=(e,s={})=>{g((()=>{const c=v();let a,d=r("FCP");const f=h("paint",(e=>{for(const t of e)"first-contentful-paint"===t.name&&(f.disconnect(),t.startTime<c.firstHiddenTime&&(d.value=Math.max(t.startTime-o(),0),d.entries.push(t),a(true)));}));f&&(a=n(e,d,y,s.reportAllChanges),t((t=>{d=r("FCP"),a=n(e,d,y,s.reportAllChanges),i((()=>{d.value=performance.now()-t.timeStamp,a(true);}));})));}));},b=[.1,.25],L=(e,s={})=>{const o=v();E(f((()=>{let c,f=r("CLS",0);const u=a(s,d),l=e=>{for(const t of e)u.h(t);u.i>f.value&&(f.value=u.i,f.entries=u.o,c());},m=h("layout-shift",l);m&&(c=n(e,f,b,s.reportAllChanges),o.onHidden((()=>{l(m.takeRecords()),c(true);})),t((()=>{u.i=0,f=r("CLS",0),c=n(e,f,b,s.reportAllChanges),i((()=>c()));})),setTimeout(c));})));};let P=0,T=1/0,_=0;const M=e=>{for(const t of e)t.interactionId&&(T=Math.min(T,t.interactionId),_=Math.max(_,t.interactionId),P=_?(_-T)/7+1:0);};let w;const C=()=>w?P:performance.interactionCount??0,I=()=>{"interactionCount"in performance||w||(w=h("event",M,{type:"event",buffered:true,durationThreshold:0}));};let F=0;class k{u=[];l=new Map;m;p;v(){F=C(),this.u.length=0,this.l.clear();}L(){const e=Math.min(this.u.length-1,Math.floor((C()-F)/50));return this.u[e]}h(e){if(this.m?.(e),!e.interactionId&&"first-input"!==e.entryType)return;const t=this.u.at(-1);let n=this.l.get(e.interactionId);if(n||this.u.length<10||e.duration>t.P){if(n?e.duration>n.P?(n.entries=[e],n.P=e.duration):e.duration===n.P&&e.startTime===n.entries[0].startTime&&n.entries.push(e):(n={id:e.interactionId,entries:[e],P:e.duration},this.l.set(n.id,n),this.u.push(n)),this.u.sort(((e,t)=>t.P-e.P)),this.u.length>10){const e=this.u.splice(10);for(const t of e)this.l.delete(t.id);}this.p?.(n);}}}const A=e=>{const t=globalThis.requestIdleCallback||setTimeout;"hidden"===document.visibilityState?e():(e=f(e),addEventListener("visibilitychange",e,{once:true,capture:true}),t((()=>{e(),removeEventListener("visibilitychange",e,{capture:true});})));},B=[200,500],S=(e,i={})=>{if(!globalThis.PerformanceEventTiming||!("interactionId"in PerformanceEventTiming.prototype))return;const s=v();g((()=>{I();let o,c=r("INP");const d=a(i,k),f=e=>{A((()=>{for(const t of e)d.h(t);const t=d.L();t&&t.P!==c.value&&(c.value=t.P,c.entries=t.entries,o());}));},u=h("event",f,{durationThreshold:i.durationThreshold??40});o=n(e,c,B,i.reportAllChanges),u&&(u.observe({type:"first-input",buffered:true}),s.onHidden((()=>{f(u.takeRecords()),o(true);})),t((()=>{d.v(),c=r("INP"),o=n(e,c,B,i.reportAllChanges);})));}));};class N{m;h(e){this.m?.(e);}}const q=[2500,4e3],x=(e,s={})=>{g((()=>{const c=v();let d,u=r("LCP");const l=a(s,N),m=e=>{s.reportAllChanges||(e=e.slice(-1));for(const t of e)l.h(t),t.startTime<c.firstHiddenTime&&(u.value=Math.max(t.startTime-o(),0),u.entries=[t],d());},p=h("largest-contentful-paint",m);if(p){d=n(e,u,q,s.reportAllChanges);const o=f((()=>{m(p.takeRecords()),p.disconnect(),d(true);})),c=e=>{e.isTrusted&&(A(o),removeEventListener(e.type,c,{capture:true}));};for(const e of ["keydown","click","visibilitychange"])addEventListener(e,c,{capture:true});t((t=>{u=r("LCP"),d=n(e,u,q,s.reportAllChanges),i((()=>{u.value=performance.now()-t.timeStamp,d(true);}));}));}}));},H=[800,1800],O=e=>{document.prerendering?g((()=>O(e))):"complete"!==document.readyState?addEventListener("load",(()=>O(e)),true):setTimeout(e);},$=(e,i={})=>{let c=r("TTFB"),a=n(e,c,H,i.reportAllChanges);O((()=>{const d=s();d&&(c.value=Math.max(d.responseStart-o(),0),c.entries=[d],a(true),t((()=>{c=r("TTFB",0),a=n(e,c,H,i.reportAllChanges),a(true);})));}));};
 
 function getPaintBlocks(resources) {
     const paintBlocks = [];
@@ -7948,12 +6756,7 @@ function Timing (app, opts) {
         if (shouldSkip) {
             return;
         }
-        const failed = entry.initiatorType !== 'fetch'
-            ? entry.responseEnd === 0
-                || (entry.transferSize === 0 && entry.decodedBodySize === 0)
-                || (entry.responseStatus && entry.responseStatus >= 400)
-            : entry.responseStatus && entry.responseStatus >= 400;
-        // will probably require custom header added to responses for tracked fetch/xhr requests:
+        // will probably require custom header added to responses for tracked requests:
         // Timing-Allow-Origin: *
         // https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Timing-Allow-Origin
         let stalled = 0;
@@ -7969,17 +6772,22 @@ function Timing (app, opts) {
             queueing: entry.requestStart - entry.fetchStart,
             dnsLookup: entry.domainLookupEnd - entry.domainLookupStart,
             initialConnection: entry.connectEnd - entry.connectStart,
-            ssl: entry.secureConnectionStart > 0
-                ? entry.connectEnd - entry.secureConnectionStart : 0,
+            ssl: entry.secureConnectionStart > 0 ? entry.connectEnd - entry.secureConnectionStart : 0,
             ttfb: entry.responseStart - entry.requestStart,
             contentDownload: entry.responseEnd - entry.responseStart,
-            total: entry.duration ?? (entry.responseEnd - entry.startTime),
+            total: entry.duration ?? entry.responseEnd - entry.startTime,
             stalled,
         };
-        if (failed) {
-            app.send(ResourceTiming(entry.startTime + getTimeOrigin(), 0, timings.ttfb, 0, 0, 0, entry.name, entry.initiatorType, 0, false, timings.queueing, timings.dnsLookup, timings.initialConnection, timings.ssl, timings.contentDownload, timings.total, timings.stalled));
-        }
-        app.send(ResourceTiming(entry.startTime + getTimeOrigin(), entry.duration, timings.ttfb, entry.transferSize > entry.encodedBodySize ? entry.transferSize - entry.encodedBodySize : 0, entry.encodedBodySize || 0, entry.decodedBodySize || 0, app.sanitizer.privateMode ? entry.name.replaceAll(/./g, '*') : entry.name, entry.initiatorType, entry.transferSize, (entry.responseStatus && entry.responseStatus === 304) || entry.transferSize === 0, timings.queueing, timings.dnsLookup, timings.initialConnection, timings.ssl, timings.contentDownload, timings.total, timings.stalled));
+        const entryName = options.resourceNameSanitizer
+            ? options.resourceNameSanitizer(entry.name)
+            : entry.name;
+        const cached = (entry.responseStatus && entry.responseStatus === 304) ||
+            // @ts-ignore
+            (entry.deliveryType && entry.deliveryType === 'cache') ||
+            (entry.transferSize === 0 && entry.decodedBodySize > 0);
+        const requestFailed = entry.responseStatus && entry.responseStatus >= 400;
+        const decodedBodySize = requestFailed ? -111 : entry.decodedBodySize || 0;
+        app.send(ResourceTiming(entry.startTime + getTimeOrigin(), entry.duration, timings.ttfb, entry.transferSize > entry.encodedBodySize ? entry.transferSize - entry.encodedBodySize : 0, entry.encodedBodySize || 0, decodedBodySize, app.sanitizer.privateMode ? entry.name.replaceAll(/./g, '*') : entryName, entry.initiatorType, entry.transferSize, cached, timings.queueing, timings.dnsLookup, timings.initialConnection, timings.ssl, timings.contentDownload, timings.total, timings.stalled));
     }
     const observer = new PerformanceObserver((list) => list.getEntries().forEach(resourceTiming));
     function onVitalsSignal(msg) {
@@ -7987,14 +6795,8 @@ function Timing (app, opts) {
             return app.send(WebVitals(msg.name, String(msg.value)));
         }
     }
-    let prevSessionID;
     app.attachStartCallback(function ({ sessionID }) {
-        if (sessionID !== prevSessionID) {
-            // Send past page resources on a newly started session
-            performance.getEntriesByType('resource').forEach(resourceTiming);
-            prevSessionID = sessionID;
-        }
-        observer.observe({ entryTypes: ['resource'] });
+        observer.observe({ type: 'resource', buffered: true });
         // browser support:
         // onCLS(): Chromium
         // onFCP(): Chromium, Firefox, Safari
@@ -8002,10 +6804,10 @@ function Timing (app, opts) {
         // onINP(): Chromium
         // onLCP(): Chromium, Firefox
         // onTTFB(): Chromium, Firefox, Safari
-        w(onVitalsSignal);
-        j(onVitalsSignal);
-        G(onVitalsSignal);
-        Q(onVitalsSignal);
+        L(onVitalsSignal);
+        S(onVitalsSignal);
+        x(onVitalsSignal);
+        $(onVitalsSignal);
     });
     app.attachStopCallback(function () {
         observer.disconnect();
@@ -8158,16 +6960,19 @@ function Scroll (app, insideIframe) {
     }, 5, false);
 }
 
-function Viewport (app) {
+function Viewport (app, options) {
     let url, width, height;
     let navigationStart;
     let referrer = document.referrer;
+    const urlSanitizer = options?.urlSanitizer || ((u) => u);
+    const titleSanitizer = options?.titleSanitizer || ((t) => t);
     const sendSetPageLocation = app.safe(() => {
         const { URL } = document;
         if (URL !== url) {
             url = URL;
-            const safeTitle = app.sanitizer.privateMode ? stringWiper(document.title) : document.title;
-            const safeUrl = app.sanitizer.privateMode ? stringWiper(url) : url;
+            const sanitized = urlSanitizer(url);
+            const safeTitle = app.sanitizer.privateMode ? stringWiper(document.title) : titleSanitizer(document.title);
+            const safeUrl = app.sanitizer.privateMode ? stringWiper(sanitized) : sanitized;
             const safeReferrer = app.sanitizer.privateMode ? stringWiper(referrer) : referrer;
             app.send(SetPageLocation(safeUrl, safeReferrer, navigationStart, safeTitle));
             navigationStart = 0;
@@ -8793,7 +7598,9 @@ class NetworkMessage {
         });
         if (!messageInfo)
             return null;
-        const isGraphql = messageInfo.url.includes("/graphql");
+        const gqlHeader = "application/graphql-response";
+        const isGraphql = messageInfo.url.includes("/graphql")
+            || Object.values(messageInfo.request.headers).some(v => v.includes(gqlHeader));
         if (isGraphql && messageInfo.response.body && typeof messageInfo.response.body === 'string') {
             const isError = messageInfo.response.body.includes("errors");
             messageInfo.status = isError ? 400 : 200;
@@ -8871,42 +7678,47 @@ const genStringBody = (body) => {
         return null;
     }
     let result;
-    if (typeof body === 'string') {
-        if (body[0] === '{' || body[0] === '[') {
-            result = body;
+    try {
+        if (typeof body === 'string') {
+            if (body[0] === '{' || body[0] === '[') {
+                result = body;
+            }
+            // 'a=1&b=2' => try to parse as query
+            const arr = body.split('&');
+            if (arr.length === 1) {
+                // not a query, parse as original string
+                result = body;
+            }
+            else {
+                // 'a=1&b=2&c' => parse as query
+                result = arr.join(',');
+            }
+        }
+        else if (isIterable(body)) {
+            // FormData or URLSearchParams or Array
+            const arr = [];
+            for (const [key, value] of body) {
+                arr.push(`${key}=${typeof value === 'string' ? value : '[object Object]'}`);
+            }
+            result = arr.join(',');
+        }
+        else if (body instanceof Blob ||
+            body instanceof ReadableStream ||
+            body instanceof ArrayBuffer) {
+            result = 'byte data';
         }
-        // 'a=1&b=2' => try to parse as query
-        const arr = body.split('&');
-        if (arr.length === 1) {
-            // not a query, parse as original string
+        else if (isPureObject(body)) {
+            // overriding ArrayBufferView which is not convertable to string
             result = body;
         }
         else {
-            // 'a=1&b=2&c' => parse as query
-            result = arr.join(',');
-        }
-    }
-    else if (isIterable(body)) {
-        // FormData or URLSearchParams or Array
-        const arr = [];
-        for (const [key, value] of body) {
-            arr.push(`${key}=${typeof value === 'string' ? value : '[object Object]'}`);
+            result = `can't parse body ${typeof body}`;
         }
-        result = arr.join(',');
-    }
-    else if (body instanceof Blob ||
-        body instanceof ReadableStream ||
-        body instanceof ArrayBuffer) {
-        result = 'byte data';
+        return result;
     }
-    else if (isPureObject(body)) {
-        // overriding ArrayBufferView which is not convertable to string
-        result = body;
+    catch (_) {
+        return "can't parse body";
     }
-    else {
-        result = `can't parse body ${typeof body}`;
-    }
-    return result;
 };
 const genGetDataByUrl = (url, getData = {}) => {
     if (!isPureObject(getData)) {
@@ -9043,15 +7855,6 @@ class BeaconProxy {
     }
 }
 
-var RequestState;
-(function (RequestState) {
-    RequestState[RequestState["UNSENT"] = 0] = "UNSENT";
-    RequestState[RequestState["OPENED"] = 1] = "OPENED";
-    RequestState[RequestState["HEADERS_RECEIVED"] = 2] = "HEADERS_RECEIVED";
-    RequestState[RequestState["LOADING"] = 3] = "LOADING";
-    RequestState[RequestState["DONE"] = 4] = "DONE";
-})(RequestState || (RequestState = {}));
-
 /**
  * I took inspiration in few stack exchange posts
  * and Tencent vConsole library (MIT)
@@ -9063,19 +7866,19 @@ class ResponseProxyHandler {
     constructor(resp, item) {
         this.resp = resp;
         this.item = item;
-        this.mockReader();
     }
     set(target, key, value) {
         return Reflect.set(target, key, value);
     }
     get(target, key) {
         const value = Reflect.get(target, key);
+        if (key === "arrayBuffer" || key === "blob") {
+            return typeof value === "function" ? value.bind(target) : value;
+        }
         switch (key) {
-            case 'arrayBuffer':
-            case 'blob':
-            case 'formData':
-            case 'json':
-            case 'text':
+            case "formData":
+            case "json":
+            case "text":
                 return () => {
                     this.item.responseType = key.toLowerCase();
                     // @ts-ignore
@@ -9085,74 +7888,13 @@ class ResponseProxyHandler {
                     });
                 };
         }
-        if (typeof value === 'function') {
+        if (typeof value === "function") {
             return value.bind(target);
         }
         else {
             return value;
         }
     }
-    mockReader() {
-        let readerReceivedValue;
-        if (!this.resp.body) {
-            // some browsers do not return `body` in some cases, like `OPTIONS` method
-            return;
-        }
-        if (typeof this.resp.body.getReader !== 'function') {
-            return;
-        }
-        const clonedResp = this.resp.clone();
-        const _getReader = clonedResp.body.getReader;
-        // @ts-ignore
-        clonedResp.body.getReader = () => {
-            const reader = _getReader.apply(this.resp.body);
-            // when readyState is already 4,
-            // it's not a chunked stream, or it had already been read.
-            // so should not update status.
-            if (this.item.readyState === RequestState.DONE) {
-                return reader;
-            }
-            const _read = reader.read;
-            const _cancel = reader.cancel;
-            this.item.responseType = 'arraybuffer';
-            // @ts-ignore
-            reader.read = () => {
-                return _read.apply(reader).then((result) => {
-                    if (!readerReceivedValue) {
-                        // @ts-ignore
-                        readerReceivedValue = new Uint8Array(result.value);
-                    }
-                    else {
-                        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                        const newValue = new Uint8Array(readerReceivedValue.length + result.value.length);
-                        newValue.set(readerReceivedValue);
-                        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                        newValue.set(result.value, readerReceivedValue.length);
-                        readerReceivedValue = newValue;
-                    }
-                    this.item.endTime = performance.now();
-                    this.item.duration = this.item.endTime - (this.item.startTime || this.item.endTime);
-                    this.item.readyState = result.done ? 4 : 3;
-                    this.item.statusText = result.done ? String(this.item.status) : 'Loading';
-                    this.item.responseSize = readerReceivedValue.length;
-                    this.item.responseSizeText = formatByteSize(this.item.responseSize);
-                    if (result.done) {
-                        this.item.response = getStringResponseByType(this.item.responseType, readerReceivedValue);
-                    }
-                    return result;
-                });
-            };
-            reader.cancel = (...args) => {
-                this.item.cancelState = 2;
-                this.item.statusText = 'Cancel';
-                this.item.endTime = performance.now();
-                this.item.duration = this.item.endTime - (this.item.startTime || this.item.endTime);
-                this.item.response = getStringResponseByType(this.item.responseType, readerReceivedValue);
-                return _cancel.apply(reader, args);
-            };
-            return reader;
-        };
-    }
 }
 class FetchProxyHandler {
     constructor(ignoredHeaders, setSessionTokenHeader, sanitize, sendMessage, isServiceUrl, tokenUrlMatcher) {
@@ -9164,14 +7906,15 @@ class FetchProxyHandler {
         this.tokenUrlMatcher = tokenUrlMatcher;
     }
     apply(target, _, argsList) {
+        var _a;
         const input = argsList[0];
         const init = argsList[1];
         if (!input ||
             // @ts-ignore
-            (typeof input !== 'string' && !(input === null || input === void 0 ? void 0 : input.url))) {
+            (typeof input !== "string" && !(input === null || input === void 0 ? void 0 : input.url))) {
             return target.apply(window, argsList);
         }
-        const isORUrl = input instanceof URL || typeof input === 'string'
+        const isORUrl = input instanceof URL || typeof input === "string"
             ? this.isServiceUrl(String(input))
             : this.isServiceUrl(String(input.url));
         if (isORUrl) {
@@ -9179,6 +7922,31 @@ class FetchProxyHandler {
         }
         const item = new NetworkMessage(this.ignoredHeaders, this.setSessionTokenHeader, this.sanitize);
         this.beforeFetch(item, input, init);
+        const signal = (argsList[0] instanceof Request ? argsList[0].signal : undefined) ||
+            ((_a = argsList[1]) === null || _a === void 0 ? void 0 : _a.signal);
+        // guard to avoid double-send
+        let abortedNotified = false;
+        const notifyAbort = () => {
+            if (abortedNotified)
+                return;
+            abortedNotified = true;
+            item.endTime = performance.now();
+            item.duration = item.endTime - (item.startTime || item.endTime);
+            item.status = 0;
+            item.statusText = "Aborted";
+            item.readyState = 0;
+            const msg = item.getMessage();
+            if (msg)
+                this.sendMessage(msg);
+        };
+        if (signal) {
+            if (signal.aborted) {
+                notifyAbort();
+            }
+            else {
+                signal.addEventListener("abort", notifyAbort, { once: true });
+            }
+        }
         this.setSessionTokenHeader((name, value) => {
             if (this.tokenUrlMatcher !== undefined) {
                 if (!this.tokenUrlMatcher(item.url)) {
@@ -9207,42 +7975,53 @@ class FetchProxyHandler {
             }
         });
         return target.apply(window, argsList)
-            .then(this.afterFetch(item))
+            .then(this.afterFetch(item, () => {
+            abortedNotified = true;
+        }))
             .catch((e) => {
-            // mock finally
             item.endTime = performance.now();
             item.duration = item.endTime - (item.startTime || item.endTime);
+            if (e && e.name === "AbortError") {
+                item.status = 0;
+                item.statusText = "Aborted";
+                item.readyState = 0;
+                if (!abortedNotified) {
+                    const msg = item.getMessage();
+                    if (msg)
+                        this.sendMessage(msg);
+                }
+            }
             throw e;
         });
     }
     beforeFetch(item, input, init) {
-        let url, method = 'GET', requestHeader = {};
+        let url, method = "GET", requestHeader = {};
         // handle `input` content
-        if (typeof input === 'string') {
+        if (typeof input === "string") {
             // when `input` is a string
-            method = (init === null || init === void 0 ? void 0 : init.method) || 'GET';
+            method = (init === null || init === void 0 ? void 0 : init.method) || "GET";
             url = getURL(input);
             requestHeader = (init === null || init === void 0 ? void 0 : init.headers) || {};
         }
         else {
             // when `input` is a `Request` object
-            method = input.method || 'GET';
+            method = input.method || "GET";
             url = getURL(input.url);
             requestHeader = input.headers;
         }
         item.method = method;
-        item.requestType = 'fetch';
+        item.requestType = "fetch";
         item.requestHeader = requestHeader;
         item.url = url.toString();
-        item.name = (url.pathname.split('/').pop() || '') + url.search;
+        item.name = (url.pathname.split("/").pop() || "") + url.search;
         item.status = 0;
-        item.statusText = 'Pending';
+        item.statusText = "Pending";
         item.readyState = 1;
         if (!item.startTime) {
             // UNSENT
             item.startTime = performance.now();
         }
-        if (Object.prototype.toString.call(requestHeader) === '[object Headers]') {
+        if (Object.prototype.toString.call(requestHeader) === "[object Headers]") {
             item.requestHeader = {};
             for (const [key, value] of requestHeader) {
                 item.requestHeader[key] = value;
@@ -9263,8 +8042,10 @@ class FetchProxyHandler {
             item.requestData = genStringBody(init.body);
         }
     }
-    afterFetch(item) {
+    afterFetch(item, onResolved) {
         return (resp) => {
+            if (onResolved)
+                onResolved === null || onResolved === void 0 ? void 0 : onResolved();
             item.endTime = performance.now();
             item.duration = item.endTime - (item.startTime || item.endTime);
             item.status = resp.status;
@@ -9273,7 +8054,8 @@ class FetchProxyHandler {
             item.header = {};
             for (const [key, value] of resp.headers) {
                 item.header[key] = value;
-                isChunked = value.toLowerCase().indexOf('chunked') > -1 ? true : isChunked;
+                isChunked =
+                    value.toLowerCase().indexOf("chunked") > -1 ? true : isChunked;
             }
             if (isChunked) {
                 // when `transfer-encoding` is chunked, the response is a stream which is under loading,
@@ -9288,7 +8070,9 @@ class FetchProxyHandler {
                 this.handleResponseBody(resp.clone(), item)
                     .then((responseValue) => {
                     item.responseSize =
-                        typeof responseValue === 'string' ? responseValue.length : responseValue.byteLength;
+                        typeof responseValue === "string"
+                            ? responseValue.length
+                            : responseValue.byteLength;
                     item.responseSizeText = formatByteSize(item.responseSize);
                     item.response = getStringResponseByType(item.responseType, responseValue);
                     const msg = item.getMessage();
@@ -9297,28 +8081,40 @@ class FetchProxyHandler {
                     }
                 })
                     .catch((e) => {
-                    if (e.name !== 'AbortError') {
+                    if (e.name === "AbortError") {
+                        item.status = 0;
+                        item.statusText = "Aborted";
+                        item.readyState = 0;
+                        const msg = item.getMessage();
+                        if (msg)
+                            this.sendMessage(msg);
+                    }
+                    else {
                         throw e;
                     }
                 });
             }
-            return new Proxy(resp, new ResponseProxyHandler(resp, item));
+            const ct = (resp.headers.get("content-type") || "").toLowerCase();
+            const isTextLike = ct.includes("application/json") || ct.startsWith("text/");
+            return isTextLike
+                ? new Proxy(resp, new ResponseProxyHandler(resp, item))
+                : resp;
         };
     }
     handleResponseBody(resp, item) {
         // parse response body by Content-Type
-        const contentType = resp.headers.get('content-type');
-        if (contentType && contentType.includes('application/json')) {
-            item.responseType = 'json';
+        const contentType = resp.headers.get("content-type");
+        if (contentType && contentType.includes("application/json")) {
+            item.responseType = "json";
             return resp.text();
         }
         else if (contentType &&
-            (contentType.includes('text/html') || contentType.includes('text/plain'))) {
-            item.responseType = 'text';
+            (contentType.includes("text/html") || contentType.includes("text/plain"))) {
+            item.responseType = "text";
             return resp.text();
         }
         else {
-            item.responseType = 'arraybuffer';
+            item.responseType = "arraybuffer";
             return resp.arrayBuffer();
         }
     }
@@ -9329,6 +8125,15 @@ class FetchProxy {
     }
 }
 
+var RequestState;
+(function (RequestState) {
+    RequestState[RequestState["UNSENT"] = 0] = "UNSENT";
+    RequestState[RequestState["OPENED"] = 1] = "OPENED";
+    RequestState[RequestState["HEADERS_RECEIVED"] = 2] = "HEADERS_RECEIVED";
+    RequestState[RequestState["LOADING"] = 3] = "LOADING";
+    RequestState[RequestState["DONE"] = 4] = "DONE";
+})(RequestState || (RequestState = {}));
+
 /**
  * I took inspiration in few stack exchange posts
  * and Tencent vConsole library (MIT)
@@ -9355,28 +8160,29 @@ class XHRProxyHandler {
             this.onTimeout();
         };
         this.item = new NetworkMessage(ignoredHeaders, setSessionTokenHeader, sanitize);
-        this.item.requestType = 'xhr';
+        this.item.requestType = "xhr";
     }
     get(target, key) {
         switch (key) {
-            case 'open':
+            case "open":
                 return this.getOpen(target);
-            case 'send':
+            case "send":
                 this.setSessionTokenHeader((name, value) => {
                     if (this.tokenUrlMatcher !== undefined) {
                         if (!this.tokenUrlMatcher(this.item.url)) {
                             return;
                         }
                     }
-                    target.setRequestHeader(name, value);
+                    if (target.readyState === 1)
+                        target.setRequestHeader(name, value);
                 });
                 return this.getSend(target);
-            case 'setRequestHeader':
+            case "setRequestHeader":
                 return this.getSetRequestHeader(target);
             default:
                 // eslint-disable-next-line no-case-declarations
                 const value = Reflect.get(target, key);
-                if (typeof value === 'function') {
+                if (typeof value === "function") {
                     return value.bind(target);
                 }
                 else {
@@ -9386,11 +8192,11 @@ class XHRProxyHandler {
     }
     set(target, key, value) {
         switch (key) {
-            case 'onreadystatechange':
+            case "onreadystatechange":
                 return this.setOnReadyStateChange(target, key, value);
-            case 'onabort':
+            case "onabort":
                 return this.setOnAbort(target, key, value);
-            case 'ontimeout':
+            case "ontimeout":
                 return this.setOnTimeout(target, key, value);
             // not tracked methods
         }
@@ -9404,9 +8210,12 @@ class XHRProxyHandler {
         this.item.endTime = performance.now();
         this.item.duration = this.item.endTime - this.item.startTime;
         this.updateItemByReadyState();
-        setTimeout(() => {
-            this.item.response = getStringResponseByType(this.item.responseType, this.item.response);
-        }, 0);
+        const rt = this.item.responseType || "";
+        if (rt === "" || rt === "text" || rt === "json") {
+            setTimeout(() => {
+                this.item.response = getStringResponseByType(rt, this.XMLReq.response);
+            }, 0);
+        }
         if (this.XMLReq.readyState === RequestState.DONE) {
             const msg = this.item.getMessage();
             if (msg) {
@@ -9416,7 +8225,7 @@ class XHRProxyHandler {
     }
     onAbort() {
         this.item.cancelState = 1;
-        this.item.statusText = 'Abort';
+        this.item.statusText = "Abort";
         const msg = this.item.getMessage();
         if (msg) {
             this.sendMessage(msg);
@@ -9424,27 +8233,28 @@ class XHRProxyHandler {
     }
     onTimeout() {
         this.item.cancelState = 3;
-        this.item.statusText = 'Timeout';
+        this.item.statusText = "Timeout";
         const msg = this.item.getMessage();
         if (msg) {
             this.sendMessage(msg);
         }
     }
     getOpen(target) {
-        const targetFunction = Reflect.get(target, 'open');
+        const targetFunction = Reflect.get(target, "open");
         return (...args) => {
             var _a, _b, _c;
             const method = args[0];
             const url = args[1];
-            this.item.method = method ? method.toUpperCase() : 'GET';
-            this.item.url = ((_a = url.toString) === null || _a === void 0 ? void 0 : _a.call(url)) || '';
-            this.item.name = (_c = (_b = this.item.url) === null || _b === void 0 ? void 0 : _b.replace(new RegExp('/*$'), '').split('/').pop()) !== null && _c !== void 0 ? _c : '';
+            this.item.method = method ? method.toUpperCase() : "GET";
+            this.item.url = ((_a = url.toString) === null || _a === void 0 ? void 0 : _a.call(url)) || "";
+            this.item.name =
+                (_c = (_b = this.item.url) === null || _b === void 0 ? void 0 : _b.replace(new RegExp("/*$"), "").split("/").pop()) !== null && _c !== void 0 ? _c : "";
             this.item.getData = genGetDataByUrl(this.item.url, {});
             return targetFunction.apply(target, args);
         };
     }
     getSend(target) {
-        const targetFunction = Reflect.get(target, 'send');
+        const targetFunction = Reflect.get(target, "send");
         return (...args) => {
             const data = args[0];
             this.item.requestData = genStringBody(data);
@@ -9452,7 +8262,7 @@ class XHRProxyHandler {
         };
     }
     getSetRequestHeader(target) {
-        const targetFunction = Reflect.get(target, 'setRequestHeader');
+        const targetFunction = Reflect.get(target, "setRequestHeader");
         return (...args) => {
             if (!this.item.requestHeader) {
                 this.item.requestHeader = {};
@@ -9488,34 +8298,44 @@ class XHRProxyHandler {
             case RequestState.UNSENT:
             case RequestState.OPENED:
                 this.item.status = RequestState.UNSENT;
-                this.item.statusText = 'Pending';
+                this.item.statusText = "Pending";
                 if (!this.item.startTime) {
                     this.item.startTime = performance.now();
                 }
                 break;
             case RequestState.HEADERS_RECEIVED:
                 this.item.status = this.XMLReq.status;
-                this.item.statusText = 'Loading';
+                this.item.statusText = "Loading";
                 this.item.header = {};
                 // eslint-disable-next-line no-case-declarations
-                const header = this.XMLReq.getAllResponseHeaders() || '', headerArr = header.split('\n');
+                const header = this.XMLReq.getAllResponseHeaders() || "", headerArr = header.split("\n");
                 // extract plain text to key-value format
                 for (let i = 0; i < headerArr.length; i++) {
                     const line = headerArr[i];
                     if (!line) {
                         continue;
                     }
-                    const arr = line.split(': ');
+                    const arr = line.split(": ");
                     const key = arr[0];
-                    this.item.header[key] = arr.slice(1).join(': ');
+                    this.item.header[key] = arr.slice(1).join(": ");
                 }
                 break;
             case RequestState.LOADING:
                 this.item.status = this.XMLReq.status;
-                this.item.statusText = 'Loading';
-                if (!!this.XMLReq.response && this.XMLReq.response.length) {
-                    this.item.responseSize = this.XMLReq.response.length;
-                    this.item.responseSizeText = formatByteSize(this.item.responseSize);
+                this.item.statusText = "Loading";
+                const response = this.XMLReq.response;
+                if (response) {
+                    const respSize = typeof response === "string"
+                        ? response.length
+                        : response instanceof ArrayBuffer
+                            ? response.byteLength
+                            : typeof Blob !== "undefined" && response instanceof Blob
+                                ? response.size
+                                : 0;
+                    if (respSize) {
+                        this.item.responseSize = respSize;
+                        this.item.responseSizeText = formatByteSize(this.item.responseSize);
+                    }
                 }
                 break;
             case RequestState.DONE:
@@ -9524,16 +8344,30 @@ class XHRProxyHandler {
                 // show status code when request completed
                 this.item.statusText = String(this.item.status);
                 this.item.endTime = performance.now();
-                this.item.duration = this.item.endTime - (this.item.startTime || this.item.endTime);
-                this.item.response = this.XMLReq.response;
-                if (!!this.XMLReq.response && this.XMLReq.response.length) {
-                    this.item.responseSize = this.XMLReq.response.length;
-                    this.item.responseSizeText = formatByteSize(this.item.responseSize);
+                this.item.duration =
+                    this.item.endTime - (this.item.startTime || this.item.endTime);
+                const resp = this.XMLReq.response;
+                const respType = this.XMLReq.responseType || "";
+                if (respType === "" || respType === "text" || respType === "json") {
+                    this.item.response = resp;
+                }
+                if (resp) {
+                    const respSize = typeof resp === "string"
+                        ? resp.length
+                        : resp instanceof ArrayBuffer
+                            ? resp.byteLength
+                            : typeof Blob !== "undefined" && resp instanceof Blob
+                                ? resp.size
+                                : 0;
+                    if (respSize) {
+                        this.item.responseSize = respSize;
+                        this.item.responseSizeText = formatByteSize(respSize);
+                    }
                 }
                 break;
             default:
                 this.item.status = this.XMLReq.status;
-                this.item.statusText = 'Unknown';
+                this.item.statusText = "Unknown";
                 break;
         }
     }
@@ -9549,10 +8383,17 @@ class XHRProxy {
     }
 }
 
-const getWarning = (api) => {
+const warn = (api) => {
     const str = `Openreplay: Can't find ${api} in global context.`;
     console.warn(str);
 };
+const OR_FLAG = Symbol('OpenReplayProxyOriginal');
+const isProxied = (fn) => !!fn && fn[OR_FLAG] !== undefined;
+const unwrap = (fn) => isProxied(fn) ? fn[OR_FLAG] : fn;
+const wrap = (proxy, orig) => {
+    proxy[OR_FLAG] = orig;
+    return proxy;
+};
 /**
  * Creates network proxies for XMLHttpRequest, fetch, and sendBeacon to intercept and monitor network requests and
  * responses.
@@ -9586,26 +8427,24 @@ function createNetworkProxy(context, ignoredHeaders, setSessionTokenHeader, sani
     if (!context)
         return;
     if (modules.xhr) {
-        if (context.XMLHttpRequest) {
-            context.XMLHttpRequest = XHRProxy.create(ignoredHeaders, setSessionTokenHeader, sanitize, sendMessage, isServiceUrl, tokenUrlMatcher);
-        }
+        const original = unwrap(context.XMLHttpRequest);
+        if (!original)
+            warn('XMLHttpRequest');
         else {
-            getWarning("XMLHttpRequest");
+            context.XMLHttpRequest = wrap(XHRProxy.create(ignoredHeaders, setSessionTokenHeader, sanitize, sendMessage, isServiceUrl, tokenUrlMatcher), original);
         }
     }
     if (modules.fetch) {
-        if (context.fetch) {
-            context.fetch = FetchProxy.create(ignoredHeaders, setSessionTokenHeader, sanitize, sendMessage, isServiceUrl, tokenUrlMatcher);
-        }
+        const original = unwrap(context.fetch);
+        if (!original)
+            warn('fetch');
         else {
-            getWarning("fetch");
+            context.fetch = wrap(FetchProxy.create(ignoredHeaders, setSessionTokenHeader, sanitize, sendMessage, isServiceUrl, tokenUrlMatcher), original);
         }
     }
-    if (modules.beacon) {
-        if ((_a = context.navigator) === null || _a === void 0 ? void 0 : _a.sendBeacon) {
-            const origBeacon = context.navigator.sendBeacon;
-            context.navigator.sendBeacon = BeaconProxy.create(origBeacon, ignoredHeaders, setSessionTokenHeader, sanitize, sendMessage, isServiceUrl);
-        }
+    if (modules.beacon && ((_a = context.navigator) === null || _a === void 0 ? void 0 : _a.sendBeacon)) {
+        const original = unwrap(context.navigator.sendBeacon);
+        context.navigator.sendBeacon = wrap(BeaconProxy.create(original, ignoredHeaders, setSessionTokenHeader, sanitize, sendMessage, isServiceUrl), original);
     }
 }
 
@@ -9922,6 +8761,57 @@ function LongAnimationTask (app, opts) {
     });
 }
 
+const toIgnore = ["composite", "computedOffset", "easing", "offset"];
+function webAnimations(app, options = {}) {
+    const { allElements = false } = options;
+    let listening = new WeakSet();
+    let handled = new WeakSet();
+    function wire(anim, el, nodeId) {
+        if (handled.has(anim))
+            return;
+        handled.add(anim);
+        anim.addEventListener('finish', () => {
+            const lastKF = anim.effect.getKeyframes().at(-1);
+            const computedStyle = getComputedStyle(el);
+            const keys = Object.keys(lastKF).filter((p) => !toIgnore.includes(p));
+            // @ts-ignore
+            const finalStyle = {};
+            keys.forEach((key) => {
+                finalStyle[key] = computedStyle[key];
+            });
+            app.send(NodeAnimationResult(nodeId, JSON.stringify(finalStyle)));
+        }, { once: true });
+    }
+    function scanElement(el, nodeId) {
+        el.getAnimations({ subtree: false }).forEach((anim) => wire(anim, el, nodeId));
+    }
+    app.nodes.attachNodeCallback((node) => {
+        if ((allElements || node.nodeName.includes('-')) && 'getAnimations' in node) {
+            const animations = node.getAnimations({ subtree: false });
+            const id = app.nodes.getID(node);
+            if (animations.length > 0 && !listening.has(node) && id) {
+                listening.add(node);
+                scanElement(node, id);
+                node.addEventListener('animationstart', () => scanElement(node, id));
+            }
+        }
+    });
+    const origAnimate = Element.prototype.animate;
+    Element.prototype.animate = function (...args) {
+        const anim = origAnimate.apply(this, args);
+        const id = app.nodes.getID(this);
+        if (!id)
+            return anim;
+        wire(anim, this, id);
+        return anim;
+    };
+    app.attachStopCallback(() => {
+        Element.prototype.animate = origAnimate; // Restore original animate method
+        listening = new WeakSet();
+        handled = new WeakSet();
+    });
+}
+
 const Messages = _Messages;
 const DOCS_SETUP = '/en/sdk';
 function processOptions(obj) {
@@ -9973,7 +8863,7 @@ class API {
         this.signalStartIssue = (reason, missingApi) => {
             const doNotTrack = this.checkDoNotTrack();
             console.log("Tracker couldn't start due to:", JSON.stringify({
-                trackerVersion: '17.0.0-beta.0',
+                trackerVersion: '17.0.1',
                 projectKey: this.options.projectKey,
                 doNotTrack,
                 reason: missingApi.length ? `missing api: ${missingApi.join(',')}` : reason,
@@ -10067,7 +8957,7 @@ class API {
         this.app = app;
         if (!this.crossdomainMode) {
             // no need to send iframe viewport data since its a node for us
-            Viewport(app);
+            Viewport(app, options.urls);
             // calculated in main window
             Connection(app);
             // while we can calculate it here, trying to compute it for all parts is hard
@@ -10093,10 +8983,8 @@ class API {
             Network(app, options.network);
         }
         selection(app);
+        webAnimations(app, options.webAnimations);
         window.__OPENREPLAY__ = this;
-        if (options.flags && options.flags.onFlagsLoad) {
-            this.onFlagsLoad(options.flags.onFlagsLoad);
-        }
         const wOpen = window.open;
         if (options.autoResetOnWindowOpen || options.resetTabOnWindowOpen) {
             app.attachStartCallback(() => {
@@ -10119,24 +9007,6 @@ class API {
             });
         }
     }
-    isFlagEnabled(flagName) {
-        return this.featureFlags.isFlagEnabled(flagName);
-    }
-    onFlagsLoad(callback) {
-        this.app?.featureFlags.onFlagsLoad(callback);
-    }
-    clearPersistFlags() {
-        this.app?.featureFlags.clearPersistFlags();
-    }
-    reloadFlags() {
-        return this.app?.featureFlags.reloadFlags();
-    }
-    getFeatureFlag(flagName) {
-        return this.app?.featureFlags.getFeatureFlag(flagName);
-    }
-    getAllFeatureFlags() {
-        return this.app?.featureFlags.flags;
-    }
     use(fn) {
         return fn(this.app, this.options);
     }
@@ -10267,12 +9137,6 @@ class API {
         }
         return this.app.getTabId();
     }
-    getUxId() {
-        if (this.app === null) {
-            return null;
-        }
-        return this.app.getUxtId();
-    }
     sessionID() {
         deprecationWarn("'sessionID' method", "'getSessionID' method", '/');
         return this.getSessionID();
@@ -10316,12 +9180,20 @@ class API {
                 return this.issue(key, payload);
             }
             else {
+                if (!payload || typeof payload === 'string') {
+                    return this.app.send(CustomEvent(key, payload));
+                }
                 try {
+                    if ('or_timestamp' in payload) {
+                        const startTs = this.getSessionInfo()?.timestamp ?? 0;
+                        const diff = payload.or_timestamp - startTs;
+                        if (diff < 0) {
+                            console.error(`OpenReplay: event ${key} has or_timestamp (${payload.or_timestamp}) before session start (${startTs}). It will be ignored.`);
+                        }
+                    }
                     payload = JSON.stringify(payload);
                 }
-                catch (e) {
-                    return;
-                }
+                catch (_) { }
                 this.app.send(CustomEvent(key, payload));
             }
         }
@@ -10445,42 +9317,6 @@ class TrackerSingleton {
         }
         this.instance.handleError(e, metadata);
     }
-    isFlagEnabled(flagName) {
-        if (!IN_BROWSER || !this.ensureConfigured() || !this.instance) {
-            return false;
-        }
-        return this.instance.isFlagEnabled(flagName);
-    }
-    onFlagsLoad(...args) {
-        if (!IN_BROWSER || !this.ensureConfigured() || !this.instance) {
-            return;
-        }
-        this.instance.onFlagsLoad(...args);
-    }
-    clearPersistFlags() {
-        if (!IN_BROWSER || !this.ensureConfigured() || !this.instance) {
-            return;
-        }
-        this.instance.clearPersistFlags();
-    }
-    reloadFlags() {
-        if (!IN_BROWSER || !this.ensureConfigured() || !this.instance) {
-            return;
-        }
-        return this.instance.reloadFlags();
-    }
-    getFeatureFlag(flagName) {
-        if (!IN_BROWSER || !this.ensureConfigured() || !this.instance) {
-            return;
-        }
-        return this.instance.getFeatureFlag(flagName);
-    }
-    getAllFeatureFlags() {
-        if (!IN_BROWSER || !this.ensureConfigured() || !this.instance) {
-            return;
-        }
-        return this.instance.getAllFeatureFlags();
-    }
     restartCanvasTracking() {
         if (!IN_BROWSER || !this.ensureConfigured() || !this.instance) {
             return;
@@ -10603,12 +9439,6 @@ class TrackerSingleton {
         }
         return this.instance.getTabId();
     }
-    getUxId() {
-        if (!IN_BROWSER || !this.ensureConfigured() || !this.instance) {
-            return null;
-        }
-        return this.instance.getUxId();
-    }
 }
 const tracker = new TrackerSingleton();