@openreplay/tracker 16.4.11-beta.0 → 16.4.11-beta.1

package/dist/cjs/entry.js

@@ -2,719 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-// DEFLATE is a complex format; to read this code, you should probably check the RFC first:
-// https://tools.ietf.org/html/rfc1951
-// You may also wish to take a look at the guide I made about this program:
-// https://gist.github.com/101arrowz/253f31eb5abc3d9275ab943003ffecad
-// Some of the following code is similar to that of UZIP.js:
-// https://github.com/photopea/UZIP.js
-// However, the vast majority of the codebase has diverged from UZIP.js to increase performance and reduce bundle size.
-// Sometimes 0 will appear where -1 would be more appropriate. This is because using a uint
-// is better for memory in most engines (I *think*).
-var ch2 = {};
-var wk = (function (c, id, msg, transfer, cb) {
-    var w = new Worker(ch2[id] || (ch2[id] = URL.createObjectURL(new Blob([
-        c + ';addEventListener("error",function(e){e=e.error;postMessage({$e$:[e.message,e.code,e.stack]})})'
-    ], { type: 'text/javascript' }))));
-    w.onmessage = function (e) {
-        var d = e.data, ed = d.$e$;
-        if (ed) {
-            var err = new Error(ed[0]);
-            err['code'] = ed[1];
-            err.stack = ed[2];
-            cb(err, null);
-        }
-        else
-            cb(null, d);
-    };
-    w.postMessage(msg, transfer);
-    return w;
-});
-
-// aliases for shorter compressed code (most minifers don't do this)
-var u8 = Uint8Array, u16 = Uint16Array, i32 = Int32Array;
-// fixed length extra bits
-var fleb = new u8([0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 2, 2, 2, 2, 3, 3, 3, 3, 4, 4, 4, 4, 5, 5, 5, 5, 0, /* unused */ 0, 0, /* impossible */ 0]);
-// fixed distance extra bits
-var fdeb = new u8([0, 0, 0, 0, 1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 7, 8, 8, 9, 9, 10, 10, 11, 11, 12, 12, 13, 13, /* unused */ 0, 0]);
-// code length index map
-var clim = new u8([16, 17, 18, 0, 8, 7, 9, 6, 10, 5, 11, 4, 12, 3, 13, 2, 14, 1, 15]);
-// get base, reverse index map from extra bits
-var freb = function (eb, start) {
-    var b = new u16(31);
-    for (var i = 0; i < 31; ++i) {
-        b[i] = start += 1 << eb[i - 1];
-    }
-    // numbers here are at max 18 bits
-    var r = new i32(b[30]);
-    for (var i = 1; i < 30; ++i) {
-        for (var j = b[i]; j < b[i + 1]; ++j) {
-            r[j] = ((j - b[i]) << 5) | i;
-        }
-    }
-    return { b: b, r: r };
-};
-var _a = freb(fleb, 2), fl = _a.b, revfl = _a.r;
-// we can ignore the fact that the other numbers are wrong; they never happen anyway
-fl[28] = 258, revfl[258] = 28;
-var _b = freb(fdeb, 0), revfd = _b.r;
-// map of value to reverse (assuming 16 bits)
-var rev = new u16(32768);
-for (var i$1 = 0; i$1 < 32768; ++i$1) {
-    // reverse table algorithm from SO
-    var x$1 = ((i$1 & 0xAAAA) >> 1) | ((i$1 & 0x5555) << 1);
-    x$1 = ((x$1 & 0xCCCC) >> 2) | ((x$1 & 0x3333) << 2);
-    x$1 = ((x$1 & 0xF0F0) >> 4) | ((x$1 & 0x0F0F) << 4);
-    rev[i$1] = (((x$1 & 0xFF00) >> 8) | ((x$1 & 0x00FF) << 8)) >> 1;
-}
-// create huffman tree from u8 "map": index -> code length for code index
-// mb (max bits) must be at most 15
-// TODO: optimize/split up?
-var hMap = (function (cd, mb, r) {
-    var s = cd.length;
-    // index
-    var i = 0;
-    // u16 "map": index -> # of codes with bit length = index
-    var l = new u16(mb);
-    // length of cd must be 288 (total # of codes)
-    for (; i < s; ++i) {
-        if (cd[i])
-            ++l[cd[i] - 1];
-    }
-    // u16 "map": index -> minimum code for bit length = index
-    var le = new u16(mb);
-    for (i = 1; i < mb; ++i) {
-        le[i] = (le[i - 1] + l[i - 1]) << 1;
-    }
-    var co;
-    if (r) {
-        // u16 "map": index -> number of actual bits, symbol for code
-        co = new u16(1 << mb);
-        // bits to remove for reverser
-        var rvb = 15 - mb;
-        for (i = 0; i < s; ++i) {
-            // ignore 0 lengths
-            if (cd[i]) {
-                // num encoding both symbol and bits read
-                var sv = (i << 4) | cd[i];
-                // free bits
-                var r_1 = mb - cd[i];
-                // start value
-                var v = le[cd[i] - 1]++ << r_1;
-                // m is end value
-                for (var m = v | ((1 << r_1) - 1); v <= m; ++v) {
-                    // every 16 bit value starting with the code yields the same result
-                    co[rev[v] >> rvb] = sv;
-                }
-            }
-        }
-    }
-    else {
-        co = new u16(s);
-        for (i = 0; i < s; ++i) {
-            if (cd[i]) {
-                co[i] = rev[le[cd[i] - 1]++] >> (15 - cd[i]);
-            }
-        }
-    }
-    return co;
-});
-// fixed length tree
-var flt = new u8(288);
-for (var i$1 = 0; i$1 < 144; ++i$1)
-    flt[i$1] = 8;
-for (var i$1 = 144; i$1 < 256; ++i$1)
-    flt[i$1] = 9;
-for (var i$1 = 256; i$1 < 280; ++i$1)
-    flt[i$1] = 7;
-for (var i$1 = 280; i$1 < 288; ++i$1)
-    flt[i$1] = 8;
-// fixed distance tree
-var fdt = new u8(32);
-for (var i$1 = 0; i$1 < 32; ++i$1)
-    fdt[i$1] = 5;
-// fixed length map
-var flm = /*#__PURE__*/ hMap(flt, 9, 0);
-// fixed distance map
-var fdm = /*#__PURE__*/ hMap(fdt, 5, 0);
-// get end of byte
-var shft = function (p) { return ((p + 7) / 8) | 0; };
-// typed array slice - allows garbage collector to free original reference,
-// while being more compatible than .slice
-var slc = function (v, s, e) {
-    if (s == null || s < 0)
-        s = 0;
-    if (e == null || e > v.length)
-        e = v.length;
-    // can't use .constructor in case user-supplied
-    return new u8(v.subarray(s, e));
-};
-// error codes
-var ec = [
-    'unexpected EOF',
-    'invalid block type',
-    'invalid length/literal',
-    'invalid distance',
-    'stream finished',
-    'no stream handler',
-    ,
-    'no callback',
-    'invalid UTF-8 data',
-    'extra field too long',
-    'date not in range 1980-2099',
-    'filename too long',
-    'stream finishing',
-    'invalid zip data'
-    // determined by unknown compression method
-];
-var err = function (ind, msg, nt) {
-    var e = new Error(msg || ec[ind]);
-    e.code = ind;
-    if (Error.captureStackTrace)
-        Error.captureStackTrace(e, err);
-    if (!nt)
-        throw e;
-    return e;
-};
-// starting at p, write the minimum number of bits that can hold v to d
-var wbits = function (d, p, v) {
-    v <<= p & 7;
-    var o = (p / 8) | 0;
-    d[o] |= v;
-    d[o + 1] |= v >> 8;
-};
-// starting at p, write the minimum number of bits (>8) that can hold v to d
-var wbits16 = function (d, p, v) {
-    v <<= p & 7;
-    var o = (p / 8) | 0;
-    d[o] |= v;
-    d[o + 1] |= v >> 8;
-    d[o + 2] |= v >> 16;
-};
-// creates code lengths from a frequency table
-var hTree = function (d, mb) {
-    // Need extra info to make a tree
-    var t = [];
-    for (var i = 0; i < d.length; ++i) {
-        if (d[i])
-            t.push({ s: i, f: d[i] });
-    }
-    var s = t.length;
-    var t2 = t.slice();
-    if (!s)
-        return { t: et, l: 0 };
-    if (s == 1) {
-        var v = new u8(t[0].s + 1);
-        v[t[0].s] = 1;
-        return { t: v, l: 1 };
-    }
-    t.sort(function (a, b) { return a.f - b.f; });
-    // after i2 reaches last ind, will be stopped
-    // freq must be greater than largest possible number of symbols
-    t.push({ s: -1, f: 25001 });
-    var l = t[0], r = t[1], i0 = 0, i1 = 1, i2 = 2;
-    t[0] = { s: -1, f: l.f + r.f, l: l, r: r };
-    // efficient algorithm from UZIP.js
-    // i0 is lookbehind, i2 is lookahead - after processing two low-freq
-    // symbols that combined have high freq, will start processing i2 (high-freq,
-    // non-composite) symbols instead
-    // see https://reddit.com/r/photopea/comments/ikekht/uzipjs_questions/
-    while (i1 != s - 1) {
-        l = t[t[i0].f < t[i2].f ? i0++ : i2++];
-        r = t[i0 != i1 && t[i0].f < t[i2].f ? i0++ : i2++];
-        t[i1++] = { s: -1, f: l.f + r.f, l: l, r: r };
-    }
-    var maxSym = t2[0].s;
-    for (var i = 1; i < s; ++i) {
-        if (t2[i].s > maxSym)
-            maxSym = t2[i].s;
-    }
-    // code lengths
-    var tr = new u16(maxSym + 1);
-    // max bits in tree
-    var mbt = ln(t[i1 - 1], tr, 0);
-    if (mbt > mb) {
-        // more algorithms from UZIP.js
-        // TODO: find out how this code works (debt)
-        //  ind    debt
-        var i = 0, dt = 0;
-        //    left            cost
-        var lft = mbt - mb, cst = 1 << lft;
-        t2.sort(function (a, b) { return tr[b.s] - tr[a.s] || a.f - b.f; });
-        for (; i < s; ++i) {
-            var i2_1 = t2[i].s;
-            if (tr[i2_1] > mb) {
-                dt += cst - (1 << (mbt - tr[i2_1]));
-                tr[i2_1] = mb;
-            }
-            else
-                break;
-        }
-        dt >>= lft;
-        while (dt > 0) {
-            var i2_2 = t2[i].s;
-            if (tr[i2_2] < mb)
-                dt -= 1 << (mb - tr[i2_2]++ - 1);
-            else
-                ++i;
-        }
-        for (; i >= 0 && dt; --i) {
-            var i2_3 = t2[i].s;
-            if (tr[i2_3] == mb) {
-                --tr[i2_3];
-                ++dt;
-            }
-        }
-        mbt = mb;
-    }
-    return { t: new u8(tr), l: mbt };
-};
-// get the max length and assign length codes
-var ln = function (n, l, d) {
-    return n.s == -1
-        ? Math.max(ln(n.l, l, d + 1), ln(n.r, l, d + 1))
-        : (l[n.s] = d);
-};
-// length codes generation
-var lc = function (c) {
-    var s = c.length;
-    // Note that the semicolon was intentional
-    while (s && !c[--s])
-        ;
-    var cl = new u16(++s);
-    //  ind      num         streak
-    var cli = 0, cln = c[0], cls = 1;
-    var w = function (v) { cl[cli++] = v; };
-    for (var i = 1; i <= s; ++i) {
-        if (c[i] == cln && i != s)
-            ++cls;
-        else {
-            if (!cln && cls > 2) {
-                for (; cls > 138; cls -= 138)
-                    w(32754);
-                if (cls > 2) {
-                    w(cls > 10 ? ((cls - 11) << 5) | 28690 : ((cls - 3) << 5) | 12305);
-                    cls = 0;
-                }
-            }
-            else if (cls > 3) {
-                w(cln), --cls;
-                for (; cls > 6; cls -= 6)
-                    w(8304);
-                if (cls > 2)
-                    w(((cls - 3) << 5) | 8208), cls = 0;
-            }
-            while (cls--)
-                w(cln);
-            cls = 1;
-            cln = c[i];
-        }
-    }
-    return { c: cl.subarray(0, cli), n: s };
-};
-// calculate the length of output from tree, code lengths
-var clen = function (cf, cl) {
-    var l = 0;
-    for (var i = 0; i < cl.length; ++i)
-        l += cf[i] * cl[i];
-    return l;
-};
-// writes a fixed block
-// returns the new bit pos
-var wfblk = function (out, pos, dat) {
-    // no need to write 00 as type: TypedArray defaults to 0
-    var s = dat.length;
-    var o = shft(pos + 2);
-    out[o] = s & 255;
-    out[o + 1] = s >> 8;
-    out[o + 2] = out[o] ^ 255;
-    out[o + 3] = out[o + 1] ^ 255;
-    for (var i = 0; i < s; ++i)
-        out[o + i + 4] = dat[i];
-    return (o + 4 + s) * 8;
-};
-// writes a block
-var wblk = function (dat, out, final, syms, lf, df, eb, li, bs, bl, p) {
-    wbits(out, p++, final);
-    ++lf[256];
-    var _a = hTree(lf, 15), dlt = _a.t, mlb = _a.l;
-    var _b = hTree(df, 15), ddt = _b.t, mdb = _b.l;
-    var _c = lc(dlt), lclt = _c.c, nlc = _c.n;
-    var _d = lc(ddt), lcdt = _d.c, ndc = _d.n;
-    var lcfreq = new u16(19);
-    for (var i = 0; i < lclt.length; ++i)
-        ++lcfreq[lclt[i] & 31];
-    for (var i = 0; i < lcdt.length; ++i)
-        ++lcfreq[lcdt[i] & 31];
-    var _e = hTree(lcfreq, 7), lct = _e.t, mlcb = _e.l;
-    var nlcc = 19;
-    for (; nlcc > 4 && !lct[clim[nlcc - 1]]; --nlcc)
-        ;
-    var flen = (bl + 5) << 3;
-    var ftlen = clen(lf, flt) + clen(df, fdt) + eb;
-    var dtlen = clen(lf, dlt) + clen(df, ddt) + eb + 14 + 3 * nlcc + clen(lcfreq, lct) + 2 * lcfreq[16] + 3 * lcfreq[17] + 7 * lcfreq[18];
-    if (bs >= 0 && flen <= ftlen && flen <= dtlen)
-        return wfblk(out, p, dat.subarray(bs, bs + bl));
-    var lm, ll, dm, dl;
-    wbits(out, p, 1 + (dtlen < ftlen)), p += 2;
-    if (dtlen < ftlen) {
-        lm = hMap(dlt, mlb, 0), ll = dlt, dm = hMap(ddt, mdb, 0), dl = ddt;
-        var llm = hMap(lct, mlcb, 0);
-        wbits(out, p, nlc - 257);
-        wbits(out, p + 5, ndc - 1);
-        wbits(out, p + 10, nlcc - 4);
-        p += 14;
-        for (var i = 0; i < nlcc; ++i)
-            wbits(out, p + 3 * i, lct[clim[i]]);
-        p += 3 * nlcc;
-        var lcts = [lclt, lcdt];
-        for (var it = 0; it < 2; ++it) {
-            var clct = lcts[it];
-            for (var i = 0; i < clct.length; ++i) {
-                var len = clct[i] & 31;
-                wbits(out, p, llm[len]), p += lct[len];
-                if (len > 15)
-                    wbits(out, p, (clct[i] >> 5) & 127), p += clct[i] >> 12;
-            }
-        }
-    }
-    else {
-        lm = flm, ll = flt, dm = fdm, dl = fdt;
-    }
-    for (var i = 0; i < li; ++i) {
-        var sym = syms[i];
-        if (sym > 255) {
-            var len = (sym >> 18) & 31;
-            wbits16(out, p, lm[len + 257]), p += ll[len + 257];
-            if (len > 7)
-                wbits(out, p, (sym >> 23) & 31), p += fleb[len];
-            var dst = sym & 31;
-            wbits16(out, p, dm[dst]), p += dl[dst];
-            if (dst > 3)
-                wbits16(out, p, (sym >> 5) & 8191), p += fdeb[dst];
-        }
-        else {
-            wbits16(out, p, lm[sym]), p += ll[sym];
-        }
-    }
-    wbits16(out, p, lm[256]);
-    return p + ll[256];
-};
-// deflate options (nice << 13) | chain
-var deo = /*#__PURE__*/ new i32([65540, 131080, 131088, 131104, 262176, 1048704, 1048832, 2114560, 2117632]);
-// empty
-var et = /*#__PURE__*/ new u8(0);
-// compresses data into a raw DEFLATE buffer
-var dflt = function (dat, lvl, plvl, pre, post, st) {
-    var s = st.z || dat.length;
-    var o = new u8(pre + s + 5 * (1 + Math.ceil(s / 7000)) + post);
-    // writing to this writes to the output buffer
-    var w = o.subarray(pre, o.length - post);
-    var lst = st.l;
-    var pos = (st.r || 0) & 7;
-    if (lvl) {
-        if (pos)
-            w[0] = st.r >> 3;
-        var opt = deo[lvl - 1];
-        var n = opt >> 13, c = opt & 8191;
-        var msk_1 = (1 << plvl) - 1;
-        //    prev 2-byte val map    curr 2-byte val map
-        var prev = st.p || new u16(32768), head = st.h || new u16(msk_1 + 1);
-        var bs1_1 = Math.ceil(plvl / 3), bs2_1 = 2 * bs1_1;
-        var hsh = function (i) { return (dat[i] ^ (dat[i + 1] << bs1_1) ^ (dat[i + 2] << bs2_1)) & msk_1; };
-        // 24576 is an arbitrary number of maximum symbols per block
-        // 424 buffer for last block
-        var syms = new i32(25000);
-        // length/literal freq   distance freq
-        var lf = new u16(288), df = new u16(32);
-        //  l/lcnt  exbits  index          l/lind  waitdx          blkpos
-        var lc_1 = 0, eb = 0, i = st.i || 0, li = 0, wi = st.w || 0, bs = 0;
-        for (; i + 2 < s; ++i) {
-            // hash value
-            var hv = hsh(i);
-            // index mod 32768    previous index mod
-            var imod = i & 32767, pimod = head[hv];
-            prev[imod] = pimod;
-            head[hv] = imod;
-            // We always should modify head and prev, but only add symbols if
-            // this data is not yet processed ("wait" for wait index)
-            if (wi <= i) {
-                // bytes remaining
-                var rem = s - i;
-                if ((lc_1 > 7000 || li > 24576) && (rem > 423 || !lst)) {
-                    pos = wblk(dat, w, 0, syms, lf, df, eb, li, bs, i - bs, pos);
-                    li = lc_1 = eb = 0, bs = i;
-                    for (var j = 0; j < 286; ++j)
-                        lf[j] = 0;
-                    for (var j = 0; j < 30; ++j)
-                        df[j] = 0;
-                }
-                //  len    dist   chain
-                var l = 2, d = 0, ch_1 = c, dif = imod - pimod & 32767;
-                if (rem > 2 && hv == hsh(i - dif)) {
-                    var maxn = Math.min(n, rem) - 1;
-                    var maxd = Math.min(32767, i);
-                    // max possible length
-                    // not capped at dif because decompressors implement "rolling" index population
-                    var ml = Math.min(258, rem);
-                    while (dif <= maxd && --ch_1 && imod != pimod) {
-                        if (dat[i + l] == dat[i + l - dif]) {
-                            var nl = 0;
-                            for (; nl < ml && dat[i + nl] == dat[i + nl - dif]; ++nl)
-                                ;
-                            if (nl > l) {
-                                l = nl, d = dif;
-                                // break out early when we reach "nice" (we are satisfied enough)
-                                if (nl > maxn)
-                                    break;
-                                // now, find the rarest 2-byte sequence within this
-                                // length of literals and search for that instead.
-                                // Much faster than just using the start
-                                var mmd = Math.min(dif, nl - 2);
-                                var md = 0;
-                                for (var j = 0; j < mmd; ++j) {
-                                    var ti = i - dif + j & 32767;
-                                    var pti = prev[ti];
-                                    var cd = ti - pti & 32767;
-                                    if (cd > md)
-                                        md = cd, pimod = ti;
-                                }
-                            }
-                        }
-                        // check the previous match
-                        imod = pimod, pimod = prev[imod];
-                        dif += imod - pimod & 32767;
-                    }
-                }
-                // d will be nonzero only when a match was found
-                if (d) {
-                    // store both dist and len data in one int32
-                    // Make sure this is recognized as a len/dist with 28th bit (2^28)
-                    syms[li++] = 268435456 | (revfl[l] << 18) | revfd[d];
-                    var lin = revfl[l] & 31, din = revfd[d] & 31;
-                    eb += fleb[lin] + fdeb[din];
-                    ++lf[257 + lin];
-                    ++df[din];
-                    wi = i + l;
-                    ++lc_1;
-                }
-                else {
-                    syms[li++] = dat[i];
-                    ++lf[dat[i]];
-                }
-            }
-        }
-        for (i = Math.max(i, wi); i < s; ++i) {
-            syms[li++] = dat[i];
-            ++lf[dat[i]];
-        }
-        pos = wblk(dat, w, lst, syms, lf, df, eb, li, bs, i - bs, pos);
-        if (!lst) {
-            st.r = (pos & 7) | w[(pos / 8) | 0] << 3;
-            // shft(pos) now 1 less if pos & 7 != 0
-            pos -= 7;
-            st.h = head, st.p = prev, st.i = i, st.w = wi;
-        }
-    }
-    else {
-        for (var i = st.w || 0; i < s + lst; i += 65535) {
-            // end
-            var e = i + 65535;
-            if (e >= s) {
-                // write final block
-                w[(pos / 8) | 0] = lst;
-                e = s;
-            }
-            pos = wfblk(w, pos + 1, dat.subarray(i, e));
-        }
-        st.i = s;
-    }
-    return slc(o, 0, pre + shft(pos) + post);
-};
-// CRC32 table
-var crct = /*#__PURE__*/ (function () {
-    var t = new Int32Array(256);
-    for (var i = 0; i < 256; ++i) {
-        var c = i, k = 9;
-        while (--k)
-            c = ((c & 1) && -306674912) ^ (c >>> 1);
-        t[i] = c;
-    }
-    return t;
-})();
-// CRC32
-var crc = function () {
-    var c = -1;
-    return {
-        p: function (d) {
-            // closures have awful performance
-            var cr = c;
-            for (var i = 0; i < d.length; ++i)
-                cr = crct[(cr & 255) ^ d[i]] ^ (cr >>> 8);
-            c = cr;
-        },
-        d: function () { return ~c; }
-    };
-};
-// deflate with opts
-var dopt = function (dat, opt, pre, post, st) {
-    if (!st) {
-        st = { l: 1 };
-        if (opt.dictionary) {
-            var dict = opt.dictionary.subarray(-32768);
-            var newDat = new u8(dict.length + dat.length);
-            newDat.set(dict);
-            newDat.set(dat, dict.length);
-            dat = newDat;
-            st.w = dict.length;
-        }
-    }
-    return dflt(dat, opt.level == null ? 6 : opt.level, opt.mem == null ? (st.l ? Math.ceil(Math.max(8, Math.min(13, Math.log(dat.length))) * 1.5) : 20) : (12 + opt.mem), pre, post, st);
-};
-// Walmart object spread
-var mrg = function (a, b) {
-    var o = {};
-    for (var k in a)
-        o[k] = a[k];
-    for (var k in b)
-        o[k] = b[k];
-    return o;
-};
-// worker clone
-// This is possibly the craziest part of the entire codebase, despite how simple it may seem.
-// The only parameter to this function is a closure that returns an array of variables outside of the function scope.
-// We're going to try to figure out the variable names used in the closure as strings because that is crucial for workerization.
-// We will return an object mapping of true variable name to value (basically, the current scope as a JS object).
-// The reason we can't just use the original variable names is minifiers mangling the toplevel scope.
-// This took me three weeks to figure out how to do.
-var wcln = function (fn, fnStr, td) {
-    var dt = fn();
-    var st = fn.toString();
-    var ks = st.slice(st.indexOf('[') + 1, st.lastIndexOf(']')).replace(/\s+/g, '').split(',');
-    for (var i = 0; i < dt.length; ++i) {
-        var v = dt[i], k = ks[i];
-        if (typeof v == 'function') {
-            fnStr += ';' + k + '=';
-            var st_1 = v.toString();
-            if (v.prototype) {
-                // for global objects
-                if (st_1.indexOf('[native code]') != -1) {
-                    var spInd = st_1.indexOf(' ', 8) + 1;
-                    fnStr += st_1.slice(spInd, st_1.indexOf('(', spInd));
-                }
-                else {
-                    fnStr += st_1;
-                    for (var t in v.prototype)
-                        fnStr += ';' + k + '.prototype.' + t + '=' + v.prototype[t].toString();
-                }
-            }
-            else
-                fnStr += st_1;
-        }
-        else
-            td[k] = v;
-    }
-    return fnStr;
-};
-var ch = [];
-// clone bufs
-var cbfs = function (v) {
-    var tl = [];
-    for (var k in v) {
-        if (v[k].buffer) {
-            tl.push((v[k] = new v[k].constructor(v[k])).buffer);
-        }
-    }
-    return tl;
-};
-// use a worker to execute code
-var wrkr = function (fns, init, id, cb) {
-    if (!ch[id]) {
-        var fnStr = '', td_1 = {}, m = fns.length - 1;
-        for (var i = 0; i < m; ++i)
-            fnStr = wcln(fns[i], fnStr, td_1);
-        ch[id] = { c: wcln(fns[m], fnStr, td_1), e: td_1 };
-    }
-    var td = mrg({}, ch[id].e);
-    return wk(ch[id].c + ';onmessage=function(e){for(var k in e.data)self[k]=e.data[k];onmessage=' + init.toString() + '}', id, td, cbfs(td), cb);
-};
-var bDflt = function () { return [u8, u16, i32, fleb, fdeb, clim, revfl, revfd, flm, flt, fdm, fdt, rev, deo, et, hMap, wbits, wbits16, hTree, ln, lc, clen, wfblk, wblk, shft, slc, dflt, dopt, deflateSync, pbf]; };
-// gzip extra
-var gze = function () { return [gzh, gzhl, wbytes, crc, crct]; };
-// post buf
-var pbf = function (msg) { return postMessage(msg, [msg.buffer]); };
-// async helper
-var cbify = function (dat, opts, fns, init, id, cb) {
-    var w = wrkr(fns, init, id, function (err, dat) {
-        w.terminate();
-        cb(err, dat);
-    });
-    w.postMessage([dat, opts], opts.consume ? [dat.buffer] : []);
-    return function () { w.terminate(); };
-};
-// write bytes
-var wbytes = function (d, b, v) {
-    for (; v; ++b)
-        d[b] = v, v >>>= 8;
-};
-// gzip header
-var gzh = function (c, o) {
-    var fn = o.filename;
-    c[0] = 31, c[1] = 139, c[2] = 8, c[8] = o.level < 2 ? 4 : o.level == 9 ? 2 : 0, c[9] = 3; // assume Unix
-    if (o.mtime != 0)
-        wbytes(c, 4, Math.floor(new Date(o.mtime || Date.now()) / 1000));
-    if (fn) {
-        c[3] = 8;
-        for (var i = 0; i <= fn.length; ++i)
-            c[i + 10] = fn.charCodeAt(i);
-    }
-};
-// gzip header length
-var gzhl = function (o) { return 10 + (o.filename ? o.filename.length + 1 : 0); };
-/**
- * Compresses data with DEFLATE without any wrapper
- * @param data The data to compress
- * @param opts The compression options
- * @returns The deflated version of the data
- */
-function deflateSync(data, opts) {
-    return dopt(data, opts || {}, 0, 0);
-}
-function gzip(data, opts, cb) {
-    if (!cb)
-        cb = opts, opts = {};
-    if (typeof cb != 'function')
-        err(7);
-    return cbify(data, opts, [
-        bDflt,
-        gze,
-        function () { return [gzipSync]; }
-    ], function (ev) { return pbf(gzipSync(ev.data[0], ev.data[1])); }, 2, cb);
-}
-/**
- * Compresses data with GZIP
- * @param data The data to compress
- * @param opts The compression options
- * @returns The gzipped version of the data
- */
-function gzipSync(data, opts) {
-    if (!opts)
-        opts = {};
-    var c = crc(), l = data.length;
-    c.p(data);
-    var d = dopt(data, opts, gzhl(opts), 8), s = d.length;
-    return gzh(d, opts), wbytes(d, s - 8, c.d()), wbytes(d, s - 4, l), d;
-}
-// text decoder
-var td = typeof TextDecoder != 'undefined' && /*#__PURE__*/ new TextDecoder();
-// text decoder stream
-var tds = 0;
-try {
-    td.decode(et, { stream: true });
-    tds = 1;
-}
-catch (e) { }
-
 class StringDictionary {
     constructor() {
         this.lastTs = 0;
@@ -1114,93 +401,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);
@@ -1222,7 +422,7 @@ const stars = 'repeat' in String.prototype
     ? (str) => '*'.repeat(str.length)
     : (str) => str.replace(/./g, '*');
 function normSpaces(str) {
-    return str.trim().replace(/\s+/g, ' ');
+    return str ? str.trim().replace(/\s+/g, ' ') : '';
 }
 // isAbsoluteUrl regexp:  /^([a-z][a-z\d\+\-\.]*:)?\/\//i.test(url)
 function isURL(s) {
@@ -1238,6 +438,23 @@ function deprecationWarn(nameOfFeature, useInstead, docsPath = '/') {
     console.warn(`OpenReplay: ${nameOfFeature} is deprecated. ${useInstead ? `Please, use ${useInstead} instead.` : ''} Visit ${DOCS_HOST}${docsPath} for more information.`);
     warnedFeatures[nameOfFeature] = true;
 }
+function getCustomAttributeLabel(e, customAttributes) {
+    if (!customAttributes || customAttributes.length === 0)
+        return '';
+    const parts = [];
+    for (const attr of customAttributes) {
+        const value = e.getAttribute(attr);
+        if (value !== null) {
+            parts.push(`[${attr}=${value}]`);
+        }
+    }
+    return parts.join('');
+}
+function getClassSelector(e) {
+    if (!e.classList || e.classList.length === 0)
+        return '';
+    return '.' + Array.from(e.classList).join('.');
+}
 function getLabelAttribute(e) {
     let value = e.getAttribute('data-openreplay-label');
     if (value !== null) {
@@ -1723,33 +940,6 @@ function NodeAnimationResult(id, styles) {
         styles,
     ];
 }
-function CSSInsertRule(id, rule, index) {
-    return [
-        37 /* Messages.Type.CSSInsertRule */,
-        id,
-        rule,
-        index,
-    ];
-}
-function CSSDeleteRule(id, index) {
-    return [
-        38 /* Messages.Type.CSSDeleteRule */,
-        id,
-        index,
-    ];
-}
-function Fetch(method, url, request, response, status, timestamp, duration) {
-    return [
-        39 /* Messages.Type.Fetch */,
-        method,
-        url,
-        request,
-        response,
-        status,
-        timestamp,
-        duration,
-    ];
-}
 function Profiler(name, duration, args, result) {
     return [
         40 /* Messages.Type.Profiler */,
@@ -1892,18 +1082,6 @@ function SetNodeFocus(id) {
         id,
     ];
 }
-function LongTask(timestamp, duration, context, containerType, containerSrc, containerId, containerName) {
-    return [
-        59 /* Messages.Type.LongTask */,
-        timestamp,
-        duration,
-        context,
-        containerType,
-        containerSrc,
-        containerId,
-        containerName,
-    ];
-}
 function SetNodeAttributeURLBased(id, name, value, baseURL) {
     return [
         60 /* Messages.Type.SetNodeAttributeURLBased */,
@@ -1942,15 +1120,6 @@ function SetNodeSlot(id, slotID) {
         slotID,
     ];
 }
-function CSSInsertRuleURLBased(id, rule, index, baseURL) {
-    return [
-        67 /* Messages.Type.CSSInsertRuleURLBased */,
-        id,
-        rule,
-        index,
-        baseURL,
-    ];
-}
 function MouseClick(id, hesitationTime, label, selector, normalizedX, normalizedY) {
     return [
         68 /* Messages.Type.MouseClick */,
@@ -2230,9 +1399,6 @@ var _Messages = /*#__PURE__*/Object.freeze({
     AdoptedSSRemoveOwner: AdoptedSSRemoveOwner,
     AdoptedSSReplaceURLBased: AdoptedSSReplaceURLBased,
     BatchMetadata: BatchMetadata,
-    CSSDeleteRule: CSSDeleteRule,
-    CSSInsertRule: CSSInsertRule,
-    CSSInsertRuleURLBased: CSSInsertRuleURLBased,
     CanvasNode: CanvasNode,
     ConnectionInformation: ConnectionInformation,
     ConsoleLog: ConsoleLog,
@@ -2242,7 +1408,6 @@ var _Messages = /*#__PURE__*/Object.freeze({
     CreateTextNode: CreateTextNode,
     CustomEvent: CustomEvent,
     CustomIssue: CustomIssue,
-    Fetch: Fetch,
     GraphQL: GraphQL,
     GraphQLDeprecated: GraphQLDeprecated,
     Incident: Incident,
@@ -2250,7 +1415,6 @@ var _Messages = /*#__PURE__*/Object.freeze({
     JSException: JSException,
     LoadFontFace: LoadFontFace,
     LongAnimationTask: LongAnimationTask$1,
-    LongTask: LongTask,
     Metadata: Metadata,
     MobX: MobX,
     MouseClick: MouseClick,
@@ -2437,1060 +1601,85 @@ class TagWatcher {
     }
 }
 
-const bgStyle = {
-    position: 'fixed',
-    top: 0,
-    left: 0,
-    width: '100vw',
-    height: '100vh',
-    background: 'rgba(0, 0, 0, 0.40)',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    zIndex: 999999,
-    fontFamily: `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`,
-};
-const containerStyle = {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: '2rem',
-    alignItems: 'center',
-    padding: '1.5rem',
-    borderRadius: '2px',
-    border: '1px solid rgb(255 255 255 / var(--tw-bg-opacity, 1))',
-    background: '#FFF',
-    width: '22rem',
-};
-const containerWidgetStyle = {
-    display: 'flex',
-    'flex-direction': 'column',
-    gap: 'unset',
-    'align-items': 'center',
-    padding: 'unset',
-    fontFamily: `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`,
-    'border-radius': '2px',
-    border: '1px solid rgb(255 255 255 / var(--tw-bg-opacity, 1))',
-    background: 'rgba(255, 255, 255, 0.75)',
-    width: '22rem',
-};
-const titleStyle = {
-    fontFamily: 'Verdana, sans-serif',
-    fontSize: '1.25rem',
-    fontStyle: 'normal',
-    fontWeight: '500',
-    lineHeight: '1.75rem',
-    color: 'rgba(0, 0, 0, 0.85)',
-};
-const descriptionStyle = {
-    borderTop: '1px solid rgba(0, 0, 0, 0.06)',
-    borderBottom: '1px solid rgba(0, 0, 0, 0.06)',
-    padding: '1.25rem 0rem',
-    color: 'rgba(0, 0, 0, 0.85)',
-    fontFamily: 'Verdana, sans-serif',
-    fontSize: '13px',
-    fontStyle: 'normal',
-    fontWeight: '400',
-    lineHeight: 'auto',
-    whiteSpace: 'pre-wrap',
-};
-const buttonStyle = {
-    display: 'flex',
-    padding: '0.4rem 0.9375rem',
-    justifyContent: 'center',
-    alignItems: 'center',
-    gap: '0.625rem',
-    borderRadius: '0.25rem',
-    border: '1px solid #394EFF',
-    background: '#394EFF',
-    boxShadow: '0px 2px 0px 0px rgba(0, 0, 0, 0.04)',
-    color: '#FFF',
-    textAlign: 'center',
-    fontFamily: 'Verdana, sans-serif',
-    fontSize: '1rem',
-    fontStyle: 'normal',
-    fontWeight: '500',
-    lineHeight: '1.5rem',
-    cursor: 'pointer',
-};
-const sectionTitleStyle = {
-    fontFamily: 'Verdana, sans-serif',
-    fontSize: '13px',
-    fontWeight: '500',
-    lineHeight: 'auto',
-    display: 'flex',
-    justifyContent: 'space-between',
-    width: '100%',
-    cursor: 'pointer',
-};
-const contentStyle = {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'flex-start',
-    gap: '0.625rem',
-    fontSize: '13px',
-    lineHeight: 'auto',
-};
-// New widget styles
-const titleWidgetStyle = {
-    padding: '0.5rem',
-    gap: '0.5rem',
-    fontFamily: 'Verdana, sans-serif',
-    fontSize: '16px',
-    fontStyle: 'normal',
-    fontWeight: '500',
-    lineHeight: 'auto',
-    color: 'white',
-    display: 'flex',
-    alignItems: 'center',
-    width: '100%',
-    borderRadius: '2px',
-    background: 'rgba(0, 0, 0, 0.75)',
-    boxSizing: 'border-box',
-};
-const descriptionWidgetStyle = {
-    boxSizing: 'border-box',
-    display: 'block',
-    width: '100%',
-    borderBottom: '1px solid rgb(255 255 255 / var(--tw-bg-opacity, 1))',
-    background: '#FFF',
-    padding: '0.65rem',
-    alignSelf: 'stretch',
-    color: '#000',
-    fontFamily: 'Verdana, sans-serif',
-    // fontSize: '0.875rem',
-    fontStyle: 'normal',
-    fontWeight: '400',
-    // lineHeight: '1.375rem',
-};
-const endSectionStyle = {
-    ...descriptionWidgetStyle,
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    gap: '0.625rem',
-};
-const symbolIcon = {
-    fontSize: '1.25rem',
-    fontWeight: '500',
-    cursor: 'pointer',
-    color: '#394EFF',
-};
-const buttonWidgetStyle = {
-    display: 'flex',
-    padding: '0.4rem 0.9375rem',
-    justifyContent: 'center',
-    alignItems: 'center',
-    gap: '0.625rem',
-    borderRadius: '0.25rem',
-    border: '1px solid #394EFF',
-    background: '#394EFF',
-    boxShadow: '0px 2px 0px 0px rgba(0, 0, 0, 0.04)',
-    color: '#FFF',
-    textAlign: 'center',
-    fontFamily: 'Verdana, sans-serif',
-    fontSize: '1rem',
-    fontStyle: 'normal',
-    fontWeight: '500',
-    lineHeight: '1.5rem',
-    width: '100%',
-    boxSizing: 'border-box',
-    cursor: 'pointer',
-};
-const stopWidgetStyle = {
-    marginTop: '1rem',
-    marginBottom: '1rem',
-    cursor: 'pointer',
-    display: 'block',
-    fontWeight: '500',
-    fontSize: '13px!important',
-    lineHeight: 'auto',
-};
-const paginationStyle = {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    gap: '1rem',
-    padding: '0.5rem',
-    width: '100%',
-    boxSizing: 'border-box',
-};
-const taskNumberActive = {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: '6.25em',
-    outline: '1px solid #394EFF',
-    fontSize: '13px',
-    height: '24px',
-    width: '24px',
-};
-const taskNumberDone = {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: '6.25em',
-    outline: '1px solid #D2DFFF',
-    boxShadow: '0px 2px 0px 0px rgba(0, 0, 0, 0.04)',
-    background: '#D2DFFF',
-    fontSize: '13px',
-    height: '24px',
-    width: '24px',
-};
-const taskDescriptionCard = {
-    borderRadius: '0.375rem',
-    border: '1px solid rgba(0, 0, 0, 0.06)',
-    background: '#F5F7FF',
-    boxShadow: '0px 2px 0px 0px rgba(0, 0, 0, 0.04)',
-    display: 'flex',
-    flexDirection: 'column',
-    padding: '0.625rem 0.9375rem',
-    gap: '0.5rem',
-    alignSelf: 'stretch',
-};
-const taskTextStyle = {
-    fontWeight: 'bold',
-};
-const taskDescriptionStyle = {
-    fontSize: '13px',
-    lineHeight: 'auto',
-};
-const taskButtonStyle = {
-    marginRight: '0.5rem',
-    cursor: 'pointer',
-    color: '#394EFF',
-    textAlign: 'center',
-    fontFamily: 'Verdana, sans-serif',
-    fontSize: '13px',
-    fontStyle: 'normal',
-    fontWeight: '500',
-    lineHeight: 'auto',
-};
-const taskButtonBorderedStyle = {
-    ...taskButtonStyle,
-    display: 'flex',
-    padding: '0.25rem 0.9375rem',
-    justifyContent: 'center',
-    alignItems: 'center',
-    gap: '0.5rem',
-    borderRadius: '0.25rem',
-    border: '1px solid #394EFF',
-};
-const taskButtonsRow = {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    width: '100%',
-    boxSizing: 'border-box',
-};
-const spinnerStyles = {
-    border: '4px solid rgba(255, 255, 255, 0.4)',
-    width: '16px',
-    height: '16px',
-    borderRadius: '50%',
-    borderLeftColor: '#fff',
-    animation: 'spin 0.5s linear infinite',
-};
+//@ts-ignore
+function isNode(sth) {
+    return !!sth && sth.nodeType != null;
+}
+function isSVGElement(node) {
+    return (node.namespaceURI === 'http://www.w3.org/2000/svg' || node.localName === 'svg');
+}
+function isUseElement(node) {
+    return node.localName === 'use';
+}
+function isElementNode(node) {
+    return node.nodeType === Node.ELEMENT_NODE;
+}
+function isCommentNode(node) {
+    return node.nodeType === Node.COMMENT_NODE;
+}
+function isTextNode(node) {
+    return node.nodeType === Node.TEXT_NODE;
+}
+function isDocument(node) {
+    return node.nodeType === Node.DOCUMENT_NODE;
+}
+function isRootNode(node) {
+    return node.nodeType === Node.DOCUMENT_NODE || node.nodeType === Node.DOCUMENT_FRAGMENT_NODE;
+}
+function hasTag(el, tagName) {
+    // @ts-ignore
+    return el.localName === tagName;
+}
 
-const Quality = {
-    Standard: { width: 1280, height: 720 }};
-class Recorder {
-    constructor(app) {
+class CanvasRecorder {
+    constructor(app, options) {
         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)
+        this.options = options;
+        this.snapshots = {};
+        this.intervals = new Map();
+        this.observers = new Map();
+        this.uploadQueue = 0;
+        this.MAX_CONCURRENT_UPLOADS = 2;
+        this.MAX_QUEUE_SIZE = 50; // ~500 images max (50 batches × 10 images)
+        this.pendingBatches = [];
+        this.isProcessingQueue = false;
+        this.restartTracking = () => {
+            this.clear();
+            this.app.nodes.scanTree(this.captureCanvas);
+        };
+        this.captureCanvas = (node) => {
+            const id = this.app.nodes.getID(node);
+            if (!id || !hasTag(node, 'canvas')) {
                 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');
+            const isIgnored = this.app.sanitizer.isObscured(id) || this.app.sanitizer.isHidden(id);
+            if (isIgnored || this.snapshots[id]) {
+                return;
             }
-        })
-            .then(({ url }) => {
-            return fetch(url, {
-                method: 'PUT',
-                headers: {
-                    'Content-Type': 'video/webm',
-                },
-                body: blob,
-            });
-        })
-            .catch(console.error)
-            .finally(() => {
-            this.discard();
-        });
-    }
-    async saveToFile(fileName = 'recorded-video.webm') {
-        const blob = await this.stopRecording();
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.style.display = 'none';
-        a.href = url;
-        a.download = fileName;
-        document.body.appendChild(a);
-        a.click();
-        window.URL.revokeObjectURL(url);
-        document.body.removeChild(a);
-    }
-    discard() {
-        this.mediaRecorder?.stop();
-        this.stream?.getTracks().forEach((track) => track.stop());
-    }
-}
-
-// @ts-nocheck
-function attachDND(element, dragTarget) {
-    dragTarget.onmousedown = function (event) {
-        const clientRect = element.getBoundingClientRect();
-        const shiftX = event.clientX - clientRect.left;
-        const shiftY = event.clientY - clientRect.top;
-        element.style.position = 'fixed';
-        element.style.zIndex = 99999999999999;
-        moveAt(event.pageX, event.pageY);
-        function moveAt(pageX, pageY) {
-            let leftC = pageX - shiftX;
-            let topC = pageY - shiftY;
-            if (leftC <= 5)
-                leftC = 5;
-            if (topC <= 5)
-                topC = 5;
-            if (leftC >= window.innerWidth - clientRect.width)
-                leftC = window.innerWidth - clientRect.width;
-            if (topC >= window.innerHeight - clientRect.height)
-                topC = window.innerHeight - clientRect.height;
-            element.style.left = `${leftC}px`;
-            element.style.top = `${topC}px`;
-        }
-        function onMouseMove(event) {
-            moveAt(event.pageX, event.pageY);
-        }
-        document.addEventListener('mousemove', onMouseMove);
-        const clearAll = () => {
-            document.removeEventListener('mousemove', onMouseMove);
-            document.removeEventListener('mouseup', clearAll);
-        };
-        document.addEventListener('mouseup', clearAll);
-    };
-    dragTarget.ondragstart = function () {
-        return false;
-    };
-}
-
-function generateGrid() {
-    const grid = document.createElement('div');
-    grid.className = 'grid';
-    for (let i = 0; i < 16; i++) {
-        const cell = document.createElement('div');
-        Object.assign(cell.style, {
-            width: '2px',
-            height: '2px',
-            borderRadius: '10px',
-            background: 'white',
-        });
-        cell.className = 'cell';
-        grid.appendChild(cell);
-    }
-    Object.assign(grid.style, {
-        display: 'grid',
-        gridTemplateColumns: 'repeat(4, 1fr)',
-        gridTemplateRows: 'repeat(4, 1fr)',
-        gap: '2px',
-        cursor: 'grab',
-    });
-    return grid;
-}
-function generateChevron() {
-    const triangle = document.createElement('div');
-    Object.assign(triangle.style, {
-        width: '0',
-        height: '0',
-        borderLeft: '7px solid transparent',
-        borderRight: '7px solid transparent',
-        borderBottom: '7px solid white',
-    });
-    const container = document.createElement('div');
-    container.appendChild(triangle);
-    Object.assign(container.style, {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        width: '16px',
-        height: '16px',
-        cursor: 'pointer',
-        marginLeft: 'auto',
-        transform: 'rotate(180deg)',
-    });
-    return container;
-}
-function addKeyframes() {
-    const styleSheet = document.createElement('style');
-    styleSheet.type = 'text/css';
-    styleSheet.innerText = `@keyframes spin {
-        0% { transform: rotate(0deg); }
-        100% { transform: rotate(360deg); }
-    }`;
-    document.head.appendChild(styleSheet);
-}
-function createSpinner() {
-    addKeyframes();
-    const spinner = document.createElement('div');
-    spinner.classList.add('spinner');
-    Object.assign(spinner.style, spinnerStyles);
-    return spinner;
-}
-function createElement(tag, className, styles, textContent, id) {
-    const element = document.createElement(tag);
-    element.className = className;
-    Object.assign(element.style, styles);
-    if (textContent) {
-        element.textContent = textContent;
-    }
-    if (id) {
-        element.id = id;
-    }
-    return element;
-}
-const TEST_START = 'or_uxt_test_start';
-const TASK_IND = 'or_uxt_task_index';
-const SESSION_ID = 'or_uxt_session_id';
-const TEST_ID = 'or_uxt_test_id';
-
-class SignalManager {
-    constructor(ingestPoint, getTimestamp, token, testId, storageKey, setStorageKey, removeStorageKey, getStorageKey, getSessionId) {
-        this.ingestPoint = ingestPoint;
-        this.getTimestamp = getTimestamp;
-        this.token = token;
-        this.testId = testId;
-        this.storageKey = storageKey;
-        this.setStorageKey = setStorageKey;
-        this.removeStorageKey = removeStorageKey;
-        this.getStorageKey = getStorageKey;
-        this.getSessionId = getSessionId;
-        this.durations = {
-            testStart: 0,
-            tasks: [],
-        };
-        this.getDurations = () => {
-            return this.durations;
-        };
-        this.setDurations = (durations) => {
-            this.durations.testStart = durations.testStart;
-            this.durations.tasks = durations.tasks;
-        };
-        this.signalTask = (taskId, status, taskAnswer) => {
-            if (!taskId)
-                return console.error('User Testing: No Task ID Given');
-            const taskStart = this.durations.tasks.find((t) => t.taskId === taskId);
-            const timestamp = this.getTimestamp();
-            const duration = taskStart ? timestamp - taskStart.started : 0;
-            return fetch(`${this.ingestPoint}/v1/web/uxt/signals/task`, {
-                method: 'POST',
-                headers: {
-                    // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-                    Authorization: `Bearer ${this.token}`,
-                },
-                body: JSON.stringify({
-                    testId: this.testId,
-                    taskId,
-                    status,
-                    duration,
-                    timestamp,
-                    taskAnswer,
-                }),
-            });
-        };
-        this.signalTest = (status) => {
-            const timestamp = this.getTimestamp();
-            if (status === 'begin' && this.testId) {
-                const sessionId = this.getSessionId();
-                this.setStorageKey(SESSION_ID, sessionId);
-                this.setStorageKey(this.storageKey, this.testId.toString());
-                this.setStorageKey(TEST_START, timestamp.toString());
-            }
-            else {
-                this.removeStorageKey(this.storageKey);
-                this.removeStorageKey(TASK_IND);
-                this.removeStorageKey(TEST_START);
-            }
-            const start = this.durations.testStart || timestamp;
-            const duration = timestamp - start;
-            return fetch(`${this.ingestPoint}/v1/web/uxt/signals/test`, {
-                method: 'POST',
-                headers: {
-                    // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-                    Authorization: `Bearer ${this.token}`,
-                },
-                body: JSON.stringify({
-                    testId: this.testId,
-                    status,
-                    duration,
-                    timestamp,
-                }),
-            });
-        };
-        const possibleStart = this.getStorageKey(TEST_START);
-        if (possibleStart) {
-            this.durations.testStart = parseInt(possibleStart, 10);
-        }
-    }
-}
-
-class UserTestManager {
-    constructor(app, storageKey) {
-        this.app = app;
-        this.storageKey = storageKey;
-        this.bg = createElement('div', 'bg', bgStyle, undefined, '__or_ut_bg');
-        this.container = createElement('div', 'container', containerStyle, undefined, '__or_ut_ct');
-        this.widgetGuidelinesVisible = true;
-        this.widgetTasksVisible = false;
-        this.widgetVisible = true;
-        this.isActive = false;
-        this.descriptionSection = null;
-        this.taskSection = null;
-        this.endSection = null;
-        this.stopButton = null;
-        this.stopButtonContainer = null;
-        this.test = null;
-        this.testId = null;
-        this.signalManager = null;
-        this.getTest = (id, token, inProgress) => {
-            this.testId = id;
-            const ingest = this.app.options.ingestPoint;
-            return fetch(`${ingest}/v1/web/uxt/test/${id}`, {
-                headers: {
-                    Authorization: `Bearer ${token}`,
-                },
-            })
-                .then((res) => res.json())
-                .then(({ test }) => {
-                this.isActive = true;
-                this.test = test;
-                this.signalManager = new SignalManager(this.app.options.ingestPoint, () => this.app.timestamp(), token, id, this.storageKey, (k, v) => this.app.localStorage.setItem(k, v), (k) => this.app.localStorage.removeItem(k), (k) => this.app.localStorage.getItem(k), () => this.app.getSessionID());
-                this.createGreeting(test.title, test.reqMic, test.reqCamera);
-                if (inProgress) {
-                    if (test.reqMic || test.reqCamera) {
-                        void this.userRecorder.startRecording(30, Quality.Standard, test.reqMic, test.reqCamera);
-                    }
-                    this.showWidget(test.description, test.tasks, true);
-                    this.showTaskSection();
-                }
-            })
-                .then(() => id)
-                .catch((err) => {
-                console.log('OR: Error fetching test', err);
-            });
-        };
-        this.hideTaskSection = () => false;
-        this.showTaskSection = () => true;
-        this.collapseWidget = () => false;
-        this.removeGreeting = () => false;
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        this.toggleDescriptionVisibility = () => { };
-        this.currentTaskIndex = 0;
-        this.userRecorder = new Recorder(app);
-        const sessionId = this.app.getSessionID();
-        const savedSessionId = this.app.localStorage.getItem(SESSION_ID);
-        if (sessionId !== savedSessionId) {
-            this.app.localStorage.removeItem(this.storageKey);
-            this.app.localStorage.removeItem(SESSION_ID);
-            this.app.localStorage.removeItem(TEST_ID);
-            this.app.localStorage.removeItem(TASK_IND);
-            this.app.localStorage.removeItem(TEST_START);
-        }
-        const taskIndex = this.app.localStorage.getItem(TASK_IND);
-        if (taskIndex) {
-            this.currentTaskIndex = parseInt(taskIndex, 10);
-        }
-    }
-    getTestId() {
-        return this.testId;
-    }
-    createGreeting(title, micRequired, cameraRequired) {
-        const titleElement = createElement('div', 'title', titleStyle, title);
-        const descriptionElement = createElement('div', 'description', descriptionStyle, `Welcome, you're here to help us improve, not to be judged. Your insights matter!\n
-📹 We're recording this browser tab to learn from your experience.
-🎤 Please enable mic and camera if asked, to give us a complete picture.`);
-        const buttonElement = createElement('div', 'button', buttonStyle, 'Read guidelines to begin');
-        this.removeGreeting = () => {
-            // this.container.innerHTML = ''
-            if (micRequired || cameraRequired) {
-                void this.userRecorder.startRecording(30, Quality.Standard, micRequired, cameraRequired);
-            }
-            this.container.removeChild(buttonElement);
-            this.container.removeChild(descriptionElement);
-            this.container.removeChild(titleElement);
-            return false;
-        };
-        buttonElement.onclick = () => {
-            this.removeGreeting();
-            const durations = this.signalManager?.getDurations();
-            if (durations && this.signalManager) {
-                durations.testStart = this.app.timestamp();
-                this.signalManager.setDurations(durations);
-            }
-            void this.signalManager?.signalTest('begin');
-            this.container.style.fontFamily = `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`;
-            Object.assign(this.container.style, containerWidgetStyle);
-            this.showWidget(this.test?.guidelines || '', this.test?.tasks || []);
-        };
-        this.container.append(titleElement, descriptionElement, buttonElement);
-        this.bg.appendChild(this.container);
-        document.body.appendChild(this.bg);
-    }
-    showWidget(guidelines, tasks, inProgress) {
-        this.container.innerHTML = '';
-        Object.assign(this.bg.style, {
-            position: 'fixed',
-            zIndex: 99999999999999,
-            right: '8px',
-            left: 'unset',
-            width: 'fit-content',
-            top: '8px',
-            height: 'fit-content',
-            background: 'unset',
-            display: 'unset',
-            alignItems: 'unset',
-            justifyContent: 'unset',
-        });
-        // Create title section
-        const titleSection = this.createTitleSection();
-        this.container.style.fontFamily = `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`;
-        Object.assign(this.container.style, containerWidgetStyle);
-        const descriptionSection = this.createDescriptionSection(guidelines);
-        const tasksSection = this.createTasksSection(tasks);
-        const stopButton = createElement('div', 'stop_bn_or', stopWidgetStyle, 'Abort Session');
-        const stopContainer = createElement('div', 'stop_ct_or', { fontSize: '13px!important' });
-        stopContainer.style.fontSize = '13px';
-        stopContainer.append(stopButton);
-        this.container.append(titleSection, descriptionSection, tasksSection, stopContainer);
-        this.taskSection = tasksSection;
-        this.descriptionSection = descriptionSection;
-        this.stopButton = stopButton;
-        this.stopButtonContainer = stopContainer;
-        stopButton.onclick = () => {
-            this.userRecorder.discard();
-            void this.signalManager?.signalTest('skipped');
-            document.body.removeChild(this.bg);
-            window.close();
-        };
-        if (!inProgress) {
-            this.hideTaskSection();
-        }
-        else {
-            this.toggleDescriptionVisibility();
-        }
-    }
-    createTitleSection() {
-        const title = createElement('div', 'title', titleWidgetStyle);
-        const leftIcon = generateGrid();
-        const titleText = createElement('div', 'title_text', {
-            maxWidth: '19rem',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            width: '100%',
-            fontSize: 16,
-            lineHeight: 'auto',
-            cursor: 'pointer',
-        }, this.test?.title);
-        const rightIcon = generateChevron();
-        title.append(leftIcon, titleText, rightIcon);
-        const toggleWidget = (isVisible) => {
-            this.widgetVisible = isVisible;
-            this.container.style.fontFamily = `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`;
-            Object.assign(this.container.style, this.widgetVisible
-                ? containerWidgetStyle
-                : { border: 'none', background: 'none', padding: 0 });
-            if (this.taskSection) {
-                Object.assign(this.taskSection.style, this.widgetVisible ? descriptionWidgetStyle : { display: 'none' });
-            }
-            if (this.descriptionSection) {
-                Object.assign(this.descriptionSection.style, this.widgetVisible ? descriptionWidgetStyle : { display: 'none' });
-            }
-            if (this.endSection) {
-                Object.assign(this.endSection.style, this.widgetVisible ? descriptionWidgetStyle : { display: 'none' });
-            }
-            if (this.stopButton) {
-                Object.assign(this.stopButton.style, this.widgetVisible ? stopWidgetStyle : { display: 'none' });
-            }
-            return isVisible;
-        };
-        const collapseWidget = () => {
-            Object.assign(rightIcon.style, {
-                transform: this.widgetVisible ? 'rotate(0deg)' : 'rotate(180deg)',
-            });
-            toggleWidget(!this.widgetVisible);
-        };
-        titleText.onclick = collapseWidget;
-        rightIcon.onclick = collapseWidget;
-        attachDND(this.bg, leftIcon);
-        this.collapseWidget = () => toggleWidget(false);
-        return title;
-    }
-    createDescriptionSection(guidelines) {
-        const section = createElement('div', 'description_section_or', descriptionWidgetStyle);
-        const titleContainer = createElement('div', 'description_s_title_or', sectionTitleStyle);
-        const title = createElement('div', 'title', {
-            fontSize: 13,
-            fontWeight: 500,
-            lineHeight: 'auto',
-        }, 'Introduction & Guidelines');
-        const icon = createElement('div', 'icon', symbolIcon, '-');
-        const content = createElement('div', 'content', contentStyle);
-        const descriptionC = createElement('div', 'text_description', {
-            maxHeight: '250px',
-            overflowY: 'auto',
-            whiteSpace: 'pre-wrap',
-            fontSize: 13,
-            color: '#454545',
-            lineHeight: 'auto',
-        });
-        descriptionC.innerHTML = guidelines;
-        const button = createElement('div', 'button_begin_or', buttonWidgetStyle, 'Begin Test');
-        titleContainer.append(title, icon);
-        content.append(descriptionC, button);
-        section.append(titleContainer, content);
-        const toggleDescriptionVisibility = () => {
-            this.widgetGuidelinesVisible = !this.widgetGuidelinesVisible;
-            icon.textContent = this.widgetGuidelinesVisible ? '-' : '+';
-            Object.assign(content.style, this.widgetGuidelinesVisible ? contentStyle : { display: 'none' });
-        };
-        titleContainer.onclick = toggleDescriptionVisibility;
-        this.toggleDescriptionVisibility = () => {
-            this.widgetGuidelinesVisible = false;
-            icon.textContent = this.widgetGuidelinesVisible ? '-' : '+';
-            Object.assign(content.style, this.widgetGuidelinesVisible ? contentStyle : { display: 'none' });
-            content.removeChild(button);
-        };
-        button.onclick = () => {
-            toggleDescriptionVisibility();
-            if (this.test) {
-                const durations = this.signalManager?.getDurations();
-                const taskDurationInd = durations
-                    ? durations.tasks.findIndex((t) => this.test && t.taskId === this.test.tasks[0].task_id)
-                    : null;
-                if (durations && taskDurationInd === -1) {
-                    durations.tasks.push({
-                        taskId: this.test.tasks[0].task_id,
-                        started: this.app.timestamp(),
-                    });
-                    this.signalManager?.setDurations(durations);
-                }
-                void this.signalManager?.signalTask(this.test.tasks[0].task_id, 'begin');
-            }
-            this.showTaskSection();
-            content.removeChild(button);
-        };
-        return section;
-    }
-    createTasksSection(tasks) {
-        this.container.style.fontFamily = `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`;
-        Object.assign(this.container.style, containerWidgetStyle);
-        const section = createElement('div', 'task_section_or', descriptionWidgetStyle);
-        const titleContainer = createElement('div', 'description_t_title_or', sectionTitleStyle);
-        const title = createElement('div', 'title', {
-            fontSize: '13px',
-            fontWeight: '500',
-            lineHeight: 'auto',
-        }, 'Tasks');
-        const icon = createElement('div', 'icon', symbolIcon, '-');
-        const content = createElement('div', 'content', contentStyle);
-        const pagination = createElement('div', 'pagination', paginationStyle);
-        // const leftArrow = createElement('span', 'leftArrow', {}, '<')
-        // const rightArrow = createElement('span', 'rightArrow', {}, '>')
-        const taskCard = createElement('div', 'taskCard', taskDescriptionCard);
-        const taskText = createElement('div', 'taskText', taskTextStyle);
-        const taskDescription = createElement('div', 'taskDescription', taskDescriptionStyle);
-        const taskButtons = createElement('div', 'taskButtons', taskButtonsRow);
-        const inputTitle = createElement('div', 'taskText', taskTextStyle);
-        inputTitle.textContent = 'Your answer';
-        const inputArea = createElement('textarea', 'taskDescription', {
-            resize: 'vertical',
-        });
-        const inputContainer = createElement('div', 'inputArea', taskDescriptionCard);
-        inputContainer.append(inputTitle, inputArea);
-        const closePanelButton = createElement('div', 'closePanelButton', taskButtonStyle, 'Collapse Panel');
-        const nextButton = createElement('div', 'nextButton', taskButtonBorderedStyle, 'Done, Next');
-        titleContainer.append(title, icon);
-        taskCard.append(taskText, taskDescription);
-        taskButtons.append(closePanelButton, nextButton);
-        content.append(pagination, taskCard, inputContainer, taskButtons);
-        section.append(titleContainer, content);
-        const updateTaskContent = () => {
-            const task = tasks[this.currentTaskIndex];
-            taskText.textContent = task.title;
-            taskDescription.textContent = task.description;
-            if (task.allow_typing) {
-                inputContainer.style.display = 'flex';
-            }
-            else {
-                inputContainer.style.display = 'none';
-            }
-        };
-        // pagination.appendChild(leftArrow)
-        tasks.forEach((_, index) => {
-            const pageNumber = createElement('span', `or_task_${index}`, {
-                outline: '1px solid #efefef',
-                fontSize: '13px',
-                height: '24px',
-                width: '24px',
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-                justifyContent: 'center',
-                borderRadius: '6.25em',
-            }, (index + 1).toString());
-            pageNumber.id = `or_task_${index}`;
-            pagination.append(pageNumber);
-        });
-        // pagination.appendChild(rightArrow)
-        const toggleTasksVisibility = () => {
-            this.widgetTasksVisible = !this.widgetTasksVisible;
-            icon.textContent = this.widgetTasksVisible ? '-' : '+';
-            Object.assign(content.style, this.widgetTasksVisible ? contentStyle : { display: 'none' });
-        };
-        this.hideTaskSection = () => {
-            icon.textContent = '+';
-            Object.assign(content.style, {
-                display: 'none',
-            });
-            this.widgetTasksVisible = false;
-            return false;
-        };
-        this.showTaskSection = () => {
-            icon.textContent = '-';
-            Object.assign(content.style, contentStyle);
-            this.widgetTasksVisible = true;
-            return true;
-        };
-        const highlightActive = () => {
-            const activeTaskEl = document.getElementById(`or_task_${this.currentTaskIndex}`);
-            if (activeTaskEl) {
-                Object.assign(activeTaskEl.style, taskNumberActive);
-            }
-            for (let i = 0; i < this.currentTaskIndex; i++) {
-                const taskEl = document.getElementById(`or_task_${i}`);
-                if (taskEl) {
-                    Object.assign(taskEl.style, taskNumberDone);
-                }
-            }
-        };
-        titleContainer.onclick = toggleTasksVisibility;
-        closePanelButton.onclick = this.collapseWidget;
-        nextButton.onclick = () => {
-            const textAnswer = tasks[this.currentTaskIndex].allow_typing ? inputArea.value : undefined;
-            inputArea.value = '';
-            void this.signalManager?.signalTask(tasks[this.currentTaskIndex].task_id, 'done', textAnswer);
-            if (this.currentTaskIndex < tasks.length - 1) {
-                this.currentTaskIndex++;
-                updateTaskContent();
-                const durations = this.signalManager?.getDurations();
-                if (durations &&
-                    durations.tasks.findIndex((t) => t.taskId === tasks[this.currentTaskIndex].task_id) === -1) {
-                    durations.tasks.push({
-                        taskId: tasks[this.currentTaskIndex].task_id,
-                        started: this.app.timestamp(),
-                    });
-                    this.signalManager?.setDurations(durations);
-                }
-                void this.signalManager?.signalTask(tasks[this.currentTaskIndex].task_id, 'begin');
-                highlightActive();
-            }
-            else {
-                this.showEndSection();
-            }
-            this.app.localStorage.setItem('or_uxt_task_index', this.currentTaskIndex.toString());
-        };
-        setTimeout(() => {
-            const firstTaskEl = document.getElementById('or_task_0');
-            if (firstTaskEl) {
-                Object.assign(firstTaskEl.style, taskNumberActive);
-            }
-            updateTaskContent();
-            highlightActive();
-        }, 1);
-        return section;
-    }
-    showEndSection() {
-        let isLoading = true;
-        void this.signalManager?.signalTest('done');
-        const section = createElement('div', 'end_section_or', endSectionStyle);
-        const title = createElement('div', 'end_title_or', {
-            fontSize: '1.25rem',
-            fontWeight: '500',
-        }, 'Thank you! 👍');
-        const description = createElement('div', 'end_description_or', {}, this.test?.conclusion ??
-            'Thank you for participating in our usability test. Your feedback has been captured and will be used to enhance our website. \n' +
-                '\n' +
-                'We appreciate your time and valuable input.');
-        const button = createElement('div', 'end_button_or', buttonWidgetStyle, 'Submitting Feedback');
-        const spinner = createSpinner();
-        button.appendChild(spinner);
-        if (this.test?.reqMic || this.test?.reqCamera) {
-            void this.userRecorder
-                .sendToAPI()
-                .then(() => {
-                button.removeChild(spinner);
-                button.textContent = 'End Session';
-                isLoading = false;
-            })
-                .catch((err) => {
-                console.error(err);
-                button.removeChild(spinner);
-                button.textContent = 'End Session';
-                isLoading = false;
-            });
-        }
-        else {
-            button.removeChild(spinner);
-            button.textContent = 'End Session';
-            isLoading = false;
-        }
-        if (this.taskSection) {
-            this.container.removeChild(this.taskSection);
-        }
-        if (this.descriptionSection) {
-            this.container.removeChild(this.descriptionSection);
-        }
-        if (this.stopButton && this.stopButtonContainer) {
-            this.container.removeChild(this.stopButtonContainer);
-        }
-        button.onclick = () => {
-            if (isLoading)
-                return;
-            window.close();
-            document.body.removeChild(this.bg);
-        };
-        section.append(title, description, button);
-        this.endSection = section;
-        this.container.append(section);
-    }
-}
-
-//@ts-ignore
-function isNode(sth) {
-    return !!sth && sth.nodeType != null;
-}
-function isSVGElement(node) {
-    return (node.namespaceURI === 'http://www.w3.org/2000/svg' || node.localName === 'svg');
-}
-function isUseElement(node) {
-    return node.localName === 'use';
-}
-function isElementNode(node) {
-    return node.nodeType === Node.ELEMENT_NODE;
-}
-function isCommentNode(node) {
-    return node.nodeType === Node.COMMENT_NODE;
-}
-function isTextNode(node) {
-    return node.nodeType === Node.TEXT_NODE;
-}
-function isDocument(node) {
-    return node.nodeType === Node.DOCUMENT_NODE;
-}
-function isRootNode(node) {
-    return node.nodeType === Node.DOCUMENT_NODE || node.nodeType === Node.DOCUMENT_FRAGMENT_NODE;
-}
-function hasTag(el, tagName) {
-    // @ts-ignore
-    return el.localName === tagName;
-}
-
-class CanvasRecorder {
-    constructor(app, options) {
-        this.app = app;
-        this.options = options;
-        this.snapshots = {};
-        this.intervals = [];
-        this.restartTracking = () => {
-            this.clear();
-            this.app.nodes.scanTree(this.captureCanvas);
-        };
-        this.captureCanvas = (node) => {
-            const id = this.app.nodes.getID(node);
-            if (!id || !hasTag(node, 'canvas')) {
-                return;
-            }
-            const isIgnored = this.app.sanitizer.isObscured(id) || this.app.sanitizer.isHidden(id);
-            if (isIgnored || !hasTag(node, 'canvas') || this.snapshots[id]) {
-                return;
-            }
-            const observer = new IntersectionObserver((entries) => {
-                entries.forEach((entry) => {
-                    if (entry.isIntersecting) {
-                        if (entry.target) {
-                            if (this.snapshots[id] && this.snapshots[id].createdAt) {
-                                this.snapshots[id].paused = false;
-                            }
-                            else {
-                                this.recordCanvas(entry.target, id);
-                            }
-                            /**
-                             * We can switch this to start observing when element is in the view
-                             * but otherwise right now we're just pausing when it's not
-                             * just to save some bandwidth and space on backend
-                             * */
-                            // observer.unobserve(entry.target)
-                        }
-                        else {
-                            if (this.snapshots[id]) {
-                                this.snapshots[id].paused = true;
-                            }
-                        }
-                    }
-                });
+            const observer = new IntersectionObserver((entries) => {
+                entries.forEach((entry) => {
+                    if (entry.isIntersecting) {
+                        if (this.snapshots[id] && this.snapshots[id].createdAt) {
+                            this.snapshots[id].paused = false;
+                        }
+                        else {
+                            this.recordCanvas(entry.target, id);
+                        }
+                        /**
+                         * We can switch this to start observing when element is in the view
+                         * but otherwise right now we're just pausing when it's not
+                         * just to save some bandwidth and space on backend
+                         * */
+                        // observer.unobserve(entry.target)
+                    }
+                    else {
+                        if (this.snapshots[id]) {
+                            this.snapshots[id].paused = true;
+                        }
+                    }
+                });
             });
+            this.observers.set(id, observer);
             observer.observe(node);
         };
         this.recordCanvas = (node, id) => {
@@ -3500,15 +1689,23 @@ class CanvasRecorder {
                 createdAt: ts,
                 paused: false,
                 dummy: document.createElement('canvas'),
+                isCapturing: false,
+                isStopped: false,
             };
             const canvasMsg = CanvasNode(id.toString(), ts);
             this.app.send(canvasMsg);
+            const cachedCanvas = node;
             const captureFn = (canvas) => {
+                if (!this.snapshots[id] || this.snapshots[id].isCapturing || this.snapshots[id].isStopped) {
+                    return;
+                }
+                this.snapshots[id].isCapturing = true;
                 captureSnapshot(canvas, this.options.quality, this.snapshots[id].dummy, this.options.fixedScaling, this.fileExt, (blob) => {
-                    if (!blob)
+                    if (this.snapshots[id]) {
+                        this.snapshots[id].isCapturing = false;
+                    }
+                    if (!blob || !this.snapshots[id] || this.snapshots[id].isStopped) {
                         return;
-                    if (!this.snapshots[id]) {
-                        return this.app.debug.warn('Canvas not present in snapshots after capture:', this.snapshots, id);
                     }
                     this.snapshots[id].images.push({ id: this.app.timestamp(), data: blob });
                     if (this.snapshots[id].images.length > 9) {
@@ -3518,34 +1715,31 @@ class CanvasRecorder {
                 });
             };
             const int = setInterval(() => {
-                const cid = this.app.nodes.getID(node);
-                const canvas = cid ? this.app.nodes.getNode(cid) : undefined;
-                if (!this.snapshots[id]) {
+                const snapshot = this.snapshots[id];
+                if (!snapshot || snapshot.isStopped) {
                     this.app.debug.log('Canvas is not present in {snapshots}');
-                    clearInterval(int);
+                    this.cleanupCanvas(id);
                     return;
                 }
-                if (!canvas || !hasTag(canvas, 'canvas') || canvas !== node) {
-                    this.app.debug.log('Canvas element not in sync', canvas, node);
-                    clearInterval(int);
+                if (!document.contains(cachedCanvas)) {
+                    this.app.debug.log('Canvas element not in sync', cachedCanvas, node);
+                    this.cleanupCanvas(id);
                     return;
                 }
-                else {
-                    if (!this.snapshots[id].paused) {
-                        if (this.options.useAnimationFrame) {
-                            requestAnimationFrame(() => {
-                                captureFn(canvas);
-                            });
-                        }
-                        else {
-                            captureFn(canvas);
-                        }
+                if (!snapshot.paused) {
+                    if (this.options.useAnimationFrame) {
+                        requestAnimationFrame(() => {
+                            captureFn(cachedCanvas);
+                        });
+                    }
+                    else {
+                        captureFn(cachedCanvas);
                     }
                 }
             }, this.interval);
-            this.intervals.push(int);
+            this.intervals.set(id, int);
         };
-        this.fileExt = options.fileExt ?? 'webp';
+        this.fileExt = 'webp';
         this.interval = 1000 / options.fps;
     }
     startTracking() {
@@ -3558,16 +1752,90 @@ class CanvasRecorder {
         if (Object.keys(this.snapshots).length === 0) {
             return;
         }
-        const formData = new FormData();
-        images.forEach((snapshot) => {
-            const blob = snapshot.data;
-            if (!blob)
-                return;
-            formData.append('snapshot', blob, `${createdAt}_${canvasId}_${snapshot.id}.${this.fileExt}`);
-            if (this.options.isDebug) {
-                saveImageData(blob, `${createdAt}_${canvasId}_${snapshot.id}.${this.fileExt}`);
+        if (this.pendingBatches.length >= this.MAX_QUEUE_SIZE) {
+            this.app.debug.warn('Upload queue full, dropping canvas batch');
+            return;
+        }
+        this.pendingBatches.push({ images, canvasId, createdAt });
+        if (!this.isProcessingQueue) {
+            this.processUploadQueue();
+        }
+    }
+    async processUploadQueue() {
+        this.isProcessingQueue = true;
+        while (this.pendingBatches.length > 0) {
+            if (this.uploadQueue >= this.MAX_CONCURRENT_UPLOADS) {
+                await new Promise((resolve) => setTimeout(resolve, 100));
+                continue;
             }
-        });
+            const batch = this.pendingBatches.shift();
+            if (!batch)
+                break;
+            this.uploadBatch(batch.images, batch.canvasId, batch.createdAt);
+        }
+        this.isProcessingQueue = false;
+    }
+    async uploadBatch(images, canvasId, createdAt) {
+        if (this.options.isDebug) {
+            const fileEntries = [];
+            images.forEach((snapshot) => {
+                if (!snapshot.data)
+                    return;
+                fileEntries.push({ data: snapshot.data, name: `${createdAt}_${canvasId}_${snapshot.id}.${this.fileExt}` });
+            });
+            void saveArchive(fileEntries, `canvas_${canvasId}_${createdAt}`);
+            return;
+        }
+        let formData;
+        if (this.options.framesSupport) {
+            // Pack frames into binary format: [uint64 LE timestamp][uint32 LE size][data] per frame
+            const buffers = [];
+            let totalSize = 0;
+            for (const snapshot of images) {
+                if (!snapshot.data)
+                    continue;
+                const ab = await snapshot.data.arrayBuffer();
+                buffers.push(ab);
+                totalSize += 8 + 4 + ab.byteLength; // uint64 ts + uint32 size + data
+            }
+            if (totalSize === 0)
+                return;
+            const packed = new ArrayBuffer(totalSize);
+            const view = new DataView(packed);
+            const bytes = new Uint8Array(packed);
+            let offset = 0;
+            for (let i = 0; i < images.length; i++) {
+                if (!images[i].data)
+                    continue;
+                const ab = buffers.shift();
+                const ts = images[i].id;
+                // uint64 LE as two uint32 LE writes -- timestamp
+                view.setUint32(offset, ts % 0x100000000, true);
+                view.setUint32(offset + 4, Math.floor(ts / 0x100000000), true);
+                offset += 8;
+                // uint32 LE -- size
+                view.setUint32(offset, ab.byteLength, true);
+                offset += 4;
+                // image data
+                bytes.set(new Uint8Array(ab), offset);
+                offset += ab.byteLength;
+            }
+            formData = new FormData();
+            formData.append('type', 'frames');
+            const fileName = `${createdAt}_${canvasId}.${this.fileExt}.frames`;
+            formData.append('frames', new Blob([packed]), fileName);
+        }
+        else {
+            // Legacy: send individual image files
+            formData = new FormData();
+            images.forEach((snapshot) => {
+                const blob = snapshot.data;
+                if (!blob)
+                    return;
+                const name = `${createdAt}_${canvasId}_${snapshot.id}.${this.fileExt}`;
+                formData.append('snapshot', blob, name);
+            });
+        }
         const initRestart = () => {
             this.app.debug.log('Restarting tracker; token expired');
             this.app.stop(false);
@@ -3575,6 +1843,7 @@ class CanvasRecorder {
                 void this.app.start({}, true);
             }, 250);
         };
+        this.uploadQueue++;
         fetch(this.app.options.ingestPoint + '/v1/web/images', {
             method: 'POST',
             headers: {
@@ -3590,10 +1859,50 @@ class CanvasRecorder {
         })
             .catch((e) => {
             this.app.debug.error('error saving canvas', e);
+        })
+            .finally(() => {
+            this.uploadQueue--;
         });
     }
+    cleanupCanvas(id) {
+        if (this.snapshots[id]) {
+            this.snapshots[id].isStopped = true;
+        }
+        const interval = this.intervals.get(id);
+        if (interval) {
+            clearInterval(interval);
+            this.intervals.delete(id);
+        }
+        const observer = this.observers.get(id);
+        if (observer) {
+            observer.disconnect();
+            this.observers.delete(id);
+        }
+        if (this.snapshots[id]?.dummy) {
+            const dummy = this.snapshots[id].dummy;
+            dummy.width = 0;
+            dummy.height = 0;
+        }
+        delete this.snapshots[id];
+    }
     clear() {
-        this.intervals.forEach((int) => clearInterval(int));
+        // Flush remaining images before cleanup
+        Object.keys(this.snapshots).forEach((idStr) => {
+            const id = parseInt(idStr, 10);
+            const snapshot = this.snapshots[id];
+            if (snapshot && snapshot.images.length > 0) {
+                this.sendSnaps(snapshot.images, id, snapshot.createdAt);
+                snapshot.images = [];
+            }
+        });
+        Object.keys(this.snapshots).forEach((idStr) => {
+            const id = parseInt(idStr, 10);
+            this.cleanupCanvas(id);
+        });
+        // don't clear pendingBatches or stop queue processing
+        // to allow flushed images to finish uploading in the background
+        this.intervals.clear();
+        this.observers.clear();
         this.snapshots = {};
     }
 }
@@ -3620,15 +1929,80 @@ function captureSnapshot(canvas, quality = 'medium', dummy, fixedScaling = false
         canvas.toBlob(onBlob, imageFormat, qualityInt[quality]);
     }
 }
-function saveImageData(imageDataBlob, name) {
-    const imageDataUrl = URL.createObjectURL(imageDataBlob);
+async function saveArchive(files, archiveName) {
+    const zipBlob = await createZipBlob(files);
+    const url = URL.createObjectURL(zipBlob);
     const link = document.createElement('a');
-    link.href = imageDataUrl;
-    link.download = name;
+    link.href = url;
+    link.download = `${archiveName}.zip`;
     link.style.display = 'none';
     document.body.appendChild(link);
     link.click();
     document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+}
+async function createZipBlob(files) {
+    const parts = [];
+    const centralDir = [];
+    let offset = 0;
+    for (const file of files) {
+        const nameBytes = new TextEncoder().encode(file.name);
+        const dataBytes = new Uint8Array(await file.data.arrayBuffer());
+        const crc = crc32(dataBytes);
+        // Local file header (30 bytes + filename)
+        const local = new Uint8Array(30 + nameBytes.length);
+        const lv = new DataView(local.buffer);
+        lv.setUint32(0, 0x04034b50, true);
+        lv.setUint16(4, 20, true);
+        lv.setUint16(8, 0, true);
+        lv.setUint32(14, crc, true);
+        lv.setUint32(18, dataBytes.length, true);
+        lv.setUint32(22, dataBytes.length, true);
+        lv.setUint16(26, nameBytes.length, true);
+        local.set(nameBytes, 30);
+        // Central directory entry (46 bytes + filename)
+        const cd = new Uint8Array(46 + nameBytes.length);
+        const cv = new DataView(cd.buffer);
+        cv.setUint32(0, 0x02014b50, true);
+        cv.setUint16(4, 20, true);
+        cv.setUint16(6, 20, true);
+        cv.setUint32(16, crc, true);
+        cv.setUint32(20, dataBytes.length, true);
+        cv.setUint32(24, dataBytes.length, true);
+        cv.setUint16(28, nameBytes.length, true);
+        cv.setUint32(42, offset, true);
+        cd.set(nameBytes, 46);
+        parts.push(local);
+        parts.push(dataBytes);
+        centralDir.push(cd);
+        offset += local.length + dataBytes.length;
+    }
+    const cdOffset = offset;
+    let cdSize = 0;
+    for (const entry of centralDir) {
+        parts.push(entry);
+        cdSize += entry.length;
+    }
+    // End of central directory (22 bytes)
+    const eocd = new Uint8Array(22);
+    const ev = new DataView(eocd.buffer);
+    ev.setUint32(0, 0x06054b50, true);
+    ev.setUint16(8, files.length, true);
+    ev.setUint16(10, files.length, true);
+    ev.setUint32(12, cdSize, true);
+    ev.setUint32(16, cdOffset, true);
+    parts.push(eocd);
+    return new Blob(parts, { type: 'application/zip' });
+}
+function crc32(data) {
+    let crc = 0xffffffff;
+    for (let i = 0; i < data.length; i++) {
+        crc ^= data[i];
+        for (let j = 0; j < 8; j++) {
+            crc = (crc >>> 1) ^ (crc & 1 ? 0xedb88320 : 0);
+        }
+    }
+    return (crc ^ 0xffffffff) >>> 0;
 }
 
 const LogLevel = {
@@ -3749,6 +2123,27 @@ class Maintainer {
     }
 }
 
+// 4 levels, 128 frames between each level, 8_388_608 nodes per page
+// lets hope no one will need more :D
+const BITS_LEVEL = 2; // 4
+const BITS_ORDER = 7; // 128
+const BITS_NODE = 22; // 8_388_608
+const SHIFT_ORDER = BITS_NODE;
+const SHIFT_LEVEL = BITS_NODE + BITS_ORDER;
+const MASK_NODE = (1 << BITS_NODE) - 1;
+const MASK_ORDER = (1 << BITS_ORDER) - 1;
+const MASK_LEVEL = (1 << BITS_LEVEL) - 1;
+function pack(level, order, nodeId) {
+    if (level < 0 || level > MASK_LEVEL)
+        throw new RangeError('OR: nesting level overflow, max 4');
+    if (order < 0 || order > MASK_ORDER)
+        throw new RangeError('OR: frame order overflow, max 128');
+    const v = ((level & MASK_LEVEL) << SHIFT_LEVEL) |
+        ((order & MASK_ORDER) << SHIFT_ORDER) |
+        (nodeId & MASK_NODE);
+    return v >>> 0;
+}
+
 class Nodes {
     constructor(params) {
         this.nodes = new Map();
@@ -3776,6 +2171,9 @@ class Nodes {
             }
             listeners.push([type, listener, useCapture]);
         };
+        this.createFrameId = (level, frameOrder) => {
+            return pack(level, frameOrder, 0);
+        };
         this.unregisterNode = (node) => {
             const id = node[this.node_id];
             if (id !== undefined) {
@@ -3796,16 +2194,8 @@ class Nodes {
         this.maintainer = new Maintainer(this.nodes, this.unregisterNode, params.maintainer);
         this.maintainer.start();
     }
-    syntheticMode(frameOrder) {
-        const maxSafeNumber = Number.MAX_SAFE_INTEGER;
-        const placeholderSize = 99999999;
-        const nextFrameId = placeholderSize * frameOrder;
-        // I highly doubt that this will ever happen,
-        // but it will be easier to debug if it does
-        if (nextFrameId > maxSafeNumber) {
-            throw new Error('Placeholder id overflow');
-        }
-        this.nextNodeId = nextFrameId;
+    crossdomainMode(level, frameOrder) {
+        this.nextNodeId = this.createFrameId(level, frameOrder);
     }
     registerNode(node) {
         let id = node[this.node_id];
@@ -4570,8 +2960,7 @@ class Observer {
                 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);
+                        this.recents.set(nid, RecentsType.Changed);
                     }
                 });
             });
@@ -4638,13 +3027,6 @@ class Observer {
             return true;
         }
         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)
@@ -4657,15 +3039,7 @@ class Observer {
                 this.unbindTree(node);
                 return false;
             }
-            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);
-            }
+            parentID = this.app.nodes.getID(parent);
             if (parentID === undefined) {
                 this.unbindTree(node);
                 return false;
@@ -4921,6 +3295,7 @@ 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 */
@@ -4930,7 +3305,8 @@ var InlineCssMode;
     /** 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 {
@@ -4956,6 +3332,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.PlainFetched 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: true,
+                        forcePlain: true,
+                    },
+                };
+            }
+            else {
+                return {
+                    inlineRemoteCss: false,
+                    inlinerOptions: {
+                        forceFetch: false,
+                        forcePlain: false,
+                    },
+                };
+            }
         case InlineCssMode.Disabled:
         default:
             return {
@@ -4978,7 +3375,7 @@ class TopObserver extends Observer {
         const observerOptions = {
             disableSprites: opts.disableSprites,
             disableThrottling: opts.disableThrottling,
-            ...getInlineOptions(opts.inlineCss)
+            ...getInlineOptions(opts.inlineCss, console.warn),
         };
         super(params.app, true, observerOptions);
         this.iframeOffsets = new IFrameOffsets();
@@ -5029,7 +3426,10 @@ class TopObserver extends Observer {
                 this.app.debug.info('doc already observed for', id);
                 return;
             }
-            const observer = new IFrameObserver(this.app, false, {});
+            const observer = new IFrameObserver(this.app, false, {
+                disableSprites: this.options.disableSprites,
+                ...getInlineOptions(this.options.inlineCss, console.warn),
+            });
             this.iframeObservers.set(iframe, observer);
             this.docObservers.set(currentDoc, observer);
             this.iframeObserversArr.push(observer);
@@ -5051,7 +3451,10 @@ class TopObserver extends Observer {
         handle();
     }
     handleShadowRoot(shRoot) {
-        const observer = new ShadowRootObserver(this.app);
+        const observer = new ShadowRootObserver(this.app, false, {
+            disableSprites: this.options.disableSprites,
+            ...getInlineOptions(this.options.inlineCss, console.warn),
+        });
         this.shadowRootObservers.set(shRoot, observer);
         observer.observe(shRoot.host);
     }
@@ -5077,7 +3480,7 @@ class TopObserver extends Observer {
             this.app.nodes.callNodeCallbacks(document, true);
         }, window.document.documentElement);
     }
-    crossdomainObserve(rootNodeId, frameOder) {
+    crossdomainObserve(rootNodeId, frameOder, frameLevel) {
         const observer = this;
         Element.prototype.attachShadow = function () {
             // eslint-disable-next-line
@@ -5086,8 +3489,11 @@ class TopObserver extends Observer {
             return shadow;
         };
         this.app.nodes.clear();
-        this.app.nodes.syntheticMode(frameOder);
-        const iframeObserver = new IFrameObserver(this.app);
+        this.app.nodes.crossdomainMode(frameLevel, frameOder);
+        const iframeObserver = new IFrameObserver(this.app, false, {
+            disableSprites: this.options.disableSprites,
+            ...getInlineOptions(this.options.inlineCss, console.warn),
+        });
         this.iframeObservers.set(window.document, iframeObserver);
         iframeObserver.syntheticObserve(rootNodeId, window.document);
     }
@@ -5191,6 +3597,7 @@ class Sanitizer {
     }
 }
 
+const tokenSeparator = '_$_';
 class Session {
     constructor(params) {
         this.metadata = {};
@@ -5218,19 +3625,22 @@ class Session {
         this.getSessionToken = (projectKey) => {
             const tokenWithProject = this.token || this.app.sessionStorage.getItem(this.options.session_token_key);
             if (projectKey && tokenWithProject) {
-                const savedProject = tokenWithProject.split('_&_')[1];
+                const savedProject = tokenWithProject.split(tokenSeparator)[1];
                 if (!savedProject || savedProject !== projectKey) {
                     this.app.sessionStorage.removeItem(this.options.session_token_key);
                     this.token = undefined;
                     return undefined;
                 }
             }
-            const token = tokenWithProject ? tokenWithProject.split('_&_')[0] : null;
+            const token = tokenWithProject ? tokenWithProject.split(tokenSeparator)[0] : null;
             return token || undefined;
         };
+        this.getRawTokenWithProject = () => {
+            return this.token || this.app.sessionStorage.getItem(this.options.session_token_key);
+        };
         this.setSessionToken = (token, projectKey) => {
-            this.token = `${token}_&_${projectKey}`;
-            this.app.sessionStorage.setItem(this.options.session_token_key, `${token}_&_${projectKey}`);
+            this.token = `${token}${tokenSeparator}${projectKey}`;
+            this.app.sessionStorage.setItem(this.options.session_token_key, `${token}${tokenSeparator}${projectKey}`);
         };
         this.app = params.app;
         this.options = params.options;
@@ -5293,7 +3703,7 @@ class Session {
     }
     getSessionHash() {
         const pageNo = this.getPageNumber();
-        const token = this.getSessionToken();
+        const token = this.getRawTokenWithProject();
         if (pageNo === undefined || token === undefined) {
             return;
         }
@@ -5386,9 +3796,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 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 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 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 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 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 73:return this.uint(t[1])&&this.string(t[2])&&this.uint(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 });
@@ -5424,6 +3833,9 @@ const proto = {
     startIframe: 'start tracker inside frame',
     // checking updates
     polling: 'hello-how-are-you-im-under-the-water-please-help-me',
+    // happens if tab is old and has outdated token but
+    // not communicating with backend to update it (for whatever reason)
+    reset: 'reset-your-session-please',
 };
 class App {
     constructor(projectKey, sessionToken, options, signalError, insideIframe) {
@@ -5440,7 +3852,7 @@ class App {
         this.stopCallbacks = [];
         this.commitCallbacks = [];
         this.activityState = ActivityState.NotActive;
-        this.version = '16.4.11-beta.0'; // TODO: version compatability check inside each plugin.
+        this.version = '17.2.3'; // TODO: version compatability check inside each plugin.
         this.socketMode = false;
         this.compressionThreshold = 24 * 1000;
         this.bc = null;
@@ -5450,10 +3862,7 @@ class App {
         this.rootId = null;
         this.pageFrames = [];
         this.frameOderNumber = 0;
-        this.features = {
-            'feature-flags': true,
-            'usability-test': true,
-        };
+        this.frameLevel = 0;
         this.emptyBatchCounter = 0;
         /** used by child iframes for crossdomain only */
         this.parentActive = false;
@@ -5483,6 +3892,7 @@ class App {
                 this.rootId = data.id;
                 this.session.setSessionToken(data.token, this.projectKey);
                 this.frameOderNumber = data.frameOrderNumber;
+                this.frameLevel = data.frameLevel;
                 this.debug.log('starting iframe tracking', data);
                 this.allowAppStart();
             }
@@ -5532,8 +3942,8 @@ class App {
                             line: proto.iframeId,
                             id,
                             token,
-                            // since indexes go from 0 we +1
                             frameOrderNumber: order,
+                            frameLevel: this.frameLevel + 1,
                         };
                         this.debug.log('Got child frame signal; nodeId', id, event.source, iframeData);
                         // @ts-ignore
@@ -5551,7 +3961,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) => {
@@ -5561,7 +3972,7 @@ class App {
                                 fixedMessage = [type, x + left, y + top];
                             }
                         });
-                        return fixedMessage;
+                        mappedMessages.push(fixedMessage);
                     }
                     if (msg[0] === 68 /* MType.MouseClick */) {
                         let fixedMessage = msg;
@@ -5587,9 +3998,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);
             }
@@ -5673,6 +4086,19 @@ class App {
             }
         };
         this.startTimeout = null;
+        this.restart = () => {
+            this.stop(false);
+            this.waitStatus(ActivityState.NotActive).then(() => {
+                this.allowAppStart();
+                this.start(this.prevOpts, true)
+                    .then((r) => {
+                    this.debug.info('Session restart', r);
+                })
+                    .catch((e) => {
+                    this.debug.error('Session restart failed', e);
+                });
+            });
+        };
         this.send = (message, urgent = false) => {
             if (this.activityState === ActivityState.NotActive) {
                 return;
@@ -5760,7 +4186,6 @@ class App {
                 });
             });
         };
-        this.onUxtCb = [];
         this.contextId = Math.random().toString(36).slice(2);
         this.projectKey = projectKey;
         this.networkOptions = options.network;
@@ -5795,7 +4220,7 @@ class App {
                 useAnimationFrame: false,
             },
             forceNgOff: false,
-            inlineCss: 0,
+            inlineCss: InlineCssMode.Unset,
             disableSprites: false,
             disableThrottling: false,
         };
@@ -5828,7 +4253,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,
@@ -5836,7 +4260,10 @@ class App {
         });
         this.session.attachUpdateCallback(({ userID, metadata }) => {
             if (userID != null) {
-                // TODO: nullable userID
+                if (!userID || typeof userID !== 'string' || userID.trim().length === 0) {
+                    this.debug.warn('Invalid userID (must be type string), ignoring.');
+                    return;
+                }
                 this.send(UserID(userID));
             }
             if (metadata != null) {
@@ -5853,6 +4280,7 @@ class App {
              * listen for messages from parent window, so we can signal that we're alive
              * */
             window.addEventListener('message', this.parentCrossDomainFrameListener);
+            window.addEventListener('message', this.crossDomainIframeListener);
             setInterval(() => {
                 window.parent.postMessage({
                     line: proto.polling,
@@ -5907,6 +4335,12 @@ class App {
                         });
                     }
                 }
+                if (ev.data.line === proto.reset) {
+                    const newToken = ev.data.token;
+                    this.debug.log('Received reset signal from another tab');
+                    this.session.setSessionToken(newToken, this.projectKey);
+                    this.restart();
+                }
             };
         }
     }
@@ -6010,15 +4444,21 @@ class App {
         else if (data.type === 'compress') {
             const batch = data.batch;
             const batchSize = batch.byteLength;
-            if (batchSize > this.compressionThreshold) {
-                gzip(data.batch, { mtime: 0 }, (err, result) => {
-                    if (err) {
-                        this.debug.error('Openreplay compression error:', err);
-                        this.worker?.postMessage({ type: 'uncompressed', batch: batch });
-                    }
-                    else {
-                        this.worker?.postMessage({ type: 'compressed', batch: result });
-                    }
+            const hasCompressionAPI = 'CompressionStream' in globalThis;
+            if (batchSize > this.compressionThreshold && hasCompressionAPI) {
+                const blob = new Blob([batch]);
+                const stream = blob.stream().pipeThrough(new CompressionStream('gzip'));
+                new Response(stream)
+                    .arrayBuffer()
+                    .then((compressedBuffer) => {
+                    this.worker?.postMessage({
+                        type: 'compressed',
+                        batch: new Uint8Array(compressedBuffer),
+                    });
+                })
+                    .catch((err) => {
+                    this.debug.error('Openreplay compression error:', err);
+                    this.worker?.postMessage({ type: 'uncompressed', batch: batch });
                 });
             }
             else {
@@ -6311,8 +4751,7 @@ class App {
         const { 
         // this token is needed to fetch conditions and flags,
         // but it can't be used to record a session
-        token, userBrowser, userCity, userCountry, userDevice, userOS, userState, projectID, features, } = await r.json();
-        this.features = features ? features : this.features;
+        token, userBrowser, userCity, userCountry, userDevice, userOS, userState, projectID, } = await r.json();
         this.session.assign({ projectID });
         this.session.setUserInfo({
             userBrowser,
@@ -6325,10 +4764,6 @@ class App {
         const onStartInfo = { sessionToken: token, userUUID: '', sessionID: '' };
         this.startCallbacks.forEach((cb) => cb(onStartInfo));
         await this.conditionsManager?.fetchConditions(projectID, token);
-        if (this.features['feature-flags']) {
-            await this.featureFlags.reloadFlags(token);
-            this.conditionsManager?.processFlags(this.featureFlags.flags);
-        }
         await this.tagWatcher.fetchTags(this.options.ingestPoint, token);
     }
     /**
@@ -6484,9 +4919,10 @@ class App {
             // Reset session metadata only if requested directly
             this.session.reset();
         }
+        const userId = startOpts.userID ? startOpts.userID.trim() : undefined;
         this.session.assign({
             // MBTODO: maybe it would make sense to `forceNew` if the `userID` was changed
-            userID: startOpts.userID,
+            userID: userId || undefined,
             metadata: startOpts.metadata,
         });
         const timestamp = now();
@@ -6524,6 +4960,7 @@ class App {
                     assistOnly: startOpts.assistOnly ?? this.socketMode,
                     width: window.screen.width,
                     height: window.screen.height,
+                    referrer: document.referrer,
                 }),
             });
             if (r.status !== 200) {
@@ -6540,8 +4977,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, framesSupport, assistOnly: socketOnly, } = await r.json();
             if (typeof token !== 'string' ||
                 typeof userUUID !== 'string' ||
                 (typeof startTimestamp !== 'number' && typeof startTimestamp !== 'undefined') ||
@@ -6554,6 +4990,12 @@ class App {
             }
             this.delay = delay;
             this.session.setSessionToken(token, this.projectKey);
+            if (sessionToken && sessionToken !== token) {
+                this.bc?.postMessage({
+                    type: proto.reset,
+                    token: token,
+                });
+            }
             this.session.setUserInfo({
                 userBrowser,
                 userCity,
@@ -6594,17 +5036,9 @@ 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 && !this.insideIframe) {
+            if (this.options.crossdomain?.enabled) {
                 void this.bootChildrenFrames();
             }
             if (canvasEnabled && !this.options.canvas.disableCanvas) {
@@ -6616,6 +5050,7 @@ class App {
                             isDebug: this.options.canvas.__save_canvas_locally,
                             fixedScaling: this.options.canvas.fixedCanvasScaling,
                             useAnimationFrame: this.options.canvas.useAnimationFrame,
+                            framesSupport: !!framesSupport,
                         });
             }
             /** --------------- COLD START BUFFER ------------------*/
@@ -6631,44 +5066,13 @@ class App {
                 /** --------------- COLD START BUFFER ------------------*/
             }
             if (this.insideIframe && this.rootId) {
-                this.observer.crossdomainObserve(this.rootId, this.frameOderNumber);
+                this.observer.crossdomainObserve(this.rootId, this.frameOderNumber, this.frameLevel);
             }
             else {
                 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) {
@@ -6689,13 +5093,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(() => {
@@ -6784,7 +5181,7 @@ class App {
     stop(stopWorker = true) {
         if (this.activityState !== ActivityState.NotActive) {
             try {
-                if (!this.insideIframe && this.options.crossdomain?.enabled) {
+                if (this.options.crossdomain?.enabled) {
                     this.killChildrenFrames();
                 }
                 this.attributeSender.clear();
@@ -6816,9 +5213,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
@@ -7347,19 +5751,21 @@ const labelElementFor = IN_BROWSER && 'labels' in HTMLInputElement.prototype
             }
         }
     };
-function getInputLabel(node) {
-    let label = getLabelAttribute(node);
-    if (label === null) {
-        const labelElement = labelElementFor(node);
-        label =
-            (labelElement && labelElement.innerText) ||
-                node.placeholder ||
-                node.name ||
-                node.id ||
-                node.className ||
-                node.type;
-    }
-    return normSpaces(label).slice(0, 100);
+function getInputLabel(node, customAttributes) {
+    const openreplayLabel = getLabelAttribute(node);
+    if (openreplayLabel !== null)
+        return normSpaces(openreplayLabel).slice(0, 100);
+    const customAttributeLabel = getCustomAttributeLabel(node, customAttributes);
+    if (customAttributeLabel)
+        return customAttributeLabel;
+    if (node.id)
+        return `#${node.id}`;
+    const classLabel = getClassSelector(node);
+    if (classLabel)
+        return classLabel;
+    const labelElement = labelElementFor(node);
+    const label = node.name || node.placeholder || (labelElement && labelElement.innerText) || node.type;
+    return normSpaces(label || '').slice(0, 100);
 }
 const InputMode = {
     Plain: 0,
@@ -7440,7 +5846,7 @@ function Input (app, opts) {
     }, 3);
     function sendInputChange(id, node, hesitationTime, inputTime) {
         const { value, mask } = getInputValue(id, node);
-        let label = getInputLabel(node);
+        let label = getInputLabel(node, options.customAttributes);
         if (app.sanitizer.privateMode) {
             label = label.replaceAll(/./g, '*');
         }
@@ -7549,21 +5955,28 @@ function _getTarget(target, document) {
     return target === document.documentElement ? null : target;
 }
 function Mouse (app, options) {
-    const { disableClickmaps = false } = options || {};
+    const { disableClickmaps = false, customAttributes } = options || {};
     function getTargetLabel(target) {
         const dl = getLabelAttribute(target);
         if (dl !== null) {
             return dl;
         }
         if (hasTag(target, 'input')) {
-            return getInputLabel(target);
-        }
+            return getInputLabel(target, customAttributes);
+        }
+        const customAttributeLabel = getCustomAttributeLabel(target, customAttributes);
+        if (customAttributeLabel)
+            return customAttributeLabel;
+        if (target.id)
+            return `#${target.id}`;
+        const classLabel = getClassSelector(target);
+        if (classLabel)
+            return classLabel;
         if (isClickable(target)) {
             let label = '';
             if (target instanceof HTMLElement) {
                 label = app.sanitizer.getInnerTextSecure(target);
             }
-            label = label || target.id || target.className;
             return normSpaces(label).slice(0, 100);
         }
         return '';
@@ -7707,6 +6120,11 @@ function getCSSPath(el) {
         return false;
     if (el.id)
         return `#${cssEscape(el.id)}`;
+    // if has data attributes - use them as they are more likely to be stable and unique
+    const dataAttr = Array.from(el.attributes).find(attr => attr.name.startsWith('data-'));
+    if (dataAttr) {
+        return `[${dataAttr.name}="${cssEscape(dataAttr.value)}"]`;
+    }
     const parts = [];
     while (el && el.nodeType === 1 && el !== el.ownerDocument) {
         if (el.id) {
@@ -8054,11 +6472,21 @@ function Viewport (app, options) {
     const urlSanitizer = options?.urlSanitizer || ((u) => u);
     const titleSanitizer = options?.titleSanitizer || ((t) => t);
     const sendSetPageLocation = app.safe(() => {
-        const { URL } = document;
-        if (URL !== url) {
-            url = URL;
+        const currURL = document.URL;
+        if (currURL !== url) {
+            url = currURL;
+            if (options?.replaceHashSymbol) {
+                // replace hash router symbol if needed without affecting pathname of the url
+                const u = new URL(currURL);
+                const hashRoute = u.hash.startsWith('#/') ? u.hash.slice(2) : "";
+                const routePath = hashRoute ? "/" + hashRoute.replace(/^\/+/, "") : "";
+                const cleaned = u.origin + u.pathname.replace(/\/$/, "") + routePath + u.search;
+                url = cleaned;
+            }
             const sanitized = urlSanitizer(url);
-            const safeTitle = app.sanitizer.privateMode ? stringWiper(document.title) : titleSanitizer(document.title);
+            const safeTitle = app.sanitizer.privateMode
+                ? stringWiper(document.title)
+                : titleSanitizer(document.title);
             const safeUrl = app.sanitizer.privateMode ? stringWiper(sanitized) : sanitized;
             const safeReferrer = app.sanitizer.privateMode ? stringWiper(referrer) : referrer;
             app.send(SetPageLocation(safeUrl, safeReferrer, navigationStart, safeTitle));
@@ -8483,9 +6911,9 @@ function axiosSpy (app, instance, opts, sanitize, stringify) {
     });
 }
 function isAxiosError(payload) {
-    return isObject(payload) && payload.isAxiosError === true;
+    return isObject$1(payload) && payload.isAxiosError === true;
 }
-function isObject(thing) {
+function isObject$1(thing) {
     return thing !== null && typeof thing === 'object';
 }
 
@@ -9818,6 +8246,11 @@ function Tabs (app) {
             app.send(TabChange(app.session.getTabId()));
         }
     }
+    app.attachStartCallback(() => {
+        // just for the good measure in case of restarts caused by assist plugin,
+        // to keep latest active tab in state for live player
+        changeTab();
+    });
     app.attachEventListener(window, 'focus', changeTab, false, false);
 }
 
@@ -9859,6 +8292,8 @@ function webAnimations(app, options = {}) {
         handled.add(anim);
         anim.addEventListener('finish', () => {
             const lastKF = anim.effect.getKeyframes().at(-1);
+            if (!lastKF)
+                return;
             const computedStyle = getComputedStyle(el);
             const keys = Object.keys(lastKF).filter((p) => !toIgnore.includes(p));
             // @ts-ignore
@@ -9899,6 +8334,977 @@ function webAnimations(app, options = {}) {
     });
 }
 
+/**
+ * Detects client browser, OS, and device information
+ */
+function uaParse(sWindow) {
+    const unknown = '-';
+    // Screen detection
+    let width = 0;
+    let height = 0;
+    let screenSize = '';
+    if (sWindow.screen.width) {
+        width = sWindow.screen.width;
+        height = sWindow.screen.height;
+        screenSize = `${width} x ${height}`;
+    }
+    // Browser detection
+    const nVer = sWindow.navigator.appVersion ?? '0';
+    const nAgt = sWindow.navigator.userAgent ?? 'unknown';
+    let browser = sWindow.navigator.appName ?? "unknown";
+    let version = String(parseFloat(nVer));
+    let nameOffset;
+    let verOffset;
+    let ix;
+    // Browser detection logic
+    if ((verOffset = nAgt.indexOf('YaBrowser')) !== -1) {
+        browser = 'Yandex';
+        version = nAgt.substring(verOffset + 10);
+    }
+    else if ((verOffset = nAgt.indexOf('SamsungBrowser')) !== -1) {
+        browser = 'Samsung';
+        version = nAgt.substring(verOffset + 15);
+    }
+    else if ((verOffset = nAgt.indexOf('UCBrowser')) !== -1) {
+        browser = 'UC Browser';
+        version = nAgt.substring(verOffset + 10);
+    }
+    else if ((verOffset = nAgt.indexOf('OPR')) !== -1) {
+        browser = 'Opera';
+        version = nAgt.substring(verOffset + 4);
+    }
+    else if ((verOffset = nAgt.indexOf('Opera')) !== -1) {
+        browser = 'Opera';
+        version = nAgt.substring(verOffset + 6);
+        if ((verOffset = nAgt.indexOf('Version')) !== -1) {
+            version = nAgt.substring(verOffset + 8);
+        }
+    }
+    else if ((verOffset = nAgt.indexOf('Edge')) !== -1) {
+        browser = 'Microsoft Legacy Edge';
+        version = nAgt.substring(verOffset + 5);
+    }
+    else if ((verOffset = nAgt.indexOf('Edg')) !== -1) {
+        browser = 'Microsoft Edge';
+        version = nAgt.substring(verOffset + 4);
+    }
+    else if ((verOffset = nAgt.indexOf('MSIE')) !== -1) {
+        browser = 'Microsoft Internet Explorer';
+        version = nAgt.substring(verOffset + 5);
+    }
+    else if ((verOffset = nAgt.indexOf('Chrome')) !== -1) {
+        browser = 'Chrome';
+        version = nAgt.substring(verOffset + 7);
+    }
+    else if ((verOffset = nAgt.indexOf('Safari')) !== -1) {
+        browser = 'Safari';
+        version = nAgt.substring(verOffset + 7);
+        if ((verOffset = nAgt.indexOf('Version')) !== -1) {
+            version = nAgt.substring(verOffset + 8);
+        }
+    }
+    else if ((verOffset = nAgt.indexOf('Firefox')) !== -1) {
+        browser = 'Firefox';
+        version = nAgt.substring(verOffset + 8);
+    }
+    else if (nAgt.indexOf('Trident/') !== -1) {
+        browser = 'Microsoft Internet Explorer';
+        version = nAgt.substring(nAgt.indexOf('rv:') + 3);
+    }
+    else if ((nameOffset = nAgt.lastIndexOf(' ') + 1) < (verOffset = nAgt.lastIndexOf('/'))) {
+        browser = nAgt.substring(nameOffset, verOffset);
+        version = nAgt.substring(verOffset + 1);
+        if (browser.toLowerCase() === browser.toUpperCase()) {
+            browser = sWindow.navigator.appName;
+        }
+    }
+    // Trim the version string
+    if ((ix = version.indexOf(';')) !== -1) {
+        version = version.substring(0, ix);
+    }
+    if ((ix = version.indexOf(' ')) !== -1) {
+        version = version.substring(0, ix);
+    }
+    if ((ix = version.indexOf(')')) !== -1) {
+        version = version.substring(0, ix);
+    }
+    let majorVersion = parseInt(version, 10);
+    if (isNaN(majorVersion)) {
+        version = String(parseFloat(nVer));
+        majorVersion = parseInt(nVer, 10);
+    }
+    // Mobile detection
+    const mobile = /Mobile|mini|Fennec|Android|iP(ad|od|hone)/.test(nVer);
+    // Cookie detection
+    let cookieEnabled = sWindow.navigator.cookieEnabled || false;
+    if (typeof navigator.cookieEnabled === 'undefined' && !cookieEnabled) {
+        sWindow.document.cookie = 'testcookie';
+        cookieEnabled = sWindow.document.cookie.indexOf('testcookie') !== -1;
+    }
+    // OS detection
+    let os = unknown;
+    const clientStrings = [
+        { s: 'Windows 10', r: /(Windows 10.0|Windows NT 10.0)/ },
+        { s: 'Windows 8.1', r: /(Windows 8.1|Windows NT 6.3)/ },
+        { s: 'Windows 8', r: /(Windows 8|Windows NT 6.2)/ },
+        { s: 'Windows 7', r: /(Windows 7|Windows NT 6.1)/ },
+        { s: 'Windows Vista', r: /Windows NT 6.0/ },
+        { s: 'Windows Server 2003', r: /Windows NT 5.2/ },
+        { s: 'Windows XP', r: /(Windows NT 5.1|Windows XP)/ },
+        { s: 'Windows 2000', r: /(Windows NT 5.0|Windows 2000)/ },
+        { s: 'Windows ME', r: /(Win 9x 4.90|Windows ME)/ },
+        { s: 'Windows 98', r: /(Windows 98|Win98)/ },
+        { s: 'Windows 95', r: /(Windows 95|Win95|Windows_95)/ },
+        { s: 'Windows NT 4.0', r: /(Windows NT 4.0|WinNT4.0|WinNT|Windows NT)/ },
+        { s: 'Windows CE', r: /Windows CE/ },
+        { s: 'Windows 3.11', r: /Win16/ },
+        { s: 'Android', r: /Android/ },
+        { s: 'Open BSD', r: /OpenBSD/ },
+        { s: 'Sun OS', r: /SunOS/ },
+        { s: 'Chrome OS', r: /CrOS/ },
+        { s: 'Linux', r: /(Linux|X11(?!.*CrOS))/ },
+        { s: 'iOS', r: /(iPhone|iPad|iPod)/ },
+        { s: 'Mac OS X', r: /Mac OS X/ },
+        { s: 'Mac OS', r: /(Mac OS|MacPPC|MacIntel|Mac_PowerPC|Macintosh)/ },
+        { s: 'QNX', r: /QNX/ },
+        { s: 'UNIX', r: /UNIX/ },
+        { s: 'BeOS', r: /BeOS/ },
+        { s: 'OS/2', r: /OS\/2/ },
+        {
+            s: 'Search Bot',
+            r: /(nuhk|Googlebot|Yammybot|Openbot|Slurp|MSNBot|Ask Jeeves\/Teoma|ia_archiver)/,
+        },
+    ];
+    // Find matching OS
+    for (const client of clientStrings) {
+        if (client.r.test(nAgt)) {
+            os = client.s;
+            break;
+        }
+    }
+    // OS Version detection
+    let osVersion = unknown;
+    if (/Windows/.test(os)) {
+        const matches = /Windows (.*)/.exec(os);
+        if (matches && matches[1]) {
+            osVersion = matches[1];
+            // Handle Windows 10/11 detection with newer API if available
+            if (osVersion === '10' && 'userAgentData' in sWindow.navigator) {
+                const nav = navigator;
+                if (nav.userAgentData) {
+                    nav.userAgentData
+                        .getHighEntropyValues(['platformVersion'])
+                        .then((ua) => {
+                        const version = parseInt(ua.platformVersion.split('.')[0], 10);
+                        osVersion = version < 13 ? '10' : '11';
+                    })
+                        .catch(() => {
+                        // ignore errors and keep osVersion as is
+                    });
+                }
+            }
+        }
+        os = 'Windows';
+    }
+    // OS version detection for Mac/Android/iOS
+    switch (os) {
+        case 'Mac OS':
+        case 'Mac OS X':
+        case 'Android': {
+            const matches = /(?:Android|Mac OS|Mac OS X|MacPPC|MacIntel|Mac_PowerPC|Macintosh) ([\.\_\d]+)/.exec(nAgt);
+            osVersion = matches && matches[1] ? matches[1] : unknown;
+            break;
+        }
+        case 'iOS': {
+            const matches = /OS (\d+)_(\d+)_?(\d+)?/.exec(nVer);
+            if (matches && matches[1]) {
+                osVersion = `${matches[1]}.${matches[2]}.${parseInt(matches[3] || '0', 10)}`;
+            }
+            break;
+        }
+    }
+    // Return client data
+    return {
+        screen: screenSize,
+        width,
+        height,
+        browser,
+        browserVersion: version,
+        browserMajorVersion: majorVersion,
+        mobile,
+        os,
+        osVersion,
+        cookies: cookieEnabled,
+    };
+}
+function isObject(item) {
+    const isNull = item === null;
+    return Boolean(item && typeof item === 'object' && !Array.isArray(item) && !isNull);
+}
+function getUTCOffsetString() {
+    const date = new Date();
+    const offsetMinutes = date.getTimezoneOffset();
+    const hours = Math.abs(Math.floor(offsetMinutes / 60));
+    const minutes = Math.abs(offsetMinutes % 60);
+    const sign = offsetMinutes <= 0 ? '+' : '-';
+    const hoursStr = hours.toString().padStart(2, '0');
+    const minutesStr = minutes.toString().padStart(2, '0');
+    return `UTC${sign}${hoursStr}:${minutesStr}`;
+}
+
+const refKey = '$__or__initial_ref__$';
+const distinctIdKey = '$__or__distinct_device_id__$';
+const utmParamsKey = '$__or__utm_params__$';
+const superPropKey = '$__or__super_properties__$';
+const userIdKey = '$__or__user_id__$';
+const win = 'window' in globalThis
+    ? window
+    : {
+        navigator: { userAgent: '' },
+        screen: {},
+        document: {
+            cookie: '',
+        },
+        location: { search: '' },
+    };
+const doc = 'document' in globalThis ? document : { referrer: '' };
+const searchEngineList = [
+    'google',
+    'bing',
+    'yahoo',
+    'baidu',
+    'yandex',
+    'duckduckgo',
+    'ecosia',
+    'ask',
+    'aol',
+    'wolframalpha',
+    'startpage',
+    'swisscows',
+    'qwant',
+    'lycos',
+    'dogpile',
+    'info',
+    'teoma',
+    'webcrawler',
+    'naver',
+    'seznam',
+    'perplexity',
+];
+class ConstantProperties {
+    constructor(localStorage, sessionStorage) {
+        this.localStorage = localStorage;
+        this.sessionStorage = sessionStorage;
+        this.user_id = null;
+        this.setUserId = (user_id) => {
+            this.user_id = user_id;
+            this.sessionStorage.setItem(userIdKey, user_id ?? '');
+        };
+        this.resetUserId = (hard) => {
+            this.user_id = null;
+            if (hard) {
+                this.deviceId = this.getDistinctDeviceId(true);
+            }
+        };
+        this.getDistinctDeviceId = (force) => {
+            const potentialStored = this.localStorage.getItem(distinctIdKey);
+            if (potentialStored && !force) {
+                return potentialStored;
+            }
+            else {
+                const distinctId = `${Math.random().toString(36).slice(2)}-${Math.random().toString(36).slice(2)}-${Math.random().toString(36).slice(2)}`;
+                this.localStorage.setItem(distinctIdKey, distinctId);
+                return distinctId;
+            }
+        };
+        this.getReferrer = () => {
+            const potentialStored = this.sessionStorage.getItem(refKey);
+            if (potentialStored) {
+                return potentialStored;
+            }
+            else {
+                const ref = doc.referrer;
+                this.sessionStorage.setItem(refKey, ref);
+                return ref;
+            }
+        };
+        this.parseUTM = () => {
+            const potentialStored = this.sessionStorage.getItem(utmParamsKey);
+            if (potentialStored) {
+                const obj = JSON.parse(potentialStored);
+                this.utmSource = obj.utm_source;
+                this.utmMedium = obj.utm_medium;
+                this.utmCampaign = obj.utm_campaign;
+            }
+            else {
+                const searchParams = new URLSearchParams(win.location.search);
+                this.utmSource = searchParams.get('utm_source') || null;
+                this.utmMedium = searchParams.get('utm_medium') || null;
+                this.utmCampaign = searchParams.get('utm_campaign') || null;
+                const obj = {
+                    utm_source: this.utmSource,
+                    utm_medium: this.utmMedium,
+                    utm_campaign: this.utmCampaign,
+                };
+                this.sessionStorage.setItem(utmParamsKey, JSON.stringify(obj));
+            }
+        };
+        this.getSearchEngine = (ref) => {
+            for (const searchEngine of searchEngineList) {
+                if (ref.includes(searchEngine)) {
+                    return searchEngine;
+                }
+            }
+            return null;
+        };
+        this.getSuperProperties = () => {
+            const potentialStored = this.localStorage.getItem(superPropKey);
+            if (potentialStored) {
+                return JSON.parse(potentialStored);
+            }
+            else {
+                return {};
+            }
+        };
+        this.saveSuperProperties = (props) => {
+            this.localStorage.setItem(superPropKey, JSON.stringify(props));
+        };
+        this.clearSuperProperties = () => {
+            this.localStorage.setItem(superPropKey, JSON.stringify({}));
+        };
+        const { width, height, browser, browserVersion, browserMajorVersion, os, osVersion, mobile } = uaParse(win);
+        const storedUserId = this.sessionStorage.getItem(userIdKey);
+        if (storedUserId) {
+            this.user_id = storedUserId;
+        }
+        this.os = os;
+        this.osVersion = osVersion;
+        this.browser = `${browser}`;
+        this.browserVersion = `${browserVersion} (${browserMajorVersion})`;
+        this.platform = mobile ? 'mobile' : 'desktop';
+        this.screenHeight = height;
+        this.screenWidth = width;
+        this.initialReferrer = this.getReferrer();
+        this.deviceId = this.getDistinctDeviceId();
+        this.searchEngine = this.getSearchEngine(this.initialReferrer);
+        this.parseUTM();
+    }
+    get all() {
+        return {
+            os: this.os,
+            os_version: this.osVersion,
+            browser: this.browser,
+            browser_version: this.browserVersion,
+            platform: this.platform,
+            screen_height: this.screenHeight,
+            screen_width: this.screenWidth,
+            initial_referrer: this.initialReferrer,
+            utm_source: this.utmSource,
+            utm_medium: this.utmMedium,
+            utm_campaign: this.utmCampaign,
+            user_id: this.user_id,
+            distinct_id: this.deviceId,
+            sdk_edition: 'web',
+            sdk_version: '17.2.3',
+            timezone: getUTCOffsetString(),
+            search_engine: this.searchEngine,
+        };
+    }
+    get defaultPropertyKeys() {
+        return Object.keys(this.all);
+    }
+    get distinctId() {
+        return this.deviceId;
+    }
+}
+
+const mutationTypes = {
+    identity: 'identity',
+    deleteUser: 'delete_user',
+    setProperty: 'set_property',
+    setPropertyOnce: 'set_property_once',
+    appendProperty: 'append_property',
+    appendUniqueProperty: 'append_unique_property',
+    incrementProperty: 'increment_property',
+};
+const categories = {
+    people: 'user_actions',
+    events: 'events',
+};
+const createEvent = (category, type, timestamp, payload) => {
+    if (category === categories.people) {
+        return {
+            category,
+            data: {
+                type,
+                user_id: payload.user_id,
+                payload: payload.properties,
+                timestamp,
+            },
+        };
+    }
+    else {
+        if (!payload) {
+            throw new Error('Payload is required for event creation');
+        }
+        return {
+            category,
+            data: {
+                name: payload.name,
+                payload: payload.properties,
+                timestamp,
+            },
+        };
+    }
+};
+
+const reservedProps = ['properties', 'token', 'timestamp'];
+class Events {
+    constructor(constantProperties, getTimestamp, batcher) {
+        this.constantProperties = constantProperties;
+        this.getTimestamp = getTimestamp;
+        this.batcher = batcher;
+        this.ownProperties = {};
+        /**
+         * Add event to batch with option to send it immediately,
+         * properties are optional and will not be saved as super prop
+         * */
+        this.sendEvent = (eventName, properties, options) => {
+            // add properties
+            const eventProps = {};
+            if (properties) {
+                if (!isObject(properties)) {
+                    throw new Error('Properties must be an object');
+                }
+                Object.entries(properties).forEach(([key, value]) => {
+                    if (!this.constantProperties.defaultPropertyKeys.includes(key)) {
+                        eventProps[key] = value;
+                    }
+                });
+            }
+            const eventPayload = {
+                name: eventName,
+                properties: { ...this.ownProperties, ...eventProps },
+            };
+            const event = createEvent(categories.events, undefined, this.getTimestamp(), eventPayload);
+            if (options?.send_immediately) {
+                void this.batcher.sendImmediately(event);
+            }
+            else {
+                this.batcher.addEvent(event);
+            }
+        };
+        /**
+         * creates super property for all events
+         * */
+        this.setProperty = (nameOrProperties, value) => {
+            let changed = false;
+            if (isObject(nameOrProperties)) {
+                Object.entries(nameOrProperties).forEach(([key, val]) => {
+                    if (!this.constantProperties.defaultPropertyKeys.includes(key)) {
+                        this.ownProperties[key] = val;
+                        changed = true;
+                    }
+                });
+            }
+            if (typeof nameOrProperties === 'string' && value !== undefined) {
+                if (!this.constantProperties.defaultPropertyKeys.includes(nameOrProperties)) {
+                    this.ownProperties[nameOrProperties] = value;
+                    changed = true;
+                }
+            }
+            if (changed) {
+                this.constantProperties.saveSuperProperties(this.ownProperties);
+            }
+        };
+        /**
+         * set super property only if it doesn't exist yet
+         * */
+        this.setPropertiesOnce = (nameOrProperties, value) => {
+            let changed = false;
+            if (isObject(nameOrProperties)) {
+                Object.entries(nameOrProperties).forEach(([key, val]) => {
+                    if (!this.ownProperties[key] && !reservedProps.includes(key)) {
+                        this.ownProperties[key] = val;
+                        changed = true;
+                    }
+                });
+            }
+            if (typeof nameOrProperties === 'string' && value !== undefined) {
+                if (!this.ownProperties[nameOrProperties] && !reservedProps.includes(nameOrProperties)) {
+                    this.ownProperties[nameOrProperties] = value;
+                    changed = true;
+                }
+            }
+            if (changed) {
+                this.constantProperties.saveSuperProperties(this.ownProperties);
+            }
+        };
+        /**
+         * removes properties from list of super properties
+         * */
+        this.unsetProperties = (properties) => {
+            let changed = false;
+            if (Array.isArray(properties)) {
+                properties.forEach((key) => {
+                    if (this.ownProperties[key] && !reservedProps.includes(key)) {
+                        delete this.ownProperties[key];
+                        changed = true;
+                    }
+                });
+            }
+            else if (this.ownProperties[properties] && !reservedProps.includes(properties)) {
+                delete this.ownProperties[properties];
+                changed = true;
+            }
+            if (changed) {
+                this.constantProperties.saveSuperProperties(this.ownProperties);
+            }
+        };
+        /** clears all super properties */
+        this.reset = () => {
+            this.ownProperties = {};
+            this.constantProperties.clearSuperProperties();
+        };
+        /** mixpanel compatibility */
+        this.register = this.setProperty;
+        this.register_once = this.setPropertiesOnce;
+        this.unregister = this.unsetProperties;
+        this.track = this.sendEvent;
+        this.ownProperties = this.constantProperties.getSuperProperties();
+    }
+}
+
+class People {
+    constructor(constantProperties, getTimestamp, onId, batcher) {
+        this.constantProperties = constantProperties;
+        this.getTimestamp = getTimestamp;
+        this.onId = onId;
+        this.batcher = batcher;
+        this.ownProperties = {};
+        this.identify = (user_id, options) => {
+            if (!user_id || typeof user_id !== 'string') {
+                throw new Error('OR SDK: user_id (string) is required for .identify()');
+            }
+            // if user exists already, reset properties
+            if (this.constantProperties.user_id && this.constantProperties.user_id !== user_id) {
+                this.reset();
+            }
+            this.constantProperties.setUserId(user_id);
+            if (!options?.fromTracker) {
+                this.onId(user_id);
+            }
+            const identityEvent = createEvent(categories.people, mutationTypes.identity, this.getTimestamp(), { user_id });
+            this.batcher.addEvent(identityEvent);
+        };
+        /** Resets user id and own properties
+         *
+         * !hard reset will destroy persistent device id!
+         * */
+        this.reset = (hard) => {
+            this.constantProperties.resetUserId(hard);
+            this.ownProperties = {};
+        };
+        /**
+         *  Will delete user and its data from backend, then reset all local properties
+         */
+        this.deleteUser = () => {
+            const removedUser = this.constantProperties.user_id;
+            if (!removedUser)
+                return;
+            this.constantProperties.setUserId(null);
+            this.ownProperties = {};
+            const deleteEvent = createEvent(categories.people, mutationTypes.deleteUser, undefined, {
+                user_id: removedUser,
+            });
+            this.batcher.addEvent(deleteEvent);
+            this.reset();
+        };
+        /**
+         * set user properties, overwriting existing ones
+         * */
+        this.setProperties = (propertyOrObj, value) => {
+            if (!propertyOrObj) {
+                throw new Error('OR SDK: no user properties provided to set');
+            }
+            const properties = {};
+            if (typeof propertyOrObj === 'string' && propertyOrObj && value) {
+                properties[propertyOrObj] = value;
+            }
+            else if (isObject(propertyOrObj)) {
+                Object.assign(properties, propertyOrObj);
+            }
+            else {
+                throw new Error('OR SDK: invalid user properties provided to set');
+            }
+            Object.entries(properties).forEach(([key, value]) => {
+                if (!this.constantProperties.defaultPropertyKeys.includes(key)) {
+                    this.ownProperties[key] = value;
+                }
+            });
+            const setEvent = createEvent(categories.people, mutationTypes.setProperty, undefined, {
+                user_id: this.user_id,
+                properties,
+            });
+            this.batcher.addEvent(setEvent);
+        };
+        /**
+         * Set property if it doesn't exist yet
+         * */
+        this.setPropertiesOnce = (properties) => {
+            if (!isObject(properties)) {
+                throw new Error('Properties must be an object');
+            }
+            Object.entries(properties).forEach(([key, value]) => {
+                if (!this.constantProperties.defaultPropertyKeys.includes(key) && !this.ownProperties[key]) {
+                    this.ownProperties[key] = value;
+                }
+            });
+            const setEvent = createEvent(categories.people, mutationTypes.setPropertyOnce, undefined, {
+                user_id: this.user_id,
+                properties,
+            });
+            this.batcher.addEvent(setEvent);
+        };
+        /**
+         * Add value to property (will turn string prop into array)
+         * */
+        this.appendValues = (key, value) => {
+            if (!this.constantProperties.defaultPropertyKeys.includes(key) && this.ownProperties[key]) {
+                if (Array.isArray(this.ownProperties[key])) {
+                    this.ownProperties[key].push(value);
+                }
+                else {
+                    this.ownProperties[key] = [this.ownProperties[key], value];
+                }
+            }
+            const appendEvent = createEvent(categories.people, mutationTypes.appendProperty, undefined, {
+                properties: { [key]: value },
+                user_id: this.user_id,
+            });
+            this.batcher.addEvent(appendEvent);
+        };
+        /**
+         * Add unique values to property (will turn string prop into array)
+         * */
+        this.appendUniqueValues = (key, value) => {
+            if (!this.ownProperties[key])
+                return;
+            if (Array.isArray(this.ownProperties[key])) {
+                if (!this.ownProperties[key].includes(value)) {
+                    this.appendValues(key, value);
+                }
+            }
+            else if (this.ownProperties[key] !== value) {
+                this.appendValues(key, value);
+            }
+            const unionEvent = createEvent(categories.people, mutationTypes.appendUniqueProperty, undefined, {
+                properties: { [key]: value },
+                user_id: this.user_id,
+            });
+            this.batcher.addEvent(unionEvent);
+        };
+        /**
+         * Adds value (incl. negative) to existing numerical property
+         * */
+        this.increment = (key, value) => {
+            if (!this.ownProperties[key]) {
+                this.ownProperties[key] = 0;
+            }
+            if (this.ownProperties[key] && typeof this.ownProperties[key] !== 'number') {
+                throw new Error('OR SDK: Property must be a number to increment');
+            }
+            // @ts-ignore
+            this.ownProperties[key] += value;
+            const incrementEvent = createEvent(categories.people, mutationTypes.incrementProperty, undefined, {
+                user_id: this.user_id,
+                properties: { [key]: value },
+            });
+            this.batcher.addEvent(incrementEvent);
+        };
+        /** mixpanel compatibility */
+        this.union = this.appendUniqueValues;
+        this.set = this.setProperties;
+        this.set_once = this.setPropertiesOnce;
+        this.append = this.appendValues;
+        this.incrementBy = this.increment;
+    }
+    get user_id() {
+        return this.constantProperties.user_id;
+    }
+}
+
+/**
+ * Creates batches of events, then sends them at intervals.
+ */
+class Batcher {
+    constructor(backendUrl, getToken, init) {
+        this.backendUrl = backendUrl;
+        this.getToken = getToken;
+        this.init = init;
+        this.autosendInterval = 5 * 1000;
+        this.retryTimeout = 3 * 1000;
+        this.retryLimit = 3;
+        this.apiEdp = '/v1/sdk/i';
+        this.batch = {
+            [categories.people]: [],
+            [categories.events]: [],
+        };
+        this.intervalId = null;
+    }
+    getBatches() {
+        this.batch[categories.people] = this.dedupePeopleEvents();
+        const finalData = { data: this.batch };
+        return finalData;
+    }
+    addEvent(event) {
+        this.batch[event.category].push(event.data);
+    }
+    sendImmediately(event) {
+        this.sendBatch({ [event.category]: [event.data] });
+    }
+    /**
+     *
+     * Essentially we're dividing the batch by identify events and squash all same category events into one in each part,
+     * taking priority to the last one
+     */
+    dedupePeopleEvents() {
+        const peopleEvents = this.batch[categories.people];
+        const finalEvents = [];
+        const currentPart = [];
+        for (let event of peopleEvents) {
+            if (event.type === 'identity') {
+                if (currentPart.length > 0) {
+                    finalEvents.push(...this.squashPeopleEvents(currentPart), event);
+                    currentPart.length = 0;
+                }
+                else {
+                    finalEvents.push(event);
+                }
+            }
+            else {
+                currentPart.push(event);
+            }
+        }
+        if (currentPart.length > 0) {
+            finalEvents.push(...this.squashPeopleEvents(currentPart));
+        }
+        return finalEvents;
+    }
+    squashPeopleEvents(events) {
+        if (!events || events.length === 0) {
+            return [];
+        }
+        const uniqueEventsByType = new Map();
+        for (let event of events) {
+            const prev = uniqueEventsByType.get(event.type);
+            if (prev) {
+                if (event.type === 'increment_property') {
+                    const previousValues = Object.entries(prev.payload);
+                    const currentValues = Object.entries(event.payload);
+                    const uniqueKeys = new Set([...previousValues.map(([key]) => key), ...currentValues.map(([key]) => key)]);
+                    const mergedPayload = {};
+                    uniqueKeys.forEach((key) => {
+                        const prevValue = typeof prev.payload[key] === 'number' ? prev.payload[key] : 0;
+                        const currValue = typeof event.payload[key] === 'number' ? event.payload[key] : 0;
+                        mergedPayload[key] = prevValue + currValue;
+                    });
+                    uniqueEventsByType.set(event.type, {
+                        type: event.type,
+                        timestamp: event.timestamp,
+                        payload: mergedPayload,
+                    });
+                    continue;
+                }
+                // merge payloads, taking priority to the latest one
+                uniqueEventsByType.set(event.type, {
+                    type: event.type,
+                    timestamp: event.timestamp,
+                    payload: { ...(prev.payload ?? {}), ...(event.payload ?? {}) },
+                });
+            }
+            else {
+                uniqueEventsByType.set(event.type, event);
+            }
+        }
+        return Array.from(uniqueEventsByType.values());
+    }
+    sendBatch(batch) {
+        const sentBatch = batch;
+        let attempts = 0;
+        const send = () => {
+            const token = this.getToken();
+            if (!token) {
+                return;
+            }
+            attempts++;
+            return fetch(`${this.backendUrl}${this.apiEdp}`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    Authorization: `Bearer ${token}`,
+                },
+                body: JSON.stringify(sentBatch),
+            })
+                .then((response) => {
+                if ([403, 401].includes(response.status)) {
+                    if (attempts < this.retryLimit) {
+                        return this.init().then(() => {
+                            send();
+                        });
+                    }
+                    return;
+                }
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+            })
+                .catch(() => {
+                if (attempts < this.retryLimit) {
+                    setTimeout(() => void send(), this.retryTimeout);
+                }
+            });
+        };
+        void send();
+    }
+    startAutosend() {
+        if (this.intervalId) {
+            clearInterval(this.intervalId);
+        }
+        this.intervalId = setInterval(() => {
+            this.flush();
+        }, this.autosendInterval);
+    }
+    flush() {
+        const categories = Object.keys(this.batch);
+        const isEmpty = categories.every((category) => this.batch[category].length === 0);
+        if (isEmpty) {
+            return;
+        }
+        this.sendBatch(this.getBatches());
+        categories.forEach((key) => {
+            this.batch[key] = [];
+        });
+    }
+    stop() {
+        this.flush();
+        if (this.intervalId) {
+            clearInterval(this.intervalId);
+            this.intervalId = null;
+        }
+    }
+}
+
+const STORAGEKEY = '__or_sdk_analytics_token';
+class Analytics {
+    /**
+     * @param localStorage Class or Object that implements Storage-like interface that stores
+     * values persistently like window.localStorage or any other file-based storage
+     *
+     * @param sessionStorage Class or Object that implements Storage-like interface that stores values
+     * on per-session basis like window.sessionStorage or any other in-memory storage
+     *
+     * @param getToken Function that returns token to bind events to a session
+     *
+     * @param getTimestamp returns current timestamp
+     *
+     * @param setUserId callback for people.identify
+     *
+     * @param standalone if true, analytics will manage its own token (instead of using with openreplay tracker session)
+     * */
+    constructor(options) {
+        this.token = null;
+        this.standalone = false;
+        this._getToken = () => {
+            if (this.standalone) {
+                return this.token;
+            }
+            else {
+                return this.getToken();
+            }
+        };
+        this._getTimestamp = () => {
+            if (this.standalone) {
+                return Date.now();
+            }
+            return this.getTimestamp();
+        };
+        this.init = async () => {
+            if (!this.standalone) {
+                this.batcher.startAutosend();
+                return;
+            }
+            else {
+                const defaultFields = this.constantProperties.all;
+                const apiEdp = '/v1/sdk/start';
+                const data = {
+                    projectKey: this.projectKey,
+                    defaultFields,
+                };
+                const resp = await fetch(apiEdp, {
+                    method: 'POST',
+                    body: JSON.stringify(data),
+                });
+                if (!resp.ok) {
+                    throw new Error(`HTTP error! status: ${resp.status}`);
+                }
+                const result = await resp.json();
+                if (result.token) {
+                    this.token = result.token;
+                    this.sessionStorage.setItem(STORAGEKEY, result.token);
+                }
+                else {
+                    throw new Error('No token received from server');
+                }
+            }
+        };
+        this.reset = () => {
+            this.people.reset(true);
+            this.events.reset();
+            this.batcher.stop();
+            if (this.standalone) {
+                this.token = null;
+                this.sessionStorage.setItem(STORAGEKEY, '');
+            }
+        };
+        /**
+         * COMPATIBILITY LAYER
+         * */
+        /**
+         * Identify a user with an id (e.g. email, username, etc.)
+         * will bind all events and properties (including device_id) to this user
+         *
+         * you will need to manually call people.reset() to clear the id on logout event
+         * */
+        this.identify = (user_id) => {
+            return this.people.identify(user_id);
+        };
+        /**
+         * Add event to batch with option to send it immediately,
+         * properties are optional and will not be saved as super prop
+         * */
+        this.track = (eventName, properties, options) => {
+            return this.events.track(eventName, properties, options);
+        };
+        this.sessionStorage = options.sessionStorage || sessionStorage;
+        this.localStorage = options.localStorage || localStorage;
+        this.backendUrl = options.ingestPoint;
+        this.projectKey = options.projectKey;
+        this.getToken = options.getToken || (() => '');
+        this.getTimestamp = options.getTimestamp || (() => Date.now());
+        this.setUserId = options.setUserId || (() => { });
+        this.standalone = !options.notStandalone;
+        this.token = this.sessionStorage.getItem(STORAGEKEY);
+        this.constantProperties = new ConstantProperties(this.localStorage, this.sessionStorage);
+        this.batcher = new Batcher(this.backendUrl, this._getToken, this.init);
+        this.events = new Events(this.constantProperties, this._getTimestamp, this.batcher);
+        this.people = new People(this.constantProperties, this._getTimestamp, this.setUserId, this.batcher);
+        if (options.notStandalone) {
+            this.init();
+        }
+    }
+}
+
 const Messages = _Messages;
 const DOCS_SETUP = '/en/sdk';
 function processOptions(obj) {
@@ -9940,6 +9346,7 @@ class API {
     constructor(options) {
         this.options = options;
         this.app = null;
+        this.analytics = null;
         this.crossdomainMode = false;
         this.checkDoNotTrack = () => {
             return (this.options.respectDoNotTrack &&
@@ -9950,7 +9357,7 @@ class API {
         this.signalStartIssue = (reason, missingApi) => {
             const doNotTrack = this.checkDoNotTrack();
             console.log("Tracker couldn't start due to:", JSON.stringify({
-                trackerVersion: '16.4.11-beta.0',
+                trackerVersion: '17.2.3',
                 projectKey: this.options.projectKey,
                 doNotTrack,
                 reason: missingApi.length ? `missing api: ${missingApi.join(',')}` : reason,
@@ -9962,6 +9369,24 @@ class API {
             }
             this.app.restartCanvasTracking();
         };
+        this.getSessionURL = (options) => {
+            if (this.app === null) {
+                return undefined;
+            }
+            return this.app.getSessionURL(options);
+        };
+        this.setUserID = (id) => {
+            if (typeof id === 'string' && this.app !== null) {
+                this.app.session.setUserID(id);
+                this.analytics?.people.identify(id, { fromTracker: true });
+            }
+        };
+        this.identify = this.setUserID;
+        this.track = this.analytics?.track;
+        this.userID = (id) => {
+            deprecationWarn("'userID' method", "'setUserID' method", '/');
+            this.setUserID(id);
+        };
         this.handleError = (e, metadata = {}) => {
             if (this.app === null) {
                 return;
@@ -9984,6 +9409,21 @@ class API {
             }
             this.app.send(Incident(options.label ?? '', options.startTime, options.endTime ?? options.startTime));
         };
+        this.analyticsToken = null;
+        /**
+         * Use custom token for analytics events without session recording
+         * */
+        this.setAnalyticsToken = (token) => {
+            this.analyticsToken = token;
+        };
+        this.getAnalyticsToken = () => {
+            if (this.analyticsToken) {
+                return this.analyticsToken;
+            }
+            else {
+                return this.app?.session.getSessionToken() ?? '';
+            }
+        };
         this.crossdomainMode = Boolean(inIframe() && options.crossdomain?.enabled);
         if (!IN_BROWSER || !processOptions(options)) {
             return;
@@ -10042,6 +9482,34 @@ class API {
         }
         const app = new App(options.projectKey, options.sessionToken, options, this.signalStartIssue, this.crossdomainMode);
         this.app = app;
+        if (options.projectKey && options.analytics?.active) {
+            let isSaas = false;
+            if (!options.ingestPoint) {
+                isSaas = true;
+            }
+            if (options.ingestPoint) {
+                const saasHost = 'api.openreplay.com';
+                const urlObj = new URL(options.ingestPoint);
+                if (urlObj.hostname === saasHost) {
+                    isSaas = true;
+                }
+            }
+            const defaultEdp = 'https://api.openreplay.com/ingest';
+            this.analytics = new Analytics({
+                localStorage: options.localStorage ?? localStorage,
+                sessionStorage: options.sessionStorage ?? sessionStorage,
+                getToken: () => this.getAnalyticsToken(),
+                getTimestamp: () => this.app?.timestamp() ?? Date.now(),
+                setUserId: (id) => {
+                    this.app?.session.setUserID(id);
+                },
+                notStandalone: true,
+                ingestPoint: isSaas
+                    ? defaultEdp
+                    : (options.analytics?.ingestPoint ?? options.ingestPoint ?? defaultEdp),
+                projectKey: options.projectKey,
+            });
+        }
         if (!this.crossdomainMode) {
             // no need to send iframe viewport data since its a node for us
             Viewport(app, options.urls);
@@ -10052,7 +9520,7 @@ class API {
             // no tabs in iframes yet
             Tabs(app);
         }
-        Mouse(app, options.mouse);
+        Mouse(app, { ...options.mouse, customAttributes: options.customAttributes });
         // inside iframe, we ignore viewport scroll
         Scroll(app, this.crossdomainMode);
         CSSRules(app, options.css);
@@ -10072,9 +9540,6 @@ class API {
         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(() => {
@@ -10097,24 +9562,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);
     }
@@ -10142,6 +9589,10 @@ class API {
             if (this.app === null) {
                 return Promise.reject("Browser doesn't support required api, or doNotTrack is active.");
             }
+            if (startOpts?.userID) {
+                this.app.session.setUserID(startOpts.userID);
+                this.analytics?.people.identify(startOpts.userID, { fromTracker: true });
+            }
             return this.app.start(startOpts);
         }
         else {
@@ -10245,31 +9696,10 @@ 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();
     }
-    getSessionURL(options) {
-        if (this.app === null) {
-            return undefined;
-        }
-        return this.app.getSessionURL(options);
-    }
-    setUserID(id) {
-        if (typeof id === 'string' && this.app !== null) {
-            this.app.session.setUserID(id);
-        }
-    }
-    userID(id) {
-        deprecationWarn("'userID' method", "'setUserID' method", '/');
-        this.setUserID(id);
-    }
     setUserAnonymousID(id) {
         if (typeof id === 'string' && this.app !== null) {
             this.app.send(UserAnonymousID(id));
@@ -10294,6 +9724,9 @@ 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;
@@ -10304,9 +9737,7 @@ class API {
                     }
                     payload = JSON.stringify(payload);
                 }
-                catch (e) {
-                    return;
-                }
+                catch (_) { }
                 this.app.send(CustomEvent(key, payload));
             }
         }
@@ -10328,6 +9759,13 @@ class TrackerSingleton {
     constructor() {
         this.instance = null;
         this.isConfigured = false;
+        this.identify = this.setUserID;
+        this.track = (eventName, properties, options) => {
+            if (!IN_BROWSER || !this.ensureConfigured() || !this.instance) {
+                return;
+            }
+            this.instance.track?.(eventName, properties);
+        };
     }
     /**
      * Call this method once to create tracker configuration
@@ -10378,6 +9816,15 @@ class TrackerSingleton {
         }
         this.instance.setUserID(id);
     }
+    get analytics() {
+        if (this.instance?.analytics) {
+            return this.instance.analytics;
+        }
+        else {
+            return null;
+        }
+    }
+    ;
     /**
      * Set metadata for the current session
      *
@@ -10430,42 +9877,6 @@ class TrackerSingleton {
         }
         this.instance.handleError(e, metadata);
     }
-    isFlagEnabled(flagName) {
-        if (!IN_BROWSER || !this.ensureConfigured() || !this.instance) {
-            return false;
-        }
-        return this.instance.isFlagEnabled(flagName);
-    }
-    onFlagsLoad(...args) {
-        if (!IN_BROWSER || !this.ensureConfigured() || !this.instance) {
-            return;
-        }
-        this.instance.onFlagsLoad(...args);
-    }
-    clearPersistFlags() {
-        if (!IN_BROWSER || !this.ensureConfigured() || !this.instance) {
-            return;
-        }
-        this.instance.clearPersistFlags();
-    }
-    reloadFlags() {
-        if (!IN_BROWSER || !this.ensureConfigured() || !this.instance) {
-            return;
-        }
-        return this.instance.reloadFlags();
-    }
-    getFeatureFlag(flagName) {
-        if (!IN_BROWSER || !this.ensureConfigured() || !this.instance) {
-            return;
-        }
-        return this.instance.getFeatureFlag(flagName);
-    }
-    getAllFeatureFlags() {
-        if (!IN_BROWSER || !this.ensureConfigured() || !this.instance) {
-            return;
-        }
-        return this.instance.getAllFeatureFlags();
-    }
     restartCanvasTracking() {
         if (!IN_BROWSER || !this.ensureConfigured() || !this.instance) {
             return;
@@ -10588,17 +9999,13 @@ class TrackerSingleton {
         }
         return this.instance.getTabId();
     }
-    getUxId() {
-        if (!IN_BROWSER || !this.ensureConfigured() || !this.instance) {
-            return null;
-        }
-        return this.instance.getUxId();
-    }
 }
 const tracker = new TrackerSingleton();
 
+exports.Analytics = Analytics;
 exports.App = App;
 exports.Messages = Messages;
 exports.default = API;
+exports.openReplay = tracker;
 exports.tracker = tracker;
 //# sourceMappingURL=entry.js.map