@openreplay/tracker 16.4.10 → 17.0.0

package/dist/lib/index.js

@@ -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);
@@ -1465,6 +1378,43 @@ function simpleMerge(defaultObj, givenObj) {
     }
     return result;
 }
+function throttleWithTrailing(fn, interval) {
+    const lastCalls = new Map();
+    const timeouts = new Map();
+    const lastArgs = new Map();
+    const throttled = function (key, ...args) {
+        const now = Date.now();
+        const lastCall = lastCalls.get(key) ?? 0;
+        const remaining = interval - (now - lastCall);
+        lastArgs.set(key, args);
+        if (remaining <= 0) {
+            if (timeouts.has(key)) {
+                clearTimeout(timeouts.get(key));
+                timeouts.delete(key);
+            }
+            lastCalls.set(key, now);
+            fn(key, ...args);
+        }
+        else if (!timeouts.has(key)) {
+            const timeoutId = setTimeout(() => {
+                lastCalls.set(key, Date.now());
+                timeouts.delete(key);
+                const finalArgs = lastArgs.get(key);
+                fn(key, ...finalArgs);
+            }, remaining);
+            timeouts.set(key, timeoutId);
+        }
+    };
+    throttled.clear = () => {
+        for (const timeout of timeouts.values()) {
+            clearTimeout(timeout);
+        }
+        timeouts.clear();
+        lastArgs.clear();
+        lastCalls.clear();
+    };
+    return throttled;
+}
 
 // Auto-generated, do not edit
 /* eslint-disable */
@@ -1675,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 */,
@@ -1803,9 +1760,9 @@ function SetNodeAttributeDict(id, name, value) {
         value,
     ];
 }
-function ResourceTimingDeprecated(timestamp, duration, ttfb, headerSize, encodedBodySize, decodedBodySize, url, initiator) {
+function ResourceTimingDeprecatedDeprecated(timestamp, duration, ttfb, headerSize, encodedBodySize, decodedBodySize, url, initiator) {
     return [
-        53 /* Messages.Type.ResourceTimingDeprecated */,
+        53 /* Messages.Type.ResourceTimingDeprecatedDeprecated */,
         timestamp,
         duration,
         ttfb,
@@ -1887,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 */,
@@ -2019,6 +1983,47 @@ function WSChannel(chType, channelName, data, timestamp, dir, messageType) {
         messageType,
     ];
 }
+function ResourceTiming(timestamp, duration, ttfb, headerSize, encodedBodySize, decodedBodySize, url, initiator, transferredSize, cached, queueing, dnsLookup, initialConnection, ssl, contentDownload, total, stalled) {
+    return [
+        85 /* Messages.Type.ResourceTiming */,
+        timestamp,
+        duration,
+        ttfb,
+        headerSize,
+        encodedBodySize,
+        decodedBodySize,
+        url,
+        initiator,
+        transferredSize,
+        cached,
+        queueing,
+        dnsLookup,
+        initialConnection,
+        ssl,
+        contentDownload,
+        total,
+        stalled,
+    ];
+}
+function Incident(label, startTime, endTime) {
+    return [
+        87 /* Messages.Type.Incident */,
+        label,
+        startTime,
+        endTime,
+    ];
+}
+function LongAnimationTask$1(name, duration, blockingDuration, firstUIEventTimestamp, startTime, scripts) {
+    return [
+        89 /* Messages.Type.LongAnimationTask */,
+        name,
+        duration,
+        blockingDuration,
+        firstUIEventTimestamp,
+        startTime,
+        scripts,
+    ];
+}
 function InputChange(id, value, valueMasked, label, hesitationTime, inputDuration) {
     return [
         112 /* Messages.Type.InputChange */,
@@ -2050,9 +2055,9 @@ function UnbindNodes(totalRemovedPercent) {
         totalRemovedPercent,
     ];
 }
-function ResourceTiming(timestamp, duration, ttfb, headerSize, encodedBodySize, decodedBodySize, url, initiator, transferredSize, cached) {
+function ResourceTimingDeprecated(timestamp, duration, ttfb, headerSize, encodedBodySize, decodedBodySize, url, initiator, transferredSize, cached) {
     return [
-        116 /* Messages.Type.ResourceTiming */,
+        116 /* Messages.Type.ResourceTimingDeprecated */,
         timestamp,
         duration,
         ttfb,
@@ -2149,9 +2154,11 @@ var _Messages = /*#__PURE__*/Object.freeze({
     Fetch: Fetch,
     GraphQL: GraphQL,
     GraphQLDeprecated: GraphQLDeprecated,
+    Incident: Incident,
     InputChange: InputChange,
     JSException: JSException,
     LoadFontFace: LoadFontFace,
+    LongAnimationTask: LongAnimationTask$1,
     LongTask: LongTask,
     Metadata: Metadata,
     MobX: MobX,
@@ -2163,6 +2170,7 @@ var _Messages = /*#__PURE__*/Object.freeze({
     NetworkRequest: NetworkRequest,
     NetworkRequestDeprecated: NetworkRequestDeprecated,
     NgRx: NgRx,
+    NodeAnimationResult: NodeAnimationResult,
     OTable: OTable,
     PageLoadTiming: PageLoadTiming,
     PageRenderTiming: PageRenderTiming,
@@ -2175,6 +2183,7 @@ var _Messages = /*#__PURE__*/Object.freeze({
     RemoveNodeAttribute: RemoveNodeAttribute,
     ResourceTiming: ResourceTiming,
     ResourceTimingDeprecated: ResourceTimingDeprecated,
+    ResourceTimingDeprecatedDeprecated: ResourceTimingDeprecatedDeprecated,
     SelectionChange: SelectionChange,
     SetCSSDataURLBased: SetCSSDataURLBased,
     SetInputChecked: SetInputChecked,
@@ -2188,6 +2197,7 @@ var _Messages = /*#__PURE__*/Object.freeze({
     SetNodeData: SetNodeData,
     SetNodeFocus: SetNodeFocus,
     SetNodeScroll: SetNodeScroll,
+    SetNodeSlot: SetNodeSlot,
     SetPageLocation: SetPageLocation,
     SetPageLocationDeprecated: SetPageLocationDeprecated,
     SetPageVisibility: SetPageVisibility,
@@ -2262,7 +2272,7 @@ function Performance (app, opts) {
 const WATCHED_TAGS_KEY = '__or__watched_tags__';
 class TagWatcher {
     constructor(params) {
-        this.intervals = {};
+        this.interval = null;
         this.tags = [];
         this.sessionStorage = params.sessionStorage;
         this.errLog = params.errLog;
@@ -2304,9 +2314,12 @@ class TagWatcher {
     }
     setTags(tags) {
         this.tags = tags;
-        this.intervals = {};
-        tags.forEach((tag) => {
-            this.intervals[tag.id] = setInterval(() => {
+        if (this.interval) {
+            clearInterval(this.interval);
+            this.interval = null;
+        }
+        this.interval = setInterval(() => {
+            this.tags.forEach((tag) => {
                 const possibleEls = document.querySelectorAll(tag.selector);
                 if (possibleEls.length > 0) {
                     const el = possibleEls[0];
@@ -2314,1002 +2327,22 @@ class TagWatcher {
                     el.__or_watcher_tagname = tag.id;
                     this.observer.observe(el);
                 }
-            }, 500);
-        });
+            });
+        }, 500);
     }
     onTagRendered(tagId) {
-        if (this.intervals[tagId]) {
-            clearInterval(this.intervals[tagId]);
+        if (this.tags.findIndex(t => t.id === tagId)) {
+            this.tags = this.tags.filter((tag) => tag.id !== tagId);
         }
         this.onTag(tagId);
     }
     clear() {
-        this.tags.forEach((tag) => {
-            clearInterval(this.intervals[tag.id]);
-        });
         this.tags = [];
-        this.intervals = {};
-        this.observer.disconnect();
-    }
-}
-
-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();
+        if (this.interval) {
+            clearInterval(this.interval);
+            this.interval = null;
         }
-        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);
+        this.observer.disconnect();
     }
 }
 
@@ -4152,6 +3185,13 @@ 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 hasHashtag = href.startsWith('#');
@@ -4177,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) {
@@ -4283,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,
@@ -4292,6 +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;
@@ -4472,6 +3509,18 @@ 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.Removed);
+                        this.commitNode(nid);
+                    }
+                });
+            });
+        }
         if (isNew) {
             this.recents.set(id, RecentsType.New);
         }
@@ -4502,6 +3551,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));
@@ -4530,8 +3582,15 @@ class Observer {
         if (isRootNode(node)) {
             return true;
         }
-        // @ts-ignore SALESFORCE
-        const parent = node.assignedSlot ? node.assignedSlot : node.parentNode;
+        let slot = node.assignedSlot;
+        let isLightDom = false;
+        if (slot) {
+            // Check if the node is in light DOM (not in shadow DOM)
+            // This is a workaround for the issue with shadow DOM and slots
+            // where the slot is not assigned to the node in shadow DOM.
+            isLightDom = node.getRootNode() instanceof ShadowRoot;
+        }
+        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)
@@ -4543,7 +3602,15 @@ class Observer {
                 this.unbindTree(node);
                 return false;
             }
-            parentID = this.app.nodes.getID(parent);
+            if (isLightDom && slot) {
+                parentID = this.app.nodes.getID(slot);
+                // in light dom, we don't "slot" the node,
+                // but rather use the slot as a parent
+                slot = null;
+            }
+            else {
+                parentID = this.app.nodes.getID(parent);
+            }
             if (parentID === undefined) {
                 this.unbindTree(node);
                 return false;
@@ -4603,12 +3670,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.sendNodeData(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) {
@@ -4624,7 +3714,12 @@ class Observer {
                 throw 'commitNode: node is not a text';
             }
             // for text node id != 0, hence parent is Element
-            this.sendNodeData(id, parent, node.data);
+            if (this.throttling) {
+                this.throttledSetNodeData(id, parent, node.data);
+            }
+            else {
+                this.sendNodeData(id, parent, node.data);
+            }
         }
         return true;
     }
@@ -4667,6 +3762,7 @@ class Observer {
     disconnect() {
         this.observer.disconnect();
         this.clear();
+        this.throttledSetNodeData.clear();
     }
 }
 
@@ -4770,16 +3866,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 {
@@ -4805,6 +3903,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 {
@@ -4826,7 +3945,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();
@@ -5234,9 +4354,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 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(\"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(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,a=null,u=h.NotActive;function o(t){a&&a.finaliseBatch(t)}function c(){return new Promise((t=>{u=h.Stopping,null!==p&&(clearInterval(p),p=null),a&&(a.clean(),a=null),r&&(r.clean(),setTimeout((()=>{r=null}),20)),setTimeout((()=>{u=h.NotActive,t(null)}),100)}))}function g(){[h.Stopped,h.Stopping].includes(u)||(postMessage(\"a_stop\"),c().then((()=>{postMessage(\"a_start\")})))}let l,p=null;self.onmessage=({data:s})=>{if(\"stop\"===s)return o(),void c().then((()=>{u=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?(u=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),a=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)),u=h.Active):\"auth\"===s.type?r?a?(r.authorise(s.token),void(s.beaconSizeLimit&&a.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(a){const t=a;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 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 });
@@ -5288,7 +4407,7 @@ class App {
         this.stopCallbacks = [];
         this.commitCallbacks = [];
         this.activityState = ActivityState.NotActive;
-        this.version = '16.4.10'; // TODO: version compatability check inside each plugin.
+        this.version = '17.0.0'; // TODO: version compatability check inside each plugin.
         this.socketMode = false;
         this.compressionThreshold = 24 * 1000;
         this.bc = null;
@@ -5299,7 +4418,6 @@ class App {
         this.pageFrames = [];
         this.frameOderNumber = 0;
         this.frameLevel = 0;
-        this.features = {};
         this.emptyBatchCounter = 0;
         /** used by child iframes for crossdomain only */
         this.parentActive = false;
@@ -5391,13 +4509,6 @@ class App {
                     }
                 };
                 void signalId();
-                if (this.active()) {
-                    // @ts-ignore
-                    event.source?.postMessage({ line: proto.startIframe }, '*');
-                }
-                else {
-                    this.addCommand(proto.startIframe);
-                }
             }
             /**
              * proxying messages from iframe to main body, so they can be in one batch (same indexes, etc)
@@ -5405,7 +4516,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) => {
@@ -5415,7 +4527,7 @@ class App {
                                 fixedMessage = [type, x + left, y + top];
                             }
                         });
-                        return fixedMessage;
+                        mappedMessages.push(fixedMessage);
                     }
                     if (msg[0] === 68 /* MType.MouseClick */) {
                         let fixedMessage = msg;
@@ -5441,9 +4553,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);
             }
@@ -5582,170 +4696,9 @@ class App {
         this.orderNumber = 0;
         this.coldStartTs = 0;
         this.singleBuffer = false;
-        /**
-         * start buffering messages without starting the actual session, which gives
-         * user 30 seconds to "activate" and record session by calling `start()` on conditional trigger,
-         * and we will then send buffered batch, so it won't get lost
-         * */
-        this.coldStart = async (startOpts = {}, conditional) => {
-            this.singleBuffer = false;
-            const second = 1000;
-            const isNewSession = this.checkSessionToken(startOpts.forceNew);
-            if (conditional) {
-                await this.setupConditionalStart(startOpts);
-            }
-            const cycle = () => {
-                this.orderNumber += 1;
-                adjustTimeOrigin();
-                this.coldStartTs = now();
-                if (this.orderNumber % 2 === 0) {
-                    this.bufferedMessages1.length = 0;
-                    this.bufferedMessages1.push(Timestamp(this.timestamp()));
-                    this.bufferedMessages1.push(TabData(this.session.getTabId()));
-                }
-                else {
-                    this.bufferedMessages2.length = 0;
-                    this.bufferedMessages2.push(Timestamp(this.timestamp()));
-                    this.bufferedMessages2.push(TabData(this.session.getTabId()));
-                }
-                this.stop(false);
-                this.activityState = ActivityState.ColdStart;
-                if (startOpts.sessionHash) {
-                    this.session.applySessionHash(startOpts.sessionHash);
-                }
-                if (startOpts.forceNew) {
-                    this.session.reset();
-                }
-                this.session.assign({
-                    userID: startOpts.userID,
-                    metadata: startOpts.metadata,
-                });
-                if (!isNewSession) {
-                    this.debug.log('continuing session on new tab', this.session.getTabId());
-                    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-                    this.send(TabChange(this.session.getTabId()));
-                }
-                this.observer.observe();
-                this.ticker.start();
-            };
-            this.coldInterval = setInterval(() => {
-                cycle();
-            }, 30 * second);
-            cycle();
-        };
-        this.setupConditionalStart = async (startOpts) => {
-            this.conditionsManager = new ConditionsManager(this, startOpts);
-            const r = await fetch(this.options.ingestPoint + '/v1/web/start', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({
-                    ...this.getTrackerInfo(),
-                    timestamp: now(),
-                    doNotRecord: true,
-                    bufferDiff: 0,
-                    userID: this.session.getInfo().userID,
-                    token: undefined,
-                    deviceMemory,
-                    jsHeapSizeLimit,
-                    timezone: getTimezone(),
-                    width: window.screen.width,
-                    height: window.screen.height,
-                }),
-            });
-            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;
-            this.session.assign({ projectID });
-            this.session.setUserInfo({
-                userBrowser,
-                userCity,
-                userCountry,
-                userDevice,
-                userOS,
-                userState,
-            });
-            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);
-        };
         this.onSessionSent = () => {
             return;
         };
-        /**
-         * Starts offline session recording
-         * @param {Object} startOpts - options for session start, same as .start()
-         * @param {Function} onSessionSent - callback that will be called once session is fully sent
-         * */
-        this.offlineRecording = (startOpts = {}, onSessionSent) => {
-            this.onSessionSent = onSessionSent;
-            this.singleBuffer = true;
-            const isNewSession = this.checkSessionToken(startOpts.forceNew);
-            adjustTimeOrigin();
-            this.coldStartTs = now();
-            const saverBuffer = this.localStorage.getItem(bufferStorageKey);
-            if (saverBuffer) {
-                const data = JSON.parse(saverBuffer);
-                this.bufferedMessages1 = Array.isArray(data) ? data : this.bufferedMessages1;
-                this.localStorage.removeItem(bufferStorageKey);
-            }
-            this.bufferedMessages1.push(Timestamp(this.timestamp()));
-            this.bufferedMessages1.push(TabData(this.session.getTabId()));
-            this.activityState = ActivityState.ColdStart;
-            if (startOpts.sessionHash) {
-                this.session.applySessionHash(startOpts.sessionHash);
-            }
-            if (startOpts.forceNew) {
-                this.session.reset();
-            }
-            this.session.assign({
-                userID: startOpts.userID,
-                metadata: startOpts.metadata,
-            });
-            const onStartInfo = { sessionToken: '', userUUID: '', sessionID: '' };
-            this.startCallbacks.forEach((cb) => cb(onStartInfo));
-            if (!isNewSession) {
-                // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-                this.send(TabChange(this.session.getTabId()));
-            }
-            this.observer.observe();
-            this.ticker.start();
-            return {
-                saveBuffer: this.saveBuffer,
-                getBuffer: this.getBuffer,
-                setBuffer: this.setBuffer,
-            };
-        };
-        /**
-         * Saves the captured messages in localStorage (or whatever is used in its place)
-         *
-         * Then, when this.offlineRecording is called, it will preload this messages and clear the storage item
-         *
-         * Keeping the size of local storage reasonable is up to the end users of this library
-         * */
-        this.saveBuffer = () => {
-            this.localStorage.setItem(bufferStorageKey, JSON.stringify(this.bufferedMessages1));
-        };
-        /**
-         * @returns buffer with stored messages for offline recording
-         * */
-        this.getBuffer = () => {
-            return this.bufferedMessages1;
-        };
-        /**
-         * Used to set a buffer with messages array
-         * */
-        this.setBuffer = (buffer) => {
-            this.bufferedMessages1 = buffer;
-        };
         this.prevOpts = {};
         this.restartCanvasTracking = () => {
             this.canvasRecorder?.restartTracking();
@@ -5775,7 +4728,6 @@ class App {
                 });
             });
         };
-        this.onUxtCb = [];
         this.contextId = Math.random().toString(36).slice(2);
         this.projectKey = projectKey;
         this.networkOptions = options.network;
@@ -5810,8 +4762,9 @@ class App {
                 useAnimationFrame: false,
             },
             forceNgOff: false,
-            inlineCss: 0,
+            inlineCss: InlineCssMode.Unset,
             disableSprites: false,
+            disableThrottling: false,
         };
         this.options = simpleMerge(defaultOptions, options);
         if (!this.insideIframe &&
@@ -5842,7 +4795,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,
@@ -6254,6 +5206,162 @@ class App {
         const sessionToken = this.session.getSessionToken(this.projectKey);
         return needNewSessionID || !sessionToken;
     }
+    /**
+     * start buffering messages without starting the actual session, which gives
+     * user 30 seconds to "activate" and record session by calling `start()` on conditional trigger,
+     * and we will then send buffered batch, so it won't get lost
+     * */
+    async coldStart(startOpts = {}, conditional) {
+        this.singleBuffer = false;
+        const second = 1000;
+        const isNewSession = this.checkSessionToken(startOpts.forceNew);
+        if (conditional) {
+            await this.setupConditionalStart(startOpts);
+        }
+        const cycle = () => {
+            this.orderNumber += 1;
+            adjustTimeOrigin();
+            this.coldStartTs = now();
+            if (this.orderNumber % 2 === 0) {
+                this.bufferedMessages1.length = 0;
+                this.bufferedMessages1.push(Timestamp(this.timestamp()));
+                this.bufferedMessages1.push(TabData(this.session.getTabId()));
+            }
+            else {
+                this.bufferedMessages2.length = 0;
+                this.bufferedMessages2.push(Timestamp(this.timestamp()));
+                this.bufferedMessages2.push(TabData(this.session.getTabId()));
+            }
+            this.stop(false);
+            this.activityState = ActivityState.ColdStart;
+            if (startOpts.sessionHash) {
+                this.session.applySessionHash(startOpts.sessionHash);
+            }
+            if (startOpts.forceNew) {
+                this.session.reset();
+            }
+            this.session.assign({
+                userID: startOpts.userID,
+                metadata: startOpts.metadata,
+            });
+            if (!isNewSession) {
+                this.debug.log('continuing session on new tab', this.session.getTabId());
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+                this.send(TabChange(this.session.getTabId()));
+            }
+            this.observer.observe();
+            this.ticker.start();
+        };
+        this.coldInterval = setInterval(() => {
+            cycle();
+        }, 30 * second);
+        cycle();
+    }
+    async setupConditionalStart(startOpts) {
+        this.conditionsManager = new ConditionsManager(this, startOpts);
+        const r = await fetch(this.options.ingestPoint + '/v1/web/start', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                ...this.getTrackerInfo(),
+                timestamp: now(),
+                doNotRecord: true,
+                bufferDiff: 0,
+                userID: this.session.getInfo().userID,
+                token: undefined,
+                deviceMemory,
+                jsHeapSizeLimit,
+                timezone: getTimezone(),
+                width: window.screen.width,
+                height: window.screen.height,
+            }),
+        });
+        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, } = await r.json();
+        this.session.assign({ projectID });
+        this.session.setUserInfo({
+            userBrowser,
+            userCity,
+            userCountry,
+            userDevice,
+            userOS,
+            userState,
+        });
+        const onStartInfo = { sessionToken: token, userUUID: '', sessionID: '' };
+        this.startCallbacks.forEach((cb) => cb(onStartInfo));
+        await this.conditionsManager?.fetchConditions(projectID, token);
+        await this.tagWatcher.fetchTags(this.options.ingestPoint, token);
+    }
+    /**
+     * Starts offline session recording
+     * @param {Object} startOpts - options for session start, same as .start()
+     * @param {Function} onSessionSent - callback that will be called once session is fully sent
+     * */
+    offlineRecording(startOpts = {}, onSessionSent) {
+        this.onSessionSent = onSessionSent;
+        this.singleBuffer = true;
+        const isNewSession = this.checkSessionToken(startOpts.forceNew);
+        adjustTimeOrigin();
+        this.coldStartTs = now();
+        const saverBuffer = this.localStorage.getItem(bufferStorageKey);
+        if (saverBuffer) {
+            const data = JSON.parse(saverBuffer);
+            this.bufferedMessages1 = Array.isArray(data) ? data : this.bufferedMessages1;
+            this.localStorage.removeItem(bufferStorageKey);
+        }
+        this.bufferedMessages1.push(Timestamp(this.timestamp()));
+        this.bufferedMessages1.push(TabData(this.session.getTabId()));
+        this.activityState = ActivityState.ColdStart;
+        if (startOpts.sessionHash) {
+            this.session.applySessionHash(startOpts.sessionHash);
+        }
+        if (startOpts.forceNew) {
+            this.session.reset();
+        }
+        this.session.assign({
+            userID: startOpts.userID,
+            metadata: startOpts.metadata,
+        });
+        const onStartInfo = { sessionToken: '', userUUID: '', sessionID: '' };
+        this.startCallbacks.forEach((cb) => cb(onStartInfo));
+        if (!isNewSession) {
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+            this.send(TabChange(this.session.getTabId()));
+        }
+        this.observer.observe();
+        this.ticker.start();
+        return {
+            saveBuffer: this.saveBuffer,
+            getBuffer: this.getBuffer,
+            setBuffer: this.setBuffer,
+        };
+    }
+    /**
+     * Saves the captured messages in localStorage (or whatever is used in its place)
+     *
+     * Then, when this.offlineRecording is called, it will preload this messages and clear the storage item
+     *
+     * Keeping the size of local storage reasonable is up to the end users of this library
+     * */
+    saveBuffer() {
+        this.localStorage.setItem(bufferStorageKey, JSON.stringify(this.bufferedMessages1));
+    }
+    /**
+     * @returns buffer with stored messages for offline recording
+     * */
+    getBuffer() {
+        return this.bufferedMessages1;
+    }
+    /**
+     * Used to set a buffer with messages array
+     * */
+    setBuffer(buffer) {
+        this.bufferedMessages1 = buffer;
+    }
     /**
      * Uploads the stored session buffer to backend
      * @returns promise that resolves once messages are loaded, it has to be awaited
@@ -6309,7 +5417,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) {
@@ -6397,8 +5505,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') ||
@@ -6451,14 +5558,6 @@ class App {
             if (startOpts.startCallback) {
                 startOpts.startCallback(SuccessfulStart(onStartInfo));
             }
-            if (this.features['feature-flags']) {
-                try {
-                    void this.featureFlags.reloadFlags();
-                }
-                catch (e) {
-                    this.debug.log("Error getting feature flags", e);
-                }
-            }
             await this.tagWatcher.fetchTags(this.options.ingestPoint, token);
             this.activityState = ActivityState.Active;
             if (this.options.crossdomain?.enabled) {
@@ -6487,47 +5586,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, this.frameLevel);
-                }
-                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) {
@@ -6548,13 +5614,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(() => {
@@ -6675,9 +5734,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
@@ -7098,7 +6164,7 @@ function Img (app) {
     const sendImgError = app.safe(function (img) {
         const resolvedSrc = resolveURL(img.src || ''); // Src type is null sometimes. - is it true?
         if (isURL(resolvedSrc)) {
-            app.send(ResourceTiming(app.timestamp(), 0, 0, 0, 0, 0, resolvedSrc, 'img', 0, false));
+            app.send(ResourceTiming(app.timestamp(), 0, 0, 0, 0, 0, resolvedSrc, 'img', 0, false, 0, 0, 0, 0, 0, 0, 0));
         }
     });
     const sendImgAttrs = app.safe(function (img) {
@@ -7702,18 +6768,38 @@ function Timing (app, opts) {
         if (shouldSkip) {
             return;
         }
+        // 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;
+        if (entry.connectEnd && entry.connectEnd > entry.domainLookupEnd) {
+            // Usual case stalled is time between connection establishment and request start
+            stalled = Math.max(0, entry.requestStart - entry.connectEnd);
+        }
+        else {
+            // Connection reuse case - stalled is time between domain lookup and request start
+            stalled = Math.max(0, entry.requestStart - entry.domainLookupEnd);
+        }
+        const timings = {
+            queueing: entry.requestStart - entry.fetchStart,
+            dnsLookup: entry.domainLookupEnd - entry.domainLookupStart,
+            initialConnection: entry.connectEnd - entry.connectStart,
+            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,
+            stalled,
+        };
         const entryName = options.resourceNameSanitizer
             ? options.resourceNameSanitizer(entry.name)
             : entry.name;
-        const cached = 
-        // @ts-ignore
-        (entry.responseStatus && entry.responseStatus === 304) ||
+        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, entry.responseStart && entry.startTime ? entry.responseStart - entry.startTime : 0, 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));
+        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) {
@@ -9660,8 +8746,86 @@ function Tabs (app) {
     app.attachEventListener(window, 'focus', changeTab, false, false);
 }
 
+function LongAnimationTask (app, opts) {
+    if (!opts.longTasks || !('PerformanceObserver' in window)) {
+        return;
+    }
+    const onEntry = (entry) => {
+        app.send(LongAnimationTask$1(entry.name, entry.duration, entry.blockingDuration, entry.firstUIEventTimestamp, entry.startTime, JSON.stringify(entry.scripts ?? [])));
+    };
+    const observer = new PerformanceObserver((entryList) => {
+        entryList.getEntries().forEach((entry) => {
+            if (entry.entryType === 'long-animation-frame') {
+                onEntry(entry);
+            }
+        });
+    });
+    app.attachStartCallback(() => {
+        performance.getEntriesByType('long-animation-frame').forEach((lat) => {
+            onEntry(lat);
+        });
+        observer.observe({
+            entryTypes: ['long-animation-frame'],
+        });
+    });
+    app.attachStopCallback(() => {
+        observer.disconnect();
+    });
+}
+
+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/constructor';
+const DOCS_SETUP = '/en/sdk';
 function processOptions(obj) {
     if (obj == null) {
         console.error(`OpenReplay: invalid options argument type. Please, check documentation on ${DOCS_HOST}${DOCS_SETUP}`);
@@ -9711,7 +8875,7 @@ class API {
         this.signalStartIssue = (reason, missingApi) => {
             const doNotTrack = this.checkDoNotTrack();
             console.log("Tracker couldn't start due to:", JSON.stringify({
-                trackerVersion: '16.4.10',
+                trackerVersion: '17.0.0',
                 projectKey: this.options.projectKey,
                 doNotTrack,
                 reason: missingApi.length ? `missing api: ${missingApi.join(',')}` : reason,
@@ -9739,6 +8903,12 @@ class API {
                 }
             }
         };
+        this.incident = (options) => {
+            if (this.app === null) {
+                return;
+            }
+            this.app.send(Incident(options.label ?? '', options.startTime, options.endTime ?? options.startTime));
+        };
         this.crossdomainMode = Boolean(inIframe() && options.crossdomain?.enabled);
         if (!IN_BROWSER || !processOptions(options)) {
             return;
@@ -9817,6 +8987,7 @@ class API {
         Img(app);
         Input(app, options);
         Timing(app, options);
+        LongAnimationTask(app, options);
         Focus(app);
         Fonts(app);
         const skipNetwork = options.network?.disabled;
@@ -9824,10 +8995,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(() => {
@@ -9850,24 +9019,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);
     }
@@ -9998,12 +9149,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();
@@ -10047,12 +9192,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));
             }
         }