@guidelytech/react-native 0.12.0 → 0.13.0

package/dist/index.cjs

@@ -37,8 +37,11 @@ __export(index_exports, {
   InMemoryStickyBucketStore: () => import_flags6.InMemoryStickyBucketStore,
   Messenger: () => Messenger,
   RageClickDetector: () => RageClickDetector,
+  ReplayUploader: () => ReplayUploader,
+  RrwebEvents: () => RrwebEvents,
   SDK_NAME: () => SDK_NAME,
   SDK_VERSION: () => SDK_VERSION,
+  SessionRecorder: () => SessionRecorder,
   TapTracker: () => TapTracker,
   TargetRegistry: () => TargetRegistry,
   createFlagsClient: () => import_flags6.createFlagsClient,
@@ -2492,6 +2495,425 @@ var Messenger = class {
   }
 };
 
+// src/core/replay.ts
+var RrwebEvents = {
+  IMG_ID: 8,
+  TOUCH_START: 7,
+  TOUCH_END: 9,
+  CLICK: 2,
+  CSS: "html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#000}img{display:block;width:100%;height:100%;object-fit:contain}",
+  dataUrl(base64) {
+    return `data:image/jpeg;base64,${base64}`;
+  },
+  meta(timestamp, href, width, height) {
+    return JSON.stringify({ type: 4, data: { href, width, height }, timestamp });
+  },
+  fullSnapshot(timestamp, dataUrl, width, height) {
+    const style = { type: 2, id: 5, tagName: "style", attributes: {}, childNodes: [{ type: 3, id: 6, textContent: RrwebEvents.CSS, isStyle: true }] };
+    const img = { type: 2, id: 8, tagName: "img", attributes: { src: dataUrl, width, height, alt: "" }, childNodes: [] };
+    const html = { type: 2, id: 3, tagName: "html", attributes: {}, childNodes: [{ type: 2, id: 4, tagName: "head", attributes: {}, childNodes: [style] }, { type: 2, id: 7, tagName: "body", attributes: {}, childNodes: [img] }] };
+    const node = { type: 0, id: 1, childNodes: [{ type: 1, id: 2, name: "html", publicId: "", systemId: "" }, html] };
+    return JSON.stringify({ type: 2, data: { node, initialOffset: { left: 0, top: 0 } }, timestamp });
+  },
+  frame(timestamp, dataUrl) {
+    return JSON.stringify({ type: 3, data: { source: 0, texts: [], attributes: [{ id: 8, attributes: { src: dataUrl } }], removes: [], adds: [] }, timestamp });
+  },
+  /** MouseInteraction (source 2): 7 TouchStart, 9 TouchEnd, 2 Click. */
+  interaction(timestamp, type, x, y) {
+    return JSON.stringify({ type: 3, data: { source: 2, type, id: 8, x: round1(x), y: round1(y) }, timestamp });
+  },
+  touchMove(timestamp, x, y) {
+    return JSON.stringify({ type: 3, data: { source: 6, positions: [{ x: round1(x), y: round1(y), id: 8, timeOffset: 0 }] }, timestamp });
+  },
+  custom(timestamp, tag, payload) {
+    return JSON.stringify({ type: 5, data: { tag, payload }, timestamp });
+  }
+};
+var round1 = (v) => Math.round(v * 10) / 10;
+var UPLOAD_TIMEOUT_MS = 3e4;
+var ReplayUploader = class {
+  constructor(opts) {
+    __publicField(this, "opts", opts);
+    __publicField(this, "windowId", randomId(16));
+    __publicField(this, "buffer", null);
+    __publicField(this, "queue", []);
+    __publicField(this, "queuedBytes", 0);
+    __publicField(this, "seqs", /* @__PURE__ */ new Map());
+    __publicField(this, "inflight", null);
+    __publicField(this, "flushTimer", null);
+    __publicField(this, "retryTimer", null);
+    __publicField(this, "attempt", 0);
+    __publicField(this, "destroyed", false);
+    __publicField(this, "offRecover");
+    this.offRecover = opts.health?.onRecover?.(() => {
+      this.clearRetry();
+      this.attempt = 0;
+      this.flush();
+    }) ?? null;
+  }
+  get pendingChunks() {
+    return this.queue.length;
+  }
+  get bufferedEvents() {
+    return this.buffer?.events.length ?? 0;
+  }
+  push(sessionId, json) {
+    if (this.destroyed) return;
+    if (this.buffer && this.buffer.sessionId !== sessionId) this.seal();
+    const chunk = this.buffer ?? (this.buffer = { sessionId, meta: this.opts.meta(), events: [], bytes: 0 });
+    chunk.events.push(json);
+    chunk.bytes += json.length;
+    if (chunk.bytes > (this.opts.maxBufferBytes ?? 1e6)) this.flush();
+    else if (!this.flushTimer) {
+      this.flushTimer = setTimeout(() => {
+        this.flushTimer = null;
+        this.flush();
+      }, this.opts.flushIntervalMs ?? 1e4);
+    }
+  }
+  /** Seals the buffer and uploads the backlog (one chunk at a time). */
+  flush() {
+    if (this.destroyed) return;
+    this.seal();
+    if (this.retryTimer || this.inflight || !this.queue.length) return;
+    void this.sendNext();
+  }
+  /** Drops everything buffered or queued (consent withdrawn, server disabled replay). */
+  discard() {
+    this.buffer = null;
+    this.queue = [];
+    this.queuedBytes = 0;
+    this.clearFlushTimer();
+    this.clearRetry();
+    this.attempt = 0;
+  }
+  /** Uploads what is left once; no retries afterwards. */
+  destroy() {
+    this.flush();
+    this.destroyed = true;
+    this.offRecover?.();
+    this.clearFlushTimer();
+    this.clearRetry();
+  }
+  clearFlushTimer() {
+    if (this.flushTimer) clearTimeout(this.flushTimer);
+    this.flushTimer = null;
+  }
+  clearRetry() {
+    if (this.retryTimer) clearTimeout(this.retryTimer);
+    this.retryTimer = null;
+  }
+  scheduleRetry(ms) {
+    this.retryTimer = setTimeout(() => {
+      this.retryTimer = null;
+      this.flush();
+    }, ms);
+  }
+  seal() {
+    this.clearFlushTimer();
+    const chunk = this.buffer;
+    this.buffer = null;
+    if (!chunk || !chunk.events.length) return;
+    this.queue.push(chunk);
+    this.queuedBytes += chunk.bytes;
+    const max = this.opts.maxQueuedBytes ?? 5e6;
+    while (this.queuedBytes > max && this.queue.length > 1) {
+      const i = this.inflight && this.queue[0] === this.inflight ? 1 : 0;
+      const [dropped] = this.queue.splice(i, 1);
+      if (!dropped) break;
+      this.queuedBytes -= dropped.bytes;
+      this.opts.log?.(`replay backlog full: dropped a chunk of ${dropped.events.length} events`);
+    }
+  }
+  nextSeq(chunk) {
+    if (chunk.seq === void 0) {
+      const seq = this.seqs.get(chunk.sessionId) ?? 0;
+      this.seqs.set(chunk.sessionId, seq + 1);
+      chunk.seq = seq;
+    }
+    return chunk.seq;
+  }
+  body(chunk) {
+    const head = JSON.stringify({ sessionId: chunk.sessionId, windowId: this.windowId, seq: this.nextSeq(chunk), ...chunk.meta });
+    return `${head.slice(0, -1)},"events":[${chunk.events.join(",")}]}`;
+  }
+  async sendNext() {
+    const chunk = this.queue[0];
+    if (!chunk) return;
+    const wait = this.destroyed ? 0 : this.opts.health?.waitMs() ?? 0;
+    if (wait > 0) return this.scheduleRetry(wait);
+    this.inflight = chunk;
+    const result = await this.upload(this.body(chunk));
+    this.onResult(chunk, result);
+  }
+  async upload(json) {
+    const f = this.opts.fetch();
+    if (!f) return "drop";
+    const ac = typeof AbortController !== "undefined" ? new AbortController() : null;
+    const timer = ac ? setTimeout(() => ac.abort(), UPLOAD_TIMEOUT_MS) : null;
+    try {
+      let res;
+      try {
+        res = await f(this.opts.url(), { method: "POST", body: json, headers: { "Content-Type": "application/json" }, signal: ac?.signal });
+      } catch {
+        this.opts.health?.failure();
+        return "retry";
+      }
+      if (res.status === 429 || res.status >= 500) this.opts.health?.failure();
+      else this.opts.health?.success();
+      if (res.ok) {
+        const data = await res.json().catch(() => null);
+        return data?.disabled ? "disabled" : "ok";
+      }
+      return res.status >= 400 && res.status < 500 && res.status !== 429 ? "drop" : "retry";
+    } finally {
+      if (timer) clearTimeout(timer);
+    }
+  }
+  onResult(chunk, result) {
+    if (this.inflight === chunk) this.inflight = null;
+    if (result === "retry" && this.queue.includes(chunk)) {
+      if (!this.destroyed) {
+        const max = this.opts.maxAttempts ?? 5;
+        this.attempt = Math.min(this.attempt + 1, max);
+        const delay = this.attempt >= max ? this.opts.slowRetryMs ?? 6e4 : backoffMs(this.attempt - 1, 1e3, 8e3);
+        return this.scheduleRetry(Math.max(delay, this.opts.health?.waitMs() ?? 0));
+      }
+      this.opts.log?.("replay upload failed after the recorder stopped; dropping the chunk");
+    }
+    this.attempt = 0;
+    this.remove(chunk);
+    if (result === "disabled") {
+      for (const c of this.queue.slice()) if (c.sessionId === chunk.sessionId) this.remove(c);
+      if (this.buffer?.sessionId === chunk.sessionId) this.buffer = null;
+      this.opts.onDisabled(chunk.sessionId);
+    }
+    if (this.queue.length && !this.retryTimer && !this.inflight) void this.sendNext();
+  }
+  remove(chunk) {
+    const i = this.queue.indexOf(chunk);
+    if (i >= 0) {
+      this.queue.splice(i, 1);
+      this.queuedBytes -= chunk.bytes;
+    }
+  }
+};
+var TOUCH_SETTLE_MS = 200;
+var IDLE_FRAMES = 3;
+var MAX_IDLE_INTERVAL_MS = 5e3;
+var SessionRecorder = class {
+  constructor(opts) {
+    __publicField(this, "opts", opts);
+    __publicField(this, "intervalMs");
+    __publicField(this, "now");
+    __publicField(this, "sid", null);
+    __publicField(this, "foreground", true);
+    __publicField(this, "generation", 0);
+    __publicField(this, "timer", null);
+    __publicField(this, "timerDue", 0);
+    __publicField(this, "capturing", false);
+    __publicField(this, "needKeyframe", true);
+    __publicField(this, "hasKeyframe", false);
+    __publicField(this, "lastFrame", null);
+    __publicField(this, "unchanged", 0);
+    __publicField(this, "captureSoon", false);
+    __publicField(this, "pendingCustom", []);
+    __publicField(this, "touchDown", false);
+    __publicField(this, "downX", 0);
+    __publicField(this, "downY", 0);
+    __publicField(this, "downAt", 0);
+    __publicField(this, "maxDistance", 0);
+    __publicField(this, "lastMoveAt", 0);
+    __publicField(this, "originX", 0);
+    __publicField(this, "originY", 0);
+    /** Viewport of the last frame (points), for chunk metadata. */
+    __publicField(this, "viewportWidth", 0);
+    __publicField(this, "viewportHeight", 0);
+    this.intervalMs = Math.max(500, opts.intervalMs);
+    this.now = opts.now ?? Date.now;
+  }
+  get sessionId() {
+    return this.sid;
+  }
+  get isRecording() {
+    return this.sid !== null;
+  }
+  get currentIntervalMs() {
+    return this.unchanged >= IDLE_FRAMES ? Math.max(this.intervalMs, Math.min(4 * this.intervalMs, MAX_IDLE_INTERVAL_MS)) : this.intervalMs;
+  }
+  /** Starts (or keeps) recording `sessionId`; another session stops the current one first (uploading it). */
+  start(sessionId) {
+    if (this.sid === sessionId) return;
+    if (this.sid !== null) this.stop(false);
+    this.sid = sessionId;
+    this.generation++;
+    this.needKeyframe = true;
+    this.hasKeyframe = false;
+    this.lastFrame = null;
+    this.unchanged = 0;
+    this.captureSoon = false;
+    this.pendingCustom = [];
+    this.touchDown = false;
+    if (this.foreground) this.schedule(0);
+  }
+  /** Stops recording; buffered events are uploaded unless `discard`. */
+  stop(discard) {
+    if (this.sid === null) return;
+    this.sid = null;
+    this.generation++;
+    this.clearTimer();
+    this.capturing = false;
+    this.pendingCustom = [];
+    this.touchDown = false;
+    if (discard) this.opts.uploader.discard();
+    else this.opts.uploader.flush();
+  }
+  /** App backgrounded: no captures; uploads what is buffered. */
+  pause() {
+    this.foreground = false;
+    this.clearTimer();
+    this.generation++;
+    this.capturing = false;
+    this.touchDown = false;
+    this.opts.uploader.flush();
+  }
+  /** App foregrounded: resume with a keyframe. */
+  resume() {
+    if (this.foreground) return;
+    this.foreground = true;
+    this.needKeyframe = true;
+    this.unchanged = 0;
+    if (this.sid !== null) this.schedule(0);
+  }
+  /** A new screen: the next frame is a keyframe with the new href. */
+  onScreen() {
+    if (this.sid === null) return;
+    this.needKeyframe = true;
+    this.activity();
+  }
+  activity() {
+    const wasIdle = this.unchanged >= IDLE_FRAMES;
+    this.unchanged = 0;
+    if (wasIdle && this.sid !== null && this.foreground && !this.capturing && !this.touchDown) this.schedule(this.intervalMs, true);
+  }
+  /** Adds the `guidely` marker for an analytics event. */
+  addGuidelyEvent(name, customName, guideId) {
+    const id = this.sid;
+    if (id === null) return;
+    const payload = { name };
+    if (customName) payload.customName = customName;
+    if (guideId) payload.guideId = guideId;
+    this.activity();
+    const now = this.now();
+    if (!this.hasKeyframe) {
+      if (this.pendingCustom.length < 50) this.pendingCustom.push([now, payload]);
+      return;
+    }
+    this.opts.uploader.push(id, RrwebEvents.custom(now, "guidely", payload));
+  }
+  /** A primary-pointer touch at (x, y) points from the React root view. */
+  touch(phase, rootX, rootY) {
+    const id = this.sid;
+    if (id === null || !this.foreground) return;
+    const x = rootX + this.originX;
+    const y = rootY + this.originY;
+    const now = this.now();
+    const emit = this.hasKeyframe;
+    const push = (json) => emit && this.opts.uploader.push(id, json);
+    switch (phase) {
+      case "down":
+        this.touchDown = true;
+        this.unchanged = 0;
+        this.downX = x;
+        this.downY = y;
+        this.downAt = now;
+        this.maxDistance = 0;
+        this.lastMoveAt = now;
+        push(RrwebEvents.interaction(now, RrwebEvents.TOUCH_START, x, y));
+        return;
+      case "move":
+        if (!this.touchDown) return;
+        this.maxDistance = Math.max(this.maxDistance, Math.hypot(x - this.downX, y - this.downY));
+        if (now - this.lastMoveAt < 50) return;
+        this.lastMoveAt = now;
+        push(RrwebEvents.touchMove(now, x, y));
+        return;
+      default:
+        if (!this.touchDown) return;
+        this.touchDown = false;
+        this.unchanged = 0;
+        this.maxDistance = Math.max(this.maxDistance, Math.hypot(x - this.downX, y - this.downY));
+        push(RrwebEvents.interaction(now, RrwebEvents.TOUCH_END, x, y));
+        if (phase === "up" && this.maxDistance <= 10 && now - this.downAt < 1e3) push(RrwebEvents.interaction(now, RrwebEvents.CLICK, x, y));
+        if (this.capturing) this.captureSoon = true;
+        else this.schedule(TOUCH_SETTLE_MS, true);
+    }
+  }
+  clearTimer() {
+    if (this.timer) clearTimeout(this.timer);
+    this.timer = null;
+  }
+  /** Schedules the next capture `delay` ms from now, or keeps an earlier one when `ifSooner`. */
+  schedule(delay, ifSooner = false) {
+    const due = this.now() + delay;
+    if (ifSooner && this.timer && this.timerDue <= due) return;
+    this.clearTimer();
+    this.timerDue = due;
+    const gen = this.generation;
+    this.timer = setTimeout(() => {
+      this.timer = null;
+      if (gen === this.generation) void this.tick();
+    }, delay);
+  }
+  async tick() {
+    if (this.sid === null || !this.foreground || this.capturing) return;
+    if (this.touchDown) {
+      this.schedule(this.intervalMs);
+      return;
+    }
+    this.capturing = true;
+    this.captureSoon = false;
+    const gen = this.generation;
+    let frame = null;
+    try {
+      frame = await this.opts.capturer(await this.opts.captureOptions());
+    } catch (err) {
+      this.opts.onError?.(err);
+    }
+    if (gen !== this.generation) return;
+    this.capturing = false;
+    if (frame) this.onFrame(frame, this.now());
+    if (this.sid !== null && this.foreground) this.schedule(this.captureSoon ? TOUCH_SETTLE_MS : this.currentIntervalMs);
+  }
+  onFrame(frame, at) {
+    const id = this.sid;
+    if (id === null || !(frame.width > 0) || !(frame.height > 0) || !frame.base64) return;
+    const sizeChanged = frame.width !== this.viewportWidth || frame.height !== this.viewportHeight;
+    const keyframe = this.needKeyframe || !this.hasKeyframe || sizeChanged;
+    if (!keyframe && this.lastFrame === frame.base64) {
+      this.unchanged++;
+      return;
+    }
+    this.unchanged = 0;
+    this.lastFrame = frame.base64;
+    this.originX = frame.originX ?? 0;
+    this.originY = frame.originY ?? 0;
+    this.viewportWidth = frame.width;
+    this.viewportHeight = frame.height;
+    const url = RrwebEvents.dataUrl(frame.base64);
+    const up = this.opts.uploader;
+    if (!keyframe) return up.push(id, RrwebEvents.frame(at, url));
+    this.needKeyframe = false;
+    up.push(id, RrwebEvents.meta(at, this.opts.href(), frame.width, frame.height));
+    up.push(id, RrwebEvents.fullSnapshot(at, url, frame.width, frame.height));
+    if (!this.hasKeyframe) {
+      this.hasKeyframe = true;
+      for (const [ts, payload] of this.pendingCustom) up.push(id, RrwebEvents.custom(Math.max(ts, at), "guidely", payload));
+      this.pendingCustom = [];
+    }
+  }
+};
+
 // src/core/storage.ts
 var PersistentStore = class {
   constructor(backing, onError = () => {
@@ -2545,7 +2967,7 @@ var PersistentStore = class {
 
 // src/core/client.ts
 var SDK_NAME = "@guidelytech/react-native";
-var SDK_VERSION = "0.12.0";
+var SDK_VERSION = "0.13.0";
 var DEFAULT_API_URL = "https://guidelytech.com";
 var PAGE_SCOPED = /* @__PURE__ */ new Set(["page_load", "url_match", "element_click", "element_visible", "delay"]);
 var CACHED_START_MS = 1500;
@@ -2606,6 +3028,10 @@ var GuidelyClient = class {
     __publicField(this, "lastAudiences", /* @__PURE__ */ new Set());
     __publicField(this, "backgroundedAt", null);
     __publicField(this, "messenger", null);
+    __publicField(this, "replayUploader", null);
+    __publicField(this, "recorder", null);
+    /** Replay decision for the current session (sampled once; forced by start/stopSessionRecording). */
+    __publicField(this, "replayDecision", null);
     __publicField(this, "ui", { steps: [], checklists: [], survey: null, resourceCenterOpen: false, theme: {}, messenger: false });
     __publicField(this, "uiListeners", /* @__PURE__ */ new Set());
     /** Feature flags for this environment: `guidely.flags.isEnabled("new-checkout")`. */
@@ -2757,6 +3183,7 @@ var GuidelyClient = class {
       if (this.destroyed) return;
       this.isReady = true;
       if (this.config) this.emitter.emit("ready", this.config);
+      this.syncReplay();
       this.notify();
       this.evaluate("ready");
     } catch (err) {
@@ -2783,6 +3210,7 @@ var GuidelyClient = class {
         this.syncMessenger();
         if (this.hydrated) this.checkLaunch();
         this.emitter.emit("config", this.config);
+        this.syncReplay();
         this.log("config loaded", this.config.configVersion, `${this.config.guides.length} guides`);
         return true;
       }
@@ -2835,6 +3263,7 @@ var GuidelyClient = class {
       void this.outbox?.flush();
       void this.store.flush();
       void this.flags.flush();
+      this.recorder?.pause();
       this.messenger?.setForeground(false);
     } else if (state === "active" && this.backgroundedAt !== null) {
       this.messenger?.setForeground(true);
@@ -2844,7 +3273,10 @@ var GuidelyClient = class {
         this.session = newSession();
         this.persistSession();
         this.firedDelays.clear();
+        this.recorder?.stop(false);
       }
+      this.recorder?.resume();
+      this.syncReplay();
       this.cameToForeground();
       void this.flags.refresh();
       if (Date.now() - this.configFetchedAt > this.options.configRefreshMs && this.api.health.canSend()) void this.refresh();
@@ -2867,6 +3299,9 @@ var GuidelyClient = class {
     this.queued = [];
     this.messenger?.destroy();
     this.messenger = null;
+    this.recorder?.stop(!this.analyticsEnabled());
+    this.recorder = null;
+    this.replayUploader?.destroy();
     this.visibilityWatchers.forEach((stop) => stop());
     this.visibilityWatchers.clear();
     this.timers.forEach((t) => clearTimeout(t));
@@ -2981,6 +3416,7 @@ var GuidelyClient = class {
       this.store.set(KEYS.anon, this.anonymousId);
       this.state = emptyState();
       this.persistState();
+      this.recorder?.stop(false);
       this.session = newSession();
       this.persistSession();
       this.lastAudiences = /* @__PURE__ */ new Set();
@@ -2988,6 +3424,7 @@ var GuidelyClient = class {
       this.firstVisit = true;
       this.exposures.clear();
       this.syncFlagAttributes();
+      this.syncReplay();
       this.emitter.emit("identify", { userId: null, anonymousId: this.anonymousId });
       this.notify();
       if (this.isReady) this.evaluate("identify");
@@ -3002,6 +3439,7 @@ var GuidelyClient = class {
     this.whenHydrated(() => {
       if (consent === "denied") this.queue?.clear();
       else if (consent === "granted") void this.queue?.flush();
+      this.syncReplay();
     });
   }
   analyticsEnabled() {
@@ -3030,6 +3468,7 @@ var GuidelyClient = class {
     const locale = extra.guideId ? this.guideLocales.get(extra.guideId) : void 0;
     if (locale) event.properties = { ...event.properties ?? {}, locale };
     this.queue.enqueue(event);
+    this.recorder?.addGuidelyEvent(name, event.customName, event.guideId);
     this.emitter.emit("track", event);
     return event;
   }
@@ -3067,6 +3506,7 @@ var GuidelyClient = class {
       }
       this.screenName = name;
       this.targets.setScreen(name);
+      if (changed) this.recorder?.onScreen();
       if (changed) this.syncFlagAttributes();
       const url = this.currentUrl();
       if (changed) {
@@ -3101,6 +3541,112 @@ var GuidelyClient = class {
     if (this.isReady) this.evaluate("click", { targetId });
   }
   // ---------------------------------------------------------------------------
+  // Session replay
+  // ---------------------------------------------------------------------------
+  replaySettings() {
+    const r = this.config?.settings?.replay;
+    if (!r?.enabled || !this.options.sessionReplay?.enabled || !this.bridge.capturer) return null;
+    return r;
+  }
+  /** Reconciles recording with config, consent, readiness, the session and its sample decision. Idempotent. */
+  syncReplay() {
+    if (this.destroyed || !this.hydrated) return;
+    const r = this.isReady && this.analyticsEnabled() ? this.replaySettings() : null;
+    const id = this.session.id;
+    if (r && this.replayDecision?.sessionId !== id) {
+      this.replayDecision = { sessionId: id, record: rolloutBucket(id, "replay") < (r.sampleRate ?? 100) };
+      this.log(`replay ${this.replayDecision.record ? "sampled" : "not sampled"} for session ${id}`);
+    }
+    if (!r || !this.replayDecision?.record) {
+      if (this.recorder?.isRecording) this.recorder.stop(!this.analyticsEnabled());
+      return;
+    }
+    const rec = this.recorder ?? this.createRecorder();
+    if (rec && rec.sessionId !== id) {
+      this.log(`recording session ${id}`);
+      rec.start(id);
+    }
+  }
+  createRecorder() {
+    const capturer = this.bridge.capturer;
+    if (!capturer) return null;
+    const uploader = this.replayUploader ?? (this.replayUploader = new ReplayUploader({
+      url: () => this.api.url("/replay"),
+      fetch: () => this.options.fetch ?? (typeof fetch === "function" ? fetch : null),
+      health: this.api.health,
+      meta: () => {
+        const rec2 = this.recorder;
+        return {
+          anonymousId: this.anonymousId,
+          userId: this.user?.id || null,
+          ...this.collectUrls() && this.screenName ? { url: this.currentUrl() } : {},
+          device: { type: this.bridge.device.deviceType, os: this.bridge.device.platform },
+          ...rec2 && rec2.viewportWidth > 0 && rec2.viewportHeight > 0 ? { viewport: { width: rec2.viewportWidth, height: rec2.viewportHeight } } : {},
+          sdk: { name: SDK_NAME, version: SDK_VERSION }
+        };
+      },
+      onDisabled: (sid) => {
+        if (sid !== this.session.id) return;
+        this.log(`replay disabled by the server for session ${sid}`);
+        this.replayDecision = { sessionId: sid, record: false };
+        this.recorder?.stop(true);
+      },
+      log: (m) => this.log(m)
+    }));
+    const opts = this.options.sessionReplay ?? {};
+    const rec = new SessionRecorder({
+      capturer,
+      uploader,
+      intervalMs: opts.captureIntervalMs ?? 1e3,
+      captureOptions: () => this.replayCaptureOptions(),
+      href: () => this.currentUrl(),
+      onError: (err) => this.reportError(err)
+    });
+    if (this.backgroundedAt !== null) rec.pause();
+    this.recorder = rec;
+    return rec;
+  }
+  async replayCaptureOptions() {
+    const r = this.config?.settings?.replay;
+    const opts = this.options.sessionReplay ?? {};
+    const ids = new Set((r?.blockSelectors ?? []).map((sel) => guidelyIdFromSelector(sel)).filter((id) => !!id));
+    const rects = await Promise.all(Array.from(ids, (id) => this.targets.measure(id)));
+    return { maskAllText: !!opts.maskAllText || !!r?.maskAllText, maskAllImages: !!opts.maskAllImages, blockRects: rects.filter((rect) => !!rect) };
+  }
+  /**
+   * Records this session even when it was not sampled (still needs `sessionReplay.enabled`, replay
+   * enabled for the project, analytics consent and the native replay module). Sticks until the session ends.
+   */
+  startSessionRecording() {
+    this.whenHydrated(() => {
+      this.replayDecision = { sessionId: this.session.id, record: true };
+      this.syncReplay();
+    });
+  }
+  /** Stops recording for the rest of this session; what was recorded is uploaded. */
+  stopSessionRecording() {
+    this.whenHydrated(() => {
+      this.replayDecision = { sessionId: this.session.id, record: false };
+      this.recorder?.stop(false);
+    });
+  }
+  /** True while this session is being recorded. */
+  isRecording() {
+    return !!this.recorder?.isRecording;
+  }
+  /** The current analytics session id (also the replay id). */
+  getSessionId() {
+    return this.session.id;
+  }
+  /** True when touches should be passed to {@link recordTouch}. */
+  isRecordingTouches() {
+    return !!this.recorder?.isRecording;
+  }
+  /** A primary-pointer touch on the app, in window points (the provider's touch observer calls this). */
+  recordTouch(phase, x, y) {
+    this.recorder?.touch(phase, x, y);
+  }
+  // ---------------------------------------------------------------------------
   // Product analytics (autocapture)
   // ---------------------------------------------------------------------------
   captureAllowed() {
@@ -3147,7 +3693,7 @@ var GuidelyClient = class {
     }
     if (this.destroyed) return;
     const platform = this.bridge.device.platform;
-    const maskAll = !!this.config?.settings?.replay?.maskAllText;
+    const maskAll = !!this.config?.settings?.replay?.maskAllText || !!this.options.sessionReplay?.maskAllText;
     const eventUrl = this.collectUrls() && url ? url : void 0;
     if (on.clicks && el) this.enqueue("click", { url: eventUrl, properties: { ...tapProperties(el, tap.x, tap.y, platform, maskAll) } });
     const count = this.rage.add(tap.x, tap.y, t);
@@ -6106,8 +6652,9 @@ function rcLauncherLabel(client) {
 
 // src/ui/Autocapture.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
+var GUIDELY_MASK_NATIVE_ID = "guidely-mask";
 function GuidelyMask({ children, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native11.View, { ...rest, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native11.View, { collapsable: false, ...rest, nativeID: GUIDELY_MASK_NATIVE_ID, children });
 }
 var RESOLVE = {
   isIgnored: (type) => type === GuidelyOverlay,
@@ -6118,6 +6665,18 @@ function useTapObserver(client) {
   clientRef.current = client;
   return (0, import_react8.useMemo)(() => {
     const tracker = new TapTracker();
+    let replayPointer = null;
+    const replay = (phase, e) => {
+      const c = clientRef.current;
+      const n = e.nativeEvent;
+      if (!c?.isRecordingTouches()) return void (replayPointer = null);
+      if (phase === "down") {
+        if (replayPointer !== null) return;
+        replayPointer = n.identifier;
+      } else if (n.identifier !== replayPointer) return;
+      if (phase === "up" || phase === "cancel") replayPointer = null;
+      c.recordTouch(phase, n.pageX, n.pageY);
+    };
     const guard = (fn) => (e) => {
       try {
         fn(e);
@@ -6127,12 +6686,17 @@ function useTapObserver(client) {
     };
     return {
       onTouchStartCapture: guard((e) => {
+        replay("down", e);
         const n = e.nativeEvent;
         if (!clientRef.current?.isTapCaptureOn()) return tracker.cancel();
         tracker.begin(n.pageX, n.pageY, Date.now(), Array.isArray(n.touches) ? n.touches.length : 1, n.identifier);
       }),
-      onTouchMoveCapture: guard((e) => tracker.move(e.nativeEvent.pageX, e.nativeEvent.pageY, e.nativeEvent.identifier)),
+      onTouchMoveCapture: guard((e) => {
+        replay("move", e);
+        tracker.move(e.nativeEvent.pageX, e.nativeEvent.pageY, e.nativeEvent.identifier);
+      }),
       onTouchEndCapture: guard((e) => {
+        replay("up", e);
         const n = e.nativeEvent;
         const tap = tracker.end(n.pageX, n.pageY, Date.now(), n.identifier);
         const c = clientRef.current;
@@ -6140,7 +6704,10 @@ function useTapObserver(client) {
         const r = resolveTapTarget(e, RESOLVE);
         if (!r.ignored) c.recordTap({ x: tap.x, y: tap.y, t: Date.now(), element: r.element, hit: r.hit });
       }),
-      onTouchCancelCapture: guard(() => tracker.cancel())
+      onTouchCancelCapture: guard((e) => {
+        replay("cancel", e);
+        tracker.cancel();
+      })
     };
   }, []);
 }
@@ -6234,9 +6801,15 @@ function defaultBridge(appVersion) {
     },
     openExternal: (url) => void import_react_native13.Linking.openURL(url).catch(() => {
     }),
-    windowSize: () => import_react_native13.Dimensions.get("window")
+    windowSize: () => import_react_native13.Dimensions.get("window"),
+    capturer: nativeCapturer()
   };
 }
+function nativeCapturer() {
+  const mod = import_react_native13.NativeModules.GuidelyReplay;
+  if (!mod || typeof mod.capture !== "function") return void 0;
+  return (options) => mod.capture(options);
+}
 function GuidelyProvider({ children, user, insets, launcherOffset = 72, flagsPayload, flagAttributes, ...options }) {
   const [client, setClient] = (0, import_react10.useState)(null);
   const optionsRef = (0, import_react10.useRef)(options);
@@ -6306,7 +6879,7 @@ function GuidelyProvider({ children, user, insets, launcherOffset = 72, flagsPay
   const flags = (0, import_react10.useMemo)(() => ({ client: client?.flags ?? null, bootstrap }), [client, bootstrap]);
   const tapObserver = useTapObserver(client);
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(GuidelyContext.Provider, { value: client, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(FlagsContext.Provider, { value: flags, children: [
-    options.autocapture === false ? children : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native13.View, { style: styles10.root, ...tapObserver, children }),
+    options.autocapture === false && !options.sessionReplay?.enabled ? children : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native13.View, { style: styles10.root, ...tapObserver, children }),
     client ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(GuidelyOverlay, { client, insets, launcherOffset }) : null
   ] }) });
 }
@@ -6326,6 +6899,9 @@ var NOOP_RESULTS = {
   getMessenger: null,
   isGuideCompleted: false,
   isClientReady: false,
+  isRecording: false,
+  isRecordingTouches: false,
+  getSessionId: "",
   getScreen: "",
   on: () => {
   },
@@ -6460,8 +7036,11 @@ function useActiveGuide() {
   InMemoryStickyBucketStore,
   Messenger,
   RageClickDetector,
+  ReplayUploader,
+  RrwebEvents,
   SDK_NAME,
   SDK_VERSION,
+  SessionRecorder,
   TapTracker,
   TargetRegistry,
   createFlagsClient,