@highlight-run/rrweb 2.0.1 → 2.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@highlight-run/rrweb",
-  "version": "2.0.1",
+  "version": "2.0.4",
   "description": "record and replay the web",
   "scripts": {
     "prepare": "npm run prepack",
@@ -14,7 +14,8 @@
     "bundle": "rollup --config",
     "typings": "tsc -d --declarationDir typings",
     "check-types": "tsc -noEmit",
-    "prepublish": "npm run typings && npm run bundle"
+    "prepublish": "npm run typings && npm run bundle",
+    "lint": "yarn eslint src"
   },
   "repository": {
     "type": "git",
@@ -41,17 +42,17 @@
   },
   "homepage": "https://github.com/rrweb-io/rrweb#readme",
   "devDependencies": {
-    "@rollup/plugin-node-resolve": "^7.0.0",
-    "@rollup/plugin-typescript": "^8.3.1",
+    "@rollup/plugin-node-resolve": "^13.1.3",
     "@types/chai": "^4.1.6",
     "@types/inquirer": "0.0.43",
     "@types/jest": "^27.4.1",
     "@types/jest-image-snapshot": "^4.3.1",
-    "@types/jsdom": "^16.2.14",
     "@types/node": "^17.0.21",
+    "@types/offscreencanvas": "^2019.6.4",
     "@types/prettier": "^2.3.2",
     "@types/puppeteer": "^5.4.4",
     "cross-env": "^5.2.0",
+    "esbuild": "^0.14.38",
     "fast-mhtml": "^1.1.9",
     "identity-obj-proxy": "^3.0.0",
     "ignore-styles": "^5.0.1",
@@ -59,27 +60,27 @@
     "jest": "^27.5.1",
     "jest-image-snapshot": "^4.5.1",
     "jest-snapshot": "^23.6.0",
-    "jsdom": "^17.0.0",
-    "jsdom-global": "^3.0.2",
     "prettier": "2.2.1",
     "puppeteer": "^9.1.1",
-    "rollup": "^2.45.2",
+    "rollup": "^2.68.0",
+    "rollup-plugin-esbuild": "^4.9.1",
     "rollup-plugin-postcss": "^3.1.1",
-    "rollup-plugin-rename-node-modules": "^1.1.0",
-    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-rename-node-modules": "^1.3.1",
+    "rollup-plugin-typescript2": "^0.31.2",
+    "rollup-plugin-web-worker-loader": "^1.6.1",
     "ts-jest": "^27.1.3",
     "ts-node": "^10.7.0",
     "tslib": "^2.3.1",
-    "tslint": "^6.1.3",
     "typescript": "^4.6.2"
   },
   "dependencies": {
-    "@highlight-run/rrweb-snapshot": "^1.1.15",
+    "@highlight-run/rrdom": "^0.1.3",
+    "@highlight-run/rrweb-snapshot": "^1.1.16",
     "@types/css-font-loading-module": "0.0.7",
     "@xstate/fsm": "^1.4.0",
     "base64-arraybuffer": "^1.0.1",
     "fflate": "^0.4.4",
     "mitt": "^1.1.3"
   },
-  "gitHead": "0a154a620f994a625f3689b0d851ca03c214a2c0"
+  "gitHead": "313812f5e01a2a5140b99a138dc13467c26b5f3a"
 }

package/typings/packer/base.d.ts

@@ -1,4 +1,4 @@
-import { eventWithTime } from '../types';
+import type { eventWithTime } from '../types';
 export declare type PackFn = (event: eventWithTime) => string;
 export declare type UnpackFn = (raw: string) => eventWithTime;
 export declare type eventWithTimeAndPacker = eventWithTime & {

package/typings/plugins/console/record/index.d.ts

@@ -1,4 +1,4 @@
-import { RecordPlugin } from '../../../types';
+import type { RecordPlugin } from '../../../types';
 export declare type StringifyOptions = {
     stringLengthLimit?: number;
     numOfKeysLimit: number;

package/typings/plugins/console/record/stringify.d.ts

@@ -1,2 +1,2 @@
-import { StringifyOptions } from './index';
+import type { StringifyOptions } from './index';
 export declare function stringify(obj: any, stringifyOptions?: StringifyOptions): string;

package/typings/plugins/sequential-id/record/index.d.ts

@@ -1,4 +1,4 @@
-import { RecordPlugin } from '../../../types';
+import type { RecordPlugin } from '../../../types';
 export declare type SequentialIdOptions = {
     key: string;
 };

package/typings/plugins/sequential-id/replay/index.d.ts

@@ -1,5 +1,5 @@
 import type { SequentialIdOptions } from '../record';
-import { ReplayPlugin } from '../../../types';
+import type { ReplayPlugin } from '../../../types';
 declare type Options = SequentialIdOptions & {
     warnOnMissingId: boolean;
 };

package/typings/record/iframe-manager.d.ts

@@ -1,5 +1,5 @@
-import { serializedNodeWithId, INode } from '@highlight-run/rrweb-snapshot';
-import { mutationCallBack } from '../types';
+import type { Mirror, serializedNodeWithId } from '@highlight-run/rrweb-snapshot';
+import type { mutationCallBack } from '../types';
 export declare class IframeManager {
     private iframes;
     private mutationCb;
@@ -9,5 +9,5 @@ export declare class IframeManager {
     });
     addIframe(iframeEl: HTMLIFrameElement): void;
     addLoadListener(cb: (iframeEl: HTMLIFrameElement) => unknown): void;
-    attachIframe(iframeEl: INode, childSn: serializedNodeWithId): void;
+    attachIframe(iframeEl: HTMLIFrameElement, childSn: serializedNodeWithId, mirror: Mirror): void;
 }

package/typings/record/index.d.ts

@@ -4,6 +4,6 @@ declare namespace record {
     var addCustomEvent: <T>(tag: string, payload: T) => void;
     var freezePage: () => void;
     var takeFullSnapshot: (isCheckout?: boolean | undefined) => void;
-    var mirror: import("../types").Mirror;
+    var mirror: import("@highlight-run/rrweb-snapshot").Mirror;
 }
 export default record;

package/typings/record/mutation.d.ts

@@ -1,4 +1,4 @@
-import { mutationRecord, MutationBufferParam } from '../types';
+import type { mutationRecord, MutationBufferParam } from '../types';
 export default class MutationBuffer {
     private frozen;
     private locked;
@@ -25,6 +25,7 @@ export default class MutationBuffer {
     private doc;
     private mirror;
     private iframeManager;
+    private stylesheetManager;
     private shadowDomManager;
     private canvasManager;
     private enableStrictPrivacy;

package/typings/record/observers/canvas/2d.d.ts

@@ -1,2 +1,3 @@
-import { blockClass, canvasManagerMutationCallback, IWindow, listenerHandler, Mirror } from '../../../types';
+import type { Mirror } from '@highlight-run/rrweb-snapshot';
+import { blockClass, canvasManagerMutationCallback, IWindow, listenerHandler } from '../../../types';
 export default function initCanvas2DMutationObserver(cb: canvasManagerMutationCallback, win: IWindow, blockClass: blockClass, mirror: Mirror): listenerHandler;

package/typings/record/observers/canvas/canvas-manager.d.ts

@@ -1,4 +1,5 @@
-import { blockClass, canvasMutationCallback, IWindow, Mirror } from '../../../types';
+import type { Mirror } from '@highlight-run/rrweb-snapshot';
+import type { blockClass, canvasMutationCallback, IWindow } from '../../../types';
 export declare type RafStamps = {
     latestId: number;
     invokeId: number | null;
@@ -17,13 +18,15 @@ export declare class CanvasManager {
     lock(): void;
     unlock(): void;
     constructor(options: {
-        recordCanvas: boolean | number;
+        recordCanvas: boolean;
         mutationCb: canvasMutationCallback;
         win: IWindow;
         blockClass: blockClass;
         mirror: Mirror;
+        sampling?: 'all' | number;
     });
     private processMutation;
+    private initCanvasFPSObserver;
     private initCanvasMutationObserver;
     private startPendingCanvasMutationFlusher;
     private startRAFTimestamping;

package/typings/record/observers/canvas/canvas.d.ts

@@ -1,2 +1,2 @@
-import { blockClass, IWindow, listenerHandler } from '../../../types';
+import type { blockClass, IWindow, listenerHandler } from '../../../types';
 export default function initCanvasContextObserver(win: IWindow, blockClass: blockClass): listenerHandler;

package/typings/record/observers/canvas/serialize-args.d.ts

@@ -1,6 +1,6 @@
-import { IWindow, SerializedWebGlArg } from '../../../types';
-export declare function variableListFor(ctx: WebGLRenderingContext | WebGL2RenderingContext, ctor: string): any[];
-export declare const saveWebGLVar: (value: any, win: IWindow, ctx: WebGL2RenderingContext | WebGLRenderingContext) => number | void;
-export declare function serializeArg(value: any, win: IWindow, ctx: WebGL2RenderingContext | WebGLRenderingContext): SerializedWebGlArg;
-export declare const serializeArgs: (args: Array<any>, win: IWindow, ctx: WebGLRenderingContext | WebGL2RenderingContext) => SerializedWebGlArg[];
+import type { IWindow, CanvasArg } from '../../../types';
+export declare function variableListFor(ctx: RenderingContext, ctor: string): any[];
+export declare const saveWebGLVar: (value: any, win: IWindow, ctx: RenderingContext) => number | void;
+export declare function serializeArg(value: any, win: IWindow, ctx: RenderingContext): CanvasArg;
+export declare const serializeArgs: (args: Array<any>, win: IWindow, ctx: RenderingContext) => CanvasArg[];
 export declare const isInstanceOfWebGLObject: (value: any, win: IWindow) => value is WebGLTexture | WebGLShader | WebGLBuffer | WebGLVertexArrayObject | WebGLProgram | WebGLActiveInfo | WebGLUniformLocation | WebGLFramebuffer | WebGLRenderbuffer | WebGLShaderPrecisionFormat;

package/typings/record/observers/canvas/webgl.d.ts

@@ -1,2 +1,3 @@
-import { blockClass, canvasManagerMutationCallback, IWindow, listenerHandler, Mirror } from '../../../types';
+import type { Mirror } from '@highlight-run/rrweb-snapshot';
+import { blockClass, canvasManagerMutationCallback, IWindow, listenerHandler } from '../../../types';
 export default function initCanvasWebGLMutationObserver(cb: canvasManagerMutationCallback, win: IWindow, blockClass: blockClass, mirror: Mirror): listenerHandler;

package/typings/record/shadow-dom-manager.d.ts

@@ -1,4 +1,5 @@
-import { mutationCallBack, Mirror, scrollCallback, MutationBufferParam, SamplingStrategy } from '../types';
+import type { mutationCallBack, scrollCallback, MutationBufferParam, SamplingStrategy } from '../types';
+import type { Mirror } from '@highlight-run/rrweb-snapshot';
 declare type BypassOptions = Omit<MutationBufferParam, 'doc' | 'mutationCb' | 'mirror' | 'shadowDomManager'> & {
     sampling: SamplingStrategy;
 };

package/typings/record/stylesheet-manager.d.ts

@@ -0,0 +1,12 @@
+import type { Mirror, serializedNodeWithId } from '@highlight-run/rrweb-snapshot';
+import type { mutationCallBack } from '../types';
+export declare class StylesheetManager {
+    private trackedStylesheets;
+    private mutationCb;
+    constructor(options: {
+        mutationCb: mutationCallBack;
+    });
+    addStylesheet(linkEl: HTMLLinkElement): void;
+    private trackStylesheet;
+    attachStylesheet(linkEl: HTMLLinkElement, childSn: serializedNodeWithId, mirror: Mirror): void;
+}

package/typings/record/workers/image-bitmap-data-url-worker.d.ts

@@ -0,0 +1,5 @@
+import type { ImageBitmapDataURLWorkerParams, ImageBitmapDataURLWorkerResponse } from '../../types';
+export interface ImageBitmapDataURLRequestWorker {
+    postMessage: (message: ImageBitmapDataURLWorkerParams, transfer?: [ImageBitmap]) => void;
+    onmessage: (message: MessageEvent<ImageBitmapDataURLWorkerResponse>) => void;
+}

package/typings/replay/canvas/2d.d.ts

@@ -1,9 +1,9 @@
-import { Replayer } from '../';
-import { canvasMutationCommand } from '../../types';
+import type { Replayer } from '../';
+import type { canvasMutationCommand } from '../../types';
 export default function canvasMutation({ event, mutation, target, imageMap, errorHandler, }: {
     event: Parameters<Replayer['applyIncremental']>[0];
     mutation: canvasMutationCommand;
     target: HTMLCanvasElement;
     imageMap: Replayer['imageMap'];
     errorHandler: Replayer['warnCanvasMutationFailed'];
-}): void;
+}): Promise<void>;

package/typings/replay/canvas/deserialize-args.d.ts

@@ -0,0 +1,7 @@
+import type { Replayer } from '../';
+import type { CanvasArg, SerializedCanvasArg } from '../../types';
+export declare function variableListFor(ctx: CanvasRenderingContext2D | WebGLRenderingContext | WebGL2RenderingContext, ctor: string): any[];
+export declare function isSerializedArg(arg: unknown): arg is SerializedCanvasArg;
+export declare function deserializeArg(imageMap: Replayer['imageMap'], ctx: CanvasRenderingContext2D | WebGLRenderingContext | WebGL2RenderingContext | null, preload?: {
+    isUnchanged: boolean;
+}): (arg: CanvasArg) => Promise<any>;

package/typings/replay/canvas/index.d.ts

@@ -1,9 +1,10 @@
-import { Replayer } from '..';
+import type { Replayer } from '..';
 import { canvasMutationData } from '../../types';
-export default function canvasMutation({ event, mutation, target, imageMap, errorHandler, }: {
+export default function canvasMutation({ event, mutation, target, imageMap, canvasEventMap, errorHandler, }: {
     event: Parameters<Replayer['applyIncremental']>[0];
     mutation: canvasMutationData;
     target: HTMLCanvasElement;
     imageMap: Replayer['imageMap'];
+    canvasEventMap: Replayer['canvasEventMap'];
     errorHandler: Replayer['warnCanvasMutationFailed'];
-}): void;
+}): Promise<void>;

package/typings/replay/canvas/webgl.d.ts

@@ -1,11 +1,9 @@
-import { Replayer } from '../';
-import { CanvasContext, canvasMutationCommand, SerializedWebGlArg } from '../../types';
-export declare function variableListFor(ctx: WebGLRenderingContext | WebGL2RenderingContext, ctor: string): any[];
-export declare function deserializeArg(imageMap: Replayer['imageMap'], ctx: WebGLRenderingContext | WebGL2RenderingContext): (arg: SerializedWebGlArg) => any;
+import type { Replayer } from '../';
+import { CanvasContext, canvasMutationCommand } from '../../types';
 export default function webglMutation({ mutation, target, type, imageMap, errorHandler, }: {
     mutation: canvasMutationCommand;
     target: HTMLCanvasElement;
     type: CanvasContext;
     imageMap: Replayer['imageMap'];
     errorHandler: Replayer['warnCanvasMutationFailed'];
-}): void;
+}): Promise<void>;

package/typings/replay/index.d.ts

@@ -1,6 +1,8 @@
+import { Mirror } from '@highlight-run/rrweb-snapshot';
+import { RRDocument } from '@highlight-run/rrdom/es/virtual-dom';
 import { Timer } from './timer';
 import { createPlayerService, createSpeedService } from './machine';
-import { eventWithTime, playerConfig, playerMetaData, Handler, Mirror, SessionInterval } from '../types';
+import { eventWithTime, playerConfig, playerMetaData, Handler, SessionInterval } from '../types';
 import './styles/style.css';
 export declare class Replayer {
     wrapper: HTMLDivElement;
@@ -9,6 +11,8 @@ export declare class Replayer {
     speedService: ReturnType<typeof createSpeedService>;
     get timer(): Timer;
     config: playerConfig;
+    usingVirtualDom: boolean;
+    virtualDom: RRDocument;
     private mouse;
     private mouseTail;
     private tailPositions;
@@ -17,12 +21,9 @@ export declare class Replayer {
     private activityIntervals;
     private inactiveEndTimestamp;
     private legacy_missingNodeRetryMap;
-    private treeIndex;
-    private fragmentParentMap;
-    private elementStateMap;
-    private virtualStyleRulesMap;
     private cache;
     private imageMap;
+    private canvasEventMap;
     private mirror;
     private firstFullSnapshot;
     private newDocumentQueue;
@@ -60,21 +61,17 @@ export declare class Replayer {
     private getImageArgs;
     private preloadAllImages;
     private preloadImages;
+    private deserializeAndPreloadCanvasEvents;
     private applyIncremental;
     private applyMutation;
     private applyScroll;
     private applyInput;
-    private applyText;
     private legacy_resolveMissingNode;
     private moveAndHover;
     private drawMouseTail;
     private hoverElements;
     private isUserInteraction;
     private backToNormal;
-    private restoreRealParent;
-    private storeState;
-    private restoreState;
-    private restoreNodeSheet;
     private warnNodeNotFound;
     private warnCanvasMutationFailed;
     private debugNodeNotFound;

package/typings/types.d.ts

@@ -1,9 +1,11 @@
-import { serializedNodeWithId, idNodeMap, INode, MaskInputOptions, SlimDOMOptions, MaskInputFn, MaskTextFn } from '@highlight-run/rrweb-snapshot';
-import { PackFn, UnpackFn } from './packer/base';
-import { IframeManager } from './record/iframe-manager';
-import { ShadowDomManager } from './record/shadow-dom-manager';
+import type { serializedNodeWithId, Mirror, INode, MaskInputOptions, SlimDOMOptions, MaskInputFn, MaskTextFn } from '@highlight-run/rrweb-snapshot';
+import type { PackFn, UnpackFn } from './packer/base';
+import type { IframeManager } from './record/iframe-manager';
+import type { ShadowDomManager } from './record/shadow-dom-manager';
 import type { Replayer } from './replay';
-import { CanvasManager } from './record/observers/canvas/canvas-manager';
+import type { RRNode } from '@highlight-run/rrdom/es/virtual-dom';
+import type { CanvasManager } from './record/observers/canvas/canvas-manager';
+import type { StylesheetManager } from './record/stylesheet-manager';
 export declare enum EventType {
     DomContentLoaded = 0,
     Load = 1,
@@ -121,6 +123,10 @@ export declare type eventWithTime = event & {
     timestamp: number;
     delay?: number;
 };
+export declare type canvasEventWithTime = eventWithTime & {
+    type: EventType.IncrementalSnapshot;
+    data: canvasMutationData;
+};
 export declare type blockClass = string | RegExp;
 export declare type maskTextClass = string | RegExp;
 export declare type SamplingStrategy = Partial<{
@@ -130,6 +136,7 @@ export declare type SamplingStrategy = Partial<{
     scroll: number;
     media: number;
     input: 'all' | 'last';
+    canvas: 'all' | number;
 }>;
 export declare type RecordPlugin<TOptions = unknown> = {
     name: string;
@@ -194,6 +201,7 @@ export declare type observerParam = {
     doc: Document;
     mirror: Mirror;
     iframeManager: IframeManager;
+    stylesheetManager: StylesheetManager;
     shadowDomManager: ShadowDomManager;
     canvasManager: CanvasManager;
     enableStrictPrivacy: boolean;
@@ -203,7 +211,7 @@ export declare type observerParam = {
         options: unknown;
     }>;
 };
-export declare type MutationBufferParam = Pick<observerParam, 'mutationCb' | 'blockClass' | 'blockSelector' | 'maskTextClass' | 'maskTextSelector' | 'inlineStylesheet' | 'maskInputOptions' | 'maskTextFn' | 'maskInputFn' | 'recordCanvas' | 'inlineImages' | 'slimDOMOptions' | 'doc' | 'mirror' | 'iframeManager' | 'shadowDomManager' | 'canvasManager' | 'enableStrictPrivacy'>;
+export declare type MutationBufferParam = Pick<observerParam, 'mutationCb' | 'blockClass' | 'blockSelector' | 'maskTextClass' | 'maskTextSelector' | 'inlineStylesheet' | 'maskInputOptions' | 'maskTextFn' | 'maskInputFn' | 'recordCanvas' | 'inlineImages' | 'slimDOMOptions' | 'doc' | 'mirror' | 'iframeManager' | 'stylesheetManager' | 'shadowDomManager' | 'canvasManager' | 'enableStrictPrivacy'>;
 export declare type hooksParam = {
     mutation?: mutationCallBack;
     mousemove?: mousemoveCallBack;
@@ -299,19 +307,24 @@ export declare enum CanvasContext {
     WebGL = 1,
     WebGL2 = 2
 }
-export declare type SerializedWebGlArg = {
+export declare type SerializedCanvasArg = {
     rr_type: 'ArrayBuffer';
     base64: string;
+} | {
+    rr_type: 'Blob';
+    data: Array<CanvasArg>;
+    type?: string;
 } | {
     rr_type: string;
     src: string;
 } | {
     rr_type: string;
-    args: SerializedWebGlArg[];
+    args: Array<CanvasArg>;
 } | {
     rr_type: string;
     index: number;
-} | string | number | boolean | null | SerializedWebGlArg[];
+};
+export declare type CanvasArg = SerializedCanvasArg | string | number | boolean | null | CanvasArg[];
 declare type mouseInteractionParam = {
     type: MouseInteractions;
     id: number;
@@ -369,6 +382,21 @@ export declare type canvasMutationWithType = {
 } & canvasMutationCommand;
 export declare type canvasMutationCallback = (p: canvasMutationParam) => void;
 export declare type canvasManagerMutationCallback = (target: HTMLCanvasElement, p: canvasMutationWithType) => void;
+export declare type ImageBitmapDataURLWorkerParams = {
+    id: number;
+    bitmap: ImageBitmap;
+    width: number;
+    height: number;
+};
+export declare type ImageBitmapDataURLWorkerResponse = {
+    id: number;
+} | {
+    id: number;
+    type: string;
+    base64: string;
+    width: number;
+    height: number;
+};
 export declare type fontParam = {
     family: string;
     fontSource: string;
@@ -409,11 +437,13 @@ export declare type DocumentDimension = {
     relativeScale: number;
     absoluteScale: number;
 };
-export declare type Mirror = {
-    map: idNodeMap;
-    getId: (n: INode) => number;
+export declare type DeprecatedMirror = {
+    map: {
+        [key: number]: INode;
+    };
+    getId: (n: Node) => number;
     getNode: (id: number) => INode | null;
-    removeNodeFromMap: (n: INode) => void;
+    removeNodeFromMap: (n: Node) => void;
     has: (id: number) => boolean;
     reset: () => void;
 };
@@ -449,6 +479,7 @@ export declare type playerConfig = {
         strokeStyle?: string;
     };
     unpackFn?: UnpackFn;
+    useVirtualDom: boolean;
     plugins?: ReplayPlugin[];
     inactiveThreshold: number;
     inactiveSkipTime: number;
@@ -459,7 +490,7 @@ export declare type playerMetaData = {
     totalTime: number;
 };
 export declare type missingNode = {
-    node: Node;
+    node: Node | RRNode;
     mutation: addedNodeMutation;
 };
 export declare type missingNodeMap = {
@@ -494,9 +525,6 @@ export declare enum ReplayerEvents {
     StateChange = "state-change",
     PlayBack = "play-back"
 }
-export declare type ElementState = {
-    scroll?: [number, number];
-};
 export declare type KeepIframeSrcFn = (src: string) => boolean;
 declare global {
     interface Window {

package/typings/utils.d.ts

@@ -1,8 +1,8 @@
-import { Mirror, throttleOptions, listenerHandler, hookResetter, blockClass, addedNodeMutation, removedNodeMutation, textMutation, attributeMutation, mutationData, scrollData, inputData, DocumentDimension, IWindow } from './types';
-import { INode, serializedNodeWithId } from '@highlight-run/rrweb-snapshot';
+import type { throttleOptions, listenerHandler, hookResetter, blockClass, addedNodeMutation, DocumentDimension, IWindow, DeprecatedMirror, textMutation } from './types';
+import type { IMirror, Mirror } from '@highlight-run/rrweb-snapshot';
+import type { RRNode, RRIFrameElement } from '@highlight-run/rrdom/es/virtual-dom';
 export declare function on(type: string, fn: EventListenerOrEventListenerObject, target?: Document | IWindow): listenerHandler;
-export declare function createMirror(): Mirror;
-export declare let _mirror: Mirror;
+export declare let _mirror: DeprecatedMirror;
 export declare function throttle<T>(func: (arg: T) => void, wait: number, options?: throttleOptions): (arg: T) => void;
 export declare function hookSetter<T>(target: T, key: string | number | symbol, d: PropertyDescriptor, isRevoked?: boolean, win?: Window & typeof globalThis): hookResetter;
 export declare function patch(source: {
@@ -12,42 +12,11 @@ export declare function getWindowHeight(): number;
 export declare function getWindowWidth(): number;
 export declare const isCanvasNode: (node: Node | null) => boolean;
 export declare function isBlocked(node: Node | null, blockClass: blockClass): boolean;
-export declare function isIgnored(n: Node | INode): boolean;
-export declare function isAncestorRemoved(target: INode, mirror: Mirror): boolean;
+export declare function isSerialized(n: Node, mirror: Mirror): boolean;
+export declare function isIgnored(n: Node, mirror: Mirror): boolean;
+export declare function isAncestorRemoved(target: Node, mirror: Mirror): boolean;
 export declare function isTouchEvent(event: MouseEvent | TouchEvent): event is TouchEvent;
 export declare function polyfill(win?: Window & typeof globalThis): void;
-export declare type TreeNode = {
-    id: number;
-    mutation: addedNodeMutation;
-    parent?: TreeNode;
-    children: Record<number, TreeNode>;
-    texts: textMutation[];
-    attributes: attributeMutation[];
-};
-export declare class TreeIndex {
-    tree: Record<number, TreeNode>;
-    private removeNodeMutations;
-    private textMutations;
-    private attributeMutations;
-    private indexes;
-    private removeIdSet;
-    private scrollMap;
-    private inputMap;
-    constructor();
-    add(mutation: addedNodeMutation): void;
-    remove(mutation: removedNodeMutation, mirror: Mirror): void;
-    text(mutation: textMutation): void;
-    attribute(mutation: attributeMutation): void;
-    scroll(d: scrollData): void;
-    input(d: inputData): void;
-    flush(): {
-        mutationData: mutationData;
-        scrollMap: TreeIndex['scrollMap'];
-        inputMap: TreeIndex['inputMap'];
-    };
-    private reset;
-    idRemoved(id: number): boolean;
-}
 declare type ResolveTree = {
     value: addedNodeMutation;
     children: ResolveTree[];
@@ -55,16 +24,20 @@ declare type ResolveTree = {
 };
 export declare function queueToResolveTrees(queue: addedNodeMutation[]): ResolveTree[];
 export declare function iterateResolveTree(tree: ResolveTree, cb: (mutation: addedNodeMutation) => unknown): void;
-declare type HTMLIFrameINode = HTMLIFrameElement & {
-    __sn: serializedNodeWithId;
-};
 export declare type AppendedIframe = {
     mutationInQueue: addedNodeMutation;
-    builtNode: HTMLIFrameINode;
+    builtNode: HTMLIFrameElement | RRIFrameElement;
 };
-export declare function isIframeINode(node: INode | ShadowRoot): node is HTMLIFrameINode;
+export declare function isSerializedIframe<TNode extends Node | RRNode>(n: TNode, mirror: IMirror<TNode>): boolean;
+export declare function isSerializedStylesheet<TNode extends Node | RRNode>(n: TNode, mirror: IMirror<TNode>): boolean;
 export declare function getBaseDimension(node: Node, rootIframe: Node): DocumentDimension;
-export declare function hasShadowRoot<T extends Node>(n: T): n is T & {
+export declare function hasShadowRoot<T extends Node | RRNode>(n: T): n is T & {
     shadowRoot: ShadowRoot;
 };
+export declare function getNestedRule(rules: CSSRuleList, position: number[]): CSSGroupingRule;
+export declare function getPositionsAndIndex(nestedIndex: number[]): {
+    positions: number[];
+    index: number | undefined;
+};
+export declare function uniqueTextMutations(mutations: textMutation[]): textMutation[];
 export {};

package/dist/replay/rrweb-replay-unpack.min.css

@@ -1,2 +0,0 @@
-.replayer-wrapper{position:relative}.replayer-mouse{position:absolute;width:20px;height:20px;transition:left .05s linear,top .05s linear;background-size:contain;background-position:50%;background-repeat:no-repeat;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjcgNSAxOCAxOCIgaGVpZ2h0PSIzMDAiIHdpZHRoPSIzMDAiPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik04LjIgMjAuOXYtMTZsMTEuNiAxMS42SDEzbC0uNC4xeiIvPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik0xNy4zIDIxLjZsLTMuNiAxLjVMOSAxMmwzLjctMS41eiIvPjxwYXRoIGQ9Ik0xMS4wMyAxNC4yOTNsMS44NDUtLjc3NCAzLjA5NiA3LjM3Ni0xLjg0NC43NzV6Ii8+PHBhdGggZD0iTTkuMiA3LjN2MTEuMmwzLTIuOS40LS4xaDQuOHoiLz48L3N2Zz4=");border-color:transparent}.replayer-mouse:after{background:transparent}.replayer-mouse.active:after{animation:click .2s ease-in-out 1}.replayer-mouse.touch-device{background-image:none;width:70px;height:70px;border-radius:100%;margin-left:-37px;margin-top:-37px;border:4px solid rgba(73,80,246,0);transition:left 0s linear,top 0s linear,border-color .2s ease-in-out}.replayer-mouse.touch-device.touch-active{border-color:#4950f6;transition:left .25s linear,top .25s linear,border-color .2s ease-in-out}.replayer-mouse.touch-device:after{opacity:0}.replayer-mouse.touch-device.active:after{animation:touch-click .2s ease-in-out 1}.replayer-mouse-tail{position:absolute;pointer-events:none}@keyframes click{0%{opacity:.3;width:20px;height:20px;background:transparent}75%{width:24px;height:24px;opacity:.8;background:#dc2626}to{background:transparent}}@keyframes touch-click{0%{opacity:0;width:20px;height:20px}50%{opacity:.5;width:10px;height:10px}}
-/*# sourceMappingURL=rrweb-replay-unpack.min.css.map */

package/dist/replay/rrweb-replay-unpack.min.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["style.css"],"names":[],"mappings":"AAAA,kBACE,iBACF,CACA,gBACE,iBAAkB,CAClB,UAAW,CACX,WAAY,CACZ,2CAA+C,CAC/C,uBAAwB,CACxB,uBAAkC,CAClC,2BAA4B,CAC5B,0cAAuzB,CACvzB,wBACF,CAEA,sBACE,sBACF,CAEA,6BACE,iCACF,CACA,6BACE,qBAAsB,CACtB,UAAW,CACX,WAAY,CAGZ,kBAAmB,CACnB,iBAAkB,CAClB,gBAAiB,CACjB,kCAAkC,CAClC,oEACF,CACA,0CACE,oBAAkC,CAClC,wEACF,CACA,mCACE,SACF,CACA,0CACE,uCACF,CACA,qBACE,iBAAkB,CAClB,mBACF,CAEA,iBACE,GACE,UAAY,CACZ,UAAW,CACX,WAAY,CACZ,sBACF,CACA,IACE,UAAW,CACX,WAAY,CACZ,UAAY,CACZ,kBACF,CACA,GACE,sBACF,CACF,CAEA,uBACE,GACE,SAAU,CACV,UAAW,CACX,WACF,CACA,IACE,UAAY,CACZ,UAAW,CACX,WACF,CACF","file":"rrweb-replay-unpack.min.css","sourcesContent":[".replayer-wrapper {\n  position: relative;\n}\n.replayer-mouse {\n  position: absolute;\n  width: 20px;\n  height: 20px;\n  transition: left 0.05s linear, top 0.05s linear;\n  background-size: contain;\n  background-position: center center;\n  background-repeat: no-repeat;\n  background-image: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iNyA1IDE4IDE4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyOCAyOCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgaGVpZ2h0PSIzMDBweCIgd2lkdGg9IjMwMHB4Ij4NCjxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iOC4yLDIwLjkgOC4yLDQuOSAxOS44LDE2LjUgMTMsMTYuNSAxMi42LDE2LjYgIi8+DQo8cG9seWdvbiBmaWxsPSIjRkZGRkZGIiBwb2ludHM9IjE3LjMsMjEuNiAxMy43LDIzLjEgOSwxMiAxMi43LDEwLjUgIi8+DQo8cmVjdCB4PSIxMi41IiB5PSIxMy42IiB0cmFuc2Zvcm09Im1hdHJpeCgwLjkyMjEgLTAuMzg3MSAwLjM4NzEgMC45MjIxIC01Ljc2MDUgNi41OTA5KSIgd2lkdGg9IjIiIGhlaWdodD0iOCIvPg0KPHBvbHlnb24gcG9pbnRzPSI5LjIsNy4zIDkuMiwxOC41IDEyLjIsMTUuNiAxMi42LDE1LjUgMTcuNCwxNS41ICIvPg0KPC9zdmc+DQo=');\n  border-color: transparent;  /* otherwise we transition from black when .touch-device class is added */\n}\n\n.replayer-mouse::after {\n  background: transparent;\n}\n\n.replayer-mouse.active::after {\n  animation: click 0.2s ease-in-out 1;\n}\n.replayer-mouse.touch-device {\n  background-image: none;  /* there's no passive cursor on touch-only screens */\n  width: 70px;\n  height: 70px;\n  border-width: 4px;\n  border-style: solid;\n  border-radius: 100%;\n  margin-left: -37px;\n  margin-top: -37px;\n  border-color: rgba(73, 80, 246, 0);\n  transition: left 0s linear, top 0s linear, border-color 0.2s ease-in-out;\n}\n.replayer-mouse.touch-device.touch-active {\n  border-color: rgba(73, 80, 246, 1);\n  transition: left 0.25s linear, top 0.25s linear, border-color 0.2s ease-in-out;\n}\n.replayer-mouse.touch-device::after {\n  opacity: 0; /* there's no passive cursor on touch-only screens */\n}\n.replayer-mouse.touch-device.active::after {\n  animation: touch-click 0.2s ease-in-out 1;\n}\n.replayer-mouse-tail {\n  position: absolute;\n  pointer-events: none;\n}\n\n@keyframes click {\n  0% {\n    opacity: 0.3;\n    width: 20px;\n    height: 20px;\n    background: transparent;\n  }\n  75% {\n    width: 24px;\n    height: 24px;\n    opacity: 0.8;\n    background: #dc2626;\n  }\n  100% {\n    background: transparent;\n  }\n}\n\n@keyframes touch-click {\n  0% {\n    opacity: 0;\n    width: 20px;\n    height: 20px;\n  }\n  50% {\n    opacity: 0.5;\n    width: 10px;\n    height: 10px;\n  }\n}\n"]}

package/dist/replay/rrweb-replay.min.css

@@ -1,2 +0,0 @@
-.replayer-wrapper{position:relative}.replayer-mouse{position:absolute;width:20px;height:20px;transition:left .05s linear,top .05s linear;background-size:contain;background-position:50%;background-repeat:no-repeat;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjcgNSAxOCAxOCIgaGVpZ2h0PSIzMDAiIHdpZHRoPSIzMDAiPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik04LjIgMjAuOXYtMTZsMTEuNiAxMS42SDEzbC0uNC4xeiIvPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik0xNy4zIDIxLjZsLTMuNiAxLjVMOSAxMmwzLjctMS41eiIvPjxwYXRoIGQ9Ik0xMS4wMyAxNC4yOTNsMS44NDUtLjc3NCAzLjA5NiA3LjM3Ni0xLjg0NC43NzV6Ii8+PHBhdGggZD0iTTkuMiA3LjN2MTEuMmwzLTIuOS40LS4xaDQuOHoiLz48L3N2Zz4=");border-color:transparent}.replayer-mouse:after{background:transparent}.replayer-mouse.active:after{animation:click .2s ease-in-out 1}.replayer-mouse.touch-device{background-image:none;width:70px;height:70px;border-radius:100%;margin-left:-37px;margin-top:-37px;border:4px solid rgba(73,80,246,0);transition:left 0s linear,top 0s linear,border-color .2s ease-in-out}.replayer-mouse.touch-device.touch-active{border-color:#4950f6;transition:left .25s linear,top .25s linear,border-color .2s ease-in-out}.replayer-mouse.touch-device:after{opacity:0}.replayer-mouse.touch-device.active:after{animation:touch-click .2s ease-in-out 1}.replayer-mouse-tail{position:absolute;pointer-events:none}@keyframes click{0%{opacity:.3;width:20px;height:20px;background:transparent}75%{width:24px;height:24px;opacity:.8;background:#dc2626}to{background:transparent}}@keyframes touch-click{0%{opacity:0;width:20px;height:20px}50%{opacity:.5;width:10px;height:10px}}
-/*# sourceMappingURL=rrweb-replay.min.css.map */

package/dist/replay/rrweb-replay.min.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["style.css"],"names":[],"mappings":"AAAA,kBACE,iBACF,CACA,gBACE,iBAAkB,CAClB,UAAW,CACX,WAAY,CACZ,2CAA+C,CAC/C,uBAAwB,CACxB,uBAAkC,CAClC,2BAA4B,CAC5B,0cAAuzB,CACvzB,wBACF,CAEA,sBACE,sBACF,CAEA,6BACE,iCACF,CACA,6BACE,qBAAsB,CACtB,UAAW,CACX,WAAY,CAGZ,kBAAmB,CACnB,iBAAkB,CAClB,gBAAiB,CACjB,kCAAkC,CAClC,oEACF,CACA,0CACE,oBAAkC,CAClC,wEACF,CACA,mCACE,SACF,CACA,0CACE,uCACF,CACA,qBACE,iBAAkB,CAClB,mBACF,CAEA,iBACE,GACE,UAAY,CACZ,UAAW,CACX,WAAY,CACZ,sBACF,CACA,IACE,UAAW,CACX,WAAY,CACZ,UAAY,CACZ,kBACF,CACA,GACE,sBACF,CACF,CAEA,uBACE,GACE,SAAU,CACV,UAAW,CACX,WACF,CACA,IACE,UAAY,CACZ,UAAW,CACX,WACF,CACF","file":"rrweb-replay.min.css","sourcesContent":[".replayer-wrapper {\n  position: relative;\n}\n.replayer-mouse {\n  position: absolute;\n  width: 20px;\n  height: 20px;\n  transition: left 0.05s linear, top 0.05s linear;\n  background-size: contain;\n  background-position: center center;\n  background-repeat: no-repeat;\n  background-image: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iNyA1IDE4IDE4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyOCAyOCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgaGVpZ2h0PSIzMDBweCIgd2lkdGg9IjMwMHB4Ij4NCjxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iOC4yLDIwLjkgOC4yLDQuOSAxOS44LDE2LjUgMTMsMTYuNSAxMi42LDE2LjYgIi8+DQo8cG9seWdvbiBmaWxsPSIjRkZGRkZGIiBwb2ludHM9IjE3LjMsMjEuNiAxMy43LDIzLjEgOSwxMiAxMi43LDEwLjUgIi8+DQo8cmVjdCB4PSIxMi41IiB5PSIxMy42IiB0cmFuc2Zvcm09Im1hdHJpeCgwLjkyMjEgLTAuMzg3MSAwLjM4NzEgMC45MjIxIC01Ljc2MDUgNi41OTA5KSIgd2lkdGg9IjIiIGhlaWdodD0iOCIvPg0KPHBvbHlnb24gcG9pbnRzPSI5LjIsNy4zIDkuMiwxOC41IDEyLjIsMTUuNiAxMi42LDE1LjUgMTcuNCwxNS41ICIvPg0KPC9zdmc+DQo=');\n  border-color: transparent;  /* otherwise we transition from black when .touch-device class is added */\n}\n\n.replayer-mouse::after {\n  background: transparent;\n}\n\n.replayer-mouse.active::after {\n  animation: click 0.2s ease-in-out 1;\n}\n.replayer-mouse.touch-device {\n  background-image: none;  /* there's no passive cursor on touch-only screens */\n  width: 70px;\n  height: 70px;\n  border-width: 4px;\n  border-style: solid;\n  border-radius: 100%;\n  margin-left: -37px;\n  margin-top: -37px;\n  border-color: rgba(73, 80, 246, 0);\n  transition: left 0s linear, top 0s linear, border-color 0.2s ease-in-out;\n}\n.replayer-mouse.touch-device.touch-active {\n  border-color: rgba(73, 80, 246, 1);\n  transition: left 0.25s linear, top 0.25s linear, border-color 0.2s ease-in-out;\n}\n.replayer-mouse.touch-device::after {\n  opacity: 0; /* there's no passive cursor on touch-only screens */\n}\n.replayer-mouse.touch-device.active::after {\n  animation: touch-click 0.2s ease-in-out 1;\n}\n.replayer-mouse-tail {\n  position: absolute;\n  pointer-events: none;\n}\n\n@keyframes click {\n  0% {\n    opacity: 0.3;\n    width: 20px;\n    height: 20px;\n    background: transparent;\n  }\n  75% {\n    width: 24px;\n    height: 24px;\n    opacity: 0.8;\n    background: #dc2626;\n  }\n  100% {\n    background: transparent;\n  }\n}\n\n@keyframes touch-click {\n  0% {\n    opacity: 0;\n    width: 20px;\n    height: 20px;\n  }\n  50% {\n    opacity: 0.5;\n    width: 10px;\n    height: 10px;\n  }\n}\n"]}

package/dist/rrweb-all.min.css

@@ -1,2 +0,0 @@
-.replayer-wrapper{position:relative}.replayer-mouse{position:absolute;width:20px;height:20px;transition:left .05s linear,top .05s linear;background-size:contain;background-position:50%;background-repeat:no-repeat;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjcgNSAxOCAxOCIgaGVpZ2h0PSIzMDAiIHdpZHRoPSIzMDAiPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik04LjIgMjAuOXYtMTZsMTEuNiAxMS42SDEzbC0uNC4xeiIvPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik0xNy4zIDIxLjZsLTMuNiAxLjVMOSAxMmwzLjctMS41eiIvPjxwYXRoIGQ9Ik0xMS4wMyAxNC4yOTNsMS44NDUtLjc3NCAzLjA5NiA3LjM3Ni0xLjg0NC43NzV6Ii8+PHBhdGggZD0iTTkuMiA3LjN2MTEuMmwzLTIuOS40LS4xaDQuOHoiLz48L3N2Zz4=");border-color:transparent}.replayer-mouse:after{background:transparent}.replayer-mouse.active:after{animation:click .2s ease-in-out 1}.replayer-mouse.touch-device{background-image:none;width:70px;height:70px;border-radius:100%;margin-left:-37px;margin-top:-37px;border:4px solid rgba(73,80,246,0);transition:left 0s linear,top 0s linear,border-color .2s ease-in-out}.replayer-mouse.touch-device.touch-active{border-color:#4950f6;transition:left .25s linear,top .25s linear,border-color .2s ease-in-out}.replayer-mouse.touch-device:after{opacity:0}.replayer-mouse.touch-device.active:after{animation:touch-click .2s ease-in-out 1}.replayer-mouse-tail{position:absolute;pointer-events:none}@keyframes click{0%{opacity:.3;width:20px;height:20px;background:transparent}75%{width:24px;height:24px;opacity:.8;background:#dc2626}to{background:transparent}}@keyframes touch-click{0%{opacity:0;width:20px;height:20px}50%{opacity:.5;width:10px;height:10px}}
-/*# sourceMappingURL=rrweb-all.min.css.map */

package/dist/rrweb-all.min.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["style.css"],"names":[],"mappings":"AAAA,kBACE,iBACF,CACA,gBACE,iBAAkB,CAClB,UAAW,CACX,WAAY,CACZ,2CAA+C,CAC/C,uBAAwB,CACxB,uBAAkC,CAClC,2BAA4B,CAC5B,0cAAuzB,CACvzB,wBACF,CAEA,sBACE,sBACF,CAEA,6BACE,iCACF,CACA,6BACE,qBAAsB,CACtB,UAAW,CACX,WAAY,CAGZ,kBAAmB,CACnB,iBAAkB,CAClB,gBAAiB,CACjB,kCAAkC,CAClC,oEACF,CACA,0CACE,oBAAkC,CAClC,wEACF,CACA,mCACE,SACF,CACA,0CACE,uCACF,CACA,qBACE,iBAAkB,CAClB,mBACF,CAEA,iBACE,GACE,UAAY,CACZ,UAAW,CACX,WAAY,CACZ,sBACF,CACA,IACE,UAAW,CACX,WAAY,CACZ,UAAY,CACZ,kBACF,CACA,GACE,sBACF,CACF,CAEA,uBACE,GACE,SAAU,CACV,UAAW,CACX,WACF,CACA,IACE,UAAY,CACZ,UAAW,CACX,WACF,CACF","file":"rrweb-all.min.css","sourcesContent":[".replayer-wrapper {\n  position: relative;\n}\n.replayer-mouse {\n  position: absolute;\n  width: 20px;\n  height: 20px;\n  transition: left 0.05s linear, top 0.05s linear;\n  background-size: contain;\n  background-position: center center;\n  background-repeat: no-repeat;\n  background-image: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iNyA1IDE4IDE4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyOCAyOCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgaGVpZ2h0PSIzMDBweCIgd2lkdGg9IjMwMHB4Ij4NCjxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iOC4yLDIwLjkgOC4yLDQuOSAxOS44LDE2LjUgMTMsMTYuNSAxMi42LDE2LjYgIi8+DQo8cG9seWdvbiBmaWxsPSIjRkZGRkZGIiBwb2ludHM9IjE3LjMsMjEuNiAxMy43LDIzLjEgOSwxMiAxMi43LDEwLjUgIi8+DQo8cmVjdCB4PSIxMi41IiB5PSIxMy42IiB0cmFuc2Zvcm09Im1hdHJpeCgwLjkyMjEgLTAuMzg3MSAwLjM4NzEgMC45MjIxIC01Ljc2MDUgNi41OTA5KSIgd2lkdGg9IjIiIGhlaWdodD0iOCIvPg0KPHBvbHlnb24gcG9pbnRzPSI5LjIsNy4zIDkuMiwxOC41IDEyLjIsMTUuNiAxMi42LDE1LjUgMTcuNCwxNS41ICIvPg0KPC9zdmc+DQo=');\n  border-color: transparent;  /* otherwise we transition from black when .touch-device class is added */\n}\n\n.replayer-mouse::after {\n  background: transparent;\n}\n\n.replayer-mouse.active::after {\n  animation: click 0.2s ease-in-out 1;\n}\n.replayer-mouse.touch-device {\n  background-image: none;  /* there's no passive cursor on touch-only screens */\n  width: 70px;\n  height: 70px;\n  border-width: 4px;\n  border-style: solid;\n  border-radius: 100%;\n  margin-left: -37px;\n  margin-top: -37px;\n  border-color: rgba(73, 80, 246, 0);\n  transition: left 0s linear, top 0s linear, border-color 0.2s ease-in-out;\n}\n.replayer-mouse.touch-device.touch-active {\n  border-color: rgba(73, 80, 246, 1);\n  transition: left 0.25s linear, top 0.25s linear, border-color 0.2s ease-in-out;\n}\n.replayer-mouse.touch-device::after {\n  opacity: 0; /* there's no passive cursor on touch-only screens */\n}\n.replayer-mouse.touch-device.active::after {\n  animation: touch-click 0.2s ease-in-out 1;\n}\n.replayer-mouse-tail {\n  position: absolute;\n  pointer-events: none;\n}\n\n@keyframes click {\n  0% {\n    opacity: 0.3;\n    width: 20px;\n    height: 20px;\n    background: transparent;\n  }\n  75% {\n    width: 24px;\n    height: 24px;\n    opacity: 0.8;\n    background: #dc2626;\n  }\n  100% {\n    background: transparent;\n  }\n}\n\n@keyframes touch-click {\n  0% {\n    opacity: 0;\n    width: 20px;\n    height: 20px;\n  }\n  50% {\n    opacity: 0.5;\n    width: 10px;\n    height: 10px;\n  }\n}\n"]}

package/dist/rrweb.min.css

@@ -1,2 +0,0 @@
-.replayer-wrapper{position:relative}.replayer-mouse{position:absolute;width:20px;height:20px;transition:left .05s linear,top .05s linear;background-size:contain;background-position:50%;background-repeat:no-repeat;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjcgNSAxOCAxOCIgaGVpZ2h0PSIzMDAiIHdpZHRoPSIzMDAiPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik04LjIgMjAuOXYtMTZsMTEuNiAxMS42SDEzbC0uNC4xeiIvPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik0xNy4zIDIxLjZsLTMuNiAxLjVMOSAxMmwzLjctMS41eiIvPjxwYXRoIGQ9Ik0xMS4wMyAxNC4yOTNsMS44NDUtLjc3NCAzLjA5NiA3LjM3Ni0xLjg0NC43NzV6Ii8+PHBhdGggZD0iTTkuMiA3LjN2MTEuMmwzLTIuOS40LS4xaDQuOHoiLz48L3N2Zz4=");border-color:transparent}.replayer-mouse:after{background:transparent}.replayer-mouse.active:after{animation:click .2s ease-in-out 1}.replayer-mouse.touch-device{background-image:none;width:70px;height:70px;border-radius:100%;margin-left:-37px;margin-top:-37px;border:4px solid rgba(73,80,246,0);transition:left 0s linear,top 0s linear,border-color .2s ease-in-out}.replayer-mouse.touch-device.touch-active{border-color:#4950f6;transition:left .25s linear,top .25s linear,border-color .2s ease-in-out}.replayer-mouse.touch-device:after{opacity:0}.replayer-mouse.touch-device.active:after{animation:touch-click .2s ease-in-out 1}.replayer-mouse-tail{position:absolute;pointer-events:none}@keyframes click{0%{opacity:.3;width:20px;height:20px;background:transparent}75%{width:24px;height:24px;opacity:.8;background:#dc2626}to{background:transparent}}@keyframes touch-click{0%{opacity:0;width:20px;height:20px}50%{opacity:.5;width:10px;height:10px}}
-/*# sourceMappingURL=rrweb.min.css.map */